more conversion of Control.Mention.js to ts
Signed-off-by: Bayram Çiçek <bayram.cicek@collabora.com> Change-Id: Ida4be8f63b05aad9db80acd6eba7e8e403587ac7pull/9012/head
Bayram Çiçek
Szymon Kłos
parent
a46147588f
commit
368c2218ec
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
onAdd: function(map: ReturnType<typeof L.map>) {
|
||||
interface MessageEvent2 extends MessageEvent {
|
||||
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': [
|
||||
{
|
||||
'id': 'container',
|
||||
'type': 'container',
|
||||
'text': '',
|
||||
'enabled': true,
|
||||
'children': [],
|
||||
'vertical': true
|
||||
}
|
||||
],
|
||||
'jsontype': 'dialog',
|
||||
'type': 'modalpopup',
|
||||
'isMention': true,
|
||||
'cancellable': true,
|
||||
'popupParent': '_POPOVER_',
|
||||
'clickToClose': '_POPOVER_',
|
||||
'id': 'mentionPopup'
|
||||
children: {
|
||||
id: 'container',
|
||||
type: 'container',
|
||||
text: '',
|
||||
enabled: true,
|
||||
children: [],
|
||||
vertical: true,
|
||||
},
|
||||
jsontype: 'dialog',
|
||||
type: 'modalpopup',
|
||||
isMention: true,
|
||||
cancellable: true,
|
||||
popupParent: '_POPOVER_',
|
||||
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() {
|
||||
var currPos = { x: app.file.textCursor.rectangle.cX1, y: app.file.textCursor.rectangle.cY2 };
|
||||
getCurrentCursorPosition() {
|
||||
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)
|
||||
return;
|
||||
if (this.users === null) 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,
|
||||
'columns': [
|
||||
text: this.itemList[i].username,
|
||||
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',
|
||||
'type': 'treelistbox',
|
||||
'text': '',
|
||||
'enabled': true,
|
||||
'singleclickactivate': false,
|
||||
'fireKeyEvents': true,
|
||||
'entries': []
|
||||
id: 'mentionList',
|
||||
type: 'treelistbox',
|
||||
text: '',
|
||||
enabled: true,
|
||||
singleclickactivate: false,
|
||||
fireKeyEvents: true,
|
||||
entries: [],
|
||||
};
|
||||
// update the popup with list if mentionList already exist
|
||||
if (L.DomUtil.get('mentionList')) {
|
||||
data = {
|
||||
'jsontype': 'dialog',
|
||||
'id': 'mentionPopup',
|
||||
'control': control,
|
||||
'posx': framePos.x,
|
||||
'posy': framePos.y,
|
||||
'children': undefined
|
||||
jsontype: 'dialog',
|
||||
id: 'mentionPopup',
|
||||
control: control,
|
||||
posx: framePos.x,
|
||||
posy: framePos.y,
|
||||
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',
|
||||
'type': 'fixedtext',
|
||||
'text': 'no search results found!',
|
||||
'enabled': true,
|
||||
'singleclickactivate': undefined,
|
||||
'fireKeyEvents': undefined,
|
||||
'entries': undefined
|
||||
id: 'fixedtext',
|
||||
type: 'fixedtext',
|
||||
text: 'no search results found!',
|
||||
enabled: true,
|
||||
singleclickactivate: undefined,
|
||||
fireKeyEvents: undefined,
|
||||
entries: undefined,
|
||||
};
|
||||
if (L.DomUtil.get('fixedtext')) {
|
||||
data = {
|
||||
'jsontype': 'dialog',
|
||||
'id': 'mentionPopup',
|
||||
'control': control,
|
||||
'posx': framePos.x,
|
||||
'posy': framePos.y,
|
||||
'children': undefined
|
||||
jsontype: 'dialog',
|
||||
id: 'mentionPopup',
|
||||
control: control,
|
||||
posx: framePos.x,
|
||||
posy: framePos.y,
|
||||
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',
|
||||
'type': 'modalpopup',
|
||||
'action': 'close',
|
||||
'id': 'mentionPopup',
|
||||
jsontype: 'dialog',
|
||||
type: 'modalpopup',
|
||||
action: 'close',
|
||||
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.fire('postMessage', { msgId: 'UI_Mention', args: { type: 'selected', username: this.itemList[index].username } });
|
||||
this.closeMentionPopup({ 'typingMention': false });
|
||||
this.map.sendUnoCommand('.uno:SetHyperlink', command, true);
|
||||
this.map.fire('postMessage', {
|
||||
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() {
|
||||
return new L.Control.Mention();
|
||||
}
|
||||
}
|
||||
L.control.mention = function () {
|
||||
return new Mention();
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue