| 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 | 1×
1×
1×
1×
11095×
11095×
11095×
11095×
11095×
11095×
6×
11089×
1×
3102×
1×
3102×
3102×
3102×
3102×
3102×
3102×
3102×
71346×
5205×
251×
251×
251×
251×
376×
376×
4×
372×
372×
13×
13×
3×
9×
9×
3×
13×
13×
13×
13×
13×
3×
9×
9×
3×
13×
13×
13×
3102×
82×
1×
2529×
2529×
2529×
2529×
2529×
2529×
2529×
1×
8137×
250×
8137×
371×
8137×
13×
8137×
13×
1×
2563×
1×
2563×
1×
2563×
2563×
1×
2623×
2623×
2623×
2623×
1×
10492×
8×
6×
2×
1×
11095×
11095×
11095×
11095×
11095×
1×
4×
2×
2×
2×
1×
242×
242×
322×
322×
10×
10×
10×
10×
2×
2×
1×
1×
3×
3×
2×
2×
1×
1×
1×
1×
10×
10×
10×
10×
10×
2×
2×
1×
1×
3×
3×
2×
2×
1×
1×
1×
1×
10×
1×
2529×
2529×
2529×
2529×
2529×
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, targetElement) {
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': {
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_FONT_COLORPICKER + ' ' +
_this.tools[item.toLocaleLowerCase()].icon
+ ' ' + 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)
};
Iif (!ej2_base_1.isNullOrUndefined(options.element.nextElementSibling) &&
options.element.nextElementSibling.classList.contains(classes.CLS_DROPDOWN)) {
return;
}
_this.fontColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'fontcolor', args.containerType);
break;
}
case 'backgroundcolor': {
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_BACKGROUND_COLORPICKER + ' ' +
_this.tools[item.toLocaleLowerCase()].icon + ' ' +
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)
};
if (!ej2_base_1.isNullOrUndefined(options.element.nextElementSibling) &&
options.element.nextElementSibling.classList.contains(classes.CLS_DROPDOWN)) {
return;
}
_this.backgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'backgroundcolor', args.containerType);
break;
}
case 'bordercolor': {
var bdrColor = targetElement.style.borderColor;
if (bdrColor.match(/\d+/g)) {
var hex = '#' + bdrColor.match(/\d+/g).slice(0, 3).map(function (n) {
var h = parseInt(n, 10).toString(16);
return h.length === 1 ? '0' + h : h;
}).join('');
bdrColor = hex;
}
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_BORDERCOLOR_COLORPICKER + _this.parent.getCssClass(true),
value: bdrColor ? bdrColor : _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: tbElement,
target: (targetID)
};
_this.borderColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'bordercolor', args.containerType);
break;
}
case 'tablebackgroundcolor': {
var bgColor = targetElement.style.backgroundColor;
if (bgColor.match(/\d+/g)) {
var hex = '#' + bgColor.match(/\d+/g).slice(0, 3).map(function (n) {
var h = parseInt(n, 10).toString(16);
return h.length === 1 ? '0' + h : h;
}).join('');
bgColor = hex;
}
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_TABLE_BGCOLOR_COLORPICKER + _this.parent.getCssClass(true),
value: bgColor ? bgColor : _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: tbElement,
target: (targetID)
};
_this.tableBackgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'tablebackgroundcolor', args.containerType);
break;
}
}
}
});
if (this.parent.inlineMode.enable) {
this.setCssClass({ cssClass: this.parent.getCssClass() });
}
};
ColorPickerInput.prototype.destroy = function () {
this.removeEventListener();
this.destroyColorPicker();
this.fontColorPicker = null;
this.backgroundColorPicker = null;
this.borderColorPicker = null;
this.tableBackgroundColorPicker = 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.borderColorPicker && !this.borderColorPicker.isDestroyed) {
this.borderColorPicker.destroy();
}
if (this.tableBackgroundColorPicker && !this.tableBackgroundColorPicker.isDestroyed) {
this.tableBackgroundColorPicker.destroy();
}
};
ColorPickerInput.prototype.setRtl = function (args) {
if (this.fontColorPicker) {
this.fontColorPicker.setProperties({ enableRtl: args.enableRtl });
}
if (this.backgroundColorPicker) {
this.backgroundColorPicker.setProperties({ enableRtl: args.enableRtl });
}
Iif (this.borderColorPicker) {
this.borderColorPicker.setProperties({ enableRtl: args.enableRtl });
}
Iif (this.tableBackgroundColorPicker) {
this.tableBackgroundColorPicker.setProperties({ enableRtl: args.enableRtl });
}
};
ColorPickerInput.prototype.setCssClass = function (e) {
this.updateCss(this.fontColorPicker, e);
this.updateCss(this.backgroundColorPicker, e);
this.updateCss(this.borderColorPicker, e);
this.updateCss(this.tableBackgroundColorPicker, e);
};
ColorPickerInput.prototype.updateCss = function (colorPickerObj, e) {
if (colorPickerObj && e.cssClass) {
if (ej2_base_1.isNullOrUndefined(e.oldCssClass)) {
colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass + ' ' + e.cssClass).trim() });
}
else {
colorPickerObj.setProperties({ cssClass: (colorPickerObj.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.fontColorPicker.toggle();
}
else Eif (!ej2_base_1.isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === 'backgroundcolor')) {
this.backgroundColorPicker.toggle();
}
};
ColorPickerInput.prototype.onPropertyChanged = function (model) {
var newProp = model.newProp;
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 });
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;
case 'showRecentColors':
this.fontColorPicker.setProperties({ showRecentColors: newProp.fontColor.showRecentColors });
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 });
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;
case 'showRecentColors':
this.backgroundColorPicker.setProperties({ showRecentColors: newProp.backgroundColor.showRecentColors });
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;
});
|