@digipair/skill-web-jsoneditor 0.113.1 → 0.114.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/{index.esm.js → dist/index.cjs.js} +18545 -18139
- package/{index.cjs.js → dist/index.esm.js} +18543 -18143
- package/{libs/skill-web-jsoneditor → dist}/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -0
- package/{libs/skill-web-jsoneditor → dist}/src/lib/jsoneditor.element.d.ts +1 -0
- package/dist/src/lib/jsoneditor.element.d.ts.map +1 -0
- package/dist/src/lib/skill-web-jsoneditor.d.ts +2 -0
- package/dist/src/lib/skill-web-jsoneditor.d.ts.map +1 -0
- package/{vanilla-picker.cjs.js → dist/vanilla-picker.cjs.js} +256 -262
- package/{vanilla-picker.esm.js → dist/vanilla-picker.esm.js} +255 -261
- package/package.json +26 -5
- package/index.d.ts +0 -1
- package/libs/skill-web-jsoneditor/src/lib/skill-web-jsoneditor.d.ts +0 -1
- /package/{index.cjs.d.ts → dist/index.d.ts} +0 -0
- /package/{schema.fr.json → dist/schema.fr.json} +0 -0
- /package/{schema.json → dist/schema.json} +0 -0
|
@@ -78,159 +78,159 @@ String.prototype.padStart = String.prototype.padStart || function(len, pad) {
|
|
|
78
78
|
return str;
|
|
79
79
|
};
|
|
80
80
|
var colorNames = {
|
|
81
|
-
cb:
|
|
82
|
-
tqw:
|
|
83
|
-
q:
|
|
84
|
-
qmrn:
|
|
85
|
-
zr:
|
|
86
|
-
bg:
|
|
87
|
-
bsq:
|
|
88
|
-
bck:
|
|
89
|
-
nch:
|
|
90
|
-
b:
|
|
91
|
-
bvt:
|
|
92
|
-
brwn:
|
|
93
|
-
brw:
|
|
94
|
-
ctb:
|
|
95
|
-
hrt:
|
|
96
|
-
chcT:
|
|
97
|
-
cr:
|
|
98
|
-
rnw:
|
|
99
|
-
crns:
|
|
100
|
-
crms:
|
|
101
|
-
cn:
|
|
102
|
-
Db:
|
|
103
|
-
Dcn:
|
|
104
|
-
Dgnr:
|
|
105
|
-
Dgr:
|
|
106
|
-
Dgrn:
|
|
107
|
-
Dkhk:
|
|
108
|
-
Dmgn:
|
|
109
|
-
Dvgr:
|
|
110
|
-
Drng:
|
|
111
|
-
Drch:
|
|
112
|
-
Dr:
|
|
113
|
-
Dsmn:
|
|
114
|
-
Dsgr:
|
|
115
|
-
DsTb:
|
|
116
|
-
DsTg:
|
|
117
|
-
Dtrq:
|
|
118
|
-
Dvt:
|
|
119
|
-
ppnk:
|
|
120
|
-
pskb:
|
|
121
|
-
mgr:
|
|
122
|
-
grb:
|
|
123
|
-
rbrc:
|
|
124
|
-
rwht:
|
|
125
|
-
stg:
|
|
126
|
-
chs:
|
|
127
|
-
gnsb:
|
|
128
|
-
st:
|
|
129
|
-
g:
|
|
130
|
-
gnr:
|
|
131
|
-
gr:
|
|
132
|
-
grn:
|
|
133
|
-
grnw:
|
|
134
|
-
hnw:
|
|
135
|
-
htpn:
|
|
136
|
-
nnr:
|
|
137
|
-
ng:
|
|
138
|
-
vr:
|
|
139
|
-
khk:
|
|
140
|
-
vnr:
|
|
141
|
-
nrb:
|
|
142
|
-
wngr:
|
|
143
|
-
mnch:
|
|
144
|
-
Lb:
|
|
145
|
-
Lcr:
|
|
146
|
-
Lcn:
|
|
147
|
-
Lgnr:
|
|
148
|
-
Lgr:
|
|
149
|
-
Lgrn:
|
|
150
|
-
Lpnk:
|
|
151
|
-
Lsmn:
|
|
152
|
-
Lsgr:
|
|
153
|
-
Lskb:
|
|
154
|
-
LsTg:
|
|
155
|
-
Lstb:
|
|
156
|
-
Lw:
|
|
157
|
-
m:
|
|
158
|
-
mgrn:
|
|
159
|
-
nn:
|
|
160
|
-
mgnt:
|
|
161
|
-
mrn:
|
|
162
|
-
mqm:
|
|
163
|
-
mmb:
|
|
164
|
-
mmrc:
|
|
165
|
-
mmpr:
|
|
166
|
-
msg:
|
|
167
|
-
mmsT:
|
|
168
|
-
|
|
169
|
-
mtr:
|
|
170
|
-
mmvt:
|
|
171
|
-
mnLb:
|
|
172
|
-
ntc:
|
|
173
|
-
mstr:
|
|
174
|
-
mccs:
|
|
175
|
-
vjw:
|
|
176
|
-
nv:
|
|
177
|
-
c:
|
|
178
|
-
v:
|
|
179
|
-
vrb:
|
|
180
|
-
rng:
|
|
181
|
-
rngr:
|
|
182
|
-
rch:
|
|
183
|
-
pgnr:
|
|
184
|
-
pgrn:
|
|
185
|
-
ptrq:
|
|
186
|
-
pvtr:
|
|
187
|
-
ppwh:
|
|
188
|
-
pchp:
|
|
189
|
-
pr:
|
|
190
|
-
pnk:
|
|
191
|
-
pm:
|
|
192
|
-
pwrb:
|
|
193
|
-
prp:
|
|
194
|
-
cc:
|
|
195
|
-
r:
|
|
196
|
-
sbr:
|
|
197
|
-
rb:
|
|
198
|
-
sbrw:
|
|
199
|
-
smn:
|
|
200
|
-
nbr:
|
|
201
|
-
sgrn:
|
|
202
|
-
ssh:
|
|
203
|
-
snn:
|
|
204
|
-
svr:
|
|
205
|
-
skb:
|
|
206
|
-
sTb:
|
|
207
|
-
sTgr:
|
|
208
|
-
snw:
|
|
209
|
-
n:
|
|
210
|
-
stb:
|
|
211
|
-
tn:
|
|
212
|
-
t:
|
|
213
|
-
thst:
|
|
214
|
-
tmT:
|
|
215
|
-
trqs:
|
|
216
|
-
vt:
|
|
217
|
-
whT:
|
|
218
|
-
wht:
|
|
219
|
-
hts:
|
|
220
|
-
w:
|
|
221
|
-
wgrn:
|
|
81
|
+
cb: '0f8ff',
|
|
82
|
+
tqw: 'aebd7',
|
|
83
|
+
q: '-ffff',
|
|
84
|
+
qmrn: '7fffd4',
|
|
85
|
+
zr: '0ffff',
|
|
86
|
+
bg: '5f5dc',
|
|
87
|
+
bsq: 'e4c4',
|
|
88
|
+
bck: '---',
|
|
89
|
+
nch: 'ebcd',
|
|
90
|
+
b: '--ff',
|
|
91
|
+
bvt: '8a2be2',
|
|
92
|
+
brwn: 'a52a2a',
|
|
93
|
+
brw: 'deb887',
|
|
94
|
+
ctb: '5f9ea0',
|
|
95
|
+
hrt: '7fff-',
|
|
96
|
+
chcT: 'd2691e',
|
|
97
|
+
cr: '7f50',
|
|
98
|
+
rnw: '6495ed',
|
|
99
|
+
crns: '8dc',
|
|
100
|
+
crms: 'dc143c',
|
|
101
|
+
cn: '-ffff',
|
|
102
|
+
Db: '--8b',
|
|
103
|
+
Dcn: '-8b8b',
|
|
104
|
+
Dgnr: 'b8860b',
|
|
105
|
+
Dgr: 'a9a9a9',
|
|
106
|
+
Dgrn: '-64-',
|
|
107
|
+
Dkhk: 'bdb76b',
|
|
108
|
+
Dmgn: '8b-8b',
|
|
109
|
+
Dvgr: '556b2f',
|
|
110
|
+
Drng: '8c-',
|
|
111
|
+
Drch: '9932cc',
|
|
112
|
+
Dr: '8b--',
|
|
113
|
+
Dsmn: 'e9967a',
|
|
114
|
+
Dsgr: '8fbc8f',
|
|
115
|
+
DsTb: '483d8b',
|
|
116
|
+
DsTg: '2f4f4f',
|
|
117
|
+
Dtrq: '-ced1',
|
|
118
|
+
Dvt: '94-d3',
|
|
119
|
+
ppnk: '1493',
|
|
120
|
+
pskb: '-bfff',
|
|
121
|
+
mgr: '696969',
|
|
122
|
+
grb: '1e90ff',
|
|
123
|
+
rbrc: 'b22222',
|
|
124
|
+
rwht: 'af0',
|
|
125
|
+
stg: '228b22',
|
|
126
|
+
chs: '-ff',
|
|
127
|
+
gnsb: 'dcdcdc',
|
|
128
|
+
st: '8f8ff',
|
|
129
|
+
g: 'd7-',
|
|
130
|
+
gnr: 'daa520',
|
|
131
|
+
gr: '808080',
|
|
132
|
+
grn: '-8-0',
|
|
133
|
+
grnw: 'adff2f',
|
|
134
|
+
hnw: '0fff0',
|
|
135
|
+
htpn: '69b4',
|
|
136
|
+
nnr: 'cd5c5c',
|
|
137
|
+
ng: '4b-82',
|
|
138
|
+
vr: '0',
|
|
139
|
+
khk: '0e68c',
|
|
140
|
+
vnr: 'e6e6fa',
|
|
141
|
+
nrb: '0f5',
|
|
142
|
+
wngr: '7cfc-',
|
|
143
|
+
mnch: 'acd',
|
|
144
|
+
Lb: 'add8e6',
|
|
145
|
+
Lcr: '08080',
|
|
146
|
+
Lcn: 'e0ffff',
|
|
147
|
+
Lgnr: 'afad2',
|
|
148
|
+
Lgr: 'd3d3d3',
|
|
149
|
+
Lgrn: '90ee90',
|
|
150
|
+
Lpnk: 'b6c1',
|
|
151
|
+
Lsmn: 'a07a',
|
|
152
|
+
Lsgr: '20b2aa',
|
|
153
|
+
Lskb: '87cefa',
|
|
154
|
+
LsTg: '778899',
|
|
155
|
+
Lstb: 'b0c4de',
|
|
156
|
+
Lw: 'e0',
|
|
157
|
+
m: '-ff-',
|
|
158
|
+
mgrn: '32cd32',
|
|
159
|
+
nn: 'af0e6',
|
|
160
|
+
mgnt: '-ff',
|
|
161
|
+
mrn: '8--0',
|
|
162
|
+
mqm: '66cdaa',
|
|
163
|
+
mmb: '--cd',
|
|
164
|
+
mmrc: 'ba55d3',
|
|
165
|
+
mmpr: '9370db',
|
|
166
|
+
msg: '3cb371',
|
|
167
|
+
mmsT: '7b68ee',
|
|
168
|
+
'': '-fa9a',
|
|
169
|
+
mtr: '48d1cc',
|
|
170
|
+
mmvt: 'c71585',
|
|
171
|
+
mnLb: '191970',
|
|
172
|
+
ntc: '5fffa',
|
|
173
|
+
mstr: 'e4e1',
|
|
174
|
+
mccs: 'e4b5',
|
|
175
|
+
vjw: 'dead',
|
|
176
|
+
nv: '--80',
|
|
177
|
+
c: 'df5e6',
|
|
178
|
+
v: '808-0',
|
|
179
|
+
vrb: '6b8e23',
|
|
180
|
+
rng: 'a5-',
|
|
181
|
+
rngr: '45-',
|
|
182
|
+
rch: 'da70d6',
|
|
183
|
+
pgnr: 'eee8aa',
|
|
184
|
+
pgrn: '98fb98',
|
|
185
|
+
ptrq: 'afeeee',
|
|
186
|
+
pvtr: 'db7093',
|
|
187
|
+
ppwh: 'efd5',
|
|
188
|
+
pchp: 'dab9',
|
|
189
|
+
pr: 'cd853f',
|
|
190
|
+
pnk: 'c0cb',
|
|
191
|
+
pm: 'dda0dd',
|
|
192
|
+
pwrb: 'b0e0e6',
|
|
193
|
+
prp: '8-080',
|
|
194
|
+
cc: '663399',
|
|
195
|
+
r: '--',
|
|
196
|
+
sbr: 'bc8f8f',
|
|
197
|
+
rb: '4169e1',
|
|
198
|
+
sbrw: '8b4513',
|
|
199
|
+
smn: 'a8072',
|
|
200
|
+
nbr: '4a460',
|
|
201
|
+
sgrn: '2e8b57',
|
|
202
|
+
ssh: '5ee',
|
|
203
|
+
snn: 'a0522d',
|
|
204
|
+
svr: 'c0c0c0',
|
|
205
|
+
skb: '87ceeb',
|
|
206
|
+
sTb: '6a5acd',
|
|
207
|
+
sTgr: '708090',
|
|
208
|
+
snw: 'afa',
|
|
209
|
+
n: '-ff7f',
|
|
210
|
+
stb: '4682b4',
|
|
211
|
+
tn: 'd2b48c',
|
|
212
|
+
t: '-8080',
|
|
213
|
+
thst: 'd8bfd8',
|
|
214
|
+
tmT: '6347',
|
|
215
|
+
trqs: '40e0d0',
|
|
216
|
+
vt: 'ee82ee',
|
|
217
|
+
whT: '5deb3',
|
|
218
|
+
wht: '',
|
|
219
|
+
hts: '5f5f5',
|
|
220
|
+
w: '-',
|
|
221
|
+
wgrn: '9acd32'
|
|
222
222
|
};
|
|
223
223
|
function printNum(num) {
|
|
224
224
|
var decs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
|
225
|
-
var str = decs > 0 ? num.toFixed(decs).replace(/0+$/,
|
|
226
|
-
return str ||
|
|
225
|
+
var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, '').replace(/\.$/, '') : num.toString();
|
|
226
|
+
return str || '0';
|
|
227
227
|
}
|
|
228
228
|
var Color = function() {
|
|
229
229
|
function Color(r, g, b, a) {
|
|
230
230
|
classCallCheck(this, Color);
|
|
231
231
|
var that = this;
|
|
232
232
|
function parseString(input) {
|
|
233
|
-
if (input.startsWith(
|
|
233
|
+
if (input.startsWith('hsl')) {
|
|
234
234
|
var _input$match$map = input.match(/([\-\d\.e]+)/g).map(Number), _input$match$map2 = slicedToArray(_input$match$map, 4), h = _input$match$map2[0], s = _input$match$map2[1], l = _input$match$map2[2], _a = _input$match$map2[3];
|
|
235
235
|
if (_a === undefined) {
|
|
236
236
|
_a = 1;
|
|
@@ -244,7 +244,7 @@ var Color = function() {
|
|
|
244
244
|
l,
|
|
245
245
|
_a
|
|
246
246
|
];
|
|
247
|
-
} else if (input.startsWith(
|
|
247
|
+
} else if (input.startsWith('rgb')) {
|
|
248
248
|
var _input$match$map3 = input.match(/([\-\d\.e]+)/g).map(Number), _input$match$map4 = slicedToArray(_input$match$map3, 4), _r = _input$match$map4[0], _g = _input$match$map4[1], _b = _input$match$map4[2], _a2 = _input$match$map4[3];
|
|
249
249
|
if (_a2 === undefined) {
|
|
250
250
|
_a2 = 1;
|
|
@@ -256,7 +256,7 @@ var Color = function() {
|
|
|
256
256
|
_a2
|
|
257
257
|
];
|
|
258
258
|
} else {
|
|
259
|
-
if (input.startsWith(
|
|
259
|
+
if (input.startsWith('#')) {
|
|
260
260
|
that.rgba = Color.hexToRgb(input);
|
|
261
261
|
} else {
|
|
262
262
|
that.rgba = Color.nameToRgb(input) || Color.hexToRgb(input);
|
|
@@ -267,7 +267,7 @@ var Color = function() {
|
|
|
267
267
|
else if (Array.isArray(r)) {
|
|
268
268
|
this.rgba = r;
|
|
269
269
|
} else if (b === undefined) {
|
|
270
|
-
var color = r &&
|
|
270
|
+
var color = r && '' + r;
|
|
271
271
|
if (color) {
|
|
272
272
|
parseString(color.toLowerCase());
|
|
273
273
|
}
|
|
@@ -282,16 +282,16 @@ var Color = function() {
|
|
|
282
282
|
}
|
|
283
283
|
createClass(Color, [
|
|
284
284
|
{
|
|
285
|
-
key:
|
|
285
|
+
key: 'printRGB',
|
|
286
286
|
value: function printRGB(alpha) {
|
|
287
287
|
var rgb = alpha ? this.rgba : this.rgba.slice(0, 3), vals = rgb.map(function(x, i) {
|
|
288
288
|
return printNum(x, i === 3 ? 3 : 0);
|
|
289
289
|
});
|
|
290
|
-
return alpha ?
|
|
290
|
+
return alpha ? 'rgba(' + vals + ')' : 'rgb(' + vals + ')';
|
|
291
291
|
}
|
|
292
292
|
},
|
|
293
293
|
{
|
|
294
|
-
key:
|
|
294
|
+
key: 'printHSL',
|
|
295
295
|
value: function printHSL(alpha) {
|
|
296
296
|
var mults = [
|
|
297
297
|
360,
|
|
@@ -299,32 +299,32 @@ var Color = function() {
|
|
|
299
299
|
100,
|
|
300
300
|
1
|
|
301
301
|
], suff = [
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
302
|
+
'',
|
|
303
|
+
'%',
|
|
304
|
+
'%',
|
|
305
|
+
''
|
|
306
306
|
];
|
|
307
307
|
var hsl = alpha ? this.hsla : this.hsla.slice(0, 3), vals = hsl.map(function(x, i) {
|
|
308
308
|
return printNum(x * mults[i], i === 3 ? 3 : 1) + suff[i];
|
|
309
309
|
});
|
|
310
|
-
return alpha ?
|
|
310
|
+
return alpha ? 'hsla(' + vals + ')' : 'hsl(' + vals + ')';
|
|
311
311
|
}
|
|
312
312
|
},
|
|
313
313
|
{
|
|
314
|
-
key:
|
|
314
|
+
key: 'printHex',
|
|
315
315
|
value: function printHex(alpha) {
|
|
316
316
|
var hex = this.hex;
|
|
317
317
|
return alpha ? hex : hex.substring(0, 7);
|
|
318
318
|
}
|
|
319
319
|
},
|
|
320
320
|
{
|
|
321
|
-
key:
|
|
321
|
+
key: 'rgba',
|
|
322
322
|
get: function get() {
|
|
323
323
|
if (this._rgba) {
|
|
324
324
|
return this._rgba;
|
|
325
325
|
}
|
|
326
326
|
if (!this._hsla) {
|
|
327
|
-
throw new Error(
|
|
327
|
+
throw new Error('No color is set');
|
|
328
328
|
}
|
|
329
329
|
return this._rgba = Color.hslToRgb(this._hsla);
|
|
330
330
|
},
|
|
@@ -337,25 +337,25 @@ var Color = function() {
|
|
|
337
337
|
}
|
|
338
338
|
},
|
|
339
339
|
{
|
|
340
|
-
key:
|
|
340
|
+
key: 'rgbString',
|
|
341
341
|
get: function get() {
|
|
342
342
|
return this.printRGB();
|
|
343
343
|
}
|
|
344
344
|
},
|
|
345
345
|
{
|
|
346
|
-
key:
|
|
346
|
+
key: 'rgbaString',
|
|
347
347
|
get: function get() {
|
|
348
348
|
return this.printRGB(true);
|
|
349
349
|
}
|
|
350
350
|
},
|
|
351
351
|
{
|
|
352
|
-
key:
|
|
352
|
+
key: 'hsla',
|
|
353
353
|
get: function get() {
|
|
354
354
|
if (this._hsla) {
|
|
355
355
|
return this._hsla;
|
|
356
356
|
}
|
|
357
357
|
if (!this._rgba) {
|
|
358
|
-
throw new Error(
|
|
358
|
+
throw new Error('No color is set');
|
|
359
359
|
}
|
|
360
360
|
return this._hsla = Color.rgbToHsl(this._rgba);
|
|
361
361
|
},
|
|
@@ -368,26 +368,26 @@ var Color = function() {
|
|
|
368
368
|
}
|
|
369
369
|
},
|
|
370
370
|
{
|
|
371
|
-
key:
|
|
371
|
+
key: 'hslString',
|
|
372
372
|
get: function get() {
|
|
373
373
|
return this.printHSL();
|
|
374
374
|
}
|
|
375
375
|
},
|
|
376
376
|
{
|
|
377
|
-
key:
|
|
377
|
+
key: 'hslaString',
|
|
378
378
|
get: function get() {
|
|
379
379
|
return this.printHSL(true);
|
|
380
380
|
}
|
|
381
381
|
},
|
|
382
382
|
{
|
|
383
|
-
key:
|
|
383
|
+
key: 'hex',
|
|
384
384
|
get: function get() {
|
|
385
385
|
var rgb = this.rgba, hex = rgb.map(function(x, i) {
|
|
386
386
|
return i < 3 ? x.toString(16) : Math.round(x * 255).toString(16);
|
|
387
387
|
});
|
|
388
|
-
return
|
|
389
|
-
return x.padStart(2,
|
|
390
|
-
}).join(
|
|
388
|
+
return '#' + hex.map(function(x) {
|
|
389
|
+
return x.padStart(2, '0');
|
|
390
|
+
}).join('');
|
|
391
391
|
},
|
|
392
392
|
set: function set(hex) {
|
|
393
393
|
this.rgba = Color.hexToRgb(hex);
|
|
@@ -395,11 +395,11 @@ var Color = function() {
|
|
|
395
395
|
}
|
|
396
396
|
], [
|
|
397
397
|
{
|
|
398
|
-
key:
|
|
398
|
+
key: 'hexToRgb',
|
|
399
399
|
value: function hexToRgb(input) {
|
|
400
|
-
var hex = (input.startsWith(
|
|
400
|
+
var hex = (input.startsWith('#') ? input.slice(1) : input).replace(/^(\w{3})$/, '$1F').replace(/^(\w)(\w)(\w)(\w)$/, '$1$1$2$2$3$3$4$4').replace(/^(\w{6})$/, '$1FF');
|
|
401
401
|
if (!hex.match(/^([0-9a-fA-F]{8})$/)) {
|
|
402
|
-
throw new Error(
|
|
402
|
+
throw new Error('Unknown hex color; ' + input);
|
|
403
403
|
}
|
|
404
404
|
var rgba = hex.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1).map(function(x) {
|
|
405
405
|
return parseInt(x, 16);
|
|
@@ -409,14 +409,14 @@ var Color = function() {
|
|
|
409
409
|
}
|
|
410
410
|
},
|
|
411
411
|
{
|
|
412
|
-
key:
|
|
412
|
+
key: 'nameToRgb',
|
|
413
413
|
value: function nameToRgb(input) {
|
|
414
|
-
var hash = input.toLowerCase().replace(
|
|
415
|
-
return hex === undefined ? hex : Color.hexToRgb(hex.replace(/\-/g,
|
|
414
|
+
var hash = input.toLowerCase().replace('at', 'T').replace(/[aeiouyldf]/g, '').replace('ght', 'L').replace('rk', 'D').slice(-5, 4), hex = colorNames[hash];
|
|
415
|
+
return hex === undefined ? hex : Color.hexToRgb(hex.replace(/\-/g, '00').padStart(6, 'f'));
|
|
416
416
|
}
|
|
417
417
|
},
|
|
418
418
|
{
|
|
419
|
-
key:
|
|
419
|
+
key: 'rgbToHsl',
|
|
420
420
|
value: function rgbToHsl(_ref) {
|
|
421
421
|
var _ref2 = slicedToArray(_ref, 4), r = _ref2[0], g = _ref2[1], b = _ref2[2], a = _ref2[3];
|
|
422
422
|
r /= 255;
|
|
@@ -451,7 +451,7 @@ var Color = function() {
|
|
|
451
451
|
}
|
|
452
452
|
},
|
|
453
453
|
{
|
|
454
|
-
key:
|
|
454
|
+
key: 'hslToRgb',
|
|
455
455
|
value: function hslToRgb(_ref3) {
|
|
456
456
|
var _ref4 = slicedToArray(_ref3, 4), h = _ref4[0], s = _ref4[1], l = _ref4[2], a = _ref4[3];
|
|
457
457
|
var r = void 0, g = void 0, b = void 0;
|
|
@@ -490,7 +490,7 @@ var EventBucket = function() {
|
|
|
490
490
|
}
|
|
491
491
|
createClass(EventBucket, [
|
|
492
492
|
{
|
|
493
|
-
key:
|
|
493
|
+
key: 'add',
|
|
494
494
|
value: function add(target, type, handler) {
|
|
495
495
|
target.addEventListener(type, handler, false);
|
|
496
496
|
this._events.push({
|
|
@@ -501,7 +501,7 @@ var EventBucket = function() {
|
|
|
501
501
|
}
|
|
502
502
|
},
|
|
503
503
|
{
|
|
504
|
-
key:
|
|
504
|
+
key: 'remove',
|
|
505
505
|
value: function remove(target, type, handler) {
|
|
506
506
|
this._events = this._events.filter(function(e) {
|
|
507
507
|
var isMatch = true;
|
|
@@ -522,7 +522,7 @@ var EventBucket = function() {
|
|
|
522
522
|
}
|
|
523
523
|
},
|
|
524
524
|
{
|
|
525
|
-
key:
|
|
525
|
+
key: 'destroy',
|
|
526
526
|
value: function destroy() {
|
|
527
527
|
this._events.forEach(function(e) {
|
|
528
528
|
return EventBucket._doRemove(e.target, e.type, e.handler);
|
|
@@ -532,7 +532,7 @@ var EventBucket = function() {
|
|
|
532
532
|
}
|
|
533
533
|
], [
|
|
534
534
|
{
|
|
535
|
-
key:
|
|
535
|
+
key: '_doRemove',
|
|
536
536
|
value: function _doRemove(target, type, handler) {
|
|
537
537
|
target.removeEventListener(type, handler, false);
|
|
538
538
|
}
|
|
@@ -541,7 +541,7 @@ var EventBucket = function() {
|
|
|
541
541
|
return EventBucket;
|
|
542
542
|
}();
|
|
543
543
|
function parseHTML(htmlString) {
|
|
544
|
-
var div = document.createElement(
|
|
544
|
+
var div = document.createElement('div');
|
|
545
545
|
div.innerHTML = htmlString;
|
|
546
546
|
return div.firstElementChild;
|
|
547
547
|
}
|
|
@@ -577,27 +577,27 @@ function dragTrack(eventBucket, area, callback) {
|
|
|
577
577
|
dragging = false;
|
|
578
578
|
}
|
|
579
579
|
}
|
|
580
|
-
eventBucket.add(area,
|
|
580
|
+
eventBucket.add(area, 'mousedown', function(e) {
|
|
581
581
|
onMouse(e, true);
|
|
582
582
|
});
|
|
583
|
-
eventBucket.add(area,
|
|
583
|
+
eventBucket.add(area, 'touchstart', function(e) {
|
|
584
584
|
onTouch(e, true);
|
|
585
585
|
});
|
|
586
|
-
eventBucket.add(window,
|
|
587
|
-
eventBucket.add(area,
|
|
588
|
-
eventBucket.add(window,
|
|
586
|
+
eventBucket.add(window, 'mousemove', onMouse);
|
|
587
|
+
eventBucket.add(area, 'touchmove', onTouch);
|
|
588
|
+
eventBucket.add(window, 'mouseup', function(e) {
|
|
589
589
|
dragging = false;
|
|
590
590
|
});
|
|
591
|
-
eventBucket.add(area,
|
|
591
|
+
eventBucket.add(area, 'touchend', function(e) {
|
|
592
592
|
dragging = false;
|
|
593
593
|
});
|
|
594
|
-
eventBucket.add(area,
|
|
594
|
+
eventBucket.add(area, 'touchcancel', function(e) {
|
|
595
595
|
dragging = false;
|
|
596
596
|
});
|
|
597
597
|
}
|
|
598
|
-
var BG_TRANSP =
|
|
598
|
+
var BG_TRANSP = 'linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0 / 2em 2em,\n linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em / 2em 2em';
|
|
599
599
|
var HUES = 360;
|
|
600
|
-
var EVENT_KEY =
|
|
600
|
+
var EVENT_KEY = 'keydown', EVENT_CLICK_OUTSIDE = 'mousedown', EVENT_TAB_MOVE = 'focusin';
|
|
601
601
|
function $(selector, context) {
|
|
602
602
|
return (context || document).querySelector(selector);
|
|
603
603
|
}
|
|
@@ -608,9 +608,6 @@ function stopEvent(e) {
|
|
|
608
608
|
function onKey(bucket, target, keys, handler, stop) {
|
|
609
609
|
bucket.add(target, EVENT_KEY, function(e) {
|
|
610
610
|
if (keys.indexOf(e.key) >= 0) {
|
|
611
|
-
if (stop) {
|
|
612
|
-
stopEvent(e);
|
|
613
|
-
}
|
|
614
611
|
handler(e);
|
|
615
612
|
}
|
|
616
613
|
});
|
|
@@ -619,13 +616,13 @@ var Picker = function() {
|
|
|
619
616
|
function Picker(options) {
|
|
620
617
|
classCallCheck(this, Picker);
|
|
621
618
|
this.settings = {
|
|
622
|
-
popup:
|
|
623
|
-
layout:
|
|
619
|
+
popup: 'right',
|
|
620
|
+
layout: 'default',
|
|
624
621
|
alpha: true,
|
|
625
622
|
editor: true,
|
|
626
|
-
editorFormat:
|
|
623
|
+
editorFormat: 'hex',
|
|
627
624
|
cancelButton: false,
|
|
628
|
-
defaultColor:
|
|
625
|
+
defaultColor: '#0cf'
|
|
629
626
|
};
|
|
630
627
|
this._events = new EventBucket();
|
|
631
628
|
this.onChange = null;
|
|
@@ -636,7 +633,7 @@ var Picker = function() {
|
|
|
636
633
|
}
|
|
637
634
|
createClass(Picker, [
|
|
638
635
|
{
|
|
639
|
-
key:
|
|
636
|
+
key: 'setOptions',
|
|
640
637
|
value: function setOptions(options) {
|
|
641
638
|
var _this = this;
|
|
642
639
|
if (!options) {
|
|
@@ -645,9 +642,6 @@ var Picker = function() {
|
|
|
645
642
|
var settings = this.settings;
|
|
646
643
|
function transfer(source, target, skipKeys) {
|
|
647
644
|
for(var key in source){
|
|
648
|
-
if (skipKeys && skipKeys.indexOf(key) >= 0) {
|
|
649
|
-
continue;
|
|
650
|
-
}
|
|
651
645
|
target[key] = source[key];
|
|
652
646
|
}
|
|
653
647
|
}
|
|
@@ -681,11 +675,11 @@ var Picker = function() {
|
|
|
681
675
|
var openProxy = function openProxy(e) {
|
|
682
676
|
return _this.openHandler(e);
|
|
683
677
|
};
|
|
684
|
-
this._events.add(parent,
|
|
678
|
+
this._events.add(parent, 'click', openProxy);
|
|
685
679
|
onKey(this._events, parent, [
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
680
|
+
' ',
|
|
681
|
+
'Spacebar',
|
|
682
|
+
'Enter'
|
|
689
683
|
], openProxy);
|
|
690
684
|
this._popupInited = true;
|
|
691
685
|
} else if (options.parent && !settings.popup) {
|
|
@@ -694,11 +688,11 @@ var Picker = function() {
|
|
|
694
688
|
}
|
|
695
689
|
},
|
|
696
690
|
{
|
|
697
|
-
key:
|
|
691
|
+
key: 'openHandler',
|
|
698
692
|
value: function openHandler(e) {
|
|
699
693
|
if (this.show()) {
|
|
700
694
|
e && e.preventDefault();
|
|
701
|
-
this.settings.parent.style.pointerEvents =
|
|
695
|
+
this.settings.parent.style.pointerEvents = 'none';
|
|
702
696
|
var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement;
|
|
703
697
|
setTimeout(function() {
|
|
704
698
|
return toFocus.focus();
|
|
@@ -710,7 +704,7 @@ var Picker = function() {
|
|
|
710
704
|
}
|
|
711
705
|
},
|
|
712
706
|
{
|
|
713
|
-
key:
|
|
707
|
+
key: 'closeHandler',
|
|
714
708
|
value: function closeHandler(e) {
|
|
715
709
|
var event = e && e.type;
|
|
716
710
|
var doHide = false;
|
|
@@ -726,7 +720,7 @@ var Picker = function() {
|
|
|
726
720
|
doHide = true;
|
|
727
721
|
}
|
|
728
722
|
if (doHide && this.hide()) {
|
|
729
|
-
this.settings.parent.style.pointerEvents =
|
|
723
|
+
this.settings.parent.style.pointerEvents = '';
|
|
730
724
|
if (event !== EVENT_CLICK_OUTSIDE) {
|
|
731
725
|
this.settings.parent.focus();
|
|
732
726
|
}
|
|
@@ -737,7 +731,7 @@ var Picker = function() {
|
|
|
737
731
|
}
|
|
738
732
|
},
|
|
739
733
|
{
|
|
740
|
-
key:
|
|
734
|
+
key: 'movePopup',
|
|
741
735
|
value: function movePopup(options, open) {
|
|
742
736
|
this.closeHandler();
|
|
743
737
|
this.setOptions(options);
|
|
@@ -747,7 +741,7 @@ var Picker = function() {
|
|
|
747
741
|
}
|
|
748
742
|
},
|
|
749
743
|
{
|
|
750
|
-
key:
|
|
744
|
+
key: 'setColor',
|
|
751
745
|
value: function setColor(color, silent) {
|
|
752
746
|
this._setColor(color, {
|
|
753
747
|
silent: silent
|
|
@@ -755,9 +749,9 @@ var Picker = function() {
|
|
|
755
749
|
}
|
|
756
750
|
},
|
|
757
751
|
{
|
|
758
|
-
key:
|
|
752
|
+
key: '_setColor',
|
|
759
753
|
value: function _setColor(color, flags) {
|
|
760
|
-
if (typeof color ===
|
|
754
|
+
if (typeof color === 'string') {
|
|
761
755
|
color = color.trim();
|
|
762
756
|
}
|
|
763
757
|
if (!color) {
|
|
@@ -783,13 +777,13 @@ var Picker = function() {
|
|
|
783
777
|
}
|
|
784
778
|
},
|
|
785
779
|
{
|
|
786
|
-
key:
|
|
780
|
+
key: 'setColour',
|
|
787
781
|
value: function setColour(colour, silent) {
|
|
788
782
|
this.setColor(colour, silent);
|
|
789
783
|
}
|
|
790
784
|
},
|
|
791
785
|
{
|
|
792
|
-
key:
|
|
786
|
+
key: 'show',
|
|
793
787
|
value: function show() {
|
|
794
788
|
var parent = this.settings.parent;
|
|
795
789
|
if (!parent) {
|
|
@@ -803,25 +797,25 @@ var Picker = function() {
|
|
|
803
797
|
var html = this.settings.template || '<div class="picker_wrapper" tabindex="-1"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_editor"><input aria-label="Type a color name or hex value"/></div><div class="picker_sample"></div><div class="picker_done"><button>Ok</button></div><div class="picker_cancel"><button>Cancel</button></div></div>';
|
|
804
798
|
var wrapper = parseHTML(html);
|
|
805
799
|
this.domElement = wrapper;
|
|
806
|
-
this._domH = $(
|
|
807
|
-
this._domSL = $(
|
|
808
|
-
this._domA = $(
|
|
809
|
-
this._domEdit = $(
|
|
810
|
-
this._domSample = $(
|
|
811
|
-
this._domOkay = $(
|
|
812
|
-
this._domCancel = $(
|
|
813
|
-
wrapper.classList.add(
|
|
800
|
+
this._domH = $('.picker_hue', wrapper);
|
|
801
|
+
this._domSL = $('.picker_sl', wrapper);
|
|
802
|
+
this._domA = $('.picker_alpha', wrapper);
|
|
803
|
+
this._domEdit = $('.picker_editor input', wrapper);
|
|
804
|
+
this._domSample = $('.picker_sample', wrapper);
|
|
805
|
+
this._domOkay = $('.picker_done button', wrapper);
|
|
806
|
+
this._domCancel = $('.picker_cancel button', wrapper);
|
|
807
|
+
wrapper.classList.add('layout_' + this.settings.layout);
|
|
814
808
|
if (!this.settings.alpha) {
|
|
815
|
-
wrapper.classList.add(
|
|
809
|
+
wrapper.classList.add('no_alpha');
|
|
816
810
|
}
|
|
817
811
|
if (!this.settings.editor) {
|
|
818
|
-
wrapper.classList.add(
|
|
812
|
+
wrapper.classList.add('no_editor');
|
|
819
813
|
}
|
|
820
814
|
if (!this.settings.cancelButton) {
|
|
821
|
-
wrapper.classList.add(
|
|
815
|
+
wrapper.classList.add('no_cancel');
|
|
822
816
|
}
|
|
823
817
|
this._ifPopup(function() {
|
|
824
|
-
return wrapper.classList.add(
|
|
818
|
+
return wrapper.classList.add('popup');
|
|
825
819
|
});
|
|
826
820
|
this._setPosition();
|
|
827
821
|
if (this.colour) {
|
|
@@ -834,13 +828,13 @@ var Picker = function() {
|
|
|
834
828
|
}
|
|
835
829
|
},
|
|
836
830
|
{
|
|
837
|
-
key:
|
|
831
|
+
key: 'hide',
|
|
838
832
|
value: function hide() {
|
|
839
833
|
return this._toggleDOM(false);
|
|
840
834
|
}
|
|
841
835
|
},
|
|
842
836
|
{
|
|
843
|
-
key:
|
|
837
|
+
key: 'destroy',
|
|
844
838
|
value: function destroy() {
|
|
845
839
|
this._events.destroy();
|
|
846
840
|
if (this.domElement) {
|
|
@@ -849,14 +843,14 @@ var Picker = function() {
|
|
|
849
843
|
}
|
|
850
844
|
},
|
|
851
845
|
{
|
|
852
|
-
key:
|
|
846
|
+
key: '_bindEvents',
|
|
853
847
|
value: function _bindEvents() {
|
|
854
848
|
var _this2 = this;
|
|
855
849
|
var that = this, dom = this.domElement, events = this._events;
|
|
856
850
|
function addEvent(target, type, handler) {
|
|
857
851
|
events.add(target, type, handler);
|
|
858
852
|
}
|
|
859
|
-
addEvent(dom,
|
|
853
|
+
addEvent(dom, 'click', function(e) {
|
|
860
854
|
return e.preventDefault();
|
|
861
855
|
});
|
|
862
856
|
dragTrack(events, this._domH, function(x, y) {
|
|
@@ -872,13 +866,13 @@ var Picker = function() {
|
|
|
872
866
|
}
|
|
873
867
|
var editInput = this._domEdit;
|
|
874
868
|
{
|
|
875
|
-
addEvent(editInput,
|
|
869
|
+
addEvent(editInput, 'input', function(e) {
|
|
876
870
|
that._setColor(this.value, {
|
|
877
871
|
fromEditor: true,
|
|
878
872
|
failSilently: true
|
|
879
873
|
});
|
|
880
874
|
});
|
|
881
|
-
addEvent(editInput,
|
|
875
|
+
addEvent(editInput, 'focus', function(e) {
|
|
882
876
|
var input = this;
|
|
883
877
|
if (input.selectionStart === input.selectionEnd) {
|
|
884
878
|
input.select();
|
|
@@ -892,15 +886,15 @@ var Picker = function() {
|
|
|
892
886
|
addEvent(window, EVENT_CLICK_OUTSIDE, popupCloseProxy);
|
|
893
887
|
addEvent(window, EVENT_TAB_MOVE, popupCloseProxy);
|
|
894
888
|
onKey(events, dom, [
|
|
895
|
-
|
|
896
|
-
|
|
889
|
+
'Esc',
|
|
890
|
+
'Escape'
|
|
897
891
|
], popupCloseProxy);
|
|
898
892
|
var timeKeeper = function timeKeeper(e) {
|
|
899
893
|
_this2.__containedEvent = e.timeStamp;
|
|
900
894
|
};
|
|
901
895
|
addEvent(dom, EVENT_CLICK_OUTSIDE, timeKeeper);
|
|
902
896
|
addEvent(dom, EVENT_TAB_MOVE, timeKeeper);
|
|
903
|
-
addEvent(_this2._domCancel,
|
|
897
|
+
addEvent(_this2._domCancel, 'click', popupCloseProxy);
|
|
904
898
|
});
|
|
905
899
|
var onDoneProxy = function onDoneProxy(e) {
|
|
906
900
|
_this2._ifPopup(function() {
|
|
@@ -910,29 +904,29 @@ var Picker = function() {
|
|
|
910
904
|
_this2.onDone(_this2.colour);
|
|
911
905
|
}
|
|
912
906
|
};
|
|
913
|
-
addEvent(this._domOkay,
|
|
907
|
+
addEvent(this._domOkay, 'click', onDoneProxy);
|
|
914
908
|
onKey(events, dom, [
|
|
915
|
-
|
|
909
|
+
'Enter'
|
|
916
910
|
], onDoneProxy);
|
|
917
911
|
}
|
|
918
912
|
},
|
|
919
913
|
{
|
|
920
|
-
key:
|
|
914
|
+
key: '_setPosition',
|
|
921
915
|
value: function _setPosition() {
|
|
922
916
|
var parent = this.settings.parent, elm = this.domElement;
|
|
923
917
|
if (parent !== elm.parentNode) {
|
|
924
918
|
parent.appendChild(elm);
|
|
925
919
|
}
|
|
926
920
|
this._ifPopup(function(popup) {
|
|
927
|
-
if (getComputedStyle(parent).position ===
|
|
928
|
-
parent.style.position =
|
|
921
|
+
if (getComputedStyle(parent).position === 'static') {
|
|
922
|
+
parent.style.position = 'relative';
|
|
929
923
|
}
|
|
930
|
-
var cssClass = popup === true ?
|
|
924
|
+
var cssClass = popup === true ? 'popup_right' : 'popup_' + popup;
|
|
931
925
|
[
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
926
|
+
'popup_top',
|
|
927
|
+
'popup_bottom',
|
|
928
|
+
'popup_left',
|
|
929
|
+
'popup_right'
|
|
936
930
|
].forEach(function(c) {
|
|
937
931
|
if (c === cssClass) {
|
|
938
932
|
elm.classList.add(c);
|
|
@@ -945,7 +939,7 @@ var Picker = function() {
|
|
|
945
939
|
}
|
|
946
940
|
},
|
|
947
941
|
{
|
|
948
|
-
key:
|
|
942
|
+
key: '_setHSLA',
|
|
949
943
|
value: function _setHSLA(h, s, l, a, flags) {
|
|
950
944
|
flags = flags || {};
|
|
951
945
|
var col = this.colour, hsla = col.hsla;
|
|
@@ -967,19 +961,19 @@ var Picker = function() {
|
|
|
967
961
|
}
|
|
968
962
|
},
|
|
969
963
|
{
|
|
970
|
-
key:
|
|
964
|
+
key: '_updateUI',
|
|
971
965
|
value: function _updateUI(flags) {
|
|
972
966
|
if (!this.domElement) {
|
|
973
967
|
return;
|
|
974
968
|
}
|
|
975
969
|
flags = flags || {};
|
|
976
|
-
var col = this.colour, hsl = col.hsla, cssHue =
|
|
977
|
-
var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $(
|
|
970
|
+
var col = this.colour, hsl = col.hsla, cssHue = 'hsl(' + hsl[0] * HUES + ', 100%, 50%)', cssHSL = col.hslString, cssHSLA = col.hslaString;
|
|
971
|
+
var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $('.picker_selector', uiH), thumbSL = $('.picker_selector', uiSL), thumbA = $('.picker_selector', uiA);
|
|
978
972
|
function posX(parent, child, relX) {
|
|
979
|
-
child.style.left = relX * 100 +
|
|
973
|
+
child.style.left = relX * 100 + '%';
|
|
980
974
|
}
|
|
981
975
|
function posY(parent, child, relY) {
|
|
982
|
-
child.style.top = relY * 100 +
|
|
976
|
+
child.style.top = relY * 100 + '%';
|
|
983
977
|
}
|
|
984
978
|
posX(uiH, thumbH, hsl[0]);
|
|
985
979
|
this._domSL.style.backgroundColor = this._domH.style.color = cssHue;
|
|
@@ -987,19 +981,19 @@ var Picker = function() {
|
|
|
987
981
|
posY(uiSL, thumbSL, 1 - hsl[2]);
|
|
988
982
|
uiSL.style.color = cssHSL;
|
|
989
983
|
posY(uiA, thumbA, 1 - hsl[3]);
|
|
990
|
-
var opaque = cssHSL, transp = opaque.replace(
|
|
984
|
+
var opaque = cssHSL, transp = opaque.replace('hsl', 'hsla').replace(')', ', 0)'), bg = 'linear-gradient(' + [
|
|
991
985
|
opaque,
|
|
992
986
|
transp
|
|
993
|
-
] +
|
|
994
|
-
this._domA.style.background = bg +
|
|
987
|
+
] + ')';
|
|
988
|
+
this._domA.style.background = bg + ', ' + BG_TRANSP;
|
|
995
989
|
if (!flags.fromEditor) {
|
|
996
990
|
var format = this.settings.editorFormat, alpha = this.settings.alpha;
|
|
997
991
|
var value = void 0;
|
|
998
992
|
switch(format){
|
|
999
|
-
case
|
|
993
|
+
case 'rgb':
|
|
1000
994
|
value = col.printRGB(alpha);
|
|
1001
995
|
break;
|
|
1002
|
-
case
|
|
996
|
+
case 'hsl':
|
|
1003
997
|
value = col.printHSL(alpha);
|
|
1004
998
|
break;
|
|
1005
999
|
default:
|
|
@@ -1011,7 +1005,7 @@ var Picker = function() {
|
|
|
1011
1005
|
}
|
|
1012
1006
|
},
|
|
1013
1007
|
{
|
|
1014
|
-
key:
|
|
1008
|
+
key: '_ifPopup',
|
|
1015
1009
|
value: function _ifPopup(actionIf, actionElse) {
|
|
1016
1010
|
if (this.settings.parent && this.settings.popup) {
|
|
1017
1011
|
actionIf && actionIf(this.settings.popup);
|
|
@@ -1021,13 +1015,13 @@ var Picker = function() {
|
|
|
1021
1015
|
}
|
|
1022
1016
|
},
|
|
1023
1017
|
{
|
|
1024
|
-
key:
|
|
1018
|
+
key: '_toggleDOM',
|
|
1025
1019
|
value: function _toggleDOM(toVisible) {
|
|
1026
1020
|
var dom = this.domElement;
|
|
1027
1021
|
if (!dom) {
|
|
1028
1022
|
return false;
|
|
1029
1023
|
}
|
|
1030
|
-
var displayStyle = toVisible ?
|
|
1024
|
+
var displayStyle = toVisible ? '' : 'none', toggle = dom.style.display !== displayStyle;
|
|
1031
1025
|
if (toggle) {
|
|
1032
1026
|
dom.style.display = displayStyle;
|
|
1033
1027
|
}
|
|
@@ -1038,10 +1032,10 @@ var Picker = function() {
|
|
|
1038
1032
|
return Picker;
|
|
1039
1033
|
}();
|
|
1040
1034
|
{
|
|
1041
|
-
var style = document.createElement(
|
|
1035
|
+
var style = document.createElement('style');
|
|
1042
1036
|
style.textContent = '.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl::before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg, gainsboro, transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample::before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}';
|
|
1043
1037
|
document.documentElement.firstElementChild.appendChild(style);
|
|
1044
1038
|
Picker.StyleElement = style;
|
|
1045
1039
|
}
|
|
1046
1040
|
|
|
1047
|
-
exports
|
|
1041
|
+
exports.default = Picker;
|