| 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 | 1×
1×
1×
1×
3808×
3808×
3808×
3808×
3808×
3808×
2×
3806×
1×
2173×
1×
2173×
2173×
2173×
2173×
2173×
2173×
2173×
41287×
3681×
178×
178×
178×
178×
178×
3×
3×
3×
3×
178×
178×
178×
178×
178×
235×
235×
235×
235×
235×
3×
3×
3×
3×
235×
235×
235×
235×
235×
2173×
80×
1×
1821×
1821×
1821×
1821×
1821×
1821×
1821×
1821×
1×
2242×
178×
2242×
235×
2242×
173×
173×
173×
173×
2242×
208×
208×
208×
208×
208×
1×
1812×
1×
1×
1812×
1×
1×
1×
1899×
1899×
1×
3798×
8×
6×
6×
2×
2×
1×
3808×
3808×
3808×
3808×
3808×
1×
2×
1×
1×
1×
1×
211×
211×
211×
284×
284×
6×
6×
6×
6×
2×
2×
2×
2×
2×
1×
1×
1×
1×
1×
1×
1×
1×
6×
6×
6×
6×
6×
2×
2×
2×
2×
2×
1×
1×
1×
1×
1×
1×
1×
1×
6×
1×
1821×
1821×
1821×
1821×
1821×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../base/enum", "../base/constant", "../base/classes", "../base/util", "../models/items"], function (require, exports, ej2_base_1, enum_1, events, classes, util_1, items_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ColorPickerInput = (function () {
function ColorPickerInput(parent, serviceLocator) {
this.tools = {};
this.parent = parent;
this.locator = serviceLocator;
this.renderFactory = this.locator.getService('rendererFactory');
this.addEventListener();
if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {
ej2_base_1.extend(this.tools, items_1.tools, util_1.toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);
}
else {
this.tools = items_1.tools;
}
}
ColorPickerInput.prototype.initializeInstance = function () {
this.toolbarRenderer = this.renderFactory.getRenderer(enum_1.RenderType.Toolbar);
};
ColorPickerInput.prototype.renderColorPickerInput = function (args) {
var _this = this;
this.initializeInstance();
var suffixID = args.containerType;
var tbElement = args.container;
var targetID;
var options;
items_1.templateItems.forEach(function (item) {
if (util_1.getIndex(item, args.items) !== -1) {
switch (item) {
case 'fontcolor': {
targetID = _this.parent.getID() + '_' + suffixID + '_FontColor_Target';
var fontNode = _this.parent.createElement('input');
fontNode.id = targetID;
fontNode.classList.add(classes.CLS_FONT_COLOR_TARGET);
if (!ej2_base_1.isNullOrUndefined(_this.parent.cssClass)) {
var allClassName = _this.parent.cssClass.split(' ');
for (var i = 0; i < allClassName.length; i++) {
Eif (allClassName[i].trim() !== '') {
fontNode.classList.add(allClassName[i]);
}
}
}
document.body.appendChild(fontNode);
options = {
cssClass: _this.tools[item.toLocaleLowerCase()].icon
+ ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
value: _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: ej2_base_1.select('#' + _this.parent.getID() + '_' + suffixID + '_FontColor', tbElement),
target: (targetID)
};
_this.fontColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'fontcolor');
_this.fontColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'fontcolor', _this.fontColorPicker);
break;
}
case 'backgroundcolor': {
targetID = _this.parent.getID() + '_' + suffixID + '_BackgroundColor_Target';
var backNode = _this.parent.createElement('input');
backNode.id = targetID;
backNode.classList.add(classes.CLS_BACKGROUND_COLOR_TARGET);
if (!ej2_base_1.isNullOrUndefined(_this.parent.cssClass)) {
var allClassName = _this.parent.cssClass.split(' ');
for (var i = 0; i < allClassName.length; i++) {
Eif (allClassName[i].trim() !== '') {
backNode.classList.add(allClassName[i]);
}
}
}
document.body.appendChild(backNode);
options = {
cssClass: _this.tools[item.toLocaleLowerCase()].icon
+ ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
value: _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: ej2_base_1.select('#' + _this.parent.getID() + '_' + suffixID + '_BackgroundColor', tbElement),
target: (targetID)
};
_this.backgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'backgroundcolor');
_this.backgroundColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'backgroundcolor', _this.backgroundColorPicker, _this.defaultColorPicker);
break;
}
}
}
});
if (this.parent.inlineMode.enable) {
this.setCssClass({ cssClass: this.parent.getCssClass() });
}
};
ColorPickerInput.prototype.destroy = function () {
this.removeEventListener();
this.destroyColorPicker();
this.defaultColorPicker = null;
this.fontColorPicker = null;
this.fontColorDropDown = null;
this.backgroundColorDropDown = null;
this.backgroundColorPicker = null;
this.tools = {};
};
ColorPickerInput.prototype.destroyColorPicker = function () {
if (this.fontColorPicker && !this.fontColorPicker.isDestroyed) {
this.fontColorPicker.destroy();
}
if (this.backgroundColorPicker && !this.backgroundColorPicker.isDestroyed) {
this.backgroundColorPicker.destroy();
}
if (this.fontColorDropDown && !this.fontColorDropDown.isDestroyed) {
var innerEle = this.fontColorDropDown.element.querySelector('.e-rte-color-content');
Eif (innerEle) {
ej2_base_1.detach(innerEle);
}
this.fontColorDropDown.destroy();
}
if (this.backgroundColorDropDown && !this.backgroundColorDropDown.isDestroyed) {
var innerEle = this.backgroundColorDropDown.element.querySelector('.e-rte-color-content');
Eif (innerEle) {
this.defaultColorPicker = innerEle.children[0].style.borderBottomColor;
ej2_base_1.detach(innerEle);
}
this.backgroundColorDropDown.destroy();
}
};
ColorPickerInput.prototype.setRtl = function (args) {
if (this.fontColorPicker) {
this.fontColorPicker.setProperties({ enableRtl: args.enableRtl });
this.fontColorDropDown.setProperties({ enableRtl: args.enableRtl });
}
if (this.backgroundColorPicker) {
this.backgroundColorPicker.setProperties({ enableRtl: args.enableRtl });
this.backgroundColorDropDown.setProperties({ enableRtl: args.enableRtl });
}
};
ColorPickerInput.prototype.setCssClass = function (e) {
this.updateCss(this.fontColorPicker, this.fontColorDropDown, e);
this.updateCss(this.backgroundColorPicker, this.backgroundColorDropDown, e);
};
ColorPickerInput.prototype.updateCss = function (colorPickerObj, dropDownObj, e) {
if (colorPickerObj && e.cssClass) {
if (ej2_base_1.isNullOrUndefined(e.oldCssClass)) {
colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass + ' ' + e.cssClass).trim() });
dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
}
else {
colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').replace(' ', ' ').trim() + ' ' + e.cssClass).trim() });
dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').replace(' ', ' ').trim() + ' ' + e.cssClass).trim() });
}
}
};
ColorPickerInput.prototype.addEventListener = function () {
this.parent.on(events.toolbarRenderComplete, this.renderColorPickerInput, 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.showColorPicker, this.showColorPicker, this);
};
ColorPickerInput.prototype.showColorPicker = function (e) {
if (!ej2_base_1.isNullOrUndefined(this.fontColorPicker) && (e.toolbarClick === 'fontcolor')) {
this.fontColorDropDown.toggle();
}
else Eif (!ej2_base_1.isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === 'backgroundcolor')) {
this.backgroundColorDropDown.toggle();
}
};
ColorPickerInput.prototype.onPropertyChanged = function (model) {
var newProp = model.newProp;
var element;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'fontColor':
Eif (this.fontColorPicker) {
for (var _b = 0, _c = Object.keys(newProp.fontColor); _b < _c.length; _b++) {
var font = _c[_b];
switch (font) {
case 'default': {
this.fontColorPicker.setProperties({ value: newProp.fontColor.default });
element = this.fontColorDropDown.element;
var fontBorder = element.querySelector('.' + this.tools['fontcolor'].icon);
fontBorder.style.borderBottomColor = newProp.fontColor.default;
break;
}
case 'mode':
this.fontColorPicker.setProperties({ mode: newProp.fontColor.mode });
break;
case 'columns':
this.fontColorPicker.setProperties({ columns: newProp.fontColor.columns });
break;
case 'colorCode':
this.fontColorPicker.setProperties({ presetColors: newProp.fontColor.colorCode });
break;
case 'modeSwitcher':
this.fontColorPicker.setProperties({ modeSwitcher: newProp.fontColor.modeSwitcher });
break;
}
}
}
break;
case 'backgroundColor':
Eif (this.backgroundColorPicker) {
for (var _d = 0, _e = Object.keys(newProp.backgroundColor); _d < _e.length; _d++) {
var background = _e[_d];
switch (background) {
case 'default': {
this.backgroundColorPicker.setProperties({ value: newProp.backgroundColor.default });
element = this.backgroundColorDropDown.element;
var backgroundBorder = element.querySelector('.' + this.tools['backgroundcolor'].icon);
backgroundBorder.style.borderBottomColor = newProp.backgroundColor.default;
break;
}
case 'mode':
this.backgroundColorPicker.setProperties({ mode: newProp.backgroundColor.mode });
break;
case 'columns':
this.backgroundColorPicker.setProperties({ columns: newProp.backgroundColor.columns });
break;
case 'colorCode':
this.backgroundColorPicker.setProperties({ presetColors: newProp.backgroundColor.colorCode });
break;
case 'modeSwitcher':
this.backgroundColorPicker.setProperties({ modeSwitcher: newProp.backgroundColor.modeSwitcher });
break;
}
}
}
break;
}
}
};
ColorPickerInput.prototype.removeEventListener = function () {
this.parent.off(events.toolbarRenderComplete, this.renderColorPickerInput);
this.parent.off(events.rtlMode, this.setRtl);
this.parent.off(events.modelChanged, this.onPropertyChanged);
this.parent.off(events.bindCssClass, this.setCssClass);
this.parent.off(events.showColorPicker, this.showColorPicker);
};
return ColorPickerInput;
}());
exports.ColorPickerInput = ColorPickerInput;
});
|