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.
199 lines
4.6 KiB
199 lines
4.6 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 Handlebars, oc_requesttoken, Gallery, Thumbnails */ |
|
(function ($, Gallery, oc_requesttoken) { |
|
"use strict"; |
|
|
|
/** |
|
* Creates a new image object to store information about a media file |
|
* |
|
* @param {string} src |
|
* @param {string} path |
|
* @param {number} fileId |
|
* @param {string} mimeType |
|
* @param {number} mTime modification time |
|
* @param {string} etag |
|
* @param {number} size |
|
* @param {boolean} sharedWithUser |
|
* @param {string} owner |
|
* @param {number} permissions |
|
* @constructor |
|
*/ |
|
var GalleryImage = function (src, path, fileId, mimeType, mTime, etag, size, sharedWithUser, |
|
owner, permissions) { |
|
this.src = src; |
|
this.path = path; |
|
this.fileId = fileId; |
|
this.mimeType = mimeType; |
|
this.mTime = mTime; |
|
this.etag = etag; |
|
this.size = size; |
|
this.sharedWithUser = sharedWithUser; |
|
this.owner = owner; |
|
this.permissions = permissions; |
|
this.thumbnail = null; |
|
this.domDef = null; |
|
this.spinner = null; |
|
}; |
|
|
|
GalleryImage.prototype = { |
|
/** |
|
* Returns the Thumbnail ID |
|
* |
|
* @returns {[number]} |
|
*/ |
|
getThumbnailIds: function () { |
|
return [this.fileId]; |
|
}, |
|
|
|
/** |
|
* Returns a reference to a loading Thumbnail.image |
|
* |
|
* @param {boolean} square |
|
* |
|
* @returns {jQuery.Deferred<Thumbnail.image>} |
|
*/ |
|
getThumbnail: function (square) { |
|
if (this.thumbnail === null) { |
|
this.thumbnail = Thumbnails.get(this.fileId, square); |
|
} |
|
return this.thumbnail.loadingDeferred; |
|
}, |
|
|
|
/** |
|
* Returns the width of a thumbnail |
|
* |
|
* Used to calculate the width of the row as we add more images to it |
|
* |
|
* @returns {number} |
|
*/ |
|
getThumbnailWidth: function (targetHeight) { |
|
var image = this; |
|
// img is a Thumbnail.image |
|
return this.getThumbnail(false).then(function (img) { |
|
var width = 0; |
|
if (img) { |
|
// In Firefox, you don't get the size of a SVG before it's added to the DOM |
|
image.domDef.children('.image').append(img); |
|
if (image.mimeType === 'image/svg+xml') { |
|
image.thumbnail.ratio = img.width / img.height; |
|
} |
|
width = Math.round(targetHeight * image.thumbnail.ratio); |
|
} |
|
|
|
return width; |
|
}); |
|
}, |
|
|
|
/** |
|
* Creates the container, the a and img elements in the DOM |
|
* |
|
* Each image is also a link to start the full screen slideshow |
|
* |
|
* @param {number} targetHeight |
|
* |
|
* @return {a} |
|
*/ |
|
getDom: function (targetHeight) { |
|
if (this.domDef === null) { |
|
var imageElement = Gallery.Templates.galleryimage({ |
|
targetHeight: targetHeight, |
|
targetWidth: targetHeight, |
|
label: OC.basename(this.path), |
|
path: this.path |
|
}); |
|
this.domDef = $(imageElement); |
|
this._addLabel(); |
|
this.spinner = this.domDef.children('.image-loader'); |
|
} |
|
return this.domDef; |
|
}, |
|
|
|
/** |
|
* Resizes the image once it has been loaded |
|
* |
|
* @param {Number} targetHeight |
|
* @param {Number} newWidth |
|
*/ |
|
resize: function (targetHeight, newWidth) { |
|
if (this.spinner !== null) { |
|
var img = this.thumbnail.image; |
|
this.spinner.remove(); |
|
this.spinner = null; |
|
this.domDef.attr('data-width', newWidth) |
|
.attr('data-height', targetHeight); |
|
|
|
var url = this._getLink(); |
|
this.domDef.attr('href', url); |
|
|
|
// This will stretch wide images to make them reach targetHeight |
|
$(img).css({ |
|
'width': newWidth, |
|
'height': targetHeight |
|
}); |
|
img.alt = encodeURI(this.path); |
|
|
|
this.domDef.click(this._openImage.bind(this)); |
|
} |
|
}, |
|
|
|
/** |
|
* Adds a label to the album |
|
* |
|
* @private |
|
*/ |
|
_addLabel: function () { |
|
var imageLabel = this.domDef.children('.image-label'); |
|
this.domDef.hover(function () { |
|
imageLabel.slideToggle(OC.menuSpeed); |
|
}, function () { |
|
imageLabel.slideToggle(OC.menuSpeed); |
|
}); |
|
}, |
|
|
|
/** |
|
* Generates the link for the click action of the image |
|
* |
|
* @returns {string} |
|
* @private |
|
*/ |
|
_getLink: function () { |
|
var url = '#' + encodeURIComponent(this.path); |
|
if (!this.thumbnail.valid) { |
|
var params = { |
|
c: this.etag, |
|
requesttoken: oc_requesttoken |
|
}; |
|
url = Gallery.utility.buildGalleryUrl( |
|
'files', |
|
'/download/' + this.fileId, |
|
params |
|
); |
|
} |
|
|
|
return url; |
|
}, |
|
|
|
/** |
|
* Call when the image is clicked on. |
|
* |
|
* @param event |
|
* @private |
|
*/ |
|
_openImage: function (event) { |
|
event.stopPropagation(); |
|
// click function for future use. |
|
} |
|
}; |
|
|
|
window.GalleryImage = GalleryImage; |
|
})(jQuery, Gallery, oc_requesttoken);
|
|
|