update justified gallery lib

library/justifiedGallery/jquery.justifiedGallery.js

@@ -1,7 +1,7 @@
 /*!
- * justifiedGallery - v3.7.0
+ * justifiedGallery - v4.0.0-alpha
  * http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2018 Miro Mannino
+ * Copyright (c) 2019 Miro Mannino
  * Licensed under the MIT license.
  */
 (function (factory) {
@@ -150,7 +150,7 @@
    */
   JustifiedGallery.prototype.showImg = function ($entry, callback) {
     if (this.settings.cssAnimation) {
-      $entry.addClass('entry-visible');
+      $entry.addClass('jg-entry-visible');
       if (callback) callback();
     } else {
       $entry.stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
@@ -166,8 +166,15 @@
    * @returns {String} the extracted src
    */
   JustifiedGallery.prototype.extractImgSrcFromImage = function ($image) {
-    var imageSrc = (typeof $image.data('safe-src') !== 'undefined') ? $image.data('safe-src') : $image.attr('src');
+    var imageSrc = $image.data('safe-src');
-    $image.data('jg.originalSrc', imageSrc);
+    var imageSrcLoc = 'date-safe-src';
+    if (typeof imageSrc === 'undefined') {
+      imageSrc = $image.attr('src');
+      imageSrcLoc = 'src';
+    }
+    $image.data('jg.originalSrc', imageSrc); // this is saved for the destroy method
+    $image.data('jg.src', imageSrc); // this will change overtime
+    $image.data('jg.originalSrcLoc', imageSrcLoc); // this is saved for the destroy method
     return imageSrc;
   };
   
@@ -207,26 +214,29 @@
       $image.css('margin-top', - imgHeight / 2);
   
       // Image reloading for an high quality of thumbnails
-      var imageSrc = $image.attr('src');
+      var imageSrc = $image.data('jg.src');
-      var newImageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]);
+      if (imageSrc) {
+        imageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]);
   
-      $image.one('error', function () {
+        $image.one('error', function () {
-        $image.attr('src', $image.data('jg.originalSrc')); //revert to the original thumbnail, we got it.
+           this.resetImgSrc($image); //revert to the original thumbnail
-      });
+        });
   
-      var loadNewImage = function () {
+        var loadNewImage = function () {
-        if (imageSrc !== newImageSrc) { //load the new image after the fadeIn
+          // if (imageSrc !== newImageSrc) { 
-          $image.attr('src', newImageSrc);
+            $image.attr('src', imageSrc);
+          // }
+        };
+  
+        if ($entry.data('jg.loaded') === 'skipped') {
+          this.onImageEvent(imageSrc, (function() {
+            this.showImg($entry, loadNewImage); //load the new image after the fadeIn
+            $entry.data('jg.loaded', true);
+          }).bind(this));
+        } else {
+          this.showImg($entry, loadNewImage); //load the new image after the fadeIn
         }
-      };
+      
-  
-      if ($entry.data('jg.loaded') === 'skipped') {
-        this.onImageEvent(imageSrc, $.proxy(function() {
-          this.showImg($entry, loadNewImage);
-          $entry.data('jg.loaded', true);
-        }, this));
-      } else {
-        this.showImg($entry, loadNewImage);
       }
   
     } else {
@@ -371,7 +381,7 @@
       for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
         $entry = this.buildingRow.entriesBuff[i];
         if (this.settings.cssAnimation)
-          $entry.removeClass('entry-visible');
+          $entry.removeClass('jg-entry-visible');
         else {
           $entry.stop().fadeTo(0, 0.1);
           $entry.find('> img, > a > img').fadeTo(0, 0);
@@ -486,13 +496,6 @@
     this.$gallery.height(height);
   };
   
-  /**
-   * @returns {boolean} a boolean saying if the scrollbar is active or not
-   */
-  function hasScrollBar() {
-    return $("body").height() > $(window).height();
-  }
-  
   /**
    * Checks the width of the gallery container, to know if a new justification is needed
    */
@@ -503,19 +506,14 @@
       if (!this.$gallery.is(":visible")) return;
   
       var galleryWidth = parseFloat(this.$gallery.width());
-      if (hasScrollBar() === this.scrollBarOn) {
+      if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
-        if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
-          this.galleryWidth = galleryWidth;
-          this.rewind();
-  
-          this.rememberGalleryHeight();
-  
-          // Restart to analyze
-          this.startImgAnalyzer(true);
-        }
-      } else {
-        this.scrollBarOn = hasScrollBar();
         this.galleryWidth = galleryWidth;
+        this.rewind();
+  
+        this.rememberGalleryHeight();
+  
+        // Restart to analyze
+        this.startImgAnalyzer(true);
       }
     }, this), this.settings.refreshTime);
   };
