You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
4.5 KiB
166 lines
4.5 KiB
/** |
|
* Nextcloud - Gallery |
|
* |
|
* |
|
* This file is licensed under the Affero General Public License version 3 or |
|
* later. See the COPYING file. |
|
* |
|
* @author Olivier Paroz <galleryapps@oparoz.com> |
|
* |
|
* @copyright Olivier Paroz 2017 |
|
*/ |
|
/* global Gallery, Album */ |
|
(function ($, Gallery) { |
|
"use strict"; |
|
/** |
|
* Creates a row |
|
* |
|
* @param {number} targetWidth |
|
* @constructor |
|
*/ |
|
var Row = function (targetWidth) { |
|
this.targetWidth = targetWidth; |
|
this.items = []; |
|
this.width = 4; // 4px margin to start with |
|
this.domDef = $('<div/>').addClass('row'); |
|
}; |
|
|
|
Row.prototype = { |
|
targetHeight: 200, // standard row height |
|
draggableOptions: { |
|
revert: 'invalid', |
|
revertDuration: 300, |
|
opacity: 0.7, |
|
distance: 20, |
|
zIndex: 1000, |
|
cursor: 'move', |
|
helper: function (e) { |
|
// Capture the original element |
|
var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $( |
|
e.target).closest(".ui-draggable"); |
|
|
|
// Create a clone 50% smaller and link it to the #content element |
|
var clone = original.clone() |
|
.css({'transform': 'scale(0.5)'}) |
|
.appendTo('#content'); |
|
|
|
// Remove the labels |
|
clone.children('.image-label,.album-label').remove(); |
|
|
|
// Centre the mouse pointer |
|
$(this).draggable("option", "cursorAt", { |
|
left: Math.floor($(this).width() / 2), |
|
top: Math.floor($(this).height() / 2) |
|
}); |
|
|
|
return clone; |
|
}, |
|
start: function (e) { |
|
// Disable all mouse interactions when dragging |
|
$('#gallery').css({'pointer-events': 'none'}); |
|
$(e.target).css({opacity: 0.7}); |
|
}, |
|
stop: function (e) { // need to put it back on stop |
|
$('#gallery').css({'pointer-events': 'all'}); |
|
$(e.target).css({opacity: 1}); |
|
} |
|
}, |
|
|
|
/** |
|
* Adds sub-albums and images to the row until it's full |
|
* |
|
* @param {Album|GalleryImage} element |
|
* |
|
* @return {jQuery.Deferred<bool>} true if more images can be added to the row |
|
*/ |
|
addElement: function (element) { |
|
var row = this; |
|
var fileNotFoundStatus = 404; |
|
var def = new $.Deferred(); |
|
var itemDom; |
|
|
|
var validateRowWidth = function (width) { |
|
row.items.push(element); |
|
row.width += width + 4; // add 4px for the margin |
|
def.resolve(!row._isFull()); |
|
}; |
|
|
|
itemDom = element.getDom(row.targetHeight); |
|
row.domDef.append(itemDom); |
|
itemDom.draggable(this.draggableOptions); |
|
|
|
// The width of an album is always the same as its height |
|
if (element instanceof Album) { |
|
validateRowWidth(row.targetHeight); |
|
} else { |
|
// We can't calculate the total width if we don't have the width of the thumbnail |
|
element.getThumbnailWidth(row.targetHeight).then(function (width) { |
|
if (element.thumbnail.status !== fileNotFoundStatus) { |
|
element.resize(row.targetHeight, width); |
|
validateRowWidth(width); |
|
} else { |
|
itemDom.remove(); |
|
def.resolve(true); |
|
} |
|
}, function () { |
|
itemDom.remove(); |
|
def.resolve(true); |
|
}); |
|
} |
|
|
|
return def.promise(); |
|
}, |
|
|
|
/** |
|
* Returns the DOM element of the row |
|
* |
|
* @returns {*} |
|
*/ |
|
getDom: function () { |
|
return this.domDef; |
|
}, |
|
|
|
/** |
|
* Resizes the row once it's full |
|
*/ |
|
fit: function () { |
|
var scaleRatio = (this.width > this.targetWidth) ? this.targetWidth / this.width : 1; |
|
|
|
// This animates the elements when the window is resized |
|
var targetHeight = 4 + (this.targetHeight * scaleRatio); |
|
targetHeight = targetHeight.toFixed(3); |
|
this.domDef.height(targetHeight); |
|
this.domDef.width(this.width * scaleRatio); |
|
|
|
// Resizes and scales all photowall elements to make them fit within the window's width |
|
this.domDef.find('a').each(function () { |
|
// Necessary since DOM elements are not resized when CSS transform is used |
|
$(this).css('width', $(this).data('width') * scaleRatio) |
|
.css('height', $(this).data('height') * scaleRatio); |
|
// This scales the containers inside the anchors |
|
$(this).children('.container').css('transform-origin', 'left top') |
|
.css('-webkit-transform-origin', 'left top') |
|
.css('-ms-transform-origin', 'left top') |
|
.css('transform', 'scale(' + scaleRatio + ')') |
|
.css('-webkit-transform', 'scale(' + scaleRatio + ')') |
|
.css('-ms-transform', 'scale(' + scaleRatio + ')'); |
|
}); |
|
|
|
// Restore the rows to their normal opacity. This happens immediately with rows |
|
// containing albums only |
|
this.domDef.css('opacity', 1); |
|
}, |
|
|
|
/** |
|
* Calculates if the row is full |
|
* |
|
* @returns {boolean} |
|
* @private |
|
*/ |
|
_isFull: function () { |
|
return this.width > this.targetWidth; |
|
} |
|
}; |
|
|
|
Gallery.Row = Row; |
|
})(jQuery, Gallery);
|
|
|