[Libreoffice-commits] online.git: Branch 'distro/collabora/co-4-2' - loleaflet/src

[Henry Castro (via logerrit)]

 loleaflet/src/control/Control.PartsPreview.js |   20 ++++++++++++++++----
 loleaflet/src/layer/tile/ImpressTileLayer.js  |   10 ++++++++--
 2 files changed, 24 insertions(+), 6 deletions(-)

New commits:
commit 1b7d5cf92779aa3506c5ac2e9f8526de682dbab7
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Fri Jul 3 16:10:18 2020 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Tue Aug 11 21:46:10 2020 +0200

    loleaflet: fix the orientation only on main custom scroll
    
    Since we are manually changing the CSS class names when
    orientation changes, this is only valid for main custom scrollbar
    because the mobile wizard scrollbar is always in portrait mode.
    
    Change-Id: I0b9e7156dac0e33a6e793c7f6caae2021068f252
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/97900
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Henry Castro <hcastro at collabora.com>
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100552

diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
index e6006a8f3..6143ee28b 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -8,6 +8,10 @@ L.Control.PartsPreview = L.Control.extend({
 	options: {
 		fetchThumbnail: true,
 		autoUpdate: true,
+		imageClass: '',
+		frameClass: '',
+		axis: '',
+		allowOrientation: true,
 		maxWidth: (window.mode.isMobile() || window.mode.isTablet()) ? 60 : 180,
 		maxHeight: (window.mode.isMobile() || window.mode.isTablet()) ? 60 : 180
 	},
@@ -31,7 +35,9 @@ L.Control.PartsPreview = L.Control.extend({
 	onAdd: function (map) {
 		this._previewInitialized = false;
 		this._previewTiles = [];
-		this._direction = window.mode.isMobile() && L.DomUtil.isPortrait() ? 'x' : 'y';
+		this._direction = this.options.allowOrientation ?
+			(!window.mode.isDesktop() && L.DomUtil.isPortrait() ? 'x' : 'y') :
+			this.options.axis;
 		this._scrollY = 0;
 
 		map.on('updateparts', this._updateDisabled, this);
@@ -108,7 +114,8 @@ L.Control.PartsPreview = L.Control.extend({
 				$(this._scrollContainer).css('display', 'inline-table');
 
 				// Add a special frame just as a drop-site for reordering.
-				var frame = L.DomUtil.create('div', 'preview-frame', this._scrollContainer);
+				var frameClass = 'preview-frame ' + this.options.frameClass;
+				var frame = L.DomUtil.create('div', frameClass, this._scrollContainer);
 				this._addDnDHandlers(frame);
 				frame.setAttribute('draggable', false);
 				frame.setAttribute('id', 'first-drop-site');
@@ -142,6 +149,10 @@ L.Control.PartsPreview = L.Control.extend({
 				}
 			}
 
+			if (!this.options.allowOrientation) {
+				return;
+			}
+
 			// update portrait / landscape
 			var removePreviewImg = 'preview-img-portrait';
 			var addPreviewImg = 'preview-img-landscape';
@@ -185,11 +196,12 @@ L.Control.PartsPreview = L.Control.extend({
 	},
 
 	_createPreview: function (i, hashCode, bottomBound) {
-		var frame = L.DomUtil.create('div', 'preview-frame', this._scrollContainer);
+		var frameClass = 'preview-frame ' + this.options.frameClass;
+		var frame = L.DomUtil.create('div', frameClass, this._scrollContainer);
 		this._addDnDHandlers(frame);
 		L.DomUtil.create('span', 'preview-helper', frame);
 
-		var imgClassName = 'preview-img';
+		var imgClassName = 'preview-img ' + this.options.imageClass;
 		var img = L.DomUtil.create('img', imgClassName, frame);
 		img.hash = hashCode;
 		img.src = L.Icon.Default.imagePath + '/preview_placeholder.png';
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index dc7573d28..b4e77f167 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -59,7 +59,13 @@ L.ImpressTileLayer = L.TileLayer.extend({
 			var container = L.DomUtil.createWithId('div', 'mobile-wizard-header', mobileWizard);
 			var preview = L.DomUtil.createWithId('div', 'mobile-slide-sorter', container);
 			L.DomUtil.toBack(container);
-			map.addControl(L.control.partsPreview(container, preview, {fetchThumbnail: false}));
+			map.addControl(L.control.partsPreview(container, preview, {
+				fetchThumbnail: false,
+				allowOrientation: false,
+				axis: 'x',
+				imageClass: 'preview-img-portrait',
+				frameClass: 'preview-frame-portrait'
+			}));
 			L.DomUtil.addClass(mobileWizardContent, 'with-slide-sorter-above');
 		}
 	},
@@ -99,7 +105,7 @@ L.ImpressTileLayer = L.TileLayer.extend({
 			this._map.setView(this._map.getCenter(), this._map.getZoom(), {reset: true});
 		}
 
-		L.DomUtil.updateElementsOrientation(['presentation-controls-wrapper', 'document-container', 'slide-sorter', 'mobile-wizard-header', 'mobile-wizard-content']);
+		L.DomUtil.updateElementsOrientation(['presentation-controls-wrapper', 'document-container', 'slide-sorter']);
 
 		// update parts
 		var visible = L.DomUtil.getStyle(L.DomUtil.get('presentation-controls-wrapper'), 'display');