| 1 |
/*! |
| 2 |
* vanilla-picker v2.7.2 (MODIFIED by Pagelayer) |
| 3 |
* https://vanilla-picker.js.org |
| 4 |
* |
| 5 |
* Copyright 2017-2019 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate) |
| 6 |
* Released under the ISC license. |
| 7 |
*/ |
| 8 |
(function (global, factory) { |
| 9 |
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : |
| 10 |
typeof define === 'function' && define.amd ? define(factory) : |
| 11 |
(global.Picker = factory()); |
| 12 |
}(this, (function () { 'use strict'; |
| 13 |
|
| 14 |
var classCallCheck = function (instance, Constructor) { |
| 15 |
if (!(instance instanceof Constructor)) { |
| 16 |
throw new TypeError("Cannot call a class as a function"); |
| 17 |
} |
| 18 |
}; |
| 19 |
|
| 20 |
var createClass = function () { |
| 21 |
function defineProperties(target, props) { |
| 22 |
for (var i = 0; i < props.length; i++) { |
| 23 |
var descriptor = props[i]; |
| 24 |
descriptor.enumerable = descriptor.enumerable || false; |
| 25 |
descriptor.configurable = true; |
| 26 |
if ("value" in descriptor) descriptor.writable = true; |
| 27 |
Object.defineProperty(target, descriptor.key, descriptor); |
| 28 |
} |
| 29 |
} |
| 30 |
|
| 31 |
return function (Constructor, protoProps, staticProps) { |
| 32 |
if (protoProps) defineProperties(Constructor.prototype, protoProps); |
| 33 |
if (staticProps) defineProperties(Constructor, staticProps); |
| 34 |
return Constructor; |
| 35 |
}; |
| 36 |
}(); |
| 37 |
|
| 38 |
var slicedToArray = function () { |
| 39 |
function sliceIterator(arr, i) { |
| 40 |
var _arr = []; |
| 41 |
var _n = true; |
| 42 |
var _d = false; |
| 43 |
var _e = undefined; |
| 44 |
|
| 45 |
try { |
| 46 |
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { |
| 47 |
_arr.push(_s.value); |
| 48 |
|
| 49 |
if (i && _arr.length === i) break; |
| 50 |
} |
| 51 |
} catch (err) { |
| 52 |
_d = true; |
| 53 |
_e = err; |
| 54 |
} finally { |
| 55 |
try { |
| 56 |
if (!_n && _i["return"]) _i["return"](); |
| 57 |
} finally { |
| 58 |
if (_d) throw _e; |
| 59 |
} |
| 60 |
} |
| 61 |
|
| 62 |
return _arr; |
| 63 |
} |
| 64 |
|
| 65 |
return function (arr, i) { |
| 66 |
if (Array.isArray(arr)) { |
| 67 |
return arr; |
| 68 |
} else if (Symbol.iterator in Object(arr)) { |
| 69 |
return sliceIterator(arr, i); |
| 70 |
} else { |
| 71 |
throw new TypeError("Invalid attempt to destructure non-iterable instance"); |
| 72 |
} |
| 73 |
}; |
| 74 |
}(); |
| 75 |
|
| 76 |
String.prototype.startsWith = String.prototype.startsWith || function (needle) { |
| 77 |
return this.indexOf(needle) === 0; |
| 78 |
}; |
| 79 |
String.prototype.padStart = String.prototype.padStart || function (len, pad) { |
| 80 |
var str = this;while (str.length < len) { |
| 81 |
str = pad + str; |
| 82 |
}return str; |
| 83 |
}; |
| 84 |
|
| 85 |
var colorNames = { aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500', orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32' }; |
| 86 |
|
| 87 |
function printNum(num) { |
| 88 |
var decs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; |
| 89 |
|
| 90 |
var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, '').replace(/\.$/, '') : num.toString(); |
| 91 |
return str || '0'; |
| 92 |
} |
| 93 |
|
| 94 |
var Color = function () { |
| 95 |
function Color(r, g, b, a) { |
| 96 |
classCallCheck(this, Color); |
| 97 |
|
| 98 |
|
| 99 |
var that = this; |
| 100 |
function parseString(input) { |
| 101 |
|
| 102 |
if (input.startsWith('hsl')) { |
| 103 |
var _input$match$map = input.match(/([\-\d\.e]+)/g).map(Number), |
| 104 |
_input$match$map2 = slicedToArray(_input$match$map, 4), |
| 105 |
h = _input$match$map2[0], |
| 106 |
s = _input$match$map2[1], |
| 107 |
l = _input$match$map2[2], |
| 108 |
_a = _input$match$map2[3]; |
| 109 |
|
| 110 |
if (_a === undefined) { |
| 111 |
_a = 1; |
| 112 |
} |
| 113 |
|
| 114 |
h /= 360; |
| 115 |
s /= 100; |
| 116 |
l /= 100; |
| 117 |
that.hsla = [h, s, l, _a]; |
| 118 |
} |
| 119 |
|
| 120 |
else if (input.startsWith('rgb')) { |
| 121 |
var _input$match$map3 = input.match(/([\-\d\.e]+)/g).map(Number), |
| 122 |
_input$match$map4 = slicedToArray(_input$match$map3, 4), |
| 123 |
_r = _input$match$map4[0], |
| 124 |
_g = _input$match$map4[1], |
| 125 |
_b = _input$match$map4[2], |
| 126 |
_a2 = _input$match$map4[3]; |
| 127 |
|
| 128 |
if (_a2 === undefined) { |
| 129 |
_a2 = 1; |
| 130 |
} |
| 131 |
|
| 132 |
that.rgba = [_r, _g, _b, _a2]; |
| 133 |
} |
| 134 |
|
| 135 |
else { |
| 136 |
if (input.startsWith('#')) { |
| 137 |
that.rgba = Color.hexToRgb(input); |
| 138 |
} else { |
| 139 |
that.rgba = Color.nameToRgb(input) || Color.hexToRgb(input); |
| 140 |
} |
| 141 |
} |
| 142 |
} |
| 143 |
|
| 144 |
if (r === undefined) ; |
| 145 |
|
| 146 |
|
| 147 |
else if (Array.isArray(r)) { |
| 148 |
this.rgba = r; |
| 149 |
} |
| 150 |
|
| 151 |
else if (b === undefined) { |
| 152 |
var color = r && '' + r; |
| 153 |
if (color) { |
| 154 |
parseString(color.toLowerCase()); |
| 155 |
} |
| 156 |
} else { |
| 157 |
this.rgba = [r, g, b, a === undefined ? 1 : a]; |
| 158 |
} |
| 159 |
} |
| 160 |
|
| 161 |
|
| 162 |
createClass(Color, [{ |
| 163 |
key: 'printRGB', |
| 164 |
value: function printRGB(alpha) { |
| 165 |
var rgb = alpha ? this.rgba : this.rgba.slice(0, 3), |
| 166 |
vals = rgb.map(function (x, i) { |
| 167 |
return printNum(x, i === 3 ? 3 : 0); |
| 168 |
}); |
| 169 |
|
| 170 |
return alpha ? 'rgba(' + vals + ')' : 'rgb(' + vals + ')'; |
| 171 |
} |
| 172 |
}, { |
| 173 |
key: 'printHSL', |
| 174 |
value: function printHSL(alpha) { |
| 175 |
var mults = [360, 100, 100, 1], |
| 176 |
suff = ['', '%', '%', '']; |
| 177 |
|
| 178 |
var hsl = alpha ? this.hsla : this.hsla.slice(0, 3), |
| 179 |
|
| 180 |
vals = hsl.map(function (x, i) { |
| 181 |
return printNum(x * mults[i], i === 3 ? 3 : 1) + suff[i]; |
| 182 |
}); |
| 183 |
|
| 184 |
return alpha ? 'hsla(' + vals + ')' : 'hsl(' + vals + ')'; |
| 185 |
} |
| 186 |
}, { |
| 187 |
key: 'printHex', |
| 188 |
value: function printHex(alpha) { |
| 189 |
var hex = this.hex; |
| 190 |
return alpha ? hex : hex.substring(0, 7); |
| 191 |
} |
| 192 |
|
| 193 |
|
| 194 |
|
| 195 |
}, { |
| 196 |
key: 'rgba', |
| 197 |
get: function get$$1() { |
| 198 |
if (this._rgba) { |
| 199 |
return this._rgba; |
| 200 |
} |
| 201 |
if (!this._hsla) { |
| 202 |
throw new Error('No color is set'); |
| 203 |
} |
| 204 |
|
| 205 |
return this._rgba = Color.hslToRgb(this._hsla); |
| 206 |
}, |
| 207 |
set: function set$$1(rgb) { |
| 208 |
if (rgb.length === 3) { |
| 209 |
rgb[3] = 1; |
| 210 |
} |
| 211 |
|
| 212 |
this._rgba = rgb; |
| 213 |
this._hsla = null; |
| 214 |
} |
| 215 |
}, { |
| 216 |
key: 'rgbString', |
| 217 |
get: function get$$1() { |
| 218 |
return this.printRGB(); |
| 219 |
} |
| 220 |
}, { |
| 221 |
key: 'rgbaString', |
| 222 |
get: function get$$1() { |
| 223 |
return this.printRGB(true); |
| 224 |
} |
| 225 |
|
| 226 |
|
| 227 |
}, { |
| 228 |
key: 'hsla', |
| 229 |
get: function get$$1() { |
| 230 |
if (this._hsla) { |
| 231 |
return this._hsla; |
| 232 |
} |
| 233 |
if (!this._rgba) { |
| 234 |
throw new Error('No color is set'); |
| 235 |
} |
| 236 |
|
| 237 |
return this._hsla = Color.rgbToHsl(this._rgba); |
| 238 |
}, |
| 239 |
set: function set$$1(hsl) { |
| 240 |
if (hsl.length === 3) { |
| 241 |
hsl[3] = 1; |
| 242 |
} |
| 243 |
|
| 244 |
this._hsla = hsl; |
| 245 |
this._rgba = null; |
| 246 |
} |
| 247 |
}, { |
| 248 |
key: 'hslString', |
| 249 |
get: function get$$1() { |
| 250 |
return this.printHSL(); |
| 251 |
} |
| 252 |
}, { |
| 253 |
key: 'hslaString', |
| 254 |
get: function get$$1() { |
| 255 |
return this.printHSL(true); |
| 256 |
} |
| 257 |
|
| 258 |
|
| 259 |
}, { |
| 260 |
key: 'hex', |
| 261 |
get: function get$$1() { |
| 262 |
var rgb = this.rgba, |
| 263 |
hex = rgb.map(function (x, i) { |
| 264 |
return i < 3 ? x.toString(16) : Math.round(x * 255).toString(16); |
| 265 |
}); |
| 266 |
|
| 267 |
return '#' + hex.map(function (x) { |
| 268 |
return x.padStart(2, '0'); |
| 269 |
}).join(''); |
| 270 |
}, |
| 271 |
set: function set$$1(hex) { |
| 272 |
this.rgba = Color.hexToRgb(hex); |
| 273 |
} |
| 274 |
}], [{ |
| 275 |
key: 'hexToRgb', |
| 276 |
value: function hexToRgb(input) { |
| 277 |
var hex = (input.startsWith('#') ? input.slice(1) : input).replace(/^(\w{3})$/, '$1F') |
| 278 |
.replace(/^(\w)(\w)(\w)(\w)$/, '$1$1$2$2$3$3$4$4') |
| 279 |
.replace(/^(\w{6})$/, '$1FF'); |
| 280 |
|
| 281 |
if (!hex.match(/^([0-9a-fA-F]{8})$/)) { |
| 282 |
throw new Error('Unknown hex color; ' + input); |
| 283 |
} |
| 284 |
|
| 285 |
var rgba = hex.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1) |
| 286 |
.map(function (x) { |
| 287 |
return parseInt(x, 16); |
| 288 |
}); |
| 289 |
|
| 290 |
rgba[3] = rgba[3] / 255; |
| 291 |
return rgba; |
| 292 |
} |
| 293 |
|
| 294 |
|
| 295 |
}, { |
| 296 |
key: 'nameToRgb', |
| 297 |
value: function nameToRgb(input) { |
| 298 |
var hex = colorNames[input]; |
| 299 |
if (hex) { |
| 300 |
return Color.hexToRgb(hex); |
| 301 |
} |
| 302 |
} |
| 303 |
|
| 304 |
|
| 305 |
}, { |
| 306 |
key: 'rgbToHsl', |
| 307 |
value: function rgbToHsl(_ref) { |
| 308 |
var _ref2 = slicedToArray(_ref, 4), |
| 309 |
r = _ref2[0], |
| 310 |
g = _ref2[1], |
| 311 |
b = _ref2[2], |
| 312 |
a = _ref2[3]; |
| 313 |
|
| 314 |
r /= 255; |
| 315 |
g /= 255; |
| 316 |
b /= 255; |
| 317 |
|
| 318 |
var max = Math.max(r, g, b), |
| 319 |
min = Math.min(r, g, b); |
| 320 |
var h = void 0, |
| 321 |
s = void 0, |
| 322 |
l = (max + min) / 2; |
| 323 |
|
| 324 |
if (max === min) { |
| 325 |
h = s = 0; |
| 326 |
} else { |
| 327 |
var d = max - min; |
| 328 |
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); |
| 329 |
switch (max) { |
| 330 |
case r: |
| 331 |
h = (g - b) / d + (g < b ? 6 : 0);break; |
| 332 |
case g: |
| 333 |
h = (b - r) / d + 2;break; |
| 334 |
case b: |
| 335 |
h = (r - g) / d + 4;break; |
| 336 |
} |
| 337 |
|
| 338 |
h /= 6; |
| 339 |
} |
| 340 |
|
| 341 |
return [h, s, l, a]; |
| 342 |
} |
| 343 |
|
| 344 |
|
| 345 |
}, { |
| 346 |
key: 'hslToRgb', |
| 347 |
value: function hslToRgb(_ref3) { |
| 348 |
var _ref4 = slicedToArray(_ref3, 4), |
| 349 |
h = _ref4[0], |
| 350 |
s = _ref4[1], |
| 351 |
l = _ref4[2], |
| 352 |
a = _ref4[3]; |
| 353 |
|
| 354 |
var r = void 0, |
| 355 |
g = void 0, |
| 356 |
b = void 0; |
| 357 |
|
| 358 |
if (s === 0) { |
| 359 |
r = g = b = l; |
| 360 |
} else { |
| 361 |
var hue2rgb = function hue2rgb(p, q, t) { |
| 362 |
if (t < 0) t += 1; |
| 363 |
if (t > 1) t -= 1; |
| 364 |
if (t < 1 / 6) return p + (q - p) * 6 * t; |
| 365 |
if (t < 1 / 2) return q; |
| 366 |
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; |
| 367 |
return p; |
| 368 |
}; |
| 369 |
|
| 370 |
var q = l < 0.5 ? l * (1 + s) : l + s - l * s, |
| 371 |
p = 2 * l - q; |
| 372 |
|
| 373 |
r = hue2rgb(p, q, h + 1 / 3); |
| 374 |
g = hue2rgb(p, q, h); |
| 375 |
b = hue2rgb(p, q, h - 1 / 3); |
| 376 |
} |
| 377 |
|
| 378 |
var rgba = [r * 255, g * 255, b * 255].map(Math.round); |
| 379 |
rgba[3] = a; |
| 380 |
|
| 381 |
return rgba; |
| 382 |
} |
| 383 |
}]); |
| 384 |
return Color; |
| 385 |
}(); |
| 386 |
|
| 387 |
var root = window; |
| 388 |
|
| 389 |
function dragTracker(options) { |
| 390 |
|
| 391 |
|
| 392 |
var ep = Element.prototype; |
| 393 |
if (!ep.matches) ep.matches = ep.msMatchesSelector || ep.webkitMatchesSelector; |
| 394 |
if (!ep.closest) ep.closest = function (s) { |
| 395 |
var node = this; |
| 396 |
do { |
| 397 |
if (node.matches(s)) return node; |
| 398 |
node = node.tagName === 'svg' ? node.parentNode : node.parentElement; |
| 399 |
} while (node); |
| 400 |
|
| 401 |
return null; |
| 402 |
}; |
| 403 |
|
| 404 |
options = options || {}; |
| 405 |
var container = options.container || options.doc.documentElement, |
| 406 |
selector = options.selector, |
| 407 |
callback = options.callback || console.log, |
| 408 |
callbackStart = options.callbackDragStart, |
| 409 |
callbackEnd = options.callbackDragEnd, |
| 410 |
|
| 411 |
callbackClick = options.callbackClick, |
| 412 |
propagate = options.propagateEvents, |
| 413 |
roundCoords = options.roundCoords !== false, |
| 414 |
dragOutside = options.dragOutside !== false, |
| 415 |
|
| 416 |
handleOffset = options.handleOffset || options.handleOffset !== false; |
| 417 |
var offsetToCenter = null; |
| 418 |
switch (handleOffset) { |
| 419 |
case 'center': |
| 420 |
offsetToCenter = true;break; |
| 421 |
case 'topleft': |
| 422 |
case 'top-left': |
| 423 |
offsetToCenter = false;break; |
| 424 |
} |
| 425 |
|
| 426 |
var dragState = void 0; |
| 427 |
|
| 428 |
function getMousePos(e, elm, offset, stayWithin) { |
| 429 |
var x = e.clientX, |
| 430 |
y = e.clientY; |
| 431 |
|
| 432 |
function respectBounds(value, min, max) { |
| 433 |
return Math.max(min, Math.min(value, max)); |
| 434 |
} |
| 435 |
|
| 436 |
if (elm) { |
| 437 |
var bounds = elm.getBoundingClientRect(); |
| 438 |
x -= bounds.left; |
| 439 |
y -= bounds.top; |
| 440 |
|
| 441 |
if (offset) { |
| 442 |
x -= offset[0]; |
| 443 |
y -= offset[1]; |
| 444 |
} |
| 445 |
if (stayWithin) { |
| 446 |
x = respectBounds(x, 0, bounds.width); |
| 447 |
y = respectBounds(y, 0, bounds.height); |
| 448 |
} |
| 449 |
|
| 450 |
if (elm !== container) { |
| 451 |
var center = offsetToCenter !== null ? offsetToCenter |
| 452 |
: elm.nodeName === 'circle' || elm.nodeName === 'ellipse'; |
| 453 |
|
| 454 |
if (center) { |
| 455 |
x -= bounds.width / 2; |
| 456 |
y -= bounds.height / 2; |
| 457 |
} |
| 458 |
} |
| 459 |
} |
| 460 |
return roundCoords ? [Math.round(x), Math.round(y)] : [x, y]; |
| 461 |
} |
| 462 |
|
| 463 |
function stopEvent(e) { |
| 464 |
e.preventDefault(); |
| 465 |
if (!propagate) { |
| 466 |
e.stopPropagation(); |
| 467 |
} |
| 468 |
} |
| 469 |
|
| 470 |
function onDown(e) { |
| 471 |
var target = void 0; |
| 472 |
if (selector) { |
| 473 |
target = selector instanceof Element ? selector.contains(e.target) ? selector : null : e.target.closest(selector); |
| 474 |
} else { |
| 475 |
target = {}; |
| 476 |
} |
| 477 |
|
| 478 |
if (target) { |
| 479 |
stopEvent(e); |
| 480 |
|
| 481 |
var mouseOffset = selector && handleOffset ? getMousePos(e, target) : [0, 0], |
| 482 |
startPos = getMousePos(e, container, mouseOffset); |
| 483 |
dragState = { |
| 484 |
target: target, |
| 485 |
mouseOffset: mouseOffset, |
| 486 |
startPos: startPos, |
| 487 |
actuallyDragged: false |
| 488 |
}; |
| 489 |
|
| 490 |
if (callbackStart) { |
| 491 |
callbackStart(target, startPos); |
| 492 |
} |
| 493 |
} |
| 494 |
} |
| 495 |
|
| 496 |
function onMove(e) { |
| 497 |
if (!dragState) { |
| 498 |
return; |
| 499 |
} |
| 500 |
stopEvent(e); |
| 501 |
|
| 502 |
var start = dragState.startPos, |
| 503 |
pos = getMousePos(e, container, dragState.mouseOffset, !dragOutside); |
| 504 |
|
| 505 |
dragState.actuallyDragged = dragState.actuallyDragged || start[0] !== pos[0] || start[1] !== pos[1]; |
| 506 |
|
| 507 |
callback(dragState.target, pos, start); |
| 508 |
} |
| 509 |
|
| 510 |
function onEnd(e, cancelled) { |
| 511 |
if (!dragState) { |
| 512 |
return; |
| 513 |
} |
| 514 |
|
| 515 |
if (callbackEnd || callbackClick) { |
| 516 |
var isClick = !dragState.actuallyDragged, |
| 517 |
pos = isClick ? dragState.startPos : getMousePos(e, container, dragState.mouseOffset, !dragOutside); |
| 518 |
|
| 519 |
if (callbackClick && isClick && !cancelled) { |
| 520 |
callbackClick(dragState.target, pos); |
| 521 |
} |
| 522 |
if (callbackEnd) { |
| 523 |
callbackEnd(dragState.target, pos, dragState.startPos, cancelled || isClick && callbackClick); |
| 524 |
} |
| 525 |
} |
| 526 |
dragState = null; |
| 527 |
} |
| 528 |
|
| 529 |
|
| 530 |
addEvent(container, 'mousedown', function (e) { |
| 531 |
if (isLeftButton(e)) { |
| 532 |
onDown(e); |
| 533 |
} else { |
| 534 |
onEnd(e, true); |
| 535 |
} |
| 536 |
}); |
| 537 |
addEvent(container, 'touchstart', function (e) { |
| 538 |
return relayTouch(e, onDown); |
| 539 |
}); |
| 540 |
|
| 541 |
addEvent(container, 'mousemove', function (e) { |
| 542 |
if (!dragState) { |
| 543 |
return; |
| 544 |
} |
| 545 |
|
| 546 |
if (isLeftButton(e)) { |
| 547 |
onMove(e); |
| 548 |
} |
| 549 |
else { |
| 550 |
onEnd(e); |
| 551 |
} |
| 552 |
}); |
| 553 |
addEvent(container, 'touchmove', function (e) { |
| 554 |
return relayTouch(e, onMove); |
| 555 |
}); |
| 556 |
|
| 557 |
addEvent(container, 'mouseup', function (e) { |
| 558 |
if (dragState && !isLeftButton(e)) { |
| 559 |
onEnd(e); |
| 560 |
} |
| 561 |
}); |
| 562 |
function onTouchEnd(e, cancelled) { |
| 563 |
onEnd(tweakTouch(e), cancelled); |
| 564 |
} |
| 565 |
addEvent(container, 'touchend', function (e) { |
| 566 |
return onTouchEnd(e); |
| 567 |
}); |
| 568 |
addEvent(container, 'touchcancel', function (e) { |
| 569 |
return onTouchEnd(e, true); |
| 570 |
}); |
| 571 |
|
| 572 |
function addEvent(target, type, handler) { |
| 573 |
target.addEventListener(type, handler); |
| 574 |
} |
| 575 |
function isLeftButton(e) { |
| 576 |
return e.buttons !== undefined ? e.buttons === 1 : |
| 577 |
e.which === 1; |
| 578 |
} |
| 579 |
function relayTouch(e, handler) { |
| 580 |
if (e.touches.length !== 1) { |
| 581 |
onEnd(e, true);return; |
| 582 |
} |
| 583 |
|
| 584 |
handler(tweakTouch(e)); |
| 585 |
} |
| 586 |
function tweakTouch(e) { |
| 587 |
var touch = e.targetTouches[0]; |
| 588 |
if (!touch) { |
| 589 |
touch = e.changedTouches[0]; |
| 590 |
} |
| 591 |
|
| 592 |
touch.preventDefault = e.preventDefault.bind(e); |
| 593 |
touch.stopPropagation = e.stopPropagation.bind(e); |
| 594 |
return touch; |
| 595 |
} |
| 596 |
} |
| 597 |
|
| 598 |
|
| 599 |
var BG_TRANSP = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'2\' height=\'2\'%3E%3Cpath d=\'M1,0H0V1H2V2H1\' fill=\'lightgrey\'/%3E%3C/svg%3E")'; |
| 600 |
var HUES = 360; |
| 601 |
var EVENT_KEY = 'keydown', |
| 602 |
EVENT_CLICK_OUTSIDE = 'mousedown', |
| 603 |
EVENT_TAB_MOVE = 'focusin'; |
| 604 |
|
| 605 |
function parseHTML(htmlString, doc) { |
| 606 |
var div = doc.createElement('div'); |
| 607 |
div.innerHTML = htmlString; |
| 608 |
return div.firstElementChild; |
| 609 |
} |
| 610 |
|
| 611 |
function $(selector, context) { |
| 612 |
return (context || document).querySelector(selector); |
| 613 |
} |
| 614 |
|
| 615 |
function addEvent(target, type, handler) { |
| 616 |
target.addEventListener(type, handler, false); |
| 617 |
} |
| 618 |
function stopEvent(e) { |
| 619 |
e.preventDefault(); |
| 620 |
e.stopPropagation(); |
| 621 |
} |
| 622 |
function onKey(target, keys, handler, stop) { |
| 623 |
addEvent(target, EVENT_KEY, function (e) { |
| 624 |
if (keys.indexOf(e.key) >= 0) { |
| 625 |
if (stop) { |
| 626 |
stopEvent(e); |
| 627 |
} |
| 628 |
handler(e); |
| 629 |
} |
| 630 |
}); |
| 631 |
} |
| 632 |
|
| 633 |
// Add the CSS |
| 634 |
function appendCSS(doc){ |
| 635 |
|
| 636 |
if(doc.querySelector('#vanilla-picker-style')){ |
| 637 |
return; |
| 638 |
} |
| 639 |
|
| 640 |
var style = document.createElement('style'); |
| 641 |
style.id = 'vanilla-picker-style'; |
| 642 |
|
| 643 |
doc.documentElement.firstElementChild |
| 644 |
.appendChild(style).textContent = '.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.layout_default.picker_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;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;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.layout_default .picker_sl::before{content:\'\';display:block;padding-bottom:100%}.layout_default .picker_editor{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:6rem}.layout_default .picker_editor input{width:calc(100% + 2px);height:calc(100% + 2px)}.layout_default .picker_sample{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.layout_default .picker_done{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.picker_wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;background:#f2f2f2;-webkit-box-shadow:0 0 0 1px silver;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{margin:-1px}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid white;border-radius:100%;-webkit-box-shadow:0 0 3px 1px #67b9ff;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:-webkit-gradient(linear, left top, right top, from(red), color-stop(yellow), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(magenta), to(red));background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);-webkit-box-shadow:0 0 0 1px silver;box-shadow:0 0 0 1px silver}.picker_sl{position:relative;-webkit-box-shadow:0 0 0 1px silver;box-shadow:0 0 0 1px silver;background-image:-webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, rgba(255,255,255,0))),-webkit-gradient(linear, left bottom, left top, from(black), color-stop(50%, rgba(0,0,0,0))),-webkit-gradient(linear, left top, right top, from(gray), to(rgba(128,128,128,0)));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, gray, rgba(128,128,128,0))}.picker_alpha,.picker_sample{position:relative;background:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'2\' height=\'2\'%3E%3Cpath d=\'M1,0H0V1H2V2H1\' fill=\'lightgrey\'/%3E%3C/svg%3E") left top/contain white;-webkit-box-shadow:0 0 0 1px silver;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:monospace;padding:.1em .2em}.picker_sample::before{content:\'\';position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_done button{-webkit-box-sizing:border-box;box-sizing:border-box;padding:.2em .5em;cursor:pointer}.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;-webkit-box-shadow:0 0 10px 1px rgba(0,0,0,0.4);box-shadow:0 0 10px 1px rgba(0,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%;-webkit-box-shadow:none;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}'; |
| 645 |
|
| 646 |
} |
| 647 |
|
| 648 |
var Picker = function () { |
| 649 |
|
| 650 |
|
| 651 |
function Picker(options) { |
| 652 |
var _this = this; |
| 653 |
|
| 654 |
classCallCheck(this, Picker); |
| 655 |
|
| 656 |
|
| 657 |
this.settings = { |
| 658 |
popup: 'right', |
| 659 |
layout: 'default', |
| 660 |
alpha: true, |
| 661 |
editor: true, |
| 662 |
editorFormat: 'hex' |
| 663 |
}; |
| 664 |
|
| 665 |
this._openProxy = function (e) { |
| 666 |
return _this.openHandler(e); |
| 667 |
}; |
| 668 |
|
| 669 |
this.onChange = null; |
| 670 |
this.onDone = null; |
| 671 |
this.onOpen = null; |
| 672 |
this.onClose = null; |
| 673 |
|
| 674 |
appendCSS(options.doc); |
| 675 |
|
| 676 |
this.setOptions(options); |
| 677 |
} |
| 678 |
|
| 679 |
|
| 680 |
|
| 681 |
createClass(Picker, [{ |
| 682 |
key: 'setOptions', |
| 683 |
value: function setOptions(options) { |
| 684 |
if (!options) { |
| 685 |
return; |
| 686 |
} |
| 687 |
var settings = this.settings; |
| 688 |
|
| 689 |
function transfer(source, target, skipKeys) { |
| 690 |
for (var key in source) { |
| 691 |
if (skipKeys && skipKeys.indexOf(key) >= 0) { |
| 692 |
continue; |
| 693 |
} |
| 694 |
|
| 695 |
target[key] = source[key]; |
| 696 |
} |
| 697 |
} |
| 698 |
|
| 699 |
if (options instanceof HTMLElement) { |
| 700 |
settings.parent = options; |
| 701 |
} else { |
| 702 |
|
| 703 |
|
| 704 |
if (settings.parent && options.parent && settings.parent !== options.parent) { |
| 705 |
settings.parent.removeEventListener('click', this._openProxy, false); |
| 706 |
this._popupInited = false; |
| 707 |
} |
| 708 |
|
| 709 |
transfer(options, settings ); |
| 710 |
|
| 711 |
if (options.onChange) { |
| 712 |
this.onChange = options.onChange; |
| 713 |
} |
| 714 |
if (options.onDone) { |
| 715 |
this.onDone = options.onDone; |
| 716 |
} |
| 717 |
if (options.onOpen) { |
| 718 |
this.onOpen = options.onOpen; |
| 719 |
} |
| 720 |
if (options.onClose) { |
| 721 |
this.onClose = options.onClose; |
| 722 |
} |
| 723 |
|
| 724 |
var col = options.color || options.colour; |
| 725 |
if (col) { |
| 726 |
this._setColor(col); |
| 727 |
} |
| 728 |
} |
| 729 |
|
| 730 |
var parent = settings.parent; |
| 731 |
if (parent && settings.popup && !this._popupInited) { |
| 732 |
|
| 733 |
addEvent(parent, 'click', this._openProxy); |
| 734 |
|
| 735 |
onKey(parent, [' ', 'Spacebar', 'Enter'], this._openProxy ); |
| 736 |
|
| 737 |
|
| 738 |
this._popupInited = true; |
| 739 |
} else if (options.parent && !settings.popup) { |
| 740 |
this.show(); |
| 741 |
} |
| 742 |
} |
| 743 |
|
| 744 |
|
| 745 |
}, { |
| 746 |
key: 'openHandler', |
| 747 |
value: function openHandler(e) { |
| 748 |
if (this.show()) { |
| 749 |
e && e.preventDefault(); |
| 750 |
|
| 751 |
this.settings.parent.style.pointerEvents = 'none'; |
| 752 |
|
| 753 |
var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement; |
| 754 |
setTimeout(function () { |
| 755 |
return toFocus.focus(); |
| 756 |
}, 100); |
| 757 |
|
| 758 |
if (this.onOpen) { |
| 759 |
this.onOpen(this.colour); |
| 760 |
} |
| 761 |
} |
| 762 |
} |
| 763 |
|
| 764 |
|
| 765 |
}, { |
| 766 |
key: 'closeHandler', |
| 767 |
value: function closeHandler(e) { |
| 768 |
var event = e && e.type; |
| 769 |
var doHide = false; |
| 770 |
|
| 771 |
if (!e) { |
| 772 |
doHide = true; |
| 773 |
} |
| 774 |
else if (event === EVENT_CLICK_OUTSIDE || event === EVENT_TAB_MOVE) { |
| 775 |
|
| 776 |
if (!this.domElement.contains(e.target)) { |
| 777 |
doHide = true; |
| 778 |
} |
| 779 |
} |
| 780 |
else { |
| 781 |
stopEvent(e); |
| 782 |
|
| 783 |
doHide = true; |
| 784 |
} |
| 785 |
|
| 786 |
if (doHide && this.hide()) { |
| 787 |
this.settings.parent.style.pointerEvents = ''; |
| 788 |
|
| 789 |
if (event !== EVENT_CLICK_OUTSIDE) { |
| 790 |
this.settings.parent.focus(); |
| 791 |
} |
| 792 |
|
| 793 |
if (this.onClose) { |
| 794 |
this.onClose(this.colour); |
| 795 |
} |
| 796 |
} |
| 797 |
} |
| 798 |
|
| 799 |
|
| 800 |
}, { |
| 801 |
key: 'movePopup', |
| 802 |
value: function movePopup(options, open) { |
| 803 |
this.closeHandler(); |
| 804 |
|
| 805 |
this.setOptions(options); |
| 806 |
if (open) { |
| 807 |
this.openHandler(); |
| 808 |
} |
| 809 |
} |
| 810 |
|
| 811 |
|
| 812 |
}, { |
| 813 |
key: 'setColor', |
| 814 |
value: function setColor(color, silent) { |
| 815 |
this._setColor(color, { silent: silent }); |
| 816 |
} |
| 817 |
}, { |
| 818 |
key: '_setColor', |
| 819 |
value: function _setColor(color, flags) { |
| 820 |
if (typeof color === 'string') { |
| 821 |
color = color.trim(); |
| 822 |
} |
| 823 |
if (!color) { |
| 824 |
return; |
| 825 |
} |
| 826 |
|
| 827 |
flags = flags || {}; |
| 828 |
var c = void 0; |
| 829 |
try { |
| 830 |
c = new Color(color); |
| 831 |
} catch (ex) { |
| 832 |
if (flags.failSilently) { |
| 833 |
return; |
| 834 |
} |
| 835 |
throw ex; |
| 836 |
} |
| 837 |
|
| 838 |
if (!this.settings.alpha) { |
| 839 |
var hsla = c.hsla; |
| 840 |
hsla[3] = 1; |
| 841 |
c.hsla = hsla; |
| 842 |
} |
| 843 |
this.colour = this.color = c; |
| 844 |
this._setHSLA(null, null, null, null, flags); |
| 845 |
} |
| 846 |
|
| 847 |
}, { |
| 848 |
key: 'setColour', |
| 849 |
value: function setColour(colour, silent) { |
| 850 |
this.setColor(colour, silent); |
| 851 |
} |
| 852 |
|
| 853 |
|
| 854 |
}, { |
| 855 |
key: 'show', |
| 856 |
value: function show() { |
| 857 |
var parent = this.settings.parent; |
| 858 |
if (!parent) { |
| 859 |
return false; |
| 860 |
} |
| 861 |
|
| 862 |
if (this.domElement) { |
| 863 |
var toggled = this._toggleDOM(true); |
| 864 |
|
| 865 |
this._setPosition(); |
| 866 |
|
| 867 |
return toggled; |
| 868 |
} |
| 869 |
|
| 870 |
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>'; |
| 871 |
var wrapper = parseHTML(html, this.settings.doc); |
| 872 |
|
| 873 |
this.domElement = wrapper; |
| 874 |
this._domH = $('.picker_hue', wrapper); |
| 875 |
this._domSL = $('.picker_sl', wrapper); |
| 876 |
this._domA = $('.picker_alpha', wrapper); |
| 877 |
this._domEdit = $('.picker_editor input', wrapper); |
| 878 |
this._domSample = $('.picker_sample', wrapper); |
| 879 |
this._domOkay = $('.picker_done button', wrapper); |
| 880 |
|
| 881 |
wrapper.classList.add('layout_' + this.settings.layout); |
| 882 |
if (!this.settings.alpha) { |
| 883 |
wrapper.classList.add('no_alpha'); |
| 884 |
} |
| 885 |
if (!this.settings.editor) { |
| 886 |
wrapper.classList.add('no_editor'); |
| 887 |
} |
| 888 |
this._ifPopup(function () { |
| 889 |
return wrapper.classList.add('popup'); |
| 890 |
}); |
| 891 |
|
| 892 |
this._setPosition(); |
| 893 |
|
| 894 |
if (this.colour) { |
| 895 |
this._updateUI(); |
| 896 |
} else { |
| 897 |
this._setColor('#0cf'); |
| 898 |
} |
| 899 |
this._bindEvents(); |
| 900 |
|
| 901 |
return true; |
| 902 |
} |
| 903 |
|
| 904 |
|
| 905 |
}, { |
| 906 |
key: 'hide', |
| 907 |
value: function hide() { |
| 908 |
return this._toggleDOM(false); |
| 909 |
} |
| 910 |
|
| 911 |
|
| 912 |
}, { |
| 913 |
key: '_bindEvents', |
| 914 |
value: function _bindEvents() { |
| 915 |
var _this2 = this; |
| 916 |
|
| 917 |
var that = this, |
| 918 |
dom = this.domElement; |
| 919 |
|
| 920 |
addEvent(dom, 'click', function (e) { |
| 921 |
return e.preventDefault(); |
| 922 |
}); |
| 923 |
|
| 924 |
|
| 925 |
function createDragConfig(container, callbackRelative) { |
| 926 |
|
| 927 |
function relayDrag(_, pos) { |
| 928 |
var relX = pos[0] / container.clientWidth, |
| 929 |
relY = pos[1] / container.clientHeight; |
| 930 |
callbackRelative(relX, relY); |
| 931 |
} |
| 932 |
|
| 933 |
var config = { |
| 934 |
container: container, |
| 935 |
dragOutside: false, |
| 936 |
callback: relayDrag, |
| 937 |
callbackDragStart: relayDrag, |
| 938 |
propagateEvents: true |
| 939 |
}; |
| 940 |
return config; |
| 941 |
} |
| 942 |
|
| 943 |
dragTracker(createDragConfig(this._domH, function (x, y) { |
| 944 |
return that._setHSLA(x); |
| 945 |
})); |
| 946 |
|
| 947 |
dragTracker(createDragConfig(this._domSL, function (x, y) { |
| 948 |
return that._setHSLA(null, x, 1 - y); |
| 949 |
})); |
| 950 |
|
| 951 |
if (this.settings.alpha) { |
| 952 |
dragTracker(createDragConfig(this._domA, function (x, y) { |
| 953 |
return that._setHSLA(null, null, null, 1 - y); |
| 954 |
})); |
| 955 |
} |
| 956 |
|
| 957 |
|
| 958 |
var editInput = this._domEdit; |
| 959 |
{ |
| 960 |
addEvent(editInput, 'input', function (e) { |
| 961 |
that._setColor(this.value, { fromEditor: true, failSilently: true }); |
| 962 |
}); |
| 963 |
addEvent(editInput, 'focus', function (e) { |
| 964 |
var input = this; |
| 965 |
if (input.selectionStart === input.selectionEnd) { |
| 966 |
input.select(); |
| 967 |
} |
| 968 |
}); |
| 969 |
} |
| 970 |
|
| 971 |
|
| 972 |
var popupCloseProxy = function popupCloseProxy(e) { |
| 973 |
_this2._ifPopup(function () { |
| 974 |
return _this2.closeHandler(e); |
| 975 |
}); |
| 976 |
}; |
| 977 |
var onDoneProxy = function onDoneProxy(e) { |
| 978 |
_this2._ifPopup(function () { |
| 979 |
return _this2.closeHandler(e); |
| 980 |
}); |
| 981 |
if (_this2.onDone) { |
| 982 |
_this2.onDone(_this2.colour); |
| 983 |
} |
| 984 |
}; |
| 985 |
|
| 986 |
addEvent(this.settings.doc, EVENT_CLICK_OUTSIDE, popupCloseProxy); |
| 987 |
addEvent(this.settings.doc, EVENT_TAB_MOVE, popupCloseProxy); |
| 988 |
onKey(dom, ['Esc', 'Escape'], popupCloseProxy); |
| 989 |
|
| 990 |
addEvent(this._domOkay, 'click', onDoneProxy); |
| 991 |
onKey(dom, ['Enter'], onDoneProxy); |
| 992 |
} |
| 993 |
|
| 994 |
|
| 995 |
}, { |
| 996 |
key: '_setPosition', |
| 997 |
value: function _setPosition() { |
| 998 |
var parent = this.settings.parent, |
| 999 |
elm = this.domElement; |
| 1000 |
|
| 1001 |
if (parent !== elm.parentNode) { |
| 1002 |
parent.appendChild(elm); |
| 1003 |
} |
| 1004 |
|
| 1005 |
this._ifPopup(function (popup) { |
| 1006 |
|
| 1007 |
if (getComputedStyle(parent).position === 'static') { |
| 1008 |
parent.style.position = 'relative'; |
| 1009 |
} |
| 1010 |
|
| 1011 |
var cssClass = popup === true ? 'popup_right' : 'popup_' + popup; |
| 1012 |
|
| 1013 |
['popup_top', 'popup_bottom', 'popup_left', 'popup_right'].forEach(function (c) { |
| 1014 |
if (c === cssClass) { |
| 1015 |
elm.classList.add(c); |
| 1016 |
} else { |
| 1017 |
elm.classList.remove(c); |
| 1018 |
} |
| 1019 |
}); |
| 1020 |
|
| 1021 |
elm.classList.add(cssClass); |
| 1022 |
}); |
| 1023 |
} |
| 1024 |
|
| 1025 |
|
| 1026 |
}, { |
| 1027 |
key: '_setHSLA', |
| 1028 |
value: function _setHSLA(h, s, l, a, flags) { |
| 1029 |
flags = flags || {}; |
| 1030 |
|
| 1031 |
var col = this.colour, |
| 1032 |
hsla = col.hsla; |
| 1033 |
|
| 1034 |
[h, s, l, a].forEach(function (x, i) { |
| 1035 |
if (x || x === 0) { |
| 1036 |
hsla[i] = x; |
| 1037 |
} |
| 1038 |
}); |
| 1039 |
col.hsla = hsla; |
| 1040 |
|
| 1041 |
this._updateUI(flags); |
| 1042 |
|
| 1043 |
if (this.onChange && !flags.silent) { |
| 1044 |
this.onChange(col); |
| 1045 |
} |
| 1046 |
} |
| 1047 |
}, { |
| 1048 |
key: '_updateUI', |
| 1049 |
value: function _updateUI(flags) { |
| 1050 |
if (!this.domElement) { |
| 1051 |
return; |
| 1052 |
} |
| 1053 |
flags = flags || {}; |
| 1054 |
|
| 1055 |
var col = this.colour, |
| 1056 |
hsl = col.hsla, |
| 1057 |
cssHue = 'hsl(' + hsl[0] * HUES + ', 100%, 50%)', |
| 1058 |
cssHSL = col.hslString, |
| 1059 |
cssHSLA = col.hslaString; |
| 1060 |
|
| 1061 |
var uiH = this._domH, |
| 1062 |
uiSL = this._domSL, |
| 1063 |
uiA = this._domA, |
| 1064 |
thumbH = $('.picker_selector', uiH), |
| 1065 |
thumbSL = $('.picker_selector', uiSL), |
| 1066 |
thumbA = $('.picker_selector', uiA); |
| 1067 |
|
| 1068 |
function posX(parent, child, relX) { |
| 1069 |
child.style.left = relX * 100 + '%'; |
| 1070 |
} |
| 1071 |
function posY(parent, child, relY) { |
| 1072 |
child.style.top = relY * 100 + '%'; |
| 1073 |
} |
| 1074 |
|
| 1075 |
|
| 1076 |
posX(uiH, thumbH, hsl[0]); |
| 1077 |
|
| 1078 |
this._domSL.style.backgroundColor = this._domH.style.color = cssHue; |
| 1079 |
|
| 1080 |
|
| 1081 |
posX(uiSL, thumbSL, hsl[1]); |
| 1082 |
posY(uiSL, thumbSL, 1 - hsl[2]); |
| 1083 |
|
| 1084 |
uiSL.style.color = cssHSL; |
| 1085 |
|
| 1086 |
|
| 1087 |
posY(uiA, thumbA, 1 - hsl[3]); |
| 1088 |
|
| 1089 |
var opaque = cssHSL, |
| 1090 |
transp = opaque.replace('hsl', 'hsla').replace(')', ', 0)'), |
| 1091 |
bg = 'linear-gradient(' + [opaque, transp] + ')'; |
| 1092 |
|
| 1093 |
this._domA.style.backgroundImage = bg + ', ' + BG_TRANSP; |
| 1094 |
|
| 1095 |
|
| 1096 |
if (!flags.fromEditor) { |
| 1097 |
var format = this.settings.editorFormat, |
| 1098 |
alpha = this.settings.alpha; |
| 1099 |
|
| 1100 |
var value = void 0; |
| 1101 |
switch (format) { |
| 1102 |
case 'rgb': |
| 1103 |
value = col.printRGB(alpha);break; |
| 1104 |
case 'hsl': |
| 1105 |
value = col.printHSL(alpha);break; |
| 1106 |
default: |
| 1107 |
value = col.printHex(alpha); |
| 1108 |
} |
| 1109 |
this._domEdit.value = value; |
| 1110 |
} |
| 1111 |
|
| 1112 |
|
| 1113 |
this._domSample.style.color = cssHSLA; |
| 1114 |
} |
| 1115 |
}, { |
| 1116 |
key: '_ifPopup', |
| 1117 |
value: function _ifPopup(actionIf, actionElse) { |
| 1118 |
if (this.settings.parent && this.settings.popup) { |
| 1119 |
actionIf && actionIf(this.settings.popup); |
| 1120 |
} else { |
| 1121 |
actionElse && actionElse(); |
| 1122 |
} |
| 1123 |
} |
| 1124 |
}, { |
| 1125 |
key: '_toggleDOM', |
| 1126 |
value: function _toggleDOM(toVisible) { |
| 1127 |
var dom = this.domElement; |
| 1128 |
if (!dom) { |
| 1129 |
return false; |
| 1130 |
} |
| 1131 |
|
| 1132 |
var displayStyle = toVisible ? '' : 'none', |
| 1133 |
toggle = dom.style.display !== displayStyle; |
| 1134 |
|
| 1135 |
if (toggle) { |
| 1136 |
dom.style.display = displayStyle; |
| 1137 |
} |
| 1138 |
return toggle; |
| 1139 |
} |
| 1140 |
|
| 1141 |
|
| 1142 |
}]); |
| 1143 |
return Picker; |
| 1144 |
}(); |
| 1145 |
|
| 1146 |
return Picker; |
| 1147 |
|
| 1148 |
}))); |
| 1149 |
|
