mirror of
https://framagit.org/hubzilla/core.git
synced 2026-06-21 00:52:33 -04:00
Merge branch 'dev' of https://framagit.org/hubzilla/core into dev
This commit is contained in:
@@ -40,10 +40,10 @@
|
|||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
var JustifiedGallery = function ($gallery, settings) {
|
var JustifiedGallery = function ($gallery, settings) {
|
||||||
|
|
||||||
this.settings = settings;
|
this.settings = settings;
|
||||||
this.checkSettings();
|
this.checkSettings();
|
||||||
|
|
||||||
this.imgAnalyzerTimeout = null;
|
this.imgAnalyzerTimeout = null;
|
||||||
this.entries = null;
|
this.entries = null;
|
||||||
this.buildingRow = {
|
this.buildingRow = {
|
||||||
@@ -73,9 +73,9 @@
|
|||||||
this.checkWidthIntervalId = null;
|
this.checkWidthIntervalId = null;
|
||||||
this.galleryWidth = $gallery.width();
|
this.galleryWidth = $gallery.width();
|
||||||
this.$gallery = $gallery;
|
this.$gallery = $gallery;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @returns {String} the best suffix given the width and the height */
|
/** @returns {String} the best suffix given the width and the height */
|
||||||
JustifiedGallery.prototype.getSuffix = function (width, height) {
|
JustifiedGallery.prototype.getSuffix = function (width, height) {
|
||||||
var longestSide, i;
|
var longestSide, i;
|
||||||
@@ -87,7 +87,7 @@
|
|||||||
}
|
}
|
||||||
return this.settings.sizeRangeSuffixes[this.suffixRanges[i - 1]];
|
return this.settings.sizeRangeSuffixes[this.suffixRanges[i - 1]];
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the suffix from the string
|
* Remove the suffix from the string
|
||||||
*
|
*
|
||||||
@@ -96,14 +96,14 @@
|
|||||||
JustifiedGallery.prototype.removeSuffix = function (str, suffix) {
|
JustifiedGallery.prototype.removeSuffix = function (str, suffix) {
|
||||||
return str.substring(0, str.length - suffix.length);
|
return str.substring(0, str.length - suffix.length);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @returns {boolean} a boolean to say if the suffix is contained in the str or not
|
* @returns {boolean} a boolean to say if the suffix is contained in the str or not
|
||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.endsWith = function (str, suffix) {
|
JustifiedGallery.prototype.endsWith = function (str, suffix) {
|
||||||
return str.indexOf(suffix, str.length - suffix.length) !== -1;
|
return str.indexOf(suffix, str.length - suffix.length) !== -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the used suffix of a particular url
|
* Get the used suffix of a particular url
|
||||||
*
|
*
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Given an image src, with the width and the height, returns the new image src with the
|
* 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.
|
* best suffix to show the best quality thumbnail.
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.newSrc = function (imageSrc, imgWidth, imgHeight, image) {
|
JustifiedGallery.prototype.newSrc = function (imageSrc, imgWidth, imgHeight, image) {
|
||||||
var newImageSrc;
|
var newImageSrc;
|
||||||
|
|
||||||
if (this.settings.thumbnailPath) {
|
if (this.settings.thumbnailPath) {
|
||||||
newImageSrc = this.settings.thumbnailPath(imageSrc, imgWidth, imgHeight, image);
|
newImageSrc = this.settings.thumbnailPath(imageSrc, imgWidth, imgHeight, image);
|
||||||
} else {
|
} else {
|
||||||
@@ -138,10 +138,10 @@
|
|||||||
newImageSrc = this.removeSuffix(newImageSrc, this.getUsedSuffix(newImageSrc));
|
newImageSrc = this.removeSuffix(newImageSrc, this.getUsedSuffix(newImageSrc));
|
||||||
newImageSrc += this.getSuffix(imgWidth, imgHeight) + ext;
|
newImageSrc += this.getSuffix(imgWidth, imgHeight) + ext;
|
||||||
}
|
}
|
||||||
|
|
||||||
return newImageSrc;
|
return newImageSrc;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shows the images that is in the given entry
|
* Shows the images that is in the given entry
|
||||||
*
|
*
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
$entry.find(this.settings.imgSelector).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
|
* 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.
|
* 'src' attribute. It saves in the image data the 'jg.originalSrc' field, with the extracted src.
|
||||||
@@ -177,19 +177,19 @@
|
|||||||
$image.data('jg.originalSrcLoc', imageSrcLoc); // this is saved for the destroy method
|
$image.data('jg.originalSrcLoc', imageSrcLoc); // this is saved for the destroy method
|
||||||
return imageSrc;
|
return imageSrc;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @returns {jQuery} the image in the given entry */
|
/** @returns {jQuery} the image in the given entry */
|
||||||
JustifiedGallery.prototype.imgFromEntry = function ($entry) {
|
JustifiedGallery.prototype.imgFromEntry = function ($entry) {
|
||||||
var $img = $entry.find(this.settings.imgSelector);
|
var $img = $entry.find(this.settings.imgSelector);
|
||||||
return $img.length === 0 ? null : $img;
|
return $img.length === 0 ? null : $img;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @returns {jQuery} the caption in the given entry */
|
/** @returns {jQuery} the caption in the given entry */
|
||||||
JustifiedGallery.prototype.captionFromEntry = function ($entry) {
|
JustifiedGallery.prototype.captionFromEntry = function ($entry) {
|
||||||
var $caption = $entry.find('> .jg-caption');
|
var $caption = $entry.find('> .jg-caption');
|
||||||
return $caption.length === 0 ? null : $caption;
|
return $caption.length === 0 ? null : $caption;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Display the entry
|
* Display the entry
|
||||||
*
|
*
|
||||||
@@ -205,29 +205,29 @@
|
|||||||
$entry.height(rowHeight);
|
$entry.height(rowHeight);
|
||||||
$entry.css('top', y);
|
$entry.css('top', y);
|
||||||
$entry.css('left', x);
|
$entry.css('left', x);
|
||||||
|
|
||||||
var $image = this.imgFromEntry($entry);
|
var $image = this.imgFromEntry($entry);
|
||||||
if ($image !== null) {
|
if ($image !== null) {
|
||||||
$image.css('width', imgWidth);
|
$image.css('width', imgWidth);
|
||||||
$image.css('height', imgHeight);
|
$image.css('height', imgHeight);
|
||||||
$image.css('margin-left', - imgWidth / 2);
|
$image.css('margin-left', - imgWidth / 2);
|
||||||
$image.css('margin-top', - imgHeight / 2);
|
$image.css('margin-top', - imgHeight / 2);
|
||||||
|
|
||||||
// Image reloading for an high quality of thumbnails
|
// Image reloading for an high quality of thumbnails
|
||||||
var imageSrc = $image.data('jg.src');
|
var imageSrc = $image.data('jg.src');
|
||||||
if (imageSrc) {
|
if (imageSrc) {
|
||||||
imageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]);
|
imageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]);
|
||||||
|
|
||||||
$image.one('error', function () {
|
$image.one('error', function () {
|
||||||
this.resetImgSrc($image); //revert to the original thumbnail
|
this.resetImgSrc($image); //revert to the original thumbnail
|
||||||
});
|
});
|
||||||
|
|
||||||
var loadNewImage = function () {
|
var loadNewImage = function () {
|
||||||
// if (imageSrc !== newImageSrc) {
|
// if (imageSrc !== newImageSrc) {
|
||||||
$image.attr('src', imageSrc);
|
$image.attr('src', imageSrc);
|
||||||
// }
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
if ($entry.data('jg.loaded') === 'skipped' && imageSrc) {
|
if ($entry.data('jg.loaded') === 'skipped' && imageSrc) {
|
||||||
this.onImageEvent(imageSrc, (function() {
|
this.onImageEvent(imageSrc, (function() {
|
||||||
this.showImg($entry, loadNewImage); //load the new image after the fadeIn
|
this.showImg($entry, loadNewImage); //load the new image after the fadeIn
|
||||||
@@ -236,16 +236,16 @@
|
|||||||
} else {
|
} else {
|
||||||
this.showImg($entry, loadNewImage); //load the new image after the fadeIn
|
this.showImg($entry, loadNewImage); //load the new image after the fadeIn
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.showImg($entry);
|
this.showImg($entry);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.displayEntryCaption($entry);
|
this.displayEntryCaption($entry);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Display the entry caption. If the caption element doesn't exists, it creates the caption using the 'alt'
|
* Display the entry caption. If the caption element doesn't exists, it creates the caption using the 'alt'
|
||||||
* or the 'title' attributes.
|
* or the 'title' attributes.
|
||||||
@@ -256,18 +256,18 @@
|
|||||||
var $image = this.imgFromEntry($entry);
|
var $image = this.imgFromEntry($entry);
|
||||||
if ($image !== null && this.settings.captions) {
|
if ($image !== null && this.settings.captions) {
|
||||||
var $imgCaption = this.captionFromEntry($entry);
|
var $imgCaption = this.captionFromEntry($entry);
|
||||||
|
|
||||||
// Create it if it doesn't exists
|
// Create it if it doesn't exists
|
||||||
if ($imgCaption === null) {
|
if ($imgCaption === null) {
|
||||||
var caption = $image.attr('alt');
|
var caption = $image.attr('alt');
|
||||||
if (!this.isValidCaption(caption)) caption = $entry.attr('title');
|
if (!this.isValidCaption(caption)) caption = $entry.attr('title');
|
||||||
if (this.isValidCaption(caption)) { // Create only we found something
|
if (this.isValidCaption(caption)) { // Create only we found something
|
||||||
$imgCaption = $('<div class="jg-caption">' + caption + '</div>');
|
$imgCaption = $('<div class="jg-caption"></div>').text(caption);
|
||||||
$entry.append($imgCaption);
|
$entry.append($imgCaption);
|
||||||
$entry.data('jg.createdCaption', true);
|
$entry.data('jg.createdCaption', true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create events (we check again the $imgCaption because it can be still inexistent)
|
// Create events (we check again the $imgCaption because it can be still inexistent)
|
||||||
if ($imgCaption !== null) {
|
if ($imgCaption !== null) {
|
||||||
if (!this.settings.cssAnimation) $imgCaption.stop().fadeTo(0, this.settings.captionSettings.nonVisibleOpacity);
|
if (!this.settings.cssAnimation) $imgCaption.stop().fadeTo(0, this.settings.captionSettings.nonVisibleOpacity);
|
||||||
@@ -277,7 +277,7 @@
|
|||||||
this.removeCaptionEventsHandlers($entry);
|
this.removeCaptionEventsHandlers($entry);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Validates the caption
|
* Validates the caption
|
||||||
*
|
*
|
||||||
@@ -287,7 +287,7 @@
|
|||||||
JustifiedGallery.prototype.isValidCaption = function (caption) {
|
JustifiedGallery.prototype.isValidCaption = function (caption) {
|
||||||
return (typeof caption !== 'undefined' && caption.length > 0);
|
return (typeof caption !== 'undefined' && caption.length > 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The callback for the event 'mouseenter'. It assumes that the event currentTarget is an entry.
|
* 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)
|
* It shows the caption using jQuery (or using CSS if it is configured so)
|
||||||
@@ -303,7 +303,7 @@
|
|||||||
this.settings.captionSettings.visibleOpacity);
|
this.settings.captionSettings.visibleOpacity);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The callback for the event 'mouseleave'. It assumes that the event currentTarget is an entry.
|
* 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)
|
* It hides the caption using jQuery (or using CSS if it is configured so)
|
||||||
@@ -319,7 +319,7 @@
|
|||||||
this.settings.captionSettings.nonVisibleOpacity);
|
this.settings.captionSettings.nonVisibleOpacity);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the handlers of the entry for the caption
|
* Add the handlers of the entry for the caption
|
||||||
*
|
*
|
||||||
@@ -337,7 +337,7 @@
|
|||||||
$entry.data('jg.captionMouseEvents', captionMouseEvents);
|
$entry.data('jg.captionMouseEvents', captionMouseEvents);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the handlers of the entry for the caption
|
* Remove the handlers of the entry for the caption
|
||||||
*
|
*
|
||||||
@@ -351,7 +351,7 @@
|
|||||||
$entry.removeData('jg.captionMouseEvents');
|
$entry.removeData('jg.captionMouseEvents');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clear the building row data to be used for a new row
|
* Clear the building row data to be used for a new row
|
||||||
*/
|
*/
|
||||||
@@ -360,7 +360,7 @@
|
|||||||
this.buildingRow.aspectRatio = 0;
|
this.buildingRow.aspectRatio = 0;
|
||||||
this.buildingRow.width = 0;
|
this.buildingRow.width = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Justify the building row, preparing it to
|
* Justify the building row, preparing it to
|
||||||
*
|
*
|
||||||
@@ -376,7 +376,7 @@
|
|||||||
var rowHeight = availableWidth / this.buildingRow.aspectRatio;
|
var rowHeight = availableWidth / this.buildingRow.aspectRatio;
|
||||||
var defaultRowHeight = this.settings.rowHeight;
|
var defaultRowHeight = this.settings.rowHeight;
|
||||||
var justifiable = this.buildingRow.width / availableWidth > this.settings.justifyThreshold;
|
var justifiable = this.buildingRow.width / availableWidth > this.settings.justifyThreshold;
|
||||||
|
|
||||||
//Skip the last row if we can't justify it and the lastRow == 'hide'
|
//Skip the last row if we can't justify it and the lastRow == 'hide'
|
||||||
if (hiddenRow || (isLastRow && this.settings.lastRow === 'hide' && !justifiable)) {
|
if (hiddenRow || (isLastRow && this.settings.lastRow === 'hide' && !justifiable)) {
|
||||||
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
|
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
|
||||||
@@ -390,21 +390,21 @@
|
|||||||
}
|
}
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// With lastRow = nojustify, justify if is justificable (the images will not become too big)
|
// 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') {
|
if (isLastRow && !justifiable && this.settings.lastRow !== 'justify' && this.settings.lastRow !== 'hide') {
|
||||||
justify = false;
|
justify = false;
|
||||||
|
|
||||||
if (this.rows > 0) {
|
if (this.rows > 0) {
|
||||||
defaultRowHeight = (this.offY - this.border - this.settings.margins * this.rows) / this.rows;
|
defaultRowHeight = (this.offY - this.border - this.settings.margins * this.rows) / this.rows;
|
||||||
justify = defaultRowHeight * this.buildingRow.aspectRatio / availableWidth > this.settings.justifyThreshold;
|
justify = defaultRowHeight * this.buildingRow.aspectRatio / availableWidth > this.settings.justifyThreshold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
|
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
|
||||||
$entry = this.buildingRow.entriesBuff[i];
|
$entry = this.buildingRow.entriesBuff[i];
|
||||||
imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
|
imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
|
||||||
|
|
||||||
if (justify) {
|
if (justify) {
|
||||||
newImgW = (i === this.buildingRow.entriesBuff.length - 1) ? availableWidth : rowHeight * imgAspectRatio;
|
newImgW = (i === this.buildingRow.entriesBuff.length - 1) ? availableWidth : rowHeight * imgAspectRatio;
|
||||||
newImgH = rowHeight;
|
newImgH = rowHeight;
|
||||||
@@ -412,17 +412,17 @@
|
|||||||
newImgW = defaultRowHeight * imgAspectRatio;
|
newImgW = defaultRowHeight * imgAspectRatio;
|
||||||
newImgH = defaultRowHeight;
|
newImgH = defaultRowHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
availableWidth -= Math.round(newImgW);
|
availableWidth -= Math.round(newImgW);
|
||||||
$entry.data('jg.jwidth', Math.round(newImgW));
|
$entry.data('jg.jwidth', Math.round(newImgW));
|
||||||
$entry.data('jg.jheight', Math.ceil(newImgH));
|
$entry.data('jg.jheight', Math.ceil(newImgH));
|
||||||
if (i === 0 || minHeight > newImgH) minHeight = newImgH;
|
if (i === 0 || minHeight > newImgH) minHeight = newImgH;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.buildingRow.height = minHeight;
|
this.buildingRow.height = minHeight;
|
||||||
return justify;
|
return justify;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Flush a row: justify it, modify the gallery height accordingly to the row height
|
* Flush a row: justify it, modify the gallery height accordingly to the row height
|
||||||
*
|
*
|
||||||
@@ -432,43 +432,43 @@
|
|||||||
JustifiedGallery.prototype.flushRow = function (isLastRow, hiddenRow) {
|
JustifiedGallery.prototype.flushRow = function (isLastRow, hiddenRow) {
|
||||||
var settings = this.settings;
|
var settings = this.settings;
|
||||||
var $entry, buildingRowRes, offX = this.border, i;
|
var $entry, buildingRowRes, offX = this.border, i;
|
||||||
|
|
||||||
buildingRowRes = this.prepareBuildingRow(isLastRow, hiddenRow);
|
buildingRowRes = this.prepareBuildingRow(isLastRow, hiddenRow);
|
||||||
if (hiddenRow || (isLastRow && settings.lastRow === 'hide' && buildingRowRes === -1)) {
|
if (hiddenRow || (isLastRow && settings.lastRow === 'hide' && buildingRowRes === -1)) {
|
||||||
this.clearBuildingRow();
|
this.clearBuildingRow();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.maxRowHeight) {
|
if (this.maxRowHeight) {
|
||||||
if (this.maxRowHeight < this.buildingRow.height) this.buildingRow.height = this.maxRowHeight;
|
if (this.maxRowHeight < this.buildingRow.height) this.buildingRow.height = this.maxRowHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
//Align last (unjustified) row
|
//Align last (unjustified) row
|
||||||
if (isLastRow && (settings.lastRow === 'center' || settings.lastRow === 'right')) {
|
if (isLastRow && (settings.lastRow === 'center' || settings.lastRow === 'right')) {
|
||||||
var availableWidth = this.galleryWidth - 2 * this.border - (this.buildingRow.entriesBuff.length - 1) * settings.margins;
|
var availableWidth = this.galleryWidth - 2 * this.border - (this.buildingRow.entriesBuff.length - 1) * settings.margins;
|
||||||
|
|
||||||
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
|
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
|
||||||
$entry = this.buildingRow.entriesBuff[i];
|
$entry = this.buildingRow.entriesBuff[i];
|
||||||
availableWidth -= $entry.data('jg.jwidth');
|
availableWidth -= $entry.data('jg.jwidth');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (settings.lastRow === 'center')
|
if (settings.lastRow === 'center')
|
||||||
offX += Math.round(availableWidth / 2);
|
offX += Math.round(availableWidth / 2);
|
||||||
else if (settings.lastRow === 'right')
|
else if (settings.lastRow === 'right')
|
||||||
offX += availableWidth;
|
offX += availableWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
var lastEntryIdx = this.buildingRow.entriesBuff.length - 1;
|
var lastEntryIdx = this.buildingRow.entriesBuff.length - 1;
|
||||||
for (i = 0; i <= lastEntryIdx; i++) {
|
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);
|
this.displayEntry($entry, offX, this.offY, $entry.data('jg.jwidth'), $entry.data('jg.jheight'), this.buildingRow.height);
|
||||||
offX += $entry.data('jg.jwidth') + settings.margins;
|
offX += $entry.data('jg.jwidth') + settings.margins;
|
||||||
}
|
}
|
||||||
|
|
||||||
//Gallery Height
|
//Gallery Height
|
||||||
this.galleryHeightToSet = this.offY + this.buildingRow.height + this.border;
|
this.galleryHeightToSet = this.offY + this.buildingRow.height + this.border;
|
||||||
this.setGalleryTempHeight(this.galleryHeightToSet + this.getSpinnerHeight());
|
this.setGalleryTempHeight(this.galleryHeightToSet + this.getSpinnerHeight());
|
||||||
|
|
||||||
if (!isLastRow || (this.buildingRow.height <= settings.rowHeight && buildingRowRes)) {
|
if (!isLastRow || (this.buildingRow.height <= settings.rowHeight && buildingRowRes)) {
|
||||||
//Ready for a new row
|
//Ready for a new row
|
||||||
this.offY += this.buildingRow.height + settings.margins;
|
this.offY += this.buildingRow.height + settings.margins;
|
||||||
@@ -477,63 +477,63 @@
|
|||||||
this.settings.triggerEvent.call(this, 'jg.rowflush');
|
this.settings.triggerEvent.call(this, 'jg.rowflush');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// Scroll position not restoring: https://github.com/miromannino/Justified-Gallery/issues/221
|
// Scroll position not restoring: https://github.com/miromannino/Justified-Gallery/issues/221
|
||||||
var galleryPrevStaticHeight = 0;
|
var galleryPrevStaticHeight = 0;
|
||||||
|
|
||||||
JustifiedGallery.prototype.rememberGalleryHeight = function () {
|
JustifiedGallery.prototype.rememberGalleryHeight = function () {
|
||||||
galleryPrevStaticHeight = this.$gallery.height();
|
galleryPrevStaticHeight = this.$gallery.height();
|
||||||
this.$gallery.height(galleryPrevStaticHeight);
|
this.$gallery.height(galleryPrevStaticHeight);
|
||||||
};
|
};
|
||||||
|
|
||||||
// grow only
|
// grow only
|
||||||
JustifiedGallery.prototype.setGalleryTempHeight = function (height) {
|
JustifiedGallery.prototype.setGalleryTempHeight = function (height) {
|
||||||
galleryPrevStaticHeight = Math.max(height, galleryPrevStaticHeight);
|
galleryPrevStaticHeight = Math.max(height, galleryPrevStaticHeight);
|
||||||
this.$gallery.height(galleryPrevStaticHeight);
|
this.$gallery.height(galleryPrevStaticHeight);
|
||||||
};
|
};
|
||||||
|
|
||||||
JustifiedGallery.prototype.setGalleryFinalHeight = function (height) {
|
JustifiedGallery.prototype.setGalleryFinalHeight = function (height) {
|
||||||
galleryPrevStaticHeight = height;
|
galleryPrevStaticHeight = height;
|
||||||
this.$gallery.height(height);
|
this.$gallery.height(height);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks the width of the gallery container, to know if a new justification is needed
|
* Checks the width of the gallery container, to know if a new justification is needed
|
||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.checkWidth = function () {
|
JustifiedGallery.prototype.checkWidth = function () {
|
||||||
this.checkWidthIntervalId = setInterval($.proxy(function () {
|
this.checkWidthIntervalId = setInterval($.proxy(function () {
|
||||||
|
|
||||||
// if the gallery is not currently visible, abort.
|
// if the gallery is not currently visible, abort.
|
||||||
if (!this.$gallery.is(":visible")) return;
|
if (!this.$gallery.is(":visible")) return;
|
||||||
|
|
||||||
var galleryWidth = parseFloat(this.$gallery.width());
|
var galleryWidth = parseFloat(this.$gallery.width());
|
||||||
if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
|
if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
|
||||||
this.galleryWidth = galleryWidth;
|
this.galleryWidth = galleryWidth;
|
||||||
this.rewind();
|
this.rewind();
|
||||||
|
|
||||||
this.rememberGalleryHeight();
|
this.rememberGalleryHeight();
|
||||||
|
|
||||||
// Restart to analyze
|
// Restart to analyze
|
||||||
this.startImgAnalyzer(true);
|
this.startImgAnalyzer(true);
|
||||||
}
|
}
|
||||||
}, this), this.settings.refreshTime);
|
}, this), this.settings.refreshTime);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @returns {boolean} a boolean saying if the spinner is active or not
|
* @returns {boolean} a boolean saying if the spinner is active or not
|
||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.isSpinnerActive = function () {
|
JustifiedGallery.prototype.isSpinnerActive = function () {
|
||||||
return this.spinner.intervalId !== null;
|
return this.spinner.intervalId !== null;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @returns {int} the spinner height
|
* @returns {int} the spinner height
|
||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.getSpinnerHeight = function () {
|
JustifiedGallery.prototype.getSpinnerHeight = function () {
|
||||||
return this.spinner.$el.innerHeight();
|
return this.spinner.$el.innerHeight();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stops the spinner animation and modify the gallery height to exclude the spinner
|
* Stops the spinner animation and modify the gallery height to exclude the spinner
|
||||||
*/
|
*/
|
||||||
@@ -543,7 +543,7 @@
|
|||||||
this.setGalleryTempHeight(this.$gallery.height() - this.getSpinnerHeight());
|
this.setGalleryTempHeight(this.$gallery.height() - this.getSpinnerHeight());
|
||||||
this.spinner.$el.detach();
|
this.spinner.$el.detach();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Starts the spinner animation
|
* Starts the spinner animation
|
||||||
*/
|
*/
|
||||||
@@ -562,7 +562,7 @@
|
|||||||
spinnerContext.phase = (spinnerContext.phase + 1) % ($spinnerPoints.length * 2);
|
spinnerContext.phase = (spinnerContext.phase + 1) % ($spinnerPoints.length * 2);
|
||||||
}, spinnerContext.timeSlot);
|
}, spinnerContext.timeSlot);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Rewind the image analysis to start from the first entry.
|
* Rewind the image analysis to start from the first entry.
|
||||||
*/
|
*/
|
||||||
@@ -573,14 +573,14 @@
|
|||||||
this.rows = 0;
|
this.rows = 0;
|
||||||
this.clearBuildingRow();
|
this.clearBuildingRow();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @returns {String} `settings.selector` rejecting spinner element
|
* @returns {String} `settings.selector` rejecting spinner element
|
||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.getSelectorWithoutSpinner = function () {
|
JustifiedGallery.prototype.getSelectorWithoutSpinner = function () {
|
||||||
return this.settings.selector + ', div:not(.jg-spinner)';
|
return this.settings.selector + ', div:not(.jg-spinner)';
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @returns {Array} all entries matched by `settings.selector`
|
* @returns {Array} all entries matched by `settings.selector`
|
||||||
*/
|
*/
|
||||||
@@ -588,7 +588,7 @@
|
|||||||
var selector = this.getSelectorWithoutSpinner();
|
var selector = this.getSelectorWithoutSpinner();
|
||||||
return this.$gallery.children(selector).toArray();
|
return this.$gallery.children(selector).toArray();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update the entries searching it from the justified gallery HTML element
|
* Update the entries searching it from the justified gallery HTML element
|
||||||
*
|
*
|
||||||
@@ -597,7 +597,7 @@
|
|||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.updateEntries = function (norewind) {
|
JustifiedGallery.prototype.updateEntries = function (norewind) {
|
||||||
var newEntries;
|
var newEntries;
|
||||||
|
|
||||||
if (norewind && this.lastFetchedEntry != null) {
|
if (norewind && this.lastFetchedEntry != null) {
|
||||||
var selector = this.getSelectorWithoutSpinner();
|
var selector = this.getSelectorWithoutSpinner();
|
||||||
newEntries = $(this.lastFetchedEntry).nextAll(selector).toArray();
|
newEntries = $(this.lastFetchedEntry).nextAll(selector).toArray();
|
||||||
@@ -605,9 +605,9 @@
|
|||||||
this.entries = [];
|
this.entries = [];
|
||||||
newEntries = this.getAllEntries();
|
newEntries = this.getAllEntries();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (newEntries.length > 0) {
|
if (newEntries.length > 0) {
|
||||||
|
|
||||||
// Sort or randomize
|
// Sort or randomize
|
||||||
if ($.isFunction(this.settings.sort)) {
|
if ($.isFunction(this.settings.sort)) {
|
||||||
newEntries = this.sortArray(newEntries);
|
newEntries = this.sortArray(newEntries);
|
||||||
@@ -615,20 +615,20 @@
|
|||||||
newEntries = this.shuffleArray(newEntries);
|
newEntries = this.shuffleArray(newEntries);
|
||||||
}
|
}
|
||||||
this.lastFetchedEntry = newEntries[newEntries.length - 1];
|
this.lastFetchedEntry = newEntries[newEntries.length - 1];
|
||||||
|
|
||||||
// Filter
|
// Filter
|
||||||
if (this.settings.filter) {
|
if (this.settings.filter) {
|
||||||
newEntries = this.filterArray(newEntries);
|
newEntries = this.filterArray(newEntries);
|
||||||
} else {
|
} else {
|
||||||
this.resetFilters(newEntries);
|
this.resetFilters(newEntries);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.entries = this.entries.concat(newEntries);
|
this.entries = this.entries.concat(newEntries);
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Apply the entries order to the DOM, iterating the entries and appending the images
|
* Apply the entries order to the DOM, iterating the entries and appending the images
|
||||||
*
|
*
|
||||||
@@ -640,7 +640,7 @@
|
|||||||
$(this).appendTo(that.$gallery);
|
$(this).appendTo(that.$gallery);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shuffle the array using the Fisher-Yates shuffle algorithm
|
* Shuffle the array using the Fisher-Yates shuffle algorithm
|
||||||
*
|
*
|
||||||
@@ -658,7 +658,7 @@
|
|||||||
this.insertToGallery(a);
|
this.insertToGallery(a);
|
||||||
return a;
|
return a;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sort the array using settings.comparator as comparator
|
* Sort the array using settings.comparator as comparator
|
||||||
*
|
*
|
||||||
@@ -670,7 +670,7 @@
|
|||||||
this.insertToGallery(a);
|
this.insertToGallery(a);
|
||||||
return a;
|
return a;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reset the filters removing the 'jg-filtered' class from all the entries
|
* Reset the filters removing the 'jg-filtered' class from all the entries
|
||||||
*
|
*
|
||||||
@@ -679,7 +679,7 @@
|
|||||||
JustifiedGallery.prototype.resetFilters = function (a) {
|
JustifiedGallery.prototype.resetFilters = function (a) {
|
||||||
for (var i = 0; i < a.length; i++) $(a[i]).removeClass('jg-filtered');
|
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.
|
* Filter the entries considering theirs classes (if a string has been passed) or using a function for filtering.
|
||||||
*
|
*
|
||||||
@@ -713,7 +713,7 @@
|
|||||||
return filteredArr;
|
return filteredArr;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Revert the image src to the default value.
|
* Revert the image src to the default value.
|
||||||
*/
|
*/
|
||||||
@@ -724,7 +724,7 @@
|
|||||||
$img.attr('src', '');
|
$img.attr('src', '');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Destroy the Justified Gallery instance.
|
* Destroy the Justified Gallery instance.
|
||||||
*
|
*
|
||||||
@@ -737,11 +737,11 @@
|
|||||||
JustifiedGallery.prototype.destroy = function () {
|
JustifiedGallery.prototype.destroy = function () {
|
||||||
clearInterval(this.checkWidthIntervalId);
|
clearInterval(this.checkWidthIntervalId);
|
||||||
this.stopImgAnalyzerStarter();
|
this.stopImgAnalyzerStarter();
|
||||||
|
|
||||||
// Get fresh entries list since filtered entries are absent in `this.entries`
|
// 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);
|
var $entry = $(entry);
|
||||||
|
|
||||||
// Reset entry style
|
// Reset entry style
|
||||||
$entry.css('width', '');
|
$entry.css('width', '');
|
||||||
$entry.css('height', '');
|
$entry.css('height', '');
|
||||||
@@ -749,7 +749,7 @@
|
|||||||
$entry.css('left', '');
|
$entry.css('left', '');
|
||||||
$entry.data('jg.loaded', undefined);
|
$entry.data('jg.loaded', undefined);
|
||||||
$entry.removeClass('jg-entry jg-filtered jg-entry-visible');
|
$entry.removeClass('jg-entry jg-filtered jg-entry-visible');
|
||||||
|
|
||||||
// Reset image style
|
// Reset image style
|
||||||
var $img = this.imgFromEntry($entry);
|
var $img = this.imgFromEntry($entry);
|
||||||
if ($img) {
|
if ($img) {
|
||||||
@@ -762,7 +762,7 @@
|
|||||||
$img.data('jg.originalSrcLoc', undefined);
|
$img.data('jg.originalSrcLoc', undefined);
|
||||||
$img.data('jg.src', undefined);
|
$img.data('jg.src', undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove caption
|
// Remove caption
|
||||||
this.removeCaptionEventsHandlers($entry);
|
this.removeCaptionEventsHandlers($entry);
|
||||||
var $caption = this.captionFromEntry($entry);
|
var $caption = this.captionFromEntry($entry);
|
||||||
@@ -773,15 +773,15 @@
|
|||||||
} else {
|
} else {
|
||||||
if ($caption !== null) $caption.fadeTo(0, 1);
|
if ($caption !== null) $caption.fadeTo(0, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
}, this));
|
}, this));
|
||||||
|
|
||||||
this.$gallery.css('height', '');
|
this.$gallery.css('height', '');
|
||||||
this.$gallery.removeClass('justified-gallery');
|
this.$gallery.removeClass('justified-gallery');
|
||||||
this.$gallery.data('jg.controller', undefined);
|
this.$gallery.data('jg.controller', undefined);
|
||||||
this.settings.triggerEvent.call(this, 'jg.destroy');
|
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.
|
* Analyze the images and builds the rows. It returns if it found an image that is not loaded.
|
||||||
*
|
*
|
||||||
@@ -794,15 +794,15 @@
|
|||||||
var availableWidth = this.galleryWidth - 2 * this.border - (
|
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');
|
var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
|
||||||
|
|
||||||
this.buildingRow.entriesBuff.push($entry);
|
this.buildingRow.entriesBuff.push($entry);
|
||||||
this.buildingRow.aspectRatio += imgAspectRatio;
|
this.buildingRow.aspectRatio += imgAspectRatio;
|
||||||
this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
|
this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
|
||||||
this.lastAnalyzedIndex = i;
|
this.lastAnalyzedIndex = i;
|
||||||
|
|
||||||
if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
|
if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
|
||||||
this.flushRow(false, this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount);
|
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);
|
this.startImgAnalyzer(isForResize);
|
||||||
return;
|
return;
|
||||||
@@ -812,28 +812,28 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Last row flush (the row is not full)
|
// Last row flush (the row is not full)
|
||||||
if (this.buildingRow.entriesBuff.length > 0) {
|
if (this.buildingRow.entriesBuff.length > 0) {
|
||||||
this.flushRow(true, this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount);
|
this.flushRow(true, this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isSpinnerActive()) {
|
if (this.isSpinnerActive()) {
|
||||||
this.stopLoadingSpinnerAnimation();
|
this.stopLoadingSpinnerAnimation();
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stop, if there is, the timeout to start the analyzeImages.
|
/* 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,
|
This is because an image can be set loaded, and the timeout can be set,
|
||||||
but this image can be analyzed yet.
|
but this image can be analyzed yet.
|
||||||
*/
|
*/
|
||||||
this.stopImgAnalyzerStarter();
|
this.stopImgAnalyzerStarter();
|
||||||
|
|
||||||
this.setGalleryFinalHeight(this.galleryHeightToSet);
|
this.setGalleryFinalHeight(this.galleryHeightToSet);
|
||||||
|
|
||||||
//On complete callback
|
//On complete callback
|
||||||
this.settings.triggerEvent.call(this, isForResize ? 'jg.resize' : 'jg.complete');
|
this.settings.triggerEvent.call(this, isForResize ? 'jg.resize' : 'jg.complete');
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stops any ImgAnalyzer starter (that has an assigned timeout)
|
* Stops any ImgAnalyzer starter (that has an assigned timeout)
|
||||||
*/
|
*/
|
||||||
@@ -844,7 +844,7 @@
|
|||||||
this.imgAnalyzerTimeout = null;
|
this.imgAnalyzerTimeout = null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Starts the image analyzer. It is not immediately called to let the browser to update the view
|
* Starts the image analyzer. It is not immediately called to let the browser to update the view
|
||||||
*
|
*
|
||||||
@@ -857,7 +857,7 @@
|
|||||||
that.analyzeImages(isForResize);
|
that.analyzeImages(isForResize);
|
||||||
}, 0.001); // we can't start it immediately due to a IE different behaviour
|
}, 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,
|
* 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.
|
* because some browsers, with a 404 set complete = true.
|
||||||
@@ -868,7 +868,7 @@
|
|||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.onImageEvent = function (imageSrc, onLoad, onError) {
|
JustifiedGallery.prototype.onImageEvent = function (imageSrc, onLoad, onError) {
|
||||||
if (!onLoad && !onError) return;
|
if (!onLoad && !onError) return;
|
||||||
|
|
||||||
var memImage = new Image();
|
var memImage = new Image();
|
||||||
var $memImage = $(memImage);
|
var $memImage = $(memImage);
|
||||||
if (onLoad) {
|
if (onLoad) {
|
||||||
@@ -885,7 +885,7 @@
|
|||||||
}
|
}
|
||||||
memImage.src = imageSrc;
|
memImage.src = imageSrc;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Init of Justified Gallery controlled
|
* Init of Justified Gallery controlled
|
||||||
* It analyzes all the entries starting theirs loading and calling the image analyzer (that works with loaded images)
|
* It analyzes all the entries starting theirs loading and calling the image analyzer (that works with loaded images)
|
||||||
@@ -895,23 +895,23 @@
|
|||||||
$.each(this.entries, function (index, entry) {
|
$.each(this.entries, function (index, entry) {
|
||||||
var $entry = $(entry);
|
var $entry = $(entry);
|
||||||
var $image = that.imgFromEntry($entry);
|
var $image = that.imgFromEntry($entry);
|
||||||
|
|
||||||
$entry.addClass('jg-entry');
|
$entry.addClass('jg-entry');
|
||||||
|
|
||||||
if ($entry.data('jg.loaded') !== true && $entry.data('jg.loaded') !== 'skipped') {
|
if ($entry.data('jg.loaded') !== true && $entry.data('jg.loaded') !== 'skipped') {
|
||||||
|
|
||||||
// Link Rel global overwrite
|
// Link Rel global overwrite
|
||||||
if (that.settings.rel !== null) $entry.attr('rel', that.settings.rel);
|
if (that.settings.rel !== null) $entry.attr('rel', that.settings.rel);
|
||||||
|
|
||||||
// Link Target global overwrite
|
// Link Target global overwrite
|
||||||
if (that.settings.target !== null) $entry.attr('target', that.settings.target);
|
if (that.settings.target !== null) $entry.attr('target', that.settings.target);
|
||||||
|
|
||||||
if ($image !== null) {
|
if ($image !== null) {
|
||||||
|
|
||||||
// Image src
|
// Image src
|
||||||
var imageSrc = that.extractImgSrcFromImage($image);
|
var imageSrc = that.extractImgSrcFromImage($image);
|
||||||
|
|
||||||
/* If we have the height and the width, we don't wait that the image is loaded,
|
/* If we have the height and the width, we don't wait that the image is loaded,
|
||||||
but we start directly with the justification */
|
but we start directly with the justification */
|
||||||
if (that.settings.waitThumbnailsLoad === false || !imageSrc) {
|
if (that.settings.waitThumbnailsLoad === false || !imageSrc) {
|
||||||
var width = parseFloat($image.attr('width'));
|
var width = parseFloat($image.attr('width'));
|
||||||
@@ -929,13 +929,13 @@
|
|||||||
return true; // continue
|
return true; // continue
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$entry.data('jg.loaded', false);
|
$entry.data('jg.loaded', false);
|
||||||
imagesToLoad = true;
|
imagesToLoad = true;
|
||||||
|
|
||||||
// Spinner start
|
// Spinner start
|
||||||
if (!that.isSpinnerActive()) that.startLoadingSpinnerAnimation();
|
if (!that.isSpinnerActive()) that.startLoadingSpinnerAnimation();
|
||||||
|
|
||||||
that.onImageEvent(imageSrc, function (loadImg) { // image loaded
|
that.onImageEvent(imageSrc, function (loadImg) { // image loaded
|
||||||
$entry.data('jg.width', loadImg.width);
|
$entry.data('jg.width', loadImg.width);
|
||||||
$entry.data('jg.height', loadImg.height);
|
$entry.data('jg.height', loadImg.height);
|
||||||
@@ -945,21 +945,21 @@
|
|||||||
$entry.data('jg.loaded', 'error');
|
$entry.data('jg.loaded', 'error');
|
||||||
that.startImgAnalyzer(false);
|
that.startImgAnalyzer(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$entry.data('jg.loaded', true);
|
$entry.data('jg.loaded', true);
|
||||||
$entry.data('jg.width', $entry.width() | parseFloat($entry.css('width')) | 1);
|
$entry.data('jg.width', $entry.width() | parseFloat($entry.css('width')) | 1);
|
||||||
$entry.data('jg.height', $entry.height() | parseFloat($entry.css('height')) | 1);
|
$entry.data('jg.height', $entry.height() | parseFloat($entry.css('height')) | 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!imagesToLoad && !skippedImages) this.startImgAnalyzer(false);
|
if (!imagesToLoad && !skippedImages) this.startImgAnalyzer(false);
|
||||||
this.checkWidth();
|
this.checkWidth();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks that it is a valid number. If a string is passed it is converted to a number
|
* Checks that it is a valid number. If a string is passed it is converted to a number
|
||||||
*
|
*
|
||||||
@@ -970,14 +970,14 @@
|
|||||||
if ($.type(settingContainer[settingName]) === 'string') {
|
if ($.type(settingContainer[settingName]) === 'string') {
|
||||||
settingContainer[settingName] = parseFloat(settingContainer[settingName]);
|
settingContainer[settingName] = parseFloat(settingContainer[settingName]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($.type(settingContainer[settingName]) === 'number') {
|
if ($.type(settingContainer[settingName]) === 'number') {
|
||||||
if (isNaN(settingContainer[settingName])) throw 'invalid number for ' + settingName;
|
if (isNaN(settingContainer[settingName])) throw 'invalid number for ' + settingName;
|
||||||
} else {
|
} else {
|
||||||
throw settingName + ' must be a number';
|
throw settingName + ' must be a number';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks the sizeRangeSuffixes and, if necessary, converts
|
* Checks the sizeRangeSuffixes and, if necessary, converts
|
||||||
* its keys from string (e.g. old settings with 'lt100') to int.
|
* its keys from string (e.g. old settings with 'lt100') to int.
|
||||||
@@ -986,12 +986,12 @@
|
|||||||
if ($.type(this.settings.sizeRangeSuffixes) !== 'object') {
|
if ($.type(this.settings.sizeRangeSuffixes) !== 'object') {
|
||||||
throw 'sizeRangeSuffixes must be defined and must be an object';
|
throw 'sizeRangeSuffixes must be defined and must be an object';
|
||||||
}
|
}
|
||||||
|
|
||||||
var suffixRanges = [];
|
var suffixRanges = [];
|
||||||
for (var rangeIdx in this.settings.sizeRangeSuffixes) {
|
for (var rangeIdx in this.settings.sizeRangeSuffixes) {
|
||||||
if (this.settings.sizeRangeSuffixes.hasOwnProperty(rangeIdx)) suffixRanges.push(rangeIdx);
|
if (this.settings.sizeRangeSuffixes.hasOwnProperty(rangeIdx)) suffixRanges.push(rangeIdx);
|
||||||
}
|
}
|
||||||
|
|
||||||
var newSizeRngSuffixes = { 0: '' };
|
var newSizeRngSuffixes = { 0: '' };
|
||||||
for (var i = 0; i < suffixRanges.length; i++) {
|
for (var i = 0; i < suffixRanges.length; i++) {
|
||||||
if ($.type(suffixRanges[i]) === 'string') {
|
if ($.type(suffixRanges[i]) === 'string') {
|
||||||
@@ -1005,10 +1005,10 @@
|
|||||||
newSizeRngSuffixes[suffixRanges[i]] = this.settings.sizeRangeSuffixes[suffixRanges[i]];
|
newSizeRngSuffixes[suffixRanges[i]] = this.settings.sizeRangeSuffixes[suffixRanges[i]];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.settings.sizeRangeSuffixes = newSizeRngSuffixes;
|
this.settings.sizeRangeSuffixes = newSizeRngSuffixes;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check and convert the maxRowHeight setting
|
* check and convert the maxRowHeight setting
|
||||||
* requires rowHeight to be already set
|
* requires rowHeight to be already set
|
||||||
@@ -1018,7 +1018,7 @@
|
|||||||
JustifiedGallery.prototype.retrieveMaxRowHeight = function () {
|
JustifiedGallery.prototype.retrieveMaxRowHeight = function () {
|
||||||
var newMaxRowHeight = null;
|
var newMaxRowHeight = null;
|
||||||
var rowHeight = this.settings.rowHeight;
|
var rowHeight = this.settings.rowHeight;
|
||||||
|
|
||||||
if ($.type(this.settings.maxRowHeight) === 'string') {
|
if ($.type(this.settings.maxRowHeight) === 'string') {
|
||||||
if (this.settings.maxRowHeight.match(/^[0-9]+%$/)) {
|
if (this.settings.maxRowHeight.match(/^[0-9]+%$/)) {
|
||||||
newMaxRowHeight = rowHeight * parseFloat(this.settings.maxRowHeight.match(/^([0-9]+)%$/)[1]) / 100;
|
newMaxRowHeight = rowHeight * parseFloat(this.settings.maxRowHeight.match(/^([0-9]+)%$/)[1]) / 100;
|
||||||
@@ -1032,27 +1032,27 @@
|
|||||||
} else {
|
} else {
|
||||||
throw 'maxRowHeight must be a number or a percentage';
|
throw 'maxRowHeight must be a number or a percentage';
|
||||||
}
|
}
|
||||||
|
|
||||||
// check if the converted value is not a number
|
// check if the converted value is not a number
|
||||||
if (isNaN(newMaxRowHeight)) throw 'invalid number for maxRowHeight';
|
if (isNaN(newMaxRowHeight)) throw 'invalid number for maxRowHeight';
|
||||||
|
|
||||||
// check values, maxRowHeight must be >= rowHeight
|
// check values, maxRowHeight must be >= rowHeight
|
||||||
if (newMaxRowHeight < rowHeight) newMaxRowHeight = rowHeight;
|
if (newMaxRowHeight < rowHeight) newMaxRowHeight = rowHeight;
|
||||||
|
|
||||||
return newMaxRowHeight;
|
return newMaxRowHeight;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks the settings
|
* Checks the settings
|
||||||
*/
|
*/
|
||||||
JustifiedGallery.prototype.checkSettings = function () {
|
JustifiedGallery.prototype.checkSettings = function () {
|
||||||
this.checkSizeRangesSuffixes();
|
this.checkSizeRangesSuffixes();
|
||||||
|
|
||||||
this.checkOrConvertNumber(this.settings, 'rowHeight');
|
this.checkOrConvertNumber(this.settings, 'rowHeight');
|
||||||
this.checkOrConvertNumber(this.settings, 'margins');
|
this.checkOrConvertNumber(this.settings, 'margins');
|
||||||
this.checkOrConvertNumber(this.settings, 'border');
|
this.checkOrConvertNumber(this.settings, 'border');
|
||||||
this.checkOrConvertNumber(this.settings, 'maxRowsCount');
|
this.checkOrConvertNumber(this.settings, 'maxRowsCount');
|
||||||
|
|
||||||
var lastRowModes = [
|
var lastRowModes = [
|
||||||
'justify',
|
'justify',
|
||||||
'nojustify',
|
'nojustify',
|
||||||
@@ -1064,7 +1064,7 @@
|
|||||||
if (lastRowModes.indexOf(this.settings.lastRow) === -1) {
|
if (lastRowModes.indexOf(this.settings.lastRow) === -1) {
|
||||||
throw 'lastRow must be one of: ' + lastRowModes.join(', ');
|
throw 'lastRow must be one of: ' + lastRowModes.join(', ');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.checkOrConvertNumber(this.settings, 'justifyThreshold');
|
this.checkOrConvertNumber(this.settings, 'justifyThreshold');
|
||||||
if (this.settings.justifyThreshold < 0 || this.settings.justifyThreshold > 1) {
|
if (this.settings.justifyThreshold < 0 || this.settings.justifyThreshold > 1) {
|
||||||
throw 'justifyThreshold must be in the interval [0,1]';
|
throw 'justifyThreshold must be in the interval [0,1]';
|
||||||
@@ -1072,38 +1072,38 @@
|
|||||||
if ($.type(this.settings.cssAnimation) !== 'boolean') {
|
if ($.type(this.settings.cssAnimation) !== 'boolean') {
|
||||||
throw 'cssAnimation must be a boolean';
|
throw 'cssAnimation must be a boolean';
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($.type(this.settings.captions) !== 'boolean') throw 'captions 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, 'animationDuration');
|
||||||
|
|
||||||
this.checkOrConvertNumber(this.settings.captionSettings, 'visibleOpacity');
|
this.checkOrConvertNumber(this.settings.captionSettings, 'visibleOpacity');
|
||||||
if (this.settings.captionSettings.visibleOpacity < 0 ||
|
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]';
|
throw 'captionSettings.visibleOpacity must be in the interval [0, 1]';
|
||||||
}
|
}
|
||||||
|
|
||||||
this.checkOrConvertNumber(this.settings.captionSettings, 'nonVisibleOpacity');
|
this.checkOrConvertNumber(this.settings.captionSettings, 'nonVisibleOpacity');
|
||||||
if (this.settings.captionSettings.nonVisibleOpacity < 0 ||
|
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]';
|
throw 'captionSettings.nonVisibleOpacity must be in the interval [0, 1]';
|
||||||
}
|
}
|
||||||
|
|
||||||
this.checkOrConvertNumber(this.settings, 'imagesAnimationDuration');
|
this.checkOrConvertNumber(this.settings, 'imagesAnimationDuration');
|
||||||
this.checkOrConvertNumber(this.settings, 'refreshTime');
|
this.checkOrConvertNumber(this.settings, 'refreshTime');
|
||||||
this.checkOrConvertNumber(this.settings, 'refreshSensitivity');
|
this.checkOrConvertNumber(this.settings, 'refreshSensitivity');
|
||||||
if ($.type(this.settings.randomize) !== 'boolean') throw 'randomize must be a boolean';
|
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 ($.type(this.settings.selector) !== 'string') throw 'selector must be a string';
|
||||||
|
|
||||||
if (this.settings.sort !== false && !$.isFunction(this.settings.sort)) {
|
if (this.settings.sort !== false && !$.isFunction(this.settings.sort)) {
|
||||||
throw 'sort must be false or a comparison function';
|
throw 'sort must be false or a comparison function';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.settings.filter !== false && !$.isFunction(this.settings.filter) &&
|
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';
|
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.
|
* It brings all the indexes from the sizeRangeSuffixes and it orders them. They are then sorted and returned.
|
||||||
* @returns {Array} sorted suffix ranges
|
* @returns {Array} sorted suffix ranges
|
||||||
@@ -1116,7 +1116,7 @@
|
|||||||
suffixRanges.sort(function (a, b) { return a > b ? 1 : a < b ? -1 : 0; });
|
suffixRanges.sort(function (a, b) { return a > b ? 1 : a < b ? -1 : 0; });
|
||||||
return suffixRanges;
|
return suffixRanges;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update the existing settings only changing some of them
|
* Update the existing settings only changing some of them
|
||||||
*
|
*
|
||||||
@@ -1126,14 +1126,14 @@
|
|||||||
// In this case Justified Gallery has been called again changing only some options
|
// In this case Justified Gallery has been called again changing only some options
|
||||||
this.settings = $.extend({}, this.settings, newSettings);
|
this.settings = $.extend({}, this.settings, newSettings);
|
||||||
this.checkSettings();
|
this.checkSettings();
|
||||||
|
|
||||||
// As reported in the settings: negative value = same as margins, 0 = disabled
|
// 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.border = this.settings.border >= 0 ? this.settings.border : this.settings.margins;
|
||||||
|
|
||||||
this.maxRowHeight = this.retrieveMaxRowHeight();
|
this.maxRowHeight = this.retrieveMaxRowHeight();
|
||||||
this.suffixRanges = this.retrieveSuffixRanges();
|
this.suffixRanges = this.retrieveSuffixRanges();
|
||||||
};
|
};
|
||||||
|
|
||||||
JustifiedGallery.prototype.defaults = {
|
JustifiedGallery.prototype.defaults = {
|
||||||
sizeRangeSuffixes: {}, /* e.g. Flickr configuration
|
sizeRangeSuffixes: {}, /* e.g. Flickr configuration
|
||||||
{
|
{
|
||||||
@@ -1155,9 +1155,9 @@
|
|||||||
maxRowsCount: 0, // maximum number of rows to be displayed (0 = disabled)
|
maxRowsCount: 0, // maximum number of rows to be displayed (0 = disabled)
|
||||||
margins: 1,
|
margins: 1,
|
||||||
border: -1, // negative value = same as margins, 0 = disabled, any other value to set the border
|
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'
|
lastRow: 'nojustify', // … which is the same as 'left', or can be 'justify', 'center', 'right' or 'hide'
|
||||||
|
|
||||||
justifyThreshold: 0.90, /* if row width / available space > 0.90 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) */
|
* (i.e. lastRow setting is not considered) */
|
||||||
waitThumbnailsLoad: true,
|
waitThumbnailsLoad: true,
|
||||||
@@ -1193,7 +1193,7 @@
|
|||||||
this.$gallery.trigger(event); // Consider that 'this' is this set to the JustifiedGallery object, so it can
|
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.
|
} // access to fields such as $gallery, useful to trigger events with jQuery.
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Justified Gallery plugin for jQuery
|
* Justified Gallery plugin for jQuery
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user