| 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 | 1×
1×
1×
1×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1385×
1385×
1385×
1385×
1390×
1×
1390×
5×
1385×
1×
7×
7×
7×
7×
1×
17×
17×
1×
17×
16×
1×
17×
1×
1390×
1390×
1390×
1390×
1390×
1390×
1390×
1385×
1385×
1×
17×
14×
3×
3×
4×
4×
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 BlockActionMenuModule = (function () {
function BlockActionMenuModule(editor) {
this.editor = editor;
this.init();
this.addEventListeners();
this.bindTooltip();
}
BlockActionMenuModule.prototype.addEventListeners = function () {
this.editor.on(constant_1.events.moduleChanged, this.onPropertyChanged, this);
this.editor.on(constant_1.events.rtlChanged, this.applyRtlSettings, this);
this.editor.on(constant_1.events.destroy, this.destroy, this);
};
BlockActionMenuModule.prototype.removeEventListeners = function () {
this.editor.off(constant_1.events.moduleChanged, this.onPropertyChanged);
this.editor.off(constant_1.events.rtlChanged, this.applyRtlSettings);
this.editor.off(constant_1.events.destroy, this.destroy);
};
BlockActionMenuModule.prototype.init = function () {
this.menuElement = this.editor.createElement('ul', {
id: (this.editor.element.id + constants.BLOCKACTION_MENUBAR_ID),
styles: 'width: 100%'
});
this.editor.element.appendChild(this.menuElement);
var itemTemplate = '<div class="e-blockaction-item-template">' +
'<div class="e-action-icon-info">' +
'<span class="e-action-icon ${iconCss}"></span>' +
'</div>' +
'<div class="e-action-item-info">' +
'<div class="e-action-item-label">${label}</div>' +
'${if(shortcut)}' +
'<div class="e-action-item-shortcut">${shortcut}</div>' +
'${/if}' +
'</div>' +
'</div>';
this.menuObj = this.editor.menubarRenderer.renderMenubar({
element: this.menuElement,
cssClass: constants.BLOCKACTION_MENUBAR_CLS,
items: this.getActionItems(),
template: itemTemplate,
orientation: 'Vertical',
fields: { text: 'label', iconCss: 'iconCss' },
select: this.handleBlockActionMenuSelect.bind(this)
});
var popupElement = this.editor.createElement('div', {
id: (this.editor.element.id + constants.BLOCKACTION_POPUP_ID),
className: constants.BLOCKACTION_POPUP_CLS
});
this.editor.element.appendChild(popupElement);
this.editor.blockManager.observer.notify('actionMenuCreated');
};
BlockActionMenuModule.prototype.getActionItems = function () {
var actionItems = this.editor.blockActionMenuSettings.items.length > 0
? transform_1.sanitizeBlockActionItems(this.editor.blockActionMenuSettings.items)
: data_1.getBlockActionsMenuItems();
if (this.editor.blockActionMenuSettings.items.length <= 0) {
var prevOnChange = this.editor.isProtectedOnChange;
this.editor.isProtectedOnChange = true;
this.editor.blockActionMenuSettings.items = actionItems;
this.editor.isProtectedOnChange = prevOnChange;
}
return actionItems;
};
BlockActionMenuModule.prototype.bindTooltip = function () {
if (!this.editor.blockActionMenuSettings.enableTooltip) {
return;
}
this.blockActionTooltip = this.editor.tooltipRenderer.renderTooltip({
cssClass: constants.BLOCKACTION_TOOLTIP_CLS,
position: 'RightCenter',
target: '.e-menu-item',
windowCollision: true,
element: document.querySelector('#' + this.editor.element.id + constants.BLOCKACTION_POPUP_ID)
});
};
BlockActionMenuModule.prototype.applyRtlSettings = function () {
Eif (this.menuObj) {
this.menuObj.enableRtl = this.editor.enableRtl;
}
Eif (this.blockActionTooltip) {
this.blockActionTooltip.position = this.editor.enableRtl ? 'LeftCenter' : 'RightCenter';
}
};
BlockActionMenuModule.prototype.handleBlockActionMenuSelect = function (args) {
var clickEventArgs = {
item: args.item,
element: args.element,
isInteracted: (args.event && Object.keys(args.event).length > 0) ? true : false,
cancel: false
};
if (this.editor.blockActionMenuSettings.itemSelect) {
this.editor.blockActionMenuSettings.itemSelect.call(this, clickEventArgs);
}
if (!clickEventArgs.cancel) {
this.editor.blockManager.observer.notify('blockActionsMenuSelect', args);
}
};
BlockActionMenuModule.prototype.getModuleName = function () {
return 'blockActionMenuSettings';
};
BlockActionMenuModule.prototype.destroy = function () {
this.removeEventListeners();
Eif (this.menuObj) {
this.menuObj.destroy();
ej2_base_1.detach(this.menuElement);
this.menuObj = null;
this.menuElement = null;
}
if (this.blockActionTooltip) {
this.blockActionTooltip.destroy();
this.blockActionTooltip = null;
}
};
BlockActionMenuModule.prototype.onPropertyChanged = function (e) {
if (e.module !== this.getModuleName()) {
return;
}
var newProp = e.newProp.blockActionMenuSettings;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'popupWidth':
this.editor.blockManager.observer.notify('popupWidthChanged', { value: newProp.popupWidth });
break;
case 'popupHeight':
this.editor.blockManager.observer.notify('popupHeightChanged', { value: newProp.popupHeight });
break;
case 'items':
this.menuObj.items = transform_1.sanitizeBlockActionItems(newProp.items);
}
}
};
return BlockActionMenuModule;
}());
exports.BlockActionMenuModule = BlockActionMenuModule;
});
|