This commit is contained in:
zzossig 2019-11-05 17:11:56 +09:00
parent cc48355c18
commit 68dcd09364
7 changed files with 321 additions and 343 deletions

View File

@ -20,78 +20,72 @@
{{ partial "body/photoswipe" . }} {{ partial "body/photoswipe" . }}
{{ $masonry := resources.Get `js/masonry.pkgd.min.js` | fingerprint }} {{ $masonry := resources.Get `js/masonry.pkgd.min.js` | fingerprint }}
{{ $enquire := resources.Get `js/enquire.min.js` | fingerprint }} <script defer src="{{ $masonry.RelPermalink }}"></script>
{{ $imagesloaded := resources.Get `js/imagesloaded.pkgd.min.js` | fingerprint }} {{ $imagesloaded := resources.Get `js/imagesloaded.pkgd.min.js` | fingerprint }}
<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
<script> <script>
fetchInject([ var $grid = $('.grid').masonry({
"{{ $masonry.RelPermalink }}", itemSelector: '.grid-item',
"{{ $imagesloaded.RelPermalink }}", columnWidth: '.grid-sizer',
"{{ $enquire.RelPermalink }}", percentPosition: true,
]).then(() => { });
var $grid = $('.grid').masonry({ $grid.imagesLoaded().progress(function () {
itemSelector: '.grid-item', $grid.masonry();
columnWidth: '.grid-sizer', });
percentPosition: true,
});
$grid.imagesLoaded().progress(function () {
$grid.masonry();
});
enquire.register("screen and (max-width:500px)", {
match: function () {
$('.grid-item').addClass('full');
$('.grid-sizer').addClass('full');
$('.grid-item').removeClass('half');
$('.grid-sizer').removeClass('half');
},
unmatch: function () {
$('.grid-item').addClass('half');
$('.grid-sizer').addClass('half');
$('.grid-item').removeClass('full');
$('.grid-sizer').removeClass('full');
},
}).register("screen and (max-width:700px)", {
match: function () {
$('.grid-item').addClass('half');
$('.grid-sizer').addClass('half');
$('.grid-item').removeClass('third');
$('.grid-sizer').removeClass('third');
},
unmatch: function () {
$('.grid-item').addClass('third');
$('.grid-sizer').addClass('third');
$('.grid-item').removeClass('half');
$('.grid-sizer').removeClass('half');
},
}).register("screen and (max-width:900px)", {
match: function () {
$('.grid-item').addClass('third');
$('.grid-sizer').addClass('third');
$('.grid-item').removeClass('quarter');
$('.grid-sizer').removeClass('quarter');
},
unmatch: function () {
$('.grid-item').addClass('quarter');
$('.grid-sizer').addClass('quarter');
$('.grid-item').removeClass('third');
$('.grid-sizer').removeClass('third');
},
}).register("screen and (max-width:1200px)", {
match: function () {
$('.grid-item').addClass('quarter');
$('.grid-sizer').addClass('quarter');
$('.grid-item').removeClass('fifth');
$('.grid-sizer').removeClass('fifth');
},
unmatch: function () {
$('.grid-item').addClass('fifth');
$('.grid-sizer').addClass('fifth');
$('.grid-item').removeClass('quarter');
$('.grid-sizer').removeClass('quarter');
},
});
enquire.register("screen and (max-width:500px)", {
match: function () {
$('.grid-item').addClass('full');
$('.grid-sizer').addClass('full');
$('.grid-item').removeClass('half');
$('.grid-sizer').removeClass('half');
},
unmatch: function () {
$('.grid-item').addClass('half');
$('.grid-sizer').addClass('half');
$('.grid-item').removeClass('full');
$('.grid-sizer').removeClass('full');
},
}).register("screen and (max-width:700px)", {
match: function () {
$('.grid-item').addClass('half');
$('.grid-sizer').addClass('half');
$('.grid-item').removeClass('third');
$('.grid-sizer').removeClass('third');
},
unmatch: function () {
$('.grid-item').addClass('third');
$('.grid-sizer').addClass('third');
$('.grid-item').removeClass('half');
$('.grid-sizer').removeClass('half');
},
}).register("screen and (max-width:900px)", {
match: function () {
$('.grid-item').addClass('third');
$('.grid-sizer').addClass('third');
$('.grid-item').removeClass('quarter');
$('.grid-sizer').removeClass('quarter');
},
unmatch: function () {
$('.grid-item').addClass('quarter');
$('.grid-sizer').addClass('quarter');
$('.grid-item').removeClass('third');
$('.grid-sizer').removeClass('third');
},
}).register("screen and (max-width:1200px)", {
match: function () {
$('.grid-item').addClass('quarter');
$('.grid-sizer').addClass('quarter');
$('.grid-item').removeClass('fifth');
$('.grid-sizer').removeClass('fifth');
},
unmatch: function () {
$('.grid-item').addClass('fifth');
$('.grid-sizer').addClass('fifth');
$('.grid-item').removeClass('quarter');
$('.grid-sizer').removeClass('quarter');
},
}); });
</script> </script>

