/*!
* justifiedGallery - v3.8.1
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2020 Miro Mannino
* Licensed under the MIT license.
*/
(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["jquery"], factory);
} else if (typeof module === "object" && module.exports) {
// Node/CommonJS
module.exports = function (root, jQuery) {
if (jQuery === undefined) {
// require('jQuery') returns a factory that requires window to
// build a jQuery instance, we normalize how we use modules
// that require this pattern but the window provided is a noop
// if it's defined (how jquery works)
if (typeof window !== "undefined") {
jQuery = require("jquery");
} else {
jQuery = require("jquery")(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
// Browser globals
factory(jQuery);
}
})(function ($) {
/**
* Justified Gallery controller constructor
*
* @param $gallery the gallery to build
* @param settings the settings (the defaults are in JustifiedGallery.defaults)
* @constructor
*/
var JustifiedGallery = function ($gallery, settings) {
this.settings = settings;
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, // do a flush every n flushes (must be greater than 1)
flushed: 0 // flushed rows without a yield
};
this.border = settings.border >= 0 ? settings.border : settings.margins;
this.maxRowHeight = this.retrieveMaxRowHeight();
this.suffixRanges = this.retrieveSuffixRanges();
this.offY = this.border;
this.rows = 0;
this.spinner = {
phase: 0,
timeSlot: 150,
$el: $(
'<div class="jg-spinner"><span></span><span></span><span></span></div>'
),
intervalId: null
};
this.scrollBarOn = false;
this.checkWidthIntervalId = null;
this.galleryWidth = $gallery.width();
this.$gallery = $gallery;
};
/** @returns {String} the best suffix given the width and the height */
JustifiedGallery.prototype.getSuffix = function (width, height) {
var longestSide, i;
longestSide = width > height ? width : height;
for (i = 0; i < this.suffixRanges.length; i++) {
if (longestSide <= this.suffixRanges[i]) {
return this.settings.sizeRangeSuffixes[this.suffixRanges[i]];
}
}
return this.settings.sizeRangeSuffixes[this.suffixRanges[i - 1]];
};
/**
* Remove the suffix from the string
*
* @returns {string} a new string without the suffix
*/
JustifiedGallery.prototype.removeSuffix = function (str, suffix) {
return str.substring(0, str.length - suffix.length);
};
/**
* @returns {boolean} a boolean to say if the suffix is contained in the str or not
*/
JustifiedGallery.prototype.endsWith = function (str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
};
/**
* Get the used suffix of a particular url
*
* @param str
* @returns {String} return the used suffix
*/
JustifiedGallery.prototype.getUsedSuffix = function (str) {
for (var si in this.settings.sizeRangeSuffixes) {
if (this.settings.sizeRangeSuffixes.hasOwnProperty(si)) {
if (this.settings.sizeRangeSuffixes[si].length === 0) continue;
if (this.endsWith(str, this.settings.sizeRangeSuffixes[si]))
return this.settings.sizeRangeSuffixes[si];
}
}
return "";
};
/**
* Given an image src, with the width and the height, returns the new image src with the
* best suffix to show the best quality thumbnail.
*
* @returns {String} the suffix to use
*/
JustifiedGallery.prototype.newSrc = function (
imageSrc,
imgWidth,
imgHeight,
image
) {
var newImageSrc;
if (this.settings.thumbnailPath) {
newImageSrc = this.settings.thumbnailPath(
imageSrc,
imgWidth,
imgHeight,
image
);
} else {
var matchRes = imageSrc.match(this.settings.extension);
var ext = matchRes !== null ? matchRes[0] : "";
newImageSrc = imageSrc.replace(this.settings.extension, "");
newImageSrc = this.removeSuffix(
newImageSrc,
this.getUsedSuffix(newImageSrc)
);
newImageSrc += this.getSuffix(imgWidth, imgHeight) + ext;
}
return newImageSrc;
};
/**
* Shows the images that is in the given entry
*
* @param $entry the entry
* @param callback the callback that is called when the show animation is finished
*/
JustifiedGallery.prototype.showImg = function ($entry, callback) {
if (this.settings.cssAnimation) {
$entry.addClass("jg-entry-visible");
if (callback) callback();
} else {
$entry
.stop()
.fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
$entry
.find(this.settings.imgSelector)
.stop()
.fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
}
};
/**
* Extract the image src form the image, looking from the 'safe-src', and if it can't be found, from the
* 'src' attribute. It saves in the image data the 'jg.originalSrc' field, with the extracted src.
*
* @param $image the image to analyze
* @returns {String} the extracted src
*/
JustifiedGallery.prototype.extractImgSrcFromImage = function ($image) {
var imageSrc = $image.data("safe-src");
var imageSrcLoc = "data-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;
};
/** @returns {jQuery} the image in the given entry */
JustifiedGallery.prototype.imgFromEntry = function ($entry) {
var $img = $entry.find(this.settings.imgSelector);
return $img.length === 0 ? null : $img;
};
/** @returns {jQuery} the caption in the given entry */
JustifiedGallery.prototype.captionFromEntry = function ($entry) {
var $caption = $entry.find("> .jg-caption");
return $caption.length === 0 ? null : $caption;
};
/**
* Display the entry
*
* @param {jQuery} $entry the entry to display
* @param {int} x the x position where the entry must be positioned
* @param y the y position where the entry must be positioned
* @param imgWidth the image width
* @param imgHeight the image height
* @param rowHeight the row height of the row that owns the entry
*/
JustifiedGallery.prototype.displayEntry = function (
$entry,
x,
y,
imgWidth,
imgHeight,
rowHeight
) {
$entry.width(imgWidth);
$entry.height(rowHeight);
$entry.css("top", y);
$entry.css("left", x);
var $image = this.imgFromEntry($entry);
if ($image !== null) {
$image.css("width", imgWidth);
$image.css("height", imgHeight);
$image.css("margin-left", -imgWidth / 2);
$image.css("margin-top", -imgHeight / 2);
// Image reloading for an high quality of thumbnails
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" && imageSrc) {
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
}
}
} else {
this.showImg($entry);
}
this.displayEntryCaption($entry);
};
/**
* Display the entry caption. If the caption element doesn't exists, it creates the caption using the 'alt'
* or the 'title' attributes.
*
* @param {jQuery} $entry the entry to process
*/
JustifiedGallery.prototype.displayEntryCaption = function ($entry) {
var $image = this.imgFromEntry($entry);
if ($image !== null && this.settings.captions) {
var $imgCaption = this.captionFromEntry($entry);
// Create it if it doesn't exists
if ($imgCaption === null) {
var caption = $image.attr("alt");
if (!this.isValidCaption(caption)) caption = $entry.attr("title");
if (this.isValidCaption(caption)) {
// Create only we found something
$imgCaption = $('<div class="jg-caption">' + caption + "</div>");
$entry.append($imgCaption);
$entry.data("jg.createdCaption", true);
}
}
// Create events (we check again the $imgCaption because it can be still inexistent)
if ($imgCaption !== null) {
if (!this.settings.cssAnimation)
$imgCaption
.stop()
.fadeTo(0, this.settings.captionSettings.nonVisibleOpacity);
this.addCaptionEventsHandlers($entry);
}
} else {
this.removeCaptionEventsHandlers($entry);
}
};
/**
* Validates the caption
*
* @param caption The caption that should be validated
* @return {boolean} Validation result
*/
JustifiedGallery.prototype.isValidCaption = function (caption) {
return typeof caption !== "undefined" && caption.length > 0;
};
/**
* The callback for the event 'mouseenter'. It assumes that the event currentTarget is an entry.
* It shows the caption using jQuery (or using CSS if it is configured so)
*
* @param {Event} eventObject the event object
*/
JustifiedGallery.prototype.onEntryMouseEnterForCaption = function (
eventObject
) {
var $caption = this.captionFromEntry($(eventObject.currentTarget));
if (this.settings.cssAnimation) {
$caption.addClass("jg-caption-visible").removeClass("jg-caption-hidden");
} else {
$caption
.stop()
.fadeTo(
this.settings.captionSettings.animationDuration,
this.settings.captionSettings.visibleOpacity
);
}
};
/**
* The callback for the event 'mouseleave'. It assumes that the event currentTarget is an entry.
* It hides the caption using jQuery (or using CSS if it is configured so)
*
* @param {Event} eventObject the event object
*/
JustifiedGallery.prototype.onEntryMouseLeaveForCaption = function (
eventObject
) {
var $caption = this.captionFromEntry($(eventObject.currentTarget));
if (this.settings.cssAnimation) {
$caption
.removeClass("jg-caption-visible")
.removeClass("jg-caption-hidden");
} else {
$caption
.stop()
.fadeTo(
this.settings.captionSettings.animationDuration,
this.settings.captionSettings.nonVisibleOpacity
);
}
};
/**
* Add the handlers of the entry for the caption
*
* @param $entry the entry to modify
*/
JustifiedGallery.prototype.addCaptionEventsHandlers = function ($entry) {
var captionMouseEvents = $entry.data("jg.captionMouseEvents");
if (typeof captionMouseEvents === "undefined") {
captionMouseEvents = {
mouseenter: $.proxy(this.onEntryMouseEnterForCaption, this),
mouseleave: $.proxy(this.onEntryMouseLeaveForCaption, this)
};
$entry.on(
"mouseenter",
undefined,
undefined,
captionMouseEvents.mouseenter
);
$entry.on(
"mouseleave",
undefined,
undefined,
captionMouseEvents.mouseleave
);
$entry.data("jg.captionMouseEvents", captionMouseEvents);
}
};
/**
* Remove the handlers of the entry for the caption
*
* @param $entry the entry to modify
*/
JustifiedGallery.prototype.removeCaptionEventsHandlers = function ($entry) {
var captionMouseEvents = $entry.data("jg.captionMouseEvents");
if (typeof captionMouseEvents !== "undefined") {
$entry.off("mouseenter", undefined, captionMouseEvents.mouseenter);
$entry.off("mouseleave", undefined, captionMouseEvents.mouseleave);
$entry.removeData("jg.captionMouseEvents");
}
};
/**
* Clear the building row data to be used for a new row
*/
JustifiedGallery.prototype.clearBuildingRow = function () {
this.buildingRow.entriesBuff = [];
this.buildingRow.aspectRatio = 0;
this.buildingRow.width = 0;
};
/**
* Justify the building row, preparing it to
*
* @param isLastRow
* @param hiddenRow undefined or false for normal behavior. hiddenRow = true to hide the row.
* @returns a boolean to know if the row has been justified or not
*/
JustifiedGallery.prototype.prepareBuildingRow = function (
isLastRow,
hiddenRow
) {
var i,
$entry,
imgAspectRatio,
newImgW,
newImgH,
justify = true;
var minHeight = 0;
var availableWidth =
this.galleryWidth -
2 * this.border -
(this.buildingRow.entriesBuff.length - 1) * this.settings.margins;
var rowHeight = availableWidth / this.buildingRow.aspectRatio;
var defaultRowHeight = this.settings.rowHeight;
var justifiable =
this.buildingRow.width / availableWidth > this.settings.justifyThreshold;
//Skip the last row if we can't justify it and the lastRow == 'hide'
if (
hiddenRow ||
(isLastRow && this.settings.lastRow === "hide" && !justifiable)
) {
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
$entry = this.buildingRow.entriesBuff[i];
if (this.settings.cssAnimation) $entry.removeClass("jg-entry-visible");
else {
$entry.stop().fadeTo(0, 0.1);
$entry.find("> img, > a > img").fadeTo(0, 0);
}
}
return -1;
}
// With lastRow = nojustify, justify if is justificable (the images will not become too big)
if (
isLastRow &&
!justifiable &&
this.settings.lastRow !== "justify" &&
this.settings.lastRow !== "hide"
) {
justify = false;
if (this.rows > 0) {
defaultRowHeight =
(this.offY - this.border - this.settings.margins * this.rows) /
this.rows;
justify =
(defaultRowHeight * this.buildingRow.aspectRatio) / availableWidth >
this.settings.justifyThreshold;
}
}
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
$entry = this.buildingRow.entriesBuff[i];
imgAspectRatio = $entry.data("jg.width") / $entry.data("jg.height");
if (justify) {
newImgW =
i === this.buildingRow.entriesBuff.length - 1
? availableWidth
: rowHeight * imgAspectRatio;
newImgH = rowHeight;
} else {
newImgW = defaultRowHeight * imgAspectRatio;
newImgH = defaultRowHeight;
}
availableWidth -= Math.round(newImgW);
$entry.data("jg.jwidth", Math.round(newImgW));
$entry.data("jg.jheight", Math.ceil(newImgH));
if (i === 0 || minHeight > newImgH) minHeight = newImgH;
}
this.buildingRow.height = minHeight;
return justify;
};
/**
* Flush a row: justify it, modify the gallery height accordingly to the row height
*
* @param isLastRow
* @param hiddenRow undefined or false for normal behavior. hiddenRow = true to hide the row.
*/
JustifiedGallery.prototype.flushRow = function (isLastRow, hiddenRow) {
var settings = this.settings;
var $entry,
buildingRowRes,
offX = this.border,
i;
buildingRowRes = this.prepareBuildingRow(isLastRow, hiddenRow);
if (
hiddenRow ||
(isLastRow && settings.lastRow === "hide" && buildingRowRes === -1)
) {
this.clearBuildingRow();
return;
}
if (this.maxRowHeight) {
if (this.maxRowHeight < this.buildingRow.height)
this.buildingRow.height = this.maxRowHeight;
}
//Align last (unjustified) row
if (
isLastRow &&
(settings.lastRow === "center" || settings.lastRow === "right")
) {
var availableWidth =
this.galleryWidth -
2 * this.border -
(this.buildingRow.entriesBuff.length - 1) * settings.margins;
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
$entry = this.buildingRow.entriesBuff[i];
availableWidth -= $entry.data("jg.jwidth");
}
if (settings.lastRow === "center") offX += Math.round(availableWidth / 2);
else if (settings.lastRow === "right") offX += availableWidth;
}
var lastEntryIdx = this.buildingRow.entriesBuff.length - 1;
for (i = 0; i <= lastEntryIdx; i++) {
$entry =
this.buildingRow.entriesBuff[this.settings.rtl ? lastEntryIdx - i : i];
this.displayEntry(
$entry,
offX,
this.offY,
$entry.data("jg.jwidth"),
$entry.data("jg.jheight"),
this.buildingRow.height
);
offX += $entry.data("jg.jwidth") + settings.margins;
}
//Gallery Height
this.galleryHeightToSet = this.offY + this.buildingRow.height + this.border;
this.setGalleryTempHeight(
this.galleryHeightToSet + this.getSpinnerHeight()
);
if (
!isLastRow ||
(this.buildingRow.height <= settings.rowHeight && buildingRowRes)
) {
//Ready for a new row
this.offY += this.buildingRow.height + settings.margins;
this.rows += 1;
this.clearBuildingRow();
this.settings.triggerEvent.call(this, "jg.rowflush");
}
};
// Scroll position not restoring: https://github.com/miromannino/Justified-Gallery/issues/221
var galleryPrevStaticHeight = 0;
JustifiedGallery.prototype.rememberGalleryHeight = function () {
galleryPrevStaticHeight = this.$gallery.height();
this.$gallery.height(galleryPrevStaticHeight);
};
// grow only
JustifiedGallery.prototype.setGalleryTempHeight = function (height) {
galleryPrevStaticHeight = Math.max(height, galleryPrevStaticHeight);
this.$gallery.height(galleryPrevStaticHeight);
};
JustifiedGallery.prototype.setGalleryFinalHeight = function (height) {
galleryPrevStaticHeight = height;
this.$gallery.height(height);
};
/**
* Checks the width of the gallery container, to know if a new justification is needed
*/
JustifiedGallery.prototype.checkWidth = function () {
this.checkWidthIntervalId = setInterval(
$.proxy(function () {
// if the gallery is not currently visible, abort.
if (!this.$gallery.is(":visible")) return;
var galleryWidth = parseFloat(this.$gallery.width());
if (
Math.abs(galleryWidth - this.galleryWidth) >
this.settings.refreshSensitivity
) {
this.galleryWidth = galleryWidth;
this.rewind();
this.rememberGalleryHeight();
// Restart to analyze
this.startImgAnalyzer(true);
}
}, this),
this.settings.refreshTime
);
};
/**
* @returns {boolean} a boolean saying if the spinner is active or not
*/
JustifiedGallery.prototype.isSpinnerActive = function () {
return this.spinner.intervalId !== null;
};
/**
* @returns {int} the spinner height
*/
JustifiedGallery.prototype.getSpinnerHeight = function () {
return this.spinner.$el.innerHeight();
};
/**
* Stops the spinner animation and modify the gallery height to exclude the spinner
*/
JustifiedGallery.prototype.stopLoadingSpinnerAnimation = function () {
clearInterval(this.spinner.intervalId);
this.spinner.intervalId = null;
this.setGalleryTempHeight(this.$gallery.height() - this.getSpinnerHeight());
this.spinner.$el.detach();
};
/**
* Starts the spinner animation
*/
JustifiedGallery.prototype.startLoadingSpinnerAnimation = function () {
var spinnerContext = this.spinner;
var $spinnerPoints = spinnerContext.$el.find("span");
clearInterval(spinnerContext.intervalId);
this.$gallery.append(spinnerContext.$el);
this.setGalleryTempHeight(
this.offY + this.buildingRow.height + this.getSpinnerHeight()
);
spinnerContext.intervalId = setInterval(function () {
if (spinnerContext.phase < $spinnerPoints.length) {
$spinnerPoints
.eq(spinnerContext.phase)
.fadeTo(spinnerContext.timeSlot, 1);
} else {
$spinnerPoints
.eq(spinnerContext.phase - $spinnerPoints.length)
.fadeTo(spinnerContext.timeSlot, 0);
}
spinnerContext.phase =
(spinnerContext.phase + 1) % ($spinnerPoints.length * 2);
}, spinnerContext.timeSlot);
};
/**
* Rewind the image analysis to start from the first entry.
*/
JustifiedGallery.prototype.rewind = function () {
this.lastFetchedEntry = null;
this.lastAnalyzedIndex = -1;
this.offY = this.border;
this.rows = 0;
this.clearBuildingRow();
};
/**
* @returns {String} `settings.selector` rejecting spinner element
*/
JustifiedGallery.prototype.getSelectorWithoutSpinner = function () {
return this.settings.selector + ", div:not(.jg-spinner)";
};
/**
* @returns {Array} all entries matched by `settings.selector`
*/
JustifiedGallery.prototype.getAllEntries = function () {
var selector = this.getSelectorWithoutSpinner();
return this.$gallery.children(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)
* @returns {boolean} true if some entries has been founded
*/
JustifiedGallery.prototype.updateEntries = function (norewind) {
var newEntries;
if (norewind && this.lastFetchedEntry != null) {
var selector = this.getSelectorWithoutSpinner();
newEntries = $(this.lastFetchedEntry).nextAll(selector).toArray();
} else {
this.entries = [];
newEntries = this.getAllEntries();
}
if (newEntries.length > 0) {
// Sort or randomize
if ($.isFunction(this.settings.sort)) {
newEntries = this.sortArray(newEntries);
} else if (this.settings.randomize) {
newEntries = this.shuffleArray(newEntries);
}
this.lastFetchedEntry = newEntries[newEntries.length - 1];
// Filter
if (this.settings.filter) {
newEntries = this.filterArray(newEntries);
} else {
this.resetFilters(newEntries);
}
}
this.entries = this.entries.concat(newEntries);
return true;
};
/**
* Apply the entries order to the DOM, iterating the entries and appending the images
*
* @param entries the entries that has been modified and that must be re-ordered in the DOM
*/
JustifiedGallery.prototype.insertToGallery = function (entries) {
var that = this;
$.each(entries, function () {
$(this).appendTo(that.$gallery);
});
};
/**
* Shuffle the array using the Fisher-Yates shuffle algorithm
*
* @param a the array to shuffle
* @return the shuffled array
*/
JustifiedGallery.prototype.shuffleArray = function (a) {
var i, j, temp;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = a[i];
a[i] = a[j];
a[j] = temp;
}
this.insertToGallery(a);
return a;
};
/**
* Sort the array using settings.comparator as comparator
*
* @param a the array to sort (it is sorted)
* @return the sorted array
*/
JustifiedGallery.prototype.sortArray = function (a) {
a.sort(this.settings.sort);
this.insertToGallery(a);
return a;
};
/**
* Reset the filters removing the 'jg-filtered' class from all the entries
*
* @param a the array to reset
*/
JustifiedGallery.prototype.resetFilters = function (a) {
for (var i = 0; i < a.length; i++) $(a[i]).removeClass("jg-filtered");
};
/**
* Filter the entries considering theirs classes (if a string has been passed) or using a function for filtering.
*
* @param a the array to filter
* @return the filtered array
*/
JustifiedGallery.prototype.filterArray = function (a) {
var settings = this.settings;
if ($.type(settings.filter) === "string") {
// Filter only keeping the entries passed in the string
return a.filter(function (el) {
var $el = $(el);
if ($el.is(settings.filter)) {
$el.removeClass("jg-filtered");
return true;
} else {
$el.addClass("jg-filtered").removeClass("jg-visible");
return false;
}
});
} else if ($.isFunction(settings.filter)) {
// Filter using the passed function
var filteredArr = a.filter(settings.filter);
for (var i = 0; i < a.length; i++) {
if (filteredArr.indexOf(a[i]) === -1) {
$(a[i]).addClass("jg-filtered").removeClass("jg-visible");
} else {
$(a[i]).removeClass("jg-filtered");
}
}
return filteredArr;
}
};
/**
* 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
* values for those css attributes, because it costs (performance) and because in general one
* shouldn't use the style attribute for an uniform set of images (where we suppose the use of
* classes). Creating a backup is also difficult because JG could be called multiple times and
* with different style attributes.
*/
JustifiedGallery.prototype.destroy = function () {
clearInterval(this.checkWidthIntervalId);
this.stopImgAnalyzerStarter();
// Get fresh entries list since filtered entries are absent in `this.entries`
$.each(
this.getAllEntries(),
$.proxy(function (_, entry) {
var $entry = $(entry);
// Reset entry style
$entry.css("width", "");
$entry.css("height", "");
$entry.css("top", "");
$entry.css("left", "");
$entry.data("jg.loaded", undefined);
$entry.removeClass("jg-entry jg-filtered jg-entry-visible");
// Reset image style
var $img = this.imgFromEntry($entry);
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);
var $caption = this.captionFromEntry($entry);
if ($entry.data("jg.createdCaption")) {
// remove also the caption element (if created by jg)
$entry.data("jg.createdCaption", undefined);
if ($caption !== null) $caption.remove();
} else {
if ($caption !== null) $caption.fadeTo(0, 1);
}
}, this)
);
this.$gallery.css("height", "");
this.$gallery.removeClass("justified-gallery");
this.$gallery.data("jg.controller", undefined);
this.settings.triggerEvent.call(this, "jg.destroy");
};
/**
* Analyze the images and builds the rows. It returns if it found an image that is not loaded.
*
* @param isForResize if the image analyzer is called for resizing or not, to call a different callback at the end
*/
JustifiedGallery.prototype.analyzeImages = function (isForResize) {
for (var i = this.lastAnalyzedIndex + 1; i < this.entries.length; i++) {
var $entry = $(this.entries[i]);
if (
$entry.data("jg.loaded") === true ||
$entry.data("jg.loaded") === "skipped"
) {
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,
this.settings.maxRowsCount > 0 &&
this.rows === this.settings.maxRowsCount
);
if (++this.yield.flushed >= this.yield.every) {
this.startImgAnalyzer(isForResize);
return;
}
}
} else if ($entry.data("jg.loaded") !== "error") {
return;
}
}
// Last row flush (the row is not full)
if (this.buildingRow.entriesBuff.length > 0) {
this.flushRow(
true,
this.settings.maxRowsCount > 0 &&
this.rows === this.settings.maxRowsCount
);
}
if (this.isSpinnerActive()) {
this.stopLoadingSpinnerAnimation();
}
/* Stop, if there is, the timeout to start the analyzeImages.
This is because an image can be set loaded, and the timeout can be set,
but this image can be analyzed yet.
*/
this.stopImgAnalyzerStarter();
this.setGalleryFinalHeight(this.galleryHeightToSet);
//On complete callback
this.settings.triggerEvent.call(
this,
isForResize ? "jg.resize" : "jg.complete"
);
};
/**
* Stops any ImgAnalyzer starter (that has an assigned timeout)
*/
JustifiedGallery.prototype.stopImgAnalyzerStarter = function () {
this.yield.flushed = 0;
if (this.imgAnalyzerTimeout !== null) {
clearTimeout(this.imgAnalyzerTimeout);
this.imgAnalyzerTimeout = null;
}
};
/**
* Starts the image analyzer. It is not immediately called to let the browser to update the view
*
* @param isForResize specifies if the image analyzer must be called for resizing or not
*/
JustifiedGallery.prototype.startImgAnalyzer = function (isForResize) {
var that = this;
this.stopImgAnalyzerStarter();
this.imgAnalyzerTimeout = setTimeout(function () {
that.analyzeImages(isForResize);
}, 0.001); // we can't start it immediately due to a IE different behaviour
};
/**
* Checks if the image is loaded or not using another image object. We cannot use the 'complete' image property,
* because some browsers, with a 404 set complete = true.
*
* @param imageSrc the image src to load
* @param onLoad callback that is called when the image has been loaded
* @param onError callback that is called in case of an error
*/
JustifiedGallery.prototype.onImageEvent = function (
imageSrc,
onLoad,
onError
) {
if (!onLoad && !onError) return;
var memImage = new Image();
var $memImage = $(memImage);
if (onLoad) {
$memImage.one("load", function () {
$memImage.off("load error");
onLoad(memImage);
});
}
if (onError) {
$memImage.one("error", function () {
$memImage.off("load error");
onError(memImage);
});
}
memImage.src = imageSrc;
};
/**
* Init of Justified Gallery controlled
* It analyzes all the entries starting theirs loading and calling the image analyzer (that works with loaded images)
*/
JustifiedGallery.prototype.init = function () {
var imagesToLoad = false,
skippedImages = false,
that = this;
$.each(this.entries, function (index, entry) {
var $entry = $(entry);
var $image = that.imgFromEntry($entry);
$entry.addClass("jg-entry");
if (
$entry.data("jg.loaded") !== true &&
$entry.data("jg.loaded") !== "skipped"
) {
// Link Rel global overwrite
if (that.settings.rel !== null) $entry.attr("rel", that.settings.rel);
// Link Target global overwrite
if (that.settings.target !== null)
$entry.attr("target", that.settings.target);
if ($image !== null) {
// Image src
var imageSrc = that.extractImgSrcFromImage($image);
/* 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);
$entry.data("jg.loaded", "skipped");
skippedImages = true;
that.startImgAnalyzer(false);
return true; // continue
}
}
$entry.data("jg.loaded", false);
imagesToLoad = true;
// Spinner start
if (!that.isSpinnerActive()) that.startLoadingSpinnerAnimation();
that.onImageEvent(
imageSrc,
function (loadImg) {
// image loaded
$entry.data("jg.width", loadImg.width);
$entry.data("jg.height", loadImg.height);
$entry.data("jg.loaded", true);
that.startImgAnalyzer(false);
},
function () {
// image load error
$entry.data("jg.loaded", "error");
that.startImgAnalyzer(false);
}
);
} else {
$entry.data("jg.loaded", true);
$entry.data(
"jg.width",
$entry.width() | parseFloat($entry.css("width")) | 1
);
$entry.data(
"jg.height",
$entry.height() | parseFloat($entry.css("height")) | 1
);
}
}
});
if (!imagesToLoad && !skippedImages) this.startImgAnalyzer(false);
this.checkWidth();
};
/**
* Checks that it is a valid number. If a string is passed it is converted to a number
*
* @param settingContainer the object that contains the setting (to allow the conversion)
* @param settingName the setting name
*/
JustifiedGallery.prototype.checkOrConvertNumber = function (
settingContainer,
settingName
) {
if ($.type(settingContainer[settingName]) === "string") {
settingContainer[settingName] = parseFloat(settingContainer[settingName]);
}
if ($.type(settingContainer[settingName]) === "number") {
if (isNaN(settingContainer[settingName]))
throw "invalid number for " + settingName;
} else {
throw settingName + " must be a number";
}
};
/**
* Checks the sizeRangeSuffixes and, if necessary, converts
* its keys from string (e.g. old settings with 'lt100') to int.
*/
JustifiedGallery.prototype.checkSizeRangesSuffixes = function () {
if ($.type(this.settings.sizeRangeSuffixes) !== "object") {
throw "sizeRangeSuffixes must be defined and must be an object";
}
var suffixRanges = [];
for (var rangeIdx in this.settings.sizeRangeSuffixes) {
if (this.settings.sizeRangeSuffixes.hasOwnProperty(rangeIdx))
suffixRanges.push(rangeIdx);
}
var newSizeRngSuffixes = { 0: "" };
for (var i = 0; i < suffixRanges.length; i++) {
if ($.type(suffixRanges[i]) === "string") {
try {
var numIdx = parseInt(suffixRanges[i].replace(/^[a-z]+/, ""), 10);
newSizeRngSuffixes[numIdx] =
this.settings.sizeRangeSuffixes[suffixRanges[i]];
} catch (e) {
throw (
"sizeRangeSuffixes keys must contains correct numbers (" + e + ")"
);
}
} else {
newSizeRngSuffixes[suffixRanges[i]] =
this.settings.sizeRangeSuffixes[suffixRanges[i]];
}
}
this.settings.sizeRangeSuffixes = newSizeRngSuffixes;
};
/**
* check and convert the maxRowHeight setting
* requires rowHeight to be already set
* TODO: should be always called when only rowHeight is changed
* @return number or null
*/
JustifiedGallery.prototype.retrieveMaxRowHeight = function () {
var newMaxRowHeight = null;
var rowHeight = this.settings.rowHeight;
if ($.type(this.settings.maxRowHeight) === "string") {
if (this.settings.maxRowHeight.match(/^[0-9]+%$/)) {
newMaxRowHeight =
(rowHeight *
parseFloat(this.settings.maxRowHeight.match(/^([0-9]+)%$/)[1])) /
100;
} else {
newMaxRowHeight = parseFloat(this.settings.maxRowHeight);
}
} else if ($.type(this.settings.maxRowHeight) === "number") {
newMaxRowHeight = this.settings.maxRowHeight;
} else if (
this.settings.maxRowHeight === false ||
this.settings.maxRowHeight == null
) {
return null;
} else {
throw "maxRowHeight must be a number or a percentage";
}
// check if the converted value is not a number
if (isNaN(newMaxRowHeight)) throw "invalid number for maxRowHeight";
// check values, maxRowHeight must be >= rowHeight
if (newMaxRowHeight < rowHeight) newMaxRowHeight = rowHeight;
return newMaxRowHeight;
};
/**
* Checks the settings
*/
JustifiedGallery.prototype.checkSettings = function () {
this.checkSizeRangesSuffixes();
this.checkOrConvertNumber(this.settings, "rowHeight");
this.checkOrConvertNumber(this.settings, "margins");
this.checkOrConvertNumber(this.settings, "border");
this.checkOrConvertNumber(this.settings, "maxRowsCount");
var lastRowModes = [
"justify",
"nojustify",
"left",
"center",
"right",
"hide"
];
if (lastRowModes.indexOf(this.settings.lastRow) === -1) {
throw "lastRow must be one of: " + lastRowModes.join(", ");
}
this.checkOrConvertNumber(this.settings, "justifyThreshold");
if (
this.settings.justifyThreshold < 0 ||
this.settings.justifyThreshold > 1
) {
throw "justifyThreshold must be in the interval [0,1]";
}
if ($.type(this.settings.cssAnimation) !== "boolean") {
throw "cssAnimation must be a boolean";
}
if ($.type(this.settings.captions) !== "boolean")
throw "captions must be a boolean";
this.checkOrConvertNumber(
this.settings.captionSettings,
"animationDuration"
);
this.checkOrConvertNumber(this.settings.captionSettings, "visibleOpacity");
if (
this.settings.captionSettings.visibleOpacity < 0 ||
this.settings.captionSettings.visibleOpacity > 1
) {
throw "captionSettings.visibleOpacity must be in the interval [0, 1]";
}
this.checkOrConvertNumber(
this.settings.captionSettings,
"nonVisibleOpacity"
);
if (
this.settings.captionSettings.nonVisibleOpacity < 0 ||
this.settings.captionSettings.nonVisibleOpacity > 1
) {
throw "captionSettings.nonVisibleOpacity must be in the interval [0, 1]";
}
this.checkOrConvertNumber(this.settings, "imagesAnimationDuration");
this.checkOrConvertNumber(this.settings, "refreshTime");
this.checkOrConvertNumber(this.settings, "refreshSensitivity");
if ($.type(this.settings.randomize) !== "boolean")
throw "randomize must be a boolean";
if ($.type(this.settings.selector) !== "string")
throw "selector must be a string";
if (this.settings.sort !== false && !$.isFunction(this.settings.sort)) {
throw "sort must be false or a comparison function";
}
if (
this.settings.filter !== false &&
!$.isFunction(this.settings.filter) &&
$.type(this.settings.filter) !== "string"
) {
throw "filter must be false, a string or a filter function";
}
};
/**
* It brings all the indexes from the sizeRangeSuffixes and it orders them. They are then sorted and returned.
* @returns {Array} sorted suffix ranges
*/
JustifiedGallery.prototype.retrieveSuffixRanges = function () {
var suffixRanges = [];
for (var rangeIdx in this.settings.sizeRangeSuffixes) {
if (this.settings.sizeRangeSuffixes.hasOwnProperty(rangeIdx))
suffixRanges.push(parseInt(rangeIdx, 10));
}
suffixRanges.sort(function (a, b) {
return a > b ? 1 : a < b ? -1 : 0;
});
return suffixRanges;
};
/**
* Update the existing settings only changing some of them
*
* @param newSettings the new settings (or a subgroup of them)
*/
JustifiedGallery.prototype.updateSettings = function (newSettings) {
// In this case Justified Gallery has been called again changing only some options
this.settings = $.extend({}, this.settings, newSettings);
this.checkSettings();
// As reported in the settings: negative value = same as margins, 0 = disabled
this.border =
this.settings.border >= 0 ? this.settings.border : this.settings.margins;
this.maxRowHeight = this.retrieveMaxRowHeight();
this.suffixRanges = this.retrieveSuffixRanges();
};
JustifiedGallery.prototype.defaults = {
sizeRangeSuffixes: {} /* e.g. Flickr configuration
{
100: '_t', // used when longest is less than 100px
240: '_m', // used when longest is between 101px and 240px
320: '_n', // ...
500: '',
640: '_z',
1024: '_b' // used as else case because it is the last
}
*/,
thumbnailPath:
undefined /* If defined, sizeRangeSuffixes is not used, and this function is used to determine the
path relative to a specific thumbnail size. The function should accept respectively three arguments:
current path, width and height */,
rowHeight: 120, // required? required to be > 0?
maxRowHeight: false, // false or negative value to deactivate. Positive number to express the value in pixels,
// A string '[0-9]+%' to express in percentage (e.g. 300% means that the row height
// can't exceed 3 * rowHeight)
maxRowsCount: 0, // maximum number of rows to be displayed (0 = disabled)
margins: 1,
border: -1, // negative value = same as margins, 0 = disabled, any other value to set the border
lastRow: "nojustify", // ? which is the same as 'left', or can be 'justify', 'center', 'right' or 'hide'
justifyThreshold: 0.9,
/* if row width / available space > 0.90 it will be always justified
* (i.e. lastRow setting is not considered) */ waitThumbnailsLoad: true,
captions: true,
cssAnimation: true,
imagesAnimationDuration: 500, // ignored with css animations
captionSettings: {
// ignored with css animations
animationDuration: 500,
visibleOpacity: 0.7,
nonVisibleOpacity: 0.0
},
rel: null, // rewrite the rel of each analyzed links
target: null, // rewrite the target of all links
extension: /\.[^.\\/]+$/, // regexp to capture the extension of an image
refreshTime: 200, // time interval (in ms) to check if the page changes its width
refreshSensitivity: 0, // change in width allowed (in px) without re-building the gallery
randomize: false,
rtl: false, // right-to-left mode
sort: false /*
- false: to do not sort
- function: to sort them using the function as comparator (see Array.prototype.sort())
*/,
filter: false /*
- false, null or undefined: for a disabled filter
- a string: an entry is kept if entry.is(filter string) returns true
see jQuery's .is() function for further information
- a function: invoked with arguments (entry, index, array). Return true to keep the entry, false otherwise.
It follows the specifications of the Array.prototype.filter() function of JavaScript.
*/,
selector: "a", // The selector that is used to know what are the entries of the gallery
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
*
* Events
* - jg.complete : called when all the gallery has been created
* - jg.resize : called when the gallery has been resized
* - jg.rowflush : when a new row appears
*
* @param arg the action (or the settings) passed when the plugin is called
* @returns {*} the object itself
*/
$.fn.justifiedGallery = function (arg) {
return this.each(function (index, gallery) {
var $gallery = $(gallery);
$gallery.addClass("justified-gallery");
var controller = $gallery.data("jg.controller");
if (typeof controller === "undefined") {
// Create controller and assign it to the object data
if (
typeof arg !== "undefined" &&
arg !== null &&
$.type(arg) !== "object"
) {
if (arg === "destroy") return; // Just a call to an unexisting object
throw "The argument must be an object";
}
controller = new JustifiedGallery(
$gallery,
$.extend({}, JustifiedGallery.prototype.defaults, arg)
);
$gallery.data("jg.controller", controller);
} else if (arg === "norewind") {
// In this case we don't rewind: we analyze only the latest images (e.g. to complete the last unfinished row
// ... left to be more readable
} else if (arg === "destroy") {
controller.destroy();
return;
} else {
// In this case Justified Gallery has been called again changing only some options
controller.updateSettings(arg);
controller.rewind();
}
// Update the entries list
if (!controller.updateEntries(arg === "norewind")) return;
// Init justified gallery
controller.init();
});
};
});
|
Download
