Mention: share more code

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

browser/src/control/AutoCompletePopup.ts

@@ -44,7 +44,11 @@ interface Entry {
 	row: string;
 }
 
-interface MentionWidget extends WidgetJSON {
+interface TextWidget extends WidgetJSON {
+	text: string;
+}
+
+interface TreeWidget extends WidgetJSON {
 	text: string;
 	singleclickactivate: boolean;
 	fireKeyEvents: boolean;
@@ -67,12 +71,11 @@ abstract class AutoCompletePopup {
 	protected map: ReturnType<typeof L.map>;
 	protected newPopupData: PopupData;
 	protected data: MessageEvent<any>;
+	protected popupId: string;
 
-	constructor(map: ReturnType<typeof L.map>) {
+	constructor(popupId: string, map: ReturnType<typeof L.map>) {
 		this.map = map;
-	}
-
-	onAdd(id: string, bAutoComplete: boolean): void {
+		this.popupId = popupId;
 		this.newPopupData = {
 			children: [
 				{
@@ -85,14 +88,17 @@ abstract class AutoCompletePopup {
 			] as Array<WidgetJSON>,
 			jsontype: 'dialog',
 			type: 'modalpopup',
-			isAutoCompletePopup: bAutoComplete,
 			cancellable: true,
 			popupParent: '_POPOVER_',
 			clickToClose: '_POPOVER_',
-			id: id,
+			id: this.popupId,
 		} as PopupData;
+
+		this.onAdd();
 	}
 
+	abstract onAdd(): void;
+
 	getCurrentCursorPosition(): Point {
 		var currPos = {
 			x: app.file.textCursor.rectangle.cX1,
@@ -106,19 +112,105 @@ abstract class AutoCompletePopup {
 		);
 	}
 
-	closePopup(id: string): void {
+	closePopup(): void {
 		var closePopupData = {
 			jsontype: 'dialog',
 			type: 'modalpopup',
 			action: 'close',
-			id: id,
+			id: this.popupId,
 		} as PopupData;
 
 		this.map.fire('jsdialog', { data: closePopupData, callback: undefined });
 	}
 
-	abstract sendMentionText(ev: FireEvent): void;
-	abstract openMentionPopup(ev: FireEvent): void;
+	abstract getPopupEntries(ev: FireEvent): Array<Entry>;
+
+	getPopupJSON(control: any, framePos: any): PopupData {
+		return {
+			jsontype: 'dialog',
+			id: this.popupId,
+			action: 'update',
+			control: control,
+			posx: framePos.x,
+			posy: framePos.y,
+			children: undefined,
+		} as any as PopupData;
+	}
+
+	getTreeJSON(): TreeWidget {
+		return {
+			id: this.popupId + 'List',
+			type: 'treelistbox',
+			text: '',
+			enabled: true,
+			singleclickactivate: false,
+			fireKeyEvents: true,
+			entries: [] as Array<Entry>,
+		} as TreeWidget;
+	}
+
+	getSimpleTextJSON(): TextWidget {
+		return {
+			id: this.popupId + 'fixedtext',
+			type: 'fixedtext',
+			text: 'no search results found!',
+			enabled: true,
+		} as TextWidget;
+	}
+
+	sendUpdate(data: any): void {
+		this.map.fire('jsdialogupdate', {
+			data: data,
+			callback: this.callback.bind(this),
+		});
+	}
+
+	sendJSON(data: any): void {
+		this.map.fire('jsdialog', {
+			data: data,
+			callback: this.callback.bind(this),
+		});
+	}
+
+	openMentionPopup(ev: FireEvent): void {
+		const framePos = this.getCurrentCursorPosition();
+		const entries = this.getPopupEntries(ev);
+		let data: PopupData;
+
+		if (entries.length > 0) {
+			const control = this.getTreeJSON();
+			// update the popup with list if mentionList already exist
+			if (L.DomUtil.get(this.popupId + 'List')) {
+				data = this.getPopupJSON(control, framePos);
+				(data.control as TreeWidget).entries = entries;
+				this.sendUpdate(data);
+				return;
+			}
+			if (L.DomUtil.get(this.popupId))
+				this.closeMentionPopup({ typingMention: true } as CloseMessageEvent);
+			data = this.newPopupData;
+			data.children[0].children[0] = control;
+			(data.children[0].children[0] as TreeWidget).entries = entries;
+		} else {
+			const control = this.getSimpleTextJSON();
+			if (L.DomUtil.get(this.popupId + 'fixedtext')) {
+				data = this.getPopupJSON(control, framePos);
+				this.sendUpdate(data);
+				return;
+			}
+			if (L.DomUtil.get(this.popupId))
+				this.closeMentionPopup({ typingMention: true } as CloseMessageEvent);
+			data = this.newPopupData;
+			data.children[0].children[0] = control;
+		}
+		// add position
+		data.posx = framePos.x;
+		data.posy = framePos.y;
+		this.sendJSON(data);
+	}
+
+	abstract closeMentionPopup(ev: FireEvent): void;
+
 	abstract callback(
 		objectType: any,
 		eventType: any,

browser/src/control/Control.Mention.ts

@@ -23,23 +23,21 @@ class Mention extends L.Control.AutoCompletePopup {
 	data: MessageEvent<any>;
 
 	constructor(map: ReturnType<typeof L.map>) {
-		super(map);
-		this.onAdd(map);
+		super('mentionPopup', map);
 	}
 
-	onAdd(map: ReturnType<typeof L.map>) {
-		this.map = map;
+	onAdd() {
+		this.newPopupData.isAutoCompletePopup = true;
 		this.map.on('openmentionpopup', this.openMentionPopup, this);
-		this.map.on('closementionpopup', this.closePopup, this);
+		this.map.on('closementionpopup', this.closeMentionPopup, this);
 		this.map.on('sendmentiontext', this.sendMentionText, this);
-		super.onAdd('mentionPopup', true);
 		this.firstChar = null;
 		this.users = null;
 		this.itemList = null;
 	}
 
 	sendMentionText(ev: FireEvent) {
-		var text = ev.data.join('').substring(1);
+		const text = ev.data.join('').substring(1);
 		if (text.length === 1 && this.firstChar !== text[0]) {
 			this.map.fire('postMessage', {
 				msgId: 'UI_Mention',
@@ -51,12 +49,13 @@ class Mention extends L.Control.AutoCompletePopup {
 		}
 	}
 
-	openMentionPopup(ev: FireEvent) {
-		var framePos = this.getCurrentCursorPosition();
+	getPopupEntries(ev: FireEvent): any[] {
+		const entries: any[] = [];
 		this.users = ev.data;
-		if (this.users === null) return;
+		if (this.users === null)
+			return entries;
 
-		var text = this.map._docLayer._mentionText.join('').substring(1);
+		const text = this.map._docLayer._mentionText.join('').substring(1);
 		// filterout the users from list according to the text
 		if (text.length > 1) {
 			this.itemList = this.users.filter((element: any) => {
@@ -68,7 +67,6 @@ class Mention extends L.Control.AutoCompletePopup {
 		}
 
 		if (this.itemList.length !== 0) {
-			var entries = [];
 			for (var i in this.itemList) {
 				var entry = {
 					text: this.itemList[i].username,
@@ -81,80 +79,13 @@ class Mention extends L.Control.AutoCompletePopup {
 				};
 				entries.push(entry);
 			}
-
-			var data: PopupData;
-			const control = {
-				id: 'mentionList',
-				type: 'treelistbox',
-				text: '',
-				enabled: true,
-				singleclickactivate: false,
-				fireKeyEvents: true,
-				entries: [] as Array<Entry>,
-			} as MentionWidget;
-			// update the popup with list if mentionList already exist
-			if (L.DomUtil.get('mentionList')) {
-				data = {
-					jsontype: 'dialog',
-					id: 'mentionPopup',
-					action: 'update',
-					control: control,
-					posx: framePos.x,
-					posy: framePos.y,
-				} as any as PopupData;
-				(data.control as MentionWidget).entries = entries;
-				this.map.fire('jsdialogupdate', {
-					data: data,
-					callback: this.callback.bind(this),
-				});
-				return;
-			}
-			if (L.DomUtil.get('mentionPopup'))
-				this.closeMentionPopup({ typingMention: true } as CloseMessageEvent);
-			data = this.newPopupData;
-			data.children[0].children[0] = control;
-			(data.children[0].children[0] as MentionWidget).entries = entries;
-		} else {
-			const control = {
-				id: 'fixedtext',
-				type: 'fixedtext',
-				text: 'no search results found!',
-				enabled: true,
-				singleclickactivate: undefined,
-				fireKeyEvents: undefined,
-			} as MentionWidget;
-			if (L.DomUtil.get('fixedtext')) {
-				data = {
-					jsontype: 'dialog',
-					id: 'mentionPopup',
-					action: 'update',
-					control: control,
-					posx: framePos.x,
-					posy: framePos.y,
-					children: undefined,
-				} as any as PopupData;
-				this.map.fire('jsdialogupdate', {
-					data: data,
-					callback: this.callback.bind(this),
-				});
-				return;
-			}
-			if (L.DomUtil.get('mentionPopup'))
-				this.closeMentionPopup({ typingMention: true } as CloseMessageEvent);
-			data = this.newPopupData;
-			data.children[0].children[0] = control;
 		}
-		// add position
-		data.posx = framePos.x;
-		data.posy = framePos.y;
-		this.map.fire('jsdialog', {
-			data: data,
-			callback: this.callback.bind(this),
-		});
+
+		return entries;
 	}
 
-	closePopup(ev: CloseMessageEvent) {
-		super.closePopup('mentionPopup');
+	closeMentionPopup(ev: CloseMessageEvent) {
+		super.closePopup();
 		if (!ev.typingMention) {
 			this.map._docLayer._typingMention = false;
 			this.map._docLayer._mentionText = [];