@digipair/skill-web-jsoneditor 0.94.0-8 → 0.95.1
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/{dist/index.cjs.js → index.cjs.js} +18039 -18073
- package/index.d.ts +1 -0
- package/{dist/index.esm.js → index.esm.js} +18032 -18068
- package/{dist → libs/skill-web-jsoneditor}/src/index.d.ts +0 -1
- package/{dist → libs/skill-web-jsoneditor}/src/lib/jsoneditor.element.d.ts +0 -1
- package/libs/skill-web-jsoneditor/src/lib/skill-web-jsoneditor.d.ts +1 -0
- package/package.json +6 -22
- package/{dist/vanilla-picker.cjs.js → vanilla-picker.cjs.js} +262 -256
- package/{dist/vanilla-picker.esm.js → vanilla-picker.esm.js} +261 -255
- package/README.md +0 -7
- package/dist/src/index.d.ts.map +0 -1
- package/dist/src/lib/jsoneditor.element.d.ts.map +0 -1
- package/dist/src/lib/skill-web-jsoneditor.d.ts +0 -2
- package/dist/src/lib/skill-web-jsoneditor.d.ts.map +0 -1
- package/dist/src/lib/skill-web-jsoneditor.spec.d.ts +0 -2
- package/dist/src/lib/skill-web-jsoneditor.spec.d.ts.map +0 -1
- /package/{dist/index.d.ts → index.cjs.d.ts} +0 -0
- /package/{dist/schema.fr.json → schema.fr.json} +0 -0
- /package/{dist/schema.json → 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,6 +608,9 @@ 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
|
+
}
|
|
611
614
|
handler(e);
|
|
612
615
|
}
|
|
613
616
|
});
|
|
@@ -616,13 +619,13 @@ var Picker = function() {
|
|
|
616
619
|
function Picker(options) {
|
|
617
620
|
classCallCheck(this, Picker);
|
|
618
621
|
this.settings = {
|
|
619
|
-
popup:
|
|
620
|
-
layout:
|
|
622
|
+
popup: "right",
|
|
623
|
+
layout: "default",
|
|
621
624
|
alpha: true,
|
|
622
625
|
editor: true,
|
|
623
|
-
editorFormat:
|
|
626
|
+
editorFormat: "hex",
|
|
624
627
|
cancelButton: false,
|
|
625
|
-
defaultColor:
|
|
628
|
+
defaultColor: "#0cf"
|
|
626
629
|
};
|
|
627
630
|
this._events = new EventBucket();
|
|
628
631
|
this.onChange = null;
|
|
@@ -633,7 +636,7 @@ var Picker = function() {
|
|
|
633
636
|
}
|
|
634
637
|
createClass(Picker, [
|
|
635
638
|
{
|
|
636
|
-
key:
|
|
639
|
+
key: "setOptions",
|
|
637
640
|
value: function setOptions(options) {
|
|
638
641
|
var _this = this;
|
|
639
642
|
if (!options) {
|
|
@@ -642,6 +645,9 @@ var Picker = function() {
|
|
|
642
645
|
var settings = this.settings;
|
|
643
646
|
function transfer(source, target, skipKeys) {
|
|
644
647
|
for(var key in source){
|
|
648
|
+
if (skipKeys && skipKeys.indexOf(key) >= 0) {
|
|
649
|
+
continue;
|
|
650
|
+
}
|
|
645
651
|
target[key] = source[key];
|
|
646
652
|
}
|
|
647
653
|
}
|
|
@@ -675,11 +681,11 @@ var Picker = function() {
|
|
|
675
681
|
var openProxy = function openProxy(e) {
|
|
676
682
|
return _this.openHandler(e);
|
|
677
683
|
};
|
|
678
|
-
this._events.add(parent,
|
|
684
|
+
this._events.add(parent, "click", openProxy);
|
|
679
685
|
onKey(this._events, parent, [
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
686
|
+
" ",
|
|
687
|
+
"Spacebar",
|
|
688
|
+
"Enter"
|
|
683
689
|
], openProxy);
|
|
684
690
|
this._popupInited = true;
|
|
685
691
|
} else if (options.parent && !settings.popup) {
|
|
@@ -688,11 +694,11 @@ var Picker = function() {
|
|
|
688
694
|
}
|
|
689
695
|
},
|
|
690
696
|
{
|
|
691
|
-
key:
|
|
697
|
+
key: "openHandler",
|
|
692
698
|
value: function openHandler(e) {
|
|
693
699
|
if (this.show()) {
|
|
694
700
|
e && e.preventDefault();
|
|
695
|
-
this.settings.parent.style.pointerEvents =
|
|
701
|
+
this.settings.parent.style.pointerEvents = "none";
|
|
696
702
|
var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement;
|
|
697
703
|
setTimeout(function() {
|
|
698
704
|
return toFocus.focus();
|
|
@@ -704,7 +710,7 @@ var Picker = function() {
|
|
|
704
710
|
}
|
|
705
711
|
},
|
|
706
712
|
{
|
|
707
|
-
key:
|
|
713
|
+
key: "closeHandler",
|
|
708
714
|
value: function closeHandler(e) {
|
|
709
715
|
var event = e && e.type;
|
|
710
716
|
var doHide = false;
|
|
@@ -720,7 +726,7 @@ var Picker = function() {
|
|
|
720
726
|
doHide = true;
|
|
721
727
|
}
|
|
722
728
|
if (doHide && this.hide()) {
|
|
723
|
-
this.settings.parent.style.pointerEvents =
|
|
729
|
+
this.settings.parent.style.pointerEvents = "";
|
|
724
730
|
if (event !== EVENT_CLICK_OUTSIDE) {
|
|
725
731
|
this.settings.parent.focus();
|
|
726
732
|
}
|
|
@@ -731,7 +737,7 @@ var Picker = function() {
|
|
|
731
737
|
}
|
|
732
738
|
},
|
|
733
739
|
{
|
|
734
|
-
key:
|
|
740
|
+
key: "movePopup",
|
|
735
741
|
value: function movePopup(options, open) {
|
|
736
742
|
this.closeHandler();
|
|
737
743
|
this.setOptions(options);
|
|
@@ -741,7 +747,7 @@ var Picker = function() {
|
|
|
741
747
|
}
|
|
742
748
|
},
|
|
743
749
|
{
|
|
744
|
-
key:
|
|
750
|
+
key: "setColor",
|
|
745
751
|
value: function setColor(color, silent) {
|
|
746
752
|
this._setColor(color, {
|
|
747
753
|
silent: silent
|
|
@@ -749,9 +755,9 @@ var Picker = function() {
|
|
|
749
755
|
}
|
|
750
756
|
},
|
|
751
757
|
{
|
|
752
|
-
key:
|
|
758
|
+
key: "_setColor",
|
|
753
759
|
value: function _setColor(color, flags) {
|
|
754
|
-
if (typeof color ===
|
|
760
|
+
if (typeof color === "string") {
|
|
755
761
|
color = color.trim();
|
|
756
762
|
}
|
|
757
763
|
if (!color) {
|
|
@@ -777,13 +783,13 @@ var Picker = function() {
|
|
|
777
783
|
}
|
|
778
784
|
},
|
|
779
785
|
{
|
|
780
|
-
key:
|
|
786
|
+
key: "setColour",
|
|
781
787
|
value: function setColour(colour, silent) {
|
|
782
788
|
this.setColor(colour, silent);
|
|
783
789
|
}
|
|
784
790
|
},
|
|
785
791
|
{
|
|
786
|
-
key:
|
|
792
|
+
key: "show",
|
|
787
793
|
value: function show() {
|
|
788
794
|
var parent = this.settings.parent;
|
|
789
795
|
if (!parent) {
|
|
@@ -797,25 +803,25 @@ var Picker = function() {
|
|
|
797
803
|
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>';
|
|
798
804
|
var wrapper = parseHTML(html);
|
|
799
805
|
this.domElement = wrapper;
|
|
800
|
-
this._domH = $(
|
|
801
|
-
this._domSL = $(
|
|
802
|
-
this._domA = $(
|
|
803
|
-
this._domEdit = $(
|
|
804
|
-
this._domSample = $(
|
|
805
|
-
this._domOkay = $(
|
|
806
|
-
this._domCancel = $(
|
|
807
|
-
wrapper.classList.add(
|
|
806
|
+
this._domH = $(".picker_hue", wrapper);
|
|
807
|
+
this._domSL = $(".picker_sl", wrapper);
|
|
808
|
+
this._domA = $(".picker_alpha", wrapper);
|
|
809
|
+
this._domEdit = $(".picker_editor input", wrapper);
|
|
810
|
+
this._domSample = $(".picker_sample", wrapper);
|
|
811
|
+
this._domOkay = $(".picker_done button", wrapper);
|
|
812
|
+
this._domCancel = $(".picker_cancel button", wrapper);
|
|
813
|
+
wrapper.classList.add("layout_" + this.settings.layout);
|
|
808
814
|
if (!this.settings.alpha) {
|
|
809
|
-
wrapper.classList.add(
|
|
815
|
+
wrapper.classList.add("no_alpha");
|
|
810
816
|
}
|
|
811
817
|
if (!this.settings.editor) {
|
|
812
|
-
wrapper.classList.add(
|
|
818
|
+
wrapper.classList.add("no_editor");
|
|
813
819
|
}
|
|
814
820
|
if (!this.settings.cancelButton) {
|
|
815
|
-
wrapper.classList.add(
|
|
821
|
+
wrapper.classList.add("no_cancel");
|
|
816
822
|
}
|
|
817
823
|
this._ifPopup(function() {
|
|
818
|
-
return wrapper.classList.add(
|
|
824
|
+
return wrapper.classList.add("popup");
|
|
819
825
|
});
|
|
820
826
|
this._setPosition();
|
|
821
827
|
if (this.colour) {
|
|
@@ -828,13 +834,13 @@ var Picker = function() {
|
|
|
828
834
|
}
|
|
829
835
|
},
|
|
830
836
|
{
|
|
831
|
-
key:
|
|
837
|
+
key: "hide",
|
|
832
838
|
value: function hide() {
|
|
833
839
|
return this._toggleDOM(false);
|
|
834
840
|
}
|
|
835
841
|
},
|
|
836
842
|
{
|
|
837
|
-
key:
|
|
843
|
+
key: "destroy",
|
|
838
844
|
value: function destroy() {
|
|
839
845
|
this._events.destroy();
|
|
840
846
|
if (this.domElement) {
|
|
@@ -843,14 +849,14 @@ var Picker = function() {
|
|
|
843
849
|
}
|
|
844
850
|
},
|
|
845
851
|
{
|
|
846
|
-
key:
|
|
852
|
+
key: "_bindEvents",
|
|
847
853
|
value: function _bindEvents() {
|
|
848
854
|
var _this2 = this;
|
|
849
855
|
var that = this, dom = this.domElement, events = this._events;
|
|
850
856
|
function addEvent(target, type, handler) {
|
|
851
857
|
events.add(target, type, handler);
|
|
852
858
|
}
|
|
853
|
-
addEvent(dom,
|
|
859
|
+
addEvent(dom, "click", function(e) {
|
|
854
860
|
return e.preventDefault();
|
|
855
861
|
});
|
|
856
862
|
dragTrack(events, this._domH, function(x, y) {
|
|
@@ -866,13 +872,13 @@ var Picker = function() {
|
|
|
866
872
|
}
|
|
867
873
|
var editInput = this._domEdit;
|
|
868
874
|
{
|
|
869
|
-
addEvent(editInput,
|
|
875
|
+
addEvent(editInput, "input", function(e) {
|
|
870
876
|
that._setColor(this.value, {
|
|
871
877
|
fromEditor: true,
|
|
872
878
|
failSilently: true
|
|
873
879
|
});
|
|
874
880
|
});
|
|
875
|
-
addEvent(editInput,
|
|
881
|
+
addEvent(editInput, "focus", function(e) {
|
|
876
882
|
var input = this;
|
|
877
883
|
if (input.selectionStart === input.selectionEnd) {
|
|
878
884
|
input.select();
|
|
@@ -886,15 +892,15 @@ var Picker = function() {
|
|
|
886
892
|
addEvent(window, EVENT_CLICK_OUTSIDE, popupCloseProxy);
|
|
887
893
|
addEvent(window, EVENT_TAB_MOVE, popupCloseProxy);
|
|
888
894
|
onKey(events, dom, [
|
|
889
|
-
|
|
890
|
-
|
|
895
|
+
"Esc",
|
|
896
|
+
"Escape"
|
|
891
897
|
], popupCloseProxy);
|
|
892
898
|
var timeKeeper = function timeKeeper(e) {
|
|
893
899
|
_this2.__containedEvent = e.timeStamp;
|
|
894
900
|
};
|
|
895
901
|
addEvent(dom, EVENT_CLICK_OUTSIDE, timeKeeper);
|
|
896
902
|
addEvent(dom, EVENT_TAB_MOVE, timeKeeper);
|
|
897
|
-
addEvent(_this2._domCancel,
|
|
903
|
+
addEvent(_this2._domCancel, "click", popupCloseProxy);
|
|
898
904
|
});
|
|
899
905
|
var onDoneProxy = function onDoneProxy(e) {
|
|
900
906
|
_this2._ifPopup(function() {
|
|
@@ -904,29 +910,29 @@ var Picker = function() {
|
|
|
904
910
|
_this2.onDone(_this2.colour);
|
|
905
911
|
}
|
|
906
912
|
};
|
|
907
|
-
addEvent(this._domOkay,
|
|
913
|
+
addEvent(this._domOkay, "click", onDoneProxy);
|
|
908
914
|
onKey(events, dom, [
|
|
909
|
-
|
|
915
|
+
"Enter"
|
|
910
916
|
], onDoneProxy);
|
|
911
917
|
}
|
|
912
918
|
},
|
|
913
919
|
{
|
|
914
|
-
key:
|
|
920
|
+
key: "_setPosition",
|
|
915
921
|
value: function _setPosition() {
|
|
916
922
|
var parent = this.settings.parent, elm = this.domElement;
|
|
917
923
|
if (parent !== elm.parentNode) {
|
|
918
924
|
parent.appendChild(elm);
|
|
919
925
|
}
|
|
920
926
|
this._ifPopup(function(popup) {
|
|
921
|
-
if (getComputedStyle(parent).position ===
|
|
922
|
-
parent.style.position =
|
|
927
|
+
if (getComputedStyle(parent).position === "static") {
|
|
928
|
+
parent.style.position = "relative";
|
|
923
929
|
}
|
|
924
|
-
var cssClass = popup === true ?
|
|
930
|
+
var cssClass = popup === true ? "popup_right" : "popup_" + popup;
|
|
925
931
|
[
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
932
|
+
"popup_top",
|
|
933
|
+
"popup_bottom",
|
|
934
|
+
"popup_left",
|
|
935
|
+
"popup_right"
|
|
930
936
|
].forEach(function(c) {
|
|
931
937
|
if (c === cssClass) {
|
|
932
938
|
elm.classList.add(c);
|
|
@@ -939,7 +945,7 @@ var Picker = function() {
|
|
|
939
945
|
}
|
|
940
946
|
},
|
|
941
947
|
{
|
|
942
|
-
key:
|
|
948
|
+
key: "_setHSLA",
|
|
943
949
|
value: function _setHSLA(h, s, l, a, flags) {
|
|
944
950
|
flags = flags || {};
|
|
945
951
|
var col = this.colour, hsla = col.hsla;
|
|
@@ -961,19 +967,19 @@ var Picker = function() {
|
|
|
961
967
|
}
|
|
962
968
|
},
|
|
963
969
|
{
|
|
964
|
-
key:
|
|
970
|
+
key: "_updateUI",
|
|
965
971
|
value: function _updateUI(flags) {
|
|
966
972
|
if (!this.domElement) {
|
|
967
973
|
return;
|
|
968
974
|
}
|
|
969
975
|
flags = flags || {};
|
|
970
|
-
var col = this.colour, hsl = col.hsla, cssHue =
|
|
971
|
-
var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $(
|
|
976
|
+
var col = this.colour, hsl = col.hsla, cssHue = "hsl(" + hsl[0] * HUES + ", 100%, 50%)", cssHSL = col.hslString, cssHSLA = col.hslaString;
|
|
977
|
+
var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $(".picker_selector", uiH), thumbSL = $(".picker_selector", uiSL), thumbA = $(".picker_selector", uiA);
|
|
972
978
|
function posX(parent, child, relX) {
|
|
973
|
-
child.style.left = relX * 100 +
|
|
979
|
+
child.style.left = relX * 100 + "%";
|
|
974
980
|
}
|
|
975
981
|
function posY(parent, child, relY) {
|
|
976
|
-
child.style.top = relY * 100 +
|
|
982
|
+
child.style.top = relY * 100 + "%";
|
|
977
983
|
}
|
|
978
984
|
posX(uiH, thumbH, hsl[0]);
|
|
979
985
|
this._domSL.style.backgroundColor = this._domH.style.color = cssHue;
|
|
@@ -981,19 +987,19 @@ var Picker = function() {
|
|
|
981
987
|
posY(uiSL, thumbSL, 1 - hsl[2]);
|
|
982
988
|
uiSL.style.color = cssHSL;
|
|
983
989
|
posY(uiA, thumbA, 1 - hsl[3]);
|
|
984
|
-
var opaque = cssHSL, transp = opaque.replace(
|
|
990
|
+
var opaque = cssHSL, transp = opaque.replace("hsl", "hsla").replace(")", ", 0)"), bg = "linear-gradient(" + [
|
|
985
991
|
opaque,
|
|
986
992
|
transp
|
|
987
|
-
] +
|
|
988
|
-
this._domA.style.background = bg +
|
|
993
|
+
] + ")";
|
|
994
|
+
this._domA.style.background = bg + ", " + BG_TRANSP;
|
|
989
995
|
if (!flags.fromEditor) {
|
|
990
996
|
var format = this.settings.editorFormat, alpha = this.settings.alpha;
|
|
991
997
|
var value = void 0;
|
|
992
998
|
switch(format){
|
|
993
|
-
case
|
|
999
|
+
case "rgb":
|
|
994
1000
|
value = col.printRGB(alpha);
|
|
995
1001
|
break;
|
|
996
|
-
case
|
|
1002
|
+
case "hsl":
|
|
997
1003
|
value = col.printHSL(alpha);
|
|
998
1004
|
break;
|
|
999
1005
|
default:
|
|
@@ -1005,7 +1011,7 @@ var Picker = function() {
|
|
|
1005
1011
|
}
|
|
1006
1012
|
},
|
|
1007
1013
|
{
|
|
1008
|
-
key:
|
|
1014
|
+
key: "_ifPopup",
|
|
1009
1015
|
value: function _ifPopup(actionIf, actionElse) {
|
|
1010
1016
|
if (this.settings.parent && this.settings.popup) {
|
|
1011
1017
|
actionIf && actionIf(this.settings.popup);
|
|
@@ -1015,13 +1021,13 @@ var Picker = function() {
|
|
|
1015
1021
|
}
|
|
1016
1022
|
},
|
|
1017
1023
|
{
|
|
1018
|
-
key:
|
|
1024
|
+
key: "_toggleDOM",
|
|
1019
1025
|
value: function _toggleDOM(toVisible) {
|
|
1020
1026
|
var dom = this.domElement;
|
|
1021
1027
|
if (!dom) {
|
|
1022
1028
|
return false;
|
|
1023
1029
|
}
|
|
1024
|
-
var displayStyle = toVisible ?
|
|
1030
|
+
var displayStyle = toVisible ? "" : "none", toggle = dom.style.display !== displayStyle;
|
|
1025
1031
|
if (toggle) {
|
|
1026
1032
|
dom.style.display = displayStyle;
|
|
1027
1033
|
}
|
|
@@ -1032,10 +1038,10 @@ var Picker = function() {
|
|
|
1032
1038
|
return Picker;
|
|
1033
1039
|
}();
|
|
1034
1040
|
{
|
|
1035
|
-
var style = document.createElement(
|
|
1041
|
+
var style = document.createElement("style");
|
|
1036
1042
|
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}';
|
|
1037
1043
|
document.documentElement.firstElementChild.appendChild(style);
|
|
1038
1044
|
Picker.StyleElement = style;
|
|
1039
1045
|
}
|
|
1040
1046
|
|
|
1041
|
-
exports
|
|
1047
|
+
exports["default"] = Picker;
|