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.js196
1 files changed, 106 insertions, 90 deletions
diff --git a/library/justifiedGallery/jquery.justifiedGallery.js b/library/justifiedGallery/jquery.justifiedGallery.js
index d3259fe44..82445b403 100644
--- a/library/justifiedGallery/jquery.justifiedGallery.js
+++ b/library/justifiedGallery/jquery.justifiedGallery.js
@@ -1,11 +1,14 @@
/*!
- * Justified Gallery - v3.6.1
+ * Justified Gallery - v3.6.3
* http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2015 Miro Mannino
+ * Copyright (c) 2016 Miro Mannino
* Licensed under the MIT license.
*/
(function($) {
+ function hasScrollBar() {
+ return $("body").height() > $(window).height();
+ }
/**
* Justified Gallery controller constructor
*
@@ -26,6 +29,7 @@
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)
@@ -35,6 +39,7 @@
this.maxRowHeight = this.retrieveMaxRowHeight();
this.suffixRanges = this.retrieveSuffixRanges();
this.offY = this.border;
+ this.rows = 0;
this.spinner = {
phase : 0,
timeSlot : 150,
@@ -97,11 +102,11 @@
*
* @returns {String} the suffix to use
*/
- JustifiedGallery.prototype.newSrc = function (imageSrc, imgWidth, imgHeight) {
+ JustifiedGallery.prototype.newSrc = function (imageSrc, imgWidth, imgHeight, image) {
var newImageSrc;
-
+
if (this.settings.thumbnailPath) {
- newImageSrc = this.settings.thumbnailPath(imageSrc, imgWidth, imgHeight);
+ newImageSrc = this.settings.thumbnailPath(imageSrc, imgWidth, imgHeight, image);
} else {
var matchRes = imageSrc.match(this.settings.extension);
var ext = (matchRes !== null) ? matchRes[0] : '';
@@ -125,6 +130,7 @@
if (callback) callback();
} else {
$entry.stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
+ $entry.find('> img, > a > img').stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
}
};
@@ -179,7 +185,7 @@
// Image reloading for an high quality of thumbnails
var imageSrc = $image.attr('src');
- var newImageSrc = this.newSrc(imageSrc, imgWidth, imgHeight);
+ 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.
@@ -325,6 +331,7 @@
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'
@@ -333,14 +340,23 @@
$entry = this.buildingRow.entriesBuff[i];
if (this.settings.cssAnimation)
$entry.removeClass('entry-visible');
- else
- $entry.stop().fadeTo(0, 0);
+ 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 (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];
@@ -349,19 +365,9 @@
if (justify) {
newImgW = (i === this.buildingRow.entriesBuff.length - 1) ? availableWidth : rowHeight * imgAspectRatio;
newImgH = rowHeight;
-
- /* With fixedHeight the newImgH must be greater than rowHeight.
- In some cases here this is not satisfied (due to the justification).
- But we comment it, because is better to have a shorter but justified row instead
- to have a cropped image at the end. */
- /*if (this.settings.fixedHeight && newImgH < this.settings.rowHeight) {
- newImgW = this.settings.rowHeight * imgAspectRatio;
- newImgH = this.settings.rowHeight;
- }*/
-
} else {
- newImgW = this.settings.rowHeight * imgAspectRatio;
- newImgH = this.settings.rowHeight;
+ newImgW = defaultRowHeight * imgAspectRatio;
+ newImgH = defaultRowHeight;
}
availableWidth -= Math.round(newImgW);
@@ -370,9 +376,6 @@
if (i === 0 || minHeight > newImgH) minHeight = newImgH;
}
- if (this.settings.fixedHeight && minHeight > this.settings.rowHeight)
- minHeight = this.settings.rowHeight;
-
this.buildingRow.height = minHeight;
return justify;
};
@@ -396,17 +399,15 @@
var $entry, buildingRowRes, offX = this.border, i;
buildingRowRes = this.prepareBuildingRow(isLastRow);
- if (isLastRow && settings.lastRow === 'hide' && this.buildingRow.height === -1) {
+ if (isLastRow && settings.lastRow === 'hide' && buildingRowRes === -1) {
this.clearBuildingRow();
return;
}
- if (this.maxRowHeight.isPercentage) {
- if (this.maxRowHeight.value * settings.rowHeight < this.buildingRow.height) {
+ if (this.maxRowHeight) {
+ if (this.maxRowHeight.isPercentage && this.maxRowHeight.value * settings.rowHeight < this.buildingRow.height) {
this.buildingRow.height = this.maxRowHeight.value * settings.rowHeight;
- }
- } else {
- if (this.maxRowHeight.value > 0 && this.maxRowHeight.value < this.buildingRow.height) {
+ } else if (this.maxRowHeight.value >= settings.rowHeight && this.maxRowHeight.value < this.buildingRow.height) {
this.buildingRow.height = this.maxRowHeight.value;
}
}
@@ -426,7 +427,6 @@
offX += availableWidth;
}
-
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
$entry = this.buildingRow.entriesBuff[i];
this.displayEntry($entry, offX, this.offY, $entry.data('jg.jwidth'), $entry.data('jg.jheight'), this.buildingRow.height);
@@ -434,12 +434,13 @@
}
//Gallery Height
- this.$gallery.height(this.offY + this.buildingRow.height +
- this.border + (this.isSpinnerActive() ? this.getSpinnerHeight() : 0));
+ this.galleryHeightToSet = this.offY + this.buildingRow.height + this.border;
+ this.$gallery.height(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.$gallery.trigger('jg.rowflush');
}
@@ -448,15 +449,21 @@
/**
* Checks the width of the gallery container, to know if a new justification is needed
*/
+ var scrollBarOn = false;
JustifiedGallery.prototype.checkWidth = function () {
this.checkWidthIntervalId = setInterval($.proxy(function () {
var galleryWidth = parseFloat(this.$gallery.width());
- if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
- this.galleryWidth = galleryWidth;
- this.rewind();
+ if (hasScrollBar() === scrollBarOn) {
+ if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
+ this.galleryWidth = galleryWidth;
+ this.rewind();
- // Restart to analyze
- this.startImgAnalyzer(true);
+ // Restart to analyze
+ this.startImgAnalyzer(true);
+ }
+ } else {
+ scrollBarOn = hasScrollBar();
+ this.galleryWidth = galleryWidth;
}
}, this), this.settings.refreshTime);
};
@@ -508,8 +515,10 @@
* 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();
};
@@ -520,23 +529,35 @@
* @returns {boolean} true if some entries has been founded
*/
JustifiedGallery.prototype.updateEntries = function (norewind) {
- this.entries = this.$gallery.find(this.settings.selector).toArray();
- if (this.entries.length === 0) return false;
+ var newEntries;
- // Filter
- if (this.settings.filter) {
- this.modifyEntries(this.filterArray, norewind);
+ if (norewind && this.lastFetchedEntry != null) {
+ newEntries = $(this.lastFetchedEntry).nextAll(this.settings.selector).toArray();
} else {
- this.modifyEntries(this.resetFilters, norewind);
+ this.entries = [];
+ newEntries = this.$gallery.children(this.settings.selector).toArray();
}
- // Sort or randomize
- if ($.isFunction(this.settings.sort)) {
- this.modifyEntries(this.sortArray, norewind);
- } else if (this.settings.randomize) {
- this.modifyEntries(this.shuffleArray, norewind);
+ 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;
};
@@ -589,7 +610,6 @@
*/
JustifiedGallery.prototype.resetFilters = function (a) {
for (var i = 0; i < a.length; i++) $(a[i]).removeClass('jg-filtered');
- return a;
};
/**
@@ -608,31 +628,25 @@
$el.removeClass('jg-filtered');
return true;
} else {
- $el.addClass('jg-filtered');
+ $el.addClass('jg-filtered').removeClass('jg-visible');
return false;
}
});
} else if ($.isFunction(settings.filter)) {
// Filter using the passed function
- return a.filter(settings.filter);
+ 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;
}
};
/**
- * Modify the entries. With norewind only the new inserted images will be modified (the ones after lastAnalyzedIndex)
- *
- * @param functionToApply the function to call to modify the entries (e.g. sorting, randomization, filtering)
- * @param norewind specify if the norewind has been called or not
- */
- JustifiedGallery.prototype.modifyEntries = function (functionToApply, norewind) {
- var lastEntries = norewind ?
- this.entries.splice(this.lastAnalyzedIndex + 1, this.entries.length - this.lastAnalyzedIndex - 1)
- : this.entries;
- lastEntries = functionToApply.call(this, lastEntries);
- this.entries = norewind ? this.entries.concat(lastEntries) : lastEntries;
- };
-
- /**
* Destroy the Justified Gallery instance.
*
* It clears all the css properties added in the style attributes. We doesn't backup the original
@@ -727,6 +741,7 @@
//On complete callback
this.$gallery.trigger(isForResize ? 'jg.resize' : 'jg.complete');
+ this.$gallery.height(this.galleryHeightToSet);
};
/**
@@ -915,6 +930,10 @@
} else if ($.type(this.settings.maxRowHeight) === 'number') {
newMaxRowHeight.value = this.settings.maxRowHeight;
newMaxRowHeight.isPercentage = false;
+ } else if (this.settings.maxRowHeight === false ||
+ this.settings.maxRowHeight === null ||
+ typeof this.settings.maxRowHeight == 'undefined') {
+ return null;
} else {
throw 'maxRowHeight must be a number or a percentage';
}
@@ -925,14 +944,9 @@
// check values
if (newMaxRowHeight.isPercentage) {
if (newMaxRowHeight.value < 100) newMaxRowHeight.value = 100;
- } else {
- if (newMaxRowHeight.value > 0 && newMaxRowHeight.value < this.settings.rowHeight) {
- newMaxRowHeight.value = this.settings.rowHeight;
- }
}
return newMaxRowHeight;
-
};
/**
@@ -945,12 +959,16 @@
this.checkOrConvertNumber(this.settings, 'margins');
this.checkOrConvertNumber(this.settings, 'border');
- if (this.settings.lastRow !== 'justify' &&
- this.settings.lastRow !== 'nojustify' && this.settings.lastRow !== 'left' &&
- this.settings.lastRow !== 'center' &&
- this.settings.lastRow !== 'right' &&
- this.settings.lastRow !== 'hide') {
- throw 'lastRow must be "justify", "nojustify", "left", "center", "right" or "hide"';
+ 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');
@@ -976,7 +994,6 @@
throw 'captionSettings.nonVisibleOpacity must be in the interval [0, 1]';
}
- if ($.type(this.settings.fixedHeight) !== 'boolean') throw 'fixedHeight must be a boolean';
this.checkOrConvertNumber(this.settings, 'imagesAnimationDuration');
this.checkOrConvertNumber(this.settings, 'refreshTime');
this.checkOrConvertNumber(this.settings, 'refreshSensitivity');
@@ -1051,7 +1068,7 @@
$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
+ // ... left to be more readable
} else if (arg === 'destroy') {
controller.destroy();
return;
@@ -1083,23 +1100,22 @@
}
*/
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:
+ path relative to a specific thumbnail size. The function should accept respectively three arguments:
current path, width and height */
rowHeight: 120,
- maxRowHeight: -1, // negative value = no limits, number to express the value in pixels,
- // '[0-9]+%' to express in percentage (e.g. 300% means that the row height
- // can't exceed 3 * rowHeight)
+ 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)
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.75, /* if row width / available space > 0.75 it will be always justified
+
+ justifyThreshold: 0.90, /* if row width / available space > 0.90 it will be always justified
* (i.e. lastRow setting is not considered) */
- fixedHeight: false,
waitThumbnailsLoad: true,
captions: true,
- cssAnimation: false,
+ cssAnimation: true,
imagesAnimationDuration: 500, // ignored with css animations
captionSettings: { // ignored with css animations
animationDuration: 500,
@@ -1117,13 +1133,13 @@
- function: to sort them using the function as comparator (see Array.prototype.sort())
*/
filter: false, /*
- - false: for a disabled filter
+ - 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.
- see Array.prototype.filter for further information.
+ 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, div:not(.spinner)' // The selector that is used to know what are the entries of the gallery
};
}(jQuery));
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-28 16:20:58 +0000