From 0b6a5fad70860b72443d27435deb0b7611975868 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Fri, 10 May 2019 14:55:37 +0200 Subject: update justified gallery lib --- .../justifiedGallery/jquery.justifiedGallery.js | 157 ++++++++++++--------- .../jquery.justifiedGallery.min.js | 6 +- library/justifiedGallery/justifiedGallery.css | 20 ++- library/justifiedGallery/justifiedGallery.min.css | 20 ++- 4 files changed, 123 insertions(+), 80 deletions(-) (limited to 'library') 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); @@ -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) { - 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); }; @@ -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', ''); - $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 diff --git a/library/justifiedGallery/jquery.justifiedGallery.min.js b/library/justifiedGallery/jquery.justifiedGallery.min.js index bda51a188..ddbb85824 100644 --- a/library/justifiedGallery/jquery.justifiedGallery.min.js +++ b/library/justifiedGallery/jquery.justifiedGallery.min.js @@ -1,8 +1,8 @@ /*! - * 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(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=function(t,i){return void 0===i&&(i="undefined"!=typeof window?require("jquery"):require("jquery")(t)),e(i),i}:e(jQuery)}(function(g){var r=function(t,i){this.settings=i,this.checkSettings(),this.imgAnalyzerTimeout=null,this.entries=null,this.buildingRow={entriesBuff:[],width:0,height:0,aspectRatio:0},this.lastFetchedEntry=null,this.lastAnalyzedIndex=-1,this.yield={every:2,flushed:0},this.border=0<=i.border?i.border:i.margins,this.maxRowHeight=this.retrieveMaxRowHeight(),this.suffixRanges=this.retrieveSuffixRanges(),this.offY=this.border,this.rows=0,this.spinner={phase:0,timeSlot:150,$el:g('
'),intervalId:null},this.scrollBarOn=!1,this.checkWidthIntervalId=null,this.galleryWidth=t.width(),this.$gallery=t};r.prototype.getSuffix=function(t,i){var e,s;for(e=i .caption");return 0===i.length?null:i},r.prototype.displayEntry=function(t,i,e,s,n,r){t.width(s),t.height(r),t.css("top",e),t.css("left",i);var o=this.imgFromEntry(t);if(null!==o){o.css("width",s),o.css("height",n),o.css("margin-left",-s/2),o.css("margin-top",-n/2);var a=o.attr("src"),h=this.newSrc(a,s,n,o[0]);o.one("error",function(){o.attr("src",o.data("jg.originalSrc"))});var l=function(){a!==h&&o.attr("src",h)};"skipped"===t.data("jg.loaded")?this.onImageEvent(a,g.proxy(function(){this.showImg(t,l),t.data("jg.loaded",!0)},this)):this.showImg(t,l)}else this.showImg(t);this.displayEntryCaption(t)},r.prototype.displayEntryCaption=function(t){var i=this.imgFromEntry(t);if(null!==i&&this.settings.captions){var e=this.captionFromEntry(t);if(null===e){var s=i.attr("alt");this.isValidCaption(s)||(s=t.attr("title")),this.isValidCaption(s)&&(e=g('
'+s+"
"),t.append(e),t.data("jg.createdCaption",!0))}null!==e&&(this.settings.cssAnimation||e.stop().fadeTo(0,this.settings.captionSettings.nonVisibleOpacity),this.addCaptionEventsHandlers(t))}else this.removeCaptionEventsHandlers(t)},r.prototype.isValidCaption=function(t){return void 0!==t&&0this.settings.justifyThreshold;if(t&&"hide"===this.settings.lastRow&&!u){for(i=0;i img, > a > img").fadeTo(0,0));return-1}for(t&&!u&&"justify"!==this.settings.lastRow&&"hide"!==this.settings.lastRow&&(o=!1,0this.settings.justifyThreshold)),i=0;ig(window).height()}r.prototype.rememberGalleryHeight=function(){i=this.$gallery.height(),this.$gallery.height(i)},r.prototype.setGalleryTempHeight=function(t){i=Math.max(t,i),this.$gallery.height(i)},r.prototype.setGalleryFinalHeight=function(t){i=t,this.$gallery.height(t)},r.prototype.checkWidth=function(){this.checkWidthIntervalId=setInterval(g.proxy(function(){if(this.$gallery.is(":visible")){var t=parseFloat(this.$gallery.width());e()===this.scrollBarOn?Math.abs(t-this.galleryWidth)>this.settings.refreshSensitivity&&(this.galleryWidth=t,this.rewind(),this.rememberGalleryHeight(),this.startImgAnalyzer(!0)):(this.scrollBarOn=e(),this.galleryWidth=t)}},this),this.settings.refreshTime)},r.prototype.isSpinnerActive=function(){return null!==this.spinner.intervalId},r.prototype.getSpinnerHeight=function(){return this.spinner.$el.innerHeight()},r.prototype.stopLoadingSpinnerAnimation=function(){clearInterval(this.spinner.intervalId),this.spinner.intervalId=null,this.setGalleryTempHeight(this.$gallery.height()-this.getSpinnerHeight()),this.spinner.$el.detach()},r.prototype.startLoadingSpinnerAnimation=function(){var t=this.spinner,i=t.$el.find("span");clearInterval(t.intervalId),this.$gallery.append(t.$el),this.setGalleryTempHeight(this.offY+this.buildingRow.height+this.getSpinnerHeight()),t.intervalId=setInterval(function(){t.phase=this.yield.every))return void this.startImgAnalyzer(t);this.buildingRow.entriesBuff.push(e),this.buildingRow.aspectRatio+=n,this.buildingRow.width+=n*this.settings.rowHeight,this.lastAnalyzedIndex=i}else if("error"!==e.data("jg.loaded"))return}0 img, > a > img",triggerEvent:function(t){this.$gallery.trigger(t)}},g.fn.justifiedGallery=function(n){return this.each(function(t,i){var e=g(i);e.addClass("justified-gallery");var s=e.data("jg.controller");if(void 0===s){if(null!=n&&"object"!==g.type(n)){if("destroy"===n)return;throw"The argument must be an object"}s=new r(e,g.extend({},r.prototype.defaults,n)),e.data("jg.controller",s)}else if("norewind"===n);else{if("destroy"===n)return void s.destroy();s.updateSettings(n),s.rewind()}s.updateEntries("norewind"===n)&&s.init()})}}); \ No newline at end of file +!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=function(t,i){return void 0===i&&(i="undefined"!=typeof window?require("jquery"):require("jquery")(t)),e(i),i}:e(jQuery)}(function(l){var r=function(t,i){this.settings=i,this.checkSettings(),this.imgAnalyzerTimeout=null,this.entries=null,this.buildingRow={entriesBuff:[],width:0,height:0,aspectRatio:0},this.lastFetchedEntry=null,this.lastAnalyzedIndex=-1,this.yield={every:2,flushed:0},this.border=0<=i.border?i.border:i.margins,this.maxRowHeight=this.retrieveMaxRowHeight(),this.suffixRanges=this.retrieveSuffixRanges(),this.offY=this.border,this.rows=0,this.spinner={phase:0,timeSlot:150,$el:l('
'),intervalId:null},this.scrollBarOn=!1,this.checkWidthIntervalId=null,this.galleryWidth=t.width(),this.$gallery=t};r.prototype.getSuffix=function(t,i){var e,s;for(e=i .caption");return 0===i.length?null:i},r.prototype.displayEntry=function(t,i,e,s,n,r){t.width(s),t.height(r),t.css("top",e),t.css("left",i);var o=this.imgFromEntry(t);if(null!==o){o.css("width",s),o.css("height",n),o.css("margin-left",-s/2),o.css("margin-top",-n/2);var a=o.data("jg.src");if(a){a=this.newSrc(a,s,n,o[0]),o.one("error",function(){this.resetImgSrc(o)});var h=function(){o.attr("src",a)};"skipped"===t.data("jg.loaded")?this.onImageEvent(a,function(){this.showImg(t,h),t.data("jg.loaded",!0)}.bind(this)):this.showImg(t,h)}}else this.showImg(t);this.displayEntryCaption(t)},r.prototype.displayEntryCaption=function(t){var i=this.imgFromEntry(t);if(null!==i&&this.settings.captions){var e=this.captionFromEntry(t);if(null===e){var s=i.attr("alt");this.isValidCaption(s)||(s=t.attr("title")),this.isValidCaption(s)&&(e=l('
'+s+"
"),t.append(e),t.data("jg.createdCaption",!0))}null!==e&&(this.settings.cssAnimation||e.stop().fadeTo(0,this.settings.captionSettings.nonVisibleOpacity),this.addCaptionEventsHandlers(t))}else this.removeCaptionEventsHandlers(t)},r.prototype.isValidCaption=function(t){return void 0!==t&&0this.settings.justifyThreshold;if(t&&"hide"===this.settings.lastRow&&!d){for(i=0;i img, > a > img").fadeTo(0,0));return-1}for(t&&!d&&"justify"!==this.settings.lastRow&&"hide"!==this.settings.lastRow&&(o=!1,0this.settings.justifyThreshold)),i=0;ithis.settings.refreshSensitivity&&(this.galleryWidth=t,this.rewind(),this.rememberGalleryHeight(),this.startImgAnalyzer(!0))}},this),this.settings.refreshTime)},r.prototype.isSpinnerActive=function(){return null!==this.spinner.intervalId},r.prototype.getSpinnerHeight=function(){return this.spinner.$el.innerHeight()},r.prototype.stopLoadingSpinnerAnimation=function(){clearInterval(this.spinner.intervalId),this.spinner.intervalId=null,this.setGalleryTempHeight(this.$gallery.height()-this.getSpinnerHeight()),this.spinner.$el.detach()},r.prototype.startLoadingSpinnerAnimation=function(){var t=this.spinner,i=t.$el.find("span");clearInterval(t.intervalId),this.$gallery.append(t.$el),this.setGalleryTempHeight(this.offY+this.buildingRow.height+this.getSpinnerHeight()),t.intervalId=setInterval(function(){t.phase=this.yield.every))return void this.startImgAnalyzer(t)}else if("error"!==e.data("jg.loaded"))return}0 img, > a > img, > svg, > a > svg",triggerEvent:function(t){this.$gallery.trigger(t)}},l.fn.justifiedGallery=function(n){return this.each(function(t,i){var e=l(i);e.addClass("justified-gallery");var s=e.data("jg.controller");if(void 0===s){if(null!=n&&"object"!==l.type(n)){if("destroy"===n)return;throw"The argument must be an object"}s=new r(e,l.extend({},r.prototype.defaults,n)),e.data("jg.controller",s)}else if("norewind"===n);else{if("destroy"===n)return void s.destroy();s.updateSettings(n),s.rewind()}s.updateEntries("norewind"===n)&&s.init()})}}); \ No newline at end of file diff --git a/library/justifiedGallery/justifiedGallery.css b/library/justifiedGallery/justifiedGallery.css index 8b753dc38..097cf534a 100644 --- a/library/justifiedGallery/justifiedGallery.css +++ b/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 > .entry-visible > a > img { +.justified-gallery > .jg-entry-visible > 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; diff --git a/library/justifiedGallery/justifiedGallery.min.css b/library/justifiedGallery/justifiedGallery.min.css index 8b753dc38..097cf534a 100644 --- a/library/justifiedGallery/justifiedGallery.min.css +++ b/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 > .entry-visible > a > img { +.justified-gallery > .jg-entry-visible > 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; -- cgit v1.2.3