-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
ColorPicker.ts
126 lines (112 loc) · 4.14 KB
/
ColorPicker.ts
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
/**
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
* Licensed under the LGPL or a commercial license.
* For LGPL see License.txt in the project root for license information.
* For commercial licenses see https://www.tiny.cloud/
*/
import { ColourPicker } from '@ephox/acid';
import { AlloyTriggers, Behaviour, Composing, Form, Memento, NativeEvents, Representing, SimpleSpec } from '@ephox/alloy';
import { Types } from '@ephox/bridge';
import { console } from '@ephox/dom-globals';
import { Option } from '@ephox/katamari';
import { ComposingConfigs } from '../alien/ComposingConfigs';
import { formActionEvent } from '../general/FormEvents';
import { Omit } from '../Omit';
// import I18n from 'tinymce/core/api/util/I18n';
const english = {
'colorcustom.rgb.red.label': 'R',
'colorcustom.rgb.red.description': 'Red component',
'colorcustom.rgb.green.label': 'G',
'colorcustom.rgb.green.description': 'Green component',
'colorcustom.rgb.blue.label': 'B',
'colorcustom.rgb.blue.description': 'Blue component',
'colorcustom.rgb.hex.label': '#',
'colorcustom.rgb.hex.description': 'Hex color code',
'colorcustom.rgb.range': 'Range 0 to 255',
'colorcustom.sb.saturation': 'Saturation',
'colorcustom.sb.brightness': 'Brightness',
'colorcustom.sb.picker': 'Saturation and Brightness Picker',
'colorcustom.sb.palette': 'Saturation and Brightness Palette',
'colorcustom.sb.instructions': 'Use arrow keys to select saturation and brightness, on x and y axes',
'colorcustom.hue.hue': 'Hue',
'colorcustom.hue.slider': 'Hue Slider',
'colorcustom.hue.palette': 'Hue Palette',
'colorcustom.hue.instructions': 'Use arrow keys to select a hue',
'aria.color.picker': 'Color Picker',
'aria.input.invalid': 'Invalid input'
};
const getEnglishText = function (key) {
return english[key];
};
const translate = function (key) {
// TODO: use this: I18n.translate()
return getEnglishText(key);
};
type ColorPickerSpec = Omit<Types.ColorPicker.ColorPicker, 'type'>;
export const renderColorPicker = (spec: ColorPickerSpec): SimpleSpec => {
const getClass = (key: string) => 'tox-' + key;
const colourPickerFactory = ColourPicker.makeFactory(translate, getClass);
const onValidHex = (form) => {
AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: true }, );
};
const onInvalidHex = (form) => {
AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: false } );
};
const memPicker = Memento.record(
colourPickerFactory.sketch({
dom: {
tag: 'div',
classes: [getClass('color-picker-container')],
attributes: {
role: 'presentation'
}
},
onValidHex,
onInvalidHex
})
);
return {
dom: {
tag: 'div'
},
components: [
memPicker.asSpec()
],
behaviours: Behaviour.derive([
// We'll allow invalid values
Representing.config({
store: {
mode: 'manual',
getValue: (comp) => {
const picker = memPicker.get(comp);
const optRgbForm = Composing.getCurrent(picker);
const optHex = optRgbForm.bind((rgbForm) => {
const formValues = Representing.getValue(rgbForm);
return formValues.hex as Option<string>;
}) ;
return optHex.map((hex) => '#' + hex).getOr('');
},
setValue: (comp, newValue) => {
const pattern = /^#([a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?)/;
const m = pattern.exec(newValue);
const picker = memPicker.get(comp);
const optRgbForm = Composing.getCurrent(picker);
optRgbForm.fold(() => {
// tslint:disable-next-line:no-console
console.log('Can not find form');
}, (rgbForm) => {
Representing.setValue(rgbForm, {
hex: Option.from(m[1]).getOr('')
});
// So not the way to do this.
Form.getField(rgbForm, 'hex').each((hexField) => {
AlloyTriggers.emit(hexField, NativeEvents.input());
});
});
}
}
}),
ComposingConfigs.self()
])
};
};