@@ -574,6 +572,13 @@
     this.clearBuildingRow();
   };
   
+  /**
+   * @returns {Array} all entries matched by `settings.selector`
+   */
+  JustifiedGallery.prototype.getAllEntries = function () {
+    return this.$gallery.children(this.settings.selector).toArray();
+  };
+  
   /**
    * Update the entries searching it from the justified gallery HTML element
    *
@@ -587,7 +592,7 @@
       newEntries = $(this.lastFetchedEntry).nextAll(this.settings.selector).toArray();
     } else {
       this.entries = [];
-      newEntries = this.$gallery.children(this.settings.selector).toArray();
+      newEntries = this.getAllEntries();
     }
   
     if (newEntries.length > 0) {
@@ -698,6 +703,17 @@
     }
   };
   
+  /**
+   * Revert the image src to the default value.
+   */
+  JustifiedGallery.prototype.resetImgSrc = function ($img) {
+    if ($img.data('jg.originalSrcLoc') == 'src') {
+      $img.attr('src', $img.data('jg.originalSrc'));
+    } else {
+      $img.attr('src', '');
+    }
+  }
+  
   /**
    * Destroy the Justified Gallery instance.
    *
@@ -709,8 +725,10 @@
    */
   JustifiedGallery.prototype.destroy = function () {
     clearInterval(this.checkWidthIntervalId);
+    this.stopImgAnalyzerStarter();
   
-    $.each(this.entries, $.proxy(function(_, entry) {
+    // Get fresh entries list since filtered entries are absent in `this.entries`
+    $.each(this.getAllEntries(), $.proxy(function(_, entry) {
       var $entry = $(entry);
   
       // Reset entry style
@@ -719,16 +737,20 @@
       $entry.css('top', '');
       $entry.css('left', '');
       $entry.data('jg.loaded', undefined);
-      $entry.removeClass('jg-entry');
+      $entry.removeClass('jg-entry jg-filtered jg-entry-visible');
   
       // Reset image style
       var $img = this.imgFromEntry($entry);
-      $img.css('width', '');
+      if ($img) {
-      $img.css('height', '');
+        $img.css('width', '');
-      $img.css('margin-left', '');
+        $img.css('height', '');
-      $img.css('margin-top', '');
+        $img.css('margin-left', '');
-      $img.attr('src', $img.data('jg.originalSrc'));
+        $img.css('margin-top', '');
-      $img.data('jg.originalSrc', undefined);
+        this.resetImgSrc($img);
+        $img.data('jg.originalSrc', undefined);
+        $img.data('jg.originalSrcLoc', undefined);
+        $img.data('jg.src', undefined);
+      }
   
       // Remove caption
       this.removeCaptionEventsHandlers($entry);
@@ -746,6 +768,7 @@
     this.$gallery.css('height', '');
     this.$gallery.removeClass('justified-gallery');
     this.$gallery.data('jg.controller', undefined);
+    this.settings.triggerEvent.call(this, 'jg.destroy');
   };
   
   /**
@@ -760,6 +783,12 @@
         var availableWidth = this.galleryWidth - 2 * this.border - (
             (this.buildingRow.entriesBuff.length - 1) * this.settings.margins);
         var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
+  
+        this.buildingRow.entriesBuff.push($entry);
+        this.buildingRow.aspectRatio += imgAspectRatio;
+        this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
+        this.lastAnalyzedIndex = i;
+  
         if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
           this.flushRow(false);
   
@@ -768,12 +797,6 @@
             return;
           }
         }
-  
-        this.buildingRow.entriesBuff.push($entry);
-        this.buildingRow.aspectRatio += imgAspectRatio;
-        this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
-        this.lastAnalyzedIndex = i;
-  
       } else if ($entry.data('jg.loaded') !== 'error') {
         return;
       }
@@ -873,13 +896,16 @@
   
           // Image src
           var imageSrc = that.extractImgSrcFromImage($image);
-          $image.attr('src', imageSrc);
   
-          /* If we have the height and the width, we don't wait that the image is loaded, but we start directly
+          /* If we have the height and the width, we don't wait that the image is loaded, 
-           * with the justification */
+             but we start directly with the justification */
-          if (that.settings.waitThumbnailsLoad === false) {
+          if (that.settings.waitThumbnailsLoad === false || !imageSrc) {
-            var width = parseFloat($image.prop('width'));
+            var width = parseFloat($image.attr('width'));
-            var height = parseFloat($image.prop('height'));
+            var height = parseFloat($image.attr('height'));
+            if ($image.prop('tagName') === 'svg') {
+              width = parseFloat($image[0].getBBox().width);
+              height = parseFloat($image[0].getBBox().height);
+            }
             if (!isNaN(width) && !isNaN(height)) {
               $entry.data('jg.width', width);
               $entry.data('jg.height', height);
@@ -1146,11 +1172,12 @@
                     It follows the specifications of the Array.prototype.filter() function of JavaScript.
     */
     selector: 'a, div:not(.spinner)', // The selector that is used to know what are the entries of the gallery
-    imgSelector: '> img, > a > img', // The selector that is used to know what are the images of each entry
+    imgSelector: '> img, > a > img, > svg, > a > svg', // The selector that is used to know what are the images of each entry
     triggerEvent: function (event) { // This is called to trigger events, the default behavior is to call $.trigger
       this.$gallery.trigger(event);  // Consider that 'this' is this set to the JustifiedGallery object, so it can
     }                                // access to fields such as $gallery, useful to trigger events with jQuery.
   };
+  
 
   /**
    * Justified Gallery plugin for jQuery

library/justifiedGallery/justifiedGallery.css

@@ -1,7 +1,7 @@
 /*!
- * justifiedGallery - v3.7.0
+ * justifiedGallery - v4.0.0-alpha
  * http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2018 Miro Mannino
+ * Copyright (c) 2019 Miro Mannino
  * Licensed under the MIT license.
  */
 .justified-gallery {
@@ -26,7 +26,13 @@
 .justified-gallery > figure > img,
 .justified-gallery > a > a > img,
 .justified-gallery > div > a > img,
-.justified-gallery > figure > a > img {
+.justified-gallery > figure > a > img,
+.justified-gallery > a > svg,
+.justified-gallery > div > svg,
+.justified-gallery > figure > svg,
+.justified-gallery > a > a > svg,
+.justified-gallery > div > a > svg,
+.justified-gallery > figure > a > svg {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -63,13 +69,15 @@
   -o-transition: opacity 500ms ease-in;
   transition: opacity 500ms ease-in;
 }
-.justified-gallery > .entry-visible {
+.justified-gallery > .jg-entry-visible {
   filter: "alpha(opacity=100)";
   opacity: 1;
   background: none;
 }
-.justified-gallery > .entry-visible > img,
+.justified-gallery > .jg-entry-visible > img,
-.justified-gallery > .entry-visible > a > img {
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg {
   filter: "alpha(opacity=100)";
   opacity: 1;
   -webkit-transition: opacity 500ms ease-in;

library/justifiedGallery/justifiedGallery.min.css

@@ -1,7 +1,7 @@
 /*!
- * justifiedGallery - v3.7.0
+ * justifiedGallery - v4.0.0-alpha
  * http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2018 Miro Mannino
+ * Copyright (c) 2019 Miro Mannino
  * Licensed under the MIT license.
  */
 .justified-gallery {
@@ -26,7 +26,13 @@
 .justified-gallery > figure > img,
 .justified-gallery > a > a > img,
 .justified-gallery > div > a > img,
-.justified-gallery > figure > a > img {
+.justified-gallery > figure > a > img,
+.justified-gallery > a > svg,
+.justified-gallery > div > svg,
+.justified-gallery > figure > svg,
+.justified-gallery > a > a > svg,
+.justified-gallery > div > a > svg,
+.justified-gallery > figure > a > svg {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -63,13 +69,15 @@
   -o-transition: opacity 500ms ease-in;
   transition: opacity 500ms ease-in;
 }
-.justified-gallery > .entry-visible {
+.justified-gallery > .jg-entry-visible {
   filter: "alpha(opacity=100)";
   opacity: 1;
   background: none;
 }
-.justified-gallery > .entry-visible > img,
+.justified-gallery > .jg-entry-visible > img,
-.justified-gallery > .entry-visible > a > img {
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg {
   filter: "alpha(opacity=100)";
   opacity: 1;
   -webkit-transition: opacity 500ms ease-in;