From f92ce71434b8dbd80949a085d1aa6c974e178f76 Mon Sep 17 00:00:00 2001 From: Simon Conseil Date: Sat, 13 Oct 2018 00:48:09 +0200 Subject: [PATCH] photoswipe - simplify images loop and move js to a dedicated file --- sigal/themes/photoswipe/static/app.js | 214 +++++++++++++++ sigal/themes/photoswipe/templates/album.html | 260 ++----------------- 2 files changed, 234 insertions(+), 240 deletions(-) create mode 100644 sigal/themes/photoswipe/static/app.js diff --git a/sigal/themes/photoswipe/static/app.js b/sigal/themes/photoswipe/static/app.js new file mode 100644 index 0000000..de825ae --- /dev/null +++ b/sigal/themes/photoswipe/static/app.js @@ -0,0 +1,214 @@ +echo.init({ + offset: 100, + throttle: 250, + unload: false +}); + +var initPhotoSwipeFromDOM = function(gallerySelector) { + + // parse slide data (url, title, size ...) from DOM elements + // (children of gallerySelector) + var parseThumbnailElements = function(el) { + var thumbElements = el.childNodes, + numNodes = thumbElements.length, + items = [], + figureEl, + linkEl, + size, + item; + + for(var i = 0; i < numNodes; i++) { + + figureEl = thumbElements[i]; //
element + + // include only element nodes + if(figureEl.nodeType !== 1) { + continue; + } + + linkEl = figureEl.children[0]; // element + + // create slide object + if (linkEl.getAttribute('data-type') == 'video') { + item = { + html: linkEl.getAttribute('data-video') + }; + } else { + size = linkEl.getAttribute('data-size').split('x'); + item = { + src: linkEl.getAttribute('href'), + w: parseInt(size[0], 10), + h: parseInt(size[1], 10) + }; + } + + if(figureEl.children.length > 1) { + //
content + item.title = figureEl.children[1].innerHTML; + } + + if(linkEl.children.length > 0) { + // thumbnail element, retrieving thumbnail url + item.msrc = linkEl.children[0].getAttribute('data-echo'); + } + + item.el = figureEl; // save link to element for getThumbBoundsFn + items.push(item); + } + + return items; + }; + + // find nearest parent element + var closest = function closest(el, fn) { + return el && ( fn(el) ? el : closest(el.parentNode, fn) ); + }; + + // triggers when user clicks on thumbnail + var onThumbnailsClick = function(e) { + e = e || window.event; + e.preventDefault ? e.preventDefault() : e.returnValue = false; + + var eTarget = e.target || e.srcElement; + + // find root element of slide + var clickedListItem = closest(eTarget, function(el) { + return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); + }); + + if(!clickedListItem) { + return; + } + + // find index of clicked item by looping through all child nodes + // alternatively, you may define index via data- attribute + var clickedGallery = clickedListItem.parentNode, + childNodes = clickedListItem.parentNode.childNodes, + numChildNodes = childNodes.length, + nodeIndex = 0, + index; + + for (var i = 0; i < numChildNodes; i++) { + if(childNodes[i].nodeType !== 1) { + continue; + } + + if(childNodes[i] === clickedListItem) { + index = nodeIndex; + break; + } + nodeIndex++; + } + + + + if(index >= 0) { + // open PhotoSwipe if valid index found + openPhotoSwipe( index, clickedGallery ); + } + return false; + }; + + // parse picture index and gallery index from URL (#&pid=1&gid=2) + var photoswipeParseHash = function() { + var hash = window.location.hash.substring(1), + params = {}; + + if(hash.length < 5) { + return params; + } + + var vars = hash.split('&'); + for (var i = 0; i < vars.length; i++) { + if(!vars[i]) { + continue; + } + var pair = vars[i].split('='); + if(pair.length < 2) { + continue; + } + params[pair[0]] = pair[1]; + } + + if(params.gid) { + params.gid = parseInt(params.gid, 10); + } + + return params; + }; + + var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { + var pswpElement = document.querySelectorAll('.pswp')[0], + gallery, + options, + items; + + items = parseThumbnailElements(galleryElement); + + // define options (if needed) + options = { + + // define gallery index (for URL) + galleryUID: galleryElement.getAttribute('data-pswp-uid'), + + getThumbBoundsFn: function(index) { + // See Options -> getThumbBoundsFn section of documentation for more info + var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail + pageYScroll = window.pageYOffset || document.documentElement.scrollTop, + rect = thumbnail.getBoundingClientRect(); + + return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; + } + + }; + + // PhotoSwipe opened from URL + if(fromURL) { + if(options.galleryPIDs) { + // parse real index when custom PIDs are used + // http://photoswipe.com/documentation/faq.html#custom-pid-in-url + for(var j = 0; j < items.length; j++) { + if(items[j].pid == index) { + options.index = j; + break; + } + } + } else { + // in URL indexes start from 1 + options.index = parseInt(index, 10) - 1; + } + } else { + options.index = parseInt(index, 10); + } + + // exit if index not found + if( isNaN(options.index) ) { + return; + } + + if(disableAnimation) { + options.showAnimationDuration = 0; + } + + // Pass data to PhotoSwipe and initialize it + gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); + gallery.init(); + }; + + // loop through all gallery elements and bind events + var galleryElements = document.querySelectorAll( gallerySelector ); + + for(var i = 0, l = galleryElements.length; i < l; i++) { + galleryElements[i].setAttribute('data-pswp-uid', i+1); + galleryElements[i].onclick = onThumbnailsClick; + } + + // Parse URL and open gallery if it contains #&pid=3&gid=1 + var hashData = photoswipeParseHash(); + if(hashData.pid && hashData.gid) { + openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true ); + } +}; + +// execute above function +initPhotoSwipeFromDOM('.gallery'); diff --git a/sigal/themes/photoswipe/templates/album.html b/sigal/themes/photoswipe/templates/album.html index 22e0324..aefa6c3 100644 --- a/sigal/themes/photoswipe/templates/album.html +++ b/sigal/themes/photoswipe/templates/album.html @@ -19,29 +19,27 @@
{% for media in album.medias %} {% if media.type == "image" %} - {% if loop.first %} -
- - {{ media.url }} - -
{{ media.title }} - {{ media.exif.datetime }}
-
- {% else %} -
- - {{ media.url }} - -
{{ media.title }} - {{ media.exif.datetime }}
-
- {% endif %} +
+ + {{ media.url }} + +
{{ media.title }} - {{ media.exif.datetime }}
+
{% endif %} {% if media.type == "video" %} -
- - {{ media.thumbnail }} - -
{{ media_title }}
-
+
+ + {{ media.thumbnail }} + +
{{ media_title }}
+
{% endif %} {% endfor %}
@@ -49,7 +47,6 @@ {% endblock %} {% block extra_footer %} - {% if album.medias %}