[Libreoffice-commits] online.git: loleaflet/src

[Henry Castro (via logerrit)]

 loleaflet/src/control/Control.PartsPreview.js |   40 +++++++++++++++-----------
 1 file changed, 24 insertions(+), 16 deletions(-)

New commits:
commit 4db924d47088cb64265d9a0007feeb8707b7a134
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Mon Nov 4 09:23:24 2019 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Mon Nov 4 22:27:01 2019 +0100

    loleaflet: mobile: detect if device is in portrait orientation and
    
    change axis of the scrollbar.
    
    The "mCustomScrollbar" create the scrollbar dynamically, so it is
    necessary to pass the axis property to show horizontal or vertical
    scrollbar. If the device is in portrait orientation change the axis to
    'x'.
    
    Change-Id: Iefca4ca66efaf4f6cd1bfa12ebb70b90329aef73
    Reviewed-on: https://gerrit.libreoffice.org/82015
    Reviewed-by: Henry Castro <hcastro at collabora.com>
    Tested-by: Henry Castro <hcastro at collabora.com>

diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
index 237a16931..1dfa77f84 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -31,7 +31,7 @@ L.Control.PartsPreview = L.Control.extend({
 	onAdd: function (map) {
 		this._previewInitialized = false;
 		this._previewTiles = [];
-		this._direction = window.mode.isMobile() ? 'x' : 'y';
+		this._direction = window.mode.isMobile() && L.DomUtil.isPortrait() ? 'x' : 'y';
 		this._scrollY = 0;
 
 		map.on('updateparts', this._updateDisabled, this);
@@ -41,6 +41,26 @@ L.Control.PartsPreview = L.Control.extend({
 		map.on('deletepage', this._deletePreview, this);
 	},
 
+	createScrollbar: function (axis) {
+		var control = this;
+		if (axis) {
+			this._direction = axis;
+		}
+
+		$(this._partsPreviewCont).mCustomScrollbar({
+			axis: this._direction,
+			theme: 'dark-thick',
+			scrollInertia: 0,
+			alwaysShowScrollbar: 1,
+			callbacks:{
+				whileScrolling: function() {
+					control._onScroll(this);
+				}
+			}
+		});
+		$(this._partsPreviewCont).data('preview', this);
+	},
+
 	_updateDisabled: function (e) {
 		var parts = e.parts;
 		var selectedPart = e.selectedPart;
@@ -58,7 +78,6 @@ L.Control.PartsPreview = L.Control.extend({
 			if (!this._previewInitialized)
 			{
 				// make room for the preview
-				var control = this;
 				var docContainer = this._map.options.documentContainer;
 				if (!L.DomUtil.hasClass(docContainer, 'parts-preview-document')) {
 					L.DomUtil.addClass(docContainer, 'parts-preview-document');
@@ -69,9 +88,10 @@ L.Control.PartsPreview = L.Control.extend({
 				}
 				var previewContBB = this._partsPreviewCont.getBoundingClientRect();
 				var bottomBound;
+
+				this.createScrollbar();
+
 				if (this._direction === 'x') {
-					$(this._container).css({ width: '100%'});
-					$(this._partsPreviewCont).css({ height: this.options.maxHeight + 'px' });
 					this._previewContTop = previewContBB.left;
 					bottomBound = previewContBB.right + previewContBB.width / 2;
 				} else {
@@ -79,18 +99,6 @@ L.Control.PartsPreview = L.Control.extend({
 					bottomBound = previewContBB.bottom + previewContBB.height / 2;
 				}
 
-				$(this._partsPreviewCont).mCustomScrollbar({
-					axis: this._direction,
-					theme: 'dark-thick',
-					scrollInertia: 0,
-					alwaysShowScrollbar: 1,
-					callbacks:{
-						whileScrolling: function() {
-							control._onScroll(this);
-						}
-					}
-				});
-
 				this._map.on('click', function() {
 					this.partsFocused = false;
 				}, this);