aboutsummaryrefslogtreecommitdiffstats
path: root/library/justifiedGallery/jquery.justifiedGallery.js
diff options
context:
space:
mode:
authorMax Kostikov <max@kostikov.co>2020-07-19 14:58:19 +0200
committerMax Kostikov <max@kostikov.co>2020-07-19 14:58:19 +0200
commit5ea7196e78d08550b3ec93d3b708f915b3b0057f (patch)
tree07e5f865b6c83898d7ac508302a227509e8207fd /library/justifiedGallery/jquery.justifiedGallery.js
parentd0c7c99d5e1eb27281431231640c7e8c019b90e1 (diff)
parentfcc47e69e424635fa54b2684329623d4f7694436 (diff)
downloadvolse-hubzilla-5ea7196e78d08550b3ec93d3b708f915b3b0057f.tar.gz
volse-hubzilla-5ea7196e78d08550b3ec93d3b708f915b3b0057f.tar.bz2
volse-hubzilla-5ea7196e78d08550b3ec93d3b708f915b3b0057f.zip
Merge branch 'dev' into 'dev'
Dev sync See merge request kostikov/core!1
Diffstat (limited to 'library/justifiedGallery/jquery.justifiedGallery.js')
-rw-r--r--library/justifiedGallery/jquery.justifiedGallery.js122
1 files changed, 69 insertions, 53 deletions
diff --git a/library/justifiedGallery/jquery.justifiedGallery.js b/library/justifiedGallery/jquery.justifiedGallery.js
index 76db2112c..846f611dd 100644
--- a/library/justifiedGallery/jquery.justifiedGallery.js
+++ b/library/justifiedGallery/jquery.justifiedGallery.js
@@ -1,7 +1,7 @@
/*!
- * justifiedGallery - v4.0.0-alpha
+ * justifiedGallery - v3.8.1
* http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2019 Miro Mannino
+ * Copyright (c) 2020 Miro Mannino
* Licensed under the MIT license.
*/
(function (factory) {
@@ -10,13 +10,13 @@
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
- module.exports = function( root, jQuery ) {
- if ( jQuery === undefined ) {
+ 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' ) {
+ if (typeof window !== 'undefined') {
jQuery = require('jquery');
}
else {
@@ -47,16 +47,16 @@
this.imgAnalyzerTimeout = null;
this.entries = null;
this.buildingRow = {
- entriesBuff : [],
- width : 0,
- height : 0,
- aspectRatio : 0
+ 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
+ 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();
@@ -64,10 +64,10 @@
this.offY = this.border;
this.rows = 0;
this.spinner = {
- phase : 0,
- timeSlot : 150,
- $el : $('<div class="spinner"><span></span><span></span><span></span></div>'),
- intervalId : null
+ phase: 0,
+ timeSlot: 150,
+ $el: $('<div class="jg-spinner"><span></span><span></span><span></span></div>'),
+ intervalId: null
};
this.scrollBarOn = false;
this.checkWidthIntervalId = null;
@@ -167,7 +167,7 @@
*/
JustifiedGallery.prototype.extractImgSrcFromImage = function ($image) {
var imageSrc = $image.data('safe-src');
- var imageSrcLoc = 'date-safe-src';
+ var imageSrcLoc = 'data-safe-src';
if (typeof imageSrc === 'undefined') {
imageSrc = $image.attr('src');
imageSrcLoc = 'src';
@@ -186,7 +186,7 @@
/** @returns {jQuery} the caption in the given entry */
JustifiedGallery.prototype.captionFromEntry = function ($entry) {
- var $caption = $entry.find('> .caption');
+ var $caption = $entry.find('> .jg-caption');
return $caption.length === 0 ? null : $caption;
};
@@ -228,7 +228,7 @@
// }
};
- if ($entry.data('jg.loaded') === 'skipped') {
+ 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);
@@ -262,7 +262,7 @@
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="caption">' + caption + '</div>');
+ $imgCaption = $('<div class="jg-caption">' + caption + '</div>');
$entry.append($imgCaption);
$entry.data('jg.createdCaption', true);
}
@@ -297,10 +297,10 @@
JustifiedGallery.prototype.onEntryMouseEnterForCaption = function (eventObject) {
var $caption = this.captionFromEntry($(eventObject.currentTarget));
if (this.settings.cssAnimation) {
- $caption.addClass('caption-visible').removeClass('caption-hidden');
+ $caption.addClass('jg-caption-visible').removeClass('jg-caption-hidden');
} else {
$caption.stop().fadeTo(this.settings.captionSettings.animationDuration,
- this.settings.captionSettings.visibleOpacity);
+ this.settings.captionSettings.visibleOpacity);
}
};
@@ -313,10 +313,10 @@
JustifiedGallery.prototype.onEntryMouseLeaveForCaption = function (eventObject) {
var $caption = this.captionFromEntry($(eventObject.currentTarget));
if (this.settings.cssAnimation) {
- $caption.removeClass('caption-visible').removeClass('caption-hidden');
+ $caption.removeClass('jg-caption-visible').removeClass('jg-caption-hidden');
} else {
$caption.stop().fadeTo(this.settings.captionSettings.animationDuration,
- this.settings.captionSettings.nonVisibleOpacity);
+ this.settings.captionSettings.nonVisibleOpacity);
}
};
@@ -365,19 +365,20 @@
* 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) {
+ 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);
+ (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 (isLastRow && this.settings.lastRow === 'hide' && !justifiable) {
+ 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)
@@ -426,19 +427,20 @@
* 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) {
+ JustifiedGallery.prototype.flushRow = function (isLastRow, hiddenRow) {
var settings = this.settings;
var $entry, buildingRowRes, offX = this.border, i;
- buildingRowRes = this.prepareBuildingRow(isLastRow);
- if (isLastRow && settings.lastRow === 'hide' && buildingRowRes === -1) {
+ 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;
+ if (this.maxRowHeight) {
+ if (this.maxRowHeight < this.buildingRow.height) this.buildingRow.height = this.maxRowHeight;
}
//Align last (unjustified) row
@@ -451,14 +453,14 @@
}
if (settings.lastRow === 'center')
- offX += availableWidth / 2;
+ 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 ];
+ $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;
}
@@ -573,10 +575,18 @@
};
/**
+ * @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 () {
- return this.$gallery.children(this.settings.selector).toArray();
+ var selector = this.getSelectorWithoutSpinner();
+ return this.$gallery.children(selector).toArray();
};
/**
@@ -589,7 +599,8 @@
var newEntries;
if (norewind && this.lastFetchedEntry != null) {
- newEntries = $(this.lastFetchedEntry).nextAll(this.settings.selector).toArray();
+ var selector = this.getSelectorWithoutSpinner();
+ newEntries = $(this.lastFetchedEntry).nextAll(selector).toArray();
} else {
this.entries = [];
newEntries = this.getAllEntries();
@@ -707,12 +718,12 @@
* Revert the image src to the default value.
*/
JustifiedGallery.prototype.resetImgSrc = function ($img) {
- if ($img.data('jg.originalSrcLoc') == 'src') {
+ if ($img.data('jg.originalSrcLoc') === 'src') {
$img.attr('src', $img.data('jg.originalSrc'));
} else {
$img.attr('src', '');
}
- }
+ };
/**
* Destroy the Justified Gallery instance.
@@ -728,7 +739,7 @@
this.stopImgAnalyzerStarter();
// Get fresh entries list since filtered entries are absent in `this.entries`
- $.each(this.getAllEntries(), $.proxy(function(_, entry) {
+ $.each(this.getAllEntries(), $.proxy(function (_, entry) {
var $entry = $(entry);
// Reset entry style
@@ -781,7 +792,7 @@
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);
+ (this.buildingRow.entriesBuff.length - 1) * this.settings.margins);
var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
this.buildingRow.entriesBuff.push($entry);
@@ -790,9 +801,9 @@
this.lastAnalyzedIndex = i;
if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
- this.flushRow(false);
+ this.flushRow(false, this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount);
- if(++this.yield.flushed >= this.yield.every) {
+ if (++this.yield.flushed >= this.yield.every) {
this.startImgAnalyzer(isForResize);
return;
}
@@ -803,7 +814,9 @@
}
// Last row flush (the row is not full)
- if (this.buildingRow.entriesBuff.length > 0) this.flushRow(true);
+ if (this.buildingRow.entriesBuff.length > 0) {
+ this.flushRow(true, this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount);
+ }
if (this.isSpinnerActive()) {
this.stopLoadingSpinnerAnimation();
@@ -815,9 +828,10 @@
*/
this.stopImgAnalyzerStarter();
+ this.setGalleryFinalHeight(this.galleryHeightToSet);
+
//On complete callback
this.settings.triggerEvent.call(this, isForResize ? 'jg.resize' : 'jg.complete');
- this.setGalleryFinalHeight(this.galleryHeightToSet);
};
/**
@@ -864,7 +878,7 @@
});
}
if (onError) {
- $memImage.one('error', function() {
+ $memImage.one('error', function () {
$memImage.off('load error');
onError(memImage);
});
@@ -978,7 +992,7 @@
if (this.settings.sizeRangeSuffixes.hasOwnProperty(rangeIdx)) suffixRanges.push(rangeIdx);
}
- var newSizeRngSuffixes = {0: ''};
+ var newSizeRngSuffixes = { 0: '' };
for (var i = 0; i < suffixRanges.length; i++) {
if ($.type(suffixRanges[i]) === 'string') {
try {
@@ -1037,6 +1051,7 @@
this.checkOrConvertNumber(this.settings, 'rowHeight');
this.checkOrConvertNumber(this.settings, 'margins');
this.checkOrConvertNumber(this.settings, 'border');
+ this.checkOrConvertNumber(this.settings, 'maxRowsCount');
var lastRowModes = [
'justify',
@@ -1063,13 +1078,13 @@
this.checkOrConvertNumber(this.settings.captionSettings, 'visibleOpacity');
if (this.settings.captionSettings.visibleOpacity < 0 ||
- this.settings.captionSettings.visibleOpacity > 1) {
+ 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) {
+ this.settings.captionSettings.nonVisibleOpacity > 1) {
throw 'captionSettings.nonVisibleOpacity must be in the interval [0, 1]';
}
@@ -1084,7 +1099,7 @@
}
if (this.settings.filter !== false && !$.isFunction(this.settings.filter) &&
- $.type(this.settings.filter) !== 'string') {
+ $.type(this.settings.filter) !== 'string') {
throw 'filter must be false, a string or a filter function';
}
};
@@ -1120,7 +1135,7 @@
};
JustifiedGallery.prototype.defaults = {
- sizeRangeSuffixes: { }, /* e.g. Flickr configuration
+ sizeRangeSuffixes: {}, /* e.g. Flickr configuration
{
100: '_t', // used when longest is less than 100px
240: '_m', // used when longest is between 101px and 240px
@@ -1135,8 +1150,9 @@
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)
+ // 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
@@ -1171,7 +1187,7 @@
- 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, div:not(.spinner)', // The selector that is used to know what are the entries of the gallery
+ 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
@@ -1226,4 +1242,4 @@
});
};
-})); \ No newline at end of file
+}));