jsdialog: inherit from Component in Toolbar

Signed-off-by: Szymon Kłos <[email protected]>
Change-Id: Ia2ec3cf3bf5a1e145982ff2548533ef930bd9a6b

Author: eszkadev

browser/src/control/Control.MobileBottomBar.js

@@ -15,7 +15,7 @@
 /* global app JSDialog _ _UNO */
 class MobileBottomBar extends JSDialog.Toolbar {
 	constructor(map) {
-		super(map, 'toolbar-down')
+		super(map, 'MobileBottomBar', 'toolbar-down')
 
 		map.on('commandstatechanged', window.onCommandStateChanged);
 		map.on('updatetoolbarcommandvalues', window.onCommandStateChanged);

browser/src/control/Control.MobileSearchBar.ts

@@ -16,7 +16,7 @@
 /* global _ _UNO */
 class MobileSearchBar extends Toolbar {
 	constructor(map: any) {
-		super(map, 'toolbar-search');
+		super(map, 'MobileSearchBar', 'toolbar-search');
 	}
 
 	getToolItems(): Array<ToolbarItem> {

browser/src/control/Control.MobileTopBar.ts

@@ -14,7 +14,7 @@
 
 class MobileTopBar extends JSDialog.Toolbar {
 	constructor(map: any) {
-		super(map, 'toolbar-up');
+		super(map, 'MobileTopBar', 'toolbar-up');
 
 		app.events.on('updatepermission', this.onUpdatePermission.bind(this));
 		map.on('commandstatechanged', this.onCommandStateChanged, this);

browser/src/control/Control.StatusBar.js

@@ -15,7 +15,7 @@
 /* global $ app JSDialog _ _UNO  getPermissionModeElements URLPopUpSection */
 class StatusBar extends JSDialog.Toolbar {
 	constructor(map) {
-		super(map, 'toolbar-down');
+		super(map, 'Statusbar', 'toolbar-down');
 
 		map.on('doclayerinit', this.onDocLayerInit, this);
 		map.on('languagesupdated', this.onLanguagesUpdated, this);

browser/src/control/Control.TopToolbar.js

@@ -15,7 +15,7 @@
 /* global $ JSDialog _ _UNO app */
 class TopToolbar extends JSDialog.Toolbar {
 	constructor(map) {
-		super(map, 'toolbar-up');
+		super(map, 'TopToolbar', 'toolbar-up');
 		this.stylesSelectValue = null;
 
 		map.on('doclayerinit', this.onDocLayerInit, this);

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

@@ -18,21 +18,31 @@ declare var JSDialog: any;
 
 type ToolbarItem = any;
 
-class Toolbar {
-	protected map: any;
+class Toolbar extends JSDialogComponent {
 	protected docType: string;
-	protected builder: JSBuilder;
 	protected callback: JSDialogCallback;
 	protected toolbarElementId: string;
-	protected parentContainer: Element;
+	protected parentContainer: Element; // FIXME: can we drop as we have container in base?
 	protected customItems: Array<ToolbarItem>;
 
-	constructor(map: any, toolbarElementId: string) {
-		this.map = map;
+	constructor(map: any, name: string, toolbarElementId: string) {
+		super(map, name, 'toolbar');
+
 		this.docType = map.getDocType();
 		this.customItems = [];
 		this.toolbarElementId = toolbarElementId;
 
+		this.createBuilder();
+		this.reset();
+		this.create();
+		this.updateVisibilityForToolbar('');
+	}
+
+	getToolItems(): Array<ToolbarItem> {
+		return [];
+	}
+
+	protected createBuilder() {
 		this.builder = new window.L.control.jsDialogBuilder({
 			mobileWizard: this,
 			map: this.map,
@@ -41,25 +51,23 @@ class Toolbar {
 			callback: this.callback ? this.callback.bind(this) : undefined,
 			suffix: 'toolbar',
 		});
-
-		this.reset();
-		this.create();
-		this.updateVisibilityForToolbar('');
-	}
-
-	getToolItems(): Array<ToolbarItem> {
-		return [];
 	}
 
-	reset() {
-		this.parentContainer = window.L.DomUtil.get(this.toolbarElementId);
+	protected setupContainer(parentContainer?: HTMLElement /* ignored */) {
+		this.container = this.parentContainer = window.L.DomUtil.get(
+			this.toolbarElementId,
+		);
 
 		// In case it contains garbage
 		if (this.parentContainer) this.parentContainer.replaceChildren();
 
 		window.L.DomUtil.addClass(this.parentContainer, 'ui-toolbar');
 	}
 
+	reset() {
+		this.setupContainer(undefined);
+	}
+
 	create() {
 		this.reset();