jsdialog: create base class for toolbars

This allows to share code and provide unified interface
for functionality like: show/hide/enable/disable/insert item.
Also restricted mode is supported for all the items.

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I4a4e7ea43a993751b28f685544827d00b2b3668f

browser/Makefile.am

@@ -328,6 +328,7 @@ COOL_JS_LST =\
 	src/control/Control.LokDialog.js \
 	src/control/Control.AlertDialog.js \
 	src/control/ColorPicker.ts \
+	src/control/jsdialog/Component.Toolbar.ts \
 	src/control/jsdialog/Definitions.Menu.ts \
 	src/control/jsdialog/Util.Dropdown.js \
 	src/control/jsdialog/Util.Events.ts \
@@ -789,6 +790,7 @@ pot:
 		src/control/Ruler.js \
 		src/control/Signing.js \
 		src/control/Toolbar.js \
+		src/control/jsdialog/Component.Toolbar.ts \
 		src/control/jsdialog/Definitions.Menu.ts \
 		src/control/jsdialog/Util.Dropdown.js \
 		src/control/jsdialog/Util.Events.ts \

browser/src/control/Control.MobileBottomBar.js

@@ -12,23 +12,10 @@
  * JSDialog.MobileBottomBar - component of bottom bar on mobile
  */
 
-/* global $ JSDialog app _ _UNO */
-class MobileBottomBar {
+/* global JSDialog app _ _UNO */
+class MobileBottomBar extends JSDialog.Toolbar {
 	constructor(map) {
-		this.map = map;
-		this.docType = map.getDocType();
-		this.parentContainer = document.getElementById('toolbar-down');
-		L.DomUtil.addClass(this.parentContainer, 'ui-toolbar');
-
-		this.builder = new L.control.jsDialogBuilder(
-			{
-				mobileWizard: this,
-				map: this.map,
-				cssClass: 'jsdialog',
-				noLabelsForUnoButtons: true
-			});
-
-		this.create();
+		super(map, 'toolbar-down')
 
 		map.on('commandstatechanged', window.onCommandStateChanged);
 		map.on('updatetoolbarcommandvalues', window.onCommandStateChanged);
@@ -286,64 +273,6 @@ class MobileBottomBar {
 		}
 	}
 
-	create() {
-		var toolItems = this.getToolItems();
-		this.builder.build(this.parentContainer, toolItems);
-
-		if (this.map.isRestrictedUser()) {
-			for (var i = 0; i < toolItems.length; i++) {
-				var it = toolItems[i];
-				this.map.hideRestrictedItems(it, $('#' + it.id)[0], $('#' + it.id)[0]);
-			}
-		}
-
-		if (this.map.isLockedUser()) {
-			for (var i = 0; i < toolItems.length; i++) {
-				var it = toolItems[i];
-				this.map.disableLockedItem(it, $('#' + it.id)[0], $('#'+ it.id)[0]);
-			}
-		}
-
-		JSDialog.MakeScrollable(this.parentContainer, this.parentContainer.querySelector('div'));
-		JSDialog.RefreshScrollables();
-	}
-
-	showItem(command, show) {
-		if (!command)
-			return;
-
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': show ? 'show' : 'hide'
-		});
-
-		JSDialog.RefreshScrollables();
-	}
-
-	// jscpd:ignore-start
-	enableItem(command, enable) {
-		if (!command)
-			return;
-
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': enable ? 'enable' : 'disable'
-		});
-	}
-
-	selectItem(command, select) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': select ? 'select' : 'unselect'
-		});
-	}
-
-	updateItem(data) {
-		this.builder.updateWidget(this.parentContainer, data);
-		JSDialog.RefreshScrollables();
-	}
-	// jscpd:ignore-end
-
 	onContextChange(event) {
 		window.updateVisibilityForToolbar(app.map.mobileBottomBar, event.context);
 	}

browser/src/control/Control.MobileSearchBar.ts

@@ -13,41 +13,12 @@
  */
 
 /* global _ _UNO */
