| 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 | 1×
1×
1×
1×
1×
14×
14×
14×
14×
14×
14×
1×
1×
1×
14×
14×
1×
14×
14×
14×
14×
14×
14×
14×
14×
1×
1×
14×
14×
14×
98×
98×
98×
98×
1×
14×
1×
98×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
14×
14×
98×
98×
98×
98×
14×
14×
1×
1×
| define(["require", "exports", "../ribbon-base/ribbon-constants", "@syncfusion/ej2-base", "@syncfusion/ej2-ribbon", "../../helper/bullet-list-helper"], function (require, exports, ribbon_constants_1, ej2_base_1, ej2_ribbon_1, bullet_list_helper_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BULLET_LIST_ID = '_bullet_list';
var BulletsGroup = (function () {
function BulletsGroup(container) {
this.appliedBulletStyle = 'dot';
this.eventHandlers = {};
this.bulletElements = {};
this.container = container;
this.ribbonId = this.container.element.id + ribbon_constants_1.RIBBON_ID;
this.localObj = this.container.localObj;
}
Object.defineProperty(BulletsGroup.prototype, "documentEditor", {
get: function () {
return this.container.documentEditor;
},
enumerable: true,
configurable: true
});
BulletsGroup.prototype.getBulletListItem = function () {
var id = this.ribbonId;
return {
type: 'SplitButton',
allowedSizes: ej2_ribbon_1.RibbonItemSize.Small,
keyTip: 'U',
splitButtonSettings: this.createBulletSplitButton(),
id: id + exports.BULLET_LIST_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Bullets') }
};
};
BulletsGroup.prototype.createBulletSplitButton = function () {
var _this = this;
var bulletIconCss = 'e-de-ctnr-bullets e-icons';
Iif (this.container.enableRtl) {
bulletIconCss += ' e-de-flip';
}
var bulletDropDiv = ej2_base_1.createElement('div', {
id: this.ribbonId + '_bullet_list_div',
styles: 'width: 196px;height: auto;visibility: hidden'
});
var bulletDropUlTag = ej2_base_1.createElement('ul', {
styles: 'visibility: visible; outline: 0px;',
id: this.ribbonId + '_listMenu',
className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
});
bulletDropDiv.appendChild(bulletDropUlTag);
this.createBulletElements(bulletDropUlTag);
return {
target: bulletDropDiv,
iconCss: bulletIconCss,
content: this.localObj.getConstant('Bullets'),
items: this.getBulletItems(),
select: this.handleBulletSelection.bind(this),
beforeOpen: function () {
bulletDropDiv.style.visibility = 'visible';
if (!ej2_base_1.isNullOrUndefined(_this.documentEditor.selectionModule)) {
if (ej2_base_1.isNullOrUndefined(_this.documentEditor.selectionModule.paragraphFormat.listId) ||
_this.documentEditor.selectionModule.paragraphFormat.listId === -1) {
_this.updateSelectedBulletListType(_this.documentEditor.selectionModule.paragraphFormat.listText);
}
else {
var startParagraph = _this.documentEditor.selectionModule.isForward ?
_this.documentEditor.selectionModule.start.paragraph : _this.documentEditor.selectionModule.end.paragraph;
_this.updateSelectedBulletListType(startParagraph.paragraphFormat.listFormat.listLevel.numberFormat);
}
}
},
beforeClose: function () {
bulletDropDiv.style.visibility = 'hidden';
_this.removeSelectedList();
},
click: function () {
_this.applyLastAppliedBullet();
}
};
};
BulletsGroup.prototype.createBulletElements = function (ulTag) {
var _this = this;
var bulletTypes = [
{ key: 'none', cssClass: 'e-de-ctnr-bullet-none e-icons e-de-ctnr-list', isNone: true, handler: this.bulletNoneClick.bind(this) },
{ key: 'dot', cssClass: 'e-de-ctnr-bullet-dot e-icons e-de-ctnr-list', isNone: false, handler: this.bulletDotClick.bind(this) },
{ key: 'circle', cssClass: 'e-de-ctnr-bullet-circle e-icons e-de-ctnr-list', isNone: false, handler: this.bulletCircleClick.bind(this) },
{ key: 'square', cssClass: 'e-de-ctnr-bullet-square e-icons e-de-ctnr-list', isNone: false, handler: this.bulletSquareClick.bind(this) },
{ key: 'flower', cssClass: 'e-de-ctnr-bullet-flower e-icons e-de-ctnr-list', isNone: false, handler: this.bulletFlowerClick.bind(this) },
{ key: 'arrow', cssClass: 'e-de-ctnr-bullet-arrow e-icons e-de-ctnr-list', isNone: false, handler: this.bulletArrowClick.bind(this) },
{ key: 'tick', cssClass: 'e-de-ctnr-bullet-tick e-icons e-de-ctnr-list', isNone: false, handler: this.bulletTickClick.bind(this) }
];
bulletTypes.forEach(function (type) {
var element = _this.createBulletListTag(ulTag, type.cssClass, type.isNone);
element.addEventListener('click', type.handler);
_this.bulletElements[type.key] = element;
_this.eventHandlers[type.key] = { element: element, handler: type.handler };
});
};
BulletsGroup.prototype.getBulletItems = function () {
return [
{ id: this.ribbonId + '_bullet-none', text: this.localObj.getConstant('None') },
{ id: this.ribbonId + '_bullet-dot', text: this.localObj.getConstant('Dot') },
{ id: this.ribbonId + '_bullet-circle', text: this.localObj.getConstant('Circle') },
{ id: this.ribbonId + '_bullet-square', text: this.localObj.getConstant('Square') },
{ id: this.ribbonId + '_bullet-flower', text: this.localObj.getConstant('Flower') },
{ id: this.ribbonId + '_bullet-arrow', text: this.localObj.getConstant('Arrow') },
{ id: this.ribbonId + '_bullet-tick', text: this.localObj.getConstant('Tick') }
];
};
BulletsGroup.prototype.createBulletListTag = function (ulTag, iconCss, isNone) {
return bullet_list_helper_1.BulletListHelper.createBulletListTag(ulTag, iconCss, isNone, this.localObj);
};
BulletsGroup.prototype.updateSelectedBulletListType = function (listText) {
bullet_list_helper_1.BulletListHelper.updateSelectedBulletListType(listText, this.bulletElements);
};
BulletsGroup.prototype.removeSelectedList = function () {
bullet_list_helper_1.BulletListHelper.removeSelectedList(this.bulletElements);
};
BulletsGroup.prototype.applyLastAppliedBullet = function () {
this.applyBulletStyle(this.appliedBulletStyle);
};
BulletsGroup.prototype.handleBulletSelection = function (args) {
var styleMap = {};
styleMap[this.localObj.getConstant('None')] = 'none';
styleMap[this.localObj.getConstant('Dot')] = 'dot';
styleMap[this.localObj.getConstant('Circle')] = 'circle';
styleMap[this.localObj.getConstant('Square')] = 'square';
styleMap[this.localObj.getConstant('Flower')] = 'flower';
styleMap[this.localObj.getConstant('Arrow')] = 'arrow';
styleMap[this.localObj.getConstant('Tick')] = 'tick';
var style = styleMap[args.item.text];
if (style) {
this.applyBulletStyle(style);
}
};
BulletsGroup.prototype.applyBulletStyle = function (style) {
var appliedStyle = { value: this.appliedBulletStyle };
bullet_list_helper_1.BulletListHelper.applyBulletStyle(this.documentEditor, style, appliedStyle);
this.appliedBulletStyle = appliedStyle.value;
};
BulletsGroup.prototype.bulletNoneClick = function () {
bullet_list_helper_1.BulletListHelper.clearList(this.documentEditor);
};
BulletsGroup.prototype.bulletDotClick = function () {
this.applyBulletStyle('dot');
};
BulletsGroup.prototype.bulletCircleClick = function () {
this.applyBulletStyle('circle');
};
BulletsGroup.prototype.bulletSquareClick = function () {
this.applyBulletStyle('square');
};
BulletsGroup.prototype.bulletFlowerClick = function () {
this.applyBulletStyle('flower');
};
BulletsGroup.prototype.bulletArrowClick = function () {
this.applyBulletStyle('arrow');
};
BulletsGroup.prototype.bulletTickClick = function () {
this.applyBulletStyle('tick');
};
BulletsGroup.prototype.destroy = function () {
var keys = Object.keys(this.eventHandlers);
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
var item = this.eventHandlers[key];
Eif (item.element && item.handler) {
item.element.removeEventListener('click', item.handler);
}
}
this.eventHandlers = {};
this.bulletElements = {};
};
return BulletsGroup;
}());
exports.BulletsGroup = BulletsGroup;
});
|