Streams/streams
Streams/streams
1
0
Fork 0
mirror of https://codeberg.org/streams/streams.git synced 2024-09-20 01:15:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update jg to latest preview release and try once more to really justify the whole gallery

Browse source
This commit is contained in:
marijus 2014-09-20 15:40:40 +02:00
parent 1c56442818
commit 9feb619bea
5 changed files with 671 additions and 605 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

290
library/justifiedGallery/dist/js/jquery.justifiedGallery.js vendored
View file

@ -1,5 +1,5 @@
/*! /*
* Justified Gallery - v3.2.0 * Justified Gallery - v3.4.0
* http://miromannino.com/projects/justified-gallery/ * http://miromannino.com/projects/justified-gallery/
* Copyright (c) 2014 Miro Mannino * Copyright (c) 2014 Miro Mannino
* Licensed under the MIT license. * Licensed under the MIT license.
@ -30,9 +30,10 @@
justifyThreshold: 0.75, /* if row width / available space > 0.75 it will be always justified justifyThreshold: 0.75, /* if row width / available space > 0.75 it will be always justified
(i.e. lastRow setting is not considered) */ (i.e. lastRow setting is not considered) */
fixedHeight : false, fixedHeight : false,
waitThumbnailsLoad : true,
captions : true, captions : true,
cssAnimation: false, cssAnimation: false,
imagesAnimationDuration : 300, //ignored with css animations imagesAnimationDuration : 500, //ignored with css animations
captionSettings : { //ignored with css animations captionSettings : { //ignored with css animations
animationDuration : 500, animationDuration : 500,
visibleOpacity : 0.7, visibleOpacity : 0.7,
@ -40,8 +41,8 @@
}, },
rel : null, //rewrite the rel of each analyzed links rel : null, //rewrite the rel of each analyzed links
target : null, //rewrite the target of all links target : null, //rewrite the target of all links
extension : /\.[^.]+$/, extension : /\.[^.\\/]+$/,
refreshTime : 250, refreshTime : 100,
randomize : false randomize : false
}; };
@ -63,12 +64,48 @@
} }
} }
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
function removeSuffix(str, suffix) {
return str.substring(0, str.length - suffix.length);
}
function getUsedSuffix(str, context) {
var voidSuffix = false;
for (var si in context.settings.sizeRangeSuffixes) {
if (context.settings.sizeRangeSuffixes[si].length === 0) {
voidSuffix = true;
continue;
}
if (endsWith(str, context.settings.sizeRangeSuffixes[si])) {
return context.settings.sizeRangeSuffixes[si];
}
}
if (voidSuffix) return "";
else throw 'unknown suffix for ' + str;
}
/* 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. */
function newSrc(imageSrc, imgWidth, imgHeight, context) {
var matchRes = imageSrc.match(context.settings.extension);
var ext = (matchRes != null) ? matchRes[0] : '';
var newImageSrc = imageSrc.replace(context.settings.extension, '');
newImageSrc = removeSuffix(newImageSrc, getUsedSuffix(newImageSrc, context));
newImageSrc += getSuffix(imgWidth, imgHeight, context) + ext;
return newImageSrc;
}
function onEntryMouseEnterForCaption (ev) { function onEntryMouseEnterForCaption (ev) {
var $caption = $(ev.currentTarget).find('.caption'); var $caption = $(ev.currentTarget).find('.caption');
if (ev.data.settings.cssAnimation) { if (ev.data.settings.cssAnimation) {
$caption.addClass('caption-visible').removeClass('caption-hidden'); $caption.addClass('caption-visible').removeClass('caption-hidden');
} else { } else {
$caption.stop().fadeTo(ev.data.settings.captionSettings.animationDuration, ev.data.settings.captionSettings.visibleOpacity); $caption.stop().fadeTo(ev.data.settings.captionSettings.animationDuration,
ev.data.settings.captionSettings.visibleOpacity);
} }
} }
@ -77,7 +114,25 @@
if (ev.data.settings.cssAnimation) { if (ev.data.settings.cssAnimation) {
$caption.removeClass('caption-visible').removeClass('caption-hidden'); $caption.removeClass('caption-visible').removeClass('caption-hidden');
} else { } else {
$caption.stop().fadeTo(ev.data.settings.captionSettings.animationDuration, ev.data.settings.captionSettings.nonVisibleOpacity); $caption.stop().fadeTo(ev.data.settings.captionSettings.animationDuration,
ev.data.settings.captionSettings.nonVisibleOpacity);
}
}
function showImg($entry, callback, context) {
if (context.settings.cssAnimation) {
$entry.addClass('entry-visible');
callback();
} else {
$entry.stop().fadeTo(context.settings.imagesAnimationDuration, 1.0, callback);
}
}
function hideImgImmediately($entry, context) {
if (context.settings.cssAnimation) {
$entry.removeClass('entry-visible');
} else {
$entry.stop().fadeTo(0, 0);
} }
} }
@ -92,30 +147,30 @@
$entry.css('top', y); $entry.css('top', y);
$entry.css('left', x); $entry.css('left', x);
//DEBUG// console.log('displayEntry: $image.width() = ' + $image.width() + ' $image.height() = ' + $image.height()); //DEBUG// console.log('displayEntry (w: ' + $image.width() + ' h: ' + $image.height());
// Image reloading for an high quality of thumbnails // Image reloading for an high quality of thumbnails
var imageSrc = $image.attr('src'); var imageSrc = $image.attr('src');
var newImageSrc = imageSrc.replace(context.settings.extension, '').replace(context.usedSizeRangeRegExp, '') + var newImageSrc = newSrc(imageSrc, imgWidth, imgHeight, context);
getSuffix(imgWidth, imgHeight, context) +
imageSrc.match(context.settings.extension)[0];
$image.one('error', function () { $image.one('error', function () {
//DEBUG// console.log('revert the original image'); //DEBUG// console.log('revert the original image');
$image.attr('src', $image.data('jg.originalSrc')); //revert to the original thumbnail, we got it. $image.attr('src', $image.data('jg.originalSrc')); //revert to the original thumbnail, we got it.
}); });
var loadNewImage = function () { function loadNewImage() {
if (imageSrc !== newImageSrc) { //load the new image after the fadeIn if (imageSrc !== newImageSrc) { //load the new image after the fadeIn
$image.attr('src', newImageSrc); $image.attr('src', newImageSrc);
} }
}; }
if (context.settings.cssAnimation) { if ($image.data('jg.loaded') === 'skipped') {
$entry.addClass('entry-visible'); $image.one('load', function() {
loadNewImage(); showImg($entry, loadNewImage, context);
$image.data('jg.loaded', 'loaded');
});
} else { } else {
$entry.stop().fadeTo(context.settings.imagesAnimationDuration, 1.0, loadNewImage); showImg($entry, loadNewImage, context);
} }
// Captions ------------------------------ // Captions ------------------------------
@ -134,7 +189,8 @@
// 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.length !== 0) { if ($imgCaption.length !== 0) {
if (!context.settings.cssAnimation) { if (!context.settings.cssAnimation) {
$imgCaption.stop().fadeTo(context.settings.imagesAnimationDuration, context.settings.captionSettings.nonVisibleOpacity); $imgCaption.stop().fadeTo(context.settings.imagesAnimationDuration,
context.settings.captionSettings.nonVisibleOpacity);
} }
if (typeof captionMouseEvents === 'undefined') { if (typeof captionMouseEvents === 'undefined') {
captionMouseEvents = { captionMouseEvents = {
@ -157,17 +213,19 @@
} }
function prepareBuildingRow(context, isLastRow) { function prepareBuildingRow(context, isLastRow) {
var settings = context.settings;
var i, $entry, $image, imgAspectRatio, newImgW, newImgH, justify = true; var i, $entry, $image, imgAspectRatio, newImgW, newImgH, justify = true;
var minHeight = 0; var minHeight = 0;
var availableWidth = context.galleryWidth - ((context.buildingRow.entriesBuff.length - 1) * context.settings.margins); var availableWidth = context.galleryWidth - (
(context.buildingRow.entriesBuff.length - 1) * settings.margins);
var rowHeight = availableWidth / context.buildingRow.aspectRatio; var rowHeight = availableWidth / context.buildingRow.aspectRatio;
var justificable = context.buildingRow.width / availableWidth > context.settings.justifyThreshold; var justificable = context.buildingRow.width / availableWidth > 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 (isLastRow && context.settings.lastRow === 'hide' && !justificable) { if (isLastRow && settings.lastRow === 'hide' && !justificable) {
for (i = 0; i < context.buildingRow.entriesBuff.length; i++) { for (i = 0; i < context.buildingRow.entriesBuff.length; i++) {
$entry = context.buildingRow.entriesBuff[i]; $entry = context.buildingRow.entriesBuff[i];
if (context.settings.cssAnimation) if (settings.cssAnimation)
$entry.removeClass('entry-visible'); $entry.removeClass('entry-visible');
else else
$entry.stop().fadeTo(0, 0); $entry.stop().fadeTo(0, 0);
@ -176,7 +234,7 @@
} }
// 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 && context.settings.lastRow === 'nojustify' && !justificable) justify = false; if (isLastRow && !justificable && settings.lastRow === 'nojustify') justify = false;
for (i = 0; i < context.buildingRow.entriesBuff.length; i++) { for (i = 0; i < context.buildingRow.entriesBuff.length; i++) {
$image = context.buildingRow.entriesBuff[i].find('img'); $image = context.buildingRow.entriesBuff[i].find('img');
@ -190,13 +248,13 @@
In some cases here this is not satisfied (due to the justification). 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 But we comment it, because is better to have a shorter but justified row instead
to have a cropped image at the end. */ to have a cropped image at the end. */
/*if (context.settings.fixedHeight && newImgH < context.settings.rowHeight) { /*if (settings.fixedHeight && newImgH < settings.rowHeight) {
newImgW = context.settings.rowHeight * imgAspectRatio; newImgW = settings.rowHeight * imgAspectRatio;
newImgH = context.settings.rowHeight; newImgH = settings.rowHeight;
}*/ }*/
} else { } else {
newImgW = context.settings.rowHeight * imgAspectRatio; newImgW = settings.rowHeight * imgAspectRatio;
newImgH = context.settings.rowHeight; newImgH = settings.rowHeight;
} }
$image.data('jg.imgw', Math.ceil(newImgW)); $image.data('jg.imgw', Math.ceil(newImgW));
@ -204,10 +262,10 @@
if (i === 0 || minHeight > newImgH) minHeight = newImgH; if (i === 0 || minHeight > newImgH) minHeight = newImgH;
} }
if (context.settings.fixedHeight && minHeight > context.settings.rowHeight) if (settings.fixedHeight && minHeight > settings.rowHeight)
minHeight = context.settings.rowHeight; minHeight = settings.rowHeight;
return minHeight; return {minHeight: minHeight, justify: justify};
} }
function rewind(context) { function rewind(context) {
@ -216,32 +274,34 @@
context.buildingRow.aspectRatio = 0; context.buildingRow.aspectRatio = 0;
context.buildingRow.width = 0; context.buildingRow.width = 0;
context.offY = 0; context.offY = 0;
context.firstRowFlushed = false;
} }
function flushRow(context, isLastRow) { function flushRow(context, isLastRow) {
var $entry, $image, minHeight, offX = 0; var settings = context.settings;
var $entry, $image, minHeight, buildingRowRes, offX = 0;
//DEBUG// console.log('flush (width: ' + context.buildingRow.width + ', galleryWidth: ' + context.galleryWidth + ', ' + 'isLastRow: ' + isLastRow + ')'); //DEBUG// console.log('flush (isLastRow: ' + isLastRow + ')');
minHeight = prepareBuildingRow(context, isLastRow); buildingRowRes = prepareBuildingRow(context, isLastRow);
if (isLastRow && context.settings.lastRow === 'hide' && minHeight === -1) { minHeight = buildingRowRes.minHeight;
if (isLastRow && settings.lastRow === 'hide' && minHeight === -1) {
context.buildingRow.entriesBuff = []; context.buildingRow.entriesBuff = [];
context.buildingRow.aspectRatio = 0; context.buildingRow.aspectRatio = 0;
context.buildingRow.width = 0; context.buildingRow.width = 0;
return; return;
} }
if (context.settings.maxRowHeight > 0 && context.settings.maxRowHeight < minHeight) if (settings.maxRowHeight > 0 && settings.maxRowHeight < minHeight)
minHeight = context.settings.maxRowHeight; minHeight = settings.maxRowHeight;
else if (context.settings.maxRowHeight === 0 && (1.5 * context.settings.rowHeight) < minHeight) else if (settings.maxRowHeight === 0 && (1.5 * settings.rowHeight) < minHeight)
minHeight = 1.5 * context.settings.rowHeight; minHeight = 1.5 * settings.rowHeight;
for (var i = 0; i < context.buildingRow.entriesBuff.length; i++) { for (var i = 0; i < context.buildingRow.entriesBuff.length; i++) {
$entry = context.buildingRow.entriesBuff[i]; $entry = context.buildingRow.entriesBuff[i];
$image = $entry.find('img'); $image = $entry.find('img');
displayEntry($entry, offX, context.offY, $image.data('jg.imgw'), $image.data('jg.imgh'), minHeight, context); displayEntry($entry, offX, context.offY, $image.data('jg.imgw'),
offX += $image.data('jg.imgw') + context.settings.margins; $image.data('jg.imgh'), minHeight, context);
offX += $image.data('jg.imgw') + settings.margins;
} }
//Gallery Height //Gallery Height
@ -249,7 +309,7 @@
(context.spinner.active ? context.spinner.$el.innerHeight() : 0) (context.spinner.active ? context.spinner.$el.innerHeight() : 0)
); );
if(!isLastRow) { if (!isLastRow || (minHeight <= context.settings.rowHeight && buildingRowRes.justify)) {
//Ready for a new row //Ready for a new row
context.offY += minHeight + context.settings.margins; context.offY += minHeight + context.settings.margins;
@ -258,7 +318,6 @@
context.buildingRow.entriesBuff = []; //clear the array creating a new one context.buildingRow.entriesBuff = []; //clear the array creating a new one
context.buildingRow.aspectRatio = 0; context.buildingRow.aspectRatio = 0;
context.buildingRow.width = 0; context.buildingRow.width = 0;
context.firstRowFlushed = true;
context.$gallery.trigger('jg.rowflush'); context.$gallery.trigger('jg.rowflush');
} }
} }
@ -284,7 +343,8 @@
if (spinnerContext.phase < spinnerContext.$points.length) if (spinnerContext.phase < spinnerContext.$points.length)
spinnerContext.$points.eq(spinnerContext.phase).fadeTo(spinnerContext.timeslot, 1); spinnerContext.$points.eq(spinnerContext.phase).fadeTo(spinnerContext.timeslot, 1);
else else
spinnerContext.$points.eq(spinnerContext.phase - spinnerContext.$points.length).fadeTo(spinnerContext.timeslot, 0); spinnerContext.$points.eq(spinnerContext.phase - spinnerContext.$points.length)
.fadeTo(spinnerContext.timeslot, 0);
spinnerContext.phase = (spinnerContext.phase + 1) % (spinnerContext.$points.length * 2); spinnerContext.phase = (spinnerContext.phase + 1) % (spinnerContext.$points.length * 2);
}, spinnerContext.timeslot); }, spinnerContext.timeslot);
} }
@ -301,37 +361,40 @@
function startImgAnalyzer(context, isForResize) { function startImgAnalyzer(context, isForResize) {
stopImgAnalyzerStarter(context); stopImgAnalyzerStarter(context);
context.imgAnalyzerTimeout = setTimeout(function () { analyzeImages(context, isForResize); }, 0.001); context.imgAnalyzerTimeout = setTimeout(function () {
analyzeImages(context, isForResize);
}, 0.001);
analyzeImages(context, isForResize); analyzeImages(context, isForResize);
} }
function analyzeImages(context, isForResize) { function analyzeImages(context, isForResize) {
//DEBUG// /* //DEBUG//
/*var rnd = parseInt(Math.random() * 10000, 10); var rnd = parseInt(Math.random() * 10000, 10);
//DEBUG// console.log('analyzeImages ' + rnd + ' start'); console.log('analyzeImages ' + rnd + ' start');
//DEBUG// console.log('images status: '); console.log('images status: ');
for (var i = 0; i < context.entries.length; i++) { for (var i = 0; i < context.entries.length; i++) {
var $entry = $(context.entries[i]); var $entry = $(context.entries[i]);
var $image = $entry.find('img'); var $image = $entry.find('img');
//DEBUG// console.log(i + ' (alt: ' + $image.attr('alt') + 'loaded: ' + $image.data('jg.loaded') + ')'); console.log(i + ' (alt: ' + $image.attr('alt') + 'loaded: ' + $image.data('jg.loaded') + ')');
}*/ }*/
/* The first row */ /* The first row */
var settings = context.settings;
var isLastRow; var isLastRow;
for (var i = context.lastAnalyzedIndex + 1; i < context.entries.length; i++) { for (var i = context.lastAnalyzedIndex + 1; i < context.entries.length; i++) {
var $entry = $(context.entries[i]); var $entry = $(context.entries[i]);
var $image = $entry.find('img'); var $image = $entry.find('img');
if ($image.data('jg.loaded') === true) { if ($image.data('jg.loaded') === true || $image.data('jg.loaded') === 'skipped') {
isLastRow = i >= context.entries.length - 1; isLastRow = i >= context.entries.length - 1;
var availableWidth = context.galleryWidth - ((context.buildingRow.entriesBuff.length - 1) * context.settings.margins); var availableWidth = context.galleryWidth - (
(context.buildingRow.entriesBuff.length - 1) * settings.margins);
var imgAspectRatio = $image.data('jg.imgw') / $image.data('jg.imgh'); var imgAspectRatio = $image.data('jg.imgw') / $image.data('jg.imgh');
if (availableWidth / (context.buildingRow.aspectRatio + imgAspectRatio) < context.settings.rowHeight) { if (availableWidth / (context.buildingRow.aspectRatio + imgAspectRatio) < settings.rowHeight) {
flushRow(context, isLastRow); flushRow(context, isLastRow);
if(++context.yield.flushed >= context.yield.every) { if(++context.yield.flushed >= context.yield.every) {
//DEBUG// console.log("yield"); //DEBUG// console.log("yield");
startImgAnalyzer(context, isForResize); startImgAnalyzer(context, isForResize);
@ -341,7 +404,7 @@
context.buildingRow.entriesBuff.push($entry); context.buildingRow.entriesBuff.push($entry);
context.buildingRow.aspectRatio += imgAspectRatio; context.buildingRow.aspectRatio += imgAspectRatio;
context.buildingRow.width += imgAspectRatio * context.settings.rowHeight; context.buildingRow.width += imgAspectRatio * settings.rowHeight;
context.lastAnalyzedIndex = i; context.lastAnalyzedIndex = i;
} else if ($image.data('jg.loaded') !== 'error') { } else if ($image.data('jg.loaded') !== 'error') {
@ -350,7 +413,7 @@
} }
// Last row flush (the row is not full) // Last row flush (the row is not full)
if (context.buildingRow.entriesBuff.length > 0) flushRow(context, isLastRow); if (context.buildingRow.entriesBuff.length > 0) flushRow(context, true);
if (context.spinner.active) { if (context.spinner.active) {
context.spinner.active = false; context.spinner.active = false;
@ -366,15 +429,19 @@
stopImgAnalyzerStarter(context); stopImgAnalyzerStarter(context);
//On complete callback //On complete callback
if (!isForResize) context.$gallery.trigger('jg.complete'); else context.$gallery.trigger('jg.resize'); if (!isForResize)
context.$gallery.trigger('jg.complete');
else
context.$gallery.trigger('jg.resize');
//DEBUG// console.log('analyzeImages ' + rnd + ' end'); //DEBUG// console.log('analyzeImages ' + rnd + ' end');
} }
function checkSettings (context) { function checkSettings (context) {
var settings = context.settings;
function checkSuffixesRange(range) { function checkSuffixesRange(range) {
if (typeof context.settings.sizeRangeSuffixes[range] !== 'string') if (typeof settings.sizeRangeSuffixes[range] !== 'string')
throw 'sizeRangeSuffixes.' + range + ' must be a string'; throw 'sizeRangeSuffixes.' + range + ' must be a string';
} }
@ -389,7 +456,7 @@
} }
} }
if (typeof context.settings.sizeRangeSuffixes !== 'object') if (typeof settings.sizeRangeSuffixes !== 'object')
throw 'sizeRangeSuffixes must be defined and must be an object'; throw 'sizeRangeSuffixes must be defined and must be an object';
checkSuffixesRange('lt100'); checkSuffixesRange('lt100');
@ -399,45 +466,51 @@
checkSuffixesRange('lt640'); checkSuffixesRange('lt640');
checkSuffixesRange('lt1024'); checkSuffixesRange('lt1024');
checkOrConvertNumber(context.settings, 'rowHeight'); checkOrConvertNumber(settings, 'rowHeight');
checkOrConvertNumber(context.settings, 'maxRowHeight'); checkOrConvertNumber(settings, 'maxRowHeight');
checkOrConvertNumber(context.settings, 'margins');
if (context.settings.lastRow !== 'nojustify' && if (settings.maxRowHeight > 0 &&
context.settings.lastRow !== 'justify' && settings.maxRowHeight < settings.rowHeight) {
context.settings.lastRow !== 'hide') { settings.maxRowHeight = settings.rowHeight;
}
checkOrConvertNumber(settings, 'margins');
if (settings.lastRow !== 'nojustify' &&
settings.lastRow !== 'justify' &&
settings.lastRow !== 'hide') {
throw 'lastRow must be "nojustify", "justify" or "hide"'; throw 'lastRow must be "nojustify", "justify" or "hide"';
} }
checkOrConvertNumber(context.settings, 'justifyThreshold'); checkOrConvertNumber(settings, 'justifyThreshold');
if (context.settings.justifyThreshold < 0 || context.settings.justifyThreshold > 1) if (settings.justifyThreshold < 0 || settings.justifyThreshold > 1)
throw 'justifyThreshold must be in the interval [0,1]'; throw 'justifyThreshold must be in the interval [0,1]';
if (typeof context.settings.cssAnimation !== 'boolean') { if (typeof settings.cssAnimation !== 'boolean') {
throw 'cssAnimation must be a boolean'; throw 'cssAnimation must be a boolean';
} }
checkOrConvertNumber(context.settings.captionSettings, 'animationDuration'); checkOrConvertNumber(settings.captionSettings, 'animationDuration');
checkOrConvertNumber(context.settings, 'imagesAnimationDuration'); checkOrConvertNumber(settings, 'imagesAnimationDuration');
checkOrConvertNumber(context.settings.captionSettings, 'visibleOpacity'); checkOrConvertNumber(settings.captionSettings, 'visibleOpacity');
if (context.settings.captionSettings.visibleOpacity < 0 || context.settings.captionSettings.visibleOpacity > 1) if (settings.captionSettings.visibleOpacity < 0 || settings.captionSettings.visibleOpacity > 1)
throw 'captionSettings.visibleOpacity must be in the interval [0, 1]'; throw 'captionSettings.visibleOpacity must be in the interval [0, 1]';
checkOrConvertNumber(context.settings.captionSettings, 'nonVisibleOpacity'); checkOrConvertNumber(settings.captionSettings, 'nonVisibleOpacity');
if (context.settings.captionSettings.visibleOpacity < 0 || context.settings.captionSettings.visibleOpacity > 1) if (settings.captionSettings.visibleOpacity < 0 || settings.captionSettings.visibleOpacity > 1)
throw 'captionSettings.nonVisibleOpacity must be in the interval [0, 1]'; throw 'captionSettings.nonVisibleOpacity must be in the interval [0, 1]';
if (typeof context.settings.fixedHeight !== 'boolean') { if (typeof settings.fixedHeight !== 'boolean') {
throw 'fixedHeight must be a boolean'; throw 'fixedHeight must be a boolean';
} }
if (typeof context.settings.captions !== 'boolean') { if (typeof settings.captions !== 'boolean') {
throw 'captions must be a boolean'; throw 'captions must be a boolean';
} }
checkOrConvertNumber(context.settings, 'refreshTime'); checkOrConvertNumber(settings, 'refreshTime');
if (typeof context.settings.randomize !== 'boolean') { if (typeof settings.randomize !== 'boolean') {
throw 'randomize must be a boolean'; throw 'randomize must be a boolean';
} }
@ -468,7 +541,6 @@
aspectRatio : 0 aspectRatio : 0
}, },
lastAnalyzedIndex : -1, lastAnalyzedIndex : -1,
firstRowFlushed : false,
yield : { yield : {
every : 2, /* do a flush every context.yield.every flushes ( every : 2, /* do a flush every context.yield.every flushes (
* must be greater than 1, else the analyzeImages will loop */ * must be greater than 1, else the analyzeImages will loop */
@ -491,6 +563,11 @@
$gallery.data('jg.context', context); $gallery.data('jg.context', context);
} else if (arg === 'norewind') { } else if (arg === 'norewind') {
/* Hide the image of the buildingRow to prevent strange effects when the row will be
re-justified again */
for (var i = 0; i < context.buildingRow.entriesBuff.length; i++) {
hideImgImmediately(context.buildingRow.entriesBuff[i], context);
}
// In this case we don't rewind, and analyze all the images // In this case we don't rewind, and analyze all the images
} else { } else {
context.settings = $.extend({}, context.settings, arg); context.settings = $.extend({}, context.settings, arg);
@ -499,7 +576,7 @@
checkSettings(context); checkSettings(context);
context.entries = $gallery.find('> a, > div').toArray(); context.entries = $gallery.find('> a, > div:not(.spinner, #page-end)').toArray();
if (context.entries.length === 0) return; if (context.entries.length === 0) return;
// Randomize // Randomize
@ -510,28 +587,36 @@
}); });
} }
context.usedSizeRangeRegExp = new RegExp("(" +
context.settings.sizeRangeSuffixes.lt100 + "|" +
context.settings.sizeRangeSuffixes.lt240 + "|" +
context.settings.sizeRangeSuffixes.lt320 + "|" +
context.settings.sizeRangeSuffixes.lt500 + "|" +
context.settings.sizeRangeSuffixes.lt640 + "|" +
context.settings.sizeRangeSuffixes.lt1024 + ")$"
);
if (context.settings.maxRowHeight > 0 && context.settings.maxRowHeight < context.settings.rowHeight)
context.settings.maxRowHeight = context.settings.rowHeight;
var imagesToLoad = false; var imagesToLoad = false;
$.each(context.entries, function (index, entry) { $.each(context.entries, function (index, entry) {
var $entry = $(entry); var $entry = $(entry);
var $image = $entry.find('img'); var $image = $entry.find('img');
if ($image.data('jg.loaded') !== true) { if ($image.data('jg.loaded') !== true && $image.data('jg.loaded') !== 'skipped') {
// Link Rel global overwrite
if (context.settings.rel !== null) $entry.attr('rel', context.settings.rel);
// Link Target global overwrite
if (context.settings.target !== null) $entry.attr('target', context.settings.target);
// Image src
var imageSrc = (typeof $image.data('safe-src') !== 'undefined') ?
$image.data('safe-src') : $image.attr('src');
$image.data('jg.originalSrc', imageSrc);
$image.attr('src', imageSrc);
var width = parseInt($image.attr('width'), 10);
var height = parseInt($image.attr('height'), 10);
if(context.settings.waitThumbnailsLoad !== true && !isNaN(width) && !isNaN(height)) {
$image.data('jg.imgw', width);
$image.data('jg.imgh', height);
$image.data('jg.loaded', 'skipped');
startImgAnalyzer(context, false);
return true;
}
$image.data('jg.loaded', false); $image.data('jg.loaded', false);
//DEBUG// console.log('listed ' + $image.attr('alt'));
imagesToLoad = true; imagesToLoad = true;
// Spinner start // Spinner start
@ -542,17 +627,6 @@
startLoadingSpinnerAnimation(context.spinner); startLoadingSpinnerAnimation(context.spinner);
} }
// Link Rel global overwrite
if (context.settings.rel !== null) $entry.attr('rel', context.settings.rel);
// Link Target global overwrite
if (context.settings.target !== null) $entry.attr('target', context.settings.target);
// Image src
var imageSrc = (typeof $image.data('safe-src') !== 'undefined') ? $image.data('safe-src') : $image.attr('src');
$image.data('jg.originalSrc', imageSrc);
$image.attr('src', imageSrc);
/* Check if the image is loaded or not using another image object. /* Check if the image is loaded or not using another image object.
We cannot use the 'complete' image property, because some browsers, We cannot use the 'complete' image property, because some browsers,
with a 404 set complete = true */ with a 404 set complete = true */

15
mod/photos.php
View file

@ -703,7 +703,7 @@ function photos_content(&$a) {
if(count($r)) { if(count($r)) {
$twist = 'rotright'; $twist = 'rotright';
$o .= "<script> var page_query = '" . $_GET['q'] . "'; var extra_args = '" . extra_query_args() . "' ; </script>"; $o .= "<script> var page_query = '" . $_GET['q'] . "'; var extra_args = '" . extra_query_args() . "' ; </script>";
$o .= '<div id="photo-album-contents-' . $a->pager['page'] . '">'; $o .= '<div id="photo-album-contents">';
foreach($r as $rr) { foreach($r as $rr) {
@ -758,20 +758,15 @@ function photos_content(&$a) {
echo $ajaxout; echo $ajaxout;
killme(); killme();
} }
echo '<div id="photo-album-contents-' . $a->pager['page'] . '">';
echo $ajaxout; echo $ajaxout;
echo '</div>'; echo '<script>justifyPhotosAjax();</script>';
echo '<script>justifyPhotos(' . $a->pager['page'] . ');</script>';
killme(); killme();
} }
$o .= '</div>'; // photo-album-contents
$o .= '<script>justifyPhotos(' . $a->pager['page'] . ');</script>';
$o .= '<div id="page-end"></div>'; $o .= '<div id="page-end"></div>';
$o .= '</div>'; // photo-album-contents
$o .= '<div id="photo-album-end"></div>'; $o .= '<div id="photo-album-end"></div>';
$o .= '<script>$(document).ready(function() { loadingPage = false;});</script>'; $o .= '<script>$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>';
$o .= '<div id="page-spinner"></div>'; $o .= '<div id="page-spinner"></div>';
// $o .= paginate($a); // $o .= paginate($a);
@ -1226,7 +1221,6 @@ function photos_content(&$a) {
if($photos) { if($photos) {
$o = replace_macros(get_markup_template('photosajax.tpl'),array( $o = replace_macros(get_markup_template('photosajax.tpl'),array(
'$photos' => $photos, '$photos' => $photos,
'$page' => $a->pager['page']
)); ));
} }
else { else {
@ -1243,7 +1237,6 @@ function photos_content(&$a) {
'$can_post' => $can_post, '$can_post' => $can_post,
'$upload' => array(t('Upload New Photos'), $a->get_baseurl().'/photos/'.$a->data['channel']['channel_address'].'/upload'), '$upload' => array(t('Upload New Photos'), $a->get_baseurl().'/photos/'.$a->data['channel']['channel_address'].'/upload'),
'$photos' => $photos, '$photos' => $photos,
'$page' => $a->pager['page']
)); ));
} }

12
view/js/main.js
View file

@ -704,22 +704,26 @@ function updateConvItems(mode,data) {
} }
function justifyPhotos(bParam_page) { function justifyPhotos() {
justifiedGalleryActive = true; justifiedGalleryActive = true;
$('#photo-album-contents-' + bParam_page).justifiedGallery({ $('#photo-album-contents').justifiedGallery({
lastRow : 'nojustify',
margins: 3, margins: 3,
sizeRangeSuffixes: { sizeRangeSuffixes: {
'lt100': '-2', 'lt100': '-2',
'lt240': '-2', 'lt240': '-2',
'lt320': '-2', 'lt320': '-2',
'lt500': '-1', 'lt500': '',
'lt640': '-1', 'lt640': '-1',
'lt1024': '-0' 'lt1024': '-0'
} }
}).on('jg.complete', function(e){ justifiedGalleryActive = false; }); }).on('jg.complete', function(e){ justifiedGalleryActive = false; });
} }
function justifyPhotosAjax() {
justifiedGalleryActive = true;
$('#photo-album-contents').justifiedGallery('norewind').on('jg.complete', function(e){ justifiedGalleryActive = false; });
}
function notify_popup_loader(notifyType) { function notify_popup_loader(notifyType) {
/* notifications template */ /* notifications template */

8
view/tpl/photos_recent.tpl
View file

@ -3,14 +3,12 @@
<a id="photo-top-upload-link" href="{{$upload.1}}">{{$upload.0}}</a> <a id="photo-top-upload-link" href="{{$upload.1}}">{{$upload.0}}</a>
{{/if}} {{/if}}
<div id="photo-album-contents-{{$page}}"> <div id="photo-album-contents">
{{foreach $photos as $photo}} {{foreach $photos as $photo}}
{{include file="photo_top.tpl"}} {{include file="photo_top.tpl"}}
{{/foreach}} {{/foreach}}
</div>
<script>justifyPhotos({{$page}});</script>
<div id="page-end"></div> <div id="page-end"></div>
</div>
<div class="photos-end"></div> <div class="photos-end"></div>
<script>$(document).ready(function() { loadingPage = false;});</script> <script>$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>
<div id="page-spinner"></div> <div id="page-spinner"></div>

5
view/tpl/photosajax.tpl
View file

@ -1,7 +1,4 @@
<!-- -->
<div id="photo-album-contents-{{$page}}">
{{foreach $photos as $photo}} {{foreach $photos as $photo}}
{{include file="photo_top.tpl"}} {{include file="photo_top.tpl"}}
{{/foreach}} {{/foreach}}
</div> <script>justifyPhotosAjax()</script>
<script>justifyPhotos({{$page}});</script>