harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update justified gallery lib

Browse Source
This commit is contained in:
Mario Vavti 2019-05-10 14:55:37 +02:00
parent 67ca1b82cc
commit 0b6a5fad70
4 changed files with 122 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
library/justifiedGallery/jquery.justifiedGallery.js
View File

@ -1,7 +1,7 @@
/*!
* justifiedGallery - v3.7.0
* justifiedGallery - v4.0.0-alpha
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2018 Miro Mannino
* Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
(function (factory) {
@ -150,7 +150,7 @@
*/
JustifiedGallery.prototype.showImg = function ($entry, callback) {
if (this.settings.cssAnimation) {
$entry.addClass('entry-visible');
$entry.addClass('jg-entry-visible');
if (callback) callback();
} else {
$entry.stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
@ -166,8 +166,15 @@
* @returns {String} the extracted src
*/
JustifiedGallery.prototype.extractImgSrcFromImage = function ($image) {
var imageSrc = (typeof $image.data('safe-src') !== 'undefined') ? $image.data('safe-src') : $image.attr('src');
$image.data('jg.originalSrc', imageSrc);
var imageSrc = $image.data('safe-src');
var imageSrcLoc = 'date-safe-src';
if (typeof imageSrc === 'undefined') {
imageSrc = $image.attr('src');
imageSrcLoc = 'src';
}
$image.data('jg.originalSrc', imageSrc); // this is saved for the destroy method
$image.data('jg.src', imageSrc); // this will change overtime
$image.data('jg.originalSrcLoc', imageSrcLoc); // this is saved for the destroy method
return imageSrc;
};
@ -207,26 +214,29 @@
$image.css('margin-top', - imgHeight / 2);
// Image reloading for an high quality of thumbnails
var imageSrc = $image.attr('src');
var newImageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]);
var imageSrc = $image.data('jg.src');
if (imageSrc) {
imageSrc = 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.
});
$image.one('error', function () {
this.resetImgSrc($image); //revert to the original thumbnail
});
var loadNewImage = function () {
if (imageSrc !== newImageSrc) { //load the new image after the fadeIn
$image.attr('src', newImageSrc);
var loadNewImage = function () {
// if (imageSrc !== newImageSrc) {
$image.attr('src', imageSrc);
// }
};
if ($entry.data('jg.loaded') === 'skipped') {
this.onImageEvent(imageSrc, (function() {
this.showImg($entry, loadNewImage); //load the new image after the fadeIn
$entry.data('jg.loaded', true);
}).bind(this));
} else {
this.showImg($entry, loadNewImage); //load the new image after the fadeIn
}
};
if ($entry.data('jg.loaded') === 'skipped') {
this.onImageEvent(imageSrc, $.proxy(function() {
this.showImg($entry, loadNewImage);
$entry.data('jg.loaded', true);
}, this));
} else {
this.showImg($entry, loadNewImage);
}
} else {
@ -371,7 +381,7 @@
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
$entry = this.buildingRow.entriesBuff[i];
if (this.settings.cssAnimation)
$entry.removeClass('entry-visible');
$entry.removeClass('jg-entry-visible');
else {
$entry.stop().fadeTo(0, 0.1);
$entry.find('> img, > a > img').fadeTo(0, 0);
@ -486,13 +496,6 @@
this.$gallery.height(height);
};
/**
* @returns {boolean} a boolean saying if the scrollbar is active or not
*/
function hasScrollBar() {
return $("body").height() > $(window).height();
}
/**
* Checks the width of the gallery container, to know if a new justification is needed
*/
@ -503,19 +506,14 @@
if (!this.$gallery.is(":visible")) return;
var galleryWidth = parseFloat(this.$gallery.width());
if (hasScrollBar() === this.scrollBarOn) {
if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
this.galleryWidth = galleryWidth;
this.rewind();
this.rememberGalleryHeight();
// Restart to analyze
this.startImgAnalyzer(true);
}
} else {
this.scrollBarOn = hasScrollBar();
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);
};
@ -574,6 +572,13 @@
this.clearBuildingRow();
};
/**
* @returns {Array} all entries matched by `settings.selector`
*/
JustifiedGallery.prototype.getAllEntries = function () {
return this.$gallery.children(this.settings.selector).toArray();
};
/**
* Update the entries searching it from the justified gallery HTML element
*
@ -587,7 +592,7 @@
newEntries = $(this.lastFetchedEntry).nextAll(this.settings.selector).toArray();
} else {
this.entries = [];
newEntries = this.$gallery.children(this.settings.selector).toArray();
newEntries = this.getAllEntries();
}
if (newEntries.length > 0) {
@ -698,6 +703,17 @@
}
};
/**
* Revert the image src to the default value.
*/
JustifiedGallery.prototype.resetImgSrc = function ($img) {
if ($img.data('jg.originalSrcLoc') == 'src') {
$img.attr('src', $img.data('jg.originalSrc'));
} else {
$img.attr('src', '');
}
}
/**
* Destroy the Justified Gallery instance.
*
@ -709,8 +725,10 @@
*/
JustifiedGallery.prototype.destroy = function () {
clearInterval(this.checkWidthIntervalId);
this.stopImgAnalyzerStarter();
$.each(this.entries, $.proxy(function(_, entry) {
// Get fresh entries list since filtered entries are absent in `this.entries`
$.each(this.getAllEntries(), $.proxy(function(_, entry) {
var $entry = $(entry);
// Reset entry style
@ -719,16 +737,20 @@
$entry.css('top', '');
$entry.css('left', '');
$entry.data('jg.loaded', undefined);
$entry.removeClass('jg-entry');
$entry.removeClass('jg-entry jg-filtered jg-entry-visible');
// Reset image style
var $img = this.imgFromEntry($entry);
$img.css('width', '');
$img.css('height', '');
$img.css('margin-left', '');
$img.css('margin-top', '');
$img.attr('src', $img.data('jg.originalSrc'));
$img.data('jg.originalSrc', undefined);
if ($img) {
$img.css('width', '');
$img.css('height', '');
$img.css('margin-left', '');
$img.css('margin-top', '');
this.resetImgSrc($img);
$img.data('jg.originalSrc', undefined);
$img.data('jg.originalSrcLoc', undefined);
$img.data('jg.src', undefined);
}
// Remove caption
this.removeCaptionEventsHandlers($entry);
@ -746,6 +768,7 @@
this.$gallery.css('height', '');
this.$gallery.removeClass('justified-gallery');
this.$gallery.data('jg.controller', undefined);
this.settings.triggerEvent.call(this, 'jg.destroy');
};
/**
@ -760,6 +783,12 @@
var availableWidth = this.galleryWidth - 2 * this.border - (
(this.buildingRow.entriesBuff.length - 1) * this.settings.margins);
var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
this.buildingRow.entriesBuff.push($entry);
this.buildingRow.aspectRatio += imgAspectRatio;
this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
this.lastAnalyzedIndex = i;
if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
this.flushRow(false);
@ -768,12 +797,6 @@
return;
}
}
this.buildingRow.entriesBuff.push($entry);
this.buildingRow.aspectRatio += imgAspectRatio;
this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
this.lastAnalyzedIndex = i;
} else if ($entry.data('jg.loaded') !== 'error') {
return;
}
@ -873,13 +896,16 @@
// Image src
var imageSrc = that.extractImgSrcFromImage($image);
$image.attr('src', imageSrc);
/* If we have the height and the width, we don't wait that the image is loaded, but we start directly
* with the justification */
if (that.settings.waitThumbnailsLoad === false) {
var width = parseFloat($image.prop('width'));
var height = parseFloat($image.prop('height'));
/* If we have the height and the width, we don't wait that the image is loaded,
but we start directly with the justification */
if (that.settings.waitThumbnailsLoad === false || !imageSrc) {
var width = parseFloat($image.attr('width'));
var height = parseFloat($image.attr('height'));
if ($image.prop('tagName') === 'svg') {
width = parseFloat($image[0].getBBox().width);
height = parseFloat($image[0].getBBox().height);
}
if (!isNaN(width) && !isNaN(height)) {
$entry.data('jg.width', width);
$entry.data('jg.height', height);
@ -1146,11 +1172,12 @@
It follows the specifications of the Array.prototype.filter() function of JavaScript.
*/
selector: 'a, div:not(.spinner)', // The selector that is used to know what are the entries of the gallery
imgSelector: '> img, > a > img', // The selector that is used to know what are the images of each entry
imgSelector: '> img, > a > img, > svg, > a > svg', // The selector that is used to know what are the images of each entry
triggerEvent: function (event) { // This is called to trigger events, the default behavior is to call $.trigger
this.$gallery.trigger(event); // Consider that 'this' is this set to the JustifiedGallery object, so it can
} // access to fields such as $gallery, useful to trigger events with jQuery.
};
/**
* Justified Gallery plugin for jQuery

6
library/justifiedGallery/jquery.justifiedGallery.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
library/justifiedGallery/justifiedGallery.css
View File

@ -1,7 +1,7 @@
/*!
* justifiedGallery - v3.7.0
* justifiedGallery - v4.0.0-alpha
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2018 Miro Mannino
* Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery {
@ -26,7 +26,13 @@
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img {
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg {
position: absolute;
top: 50%;
left: 50%;
@ -63,13 +69,15 @@
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .entry-visible {
.justified-gallery > .jg-entry-visible {
filter: "alpha(opacity=100)";
opacity: 1;
background: none;
}
.justified-gallery > .entry-visible > img,
.justified-gallery > .entry-visible > a > img {
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg {
filter: "alpha(opacity=100)";
opacity: 1;
-webkit-transition: opacity 500ms ease-in;

20
library/justifiedGallery/justifiedGallery.min.css vendored
View File

@ -1,7 +1,7 @@
/*!
* justifiedGallery - v3.7.0
* justifiedGallery - v4.0.0-alpha
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2018 Miro Mannino
* Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery {
@ -26,7 +26,13 @@
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img {
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg {
position: absolute;
top: 50%;
left: 50%;
@ -63,13 +69,15 @@
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .entry-visible {
.justified-gallery > .jg-entry-visible {
filter: "alpha(opacity=100)";
opacity: 1;
background: none;
}
.justified-gallery > .entry-visible > img,
.justified-gallery > .entry-visible > a > img {
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg {
filter: "alpha(opacity=100)";
opacity: 1;
-webkit-transition: opacity 500ms ease-in;