From 287741123a8b1571146363f77015f6a2135a5f23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 3 Aug 2018 22:01:04 +0200 Subject: [PATCH 1/4] Rename "#app" to "#app-content" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The standard layout in the server uses "#app-navigation", "#app-content" and "#app-sidebar" as children of "#content"; the navigation and sidebar are not needed, so "#app" is simply renamed to "#app-content". Also note that "#controls" is already the first child of "#app-content", so there is no need to prepend it. In a similar way there are standard CSS rules defined in the server for "#controls" as a child of "#app-content", so no special rules need to be defined here. Signed-off-by: Daniel Calviño Sánchez --- css/share.css | 12 ++++++------ css/styles.css | 9 --------- js/app.js | 1 - js/breadcrumb.js | 2 +- js/gallery.js | 2 +- templates/index.php | 2 +- templates/public.php | 2 +- 7 files changed, 10 insertions(+), 20 deletions(-) diff --git a/css/share.css b/css/share.css index 8ee370746..b9136729a 100644 --- a/css/share.css +++ b/css/share.css @@ -35,9 +35,9 @@ right: 17px; top: 18px; } -#app #dropdown.shareDropDown .shareWithLoading { - /* The "box-sizing" of "#app" descendants is set to "border-box" in the - * server. To have the same size the padding here has to be set to the +#app-content #dropdown.shareDropDown .shareWithLoading { + /* The "box-sizing" of "#app-content" descendants is set to "border-box" in + * the server. To have the same size the padding here has to be set to the * min-width/min-height plus the padding set for the icon in the default * "content-box" sizing. */ padding: 19px; @@ -52,9 +52,9 @@ top: 18px; } -#app #dropdown .shareWithConfirm { - /* The "box-sizing" of "#app" descendants is set to "border-box" in the - * server. To have the same size the padding here has to be set to the +#app-content #dropdown .shareWithConfirm { + /* The "box-sizing" of "#app-content" descendants is set to "border-box" in + * the server. To have the same size the padding here has to be set to the * min-width/min-height plus the padding set for the icon in the default * "content-box" sizing. */ padding: 19px; diff --git a/css/styles.css b/css/styles.css index a7ddc7844..a453e9f27 100644 --- a/css/styles.css +++ b/css/styles.css @@ -78,15 +78,6 @@ div.crumb.last a { list-style: initial; } -#app { - /* #app is the parent of #controls and #gallery, and #controls uses a sticky - * position, so the #app height must contain the full gallery for the - * controls to be stuck while scrolling. The server sets "height: 100%" for - * the app, so that value has to be overriden. */ - height: auto; - width: 100%; -} - #gallery.hascontrols { position: relative; overflow: hidden; diff --git a/js/app.js b/js/app.js index c8530f703..fa8766724 100644 --- a/js/app.js +++ b/js/app.js @@ -12,7 +12,6 @@ /* global OC, $, _, Gallery, SlideShow */ $(document).ready(function () { "use strict"; - $('#controls').prependTo($('#app')); Gallery.utility = new Gallery.Utility(); Gallery.view = new Gallery.View(); Gallery.token = Gallery.utility.getPublicToken(); diff --git a/js/breadcrumb.js b/js/breadcrumb.js index 41dd508d2..4b9b8f808 100644 --- a/js/breadcrumb.js +++ b/js/breadcrumb.js @@ -133,7 +133,7 @@ */ _build: function () { var i, crumbs, name, path, currentAlbum; - var albumName = $('#app').data('albumname'); + var albumName = $('#app-content').data('albumname'); if (!albumName) { albumName = t('gallery', 'Gallery'); } diff --git a/js/gallery.js b/js/gallery.js index ac0062c15..e51bd97f8 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -222,7 +222,7 @@ download: function (event) { event.preventDefault(); - var path = $('#app').data('albumname'); + var path = $('#app-content').data('albumname'); var files = Gallery.currentAlbum; var downloadUrl = Gallery.utility.buildFilesUrl(path, files); diff --git a/templates/index.php b/templates/index.php index c0603a192..a90fdbe10 100644 --- a/templates/index.php +++ b/templates/index.php @@ -4,7 +4,7 @@ */ ?> -
+
-
+
From 527421c2cf88b39594351ed2828923beb1e5cb7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 3 Aug 2018 22:09:32 +0200 Subject: [PATCH 2/4] Fix vertical scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In the layout provided by the server the scrolling container is now the body instead of the content wrapper. Note that the container used in "galleryfileaction.js" was not modified on purpose, as that feature is currently broken; it restores the scroll position when the slideshow is hidden due to the file list being reloaded, but that does not happen in Files app, only in public pages. Thus, in Files app it restores the position as soon as the file list is reloaded after closing the slideshow, so it changes the scroll position, for example, when the directory changes. However, as "#app-content" is used as the scrolling container in that case the scroll position of the body does not actually change. Signed-off-by: Daniel Calviño Sánchez --- js/app.js | 2 +- js/galleryview.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/app.js b/js/app.js index fa8766724..5f33de49a 100644 --- a/js/app.js +++ b/js/app.js @@ -57,7 +57,7 @@ $(document).ready(function () { }); // This block loads new rows - $('html, #content-wrapper').scroll(function () { + $(window).scroll(function () { Gallery.view.loadVisibleRows(Gallery.albumMap[Gallery.currentAlbum]); }); diff --git a/js/galleryview.js b/js/galleryview.js index fa98d63d1..42a99fc18 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -170,7 +170,7 @@ * At this stage, there is no loading taking place, so we can look for new rows */ - var scroll = $('#content-wrapper').scrollTop() + $(window).scrollTop(); + var scroll = $(window).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; From 81934a4902a504d0c902c985f2d803919fc44855 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 3 Aug 2018 22:21:07 +0200 Subject: [PATCH 3/4] Fix element coloured with the custom album background MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Note that the proper replacemente for "#content-wrapper" in this case is "#app-content" instead of "#content" due to "#app-content" having a background colour set in the server, so if it was set to "#content" the custom background would not be visible. Signed-off-by: Daniel Calviño Sánchez --- js/galleryview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/galleryview.js b/js/galleryview.js index 42a99fc18..79527221f 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -490,7 +490,7 @@ * @private */ _setBackgroundColour: function () { - var wrapper = $('#content-wrapper'); + var wrapper = $('#app-content'); var albumDesign = Gallery.config.albumDesign; if (!$.isEmptyObject(albumDesign) && albumDesign.background) { wrapper.css('background-color', albumDesign.background); From 7d1f166f8d4f73abb3790475cb623440a30cfc36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 10 Aug 2018 10:57:40 +0200 Subject: [PATCH 4/4] Hide body scrollbars when the slideshow is shown MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The slideshow is a direct child of the body that is shown in front of the other elements (header, content and footer) and fills the whole viewport by using absolute positioning. However, as the other elements were still shown behind it they affected the size of the body, and as the body is the scrolling container its scroll bars were shown even if the slideshow was shown. Now the content and the footer are hidden when the slideshow is shown (there is no need to hide the header due to its fixed position, which does not affect the body size), so the body gets the size of the slideshow and thus no scroll bars are shown. Note, however, that when those elements are shown again the body scroll bars will be reset to their initial position, so it is necessary to explicitly restore them to their previous value. This is not needed for the scroll bars of other elements, like the navigation bar or the sidebar, as in that case the whole scrolling container was hidden and shown; in the case of the body the scrolling container is kept and what is hidden and shown are their contents, which alters its size and thus its scroll bars. Signed-off-by: Daniel Calviño Sánchez --- js/slideshow.js | 37 ++++++++++++++++++++++++++++++++++++- js/slideshowcontrols.js | 5 ++++- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/js/slideshow.js b/js/slideshow.js index 1ddf367c4..576ce70be 100644 --- a/js/slideshow.js +++ b/js/slideshow.js @@ -61,7 +61,8 @@ this.container, this.zoomablePreview, interval, - features); + features, + this.restoreContent.bind(this)); this.controls.init(); this._initControlsAutoFader(); @@ -93,6 +94,39 @@ this.controls.update(images, autoPlay); }, + /** + * Hides the content behind the slideshow + * + * This should be called when the slideshow is shown. + * + * It hides the content (and, in the public share page, also the footer) + * to ensure that the body size is just the slideshow size and thus no + * scroll bars are shown. + */ + hideContent: function () { + this._savedScrollPosition = $(window).scrollTop(); + + $('#content').hide(); + $('footer').hide(); + }, + + /** + * Shows again the content behind the slideshow + * + * This should be called when the slideshow is hidden. + * + * It restores the content hidden when calling "hideContent", including + * the vertical scrolling position. + */ + restoreContent: function () { + $('#content').show(); + $('footer').show(); + + if (this._savedScrollPosition) { + $(window).scrollTop(this._savedScrollPosition); + } + }, + /** * Launches the slideshow * @@ -104,6 +138,7 @@ this.hideErrorNotification(); this.active = true; this.container.show(); + this.hideContent(); this.container.css('background-position', 'center'); this._hideImage(); this.container.find('.icon-loading-dark').show(); diff --git a/js/slideshowcontrols.js b/js/slideshowcontrols.js index a27452413..a84a4ca34 100644 --- a/js/slideshowcontrols.js +++ b/js/slideshowcontrols.js @@ -20,9 +20,10 @@ * @param {Object} zoomablePreview * @param {number} interval * @param {Array} features + * @param {Function} restoreContentCallback * @constructor */ - var Controls = function (slideshow, container, zoomablePreview, interval, features) { + var Controls = function (slideshow, container, zoomablePreview, interval, features, restoreContentCallback) { this.slideshow = slideshow; this.container = container; this.zoomablePreview = zoomablePreview; @@ -31,6 +32,7 @@ if (features.indexOf('background_colour_toggle') > -1) { this.backgroundToggle = true; } + this.restoreContentCallback = restoreContentCallback; }; Controls.prototype = { @@ -110,6 +112,7 @@ this.zoomablePreview.stop(); this._clearTimeout(); + this.restoreContentCallback(); this.container.hide(); this.active = false; },