From fcbd08f98c5dcfb1eb2951cd9d5ede01f78bb34d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20K=C5=82os?= Date: Wed, 8 May 2024 14:04:27 +0200 Subject: [PATCH] Mention: share more code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Szymon Kłos Change-Id: Ic9fd29a05cbc2e62abb9f3651cdb771ab1d9adf0 --- browser/src/control/AutoCompletePopup.ts | 114 ++++++++++++++++++++--- browser/src/control/Control.Mention.ts | 97 +++---------------- 2 files changed, 117 insertions(+), 94 deletions(-) diff --git a/browser/src/control/AutoCompletePopup.ts b/browser/src/control/AutoCompletePopup.ts index c0ffad6c20..d16e28deb5 100644 --- a/browser/src/control/AutoCompletePopup.ts +++ b/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; protected newPopupData: PopupData; protected data: MessageEvent; + protected popupId: string; - constructor(map: ReturnType) { + constructor(popupId: string, map: ReturnType) { this.map = map; - } - - onAdd(id: string, bAutoComplete: boolean): void { + this.popupId = popupId; this.newPopupData = { children: [ { @@ -85,14 +88,17 @@ abstract class AutoCompletePopup { ] as Array, 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; + + 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, + } 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, diff --git a/browser/src/control/Control.Mention.ts b/browser/src/control/Control.Mention.ts index 4ce6b99447..a25ae734e7 100644 --- a/browser/src/control/Control.Mention.ts +++ b/browser/src/control/Control.Mention.ts @@ -23,23 +23,21 @@ class Mention extends L.Control.AutoCompletePopup { data: MessageEvent; constructor(map: ReturnType) { - super(map); - this.onAdd(map); + super('mentionPopup', map); } - onAdd(map: ReturnType) { - 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, - } 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 = [];