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

Szymon KÅ‚os (via logerrit) logerrit at kemper.freedesktop.org
Fri Apr 17 10:12:31 UTC 2020


 loleaflet/Makefile.am                        |    2 
 loleaflet/src/control/Control.StatusBar.js   |   19 ----
 loleaflet/src/control/Control.Toolbar.js     |   43 ----------
 loleaflet/src/control/Control.UIManager.js   |  110 +++++++++++++++++++++++++++
 loleaflet/src/layer/tile/CalcTileLayer.js    |   38 ---------
 loleaflet/src/layer/tile/ImpressTileLayer.js |   37 ---------
 loleaflet/src/layer/tile/WriterTileLayer.js  |   14 ---
 loleaflet/src/main.js                        |   24 +----
 loleaflet/src/map/Map.js                     |    6 +
 9 files changed, 136 insertions(+), 157 deletions(-)

New commits:
commit 75e11420d51e3f53491a10f9933503c45fac19d6
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Thu Apr 16 18:21:44 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Fri Apr 17 12:12:13 2020 +0200

    Introduce UIManager
    
    Change-Id: I944622a352aae7951f3e69286bb163645fa23276
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92405
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index 6c10bc441..87286367f 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -272,6 +272,7 @@ LOLEAFLET_JS =\
 	src/control/Control.PresentationBar.js \
 	src/control/Control.SigningBar.js \
 	src/control/Control.TopToolbar.js \
+	src/control/Control.UIManager.js \
 	src/control/Control.Layers.js \
 	src/control/Search.js \
 	src/control/Permission.js \
@@ -548,6 +549,7 @@ pot:
 		src/control/Control.Toolbar.js \
 		src/control/Control.TopToolbar.js \
 		src/control/Control.UserList.js \
+		src/control/Control.UIManager.js \
 		src/control/Ruler.js \
 		src/control/Signing.js \
 		src/control/Toolbar.js \
diff --git a/loleaflet/src/control/Control.StatusBar.js b/loleaflet/src/control/Control.StatusBar.js
index ed5eb0353..2f1a7a44f 100644
--- a/loleaflet/src/control/Control.StatusBar.js
+++ b/loleaflet/src/control/Control.StatusBar.js
@@ -3,7 +3,7 @@
  * L.Control.StatusBar
  */
 