View File

@ -1,15 +1,12 @@
{{ if $.Param "enableCustomScrollbar" }} {{ if $.Param "enableCustomScrollbar" }}
{{ $customscrollbar := resources.Get `js/perfect-scrollbar.jquery.min.js` | fingerprint }} {{ $customscrollbar := resources.Get `js/perfect-scrollbar.jquery.min.js` | fingerprint }}
<script defer src="{{ $customscrollbar.RelPermalink }}"></script>
{{ $customScrollbarStyle := resources.Get "css/perfect-scrollbar.min.css" }} {{ $customScrollbarStyle := resources.Get "css/perfect-scrollbar.min.css" }}
<script defer src="{{ $customScrollbarStyle.RelPermalink }}"></script>
<script> <script>
fetchInject([ var pre = $('pre');
"{{ $customscrollbar.RelPermalink }}", pre.perfectScrollbar();
"{{ $customScrollbarStyle.RelPermalink }}",
]).then(() => {
var pre = $('pre');
pre.perfectScrollbar();
});
</script> </script>
{{ end }} {{ end }}

View File

@ -68,58 +68,55 @@
</div> </div>
{{ $photoSwipe := resources.Get `js/photoswipe.min.js` | fingerprint }} {{ $photoSwipe := resources.Get `js/photoswipe.min.js` | fingerprint }}
<script defer src="{{ $photoSwipe.RelPermalink }}"></script>
{{ $photoSwipeUi := resources.Get `js/photoswipe-ui-default.min.js` | fingerprint }} {{ $photoSwipeUi := resources.Get `js/photoswipe-ui-default.min.js` | fingerprint }}
<script defer src="{{ $photoSwipeUi.RelPermalink }}"></script>
{{ $photoSwipeStyle := resources.Get "css/photoswipe/photoswipe.css" }} {{ $photoSwipeStyle := resources.Get "css/photoswipe/photoswipe.css" }}
<script defer src="{{ $photoSwipeStyle.RelPermalink }}"></script>
{{ $photoSwipeSkin := resources.Get "css/photoswipe/custom-skin.css" }} {{ $photoSwipeSkin := resources.Get "css/photoswipe/custom-skin.css" }}
<script defer src="{{ $photoSwipeSkin.RelPermalink }}"></script>
<script> <script>
fetchInject([ var pswpElement = $('.pswp')[0];
"{{ $photoSwipe.RelPermalink }}", var imgElements = $('.single__contents').find('img');
"{{ $photoSwipeUi.RelPermalink }}", var items = [];
"{{ $photoSwipeStyle.RelPermalink }}",
"{{ $photoSwipeSkin.RelPermalink }}",
]).then(() => {
var pswpElement = $('.pswp')[0];
var imgElements = $('.single__contents').find('img');
var items = [];
imgElements.each(function (i, v) { imgElements.each(function (i, v) {
$(this).click(function(e) { $(this).click(function (e) {
initGallery(i); initGallery(i);
}); });
$(this).css('cursor', 'pointer'); $(this).css('cursor', 'pointer');
items.push({ items.push({
src: v.src, src: v.src,
w: 0, w: 0,
h: 0, h: 0,
title: filename(v.src), title: filename(v.src),
});
}); });
function filename(str) {
var s = str.replace(/\\/g, '/');
s = s.substring(s.lastIndexOf('/') + 1);
return str ? s.replace(/[?#].+$/, '') : s.split('.')[0];
}
function initGallery(index) {
var options = { index: index };
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.listen('imageLoadComplete', function (index, item) {
if (item.h < 1 || item.w < 1) {
let img = new Image();
img.onload = () => {
item.w = img.width;
item.h = img.height;
gallery.invalidateCurrItems();
gallery.updateSize(true);
}
img.src = item.src;
}
})
gallery.init();
}
}); });
function filename(str) {
var s = str.replace(/\\/g, '/');
s = s.substring(s.lastIndexOf('/') + 1);
return str ? s.replace(/[?#].+$/, '') : s.split('.')[0];
}
function initGallery(index) {
var options = { index: index };
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.listen('imageLoadComplete', function (index, item) {
if (item.h < 1 || item.w < 1) {
let img = new Image();
img.onload = () => {
item.w = img.width;
item.h = img.height;
gallery.invalidateCurrItems();
gallery.updateSize(true);
}
img.src = item.src;
}
})
gallery.init();
}
</script> </script>
{{ end }} {{ end }}

View File

@ -1,5 +1,3 @@
{{ $fetchinject := resources.Get "js/fetch-inject.umd.min.js" | resources.Fingerprint }}
<script src="{{ $fetchinject.RelPermalink }}"></script>
{{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }} {{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
<script src="{{ $jquery.RelPermalink }}"></script> <script src="{{ $jquery.RelPermalink }}"></script>
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }} {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}

View File

@ -8,103 +8,100 @@
</div> </div>
{{ $toc := resources.Get `js/jquery.toc.min.js` | fingerprint }} {{ $toc := resources.Get `js/jquery.toc.min.js` | fingerprint }}
<script defer src="{{ $toc.RelPermalink }}"></script>
<script> <script>
fetchInject([ var navbar = $('.navbar');
"{{ $toc.RelPermalink }}",
]).then(() => {
var navbar = $('.navbar');
$("#toc").toc({ content: ".single__contents", headings: "h1,h2,h3,h4" }); $("#toc").toc({ content: ".single__contents", headings: "h1,h2,h3,h4" });
$('#toc > li').each(function () { $('#toc > li').each(function () {
$(this).find('ul').css('display', 'none'); $(this).find('ul').css('display', 'none');
}); });
$('#toc a').each(function () { $('#toc a').each(function () {
$(this).click(function () { $(this).click(function () {
navbar.removeClass('navbar--show'); navbar.removeClass('navbar--show');
navbar.removeClass('navbar--hide'); navbar.removeClass('navbar--hide');
navbar.addClass('navbar--hide'); navbar.addClass('navbar--hide');
$(".single__contents :header").each(function () { $(".single__contents :header").each(function () {
$('.toc a').removeClass('active'); $('.toc a').removeClass('active');
});
$(this).addClass('active');
$('#toc > li').each(function () {
$(this).find('ul').css('display', 'none');
});
$(this).next().css('display', 'block');
$(this).parents('ul').css('display', 'block');
}); });
}); $(this).addClass('active');
// Add link button for every $('#toc > li').each(function () {
var text, clip = new ClipboardJS('.anchor'); $(this).find('ul').css('display', 'none');
var headers = $('.single__contents :header').not('h6').not('h5'); });
headers.append(function (index, html) { $(this).next().css('display', 'block');
var element = $(this); $(this).parents('ul').css('display', 'block');
var url = encodeURI(document.location.origin + document.location.pathname);
var link = url + "#" + element[0].id;
return " <span class='anchor hide' data-clipboard-text='" + link + "' style='position: relative;'>" +
"<span style='font-size: 1rem; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%)'>🔗</span>" +
"</span>"
;
});
headers.on('mouseenter', function() {
$(this).find('.anchor').attr('class', 'anchor');
});
headers.on('mouseleave', function () {
$(this).find('.anchor').attr('class', 'anchor hide');
}); });
});
$(".anchor").on('mouseleave', function (e) { // Add link button for every
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w'); var text, clip = new ClipboardJS('.anchor');
}); var headers = $('.single__contents :header').not('h6').not('h5');
headers.append(function (index, html) {
var element = $(this);
var url = encodeURI(document.location.origin + document.location.pathname);
var link = url + "#" + element[0].id;
return " <span class='anchor hide' data-clipboard-text='" + link + "' style='position: relative;'>" +
"<span style='font-size: 1rem; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%)'>🔗</span>" +
"</span>"
;
});
headers.on('mouseenter', function () {
$(this).find('.anchor').attr('class', 'anchor');
});
headers.on('mouseleave', function () {
$(this).find('.anchor').attr('class', 'anchor hide');
});
clip.on('success', function (e) { $(".anchor").on('mouseleave', function (e) {
e.clearSelection(); $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
$(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s'); });
});
// clipboard clip.on('success', function (e) {
var clipInit = false; e.clearSelection();
$('code').each(function () { $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
var code = $(this), });
text = code.text();
if (text.length > 30) { // clipboard
if (!clipInit) { var clipInit = false;
var text, clip = new ClipboardJS('.copy-to-clipboard', { $('code').each(function () {
text: function (trigger) { var code = $(this),
text = $(trigger).prev('code').text(); text = code.text();
return text.replace(/^\$\s/gm, '');
}
});
var inPre; if (text.length > 30) {
clip.on('success', function (e) { if (!clipInit) {
e.clearSelection(); var text, clip = new ClipboardJS('.copy-to-clipboard', {
inPre = $(e.trigger).parent().prop('tagName') == 'PRE'; text: function (trigger) {
text = $(trigger).prev('code').text();
return text.replace(/^\$\s/gm, '');
}
});
var inPre;
clip.on('success', function (e) {
e.clearSelection();
inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
$(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
});
clip.on('error', function (e) {
inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
$(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
$(document).one('copy', function () {
$(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's')); $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
}); });
clip.on('error', function (e) {
inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
$(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
$(document).one('copy', function () {
$(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
});
});
clipInit = true;
}
code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
code.next('.copy-to-clipboard').on('mouseleave', function () {
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
}); });
clipInit = true;
} }
});
code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
code.next('.copy-to-clipboard').on('mouseleave', function () {
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
});
}
}); });
</script> </script>

View File

@ -1,41 +1,38 @@
{{ if $.Param "enableMark" }} {{ if $.Param "enableMark" }}
{{ $mark := resources.Get "js/jquery.mark.min.js" | fingerprint }} {{ $mark := resources.Get "js/jquery.mark.min.js" | fingerprint }}
<script defer src="{{ $mark.RelPermalink }}"></script>
<script> <script>
fetchInject([ var mark = function () {
"{{ $mark.RelPermalink }}", var keyword = $("#search").val();
]).then(() => { var options = {
var mark = function () { "element": "mark",
var keyword = $("#search").val(); "className": "",
var options = { "exclude": [],
"element": "mark", "iframes": false,
"className": "", "iframesTimeout": 5000,
"exclude": [], "acrossElements": false,
"iframes": false, "ignoreGroups": 0,
"iframesTimeout": 5000, "each": function (node) {
"acrossElements": false, },
"ignoreGroups": 0, "filter": function (textNode, foundTerm, totalCounter) {
"each": function (node) { return true;
}, },
"filter": function (textNode, foundTerm, totalCounter) { "noMatch": function (term) {
return true; },
}, "done": function (counter) {
"noMatch": function (term) { },
}, "debug": false,
"done": function (counter) { "log": window.console
},
"debug": false,
"log": window.console
};
$(".container").unmark({
done: function () {
$(".container").mark(keyword, options);
}
});
}; };
$("#search").on("input", mark); $(".container").unmark({
}); done: function () {
$(".container").mark(keyword, options);
}
});
};
$("#search").on("input", mark);
</script> </script>
{{ end }} {{ end }}

View File

@ -13,6 +13,7 @@
{{ partial "sidebar/site-mark" . }} {{ partial "sidebar/site-mark" . }}
{{ $lunr := resources.Get "js/lunr.min.js" | fingerprint }} {{ $lunr := resources.Get "js/lunr.min.js" | fingerprint }}
<script defer src="{{ $lunr.RelPermalink }}"></script>
<script> <script>
{{ if .Site.IsMultiLingual }} {{ if .Site.IsMultiLingual }}
@ -20,129 +21,126 @@
{{ else }} {{ else }}
var baseurl = "{{.Site.BaseURL}}"; var baseurl = "{{.Site.BaseURL}}";
{{ end }} {{ end }}
fetchInject([
"{{ $lunr.RelPermalink }}",
]).then(() => {
var lunrIndex = null;
var pagesIndex = null;
var searchResults = null;
var searchMenu = null;
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
function initLunr() { var lunrIndex = null;
if (!endsWith(baseurl, "/")) { var pagesIndex = null;
baseurl = baseurl + '/'; var searchResults = null;
}; var searchMenu = null;
$.getJSON(baseurl + "index.json") function endsWith(str, suffix) {
.done(function (index) { return str.indexOf(suffix, str.length - suffix.length) !== -1;
pagesIndex = index; }
lunrIndex = lunr(function () {
this.ref('uri');
this.field('title');
this.field('description');
//this.field('content');
//this.field('tags');
//this.field('series');
//this.field('categories');
var that = this; function initLunr() {
index.forEach(function(page) { if (!endsWith(baseurl, "/")) {
that.add(page); baseurl = baseurl + '/';
}); };
$.getJSON(baseurl + "index.json")
.done(function (index) {
pagesIndex = index;
lunrIndex = lunr(function () {
this.ref('uri');
this.field('title');
this.field('description');
//this.field('content');
//this.field('tags');
//this.field('series');
//this.field('categories');
var that = this;
index.forEach(function (page) {
that.add(page);
}); });
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.error("Error getting Hugo index file:", err);
}); });
} })
.fail(function (jqxhr, textStatus, error) {
function search(query) { var err = textStatus + ", " + error;
return lunrIndex.search(query).map(function (result) { console.error("Error getting Hugo index file:", err);
return pagesIndex.filter(function (page) {
return page.uri === result.ref;
})[0];
}); });
} }
function renderSearchResults(results) { function search(query) {
searchResults = document.getElementById('search-results'); return lunrIndex.search(query).map(function (result) {
searchMenu = document.getElementById('search-menu'); return pagesIndex.filter(function (page) {
searchResults.setAttribute('class', 'dropdown is-active'); return page.uri === result.ref;
})[0];
});
}
var content = document.createElement('div'); function renderSearchResults(results) {
content.setAttribute('class', 'dropdown-content search-content'); searchResults = document.getElementById('search-results');
searchMenu = document.getElementById('search-menu');
searchResults.setAttribute('class', 'dropdown is-active');
if (results.length > 0) { var content = document.createElement('div');
results.forEach(function (result) { content.setAttribute('class', 'dropdown-content search-content');
var item = document.createElement('a');
item.setAttribute('href', result.uri); if (results.length > 0) {
item.setAttribute('class', 'dropdown-item'); results.forEach(function (result) {
item.innerHTML = `<div class="menu-item"><div class="menu-item__title">» ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`; var item = document.createElement('a');
content.appendChild(item); item.setAttribute('href', result.uri);
});
} else {
var item = document.createElement('span');
item.setAttribute('class', 'dropdown-item'); item.setAttribute('class', 'dropdown-item');
item.innerText = 'No results found'; item.innerHTML = `<div class="menu-item"><div class="menu-item__title">» ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`;
content.appendChild(item); content.appendChild(item);
} });
} else {
while (searchMenu.hasChildNodes()) { var item = document.createElement('span');
searchMenu.removeChild( item.setAttribute('class', 'dropdown-item');
searchMenu.lastChild item.innerText = 'No results found';
); content.appendChild(item);
}
searchMenu.appendChild(content);
} }
initLunr(); while (searchMenu.hasChildNodes()) {
searchMenu.removeChild(
searchMenu.lastChild
);
}
searchMenu.appendChild(content);
}
$("#search").on('input', function(e) { initLunr();
if (!e.target.value) {
$('#search-results').attr('class', 'dropdown'); $("#search").on('input', function (e) {
return null; if (!e.target.value) {
$('#search-results').attr('class', 'dropdown');
return null;
}
var results = search(e.target.value);
renderSearchResults(results);
});
$('#search').on('blur', function () {
setTimeout(function () {
$('#search-results').attr('class', 'dropdown');
}, 100);
});
$('#search').on('click', function (e) {
if (!e.target.value) {
$('#search-results').attr('class', 'dropdown');
return null;
}
var results = search(e.target.value);
renderSearchResults(results);
});
$('#search').on('keydown', function (e) {
var items = $('#search-menu .dropdown-item');
var activeIndex = $('#search-menu .dropdown-item.is-active').index();
items.removeClass('is-active');
if (e.key === 'ArrowDown') {
items.eq(activeIndex + 1).addClass('is-active');
} else if (e.key === 'ArrowUp') {
items.eq(activeIndex - 1).addClass('is-active');
} else if (e.key === 'Enter') {
var currentItemLink = items.eq(activeIndex).attr('href');
if (currentItemLink) {
location.href = currentItemLink;
} }
var results = search(e.target.value); }
renderSearchResults(results);
});
$('#search').on('blur', function() {
setTimeout(function() {
$('#search-results').attr('class', 'dropdown');
}, 100);
});
$('#search').on('click', function (e) {
if (!e.target.value) {
$('#search-results').attr('class', 'dropdown');
return null;
}
var results = search(e.target.value);
renderSearchResults(results);
});
$('#search').on('keydown', function(e) {
var items = $('#search-menu .dropdown-item');
var activeIndex = $('#search-menu .dropdown-item.is-active').index();
items.removeClass('is-active');
if (e.key === 'ArrowDown') {
items.eq(activeIndex + 1).addClass('is-active');
} else if (e.key === 'ArrowUp') {
items.eq(activeIndex - 1).addClass('is-active');
} else if (e.key === 'Enter') {
var currentItemLink = items.eq(activeIndex).attr('href');
if (currentItemLink) {
location.href = currentItemLink;
}
}
});
}); });
</script> </script>
{{ end }} {{ end }}