/* (c) https://github.com/Simonwep/pickr */ ! function(t, e) { "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.Pickr = e() : t.Pickr = e() }(window, function() { return function(t) { var e = {}; function o(r) { if (e[r]) return e[r].exports; var n = e[r] = { i: r, l: !1, exports: {} }; return t[r].call(n.exports, n, n.exports, o), n.l = !0, n.exports } return o.m = t, o.c = e, o.d = function(t, e, r) { o.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: r }) }, o.r = function(t) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 }) }, o.t = function(t, e) { if (1 & e && (t = o(t)), 8 & e) return t; if (4 & e && "object" == typeof t && t && t.__esModule) return t; var r = Object.create(null); if (o.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: t }), 2 & e && "string" != typeof t) for (var n in t) o.d(r, n, function(e) { return t[e] }.bind(null, n)); return r }, o.n = function(t) { var e = t && t.__esModule ? function() { return t. default } : function() { return t }; return o.d(e, "a", e), e }, o.o = function(t, e) { return Object.prototype.hasOwnProperty.call(t, e) }, o.p = "dist/", o(o.s = 8) }([function(t, e, o) { "use strict"; Object.defineProperty(e, "__esModule", { value: !0 }); var r = Object.assign || function(t) { for (var e = 1; e < arguments.length; e++) { var o = arguments[e]; for (var r in o) Object.prototype.hasOwnProperty.call(o, r) && (t[r] = o[r]) } return t }; function n(t, e, o) { var n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {}, i = arguments[4] ? "removeEventListener" : "addEventListener"; HTMLCollection.prototype.isPrototypeOf(t) || NodeList.prototype.isPrototypeOf(t) ? t = Array.from(t) : Array.isArray(t) || (t = [t]), Array.isArray(e) || (e = [e]); var a = !0, c = !1, s = void 0; try { for (var u, l = t[Symbol.iterator](); !(a = (u = l.next()).done); a = !0) { var p = u.value, h = !0, f = !1, v = void 0; try { for (var d, y = e[Symbol.iterator](); !(h = (d = y.next()).done); h = !0) { var m = d.value; p[i](m, o, r({ capture: !1 }, n)) } } catch (t) { f = !0, v = t } finally { try { !h && y. return &&y. return () } finally { if (f) throw v } } } } catch (t) { c = !0, s = t } finally { try { !a && l. return &&l. return () } finally { if (c) throw s } } } e.on = function(t, e, o) { var r = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {}; n(t, e, o, r) }, e.off = function(t, e, o) { var r = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {}; n(t, e, o, r, !0) }, e.createElementFromString = function(t) { var e = document.createElement("template"); return e.innerHTML = t.trim(), e.content.firstChild }, e.eventPath = function(t) { var e = t.path || t.composedPath && t.composedPath(); if (e) return e; var o = t.target.parentElement; for (e = [t.target]; o; o = o.parentElement) e.push(o); return e.push(document, window), e }, e.debounce = function(t, e, o) { var r = arguments, n = void 0; return function() { var i = !n; clearTimeout(n), n = setTimeout(function() { n = null, e.apply(t, arguments) }, o), i && e.apply(t, r) } } }, function(t, e, o) { "use strict"; Object.defineProperty(e, "__esModule", { value: !0 }); var r = function() { return function(t, e) { if (Array.isArray(t)) return t; if (Symbol.iterator in Object(t)) return function(t, e) { var o = [], r = !0, n = !1, i = void 0; try { for (var a, c = t[Symbol.iterator](); !(r = (a = c.next()).done) && (o.push(a.value), !e || o.length !== e); r = !0); } catch (t) { n = !0, i = t } finally { try { !r && c. return &&c. return () } finally { if (n) throw i } } return o }(t, e); throw new TypeError("Invalid attempt to destructure non-iterable instance") } }(); function n(t) { if (Array.isArray(t)) { for (var e = 0, o = Array(t.length); e < t.length; e++) o[e] = t[e]; return o } return Array.from(t) } e.hsvToRgb = s, e.hsvToHex = function(t, e, o) { return s(t, e, o).map(function(t) { return t.toString(16).padStart(2, "0") }) }, e.hsvToCmyk = function(t, e, o) { var r = s(t, e, o), n = r[0] / 255, c = r[1] / 255, u = r[2] / 255, l = void 0, p = void 0, h = void 0; return l = a(1 - n, 1 - c, 1 - u), p = 1 === l ? 0 : (1 - c - l) / (1 - l), h = 1 === l ? 0 : (1 - u - l) / (1 - l), [i(100 * (1 === l ? 0 : (1 - n - l) / (1 - l))), i(100 * p), i(100 * h), i(100 * l)] }, e.hsvToHsl = function(t, e, o) { var r = (2 - (e /= 100)) * (o /= 100) / 2; 0 !== r && (e = 1 === r ? 0 : r < .5 ? e * o / (2 * r) : e * o / (2 - 2 * r)); return [i(t), i(100 * e), i(100 * r)] }, e.parseToHSV = function(t) { var e = { cmyk: /^cmyk[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)/i, rgba: /^(rgb|rgba)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]*([0-9.]+|)/i, hsla: /^(hsl|hsla)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]*([0-9.]+|)/i, hsva: /^(hsv|hsva)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]*([0-9.]+|)/i, hex: /^(#|)(([0-9A-Fa-f]{6})|([0-9A-Fa-f]{3}))$/i }, o = function(t) { return t.map(function(t) { return /^(\d+|\d+\.\d+)$/.test(t) ? Number(t) : void 0 }) }, c = void 0; if (c = e.cmyk.exec(t)) { var s = o(c), l = r(s, 5), p = l[1], h = l[2], f = l[3], v = l[4]; return p > 100 || h > 100 || f > 100 || v > 100 ? null : [].concat(n(function(t, e, o, r) { e /= 100, o /= 100; var c = 1 - a(1, (t /= 100) * (1 - (r /= 100)) + r), s = 1 - a(1, e * (1 - r) + r), l = 1 - a(1, o * (1 - r) + r); return c = i(255 * c), s = i(255 * s), l = i(255 * l), [].concat(n(u(c, s, l))) }(p, h, f, v)), [1]) } if (c = e.rgba.exec(t)) { var d = o(c), y = r(d, 6), m = y[2], g = y[3], b = y[4], w = y[5], k = void 0 === w ? 1 : w; return m > 255 || g > 255 || b > 255 || k < 0 || k > 1 ? null : [].concat(n(u(m, g, b)), [k]) } if (c = e.hex.exec(t)) { var S = c, _ = r(S, 3), O = _[2]; return [].concat(n(function(t) { 3 === t.length && (t += t); var e = t.match(/.{2}/g).map(function(t) { return parseInt(t, 16) }), o = r(e, 3), n = o[0], i = o[1], a = o[2]; return u(n, i, a) }(O)), [1]) } if (c = e.hsla.exec(t)) { var C = o(c), P = r(C, 6), A = P[2], x = P[3], j = P[4], H = P[5], M = void 0 === H ? 1 : H; return A > 360 || x > 100 || j > 100 || M < 0 || M > 1 ? null : [].concat(n(function(t, e, o) { e /= 100; var r = i(2 * (e *= (o /= 100) < .5 ? o : 1 - o) / (o + e) * 100), n = i(100 * (o + e)); return [t, r, n] }(A, x, j)), [M]) } if (c = e.hsva.exec(t)) { var E = o(c), T = r(E, 6), q = T[2], L = T[3], R = T[4], V = T[5], B = void 0 === V ? 1 : V; return q > 360 || L > 100 || R > 100 || B < 0 || B > 1 ? null : [q, L, R, B] } return null }; var i = Math.round, a = Math.min, c = Math.max; function s(t, e, o) { t = t / 360 * 6, e /= 100, o /= 100; var r = Math.floor(t), n = t - r, a = o * (1 - e), c = o * (1 - n * e), s = o * (1 - (1 - n) * e), u = r % 6, l = [s, o, o, c, a, a][u], p = [a, a, s, o, o, c][u]; return [i(255 * [o, c, a, a, s, o][u]), i(255 * l), i(255 * p)] } function u(t, e, o) { var r, n = void 0, s = void 0, u = a(t /= 255, e /= 255, o /= 255), l = c(t, e, o), p = l - u; if (r = l, 0 === p) n = s = 0; else { s = p / l; var h = ((l - t) / 6 + p / 2) / p, f = ((l - e) / 6 + p / 2) / p, v = ((l - o) / 6 + p / 2) / p; t === l ? n = v - f : e === l ? n = 1 / 3 + h - v : o === l && (n = 2 / 3 + f - h), n < 0 ? n += 1 : n > 1 && (n -= 1) } return [i(360 * n), i(100 * s), i(100 * r)] } }, function(t, e, o) { "use strict"; Object.defineProperty(e, "__esModule", { value: !0 }); var r = function() { function t(t, e) { for (var o = 0; o < e.length; o++) { var r = e[o]; r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r) } } return function(e, o, r) { return o && t(e.prototype, o), r && t(e, r), e } }(), n = function(t) { if (t && t.__esModule) return t; var e = {}; if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]); return e. default = t, e }(o(0)); var i = function() { function t(e) { ! function(t, e) { if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function") }(this, t); var o = { onchange: void 0, className: "" }; this.options = Object.assign(o, e), this._ontap = this._ontap.bind(this), n.on(this.options.elements, "click", this._ontap) } return r(t, [{ key: "_ontap", value: function(t) { var e = this.options; e.elements.forEach(function(t) { return t.classList.remove(e.className) }), t.target.classList.add(e.className), "function" == typeof e.onchange && e.onchange() } }, { key: "enable", value: function() { n.on(this.options.elements, "click", this._ontap()) } }, { key: "disable", value: function() { n.on(this.options.elements, "click", this._ontap()) } }]), t }(); e. default = i }, function(t, e, o) { "use strict"; Object.defineProperty(e, "__esModule", { value: !0 }); var r = function() { function t(t, e) { for (var o = 0; o < e.length; o++) { var r = e[o]; r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r) } } return function(e, o, r) { return o && t(e.prototype, o), r && t(e, r), e } }(), n = function(t) { if (t && t.__esModule) return t; var e = {}; if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]); return e. default = t, e }(o(0)); var i = function() { function t(e) { ! function(t, e) { if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function") }(this, t); var o = { lockX: !1, lockY: !1, onchange: void 0 }; this.options = Object.assign(o, e); var r = Object.getOwnPropertyNames(Object.getPrototypeOf(this)), i = !0, a = !1, c = void 0; try { for (var s, u = r[Symbol.iterator](); !(i = (s = u.next()).done); i = !0) { var l = s.value; "_" === l.charAt(0) && "function" == typeof this[l] && (this[l] = this[l].bind(this)) } } catch (t) { a = !0, c = t } finally { try { !i && u. return &&u. return () } finally { if (a) throw c } } n.on([this.options.wrapper, this.options.element], "mousedown", this._tapstart), n.on([this.options.wrapper, this.options.element], "touchstart", this._tapstart, { passive: !1 }) } return r(t, [{ key: "_tapstart", value: function(t) { n.on(document, ["mouseup", "touchend", "touchcancel"], this._tapstop), n.on(document, ["mousemove", "touchmove"], this._tapmove), this._tapmove(t), t.preventDefault() } }, { key: "_tapmove", value: function(t) { var e = this.options.wrapper, o = this.options.element, r = e.getBoundingClientRect(), n = void 0, i = void 0; if (t) { var a = t && t.touches && t.touches[0]; n = t ? (a || t).clientX : 0, i = t ? (a || t).clientY : 0, n < r.left ? n = r.left : n > r.left + r.width && (n = r.left + r.width), i < r.top ? i = r.top : i > r.top + r.height && (i = r.top + r.height), n -= r.left, i -= r.top } else this.cache ? (n = this.cache.x, i = this.cache.y) : (n = 0, i = 0); "function" == typeof this.options.onchange && this.options.onchange(n, i), this.options.lockX || (o.style.left = n - o.offsetWidth / 2 + "px"), this.options.lockY || (o.style.top = i - o.offsetHeight / 2 + "px"), this.cache = { x: n, y: i } } }, { key: "_tapstop", value: function() { n.off(document, ["mouseup", "touchend", "touchcancel"], this._tapstop), n.off(document, ["mousemove", "touchmove"], this._tapmove) } }, { key: "trigger", value: function() { this._tapmove() } }, { key: "update", value: function() { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0, e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, o = this.options.wrapper.getBoundingClientRect(); this._tapmove(new MouseEvent("mousemove", { clientX: o.left + t, clientY: o.top + e })) } }]), t }(); e. default = i }, function(t, e, o) { "use strict"; Object.defineProperty(e, "__esModule", { value: !0 }), e.HSVaColor = void 0; var r = function() { function t(t, e) { for (var o = 0; o < e.length; o++) { var r = e[o]; r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r) } } return function(e, o, r) { return o && t(e.prototype, o), r && t(e, r), e } }(), n = function(t) { if (t && t.__esModule) return t; var e = {}; if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]); return e. default = t, e }(o(1)); e.HSVaColor = function() { function t() { var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0, o = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0, n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1; ! function(t, e) { if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function") }(this, t), this.h = e, this.s = o, this.v = r, this.a = n } return r(t, [{ key: "toHSVA", value: function() { var t = [this.h, this.s, this.v, this.a]; return t.toString = function() { return "hsva(" + this[0] + ", " + this[1] + "%, " + this[2] + "%, " + this[3] + ")" }, t } }, { key: "toHSLA", value: function() { var t = n.hsvToHsl(this.h, this.s, this.v).concat([this.a]); return t.toString = function() { return "hsla(" + this[0] + ", " + this[1] + "%, " + this[2] + "%, " + this[3] + ")" }, t } }, { key: "toRGBA", value: function() { var t = n.hsvToRgb(this.h, this.s, this.v).concat([this.a]); return t.toString = function() { return "rgba(" + this[0] + ", " + this[1] + ", " + this[2] + ", " + this[3] + ")" }, t } }, { key: "toHEX", value: function() { var t = n.hsvToHex(this.h, this.s, this.v); return t.toString = function() { return "#" + this.join("").toUpperCase() }, t } }, { key: "toCMYK", value: function() { var t = n.hsvToCmyk(this.h, this.s, this.v); return t.toString = function() { this[0], this[1], this[2], this[3] }, t } }, { key: "clone", value: function() { return new t(this.h, this.s, this.v, this.a) } }]), t }() }, , , function(t, e, o) {}, function(t, e, o) { "use strict"; var r = function() { function t(t, e) { for (var o = 0; o < e.length; o++) { var r = e[o]; r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r) } } return function(e, o, r) { return o && t(e.prototype, o), r && t(e, r), e } }(); o(7); var n = l(o(0)), i = l(o(1)), a = o(4), c = u(o(3)), s = u(o(2)); function u(t) { return t && t.__esModule ? t : { default: t } } function l(t) { if (t && t.__esModule) return t; var e = {}; if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]); return e. default = t, e } function p(t) { if (Array.isArray(t)) { for (var e = 0, o = Array(t.length); e < t.length; e++) o[e] = t[e]; return o } return Array.from(t) } var h = function() { function t(e) { ! function(t, e) { if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function") }(this, t); var o = { components: { output: {} }, default: "fff", onChange: function() {}, onSave: function() {} }; this.options = Object.assign(o, e); var r = Object.getOwnPropertyNames(Object.getPrototypeOf(this)), n = !0, i = !1, c = void 0; try { for (var s, u = r[Symbol.iterator](); !(n = (s = u.next()).done); n = !0) { var l = s.value; "_" === l.charAt(0) && "function" == typeof this[l] && (this[l] = this[l].bind(this)) } } catch (t) { i = !0, c = t } finally { try { !n && u. return &&u. return () } finally { if (i) throw c } } this.root = this._buildRoot(), this.inputActive = !1, this.color = new a.HSVaColor, this.lastColor = new a.HSVaColor, this._rePositioningPicker(!0), this._buildComponents(), this._bindEvents(), this.setColor(this.options. default), this.hide() } return r(t, [{ key: "_buildRoot", value: function() { "string" == typeof this.options.el && (this.options.el = document.querySelector(this.options.el)); var t, e, o, r, i = this.options.el, a = (t = this.options.components, e = function(t) { return t ? "" : 'style="display:none" hidden' }, o = n.createElementFromString('\n <div class="pickr">\n \n <div class="pcr-button"></div>\n\n <div class="pcr-app">\n <div class="pcr-selection">\n <div class="pcr-color-preview" ' + e(t.preview) + '>\n <div class="pcr-last-color"></div>\n <div class="pcr-current-color"></div>\n </div>\n \n <div class="pcr-color-palette">\n <div class="pcr-picker"></div>\n <div class="pcr-palette"></div>\n </div>\n \n <div class="pcr-color-chooser" ' + e(t.hue) + '>\n <div class="pcr-picker"></div>\n <div class="pcr-hue pcr-slider"></div>\n </div>\n \n <div class="pcr-color-opacity" ' + e(t.opacity) + '>\n <div class="pcr-picker"></div>\n <div class="pcr-opacity pcr-slider"></div>\n </div>\n </div>\n \n <div class="pcr-output" ' + e(t.output) + '>\n <input class="pcr-result" type="text" spellcheck="false" ' + e(t.output.input) + '>\n \n <input class="pcr-type" data-type="HEX" value="HEX" type="button" ' + e(t.output.hex) + '>\n <input class="pcr-type" data-type="RGBA" value="RGBa" type="button" ' + e(t.output.rgba) + '>\n <input class="pcr-type" data-type="HSLA" value="HSLa" type="button" ' + e(t.output.hsla) + '>\n <input class="pcr-type" data-type="HSVA" value="HSVa" type="button" ' + e(t.output.hsva) + '>\n <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" ' + e(t.output.cmyk) + '>\n \n <input class="pcr-save" value="保存" type="button">\n </div>\n </div>\n \n </div>\n '), r = { root: o, button: o.querySelector(".pcr-button"), app: o.querySelector(".pcr-app "), input: { options: o.querySelectorAll(".pcr-app .pcr-output .pcr-type"), result: o.querySelector(".pcr-app .pcr-output .pcr-result"), save: o.querySelector(".pcr-app .pcr-output .pcr-save"), type: function() { return o.querySelector(".pcr-app .pcr-output .pcr-type.active") } }, preview: { lastColor: o.querySelector(".pcr-app .pcr-color-preview .pcr-last-color"), currentColor: o.querySelector(".pcr-app .pcr-color-preview .pcr-current-color") }, palette: { picker: o.querySelector(".pcr-app .pcr-color-palette .pcr-picker"), palette: o.querySelector(".pcr-app .pcr-color-palette .pcr-palette") }, hueSlider: { picker: o.querySelector(".pcr-app .pcr-color-chooser .pcr-picker"), slider: o.querySelector(".pcr-app .pcr-color-chooser .pcr-hue.pcr-slider") }, opacitySlider: { picker: o.querySelector(".pcr-app .pcr-color-opacity .pcr-picker"), slider: o.querySelector(".pcr-app .pcr-color-opacity .pcr-opacity.pcr-slider") } }, console.log(r), Array.from(r.input.options).find(function(t) { return !t.hidden && !t.classList.add("active") }), r); return i.parentElement.replaceChild(a.root, i), a } }, { key: "_buildComponents", value: function() { var t = this, e = this.options.components, o = { palette: new c. default ({ element: t.root.palette.picker, wrapper: t.root.palette.palette, onchange: function(e, o) { var r = t.color; r.s = Math.round(e / this.wrapper.offsetWidth * 100), r.v = Math.round(100 - o / this.wrapper.offsetHeight * 100); var n = r.toRGBA().toString(); this.element.style.background = n, this.wrapper.style.background = "\n linear-gradient(to top, rgba(0, 0, 0, " + r.a + "), transparent), \n linear-gradient(to left, hsla(" + r.h + ", 100%, 50%, " + r.a + "), rgba(255, 255, 255, " + r.a + "))\n ", t.root.preview.currentColor.style.background = n, t._updateOutput() } }), hueSlider: new c. default ({ lockX: !0, element: t.root.hueSlider.picker, wrapper: t.root.hueSlider.slider, onchange: function(r, n) { e.hue && (t.color.h = Math.round(n / this.wrapper.offsetHeight * 360), this.element.style.backgroundColor = "hsl(" + t.color.h + ", 100%, 50%)", o.palette.trigger()) } }), opacitySlider: new c. default ({ lockX: !0, element: t.root.opacitySlider.picker, wrapper: t.root.opacitySlider.slider, onchange: function(o, r) { e.opacity && (t.color.a = Math.round(r / this.wrapper.offsetHeight * 100) / 100, this.element.style.background = "rgba(0, 0, 0, " + t.color.a + ")", t.components.palette.trigger()) } }), selectable: new s. default ({ elements: t.root.input.options, className: "active", onchange: function() { t.inputActive = !1, t.components.palette.trigger() } }) }; this.components = o } }, { key: "_bindEvents", value: function() { var t = this, e = this.root; n.on(e.preview.lastColor, "click", function() { return t.setHSVA.apply(t, p(t.lastColor.tohsva(!0))) }), n.on(e.button, "click", function() { return t.root.app.classList.contains("visible") ? t.hide() : t.show() }), n.on(e.input.save, "click", function() { return t.hide() }), n.on(document, "mousedown", function(o) { if (!n.eventPath(o).includes(e.root)) { var r = function() { n.off(document, "mouseup", r), t.cancel() }.bind(t); n.on(document, "mouseup", r) } }), n.on(e.input.result, "keyup", function(e) { t.setColor(e.target.value), t.inputActive = !0 }), n.on([e.palette.palette, e.palette.picker, e.hueSlider.slider, e.hueSlider.picker, e.opacitySlider.slider, e.opacitySlider.picker], "mousedown", function() { return t.inputActive = !1 }) } }, { key: "_rePositioningPicker", value: function(t) { var e = this.root.button.getBoundingClientRect(), o = this.root.app.getBoundingClientRect(), r = this.root.app.style; switch (o.bottom > window.innerHeight ? r.top = -o.height - 5 + "px" : (t || o.bottom + o.height < window.innerHeight) && (r.top = e.height + 5 + "px"), this.options.position || "middle") { case "left": r.left = -o.width + e.width + "px"; break; case "middle": r.left = -o.width / 2 + e.width / 2 + "px"; break; case "right": r.left = "0px"; break; default: r.left = -o.width / 2 + e.width + "px" } } }, { key: "_updateOutput", value: function() { var t, e = this; !this.inputActive && this.root.input.type() && (this.root.input.result.value = (t = "to" + e.root.input.type().getAttribute("data-type"), "function" == typeof e.color[t] ? e.color[t]().toString() : "")), this.options.onChange(this.color, this) } }, { key: "hide", value: function() { this.root.app.classList.remove("visible"); var t = this.color.toRGBA().toString(); this.root.preview.lastColor.style.background = t, this.root.button.style.background = t, this.lastColor = this.color.clone(), this.options.onSave(this.color, this) } }, { key: "cancel", value: function() { this.root.app.classList.remove("visible") } }, { key: "show", value: function() { this.root.app.classList.add("visible"), this._rePositioningPicker() } }, { key: "setHSVA", value: function() { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 360, e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, o = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0, r = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1; if (!(t < 0 || t > 360 || e < 0 || e > 100 || o < 0 || o > 100 || r < 0 || r > 1)) { var n = this.components.hueSlider.options.wrapper.offsetHeight * (t / 360); this.components.hueSlider.update(0, n); var i = this.components.opacitySlider.options.wrapper.offsetHeight * r; this.components.opacitySlider.update(0, i); var c = this.components.palette.options.wrapper, s = c.offsetWidth * (e / 100), u = c.offsetHeight * (1 - o / 100); this.components.palette.update(s, u), this._updateOutput(), this.color = new a.HSVaColor(t, e, o, r) } } }, { key: "setColor", value: function(t) { var e = i.parseToHSV(t); e && this.setHSVA.apply(this, p(e)) } }, { key: "getColor", value: function() { return this.color } }, { key: "getRoot", value: function() { return this.root } }]), t }(); h.utils = { on: n.on, off: n.off, eventPath: n.eventPath, createElementFromString: n.createElementFromString }, h.create = function(t) { return new h(t) }, h.version = "0.0.2", t.exports = h }]) }); const pickr = new Pickr({ el: '.color-picker', default: '#42445A', components: { preview: true, opacity: true, hue: true, output: { hex: true, rgba: true, hsva: true, input: true }, }, });
.pickr { position: relative; overflow: visible } .pickr * { box-sizing: border-box } .pickr .pcr-button { position: relative; height: 2em; width: 2em; padding: .5em; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); border-radius: .15em; cursor: pointer; background: transparent; transition: background-color .3s; font-family: Source Sans Pro } .pickr .pcr-button:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); background-size: .5em; border-radius: .15em; z-index: -1 } .pickr .pcr-app { position: absolute; display: flex; flex-direction: column; height: 15em; width: 28em; max-width: 95vw; padding: .8em; border-radius: .1em; background: #fff; box-shadow: 0 .2em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.02); visibility: hidden; opacity: 0; transition: all .3s; font-family: Source Sans Pro } .pickr .pcr-app.visible { visibility: visible; opacity: 1 } .pickr .pcr-app .pcr-output { display: flex; justify-content: space-between; align-items: center; margin-top: 1.3em } .pickr .pcr-app .pcr-output input { padding: .5em; border: none; outline: none; letter-spacing: .07em; font-size: .75em; width: 4em; text-align: center; cursor: pointer; color: #c4c4c4; background: #f8f8f8; border-radius: .15em; margin: 0 .2em; transition: all .15s } .pickr .pcr-app .pcr-output input:hover { color: gray } .pickr .pcr-app .pcr-output .pcr-result { color: gray; text-align: left; flex-grow: 1; min-width: 1em; margin-right: .5em; transition: all .2s; border-radius: .15em; background: #f8f8f8; cursor: text } .pickr .pcr-app .pcr-output .pcr-result:focus { color: #4285f4 } .pickr .pcr-app .pcr-output .pcr-result::selection { background: #4285f4; color: #fff } .pickr .pcr-app .pcr-output .pcr-type.active { color: #fff; background: #4285f4 } .pickr .pcr-app .pcr-output .pcr-save { background: #4285f4; color: #fff; width: 5em } .pickr .pcr-app .pcr-output .pcr-save:hover { background: #4370f4; color: #fff } .pickr .pcr-app .pcr-selection { display: flex; flex-grow: 1 } .pickr .pcr-app .pcr-selection .pcr-picker { position: absolute; height: 18px; width: 18px; border: 2px solid #fff; border-radius: 100%; user-select: none; cursor: -moz-grab; cursor: -webkit-grabbing } .pickr .pcr-app .pcr-selection .pcr-color-preview { position: relative; z-index: 1; width: 2em; display: flex; flex-direction: column; justify-content: space-between; margin-right: 1em; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2) } .pickr .pcr-app .pcr-selection .pcr-color-preview:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); background-size: .5em; border-radius: .15em; z-index: -1 } .pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color { cursor: pointer; transition: background-color .3s; border-radius: .15em .15em 0 0 } .pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color { border-radius: 0 0 .15em .15em } .pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color,.pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color { background: transparent; width: 100%; height: 50% } .pickr .pcr-app .pcr-selection .pcr-color-chooser,.pickr .pcr-app .pcr-selection .pcr-color-opacity,.pickr .pcr-app .pcr-selection .pcr-color-palette { position: relative; user-select: none } .pickr .pcr-app .pcr-selection .pcr-color-palette { position: relative; flex-grow: 1; z-index: 1 } .pickr .pcr-app .pcr-selection .pcr-color-palette .pcr-palette { height: 100%; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); border-radius: .15em } .pickr .pcr-app .pcr-selection .pcr-color-palette .pcr-palette:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); background-size: .5em; border-radius: .15em; z-index: -1 } .pickr .pcr-app .pcr-selection .pcr-color-chooser,.pickr .pcr-app .pcr-selection .pcr-color-opacity { margin-left: 1em } .pickr .pcr-app .pcr-selection .pcr-color-chooser .pcr-picker,.pickr .pcr-app .pcr-selection .pcr-color-opacity .pcr-picker { margin-left: 50%; transform: translateX(-50%) } .pickr .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider,.pickr .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider { width: 8px; height: 100%; border-radius: 50em } .pickr .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider { background: linear-gradient(180deg,red,#ff0,lime,cyan,blue,#f0f,red) } .pickr .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider { background: linear-gradient(180deg,transparent,#000),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); background-size: 100%,.3em } section { display: flex; justify-content: center; align-items: center; }
<section class="demo"> <div class="center"> <div class="color-picker"></div> </div> </section>