-/* global $ w2ui w2utils _ _UNO */
+/* global $ w2ui _ _UNO */
 L.Control.StatusBar = L.Control.extend({
 
 	initialize: function () {
@@ -11,10 +11,10 @@ L.Control.StatusBar = L.Control.extend({
 
 	onAdd: function (map) {
 		this.map = map;
-
 		map.on('doclayerinit', this.onDocLayerInit, this);
 		map.on('commandvalues', this.onCommandValues, this);
 		map.on('commandstatechanged', this.onCommandStateChanged, this);
+		this.create();
 	},
 
 	hideTooltip: function(toolbar, id) {
@@ -221,6 +221,8 @@ L.Control.StatusBar = L.Control.extend({
 					window.setupSearchInput();
 				}
 			});
+
+			toolbar.show();
 		}
 
 		toolbar.bind('touchstart', function() {
@@ -244,19 +246,6 @@ L.Control.StatusBar = L.Control.extend({
 			}
 		});
 
-		if (!window.mode.isMobile()) {	
-			this.map.on('showbusy', function(e) {
-				w2utils.lock(w2ui['actionbar'].box, e.label, true);
-			});
-	
-			this.map.on('hidebusy', function() {
-				// If locked, unlock
-				if (w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') {
-					w2utils.unlock(w2ui['actionbar'].box);
-				}
-			});
-		}
-
 		this.map.on('zoomend', function () {
 			var zoomPercent = 100;
 			var zoomSelected = null;
diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js
index 005fbd21c..ece25efcb 100644
--- a/loleaflet/src/control/Control.Toolbar.js
+++ b/loleaflet/src/control/Control.Toolbar.js
@@ -9,15 +9,6 @@
 
 var map;
 
-function resizeToolbar() {
-	if ($(window).width() !== map.getSize().x) {
-		var toolbarUp = w2ui['editbar'];
-		var statusbar = w2ui['actionbar'];
-		toolbarUp.resize();
-		statusbar.resize();
-	}
-}
-
 function _cancelSearch() {
 	var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : w2ui['actionbar'];
 	var searchInput = L.DomUtil.get('search-input');
@@ -590,22 +581,6 @@ function hideTooltip(toolbar, id) {
 	}
 }
 
-function createToolbar() {
-
-	if (window.mode.isMobile()) {
-		$('#toolbar-search').hide();
-		$('#mobile-edit-button').show();
-	} else {
-		$('#toolbar-down').show();
-		initNormalToolbar();
-	}
-}
-
-function initNormalToolbar() {
-	map.addControl(L.control.topToolbar());
-	map.addControl(L.control.signingBar());
-}
-
 function setupSearchInput() {
 	$('#search-input').off('input', onSearchInput).on('input', onSearchInput);
 	$('#search-input').off('keydown', onSearchKeyDown).on('keydown', onSearchKeyDown);
@@ -1062,18 +1037,6 @@ function onUpdatePermission(e) {
 			}
 		}
 	}
-
-	if (e.perm === 'edit') {
-		if (window.mode.isMobile()) {
-			$('#toolbar-down').show();
-		}
-	}
-	else if (window.mode.isMobile()) {
-		$('#toolbar-down').hide();
-	}
-
-	// We've resized the document container.
-	map.invalidateSize();
 }
 
 function editorUpdate(e) { // eslint-disable-line no-unused-vars
@@ -1103,10 +1066,6 @@ function editorUpdate(e) { // eslint-disable-line no-unused-vars
 
 global.editorUpdate = editorUpdate;
 
-$(window).resize(function() {
-	resizeToolbar();
-});
-
 $(document).ready(function() {
 	// Attach insert file action
 	$('#insertgraphic').on('change', onInsertFile);
@@ -1116,8 +1075,6 @@ $(document).ready(function() {
 function setupToolbar(e) {
 	map = e;
 
-	createToolbar();
-
 	map.on('focussearch', function () {
 		var entry = L.DomUtil.get('search-input');
 		entry.focus();
diff --git a/loleaflet/src/control/Control.UIManager.js b/loleaflet/src/control/Control.UIManager.js
new file mode 100644
index 000000000..a75481b9f
--- /dev/null
+++ b/loleaflet/src/control/Control.UIManager.js
@@ -0,0 +1,110 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * L.Control.UIManager
+ */
+
+/* global $ setupToolbar w2ui w2utils */
+L.Control.UIManager = L.Control.extend({
+	onAdd: function (map) {
+		this.map = map;
+
+		map.on('updatepermission', this.onUpdatePermission, this);
+	},
+
+	initializeBasicUI: function() {
+		var that = this;
+
+		var menubar = L.control.menubar();
+		this.map.menubar = menubar;
+		this.map.addControl(menubar);
+
+		this.map.addControl(L.control.statusBar());
+
+		if (window.mode.isMobile()) {
+			$('#mobile-edit-button').show();
+		} else {
+			this.map.addControl(L.control.topToolbar());
+			this.map.addControl(L.control.signingBar());
+		}
+
+		setupToolbar(this.map);
+
+		this.map.addControl(L.control.scroll());
+		this.map.addControl(L.control.alertDialog());
+		this.map.addControl(L.control.mobileWizard());
+		this.map.addControl(L.control.languageDialog());
+		this.map.dialog = L.control.lokDialog();
+		this.map.addControl(this.map.dialog);
+		this.map.addControl(L.control.contextMenu());
+		this.map.addControl(L.control.infobar());
+		this.map.addControl(L.control.userList());
+
+		this.map.on('showbusy', function(e) {
+			if (w2ui['actionbar'])
+				w2utils.lock(w2ui['actionbar'].box, e.label, true);
+		});
+
+		this.map.on('hidebusy', function() {
+			// If locked, unlock
+			if (w2ui['actionbar'] && w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') {
+				w2utils.unlock(w2ui['actionbar'].box);
+			}
+		});
+
+		$(window).resize(function() {
+			that.resizeToolbars();
+		});
+	},
+
+	initializeSpecializedUI: function(docType) {
+		var isDesktop = window.mode.isDesktop();
+
+		if (window.mode.isMobile()) {
+			this.map.addControl(L.control.mobileBottomBar(docType));
+			this.map.addControl(L.control.mobileTopBar(docType));
+			this.map.addControl(L.control.searchBar());
+		}
+
+		if (docType === 'spreadsheet') {
+			this.map.addControl(L.control.sheetsBar({shownavigation: isDesktop}));
+			this.map.addControl(L.control.formulaBar({showfunctionwizard: isDesktop}));
+		}
+
+		if (isDesktop && docType === 'presentation') {
+			this.map.addControl(L.control.presentationBar());
+		}
+
+		if (window.mode.isMobile() || window.mode.isTablet()) {
+			this.map.on('updatetoolbarcommandvalues', function() {
+				w2ui['editbar'].refresh();
+			});
+		}
+	},
+
+	onUpdatePermission: function(e) {
+		if (window.mode.isMobile()) {
+			if (e.perm === 'edit') {
+				$('#toolbar-down').show();
+			}
+			else {
+				$('#toolbar-down').hide();
+			}
+		}
+
+		// We've resized the document container.
+		this.map.invalidateSize();
+	},
+
+	resizeToolbars: function() {
+		if ($(window).width() !== this.map.getSize().x) {
+			var toolbarUp = w2ui['editbar'];
+			var statusbar = w2ui['actionbar'];
+			toolbarUp.resize();
+			statusbar.resize();
+		}
+	}
+});
+
+L.control.uiManager = function () {
+	return new L.Control.UIManager();
+};
diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index 658b6362d..1e82f2598 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -3,7 +3,7 @@
  * Calc tile layer is used to display a spreadsheet document
  */
 
-/* global w2ui w2utils */
+/* global */
 L.CalcTileLayer = L.TileLayer.extend({
 	STD_EXTRA_WIDTH: 113, /* 2mm extra for optimal width,
 							  * 0.1986cm with TeX points,
@@ -51,12 +51,7 @@ L.CalcTileLayer = L.TileLayer.extend({
 		map.on('AnnotationReply', this._onAnnotationReply, this);
 		map.on('AnnotationSave', this._onAnnotationSave, this);
 
-		if (window.mode.isMobile() || window.mode.isTablet()) {
-			this.onMobileInit(map);
-		}
-
-		map.addControl(L.control.sheetsBar({shownavigation: true}));
-		map.addControl(L.control.formulaBar({showfunctionwizard: true}));
+		map.uiManager.initializeSpecializedUI('spreadsheet');
 	},
 
 	clearAnnotations: function () {
@@ -74,35 +69,6 @@ L.CalcTileLayer = L.TileLayer.extend({
 		this._annotations = {};
 	},
 
-	onMobileInit: function (map) {
-		map.addControl(L.control.mobileTopBar('spreadsheet'));
-
-		map.addControl(L.control.formulaBar({showfunctionwizard: false}));
-
-		map.addControl(L.control.sheetsBar({shownavigation: false}));
-
-		map.addControl(L.control.mobileBottomBar('spreadsheet'));
-
-		map.addControl(L.control.searchBar());
-
-		map.on('updatetoolbarcommandvalues', function() {
-			w2ui['editbar'].refresh();
-		});
-
-		map.on('showbusy', function(e) {
-			w2utils.lock(w2ui['actionbar'].box, e.label, true);
-		});
-
-		map.on('hidebusy', function() {
-			// If locked, unlock
-			if (w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') {
-				w2utils.unlock(w2ui['actionbar'].box);
-			}
-		});
-
-		map.on('updatepermission', window.onUpdatePermission);
-	},
-
 	onAnnotationModify: function (annotation) {
 		annotation.edit();
 		annotation.focus();
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 933a89c77..cc02e444d 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -3,7 +3,7 @@
  * Impress tile layer is used to display a presentation document
  */
 
-/* global $ w2ui w2utils L */
+/* global $ L */
 
 L.ImpressTileLayer = L.TileLayer.extend({
 	extraSize: L.point(290, 0),
@@ -50,8 +50,10 @@ L.ImpressTileLayer = L.TileLayer.extend({
 		map.on('AnnotationScrollDown', this.onAnnotationScrollDown, this);
 		map.on('orientationchange', this.onOrientationChange, this);
 		map.on('resize', this.onResize, this);
+
+		map.uiManager.initializeSpecializedUI('presentation');
+
 		if (window.mode.isMobile()) {
-			this.onMobileInit(map);
 			L.Control.MobileWizard.mergeOptions({maxHeight: '55%'});
 			var mobileWizard = L.DomUtil.get('mobile-wizard');
 			var mobileWizardContent = L.DomUtil.get('mobile-wizard-content');
@@ -60,8 +62,6 @@ L.ImpressTileLayer = L.TileLayer.extend({
 			L.DomUtil.toBack(container);
 			map.addControl(L.control.partsPreview(container, preview, {fetchThumbnail: false}));
 			L.DomUtil.addClass(mobileWizardContent, 'with-slide-sorter-above');
-		} else {
-			this.onDesktopAndTabletInit(map);
 		}
 	},
 
@@ -115,35 +115,6 @@ L.ImpressTileLayer = L.TileLayer.extend({
 		}
 	},
 
-	onDesktopAndTabletInit: function(map) {
-		map.addControl(L.control.presentationBar());
-	},
-
-	onMobileInit: function (map) {
-		map.addControl(L.control.mobileTopBar('presentation'));
-
-		map.addControl(L.control.mobileBottomBar('presentation'));
-
-		map.addControl(L.control.searchBar());
-
-		map.on('updatetoolbarcommandvalues', function() {
-			w2ui['editbar'].refresh();
-		});
-
-		map.on('showbusy', function(e) {
-			w2utils.lock(w2ui['actionbar'].box, e.label, true);
-		});
-
-		map.on('hidebusy', function() {
-			// If locked, unlock
-			if (w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') {
-				w2utils.unlock(w2ui['actionbar'].box);
-			}
-		});
-
-		map.on('updatepermission', window.onUpdatePermission);
-	},
-
 	onAdd: function (map) {
 		L.TileLayer.prototype.onAdd.call(this, map);
 		this._annotations = {};
diff --git a/loleaflet/src/layer/tile/WriterTileLayer.js b/loleaflet/src/layer/tile/WriterTileLayer.js
index 72e7561fb..b41b7e58d 100644
--- a/loleaflet/src/layer/tile/WriterTileLayer.js
+++ b/loleaflet/src/layer/tile/WriterTileLayer.js
@@ -39,9 +39,7 @@ L.WriterTileLayer = L.TileLayer.extend({
 	},
 
 	beforeAdd: function (map) {
-		if (window.mode.isMobile() || window.mode.isTablet()) {
-			this.onMobileInit(map);
-		}
+		map.uiManager.initializeSpecializedUI('text');
 	},
 
 	onAdd: function (map) {
@@ -51,16 +49,6 @@ L.WriterTileLayer = L.TileLayer.extend({
 		map.on('updatemaxbounds', this._onUpdateMaxBounds, this);
 	},
 
-	onMobileInit: function (map) {
-		map.addControl(L.control.mobileBottomBar('text'));
-
-		map.addControl(L.control.mobileTopBar('text'));
-
-		map.addControl(L.control.searchBar());
-
-		map.on('updatepermission', window.onUpdatePermission);
-	},
-
 	onAnnotationModify: function (annotation) {
 		if (window.mode.isMobile() || window.mode.isTablet()) {
 			var that = this;
diff --git a/loleaflet/src/main.js b/loleaflet/src/main.js
index a291de1c8..7f8fbb267 100644
--- a/loleaflet/src/main.js
+++ b/loleaflet/src/main.js
@@ -1,6 +1,6 @@
 /* -*- js-indent-level: 8 -*- */
 /* global errorMessages getParameterByName accessToken accessTokenTTL accessHeader reuseCookies */
-/* global vex host serviceRoot idleTimeoutSecs outOfFocusTimeoutSecs setupToolbar*/
+/* global vex host serviceRoot idleTimeoutSecs outOfFocusTimeoutSecs*/
 /*eslint indent: [error, "tab", { "outerIIFEBody": 0 }]*/
 (function (global) {
 
@@ -68,23 +68,13 @@ var map = L.map('map', {
 });
 
 ////// Controls /////
-var menubar = L.control.menubar();
-map.menubar = menubar;
-map.addControl(menubar);
-var statusbar = L.control.statusBar();
-map.addControl(statusbar);
-statusbar.create();
-setupToolbar(map);
-map.addControl(L.control.scroll());
-map.addControl(L.control.alertDialog());
-map.addControl(L.control.mobileWizard());
-map.addControl(L.control.languageDialog());
-map.dialog = L.control.lokDialog();
-map.addControl(map.dialog);
-map.addControl(L.control.contextMenu());
-map.addControl(L.control.infobar());
+
+map.uiManager = L.control.uiManager();
+map.addControl(map.uiManager);
+
+map.uiManager.initializeBasicUI();
+
 map.loadDocument(global.socket);
-map.addControl(L.control.userList());
 
 global.socket = map._socket;
 window.addEventListener('beforeunload', function () {
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index ca4550593..b333774da 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -53,6 +53,12 @@ L.Map = L.Evented.extend({
 		cursorURL: 'images/cursors'
 	},
 
+	// uiManager is set in main.js
+	uiManager: null,
+
+	// Control.LokDialog instance, is set in Control.UIManager.js
+	dialog: null,
+
 	lastActiveTime: Date.now(),
 
 	initialize: function (id, options) { // (HTMLElement or String, Object)


More information about the Libreoffice-commits mailing list