name : vanilla-picker.js /*! * vanilla-picker v2.7.2 (MODIFIED by Pagelayer) * https://vanilla-picker.js.org * * Copyright 2017-2019 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate) * Released under the ISC license. */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Picker = factory()); }(this, (function () { 'use strict'; var classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; var createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); String.prototype.startsWith = String.prototype.startsWith || function (needle) { return this.indexOf(needle) === 0; }; String.prototype.padStart = String.prototype.padStart || function (len, pad) { var str = this;while (str.length < len) { str = pad + str; }return str; }; 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' }; function printNum(num) { var decs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, '').replace(/\.$/, '') : num.toString(); return str || '0'; } var Color = function () { function Color(r, g, b, a) { classCallCheck(this, Color); var that = this; function parseString(input) { if (input.startsWith('hsl')) { 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]; if (_a === undefined) { _a = 1; } h /= 360; s /= 100; l /= 100; that.hsla = [h, s, l, _a]; } else if (input.startsWith('rgb')) { 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]; if (_a2 === undefined) { _a2 = 1; } that.rgba = [_r, _g, _b, _a2]; } else { if (input.startsWith('#')) { that.rgba = Color.hexToRgb(input); } else { that.rgba = Color.nameToRgb(input) || Color.hexToRgb(input); } } } if (r === undefined) ; else if (Array.isArray(r)) { this.rgba = r; } else if (b === undefined) { var color = r && '' + r; if (color) { parseString(color.toLowerCase()); } } else { this.rgba = [r, g, b, a === undefined ? 1 : a]; } } createClass(Color, [{ key: 'printRGB', value: function printRGB(alpha) { var rgb = alpha ? this.rgba : this.rgba.slice(0, 3), vals = rgb.map(function (x, i) { return printNum(x, i === 3 ? 3 : 0); }); return alpha ? 'rgba(' + vals + ')' : 'rgb(' + vals + ')'; } }, { key: 'printHSL', value: function printHSL(alpha) { var mults = [360, 100, 100, 1], suff = ['', '%', '%', '']; var hsl = alpha ? this.hsla : this.hsla.slice(0, 3), vals = hsl.map(function (x, i) { return printNum(x * mults[i], i === 3 ? 3 : 1) + suff[i]; }); return alpha ? 'hsla(' + vals + ')' : 'hsl(' + vals + ')'; } }, { key: 'printHex', value: function printHex(alpha) { var hex = this.hex; return alpha ? hex : hex.substring(0, 7); } }, { key: 'rgba', get: function get$$1() { if (this._rgba) { return this._rgba; } if (!this._hsla) { throw new Error('No color is set'); } return this._rgba = Color.hslToRgb(this._hsla); }, set: function set$$1(rgb) { if (rgb.length === 3) { rgb[3] = 1; } this._rgba = rgb; this._hsla = null; } }, { key: 'rgbString', get: function get$$1() { return this.printRGB(); } }, { key: 'rgbaString', get: function get$$1() { return this.printRGB(true); } }, { key: 'hsla', get: function get$$1() { if (this._hsla) { return this._hsla; } if (!this._rgba) { throw new Error('No color is set'); } return this._hsla = Color.rgbToHsl(this._rgba); }, set: function set$$1(hsl) { if (hsl.length === 3) { hsl[3] = 1; } this._hsla = hsl; this._rgba = null; } }, { key: 'hslString', get: function get$$1() { return this.printHSL(); } }, { key: 'hslaString', get: function get$$1() { return this.printHSL(true); } }, { key: 'hex', get: function get$$1() { var rgb = this.rgba, hex = rgb.map(function (x, i) { return i < 3 ? x.toString(16) : Math.round(x * 255).toString(16); }); return '#' + hex.map(function (x) { return x.padStart(2, '0'); }).join(''); }, set: function set$$1(hex) { this.rgba = Color.hexToRgb(hex); } }], [{ key: 'hexToRgb', value: function hexToRgb(input) { 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'); if (!hex.match(/^([0-9a-fA-F]{8})$/)) { throw new Error('Unknown hex color; ' + input); } var rgba = hex.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1) .map(function (x) { return parseInt(x, 16); }); rgba[3] = rgba[3] / 255; return rgba; } }, { key: 'nameToRgb', value: function nameToRgb(input) { var hex = colorNames[input]; if (hex) { return Color.hexToRgb(hex); } } }, { key: 'rgbToHsl', value: function rgbToHsl(_ref) { var _ref2 = slicedToArray(_ref, 4), r = _ref2[0], g = _ref2[1], b = _ref2[2], a = _ref2[3]; r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h = void 0, s = void 0, l = (max + min) / 2; if (max === min) { h = s = 0; } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0);break; case g: h = (b - r) / d + 2;break; case b: h = (r - g) / d + 4;break; } h /= 6; } return [h, s, l, a]; } }, { key: 'hslToRgb', value: function hslToRgb(_ref3) { var _ref4 = slicedToArray(_ref3, 4), h = _ref4[0], s = _ref4[1], l = _ref4[2], a = _ref4[3]; var r = void 0, g = void 0, b = void 0; if (s === 0) { r = g = b = l; } else { var hue2rgb = function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; }; var q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } var rgba = [r * 255, g * 255, b * 255].map(Math.round); rgba[3] = a; return rgba; } }]); return Color; }(); var root = window; function dragTracker(options) { var ep = Element.prototype; if (!ep.matches) ep.matches = ep.msMatchesSelector || ep.webkitMatchesSelector; if (!ep.closest) ep.closest = function (s) { var node = this; do { if (node.matches(s)) return node; node = node.tagName === 'svg' ? node.parentNode : node.parentElement; } while (node); return null; }; options = options || {}; var container = options.container || options.doc.documentElement, selector = options.selector, callback = options.callback || console.log, callbackStart = options.callbackDragStart, callbackEnd = options.callbackDragEnd, callbackClick = options.callbackClick, propagate = options.propagateEvents, roundCoords = options.roundCoords !== false, dragOutside = options.dragOutside !== false, handleOffset = options.handleOffset || options.handleOffset !== false; var offsetToCenter = null; switch (handleOffset) { case 'center': offsetToCenter = true;break; case 'topleft': case 'top-left': offsetToCenter = false;break; } var dragState = void 0; function getMousePos(e, elm, offset, stayWithin) { var x = e.clientX, y = e.clientY; function respectBounds(value, min, max) { return Math.max(min, Math.min(value, max)); } if (elm) { var bounds = elm.getBoundingClientRect(); x -= bounds.left; y -= bounds.top; if (offset) { x -= offset[0]; y -= offset[1]; } if (stayWithin) { x = respectBounds(x, 0, bounds.width); y = respectBounds(y, 0, bounds.height); } if (elm !== container) { var center = offsetToCenter !== null ? offsetToCenter : elm.nodeName === 'circle' || elm.nodeName === 'ellipse'; if (center) { x -= bounds.width / 2; y -= bounds.height / 2; } } } return roundCoords ? [Math.round(x), Math.round(y)] : [x, y]; } function stopEvent(e) { e.preventDefault(); if (!propagate) { e.stopPropagation(); } } function onDown(e) { var target = void 0; if (selector) { target = selector instanceof Element ? selector.contains(e.target) ? selector : null : e.target.closest(selector); } else { target = {}; } if (target) { stopEvent(e); var mouseOffset = selector && handleOffset ? getMousePos(e, target) : [0, 0], startPos = getMousePos(e, container, mouseOffset); dragState = { target: target, mouseOffset: mouseOffset, startPos: startPos, actuallyDragged: false }; if (callbackStart) { callbackStart(target, startPos); } } } function onMove(e) { if (!dragState) { return; } stopEvent(e); var start = dragState.startPos, pos = getMousePos(e, container, dragState.mouseOffset, !dragOutside); dragState.actuallyDragged = dragState.actuallyDragged || start[0] !== pos[0] || start[1] !== pos[1]; callback(dragState.target, pos, start); } function onEnd(e, cancelled) { if (!dragState) { return; } if (callbackEnd || callbackClick) { var isClick = !dragState.actuallyDragged, pos = isClick ? dragState.startPos : getMousePos(e, container, dragState.mouseOffset, !dragOutside); if (callbackClick && isClick && !cancelled) { callbackClick(dragState.target, pos); } if (callbackEnd) { callbackEnd(dragState.target, pos, dragState.startPos, cancelled || isClick && callbackClick); } } dragState = null; } addEvent(container, 'mousedown', function (e) { if (isLeftButton(e)) { onDown(e); } else { onEnd(e, true); } }); addEvent(container, 'touchstart', function (e) { return relayTouch(e, onDown); }); addEvent(container, 'mousemove', function (e) { if (!dragState) { return; } if (isLeftButton(e)) { onMove(e); } else { onEnd(e); } }); addEvent(container, 'touchmove', function (e) { return relayTouch(e, onMove); }); addEvent(container, 'mouseup', function (e) { if (dragState && !isLeftButton(e)) { onEnd(e); } }); function onTouchEnd(e, cancelled) { onEnd(tweakTouch(e), cancelled); } addEvent(container, 'touchend', function (e) { return onTouchEnd(e); }); addEvent(container, 'touchcancel', function (e) { return onTouchEnd(e, true); }); function addEvent(target, type, handler) { target.addEventListener(type, handler); } function isLeftButton(e) { return e.buttons !== undefined ? e.buttons === 1 : e.which === 1; } function relayTouch(e, handler) { if (e.touches.length !== 1) { onEnd(e, true);return; } handler(tweakTouch(e)); } function tweakTouch(e) { var touch = e.targetTouches[0]; if (!touch) { touch = e.changedTouches[0]; } touch.preventDefault = e.preventDefault.bind(e); touch.stopPropagation = e.stopPropagation.bind(e); return touch; } } 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")'; var HUES = 360; var EVENT_KEY = 'keydown', EVENT_CLICK_OUTSIDE = 'mousedown', EVENT_TAB_MOVE = 'focusin'; function parseHTML(htmlString, doc) { var div = doc.createElement('div'); div.innerHTML = htmlString; return div.firstElementChild; } function $(selector, context) { return (context || document).querySelector(selector); } function addEvent(target, type, handler) { target.addEventListener(type, handler, false); } function stopEvent(e) { e.preventDefault(); e.stopPropagation(); } function onKey(target, keys, handler, stop) { addEvent(target, EVENT_KEY, function (e) { if (keys.indexOf(e.key) >= 0) { if (stop) { stopEvent(e); } handler(e); } }); } // Add the CSS function appendCSS(doc){ if(doc.querySelector('#vanilla-picker-style')){ return; } var style = document.createElement('style'); style.id = 'vanilla-picker-style'; doc.documentElement.firstElementChild .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}'; } var Picker = function () { function Picker(options) { var _this = this; classCallCheck(this, Picker); this.settings = { popup: 'right', layout: 'default', alpha: true, editor: true, editorFormat: 'hex' }; this._openProxy = function (e) { return _this.openHandler(e); }; this.onChange = null; this.onDone = null; this.onOpen = null; this.onClose = null; appendCSS(options.doc); this.setOptions(options); } createClass(Picker, [{ key: 'setOptions', value: function setOptions(options) { if (!options) { return; } var settings = this.settings; function transfer(source, target, skipKeys) { for (var key in source) { if (skipKeys && skipKeys.indexOf(key) >= 0) { continue; } target[key] = source[key]; } } if (options instanceof HTMLElement) { settings.parent = options; } else { if (settings.parent && options.parent && settings.parent !== options.parent) { settings.parent.removeEventListener('click', this._openProxy, false); this._popupInited = false; } transfer(options, settings ); if (options.onChange) { this.onChange = options.onChange; } if (options.onDone) { this.onDone = options.onDone; } if (options.onOpen) { this.onOpen = options.onOpen; } if (options.onClose) { this.onClose = options.onClose; } var col = options.color || options.colour; if (col) { this._setColor(col); } } var parent = settings.parent; if (parent && settings.popup && !this._popupInited) { addEvent(parent, 'click', this._openProxy); onKey(parent, [' ', 'Spacebar', 'Enter'], this._openProxy ); this._popupInited = true; } else if (options.parent && !settings.popup) { this.show(); } } }, { key: 'openHandler', value: function openHandler(e) { if (this.show()) { e && e.preventDefault(); this.settings.parent.style.pointerEvents = 'none'; var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement; setTimeout(function () { return toFocus.focus(); }, 100); if (this.onOpen) { this.onOpen(this.colour); } } } }, { key: 'closeHandler', value: function closeHandler(e) { var event = e && e.type; var doHide = false; if (!e) { doHide = true; } else if (event === EVENT_CLICK_OUTSIDE || event === EVENT_TAB_MOVE) { if (!this.domElement.contains(e.target)) { doHide = true; } } else { stopEvent(e); doHide = true; } if (doHide && this.hide()) { this.settings.parent.style.pointerEvents = ''; if (event !== EVENT_CLICK_OUTSIDE) { this.settings.parent.focus(); } if (this.onClose) { this.onClose(this.colour); } } } }, { key: 'movePopup', value: function movePopup(options, open) { this.closeHandler(); this.setOptions(options); if (open) { this.openHandler(); } } }, { key: 'setColor', value: function setColor(color, silent) { this._setColor(color, { silent: silent }); } }, { key: '_setColor', value: function _setColor(color, flags) { if (typeof color === 'string') { color = color.trim(); } if (!color) { return; } flags = flags || {}; var c = void 0; try { c = new Color(color); } catch (ex) { if (flags.failSilently) { return; } throw ex; } if (!this.settings.alpha) { var hsla = c.hsla; hsla[3] = 1; c.hsla = hsla; } this.colour = this.color = c; this._setHSLA(null, null, null, null, flags); } }, { key: 'setColour', value: function setColour(colour, silent) { this.setColor(colour, silent); } }, { key: 'show', value: function show() { var parent = this.settings.parent; if (!parent) { return false; } if (this.domElement) { var toggled = this._toggleDOM(true); this._setPosition(); return toggled; } 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>'; var wrapper = parseHTML(html, this.settings.doc); this.domElement = wrapper; this._domH = $('.picker_hue', wrapper); this._domSL = $('.picker_sl', wrapper); this._domA = $('.picker_alpha', wrapper); this._domEdit = $('.picker_editor input', wrapper); this._domSample = $('.picker_sample', wrapper); this._domOkay = $('.picker_done button', wrapper); wrapper.classList.add('layout_' + this.settings.layout); if (!this.settings.alpha) { wrapper.classList.add('no_alpha'); } if (!this.settings.editor) { wrapper.classList.add('no_editor'); } this._ifPopup(function () { return wrapper.classList.add('popup'); }); this._setPosition(); if (this.colour) { this._updateUI(); } else { this._setColor('#0cf'); } this._bindEvents(); return true; } }, { key: 'hide', value: function hide() { return this._toggleDOM(false); } }, { key: '_bindEvents', value: function _bindEvents() { var _this2 = this; var that = this, dom = this.domElement; addEvent(dom, 'click', function (e) { return e.preventDefault(); }); function createDragConfig(container, callbackRelative) { function relayDrag(_, pos) { var relX = pos[0] / container.clientWidth, relY = pos[1] / container.clientHeight; callbackRelative(relX, relY); } var config = { container: container, dragOutside: false, callback: relayDrag, callbackDragStart: relayDrag, propagateEvents: true }; return config; } dragTracker(createDragConfig(this._domH, function (x, y) { return that._setHSLA(x); })); dragTracker(createDragConfig(this._domSL, function (x, y) { return that._setHSLA(null, x, 1 - y); })); if (this.settings.alpha) { dragTracker(createDragConfig(this._domA, function (x, y) { return that._setHSLA(null, null, null, 1 - y); })); } var editInput = this._domEdit; { addEvent(editInput, 'input', function (e) { that._setColor(this.value, { fromEditor: true, failSilently: true }); }); addEvent(editInput, 'focus', function (e) { var input = this; if (input.selectionStart === input.selectionEnd) { input.select(); } }); } var popupCloseProxy = function popupCloseProxy(e) { _this2._ifPopup(function () { return _this2.closeHandler(e); }); }; var onDoneProxy = function onDoneProxy(e) { _this2._ifPopup(function () { return _this2.closeHandler(e); }); if (_this2.onDone) { _this2.onDone(_this2.colour); } }; addEvent(this.settings.doc, EVENT_CLICK_OUTSIDE, popupCloseProxy); addEvent(this.settings.doc, EVENT_TAB_MOVE, popupCloseProxy); onKey(dom, ['Esc', 'Escape'], popupCloseProxy); addEvent(this._domOkay, 'click', onDoneProxy); onKey(dom, ['Enter'], onDoneProxy); } }, { key: '_setPosition', value: function _setPosition() { var parent = this.settings.parent, elm = this.domElement; if (parent !== elm.parentNode) { parent.appendChild(elm); } this._ifPopup(function (popup) { if (getComputedStyle(parent).position === 'static') { parent.style.position = 'relative'; } var cssClass = popup === true ? 'popup_right' : 'popup_' + popup; ['popup_top', 'popup_bottom', 'popup_left', 'popup_right'].forEach(function (c) { if (c === cssClass) { elm.classList.add(c); } else { elm.classList.remove(c); } }); elm.classList.add(cssClass); }); } }, { key: '_setHSLA', value: function _setHSLA(h, s, l, a, flags) { flags = flags || {}; var col = this.colour, hsla = col.hsla; [h, s, l, a].forEach(function (x, i) { if (x || x === 0) { hsla[i] = x; } }); col.hsla = hsla; this._updateUI(flags); if (this.onChange && !flags.silent) { this.onChange(col); } } }, { key: '_updateUI', value: function _updateUI(flags) { if (!this.domElement) { return; } flags = flags || {}; var col = this.colour, hsl = col.hsla, cssHue = 'hsl(' + hsl[0] * HUES + ', 100%, 50%)', cssHSL = col.hslString, cssHSLA = col.hslaString; var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $('.picker_selector', uiH), thumbSL = $('.picker_selector', uiSL), thumbA = $('.picker_selector', uiA); function posX(parent, child, relX) { child.style.left = relX * 100 + '%'; } function posY(parent, child, relY) { child.style.top = relY * 100 + '%'; } posX(uiH, thumbH, hsl[0]); this._domSL.style.backgroundColor = this._domH.style.color = cssHue; posX(uiSL, thumbSL, hsl[1]); posY(uiSL, thumbSL, 1 - hsl[2]); uiSL.style.color = cssHSL; posY(uiA, thumbA, 1 - hsl[3]); var opaque = cssHSL, transp = opaque.replace('hsl', 'hsla').replace(')', ', 0)'), bg = 'linear-gradient(' + [opaque, transp] + ')'; this._domA.style.backgroundImage = bg + ', ' + BG_TRANSP; if (!flags.fromEditor) { var format = this.settings.editorFormat, alpha = this.settings.alpha; var value = void 0; switch (format) { case 'rgb': value = col.printRGB(alpha);break; case 'hsl': value = col.printHSL(alpha);break; default: value = col.printHex(alpha); } this._domEdit.value = value; } this._domSample.style.color = cssHSLA; } }, { key: '_ifPopup', value: function _ifPopup(actionIf, actionElse) { if (this.settings.parent && this.settings.popup) { actionIf && actionIf(this.settings.popup); } else { actionElse && actionElse(); } } }, { key: '_toggleDOM', value: function _toggleDOM(toVisible) { var dom = this.domElement; if (!dom) { return false; } var displayStyle = toVisible ? '' : 'none', toggle = dom.style.display !== displayStyle; if (toggle) { dom.style.display = displayStyle; } return toggle; } }]); return Picker; }(); return Picker; })));