[Libreoffice-commits] online.git: 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 982a56e54a9fab563a33b66c2e3d6d850f9f8101
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 Jul 7 17:29: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>

diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
index 5e62fc832..e5f1676df 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);
@@ -107,7 +113,8 @@ L.Control.PartsPreview = L.Control.extend({
 				this._scrollContainer = $(this._partsPreviewCont).find('.mCSB_container').get(0);
 
 				// 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);
 
@@ -140,6 +147,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';
@@ -183,11 +194,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 5063cc817..af7e3f34a 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');