hugo-theme-zzo/layouts/partials/script/gallery-script.html

327 lines
11 KiB
HTML

{{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
<script defer src="{{ $jquery.RelPermalink }}"></script>
{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
<script defer src="{{ $masonry.RelPermalink }}"></script>
{{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script defer src="{{ $enquire.RelPermalink }}"></script>
{{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
<script defer src="{{ $zzo.RelPermalink }}"></script>
{{ $photoSwipe := resources.Get "js/photoswipe.min.js" | resources.Fingerprint }}
<script defer src="{{ $photoSwipe.RelPermalink }}"></script>
{{ $photoSwipeUi := resources.Get "js/photoswipe-ui-default.min.js" | resources.Fingerprint }}
<script defer src="{{ $photoSwipeUi.RelPermalink }}"></script>
{{ $photoSwipeStyle := resources.Get "css/photoswipe/photoswipe.css" | resources.Minify }}
<link rel="stylesheet" href="{{ $photoSwipeStyle.RelPermalink }}">
{{ $photoSwipeSkin := resources.Get "css/photoswipe/custom-skin.css" | resources.Minify }}
<link rel="stylesheet" href="{{ $photoSwipeSkin.RelPermalink }}">
<script>
window.onload = function() {
// masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
});
$grid.imagesLoaded().progress(function () {
$grid.masonry();
});
$('.grid-item').mouseenter(function () {
$(this).children('.grid-item__desc').show();
});
$('.grid-item').mouseleave(function () {
$(this).children('.grid-item__desc').hide();
});
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');
},
});
// gallery
var pswpElement = $('.pswp')[0];
var imgElements = $('.single__contents').find('img');
var items = [];
{{ $mode:= .Params.Mode }}
var mode = JSON.parse({{ $mode | jsonify }});
imgElements.each(function (i, v) {
$(this).siblings().click(function (e) {
initGallery(i);
});
$(this).css('cursor', 'pointer');
var caption = null;
if (mode && mode.toLowerCase().includes('one')) {
caption = $(this).attr('alt');
} else {
caption = filename(v['src']);
}
items.push({
src: v['src'],
w: 0,
h: 0,
title: caption,
});
});
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();
}
// search
{{ $searchLanguages := .Site.Params.searchLanguages }}
var searchLanguages = JSON.parse({{ $searchLanguages | jsonify }});
{{ if .Site.IsMultiLingual }}
var baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}";
{{ else }}
var baseurl = "{{.Site.BaseURL}}";
{{ end }}
if (!searchLanguages) {
searchLanguages = ['en'];
}
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() {
if (!endsWith(baseurl, "/")) {
baseurl = baseurl + '/';
};
$.getJSON(baseurl + "index.json")
.done(function (index) {
pagesIndex = index;
lunrIndex = lunr(function () {
this.use(lunr.multiLanguage(...searchLanguages));
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);
});
}
function search(query) {
return lunrIndex.search(query).map(function (result) {
return pagesIndex.filter(function (page) {
return page.uri === result.ref;
})[0];
});
}
function renderSearchResults(results) {
searchResults = document.getElementById('search-results');
searchMenu = document.getElementById('search-menu');
searchResults.setAttribute('class', 'dropdown is-active');
var content = document.createElement('div');
content.setAttribute('class', 'dropdown-content search-content');
if (results.length > 0) {
results.forEach(function (result) {
var item = document.createElement('a');
item.setAttribute('href', result.uri);
item.setAttribute('class', 'dropdown-item');
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);
});
} else {
var item = document.createElement('span');
item.setAttribute('class', 'dropdown-item');
item.innerText = 'No results found';
content.appendChild(item);
}
while (searchMenu.hasChildNodes()) {
searchMenu.removeChild(
searchMenu.lastChild
);
}
searchMenu.appendChild(content);
}
function renderSearchResultsMobile(results) {
searchResults = document.getElementById('search-mobile-results');
var content = document.createElement('div');
content.setAttribute('class', 'mobile-search__content');
if (results.length > 0) {
results.forEach(function (result) {
var item = document.createElement('a');
item.setAttribute('href', result.uri);
item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">» ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
content.appendChild(item);
});
} else {
var item = document.createElement('span');
content.appendChild(item);
}
$('#search-mobile-results').empty();
searchResults.appendChild(content);
}
initLunr();
$("#search").on('input', function (e) {
if (!e.target.value) {
$('#search-results').attr('class', 'dropdown');
return null;
}
if ($(window).width() < 770) {
return null;
}
var results = search(e.target.value);
renderSearchResults(results);
});
$('#search').on('blur', function () {
if ($(window).width() < 770) {
return null;
}
setTimeout(function () {
$('#search-results').attr('class', 'dropdown');
}, 100);
});
$('#search').on('click', function (e) {
if ($(window).width() < 770) {
return null;
}
if (!e.target.value) {
$('#search-results').attr('class', 'dropdown');
return null;
}
var results = search(e.target.value);
renderSearchResults(results);
});
$('#search').on('keydown', function (e) {
if ($(window).width() < 770) {
return null;
}
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;
}
}
});
$("#search-mobile").on('input', function(e) {
if (!e.target.value) {
$('#search-mobile-results').empty();
return null;
}
var results = search(e.target.value);
renderSearchResultsMobile(results);
});
}
</script>