312 lines
10 KiB
HTML
312 lines
10 KiB
HTML
<div class="modal micromodal-slide" id="modal" aria-hidden="true">
|
|
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
|
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
|
|
|
|
<div class="modal__content" id="modal-content">
|
|
<div id="mySwipe" class="swipe">
|
|
<div class="swipe-wrap">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="modal__items">
|
|
|
|
<span class="modal__header">
|
|
<div class="modal__paging" title="Page Info" aria-label="Current Page">
|
|
</div>
|
|
<div class="modal__icon modal__toolbar modal__toolbar--close" title="Close" aria-label="Close Button" data-micromodal-close>
|
|
{{ partial "svgs/etc/close.svg" (dict "width" 25 "height" 25) }}
|
|
</div>
|
|
<div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button">
|
|
{{ partial "svgs/etc/full-screen.svg" (dict "width" 25 "height" 25) }}
|
|
</div>
|
|
<div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button">
|
|
{{ partial "svgs/etc/normal-screen.svg" (dict "width" 25 "height" 25) }}
|
|
</div>
|
|
</span>
|
|
|
|
<div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button">
|
|
{{ partial "svgs/arrow/arrow-left.svg" (dict "width" 28 "height" 28) }}
|
|
</div>
|
|
|
|
<div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button">
|
|
|
|
{{ partial "svgs/arrow/arrow-right.svg" (dict "width" 28 "height" 28) }}
|
|
</div>
|
|
|
|
<div class="modal__caption">
|
|
<div class="modal__caption--text">
|
|
</div>
|
|
</div>
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ $swipe := resources.Get "js/swipe.js" | resources.Minify | resources.Fingerprint }}
|
|
<script defer src="{{ $swipe.RelPermalink }}"></script>
|
|
{{ $micromodal := resources.Get "js/micromodal.min.js" | resources.Fingerprint }}
|
|
<script defer src="{{ $micromodal.RelPermalink }}"></script>
|
|
{{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
|
|
<script defer src="{{ $fadeinout.RelPermalink }}"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// ============================ gallery ============================
|
|
/* Get the documentElement (<html>) to display the page in fullscreen */
|
|
var docElem = document.documentElement;
|
|
|
|
/* View in fullscreen */
|
|
function openFullscreen() {
|
|
if (docElem.requestFullscreen) {
|
|
docElem.requestFullscreen();
|
|
} else if (docElem.mozRequestFullScreen) { /* Firefox */
|
|
docElem.mozRequestFullScreen();
|
|
} else if (docElem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
|
|
docElem.webkitRequestFullscreen();
|
|
} else if (docElem.msRequestFullscreen) { /* IE/Edge */
|
|
docElem.msRequestFullscreen();
|
|
}
|
|
}
|
|
|
|
/* Close fullscreen */
|
|
function closeFullscreen() {
|
|
if (document.fullscreenElement ||
|
|
document.webkitFullscreenElement ||
|
|
document.mozFullScreenElement) {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.mozCancelFullScreen) { /* Firefox */
|
|
document.mozCancelFullScreen();
|
|
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
|
|
document.webkitExitFullscreen();
|
|
} else if (document.msExitFullscreen) { /* IE/Edge */
|
|
document.msExitFullscreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
var modal = document.getElementById('modal');
|
|
var galleryContainerElem = document.querySelector('.gallery__container');
|
|
var swipeWrapElem = document.querySelector('.swipe-wrap');
|
|
var mySwipeElem = document.getElementById('mySwipe');
|
|
var arrowLeftElem = document.querySelector('.modal__arrow--left');
|
|
var arrowRightElem = document.querySelector('.modal__arrow--right');
|
|
var closeElem = document.querySelector('.modal__toolbar--close');
|
|
var fullElem = document.querySelector('.modal__toolbar--full');
|
|
var normalElem = document.querySelector('.modal__toolbar--normal');
|
|
var captionElem = document.querySelector('.modal__caption');
|
|
var pagingElem = document.querySelector('.modal__paging');
|
|
var itemsElem = document.querySelector('.modal__items');
|
|
var imgTotalNum = null;
|
|
var myFadeTimeout = null;
|
|
var mySwipe = null;
|
|
var keydownFunction = function (e) {
|
|
if (e.key === 'ArrowRight') {
|
|
if (modal && modal.classList.contains('is-open')) {
|
|
mySwipe.next();
|
|
}
|
|
} else if (e.key === 'ArrowLeft') {
|
|
if (modal && modal.classList.contains('is-open')) {
|
|
mySwipe.prev();
|
|
}
|
|
}
|
|
}
|
|
|
|
if (galleryContainerElem) {
|
|
imgTotalNum = galleryContainerElem.querySelectorAll('img').length;
|
|
} else {
|
|
galleryContainerElem = document.querySelector('.single__contents');
|
|
imgTotalNum = galleryContainerElem.querySelectorAll('img').length;
|
|
}
|
|
|
|
MicroModal.init({
|
|
onClose: function () {
|
|
if (mySwipe) {
|
|
mySwipe.kill();
|
|
mySwipe = null;
|
|
closeFullscreen();
|
|
}
|
|
window.removeEventListener('keydown', keydownFunction);
|
|
},
|
|
disableScroll: true,
|
|
disableFocus: true,
|
|
awaitOpenAnimation: false,
|
|
awaitCloseAnimation: false,
|
|
debugMode: false,
|
|
});
|
|
|
|
var imageLoad = function(src) {
|
|
return new Promise(function(resolve, reject) {
|
|
var newImg = new Image;
|
|
newImg.onload = function() {
|
|
resolve(newImg);
|
|
}
|
|
newImg.onerror = reject;
|
|
newImg.src = src;
|
|
});
|
|
}
|
|
|
|
galleryContainerElem.querySelectorAll('img').forEach(function (elem, idx) {
|
|
elem.style.cursor = 'pointer';
|
|
|
|
var clonedElem = elem.cloneNode(true);
|
|
clonedElem.style.maxHeight = '100%';
|
|
clonedElem.style.maxWidth = '100%';
|
|
clonedElem.onclick = function (e) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
var wrapper = document.createElement('div');
|
|
wrapper.style.width = '100%';
|
|
wrapper.style.height = '100vh';
|
|
wrapper.setAttribute('data-micromodal-close', '');
|
|
wrapper.onclick = function () {
|
|
if (mySwipe) {
|
|
mySwipe.kill();
|
|
mySwipe = null;
|
|
}
|
|
}
|
|
wrapper.onmouseenter = function () {
|
|
clearTimeout(myFadeTimeout);
|
|
fadeIn(itemsElem, 200);
|
|
};
|
|
wrapper.onmouseleave = function () {
|
|
myFadeTimeout = setTimeout(function () {
|
|
fadeOut(itemsElem, 200);
|
|
}, 2500);
|
|
}
|
|
wrapper.ontouchstart = function() {
|
|
fadeIn(itemsElem, 200);
|
|
}
|
|
wrapper.append(clonedElem);
|
|
swipeWrapElem.append(wrapper);
|
|
|
|
elem.addEventListener('click', async function (e) {
|
|
MicroModal.show('modal');
|
|
if (mySwipe) {
|
|
mySwipe.kill();
|
|
mySwipe = null;
|
|
}
|
|
|
|
var imgSrc = e.target.getAttribute('data-src') || e.target.getAttribute('src');
|
|
var img = await imageLoad(imgSrc);
|
|
clonedElem.style.width = img.width + 'px';
|
|
clonedElem.style.height = img.height + 'px';
|
|
|
|
// swipe initialize
|
|
mySwipe = new Swipe(mySwipeElem, {
|
|
startSlide: idx,
|
|
draggable: true,
|
|
autoRestart: false,
|
|
continuous: false,
|
|
disableScroll: true,
|
|
stopPropagation: true,
|
|
callback: async function (index, element) {
|
|
// original image size
|
|
var imgElem = element.querySelector('img');
|
|
var imgSrc = imgElem.getAttribute('data-src') || imgElem.getAttribute('src');
|
|
var img = await imageLoad(imgSrc);
|
|
imgElem.style.width = img.width + 'px';
|
|
imgElem.style.height = img.height + 'px';
|
|
|
|
// caption
|
|
if (captionElem && imgElem) {
|
|
var caption = null;
|
|
if (imgElem.getAttribute('data-caption')) {
|
|
caption = imgElem.getAttribute('data-caption');
|
|
} else if (imgElem.getAttribute('title')) {
|
|
caption = imgElem.getAttribute('title');
|
|
} else if (imgElem.getAttribute('alt')) {
|
|
caption = imgElem.getAttribute('alt');
|
|
} else {
|
|
caption = imgElem.getAttribute('src');
|
|
}
|
|
|
|
captionElem.querySelector('.modal__caption--text').innerText = caption;
|
|
pagingElem.innerText = (index + 1) + ' / ' + imgTotalNum;
|
|
|
|
clearTimeout(myFadeTimeout);
|
|
fadeIn(itemsElem, 200);
|
|
}
|
|
},
|
|
});
|
|
|
|
fadeIn(itemsElem);
|
|
|
|
// caption
|
|
if (captionElem) {
|
|
var caption = null;
|
|
if (e.target.getAttribute('data-caption')) {
|
|
caption = e.target.getAttribute('data-caption');
|
|
} else if (e.target.getAttribute('title')) {
|
|
caption = e.target.getAttribute('title');
|
|
} else if (e.target.getAttribute('alt')) {
|
|
caption = e.target.getAttribute('alt');
|
|
} else {
|
|
caption = e.target.getAttribute('src');
|
|
}
|
|
|
|
captionElem.querySelector('.modal__caption--text').innerText = caption;
|
|
pagingElem.innerText = (idx + 1) + ' / ' + imgTotalNum;
|
|
}
|
|
|
|
if (normalElem && fullElem) {
|
|
normalElem.style.zIndex = -1;
|
|
normalElem.style.opacity = 0;
|
|
fullElem.style.zIndex = 25;
|
|
fullElem.style.opacity = 1;
|
|
}
|
|
});
|
|
|
|
window.addEventListener('keydown', keydownFunction);
|
|
});
|
|
|
|
arrowLeftElem ?
|
|
arrowLeftElem.addEventListener('click', function (e) {
|
|
if (mySwipe) {
|
|
mySwipe.prev();
|
|
}
|
|
}) : null;
|
|
arrowRightElem ?
|
|
arrowRightElem.addEventListener('click', function (e) {
|
|
if (mySwipe) {
|
|
mySwipe.next();
|
|
}
|
|
}) : null;
|
|
|
|
closeElem ?
|
|
closeElem.addEventListener('click', function () {
|
|
if (mySwipe) {
|
|
mySwipe.kill();
|
|
mySwipe = null;
|
|
}
|
|
closeFullscreen();
|
|
MicroModal.close('modal');
|
|
}) : null;
|
|
|
|
fullElem ?
|
|
fullElem.addEventListener('click', function (e) {
|
|
openFullscreen();
|
|
if (normalElem) {
|
|
normalElem.style.zIndex = 25;
|
|
normalElem.style.opacity = 1;
|
|
fullElem.style.zIndex = -1;
|
|
fullElem.style.opacity = 0;
|
|
}
|
|
}) : null;
|
|
|
|
normalElem ?
|
|
normalElem.addEventListener('click', function (e) {
|
|
closeFullscreen();
|
|
if (fullElem) {
|
|
fullElem.style.zIndex = 25;
|
|
fullElem.style.opacity = 1;
|
|
normalElem.style.zIndex = -1;
|
|
normalElem.style.opacity = 0;
|
|
}
|
|
}) : null;
|
|
// =================================================================
|
|
});
|
|
</script> |