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.
167 lines
4.5 KiB
167 lines
4.5 KiB
5 years ago
|
/**
|
||
|
* 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);
|