| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118 | 1×
1×
1×
1×
1390×
1390×
1×
1390×
1390×
1×
1390×
1390×
1×
1390×
1390×
1390×
21×
21×
1390×
1×
1390×
1390×
1390×
47×
1343×
1343×
1343×
1343×
1343×
1390×
25×
25×
1390×
1×
35×
35×
35×
1×
17×
1×
17×
15×
2×
2×
2×
4×
4×
2×
2×
2×
2×
2×
2×
1×
1390×
1390×
1390×
1390×
1390×
1390×
1390×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../../models/index", "../../common/utils/index", "../../common/constant"], function (require, exports, ej2_base_1, index_1, index_2, constant_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var InlineContentInsertionModule = (function () {
function InlineContentInsertionModule(editor) {
this.editor = editor;
this.addEventListeners();
}
InlineContentInsertionModule.prototype.addEventListeners = function () {
this.editor.on(constant_1.events.moduleChanged, this.onPropertyChanged, this);
this.editor.on(constant_1.events.destroy, this.destroy, this);
};
InlineContentInsertionModule.prototype.removeEventListeners = function () {
this.editor.off(constant_1.events.moduleChanged, this.onPropertyChanged);
this.editor.off(constant_1.events.destroy, this.destroy);
};
InlineContentInsertionModule.prototype.initializeUserMention = function () {
var _this = this;
var mentionDataSource = this.editor.users.map(function (user) { return ({
id: user.id,
user: user.user.trim(),
avatarUrl: user.avatarUrl,
avatarBgColor: user.avatarBgColor || index_2.getAutoAvatarColor(user.id),
initials: index_2.getUserInitials(user.user)
}); });
var mentionArgs = {
element: this.editor.blockContainer,
itemTemplate: '<div class="e-user-mention-item-template"><div class="em-avatar" style="background-color: ${avatarBgColor};">${if(avatarUrl)} <img src="${avatarUrl}" alt="${user}" class="em-img" /> ${else} <div class="em-initial">${initials}</div> ${/if} </div><div class="em-content"><div class="em-text">${user}</div></div></div>',
displayTemplate: index_2.getUserMentionDisplayTemplate(),
dataSource: mentionDataSource,
popupWidth: '200px',
cssClass: 'e-blockeditor-user-menu e-blockeditor-mention-menu',
fields: { text: 'user', value: 'id' },
change: this.handleInlineContentInsertion.bind(this),
beforeOpen: function (args) {
var focusedBlk = _this.editor.blockManager.currentFocusedBlock;
args.cancel = (_this.editor.users.length === 0)
|| (focusedBlk && index_2.extractBlockTypeFromElement(focusedBlk) === index_1.BlockType.Code);
}
};
this.userMenuObj = this.editor.mentionRenderer.renderMention(mentionArgs);
};
InlineContentInsertionModule.prototype.initializeLabelContent = function () {
var _this = this;
var items;
if (this.editor.labelSettings.items.length > 0) {
items = index_2.sanitizeLabelItems(this.editor.labelSettings.items);
}
else {
items = index_2.getLabelMenuItems();
var prevOnChange = this.editor.isProtectedOnChange;
this.editor.isProtectedOnChange = true;
this.editor.labelSettings.items = items;
this.editor.isProtectedOnChange = prevOnChange;
}
var mentionArgs = {
element: this.editor.blockContainer,
mentionChar: this.editor.labelSettings.triggerChar,
itemTemplate: '<div class="e-label-mention-item-template"><div class="em-avatar" style="background-color: ${labelColor};"> </div><div class="em-content"><span class="em-icon ${iconCss}"></span><div class="em-text">${text}</div></div></div>',
displayTemplate: index_2.getLabelMentionDisplayTemplate(),
dataSource: items,
popupWidth: '200px',
cssClass: 'e-blockeditor-label-menu e-blockeditor-mention-menu',
fields: { text: 'text', value: 'id', groupBy: 'groupBy', iconCss: 'iconCss' },
change: this.handleInlineContentInsertion.bind(this),
beforeOpen: function (args) {
var focusedBlk = _this.editor.blockManager.currentFocusedBlock;
args.cancel = (focusedBlk && index_2.extractBlockTypeFromElement(focusedBlk) === index_1.BlockType.Code);
}
};
this.labelMenuObj = this.editor.mentionRenderer.renderMention(mentionArgs);
};
InlineContentInsertionModule.prototype.handleInlineContentInsertion = function (args) {
args.e.preventDefault();
args.e.stopPropagation();
this.editor.blockManager.observer.notify('inlineContentInsertion', args);
};
InlineContentInsertionModule.prototype.getModuleName = function () {
return 'inlineContent';
};
InlineContentInsertionModule.prototype.onPropertyChanged = function (e) {
if (e.module !== this.getModuleName()) {
return;
}
var newLabelProp = e.newProp.labelSettings;
Eif (!ej2_base_1.isNullOrUndefined(newLabelProp)) {
for (var _i = 0, _a = Object.keys(newLabelProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'items':
this.labelMenuObj.dataSource = newLabelProp.items;
break;
case 'triggerChar':
this.labelMenuObj.mentionChar = newLabelProp.triggerChar;
break;
}
}
}
Eif (!ej2_base_1.isNullOrUndefined(e.newProp.users)) {
this.userMenuObj.dataSource = e.newProp.users;
}
};
InlineContentInsertionModule.prototype.destroy = function () {
Eif (this.userMenuObj) {
this.userMenuObj.destroy();
}
Eif (this.labelMenuObj) {
this.labelMenuObj.destroy();
}
this.removeEventListeners();
this.userMenuObj = null;
this.labelMenuObj = null;
};
return InlineContentInsertionModule;
}());
exports.InlineContentInsertionModule = InlineContentInsertionModule;
});
|