From 9986ae98d1dee1c44a50df6b3574283c2a0a6550 Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Sun, 5 Jul 2015 17:59:58 +0200 Subject: Slideshow cleanup * Back button support * Cleanup all images when closed * Remove duplicate events * Properly clear previous/next image --- js/galleryfileaction.js | 257 +++++++++++++++++++++++++++--------------------- 1 file changed, 147 insertions(+), 110 deletions(-) (limited to 'js/galleryfileaction.js') diff --git a/js/galleryfileaction.js b/js/galleryfileaction.js index 7ff9d3bf..53423cdd 100644 --- a/js/galleryfileaction.js +++ b/js/galleryfileaction.js @@ -1,130 +1,167 @@ -/* global OC ,OCA, $, oc_requesttoken, SlideShow */ -var galleryFileAction = { - config: null, - mediaTypes: {}, - - /** - * Builds a URL pointing to one of the app's controllers - * - * @param {string} endPoint - * @param {undefined|string} path - * @param params - * - * @returns {string} - */ - buildGalleryUrl: function (endPoint, path, params) { - var extension = ''; - var tokenElement = $('#sharingToken'); - var token = (tokenElement.val()) ? tokenElement.val() : false; - if (token) { - params.token = token; - extension = '.public'; - } - var query = OC.buildQueryString(params); - return OC.generateUrl('apps/galleryplus/' + endPoint + extension + path, null) + '?' + - query; - }, - - /** - * Registers a file action for each media type - * - * @param mediaTypes - */ - register: function (mediaTypes) { - //console.log("enabledPreviewProviders: ", mediaTypes); - if (mediaTypes) { - galleryFileAction.mediaTypes = mediaTypes; - } +/* global oc_requesttoken, FileList, SlideShow */ +(function (OC ,OCA, $, oc_requesttoken) { + "use strict"; + var galleryFileAction = { + config: null, + mediaTypes: {}, + scrollContainer: null, + slideShow: null, - // We only want to create slideshows for supported media types - for (var i = 0, keys = Object.keys(galleryFileAction.mediaTypes); i < keys.length; i++) { - // Each click handler gets the same function and images array and - // is responsible to load the slideshow - OCA.Files.fileActions.register(keys[i], 'View', OC.PERMISSION_READ, '', - galleryFileAction.onView); - OCA.Files.fileActions.setDefault(keys[i], 'View'); - } - }, - - /** - * Builds an array containing all the images we can show in the slideshow - * - * @param {string} filename - * @param context - */ - onView: function (filename, context) { - var imageUrl, downloadUrl; - var fileList = context.fileList; - var files = fileList.files; - var start = 0; - var images = []; - var dir = context.dir + '/'; - var width = Math.floor(screen.width * window.devicePixelRatio); - var height = Math.floor(screen.height * window.devicePixelRatio); - - /* Find value of longest edge. */ - var longEdge = Math.max(width, height); - - /* Find the next larger image size. */ - if (longEdge % 100 !== 0) { - longEdge = ( longEdge + 100 ) - ( longEdge % 100 ); - } + /** + * Builds a URL pointing to one of the app's controllers + * + * @param {string} endPoint + * @param {undefined|string} path + * @param params + * + * @returns {string} + */ + buildGalleryUrl: function (endPoint, path, params) { + var extension = ''; + var tokenElement = $('#sharingToken'); + var token = (tokenElement.val()) ? tokenElement.val() : false; + if (token) { + params.token = token; + extension = '.public'; + } + var query = OC.buildQueryString(params); + return OC.generateUrl('apps/galleryplus/' + endPoint + extension + path, null) + '?' + + query; + }, - for (var i = 0; i < files.length; i++) { - var file = files[i]; - // We only add images to the slideshow if we think we'll be able - // to generate previews for this media type - if (galleryFileAction.mediaTypes[file.mimetype]) { - /* jshint camelcase: false */ - var params = { - width: longEdge, - height: longEdge, - c: file.etag, - requesttoken: oc_requesttoken - }; - imageUrl = galleryFileAction.buildGalleryUrl('preview', '/' + file.id, params); - downloadUrl = imageUrl + '&download'; - - images.push({ - name: file.name, - path: dir + file.name, - fileId: file.id, - mimeType: file.mimetype, - url: imageUrl, - downloadUrl: downloadUrl - }); + /** + * Registers a file action for each media type + * + * @param mediaTypes + */ + register: function (mediaTypes) { + //console.log("enabledPreviewProviders: ", mediaTypes); + if (mediaTypes) { + galleryFileAction.mediaTypes = mediaTypes; } - } - for (i = 0; i < images.length; i++) { - //console.log("Images in the slideshow : ", images[i]); - if (images[i].name === filename) { - start = i; + + // We only want to create slideshows for supported media types + for (var i = 0, keys = Object.keys(galleryFileAction.mediaTypes); i < + keys.length; i++) { + // Each click handler gets the same function and images array and + // is responsible to load the slideshow + OCA.Files.fileActions.register(keys[i], 'View', OC.PERMISSION_READ, '', + galleryFileAction.onView); + OCA.Files.fileActions.setDefault(keys[i], 'View'); + } + }, + + /** + * Builds an array containing all the images we can show in the slideshow + * + * @param {string} filename + * @param context + */ + onView: function (filename, context) { + var imageUrl, downloadUrl; + var fileList = context.fileList; + var files = fileList.files; + var start = 0; + var images = []; + var dir = context.dir + '/'; + var width = Math.floor(screen.width * window.devicePixelRatio); + var height = Math.floor(screen.height * window.devicePixelRatio); + + /* Find value of longest edge. */ + var longEdge = Math.max(width, height); + + /* Find the next larger image size. */ + if (longEdge % 100 !== 0) { + longEdge = ( longEdge + 100 ) - ( longEdge % 100 ); + } + + for (var i = 0; i < files.length; i++) { + var file = files[i]; + // We only add images to the slideshow if we think we'll be able + // to generate previews for this media type + if (galleryFileAction.mediaTypes[file.mimetype]) { + /* jshint camelcase: false */ + var params = { + width: longEdge, + height: longEdge, + c: file.etag, + requesttoken: oc_requesttoken + }; + imageUrl = galleryFileAction.buildGalleryUrl('preview', '/' + file.id, params); + downloadUrl = imageUrl + '&download'; + + images.push({ + name: file.name, + path: dir + file.name, + fileId: file.id, + mimeType: file.mimetype, + url: imageUrl, + downloadUrl: downloadUrl + }); + } + } + for (i = 0; i < images.length; i++) { + //console.log("Images in the slideshow : ", images[i]); + if (images[i].name === filename) { + start = i; + } + } + + if ($.isEmptyObject(galleryFileAction.slideShow)) { + galleryFileAction.slideShow = new SlideShow($('#slideshow')); + galleryFileAction.slideShow.init(false, null); } + + galleryFileAction.slideShow.setImages(images); + + var scrollTop = galleryFileAction.scrollContainer.scrollTop(); + // This is only called when the slideshow is stopped + galleryFileAction.slideShow.onStop = function () { + // Adding to the history will add a new URL every time the slideshow is launched + /*history.pushState('', document.title, + window.location.pathname + window.location.search + '#');*/ + + FileList.$fileList.one('updated', function () { + galleryFileAction.scrollContainer.scrollTop(scrollTop); + }); + }; + + // This stores the fileslist in the history state + var stateData = { + dir: FileList.getCurrentDirectory() + }; + history.replaceState(stateData, document.title, window.location); + + // This creates a new entry in history for the slideshow. It will + // be updated as the user navigates from picture to picture + history.pushState(null, '', '#loading'); + + galleryFileAction.slideShow.show(start); } - var slideShow = new SlideShow($('#slideshow'), images); - slideShow.onStop = function () { - history.replaceState('', document.title, - window.location.pathname + window.location.search); - }; - slideShow.init(); - slideShow.show(start); - } + }; -}; + window.galleryFileAction = galleryFileAction; +}(OC ,OCA, jQuery, oc_requesttoken)); $(document).ready(function () { + "use strict"; // Deactivates fileaction on public preview page if ($('#imgframe').length > 0) { return true; } + window.galleryFileAction.scrollContainer = $('#app-content'); + if ($('#isPublic').val()) { + window.galleryFileAction.scrollContainer = $(window); + } + // We're also asking for a list of supported media types. // Media files are retrieved through the Files context - var url = galleryFileAction.buildGalleryUrl('config', '', {slideshow: 1}); + var url = window.galleryFileAction.buildGalleryUrl('config', '', {slideshow: 1}); $.getJSON(url).then(function (config) { if (!$.isEmptyObject(config.features)) { - galleryFileAction.config = config.features; + window.galleryFileAction.config = config.features; } - galleryFileAction.register(config.mediatypes); + window.galleryFileAction.register(config.mediatypes); }); }); -- cgit v1.2.3