jsdialog: use component type in builder options

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

Author: eszkadev

browser/src/control/Control.ContextToolbar.ts

@@ -14,10 +14,8 @@
  * This toolbar should appear over selection when related selection is done using mouse
  */
 
-class ContextToolbar {
+class ContextToolbar extends JSDialogComponent {
 	container!: HTMLElement;
-	builder: JSBuilder;
-	map: any;
 	initialized: boolean = false;
 	lastIinputEvent?: any = {};
 	pendingShow: boolean = false;
@@ -26,18 +24,22 @@ class ContextToolbar {
 	additionalContextButtons: Array<WidgetJSON> = [];
 
 	constructor(map: any) {
-		this.map = map;
+		super(map, 'ContextToolbar', 'notebookbar');
+		this.createBuilder();
+		this.setupContainer(undefined);
+	}
+
+	protected createBuilder() {
 		this.builder = new window.L.control.notebookbarBuilder({
 			windowId: -2,
 			mobileWizard: this,
 			map: this.map,
 			cssClass: 'notebookbar',
 			suffix: 'context-toolbar',
 		} as JSBuilderOptions);
-		this.createContextToolbarElement();
 	}
 
-	createContextToolbarElement(): void {
+	protected setupContainer(parentContainer?: HTMLElement /* ignored */): void {
 		this.container = window.L.DomUtil.createWithId(
 			'div',
 			'context-toolbar',
@@ -47,7 +49,7 @@ class ContextToolbar {
 	}
 
 	showContextToolbar(): void {
-		const map = this.builder.map;
+		const map = this.map;
 		if (
 			map.isReadOnlyMode() ||
 			!window.mode.isDesktop() ||
@@ -72,32 +74,24 @@ class ContextToolbar {
 				contextToolbarItems.push(item);
 			}
 
-			this.builder.build(this.container, contextToolbarItems, false);
+			this.builder?.build(this.container, contextToolbarItems, false);
 
 			this.initialized = true;
 		}
 
-		this.builder.map.on('jsdialogaction', this.onJSAction, this);
-		this.builder.map.on('jsdialogupdate', this.onJSUpdate, this);
+		this.registerMessageHandlers();
+
 		document.addEventListener('pointermove', this.pointerMove);
-		this.builder.map.on(
-			'commandstatechanged',
-			this.onCommandStateChanged,
-			this,
-		);
+		this.map.on('commandstatechanged', this.onCommandStateChanged, this);
 		this.changeOpacity(1);
 		this.showHideToolbar(true);
 	}
 
 	hideContextToolbar(): void {
-		this.builder.map.off('jsdialogaction', this.onJSAction, this);
-		this.builder.map.off('jsdialogupdate', this.onJSUpdate, this);
+		this.unregisterMessageHandlers();
+
 		document.removeEventListener('pointermove', this.pointerMove);
-		this.builder.map.off(
-			'commandstatechanged',
-			this.onCommandStateChanged,
-			this,
-		);
+		this.map.off('commandstatechanged', this.onCommandStateChanged, this);
 		this.showHideToolbar(false);
 	}
 
@@ -130,7 +124,7 @@ class ContextToolbar {
 
 	getWriterTextContext(): WidgetJSON[] {
 		const fontEntries = Object.keys(
-			this.builder.map._docLayer._toolbarCommandValues['.uno:CharFontName'],
+			this.map._docLayer._toolbarCommandValues['.uno:CharFontName'],
 		);
 		const sizeEntries = [
 			'6',
@@ -336,22 +330,10 @@ class ContextToolbar {
 
 		// update context toolbar
 		document.getElementById('context-toolbar')?.remove();
-		this.createContextToolbarElement();
+		this.setupContainer(undefined);
 		this.initialized = false;
 	}
 
-	onJSAction(e: any): any {
-		if (e.data.jsontype !== 'notebookbar') return;
-
-		this.builder.executeAction(this.container, e.data.data);
-	}
-
-	onJSUpdate(e: any): any {
-		if (e.data.jsontype !== 'notebookbar') return;
-
-		this.builder.updateWidget(this.container, e.data.control);
-	}
-
 	setLastInputEventType(e: any) {
 		this.lastIinputEvent = e;
 		if (e.type === 'buttonup' && e.input === 'mouse' && this.pendingShow) {

browser/src/control/jsdialog/Definitions.Types.ts

@@ -33,13 +33,13 @@ interface JSBuilderOptions {
 	cssClass: string; // class added to every widget root
 	windowId: number; // window id to be sent with dialogevent
 	map: any; // reference to map
-	mobileWizard: any; // reference to the parent container	FIXME: rename
-	useSetTabs: boolean; // custom tabs placement handled by the parent container
-	useScrollAnimation: boolean; // do we use animation for scrollIntoView
+	mobileWizard: JSDialogComponent; // reference to the parent component FIXME: rename
+	useSetTabs?: boolean; // custom tabs placement handled by the parent container
+	useScrollAnimation?: boolean; // do we use animation for scrollIntoView
 
 	// modifiers
-	noLabelsForUnoButtons: boolean; // create only icon without label
-	useInLineLabelsForUnoButtons: boolean; // create labels next to the icon
+	noLabelsForUnoButtons?: boolean; // create only icon without label
+	useInLineLabelsForUnoButtons?: boolean; // create labels next to the icon
 	suffix: string; // add a suffix to the element ID to make it unique among different builder instances.
 }