Add image variant

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/js/common/tabs.js

@@ -1,5 +1,7 @@
 function tabsInNewPage() {
-  var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
+  var links = document.getElementsByTagName("article");
+  if (links.length === 0) return;
+  links = links[0].querySelectorAll('a');
   var a = new RegExp('/' + window.location.host + '/');
   links.forEach(link => !a.test(link.href) && link.setAttribute("target", "_blank"));
 }

assets/js/image/main.js

@@ -0,0 +1,134 @@
+function pswp(container, element, trigger, caption, isGallery) {
+  var parseThumbnailElements = function (el) {
+    var items = [],
+      gridEl,
+      linkEl,
+      item;
+
+    $(el)
+      .find(element)
+      .each(function (i, v) {
+        gridEl = $(v);
+        linkEl = gridEl.find(trigger);
+
+        item = {
+          src: isGallery
+            ? gridEl.find('img').attr('src')
+            : linkEl.attr('href'),
+          w: 0,
+          h: 0,
+        };
+
+        if (caption && gridEl.find(caption).length) {
+          item.title = gridEl.find(caption).html();
+        }
+
+        items.push(item);
+      });
+
+    return items;
+  };
+
+  var openPhotoSwipe = function (index, galleryElement) {
+    var pswpElement = document.querySelectorAll('.pswp')[0],
+      gallery,
+      options,
+      items;
+
+    items = parseThumbnailElements(galleryElement);
+
+    options = {
+      closeOnScroll: false,
+      history: false,
+      index: index,
+      shareEl: false,
+      showAnimationDuration: 0,
+      showHideOpacity: true,
+    };
+
+    gallery = new PhotoSwipe(
+      pswpElement,
+      PhotoSwipeUI_Default,
+      items,
+      options
+    );
+
+    gallery.listen('gettingData', function (index, item) {
+      if (item.w < 1 || item.h < 1) {
+        var img = new Image();
+        img.onload = function () {
+          item.w = this.width;
+          item.h = this.height;
+          gallery.updateSize(true);
+        };
+        img.src = item.src;
+      }
+    });
+    gallery.init();
+  };
+
+  var onThumbnailsClick = function (e) {
+    e.preventDefault();
+
+    var index = $(e.target)
+      .closest(container)
+      .find(element)
+      .index($(e.target).closest(element));
+    var clickedGallery = $(e.target).closest(container);
+
+    openPhotoSwipe(index, clickedGallery[0]);
+
+    return false;
+  };
+
+  $(container).on('click', trigger, function (e) {
+    onThumbnailsClick(e);
+  });
+}
+
+function feed() {
+  'use strict';
+
+  var grid = document.querySelector('.post-feed');
+  if (!grid) return;
+
+  var masonry;
+
+  imagesLoaded(grid, function () {
+    masonry = new Masonry(grid, {
+      itemSelector: '.grid-item',
+      columnWidth: '.grid-sizer',
+      hiddenStyle: { transform: 'translateY(50px)', opacity: 0 },
+      visibleStyle: { transform: 'translateY(0)', opacity: 1 },
+    });
+
+    masonry.on('layoutComplete', function () {
+      grid.classList.add('initialized');
+    });
+
+    masonry.layout();
+
+    function callback(items, loadNextPage) {
+      imagesLoaded(items, function (loaded) {
+        masonry.appended(items);
+        masonry.layout();
+        loaded.elements.forEach(function (item) {
+          item.style.visibility = 'visible';
+        });
+        loadNextPage();
+      });
+    }
+
+    pagination(true, callback, true);
+  });
+
+  pswp(
+    '.post-feed',
+    '.post',
+    '.post-lightbox',
+    '.post-caption',
+    false
+  );
+}
+
+feed();