-class MobileSearchBar {
-	map: any;
-	builder: any;
-	parentContainer: Element;
-
+class MobileSearchBar extends Toolbar {
 	constructor(map: any) {
-		this.map = map;
-		this.parentContainer = document.getElementById('toolbar-search');
-		L.DomUtil.addClass(this.parentContainer, 'ui-toolbar');
-
-		this.builder = new L.control.jsDialogBuilder({
-			mobileWizard: this,
-			map: this.map,
-			cssClass: 'jsdialog',
-			noLabelsForUnoButtons: true,
-		});
-
-		this.create();
+		super(map, 'toolbar-search');
 	}
 
-	showItem(command: string, show: boolean) {
-		this.builder.executeAction(this.parentContainer, {
-			control_id: command,
-			action_type: show ? 'show' : 'hide',
-		});
-	}
-
-	enableItem(command: string, enable: boolean) {
-		this.builder.executeAction(this.parentContainer, {
-			control_id: command,
-			action_type: enable ? 'enable' : 'disable',
-		});
-	}
-
-	getToolItems() {
+	getToolItems(): Array<ToolbarItem> {
 		return [
 			{
 				type: 'customtoolitem',

browser/src/control/Control.MobileTopBar.js

@@ -13,22 +13,9 @@
  */
 
 /* global JSDialog $ _UNO _ app */
-class MobileTopBar {
+class MobileTopBar extends JSDialog.Toolbar {
 	constructor(map) {
-		this.map = map;
-		this.docType = map.getDocType();
-		this.parentContainer = document.getElementById('toolbar-up');
-		L.DomUtil.addClass(this.parentContainer, 'ui-toolbar');
-
-		this.builder = new L.control.jsDialogBuilder(
-			{
-				mobileWizard: this,
-				map: this.map,
-				cssClass: 'jsdialog',
-				noLabelsForUnoButtons: true
-			});
-
-		this.create();
+		super(map, 'toolbar-up');
 
 		map.on('updatepermission', this.onUpdatePermission, this);
 		map.on('commandstatechanged', this.onCommandStateChanged, this);
@@ -102,32 +89,6 @@ class MobileTopBar {
 		this.builder.build(this.parentContainer, items);
 	}
 
-	showItem(command, show) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': show ? 'show' : 'hide'
-		});
-	}
-
-	enableItem(command, enable) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': enable ? 'enable' : 'disable'
-		});
-	}
-
-	showSigningItem(icon, text) {
-		this.builder.updateWidget(this.parentContainer,
-			{type: 'toolitem', id: 'signstatus', command: '.uno:Signature', noLabel: true, w2icon: icon, text: text ? text : _UNO('.uno:Signature')});
-	}
-
-	selectItem(command, select) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': select ? 'select' : 'unselect'
-		});
-	}
-
 	onUpdatePermission(e) {
 		var toolbarButtons = ['next', 'prev', 'mobile_wizard', 'insertion_mobile_wizard', 'comment_wizard'];
 		if (e.perm === 'edit') {

browser/src/control/Control.StatusBar.js

@@ -13,22 +13,9 @@
  */
 
 /* global $ app JSDialog _ _UNO */
-class StatusBar {
-
+class StatusBar extends JSDialog.Toolbar {
 	constructor(map) {
-		this.map = map;
-		this.parentContainer = document.getElementById('toolbar-down');
-		L.DomUtil.addClass(this.parentContainer, 'ui-toolbar');
-		this.builder = new L.control.jsDialogBuilder(
-			{
-				mobileWizard: this,
-				map: this.map,
-				cssClass: 'jsdialog',
-				noLabelsForUnoButtons: true,
-				callback: this.callback.bind(this)
-			});
-
-		this.create();
+		super(map, 'toolbar-down');
 
 		map.on('doclayerinit', this.onDocLayerInit, this);
 		map.on('languagesupdated', this.onLanguagesUpdated, this);
@@ -40,15 +27,6 @@ class StatusBar {
 		map.on('zoomend', this.onZoomEnd, this);
 	}
 
-	hideTooltip(toolbar, id) {
-		if (toolbar.touchStarted) {
-			setTimeout(function() {
-				toolbar.tooltipHide(id, {});
-			}, 5000);
-			toolbar.touchStarted = false;
-		}
-	}
-
 	localizeStateTableCell(text) {
 		var stateArray = text.split(';');
 		var stateArrayLength = stateArray.length;
@@ -369,25 +347,6 @@ class StatusBar {
 		this.parentContainer.style.display = 'none';
 	}
 
-	// TODO: make base class for toolbar components
-	// jscpd:ignore-start
-	enableItem(command, enable) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': enable ? 'enable' : 'disable'
-		});
-	}
-
-	showItem(command, show) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': show ? 'show' : 'hide'
-		});
-
-		JSDialog.RefreshScrollables();
-	}
-	// jscpd:ignore-end
-
 	updateHtmlItem(id, text) {
 		this.builder.updateWidget(this.parentContainer, {
 			id: id,

browser/src/control/Control.TopToolbar.js

@@ -13,22 +13,10 @@
  */
 
 /* global $ app JSDialog _ _UNO */
-class TopToolbar {
+class TopToolbar extends JSDialog.Toolbar {
 	constructor(map) {
-		this.map = map;
+		super(map, 'toolbar-up');
 		this.stylesSelectValue = null;
-		this.customItems = [];
-
-		this.builder = new L.control.jsDialogBuilder(
-			{
-				mobileWizard: this,
-				map: this.map,
-				cssClass: 'jsdialog',
-				noLabelsForUnoButtons: true,
-				callback: this.callback.bind(this)
-			});
-
-		this.create();
 
 		map.on('doclayerinit', this.onDocLayerInit, this);
 		map.on('updatepermission', this.onUpdatePermission, this);
@@ -238,45 +226,6 @@ class TopToolbar {
 		}
 	}
 
-	insertItem(beforeId, items) {
-		this.customItems.push({beforeId: beforeId, items: items});
-		this.create();
-	}
-
-	// jscpd:ignore-start
-	enableItem(command, enable) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': enable ? 'enable' : 'disable'
-		});
-	}
-
-	selectItem(command, select) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': select ? 'select' : 'unselect'
-		});
-	}
-
-	updateItem(data) {
-		this.builder.updateWidget(this.parentContainer, data);
-		JSDialog.RefreshScrollables();
-	}
-	// jscpd:ignore-end
-
-	hasItem(id) {
-		return this.getToolItems().filter((item) => { return item.id === id; }).length > 0;
-	}
-
-	showItem(command, show) {
-		this.builder.executeAction(this.parentContainer, {
-			'control_id': command,
-			'action_type': show ? 'show' : 'hide'
-		});
-
-		JSDialog.RefreshScrollables();
-	}
-
 	create() {
 		this.reset();
 

browser/src/control/jsdialog/Component.Toolbar.ts

@@ -0,0 +1,137 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Component.Toolbar - base class for toolbars
+ */
+
+declare var JSDialog: any;
+
+type ToolbarItem = any;
+
+class Toolbar {
+	protected map: any;
+	protected docType: string;
+	protected builder: any;
+	protected callback: JSDialogCallback;
+	protected toolbarElementId: string;
+	protected parentContainer: Element;
+	protected customItems: Array<ToolbarItem>;
+
+	constructor(map: any, toolbarElementId: string) {
+		this.map = map;
+		this.docType = map.getDocType();
+		this.customItems = [];
+		this.toolbarElementId = toolbarElementId;
+
+		this.builder = new L.control.jsDialogBuilder({
+			mobileWizard: this,
+			map: this.map,
+			cssClass: 'jsdialog',
+			noLabelsForUnoButtons: true,
+			callback: this.callback ? this.callback.bind(this) : undefined,
+		});
+
+		this.reset();
+		this.create();
+	}
+
+	getToolItems(): Array<ToolbarItem> {
+		return [];
+	}
+
+	reset() {
+		this.parentContainer = L.DomUtil.get(this.toolbarElementId);
+
+		// In case it contains garbage
+		if (this.parentContainer) this.parentContainer.innerHTML = '';
+
+		L.DomUtil.addClass(this.parentContainer, 'ui-toolbar');
+	}
+
+	create() {
+		this.reset();
+
+		var items = this.getToolItems();
+		this.builder.build(this.parentContainer, items);
+
+		JSDialog.MakeScrollable(
+			this.parentContainer,
+			this.parentContainer.querySelector('div'),
+		);
+		JSDialog.RefreshScrollables();
+
+		if (this.map.isRestrictedUser()) {
+			for (var i = 0; i < items.length; i++) {
+				var it = items[i];
+				var item = $('#' + it.id)[0];
+				this.map.hideRestrictedItems(it, item, item);
+			}
+		}
+
+		if (this.map.isLockedUser()) {
+			for (var i = 0; i < items.length; i++) {
+				var it = items[i];
+				var item = $('#' + it.id)[0];
+				this.map.disableLockedItem(it, item, item);
+			}
+		}
+	}
+
+	hasItem(id: string) {
+		return (
+			this.getToolItems().filter((item) => {
+				return item.id === id;
+			}).length > 0
+		);
+	}
+
+	insertItem(beforeId: string, items: Array<ToolbarItem>) {
+		this.customItems.push({ beforeId: beforeId, items: items });
+		this.create();
+	}
+
+	showItem(command: string, show: boolean) {
+		if (!command) return;
+
+		this.builder.executeAction(this.parentContainer, {
+			control_id: command,
+			action_type: show ? 'show' : 'hide',
+		});
+
+		JSDialog.RefreshScrollables();
+	}
+
+	enableItem(command: string, enable: boolean) {
+		if (!command) return;
+
+		this.builder.executeAction(this.parentContainer, {
+			control_id: command,
+			action_type: enable ? 'enable' : 'disable',
+		});
+	}
+
+	selectItem(command: string, select: boolean) {
+		if (!command) return;
+
+		this.builder.executeAction(this.parentContainer, {
+			control_id: command,
+			action_type: select ? 'select' : 'unselect',
+		});
+	}
+
+	updateItem(data: ToolbarItem) {
+		this.builder.updateWidget(this.parentContainer, data);
+		JSDialog.RefreshScrollables();
+	}
+}
+
+JSDialog.Toolbar = Toolbar;