more conversion of Control.Mention.js to ts

Signed-off-by: Bayram Çiçek <bayram.cicek@collabora.com>
Change-Id: Ida4be8f63b05aad9db80acd6eba7e8e403587ac7

browser/.beforeprettier

@@ -21,7 +21,6 @@
 /src/control/Control.LanguageDialog.js
 /src/control/Control.Layers.js
 /src/control/Control.LokDialog.js
-/src/control/Control.Mention.ts
 /src/control/Control.Menubar.js
 /src/control/Control.MobileBottomBar.js
 /src/control/Control.MobileSlide.js

browser/src/control/Control.Mention.ts

@@ -14,18 +14,9 @@
 
 /* global app */
 
-interface Data {
-	jsontype: string;
-	id: string;
-	control: Control;
-	posx: number;
-	posy: number;
-	children: Array<Children>;
-}
-
 interface Entry {
 	text: string;
-	columns: { text: any; }[];
+	columns: { text: any }[];
 	row: string;
 }
 
@@ -48,6 +39,15 @@ interface Children {
 	vertical: boolean;
 }
 
+interface Data {
+	jsontype: string;
+	id: string;
+	control: Control;
+	posx: number;
+	posy: number;
+	children: Array<Children>;
+}
+
 interface PopupData {
 	children: Children;
 	jsontype: string;
@@ -59,63 +59,80 @@ interface PopupData {
 	id: string;
 }
 
-L.Control.Mention = L.Control.extend({
+interface MessageEvent2 extends MessageEvent {
-	onAdd: function(map: ReturnType<typeof L.map>) {
+	typingMention: boolean;
+}
+
+class Mention {
+	map: ReturnType<typeof L.map>;
+	newPopupData: PopupData;
+	firstChar: string;
+	users: any;
+	itemList: Array<any>;
+	data: MessageEvent<any>;
+
+	onAdd(map: ReturnType<typeof L.map>) {
 		this.map = map;
 		this.map.on('openmentionpopup', this.openMentionPopup, this);
 		this.map.on('closementionpopup', this.closeMentionPopup, this);
 		this.map.on('sendmentiontext', this.sendMentionText, this);
 		this.newPopupData = {
-			'children': [
+			children: {
-				{
+				id: 'container',
-					'id': 'container',
+				type: 'container',
-					'type': 'container',
+				text: '',
-					'text': '',
+				enabled: true,
-					'enabled': true,
+				children: [],
-					'children': [],
+				vertical: true,
-					'vertical': true
+			},
-				}
+			jsontype: 'dialog',
-			],
+			type: 'modalpopup',
-			'jsontype': 'dialog',
+			isMention: true,
-			'type': 'modalpopup',
+			cancellable: true,
-			'isMention': true,
+			popupParent: '_POPOVER_',
-			'cancellable': true,
+			clickToClose: '_POPOVER_',
-			'popupParent': '_POPOVER_',
+			id: 'mentionPopup',
-			'clickToClose': '_POPOVER_',
-			'id': 'mentionPopup'
 		};
 		this.firstChar = null;
 		this.users = null;
 		this.itemList = null;
-	},
+	}
 
-	sendMentionText: function(ev: MessageEvent) {
+	sendMentionText(ev: MessageEvent) {
 		var text = ev.data.join('').substring(1);
 		if (text.length === 1 && this.firstChar !== text[0]) {
-			this.map.fire('postMessage', { msgId: 'UI_Mention', args: { type: 'autocomplete', text: text } });
+			this.map.fire('postMessage', {
+				msgId: 'UI_Mention',
+				args: { type: 'autocomplete', text: text },
+			});
 			this.firstChar = text[0];
 		} else {
 			this.openMentionPopup({ data: this.users });
 		}
-	},
+	}
 
-	getCurrentCursorPosition: function() {
+	getCurrentCursorPosition() {
-		var currPos = { x: app.file.textCursor.rectangle.cX1, y: app.file.textCursor.rectangle.cY2 };
+		var currPos = {
+			x: app.file.textCursor.rectangle.cX1,
+			y: app.file.textCursor.rectangle.cY2,
+		};
 		var origin = this.map.getPixelOrigin();
 		var panePos = this.map._getMapPanePos();
-		return new L.Point(Math.round(currPos.x + panePos.x - origin.x), Math.round(currPos.y + panePos.y - origin.y));
+		return new L.Point(
-	},
+			Math.round(currPos.x + panePos.x - origin.x),
+			Math.round(currPos.y + panePos.y - origin.y),
+		);
+	}
 
-	openMentionPopup: function(ev: MessageEvent) {
+	openMentionPopup(ev: MessageEvent) {
 		var framePos = this.getCurrentCursorPosition();
 		this.users = ev.data;
-		if (this.users === null)
+		if (this.users === null) return;
-			return;
 
 		var 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(function(element) {
+			this.itemList = this.users.filter((element: any) => {
 				// case insensitive
 				return element.username.toLowerCase().includes(text.toLowerCase());
 			});
@@ -127,39 +144,42 @@ L.Control.Mention = L.Control.extend({
 			var entries = [];
 			for (var i in this.itemList) {
 				var entry = {
-					'text': this.itemList[i].username,
+					text: this.itemList[i].username,
-					'columns': [
+					columns: [
 						{
-							'text': this.itemList[i].username
+							text: this.itemList[i].username,
-						}
+						},
 					],
-					'row': i.toString()
+					row: i.toString(),
 				};
 				entries.push(entry);
 			}
 
 			var data: Data;
 			var control: Control = {
-				'id': 'mentionList',
+				id: 'mentionList',
-				'type': 'treelistbox',
+				type: 'treelistbox',
-				'text': '',
+				text: '',
-				'enabled': true,
+				enabled: true,
-				'singleclickactivate': false,
+				singleclickactivate: false,
-				'fireKeyEvents': true,
+				fireKeyEvents: true,
-				'entries': []
+				entries: [],
 			};
 			// update the popup with list if mentionList already exist
 			if (L.DomUtil.get('mentionList')) {
 				data = {
-					'jsontype': 'dialog',
+					jsontype: 'dialog',
-					'id': 'mentionPopup',
+					id: 'mentionPopup',
-					'control': control,
+					control: control,
-					'posx': framePos.x,
+					posx: framePos.x,
-					'posy': framePos.y,
+					posy: framePos.y,
-					'children': undefined
+					children: undefined,
 				};
 				data.control.entries = entries;
-				this.map.fire('jsdialogupdate', { data: data, callback: this.callback.bind(this) });
+				this.map.fire('jsdialogupdate', {
+					data: data,
+					callback: this.callback.bind(this),
+				});
 				return;
 			}
 			if (L.DomUtil.get('mentionPopup'))
@@ -169,24 +189,27 @@ L.Control.Mention = L.Control.extend({
 			data.children[0].children[0].entries = entries;
 		} else {
 			var control: Control = {
-				'id': 'fixedtext',
+				id: 'fixedtext',
-				'type': 'fixedtext',
+				type: 'fixedtext',
-				'text': 'no search results found!',
+				text: 'no search results found!',
-				'enabled': true,
+				enabled: true,
-				'singleclickactivate': undefined,
+				singleclickactivate: undefined,
-				'fireKeyEvents': undefined,
+				fireKeyEvents: undefined,
-				'entries': undefined
+				entries: undefined,
 			};
 			if (L.DomUtil.get('fixedtext')) {
 				data = {
-					'jsontype': 'dialog',
+					jsontype: 'dialog',
-					'id': 'mentionPopup',
+					id: 'mentionPopup',
-					'control': control,
+					control: control,
-					'posx': framePos.x,
+					posx: framePos.x,
-					'posy': framePos.y,
+					posy: framePos.y,
-					'children': undefined
+					children: undefined,
 				};
-				this.map.fire('jsdialogupdate', { data: data, callback: this.callback.bind(this) });
+				this.map.fire('jsdialogupdate', {
+					data: data,
+					callback: this.callback.bind(this),
+				});
 				return;
 			}
 			if (L.DomUtil.get('mentionPopup'))
@@ -197,26 +220,29 @@ L.Control.Mention = L.Control.extend({
 		// add position
 		data.posx = framePos.x;
 		data.posy = framePos.y;
-		this.map.fire('jsdialog', { data: data, callback: this.callback.bind(this) });
+		this.map.fire('jsdialog', {
-	},
+			data: data,
+			callback: this.callback.bind(this),
+		});
+	}
 
-	closeMentionPopup: function(ev) {
+	closeMentionPopup(ev: MessageEvent) {
 		var closePopupData = {
-			'jsontype': 'dialog',
+			jsontype: 'dialog',
-			'type': 'modalpopup',
+			type: 'modalpopup',
-			'action': 'close',
+			action: 'close',
-			'id': 'mentionPopup',
+			id: 'mentionPopup',
 		};
 		this.map.fire('jsdialog', { data: closePopupData, callback: undefined });
 		if (!ev.typingMention) {
 			this.map._docLayer._typingMention = false;
 			this.map._docLayer._mentionText = [];
 		}
-	},
+	}
 
-	callback: function(objectType, eventType, object, index) {
+	callback(objectType: any, eventType: any, object: any, index: number) {
 		if (eventType === 'close') {
-			this.closeMentionPopup({ 'typingMention': false });
+			this.closeMentionPopup({ typingMention: false });
 		} else if (eventType === 'select' || eventType === 'activate') {
 			var command = {
 				'Hyperlink.Text': {
@@ -230,11 +256,14 @@ L.Control.Mention = L.Control.extend({
 				'Hyperlink.ReplacementText': {
 					type: 'string',
 					value: this.map._docLayer._mentionText.join(''),
-				}
+				},
 			};
-			this._map.sendUnoCommand('.uno:SetHyperlink', command, true);
+			this.map.sendUnoCommand('.uno:SetHyperlink', command, true);
-			this.map.fire('postMessage', { msgId: 'UI_Mention', args: { type: 'selected', username: this.itemList[index].username } });
+			this.map.fire('postMessage', {
-			this.closeMentionPopup({ 'typingMention': false });
+				msgId: 'UI_Mention',
+				args: { type: 'selected', username: this.itemList[index].username },
+			});
+			this.closeMentionPopup({ typingMention: false });
 		} else if (eventType === 'keydown') {
 			if (object.key !== 'Tab' && object.key !== 'Shift') {
 				this.map.focus();
@@ -242,8 +271,8 @@ L.Control.Mention = L.Control.extend({
 			}
 		}
 		return false;
-	},
+	}
-});
+}
-L.control.mention = function() {
+L.control.mention = function () {
-	return new L.Control.Mention();
+	return new Mention();
 };