| 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630 | 1×
1×
1×
1×
8570×
8570×
8570×
8569×
8569×
1×
3090×
1×
2113×
2113×
533×
1×
1907×
1×
3090×
3090×
3090×
3090×
3090×
71070×
71070×
5196×
117×
117×
117×
117×
809×
117×
117×
112×
112×
112×
112×
438×
112×
112×
20×
20×
20×
20×
173×
20×
20×
1454×
1454×
2×
1452×
1452×
8766×
1452×
1452×
1452×
222×
222×
2×
220×
220×
1724×
220×
220×
220×
206×
206×
1×
205×
205×
1679×
205×
205×
205×
205×
1397×
1397×
6×
1391×
1391×
178×
178×
213×
213×
142×
142×
139×
139×
76×
76×
137×
137×
143×
143×
13×
13×
13×
65×
65×
13×
13×
13×
13×
3090×
81×
1×
10×
10×
51×
10×
1×
242×
242×
242×
242×
322×
322×
9×
7×
9×
9×
8×
8×
8×
8×
8×
8×
5×
3×
8×
1×
1×
9×
9×
7×
9×
9×
8×
8×
8×
8×
8×
8×
8×
5×
3×
8×
1×
1×
9×
14×
14×
22×
22×
14×
14×
14×
14×
14×
14×
8×
8×
14×
1×
16×
1×
142×
142×
142×
4×
138×
5×
138×
1×
139×
139×
4×
135×
1×
76×
76×
2×
74×
1×
137×
137×
5×
132×
1×
213×
213×
213×
2×
211×
1×
178×
178×
178×
2×
176×
1×
143×
143×
4×
139×
1×
4534×
1×
5612×
1451×
1451×
1451×
5612×
220×
220×
220×
5612×
205×
205×
205×
5612×
1391×
1391×
1391×
5612×
315×
315×
315×
5612×
211×
211×
211×
5612×
138×
138×
138×
5612×
135×
135×
135×
5612×
74×
74×
74×
5612×
132×
132×
132×
5612×
117×
117×
117×
5612×
112×
112×
112×
5612×
20×
20×
20×
5612×
13×
13×
13×
5612×
1×
2×
1×
1×
1×
1×
2563×
8×
2563×
1×
2563×
1×
2563×
8×
2563×
2563×
2563×
2563×
2563×
1×
34086×
41×
30×
11×
1×
2622×
2622×
34086×
1×
8569×
8569×
8569×
8569×
8569×
8569×
8569×
1×
75×
75×
75×
75×
4×
75×
2×
2×
2×
2×
1×
4×
4×
52×
2×
1×
2529×
2529×
2529×
2529×
2529×
2529×
1×
2529×
2529×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../base/enum", "../base/util", "../base/constant", "../base/classes", "../base/util", "../models/items", "../base/classes"], function (require, exports, ej2_base_1, enum_1, util_1, events, classes, util_2, model, classes_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DropDownButtons = (function () {
function DropDownButtons(parent, serviceLocator) {
this.parent = parent;
this.locator = serviceLocator;
this.i10n = serviceLocator.getService('rteLocale');
this.renderFactory = this.locator.getService('rendererFactory');
this.addEventListener();
}
DropDownButtons.prototype.initializeInstance = function () {
this.toolbarRenderer = this.renderFactory.getRenderer(enum_1.RenderType.Toolbar);
};
DropDownButtons.prototype.beforeRender = function (args) {
var item = args.item;
if (item.cssClass) {
ej2_base_1.addClass([args.element], item.cssClass);
}
};
DropDownButtons.prototype.dropdownContent = function (width, type, content) {
return ('<span class="e-rte-dropdown-btn-text-wrapper" style="width:' + ((type === 'quick') ? 'auto' : width) + '" >' +
'<span class="e-rte-dropdown-btn-text">' + content + '</span></span>');
};
DropDownButtons.prototype.renderDropDowns = function (args, targetEle) {
var _this = this;
this.initializeInstance();
var type = args.containerType;
var tbElement = args.container;
model.templateItems.forEach(function (item) {
var targetElement = undefined;
if (util_1.getIndex(item, args.items) !== -1) {
switch (item) {
case 'numberformatlist': {
targetElement = ej2_base_1.select('#' + _this.parent.getID() + '_' + type + '_NumberFormatList', tbElement);
Iif (ej2_base_1.isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
var formatOLItem = _this.parent.numberFormatList.types.slice();
formatOLItem.forEach(function (item) {
Object.defineProperties(item, {
command: { value: 'Lists', enumerable: true }, subCommand: { value: 'NumberFormatList', enumerable: true }
});
});
_this.numberFormatListDropDown = _this.toolbarRenderer.renderSplitButton({
cssClass: classes.CLS_NUMBERFORMATLIST_DROPDOWN + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN,
itemName: 'NumberFormatList', items: formatOLItem, element: targetElement,
iconCss: ('e-order-list' + ' ' + classes.CLS_ICONS)
});
break;
}
case 'bulletformatlist': {
targetElement = ej2_base_1.select('#' + _this.parent.getID() + '_' + type + '_BulletFormatList', tbElement);
Iif (ej2_base_1.isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
var formatULItem = _this.parent.bulletFormatList.types.slice();
formatULItem.forEach(function (item) {
Object.defineProperties(item, {
command: { value: 'Lists', enumerable: true }, subCommand: { value: 'BulletFormatList', enumerable: true }
});
});
_this.bulletFormatListDropDown = _this.toolbarRenderer.renderSplitButton({
cssClass: classes.CLS_BULLETFORMATLIST_DROPDOWN + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN,
itemName: 'BulletFormatList', items: formatULItem, element: targetElement,
iconCss: ('e-unorder-list' + ' ' + classes.CLS_ICONS)
});
break;
}
case 'codeblock': {
targetElement = ej2_base_1.select('#' + _this.parent.getID() + '_' + type + '_codeBlock', tbElement);
Iif (ej2_base_1.isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
var codeBlockItems = (ej2_base_1.isNullOrUndefined(_this.parent.codeBlockSettings.languages) ? [] :
_this.parent.codeBlockSettings.languages).slice();
codeBlockItems.forEach(function (item) {
Object.defineProperties(item, {
command: { value: 'CodeBlock', enumerable: true },
subCommand: { value: 'CodeBlock', enumerable: true },
text: { value: item.label, enumerable: true },
value: { value: item.language, enumerable: true }
});
});
_this.codeBlockSplitButton = _this.toolbarRenderer.renderSplitButton({
cssClass: 'e-code-block' + ' ' + classes_1.CLS_CODEBLOCK_TB_BTN + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + 'e-rte-dropdown',
itemName: 'CodeBlock', items: codeBlockItems, element: targetElement, iconCss: (classes_1.CLS_CODEBLOCK_TB_BTN_ICON + ' e-icons')
});
break;
}
case 'formats': {
targetElement = ej2_base_1.select('#' + _this.parent.getID() + '_' + type + '_Formats', tbElement);
if (ej2_base_1.isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
var formatItem = _this.parent.format.types.slice();
formatItem.forEach(function (item) {
Object.defineProperties(item, {
command: { value: 'Formats', enumerable: true }, subCommand: { value: item.value, enumerable: true }
});
});
var formatContent = ej2_base_1.isNullOrUndefined(_this.parent.format.default) ? formatItem[0].text :
_this.parent.format.default;
_this.formatDropDown = _this.toolbarRenderer.renderDropDownButton({
content: _this.dropdownContent(_this.parent.format.width, type, ((type === 'quick') ? '' : util_2.getDropDownValue(formatItem, formatContent, 'text', 'text'))),
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FORMATS_TB_BTN,
itemName: 'Formats', items: formatItem, element: targetElement
});
break;
}
case 'fontname': {
targetElement = ej2_base_1.select('#' + _this.parent.getID() + '_' + type + '_FontName', tbElement);
if (ej2_base_1.isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
var fontItem = _this.parent.fontFamily.items.slice();
fontItem.forEach(function (item) {
Object.defineProperties(item, {
command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontName', enumerable: true }
});
});
var fontNameContent = ej2_base_1.isNullOrUndefined(_this.parent.fontFamily.default) ? fontItem.length === 0 ? '' : fontItem[0].text :
_this.parent.fontFamily.default;
_this.fontNameDropDown = _this.toolbarRenderer.renderDropDownButton({
content: _this.dropdownContent(_this.parent.fontFamily.width, type, ((fontItem.length === 0) ? _this.i10n.getConstant('fontName') : (type === 'quick') ? '' : (util_2.getDropDownValue(fontItem, fontNameContent, 'text', 'text') === 'Default' ? _this.i10n.getConstant('fontName') : util_2.getDropDownValue(fontItem, fontNameContent, 'text', 'text')))),
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_NAME_TB_BTN,
itemName: 'FontName', items: fontItem, element: targetElement
});
break;
}
case 'fontsize': {
targetElement = ej2_base_1.select('#' + _this.parent.getID() + '_' + type + '_FontSize', tbElement);
if (ej2_base_1.isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
var fontsize = !ej2_base_1.isNullOrUndefined(_this.fontSizeDropDown) &&
!ej2_base_1.isNullOrUndefined(_this.fontSizeDropDown.items) && _this.fontSizeDropDown.items.length > 0 ?
_this.fontSizeDropDown.items : JSON.parse(JSON.stringify(_this.parent.fontSize.items.slice()));
fontsize.forEach(function (item) {
Object.defineProperties(item, {
command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontSize', enumerable: true }
});
});
var fontSizeContent = ej2_base_1.isNullOrUndefined(_this.parent.fontSize.default) ? fontsize.length === 0 ? '' : fontsize[0].text :
_this.parent.fontSize.default;
var fontSizeDropDownContent = ((fontSizeContent === 'Default') ? util_2.getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'text', 'text') : util_2.getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'value', 'text'));
_this.fontSizeDropDown = _this.toolbarRenderer.renderDropDownButton({
content: _this.dropdownContent(_this.parent.fontSize.width, type, fontsize.length === 0 ? _this.i10n.getConstant('fontSize') : (util_2.getFormattedFontSize((fontSizeDropDownContent === 'Default') ? _this.i10n.getConstant('fontSize') : fontSizeDropDownContent))),
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_SIZE_TB_BTN,
itemName: 'FontSize', items: fontsize, element: targetElement
});
break;
}
case 'alignments':
targetElement = ej2_base_1.select('#' + _this.parent.getID() + '_' + type + '_Alignments', tbElement);
if (ej2_base_1.isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
_this.alignDropDown = _this.toolbarRenderer.renderDropDownButton({
iconCss: 'e-justify-left e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_ALIGN_TB_BTN,
itemName: 'Alignments', items: model.alignmentItems, element: targetElement
});
break;
case 'align':
case 'videoalign':
_this.renderAlignmentDropDown(type, tbElement, targetEle, item);
break;
case 'display':
case 'audiolayoutoption':
case 'videolayoutoption':
_this.renderDisplayDropDown(type, tbElement, targetEle, item);
break;
case 'tablerows':
_this.rowDropDown(type, tbElement, targetElement, targetEle);
break;
case 'tablecolumns':
_this.columnDropDown(type, tbElement, targetElement);
break;
case 'tablecell':
_this.cellDropDown(type, tbElement, targetElement);
break;
case 'tablecellverticalalign':
_this.verticalAlignDropDown(type, tbElement, targetElement);
break;
case 'styles':
_this.tableStylesDropDown(type, tbElement, targetElement);
break;
case 'borderstyle': {
targetElement = tbElement;
var bdrStyle = void 0;
for (var _i = 0, _a = model.borderStyleItems; _i < _a.length; _i++) {
var item_1 = _a[_i];
if (targetEle.style.borderStyle === item_1.subCommand.toLowerCase()) {
bdrStyle = item_1.text;
break;
}
}
_this.tableBorderStyleDropDown = _this.toolbarRenderer.renderDropDownButton({
content: '<span class="e-rte-dropdown-btn-text-wrapper"><span class="e-rte-dropdown-btn-text">' + bdrStyle + '</span></span>',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_BORDER_STYLE_BTN,
itemName: 'BorderStyle', items: model.borderStyleItems, element: targetElement
});
break;
}
}
}
});
if (this.parent.inlineMode.enable) {
this.setCssClass({ cssClass: this.parent.getCssClass() });
}
};
DropDownButtons.prototype.getUpdateItems = function (items, value) {
var dropDownItems = items.slice();
dropDownItems.forEach(function (item) {
Object.defineProperties(item, {
command: { value: (value === 'Format' ? 'Formats' : 'Font'), enumerable: true },
subCommand: { value: (value === 'Format' ? item.value : value), enumerable: true }
});
});
return dropDownItems;
};
DropDownButtons.prototype.onPropertyChanged = function (model) {
var newProp = model.newProp;
var type;
var content;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'fontFamily':
if (this.fontNameDropDown) {
for (var _b = 0, _c = Object.keys(newProp.fontFamily); _b < _c.length; _b++) {
var fontFamily = _c[_b];
switch (fontFamily) {
case 'default':
case 'width': {
var fontItems = this.fontNameDropDown.items;
type = !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(this.fontNameDropDown.element, '.' + classes.CLS_QUICK_TB)) ?
'quick' : 'toolbar';
var fontNameContent = ej2_base_1.isNullOrUndefined(this.parent.fontFamily.default) ? fontItems[0].text :
this.parent.fontFamily.default;
content = this.dropdownContent(this.parent.fontFamily.width, type, ((type === 'quick') ? '' : (util_2.getDropDownValue(fontItems, fontNameContent, 'text', 'text')) === 'Default' ? this.i10n.getConstant('fontName') : util_2.getDropDownValue(fontItems, fontNameContent, 'text', 'text')));
this.fontNameDropDown.setProperties({ content: content });
if (!ej2_base_1.isNullOrUndefined(this.parent.fontFamily.default)) {
this.getEditNode().style.fontFamily = this.parent.fontFamily.default;
}
else {
this.getEditNode().style.removeProperty('font-family');
}
break;
}
case 'items':
this.fontNameDropDown.setProperties({
items: this.getUpdateItems(newProp.fontFamily.items, 'FontName')
});
break;
}
}
}
break;
case 'fontSize':
if (this.fontSizeDropDown) {
for (var _d = 0, _e = Object.keys(newProp.fontSize); _d < _e.length; _d++) {
var fontSize = _e[_d];
switch (fontSize) {
case 'default':
case 'width': {
var fontsize = this.fontSizeDropDown.items;
type = !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(this.fontSizeDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';
var fontSizeContent = ej2_base_1.isNullOrUndefined(this.parent.fontSize.default) ? fontsize[0].text :
this.parent.fontSize.default;
var fontSizeDropDownContent = ((fontSizeContent === 'Default') ? util_2.getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'text', 'text') : util_2.getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'value', 'text'));
content = this.dropdownContent(this.parent.fontSize.width, type, util_2.getFormattedFontSize((fontSizeDropDownContent === 'Default') ? this.i10n.getConstant('fontSize') : fontSizeDropDownContent));
this.fontSizeDropDown.setProperties({ content: content });
if (!ej2_base_1.isNullOrUndefined(this.parent.fontSize.default)) {
this.getEditNode().style.fontSize = this.parent.fontSize.default;
}
else {
this.getEditNode().style.removeProperty('font-size');
}
break;
}
case 'items':
this.fontSizeDropDown.setProperties({
items: this.getUpdateItems(newProp.fontSize.items, 'FontSize')
});
break;
}
}
}
break;
case 'format':
Eif (this.formatDropDown) {
for (var _f = 0, _g = Object.keys(newProp.format); _f < _g.length; _f++) {
var format = _g[_f];
switch (format) {
case 'default':
case 'width': {
var formatItems = this.formatDropDown.items;
type = !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(this.formatDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';
var formatContent = ej2_base_1.isNullOrUndefined(this.parent.format.default) ? formatItems[0].text :
this.parent.format.default;
content = this.dropdownContent(this.parent.format.width, type, ((type === 'quick') ? '' : util_2.getDropDownValue(formatItems, formatContent, 'text', 'text')));
this.formatDropDown.setProperties({ content: content });
break;
}
case 'types':
this.formatDropDown.setProperties({
items: this.getUpdateItems(newProp.format.types, 'Format')
});
break;
}
}
}
break;
}
}
};
DropDownButtons.prototype.getEditNode = function () {
return this.parent.contentModule.getEditPanel();
};
DropDownButtons.prototype.rowDropDown = function (type, tbElement, targetElement, targetEle) {
targetElement = ej2_base_1.select('#' + this.parent.getID() + '_' + type + '_TableRows', tbElement);
var rowItems = Array.from(model.tableRowsItems);
if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
if (targetEle.closest('th')) {
rowItems.shift();
}
this.tableRowsDropDown = this.toolbarRenderer.renderDropDownButton({
iconCss: 'e-table-rows e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
itemName: 'TableRows',
items: rowItems,
element: targetElement
});
};
DropDownButtons.prototype.columnDropDown = function (type, tbElement, targetElement) {
targetElement = ej2_base_1.select('#' + this.parent.getID() + '_' + type + '_TableColumns', tbElement);
if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
this.tableColumnsDropDown = this.toolbarRenderer.renderDropDownButton({
iconCss: 'e-table-columns e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
itemName: 'TableColumns',
items: model.tableColumnsItems,
element: targetElement
});
};
DropDownButtons.prototype.cellDropDown = function (type, tbElement, targetElement) {
targetElement = ej2_base_1.select('#' + this.parent.getID() + '_' + type + '_TableCell', tbElement);
if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
this.tableCellDropDown = this.toolbarRenderer.renderDropDownButton({
iconCss: 'e-table-cell e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
itemName: 'TableCell',
items: model.tableCellItems,
element: targetElement
});
};
DropDownButtons.prototype.verticalAlignDropDown = function (type, tbElement, targetElement) {
targetElement = ej2_base_1.select('#' + this.parent.getID() + '_' + type + '_TableCellVerticalAlign', tbElement);
if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
this.tableCellVerticalAlignDropDown = this.toolbarRenderer.renderDropDownButton({
iconCss: 'e-table-cell-ver-align e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
itemName: 'TableCellVerticalAlign',
items: model.TableCellVerticalAlignItems,
element: targetElement
});
};
DropDownButtons.prototype.renderDisplayDropDown = function (type, tbElement, targetElement, item) {
var targetEle = targetElement;
targetElement = ej2_base_1.select('#' + this.parent.getID() + '_' + type + (item === 'display' ? '_Display' : item === 'videolayoutoption' ? '_VideoLayoutOption' : '_AudioLayoutOption'), tbElement);
if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
this.displayDropDown = this.toolbarRenderer.renderDropDownButton({
iconCss: item === 'display' ? 'e-display e-icons' : item === 'videolayoutoption' ? 'e-video-display e-icons' : 'e-audio-display e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
itemName: item === 'display' ? 'Display' : item === 'videolayoutoption' ? 'VideoLayoutOption' : 'AudioLayoutOption',
items: item === 'display' ? model.imageDisplayItems : item === 'videolayoutoption' ? model.videoLayoutOptionItems : model.audioLayoutOptionItems,
element: targetElement,
activeElement: targetEle
});
};
DropDownButtons.prototype.renderAlignmentDropDown = function (type, tbElement, targetElement, item) {
var targetEle = targetElement;
targetElement = ej2_base_1.select('#' + this.parent.getID() + '_' + type + (item === 'align' ? '_Align' : '_VideoAlign'), tbElement);
if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({
iconCss: 'e-justify-left e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,
itemName: item === 'align' ? 'Align' : 'VideoAlign',
items: item === 'align' ? model.imageAlignItems : model.videoAlignItems,
element: targetElement,
activeElement: targetEle
});
};
DropDownButtons.prototype.tableStylesDropDown = function (type, tbElement, targetElement) {
targetElement = ej2_base_1.select('#' + this.parent.getID() + '_' + type + '_Styles', tbElement);
if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
return;
}
this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({
iconCss: 'e-style e-icons',
cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,
itemName: 'Styles',
items: this.parent.tableSettings.styles,
element: targetElement
});
};
DropDownButtons.prototype.removeDropDownClasses = function (target) {
ej2_base_1.removeClass([target], [
classes.CLS_DROPDOWN_BTN,
classes.CLS_DROPDOWN_POPUP,
classes.CLS_DROPDOWN_ICONS,
classes.CLS_DROPDOWN_ITEMS
]);
};
DropDownButtons.prototype.destroyDropDowns = function () {
if (this.formatDropDown) {
this.removeDropDownClasses(this.formatDropDown.element);
this.formatDropDown.destroy();
this.formatDropDown = null;
}
if (this.fontNameDropDown) {
this.removeDropDownClasses(this.fontNameDropDown.element);
this.fontNameDropDown.destroy();
this.fontNameDropDown = null;
}
if (this.fontSizeDropDown) {
this.removeDropDownClasses(this.fontSizeDropDown.element);
this.fontSizeDropDown.destroy();
this.fontSizeDropDown = null;
}
if (this.alignDropDown) {
this.removeDropDownClasses(this.alignDropDown.element);
this.alignDropDown.destroy();
this.alignDropDown = null;
}
if (this.imageAlignDropDown) {
this.removeDropDownClasses(this.imageAlignDropDown.element);
this.imageAlignDropDown.destroy();
this.imageAlignDropDown = null;
}
if (this.displayDropDown) {
this.removeDropDownClasses(this.displayDropDown.element);
this.displayDropDown.destroy();
this.displayDropDown = null;
}
if (this.tableRowsDropDown) {
this.removeDropDownClasses(this.tableRowsDropDown.element);
this.tableRowsDropDown.destroy();
this.tableRowsDropDown = null;
}
if (this.tableColumnsDropDown) {
this.removeDropDownClasses(this.tableColumnsDropDown.element);
this.tableColumnsDropDown.destroy();
this.tableColumnsDropDown = null;
}
if (this.tableCellDropDown) {
this.removeDropDownClasses(this.tableCellDropDown.element);
this.tableCellDropDown.destroy();
this.tableCellDropDown = null;
}
if (this.tableCellVerticalAlignDropDown) {
this.removeDropDownClasses(this.tableCellVerticalAlignDropDown.element);
this.tableCellVerticalAlignDropDown.destroy();
this.tableCellVerticalAlignDropDown = null;
}
if (this.numberFormatListDropDown) {
this.removeDropDownClasses(this.numberFormatListDropDown.element);
this.numberFormatListDropDown.destroy();
this.numberFormatListDropDown = null;
}
if (this.bulletFormatListDropDown) {
this.removeDropDownClasses(this.bulletFormatListDropDown.element);
this.bulletFormatListDropDown.destroy();
this.bulletFormatListDropDown = null;
}
if (this.codeBlockSplitButton) {
this.removeDropDownClasses(this.codeBlockSplitButton.element);
this.codeBlockSplitButton.destroy();
this.codeBlockSplitButton = null;
}
if (this.tableBorderStyleDropDown) {
this.removeDropDownClasses(this.tableBorderStyleDropDown.element);
this.tableBorderStyleDropDown.destroy();
this.tableBorderStyleDropDown = null;
}
this.toolbarRenderer = null;
};
DropDownButtons.prototype.showDropDown = function (e) {
if (!ej2_base_1.isNullOrUndefined(this.numberFormatListDropDown) && (e.toolbarClick === 'NumberFormatList')) {
this.numberFormatListDropDown.toggle();
}
else Eif (!ej2_base_1.isNullOrUndefined(this.bulletFormatListDropDown) && (e.toolbarClick === 'BulletFormaList')) {
this.bulletFormatListDropDown.toggle();
}
else if (!ej2_base_1.isNullOrUndefined(this.codeBlockSplitButton) && (e.toolbarClick === 'CodeBlock')) {
this.codeBlockSplitButton.toggle();
}
};
DropDownButtons.prototype.setRtl = function (args) {
if (this.formatDropDown) {
this.formatDropDown.setProperties({ enableRtl: args.enableRtl });
}
if (this.fontNameDropDown) {
this.fontNameDropDown.setProperties({ enableRtl: args.enableRtl });
}
if (this.fontSizeDropDown) {
this.fontSizeDropDown.setProperties({ enableRtl: args.enableRtl });
}
if (this.alignDropDown) {
this.alignDropDown.setProperties({ enableRtl: args.enableRtl });
}
Iif (this.imageAlignDropDown) {
this.imageAlignDropDown.setProperties({ enableRtl: args.enableRtl });
}
Iif (this.displayDropDown) {
this.displayDropDown.setProperties({ enableRtl: args.enableRtl });
}
Iif (this.numberFormatListDropDown) {
this.numberFormatListDropDown.setProperties({ enableRtl: args.enableRtl });
}
Iif (this.bulletFormatListDropDown) {
this.bulletFormatListDropDown.setProperties({ enableRtl: args.enableRtl });
}
Iif (this.tableBorderStyleDropDown) {
this.tableBorderStyleDropDown.setProperties({ enableRtl: args.enableRtl });
}
};
DropDownButtons.prototype.updateCss = function (dropDownObj, e) {
if (dropDownObj && e.cssClass) {
if (ej2_base_1.isNullOrUndefined(e.oldCssClass)) {
dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
}
else {
dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
}
}
};
DropDownButtons.prototype.setCssClass = function (e) {
var dropDownObj = [
this.formatDropDown, this.fontNameDropDown, this.fontSizeDropDown, this.alignDropDown, this.imageAlignDropDown,
this.displayDropDown, this.numberFormatListDropDown, this.bulletFormatListDropDown, this.tableRowsDropDown,
this.tableColumnsDropDown, this.tableCellDropDown, this.tableCellVerticalAlignDropDown, this.tableBorderStyleDropDown
];
for (var i = 0; i < dropDownObj.length; i++) {
this.updateCss(dropDownObj[i], e);
}
};
DropDownButtons.prototype.addEventListener = function () {
Iif (this.parent.isDestroyed) {
return;
}
this.parent.on(events.beforeDropDownItemRender, this.beforeRender, this);
this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
this.parent.on(events.rtlMode, this.setRtl, this);
this.parent.on(events.modelChanged, this.onPropertyChanged, this);
this.parent.on(events.bindCssClass, this.setCssClass, this);
this.parent.on(events.showDropDown, this.showDropDown, this);
};
DropDownButtons.prototype.onIframeMouseDown = function () {
var toolbarElement = this.parent.getToolbarElement();
Eif (!ej2_base_1.isNullOrUndefined(toolbarElement)) {
var dropdownBtnEle = toolbarElement.querySelectorAll('.e-dropdown-btn[aria-expanded="true"]');
if (dropdownBtnEle && dropdownBtnEle.length > 0) {
this.closeOpenDropdowns();
}
if (toolbarElement.querySelector('.e-rte-dropdown.e-dropdown-btn.e-active')) {
var targetEle = toolbarElement.querySelector('.e-rte-dropdown.e-dropdown-btn.e-active');
var hasFontColor = targetEle.classList.contains('e-rte-font-colorpicker');
Eif (hasFontColor || targetEle.classList.contains('e-rte-background-colorpicker')) {
this.parent.notify(events.showColorPicker, {
toolbarClick: hasFontColor ?
'fontcolor' : 'backgroundcolor'
});
}
}
}
};
DropDownButtons.prototype.closeOpenDropdowns = function () {
var dropdowns = [
this.formatDropDown,
this.fontNameDropDown,
this.fontSizeDropDown,
this.alignDropDown,
this.imageAlignDropDown,
this.displayDropDown,
this.numberFormatListDropDown,
this.bulletFormatListDropDown,
this.tableRowsDropDown,
this.tableColumnsDropDown,
this.tableCellDropDown,
this.tableCellVerticalAlignDropDown,
this.tableBorderStyleDropDown
];
dropdowns.forEach(function (dropdown) {
if (dropdown && dropdown.dropDown && dropdown.dropDown.element && dropdown.dropDown.element.classList.contains('e-popup-open')) {
dropdown.toggle();
}
});
};
DropDownButtons.prototype.removeEventListener = function () {
this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
this.parent.off(events.rtlMode, this.setRtl);
this.parent.off(events.beforeDropDownItemRender, this.beforeRender);
this.parent.off(events.modelChanged, this.onPropertyChanged);
this.parent.off(events.bindCssClass, this.setCssClass);
this.parent.off(events.showDropDown, this.showDropDown);
};
DropDownButtons.prototype.destroy = function () {
this.removeEventListener();
this.destroyDropDowns();
};
return DropDownButtons;
}());
exports.DropDownButtons = DropDownButtons;
});
|