aboutsummaryrefslogtreecommitdiffstats
path: root/library/justifiedGallery/jquery.justifiedGallery.js
diff options
context:
space:
mode:
Diffstat (limited to 'library/justifiedGallery/jquery.justifiedGallery.js')
-rw-r--r--library/justifiedGallery/jquery.justifiedGallery.js157
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