opensourcemirror
/
nextcloud-gallery
mirror of https://github.com/nextcloud/gallery.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Hide body scrollbars when the slideshow is shown 

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 <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2018-08-10 10:57:40 +02:00
parent 81934a4902
commit 7d1f166f8d
2 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
js/slideshow.js
View File

@ -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();

5
js/slideshowcontrols.js
View File

@ -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;
},