From 5a9fe69f309476d815f06c758dc055de3c6ed6f3 Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Thu, 9 Apr 2015 15:25:03 +0200 Subject: Cleaned up gallery.view --- js/galleryview.js | 487 +++++++++++++++++++++++++++++------------------------- 1 file changed, 262 insertions(+), 225 deletions(-) (limited to 'js/galleryview.js') diff --git a/js/galleryview.js b/js/galleryview.js index ba9548d4..f6ba8c5c 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -1,243 +1,280 @@ /* global OC, $, _, Gallery, Album, GalleryImage, SlideShow */ -Gallery.view = {}; -Gallery.view.element = null; -Gallery.view.breadcrumb = null; -Gallery.view.requestId = -1; - -/** - * Removes all thumbnails from the view - */ -Gallery.view.clear = function () { - // We want to keep all the events - Gallery.view.element.children().detach(); - Gallery.showLoading(); -}; - -/** - * Populates the view if there are images or albums to show - * - * @param {string} albumPath - */ -Gallery.view.init = function (albumPath) { - if (Gallery.images.length === 0) { - Gallery.showEmpty(); - } else { - // Only do it when the app is initialised - if (Gallery.view.requestId === -1) { - $('#download').click(Gallery.download); - $('#share-button').click(Gallery.share); - $('#album-info-button').click(Gallery.showInfo); - $('#sort-name-button').click(Gallery.sorter); - $('#sort-date-button').click(Gallery.sorter); - } - Gallery.view.viewAlbum(albumPath); - } -}; - -/** - * Starts the slideshow - * - * @param {string} path - * @param {string} albumPath - */ -Gallery.view.startSlideshow = function (path, albumPath) { - var album = Gallery.albumMap[albumPath]; - var images = album.images; - var startImage = Gallery.imageMap[path]; - Gallery.slideShow(images, startImage); -}; - -/** - * Sets up the controls and starts loading the gallery rows - * - * @param {string} albumPath - */ -Gallery.view.viewAlbum = function (albumPath) { - albumPath = albumPath || ''; - if (!Gallery.albumMap[albumPath]) { - return; - } - - Gallery.view.clear(); - if (albumPath !== Gallery.currentAlbum) { - Gallery.view.loadVisibleRows.loading = false; - Gallery.currentAlbum = albumPath; - Gallery.view.shareButtonSetup(albumPath); - Gallery.view.infoButtonSetup(); - - Gallery.view.breadcrumb = new Gallery.Breadcrumb(albumPath); - Gallery.view.breadcrumb.setMaxWidth($(window).width() - 320); - - var currentSort = Gallery.albumConfig.getAlbumSorting(); - Gallery.view.sortControlsSetup(currentSort.type, currentSort.order); - Gallery.albumMap[Gallery.currentAlbum].images.sort(Gallery.sortBy(currentSort.type, - currentSort.order)); - Gallery.albumMap[Gallery.currentAlbum].subAlbums.sort(Gallery.sortBy('name', - currentSort.albumOrder)); - } - - Gallery.albumMap[albumPath].viewedItems = 0; - Gallery.albumMap[albumPath].preloadOffset = 0; - - // Each request has a unique ID, so that we can track which request a row belongs to - Gallery.view.requestId = Math.random(); - Gallery.albumMap[Gallery.currentAlbum].requestId = Gallery.view.requestId; - - // Loading rows without blocking the execution of the rest of the script - setTimeout(function () { - Gallery.view.loadVisibleRows.activeIndex = 0; - Gallery.view.loadVisibleRows(Gallery.albumMap[Gallery.currentAlbum], Gallery.currentAlbum); - }, 0); -}; - -/** - * Shows or hides the share button depending on if we're in a public gallery or not - * - * @param {string} albumPath - */ -Gallery.view.shareButtonSetup = function (albumPath) { - var shareButton = $('button.share'); - if (albumPath === '' || Gallery.token) { - shareButton.hide(); - } else { - shareButton.show(); - } -}; - -/** - * Shows or hides the info button based on the information we've received from the server - */ -Gallery.view.infoButtonSetup = function () { - var infoButton = $('#album-info-button'); - var infoContentElement = $('.album-info-content'); - infoContentElement.slideUp(); - infoContentElement.css('max-height', $(window).height() - 150); - var albumInfo = Gallery.albumConfig.getAlbumInfo(); - if ($.isEmptyObject(albumInfo.description) && - $.isEmptyObject(albumInfo.descriptionLink) && - $.isEmptyObject(albumInfo.copyright) && - $.isEmptyObject(albumInfo.copyrightLink)) { - infoButton.hide(); - } else { - infoButton.show(); - if (albumInfo.inherit === 'yes' && albumInfo.level > 0) { - infoButton.find('span').hide(); - } else { - infoButton.find('span').delay(1000).slideDown(); - } - } -}; - -/** - * Manages the sorting interface - * - * @param {string} sortType - * @param {string} sortOrder - */ -Gallery.view.sortControlsSetup = function (sortType, sortOrder) { - var sortNameButton = $('#sort-name-button'); - var sortDateButton = $('#sort-date-button'); - // namedes, dateasc etc. - var icon = sortType + sortOrder; - - var setButton = function (button, icon, active) { - button.removeClass('sort-inactive'); - if (!active) { - button.addClass('sort-inactive'); - } - button.find('img').attr('src', OC.imagePath(Gallery.appName, icon)); - }; - - if (sortType === 'name') { - setButton(sortNameButton, icon, true); - setButton(sortDateButton, 'dateasc', false); // default icon - } else { - setButton(sortDateButton, icon, true); - setButton(sortNameButton, 'nameasc', false); // default icon - } -}; - -/** - * Loads and displays gallery rows on screen - * - * @param {Album} album - * @param {string} path - * - * @returns {boolean|null|*} - */ -Gallery.view.loadVisibleRows = function (album, path) { - // If the row is still loading (state() = 'pending'), let it load - if (Gallery.view.loadVisibleRows.loading && - Gallery.view.loadVisibleRows.loading.state() !== 'resolved') { - return Gallery.view.loadVisibleRows.loading; - } +(function () { /** - * At this stage, there is no loading taking place (loading = false|null), so we can look for - * new rows + * Builds and updates the Gallery view + * + * @constructor */ + var View = function () { + this.element = $('#gallery'); + this.loadVisibleRows.loading = false; + }; - var scroll = $('#content-wrapper').scrollTop() + $(window).scrollTop(); - // 2 windows worth of rows is the limit from which we need to start loading new rows. As we - // scroll down, it grows - var targetHeight = ($(window).height() * 2) + scroll; - var showRows = function (album) { + View.prototype = { + element: null, + breadcrumb: null, + requestId: -1, - // If we've reached the end of the album, we kill the loader - if (!(album.viewedItems < album.subAlbums.length + album.images.length)) { - Gallery.view.loadVisibleRows.loading = null; - return; - } + /** + * Removes all thumbnails from the view + */ + clear: function () { + // We want to keep all the events + this.element.children().detach(); + Gallery.showLoading(); + }, + + /** + * Populates the view if there are images or albums to show + * + * @param {string} albumPath + */ + init: function (albumPath) { + if (Gallery.images.length === 0) { + Gallery.showEmpty(); + } else { + // Only do it when the app is initialised + if (this.requestId === -1) { + $('#download').click(Gallery.download); + $('#share-button').click(Gallery.share); + $('#album-info-button').click(Gallery.showInfo); + $('#sort-name-button').click(Gallery.sorter); + $('#sort-date-button').click(Gallery.sorter); + } + this.viewAlbum(albumPath); + } + }, + + /** + * Returns the token alowing access to files + * + * @returns {string} + */ + getRequestToken: function () { + var token; + + if (this.element.data('token')) { + token = this.element.data('token'); + } + + if (this.element.data('requesttoken')) { + oc_requesttoken = this.element.data('requesttoken'); + } + + return token; + }, + + /** + * Starts the slideshow + * + * @param {string} path + * @param {string} albumPath + */ + startSlideshow: function (path, albumPath) { + var album = Gallery.albumMap[albumPath]; + var images = album.images; + var startImage = Gallery.imageMap[path]; + Gallery.slideShow(images, startImage); + }, + + /** + * Sets up the controls and starts loading the gallery rows + * + * @param {string} albumPath + */ + viewAlbum: function (albumPath) { + albumPath = albumPath || ''; + if (!Gallery.albumMap[albumPath]) { + return; + } + + this.clear(); + if (albumPath !== Gallery.currentAlbum) { + this.loadVisibleRows.loading = false; + Gallery.currentAlbum = albumPath; + this.shareButtonSetup(albumPath); + this.infoButtonSetup(); + + this.breadcrumb = new Gallery.Breadcrumb(albumPath); + this.breadcrumb.setMaxWidth($(window).width() - 320); + + var currentSort = Gallery.albumConfig.getAlbumSorting(); + this.sortControlsSetup(currentSort.type, currentSort.order); + Gallery.albumMap[Gallery.currentAlbum].images.sort(Gallery.sortBy(currentSort.type, + currentSort.order)); + Gallery.albumMap[Gallery.currentAlbum].subAlbums.sort(Gallery.sortBy('name', + currentSort.albumOrder)); + } + + Gallery.albumMap[albumPath].viewedItems = 0; + Gallery.albumMap[albumPath].preloadOffset = 0; + + // Each request has a unique ID, so that we can track which request a row belongs to + this.requestId = Math.random(); + Gallery.albumMap[Gallery.currentAlbum].requestId = this.requestId; - // Everything is still in sync, since no deferred calls have been placed yet + // Loading rows without blocking the execution of the rest of the script + setTimeout(function () { + this.loadVisibleRows.activeIndex = 0; + this.loadVisibleRows(Gallery.albumMap[Gallery.currentAlbum], + Gallery.currentAlbum); + }.bind(this), 0); + }, - return album.getNextRow($(window).width()).then(function (row) { + /** + * Shows or hides the share button depending on if we're in a public gallery or not + * + * @param {string} albumPath + */ + shareButtonSetup: function (albumPath) { + var shareButton = $('button.share'); + if (albumPath === '' || Gallery.token) { + shareButton.hide(); + } else { + shareButton.show(); + } + }, + + /** + * Shows or hides the info button based on the information we've received from the server + */ + infoButtonSetup: function () { + var infoButton = $('#album-info-button'); + var infoContentElement = $('.album-info-content'); + infoContentElement.slideUp(); + infoContentElement.css('max-height', $(window).height() - 150); + var albumInfo = Gallery.albumConfig.getAlbumInfo(); + if ($.isEmptyObject(albumInfo.description) && + $.isEmptyObject(albumInfo.descriptionLink) && + $.isEmptyObject(albumInfo.copyright) && + $.isEmptyObject(albumInfo.copyrightLink)) { + infoButton.hide(); + } else { + infoButton.show(); + if (albumInfo.inherit === 'yes' && albumInfo.level > 0) { + infoButton.find('span').hide(); + } else { + infoButton.find('span').delay(1000).slideDown(); + } + } + }, + + /** + * Manages the sorting interface + * + * @param {string} sortType + * @param {string} sortOrder + */ + sortControlsSetup: function (sortType, sortOrder) { + var sortNameButton = $('#sort-name-button'); + var sortDateButton = $('#sort-date-button'); + // namedes, dateasc etc. + var icon = sortType + sortOrder; + + var setButton = function (button, icon, active) { + button.removeClass('sort-inactive'); + if (!active) { + button.addClass('sort-inactive'); + } + button.find('img').attr('src', OC.imagePath(Gallery.appName, icon)); + }; + + if (sortType === 'name') { + setButton(sortNameButton, icon, true); + setButton(sortDateButton, 'dateasc', false); // default icon + } else { + setButton(sortDateButton, icon, true); + setButton(sortNameButton, 'nameasc', false); // default icon + } + }, + + /** + * Loads and displays gallery rows on screen + * + * @param {Album} album + * @param {string} path + * + * @returns {boolean|null|*} + */ + loadVisibleRows: function (album, path) { + var view = this; + // If the row is still loading (state() = 'pending'), let it load + if (this.loadVisibleRows.loading && + this.loadVisibleRows.loading.state() !== 'resolved') { + return this.loadVisibleRows.loading; + } /** - * At this stage, the row has a width and contains references to images based on - * information available when making the request, but this information may have changed - * while we were receiving thumbnails for the row + * At this stage, there is no loading taking place (loading = false|null), so we can + * look for new rows */ - if (Gallery.view.requestId === row.requestId) { - return row.getDom().then(function (dom) { - - // defer removal of loading class to trigger CSS3 animation - _.defer(function () { - dom.removeClass('loading'); - }); - if (Gallery.currentAlbum !== path) { - Gallery.view.loadVisibleRows.loading = null; - return; //throw away the row if the user has navigated away in the - // meantime - } - if (Gallery.view.element.length === 1) { - Gallery.showNormal(); - } + var scroll = $('#content-wrapper').scrollTop() + $(window).scrollTop(); + // 2 windows worth of rows is the limit from which we need to start loading new rows. + // As we scroll down, it grows + var targetHeight = ($(window).height() * 2) + scroll; + var showRows = function (album) { - Gallery.view.element.append(dom); + // If we've reached the end of the album, we kill the loader + if (!(album.viewedItems < album.subAlbums.length + album.images.length)) { + view.loadVisibleRows.loading = null; + return; + } - if (album.viewedItems < album.subAlbums.length + album.images.length && - Gallery.view.element.height() < targetHeight) { - return showRows(album); - } + // Everything is still in sync, since no deferred calls have been placed yet + + return album.getNextRow($(window).width()).then(function (row) { + + /** + * At this stage, the row has a width and contains references to images based + * on + * information available when making the request, but this information may have + * changed while we were receiving thumbnails for the row + */ + + if (view.requestId === row.requestId) { + return row.getDom().then(function (dom) { + + // defer removal of loading class to trigger CSS3 animation + _.defer(function () { + dom.removeClass('loading'); + }); + if (Gallery.currentAlbum !== path) { + view.loadVisibleRows.loading = null; + return; //throw away the row if the user has navigated away in the + // meantime + } + if (view.element.length === 1) { + Gallery.showNormal(); + } - // No more rows to load at the moment - Gallery.view.loadVisibleRows.loading = null; - }, function () { - // Something went wrong, so kill the loader - Gallery.view.loadVisibleRows.loading = null; + view.element.append(dom); + + if (album.viewedItems < album.subAlbums.length + album.images.length && + view.element.height() < targetHeight) { + return showRows(album); + } + + // No more rows to load at the moment + view.loadVisibleRows.loading = null; + }, function () { + // Something went wrong, so kill the loader + view.loadVisibleRows.loading = null; + }); + } else { + // This is the safest way to do things + view.viewAlbum(Gallery.currentAlbum); + } }); - } else { - // This is the safest way to do things - Gallery.view.viewAlbum(Gallery.currentAlbum); + }; + if (this.element.height() < targetHeight) { + this.loadVisibleRows.loading = true; + this.loadVisibleRows.loading = showRows(album); + return this.loadVisibleRows.loading; } - }); + } }; - if (Gallery.view.element.height() < targetHeight) { - Gallery.view.loadVisibleRows.loading = true; - Gallery.view.loadVisibleRows.loading = showRows(album); - return Gallery.view.loadVisibleRows.loading; - } -}; -Gallery.view.loadVisibleRows.loading = false; + + Gallery.View = View; +})(); -- cgit v1.2.3