| 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162 | 1×
1×
1×
1×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1389×
1389×
1389×
1389×
1390×
1×
14×
14×
1×
14×
14×
1×
14×
13×
1×
3×
3×
1×
3×
1×
1×
1×
3×
1×
2×
2×
1×
2×
1×
1×
13×
13×
13×
13×
117×
1×
17×
1×
1390×
1390×
1390×
1390×
1390×
1390×
1×
17×
14×
3×
3×
3×
3×
3×
1×
1×
1×
1×
1×
1×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/data", "../../common/constant", "../../common/utils/transform", "../../common/constant"], function (require, exports, ej2_base_1, data_1, constant_1, transform_1, constants) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ContextMenuModule = (function () {
function ContextMenuModule(editor) {
this.editor = editor;
this.init();
this.addEventListeners();
}
ContextMenuModule.prototype.addEventListeners = function () {
this.editor.on(constant_1.events.moduleChanged, this.onPropertyChanged, this);
this.editor.blockManager.observer.on('enableDisableContextMenuItems', this.enableMenuItems, this);
this.editor.on(constant_1.events.destroy, this.destroy, this);
};
ContextMenuModule.prototype.removeEventListeners = function () {
this.editor.off(constant_1.events.moduleChanged, this.onPropertyChanged);
this.editor.blockManager.observer.off('enableDisableContextMenuItems', this.enableMenuItems);
this.editor.off(constant_1.events.destroy, this.destroy);
};
ContextMenuModule.prototype.init = function () {
this.menuElement = this.editor.createElement('ul', {
id: (this.editor.element.id + constants.BLOCKEDITOR_CONTEXTMENU_ID)
});
document.body.appendChild(this.menuElement);
var itemTemplate = '${if(!separator)}' +
'<div class="e-ctmenu-item-template">' +
'<div class="e-ctmenu-content">' +
'<span class="e-ctmenu-icon ${iconCss}"></span>' +
'<span class="e-ctmenu-text">${text}</span>' +
'</div>' +
'${if(shortcut)}' +
'<div class="e-ctmenu-shortcut">${shortcut}</div>' +
'${/if}' +
'</div>' +
'${/if}';
this.contextMenuObj = this.editor.menubarRenderer.renderContextMenu({
target: '#' + this.editor.element.id,
cssClass: constants.BLOCKEDITOR_CONTEXTMENU_CLS,
element: this.menuElement,
items: this.getMenuItems(),
showItemOnClick: this.editor.contextMenuSettings.showItemOnClick,
itemTemplate: itemTemplate,
fields: { text: 'text', iconCss: 'iconCss', itemId: 'id' },
select: this.handleContextMenuSelection.bind(this),
beforeOpen: this.handleContextMenuBeforeOpen.bind(this),
beforeClose: this.handleContextMenuBeforeClose.bind(this),
open: this.handleContextMenuOpen.bind(this),
close: this.handleContextMenuClose.bind(this)
});
this.editor.blockManager.observer.notify('contextMenuCreated');
};
ContextMenuModule.prototype.getMenuItems = function () {
var menuItems = this.editor.contextMenuSettings.items.length > 0
? transform_1.sanitizeContextMenuItems(this.editor.contextMenuSettings.items)
: data_1.getContextMenuItems();
if (this.editor.contextMenuSettings.items.length <= 0) {
var prevOnChange = this.editor.isProtectedOnChange;
this.editor.isProtectedOnChange = true;
this.editor.contextMenuSettings.items = menuItems;
this.editor.isProtectedOnChange = prevOnChange;
}
return menuItems;
};
ContextMenuModule.prototype.handleContextMenuBeforeOpen = function (args) {
var eventArgs = {
event: args.event,
items: this.editor.contextMenuSettings.items,
parentItem: args.parentItem,
cancel: !this.editor.contextMenuSettings.enable
};
if (this.editor.contextMenuSettings.opening) {
this.editor.contextMenuSettings.opening.call(this, eventArgs);
}
args.cancel = eventArgs.cancel;
if (this.editor.readOnly) {
args.cancel = true;
}
if (!args.cancel) {
this.editor.blockManager.observer.notify('contextMenuBeforeOpen', args);
}
};
ContextMenuModule.prototype.handleContextMenuBeforeClose = function (args) {
var eventArgs = {
event: args.event,
items: this.editor.contextMenuSettings.items,
parentItem: args.parentItem,
cancel: false
};
if (this.editor.contextMenuSettings.closing) {
this.editor.contextMenuSettings.closing.call(this, eventArgs);
}
args.cancel = eventArgs.cancel;
};
ContextMenuModule.prototype.handleContextMenuOpen = function (args) {
this.editor.blockManager.observer.notify('updateContextMenuState', { value: { isOpen: true } });
};
ContextMenuModule.prototype.handleContextMenuClose = function (args) {
this.editor.blockManager.observer.notify('updateContextMenuState', { value: { isOpen: false } });
};
ContextMenuModule.prototype.handleContextMenuSelection = function (args) {
var clickEventArgs = {
item: args.item,
event: args.event,
cancel: false
};
if (this.editor.contextMenuSettings.itemSelect) {
this.editor.contextMenuSettings.itemSelect.call(this, clickEventArgs);
}
if (!clickEventArgs.cancel) {
this.editor.blockManager.observer.notify('contextMenuSelection', args);
}
};
ContextMenuModule.prototype.enableMenuItems = function (menuState) {
var _this = this;
Eif (this.contextMenuObj) {
var itemIds = Object.keys(menuState);
itemIds.forEach(function (item) {
_this.contextMenuObj.enableItems([item], menuState[item], true);
});
}
};
ContextMenuModule.prototype.getModuleName = function () {
return 'contextMenuSettings';
};
ContextMenuModule.prototype.destroy = function () {
Eif (this.contextMenuObj) {
this.contextMenuObj.destroy();
this.contextMenuObj = null;
ej2_base_1.detach(this.menuElement);
this.menuElement = null;
}
this.removeEventListeners();
};
ContextMenuModule.prototype.onPropertyChanged = function (e) {
if (e.module !== this.getModuleName()) {
return;
}
var newProp = e.newProp.contextMenuSettings;
Eif (!ej2_base_1.isNullOrUndefined(newProp)) {
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'showItemOnClick':
this.contextMenuObj.showItemOnClick = this.editor.blockManager.contextMenuSettings.showItemOnClick =
newProp.showItemOnClick;
break;
case 'items':
this.contextMenuObj.items = this.editor.blockManager.contextMenuSettings.items =
transform_1.sanitizeContextMenuItems(newProp.items);
break;
case 'itemTemplate':
this.contextMenuObj.itemTemplate = newProp.itemTemplate;
break;
}
}
}
};
return ContextMenuModule;
}());
exports.ContextMenuModule = ContextMenuModule;
});
|