' + t('gallery', - 'Upload pictures in the files app to display them here') + '
'; - emptyContentElement.html(message); - emptyContentElement.removeClass('hidden'); - $('#controls').addClass('hidden'); - }, - - /** - * Shows an empty gallery message - */ - showEmptyFolder: function () { - var emptyContentElement = $('#emptycontent'); - var message = ''; - message += '' + t('gallery', - 'No media files found in this folder') + '
'; - emptyContentElement.html(message); - emptyContentElement.removeClass('hidden'); - }, - - /** - * Shows the infamous loading spinner - */ - showLoading: function () { - $('#emptycontent').addClass('hidden'); - $('#controls').removeClass('hidden'); - }, - - /** - * Shows thumbnails - */ - showNormal: function () { - $('#emptycontent').addClass('hidden'); - $('#controls').removeClass('hidden'); - }, - /** * Creates a new slideshow using the images found in the current folder * @@ -327,7 +274,8 @@ c: image.etag, requesttoken: oc_requesttoken }; - var downloadUrl = Gallery.utility.buildGalleryUrl('files', '/download/' + image.fileId, + var downloadUrl = Gallery.utility.buildGalleryUrl('files', + '/download/' + image.fileId, params); return { @@ -379,6 +327,8 @@ var mimeType = null; var mTime = null; var etag = null; + var size = null; + var sharedWithUser = null; var albumInfo = data.albuminfo; var currentLocation = albumInfo.path; // This adds a new node to the map for each parent album @@ -394,8 +344,13 @@ mimeType = files[i].mimetype; mTime = files[i].mtime; etag = files[i].etag; + size = files[i].size; + sharedWithUser = files[i].sharedWithUser; - image = new GalleryImage(path, path, fileId, mimeType, mTime, etag); + image = + new GalleryImage( + path, path, fileId, mimeType, mTime, etag, size, sharedWithUser + ); // Determines the folder name for the image var dir = OC.dirname(path); @@ -505,15 +460,15 @@ // directive $.get(OC.generateUrl('apps/files_sharing/testremote'), {remote: remote}).then(function (protocol) { - if (protocol !== 'http' && protocol !== 'https') { - OC.dialogs.alert(t('files_sharing', - 'No ownCloud installation (7 or higher) found at {remote}', - {remote: remote}), - t('files_sharing', 'Invalid ownCloud url')); - } else { - OC.redirect(protocol + '://' + url); - } - }); + if (protocol !== 'http' && protocol !== 'https') { + OC.dialogs.alert(t('files_sharing', + 'No ownCloud installation (7 or higher) found at {remote}', + {remote: remote}), + t('files_sharing', 'Invalid ownCloud url')); + } else { + OC.redirect(protocol + '://' + url); + } + }); } } }; diff --git a/js/galleryimage.js b/js/galleryimage.js index fa2ab7a6b8..63ac3b85b0 100644 --- a/js/galleryimage.js +++ b/js/galleryimage.js @@ -14,21 +14,25 @@ /** * Creates a new image object to store information about a media file * - * @param src - * @param path - * @param fileId - * @param mimeType - * @param mTime modification time - * @param etag + * @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 * @constructor */ - var GalleryImage = function (src, path, fileId, mimeType, mTime, etag) { + var GalleryImage = function (src, path, fileId, mimeType, mTime, etag, size, sharedWithUser) { 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.thumbnail = null; this.domDef = null; this.spinner = null; diff --git a/js/galleryview.js b/js/galleryview.js index 339d5b444c..b69d05f6aa 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -1,6 +1,9 @@ -/* global Gallery */ +/* global Handlebars, Gallery */ (function ($, _, OC, t, Gallery) { "use strict"; + + var TEMPLATE_ADDBUTTON = '' + errorMessage + '
'; + uploadAllowed = false; + } else { + message += '' + t('gallery', + 'Upload pictures in the files app to display them here') + '
'; + } else { + message += '' + t('gallery', + 'Upload new files via drag and drop or by using the [+] button above') + + '
'; + } + } + this.emptyContentElement.html(message); + this.emptyContentElement.removeClass('hidden'); + + //Gallery.view.showEmptyFolder(); + this._hideButtons(uploadAllowed); + Gallery.currentAlbum = albumPath; + var availableWidth = $(window).width() - Gallery.buttonsWidth; + this.breadcrumb.init(albumPath, availableWidth); + Gallery.config.albumDesign = null; + }, + + /** + * Shows the infamous loading spinner + */ + showLoading: function () { + this.emptyContentElement.addClass('hidden'); + this.controlsElement.removeClass('hidden'); + }, + + /** + * Shows thumbnails + */ + _showNormal: function () { + this.emptyContentElement.addClass('hidden'); + this.controlsElement.removeClass('hidden'); + }, + + /** + * Sets up our custom handlers for folder uploading operations + * + * We only want it to be called for that specific case as all other file uploading + * operations will call Files.highlightFiles + * + * @see OC.Upload.init/file_upload_param.done() + * + * @private + */ + _setupUploader: function () { + $('#file_upload_start').on('fileuploaddone', function (e, data) { + if (data.files[0] === data.originalFiles[data.originalFiles.length - 1] + && data.files[0].relativePath) { + + //Ask for a refresh of the photowall + Gallery.getFiles(Gallery.currentAlbum).done(function () { + Gallery.view.init(Gallery.currentAlbum); + }); + } + }); + + // Since 9.0 + if (OC.Upload) { + OC.Upload._isReceivedSharedFile = function (file) { + var path = file.name; + var sharedWith = false; + + if (Gallery.currentAlbum !== '' && Gallery.currentAlbum !== '/') { + path = Gallery.currentAlbum + '/' + path; + } + if (Gallery.imageMap[path] && Gallery.imageMap[path].sharedWithUser) { + sharedWith = true; + } + + return sharedWith; + }; + } }, /** @@ -216,6 +306,7 @@ $('#sort-date-button').click(Gallery.sorter); $('#save #save-button').click(Gallery.showSaveForm); $('.save-form').submit(Gallery.saveForm); + this._renderNewButton(); this.requestId = Math.random(); }, @@ -253,6 +344,27 @@ currentSort.order)); Gallery.albumMap[Gallery.currentAlbum].subAlbums.sort(Gallery.utility.sortBy('name', currentSort.albumOrder)); + + $('#save-button').show(); + $('#download').show(); + }, + + /** + * Hide buttons in the controls bar + * + * @param uploadAllowed + */ + _hideButtons: function (uploadAllowed) { + $('#album-info-button').hide(); + $('#share-button').hide(); + $('#sort-name-button').hide(); + $('#sort-date-button').hide(); + $('#save-button').hide(); + $('#download').hide(); + + if (!uploadAllowed) { + $('a.button.new').hide(); + } }, /** @@ -366,6 +478,60 @@ $('#save-button-confirm').prop('disabled', false); } }); + }, + + /** + * Creates the [+] button allowing users who can't drag and drop to upload files + * + * @see core/apps/files/js/filelist.js + * @private + */ + _renderNewButton: function () { + // if no actions container exist, skip + var $actionsContainer = $('.actions'); + if (!$actionsContainer.length) { + return; + } + if (!this._addButtonTemplate) { + this._addButtonTemplate = Handlebars.compile(TEMPLATE_ADDBUTTON); + } + var $newButton = $(this._addButtonTemplate({ + addText: t('gallery', 'New'), + iconUrl: OC.imagePath('core', 'actions/add') + })); + + $actionsContainer.prepend($newButton); + $newButton.tooltip({'placement': 'bottom'}); + + $newButton.click(_.bind(this._onClickNewButton, this)); + this._newButton = $newButton; + }, + + /** + * Creates the click handler for the [+] button + * @param event + * @returns {boolean} + * + * @see core/apps/files/js/filelist.js + * @private + */ + _onClickNewButton: function (event) { + var $target = $(event.target); + if (!$target.hasClass('.button')) { + $target = $target.closest('.button'); + } + this._newButton.tooltip('hide'); + event.preventDefault(); + if ($target.hasClass('disabled')) { + return false; + } + if (!this._newFileMenu) { + this._newFileMenu = new Gallery.NewFileMenu(); + $('body').append(this._newFileMenu.$el); + } + this._newFileMenu.showAt($target); + + return false; } }; diff --git a/js/thumbnail.js b/js/thumbnail.js index f40dffdf75..03da6ff353 100644 --- a/js/thumbnail.js +++ b/js/thumbnail.js @@ -90,7 +90,7 @@ function Thumbnail (fileId, square) { */ loadBatch: function (ids, square) { var map = (square) ? Thumbnails.squareMap : Thumbnails.map; - // Purely here as a precaution + // Prevents re-loading thumbnails when resizing the window ids = ids.filter(function (id) { return !map[id]; }); diff --git a/js/upload-helper.js b/js/upload-helper.js new file mode 100644 index 0000000000..d7ecf789dc --- /dev/null +++ b/js/upload-helper.js @@ -0,0 +1,144 @@ +/* global Gallery, Thumbnails */ +/** + * OCA.FileList methods needed for file uploading + * + * This hack makes it possible to use the Files scripts as is, without having to import and + * maintain them in Gallery + * + * Empty methods are for the "new" button, if we want to implement that one day + * + * @type {{inList: FileList.inList, lastAction: FileList.lastAction, getUniqueName: + * FileList.getUniqueName, getCurrentDirectory: FileList.getCurrentDirectory, add: + * FileList.add, checkName: FileList.checkName}} + */ +var FileList = { + /** + * Makes sure the filename does not exist + * + * Gives an early chance to the user to abort the action, before uploading everything to the + * server. + * Albums are not supported as we don't have a full list of images contained in a sub-album + * + * @param fileName + * @returns {*} + */ + findFile: function (fileName) { + "use strict"; + var path = Gallery.currentAlbum + '/' + fileName; + var galleryImage = Gallery.imageMap[path]; + if (galleryImage) { + var fileInfo = { + name: fileName, + directory: Gallery.currentAlbum, + path: path, + etag: galleryImage.etag, + mtime: galleryImage.mTime * 1000, // Javascript gives the Epoch time in milliseconds + size: galleryImage.size + }; + return fileInfo; + } else { + return null; + } + }, + + /** + * Refreshes the photowall + * + * Called at the end of the uploading process when 1 or multiple files are sent + * Never called with folders on Chrome, unless files are uploaded at the same time as folders + * + * @param fileList + */ + highlightFiles: function (fileList) { + "use strict"; + //Ask for a refresh of the photowall + Gallery.getFiles(Gallery.currentAlbum).done(function () { + var fileId, path; + // Removes the cached thumbnails of files which have been re-uploaded + _(fileList).each(function (fileName) { + path = Gallery.currentAlbum + '/' + fileName; + if (Gallery.imageMap[path]) { + fileId = Gallery.imageMap[path].fileId; + if (Thumbnails.map[fileId]) { + delete Thumbnails.map[fileId]; + } + } + }); + + Gallery.view.init(Gallery.currentAlbum); + }); + }, + + /** + * Retrieves the current album + * + * @returns {string} + */ + getCurrentDirectory: function () { + "use strict"; + + // In Files, dirs start with a / + return '/' + Gallery.currentAlbum; + } +}; + +/** + * OCA.Files methods needed for file uploading + * + * This hack makes it possible to use the Files scripts as is, without having to import and + * maintain them in Gallery + * + * @type {{isFileNameValid: Files.isFileNameValid, generatePreviewUrl: Files.generatePreviewUrl}} + */ +var Files = { + App: {fileList: {}}, + + isFileNameValid: function (name) { + "use strict"; + var trimmedName = name.trim(); + if (trimmedName === '.' || trimmedName === '..') { + throw t('files', '"{name}" is an invalid file name.', {name: name}); + } else if (trimmedName.length === 0) { + throw t('files', 'File name cannot be empty.'); + } + return true; + + }, + + /** + * Generates a preview for the conflict dialogue + * + * Since Gallery uses the fileId and Files uses the path, we have to use the preview endpoint + * of Files + */ + generatePreviewUrl: function (urlSpec) { + "use strict"; + var previewUrl; + var path = urlSpec.file; + + // In Files, root files start with // + if (path.indexOf('//') === 0) { + path = path.substring(2); + } else { + // Directories start with / + path = path.substring(1); + } + + if (Gallery.imageMap[path]) { + var fileId = Gallery.imageMap[path].fileId; + var thumbnail = Thumbnails.map[fileId]; + previewUrl = thumbnail.image.src; + } else { + var previewDimension = 96; + urlSpec.x = Math.ceil(previewDimension * window.devicePixelRatio); + urlSpec.y = Math.ceil(previewDimension * window.devicePixelRatio); + urlSpec.forceIcon = 0; + previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec); + } + + return previewUrl; + } +}; + +OCA.Files = Files; +OCA.Files.App.fileList = FileList; diff --git a/js/vendor/owncloud/newfilemenu.js b/js/vendor/owncloud/newfilemenu.js new file mode 100644 index 0000000000..a3dbd748f5 --- /dev/null +++ b/js/vendor/owncloud/newfilemenu.js @@ -0,0 +1,94 @@ +/* + * Copyright (c) 2014-2016 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING file. + * + */ + +/* global Handlebars, Gallery */ +(function ($, Gallery) { + "use strict"; + var TEMPLATE_MENU = + '