diff options
Diffstat (limited to 'library/justifiedGallery/jquery.justifiedGallery.js')
| -rw-r--r-- | library/justifiedGallery/jquery.justifiedGallery.js | 157 |
1 files changed, 92 insertions, 65 deletions
diff --git a/library/justifiedGallery/jquery.justifiedGallery.js b/library/justifiedGallery/jquery.justifiedGallery.js index e1495d870..76db2112c 100644 --- a/library/justifiedGallery/jquery.justifiedGallery.js +++ b/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'); - $image.data('jg.originalSrc', imageSrc); + var imageSrc = $image.data('safe-src'); + 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 newImageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]); - - $image.one('error', function () { - $image.attr('src', $image.data('jg.originalSrc')); //revert to the original thumbnail, we got it. - }); - - var loadNewImage = function () { - if (imageSrc !== newImageSrc) { //load the new image after the fadeIn - $image.attr('src', newImageSrc); + var imageSrc = $image.data('jg.src'); + if (imageSrc) { + imageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]); + + $image.one('error', function () { + this.resetImgSrc($image); //revert to the original thumbnail + }); + + var loadNewImage = function () { + // if (imageSrc !== 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); @@ -487,13 +497,6 @@ }; /** - * @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 */ JustifiedGallery.prototype.checkWidth = function () { @@ -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) { - this.galleryWidth = galleryWidth; - this.rewind(); + if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) { + this.galleryWidth = galleryWidth; + this.rewind(); - this.rememberGalleryHeight(); + this.rememberGalleryHeight(); - // Restart to analyze - this.startImgAnalyzer(true); - } - } else { - this.scrollBarOn = hasScrollBar(); - this.galleryWidth = galleryWidth; + // Restart to analyze + this.startImgAnalyzer(true); } }, this), this.settings.refreshTime); }; @@ -575,6 +573,13 @@ }; /** + * @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 * * @param norewind if norewind only the new entries will be changed (i.e. randomized, sorted or filtered) @@ -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) { @@ -699,6 +704,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. * * It clears all the css properties added in the style attributes. We doesn't backup the original @@ -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', ''); - $img.css('height', ''); - $img.css('margin-left', ''); - $img.css('margin-top', ''); - $img.attr('src', $img.data('jg.originalSrc')); - $img.data('jg.originalSrc', undefined); + if ($img) { + $img.css('width', ''); + $img.css('height', ''); + $img.css('margin-left', ''); + $img.css('margin-top', ''); + 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 - * with the justification */ - if (that.settings.waitThumbnailsLoad === false) { - var width = parseFloat($image.prop('width')); - var height = parseFloat($image.prop('height')); + /* If we have the height and the width, we don't wait that the image is loaded, + but we start directly with the justification */ + if (that.settings.waitThumbnailsLoad === false || !imageSrc) { + var width = parseFloat($image.attr('width')); + 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 |