| 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 | 1×
1×
1×
1×
880×
880×
1×
880×
880×
880×
880×
540×
880×
3×
1×
4×
4×
4×
4×
1×
3×
880×
880×
880×
880×
880×
880×
880×
880×
5×
3×
7×
7×
7×
7×
1×
6×
880×
880×
880×
880×
880×
880×
1×
1769×
1769×
1760×
1769×
1769×
1769×
1×
8×
1×
8×
8×
2×
8×
1×
4×
4×
3×
3×
3×
3×
3×
1×
1×
1×
1×
880×
880×
880×
880×
880×
880×
880×
880×
880×
1×
880×
880×
880×
1×
880×
880×
880×
880×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-inputs", "@syncfusion/ej2-base", "../common/index", "../../workbook/common/index"], function (require, exports, ej2_inputs_1, ej2_base_1, index_1, index_2) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ColorPicker = (function () {
function ColorPicker(parent) {
this.parent = parent;
this.addEventListener();
}
ColorPicker.prototype.render = function () {
var _this = this;
var id = this.parent.element.id;
var input = this.parent.createElement('input', { attrs: { 'type': 'color' } });
var tileRenderHandler = function (args) {
args.element.tabIndex = -1;
};
this.fontColorPicker = new ej2_inputs_1.ColorPicker({
value: '#000000ff',
mode: 'Palette',
showButtons: false,
presetColors: index_1.fontColor,
enableOpacity: false,
cssClass: 'e-spreadsheet-color-popup',
beforeTileRender: tileRenderHandler,
beforeClose: function () { return _this.beforeCloseHandler(_this.fontColorPicker); },
open: this.openHandler.bind(this),
beforeModeSwitch: function (args) { return _this.beforeModeSwitch(_this.fontColorPicker, args); },
change: function (args) {
var color = _this.fontColorPicker.getValue(args.currentValue.rgba);
var eventArgs = { style: { color: color }, onActionUpdate: true };
_this.parent.notify(index_2.setCellFormat, eventArgs);
if (eventArgs.cancel) {
_this.fontColorPicker.setProperties({ 'value': _this.fontColorPicker.getValue(args.previousValue.rgba, 'HEXA') }, true);
}
else {
_this.updateSelectedColor(eventArgs.style.color, _this.fontColorPicker.element, 'TextColor');
}
},
created: function () { return _this.updateSelectedColor('#000000', _this.fontColorPicker.element, 'TextColor', true); }
});
this.fontColorPicker.createElement = this.parent.createElement;
this.parent.element.appendChild(input);
this.fontColorPicker.appendTo(input);
input.parentElement.id = id + "_font_color_picker";
ej2_base_1.addClass([input.nextElementSibling.getElementsByClassName('e-selected-color')[0]], ['e-icons', 'e-font-color']);
input = this.parent.createElement('input', { attrs: { 'type': 'color' } });
this.filColorPicker = new ej2_inputs_1.ColorPicker({
value: '#ffff00ff',
mode: 'Palette',
presetColors: index_1.fillColor,
showButtons: false,
enableOpacity: false,
cssClass: 'e-spreadsheet-color-popup',
open: this.openHandler.bind(this),
beforeTileRender: tileRenderHandler,
beforeClose: function () { return _this.beforeCloseHandler(_this.filColorPicker); },
beforeModeSwitch: function (args) { return _this.beforeModeSwitch(_this.filColorPicker, args); },
change: function (args) {
var color = _this.filColorPicker.getValue(args.currentValue.rgba);
var eventArgs = { style: { backgroundColor: color }, onActionUpdate: true };
_this.parent.notify(index_2.setCellFormat, eventArgs);
if (eventArgs.cancel) {
_this.filColorPicker.setProperties({ 'value': _this.filColorPicker.getValue(args.previousValue.rgba, 'HEXA') }, true);
}
else {
_this.updateSelectedColor(eventArgs.style.backgroundColor, _this.filColorPicker.element, 'FillColor');
}
},
created: function () { return _this.updateSelectedColor('#ffff00', _this.filColorPicker.element, 'FillColor', true); }
});
this.filColorPicker.createElement = this.parent.createElement;
this.parent.element.appendChild(input);
this.filColorPicker.appendTo(input);
input.parentElement.id = id + "_fill_color_picker";
ej2_base_1.addClass([input.nextElementSibling.getElementsByClassName('e-selected-color')[0]], ['e-icons', 'e-fill-color']);
};
ColorPicker.prototype.updateSelectedColor = function (color, ele, name, isCreated) {
var localeText = this.parent.serviceLocator.getService(index_1.locale).getConstant(name);
if (isCreated) {
ele.parentElement.querySelector('.e-dropdown-btn').setAttribute('aria-label', localeText);
}
var primaryBtn = ele.parentElement.querySelector('.e-split-colorpicker');
primaryBtn.setAttribute('aria-label', localeText + " " + color);
primaryBtn.firstElementChild.style.borderBottomColor = color;
};
ColorPicker.prototype.openHandler = function (args) {
args.element.querySelector('.e-mode-switch-btn').title =
this.parent.serviceLocator.getService(index_1.locale).getConstant('MoreColors');
};
ColorPicker.prototype.beforeCloseHandler = function (inst) {
Iif (!inst.modeSwitcher) {
inst.setProperties({ modeSwitcher: true }, true);
}
if (inst.showButtons) {
inst.setProperties({ showButtons: false }, true);
}
index_1.focus(inst.element.parentElement.querySelector('.e-split-colorpicker'));
};
ColorPicker.prototype.beforeModeSwitch = function (inst, args) {
var l10n = this.parent.serviceLocator.getService(index_1.locale);
if (args.mode === 'Picker') {
inst.showButtons = true;
inst.dataBind();
args.element.querySelector('.e-apply').title = l10n.getConstant('Apply');
args.element.querySelector('.e-cancel').title = l10n.getConstant('Cancel');
args.element.querySelector('.e-mode-switch-btn').title = l10n.getConstant('StandardColors');
}
else {
inst.showButtons = false;
inst.dataBind();
args.element.querySelector('.e-mode-switch-btn').title = l10n.getConstant('MoreColors');
}
};
ColorPicker.prototype.destroy = function () {
Eif (this.parent) {
this.removeEventListener();
Eif (this.fontColorPicker) {
this.fontColorPicker.destroy();
}
this.fontColorPicker = null;
Eif (this.filColorPicker) {
this.filColorPicker.destroy();
}
this.filColorPicker = null;
this.parent = null;
}
};
ColorPicker.prototype.addEventListener = function () {
this.parent.on(index_1.beforeRibbonCreate, this.render, this);
this.parent.on('destroyRibbonComponents', this.destroy, this);
this.parent.on(index_1.spreadsheetDestroyed, this.destroy, this);
};
ColorPicker.prototype.removeEventListener = function () {
Eif (!this.parent.isDestroyed) {
this.parent.off(index_1.beforeRibbonCreate, this.render);
this.parent.off('destroyRibbonComponents', this.destroy);
this.parent.off(index_1.spreadsheetDestroyed, this.destroy);
}
};
return ColorPicker;
}());
exports.ColorPicker = ColorPicker;
});
|