| 提交 | 用户 | age | ||
| 5b18c2 | 1 | /*! |
| X | 2 | * Copyright (c) 2021 Momo Bassit. |
| 3 | * Licensed under the MIT License (MIT) | |
| 4 | * https://github.com/mdbassit/Coloris | |
| 5 | */ | |
| 6 | !function (u, d, s) { | |
| 7 | var f, h, v, i, o, y, c, r, p, g, b, m, a = d.createElement("canvas").getContext("2d"), | |
| 8 | w = {r: 0, g: 0, b: 0, a: 1}, k = { | |
| 9 | el: "[data-coloris]", | |
| 10 | parent: null, | |
| 11 | theme: "light", | |
| 12 | wrap: !0, | |
| 13 | margin: 2, | |
| 14 | format: "hex", | |
| 15 | swatches: [], | |
| 16 | a11y: { | |
| 17 | open: "Open color picker", | |
| 18 | close: "Close color picker", | |
| 19 | marker: "Saturation: {s}. Brightness: {v}.", | |
| 20 | hueSlider: "Hue slider", | |
| 21 | alphaSlider: "Opacity slider", | |
| 22 | input: "Color value field", | |
| 23 | swatch: "Color swatch", | |
| 24 | instruction: "Saturation and brightness selector. Use up, down, left and right arrow keys to select." | |
| 25 | } | |
| 26 | }; | |
| 27 | ||
| 28 | function n(e) { | |
| 29 | if ("object" == typeof e) for (var t in e) switch (t) { | |
| 30 | case"el": | |
| 31 | x(e.el), !1 !== e.wrap && E(e.el); | |
| 32 | break; | |
| 33 | case"parent": | |
| 34 | k.parent = d.querySelector(e.parent), k.parent && k.parent.appendChild(f); | |
| 35 | break; | |
| 36 | case"theme": | |
| 37 | f.setAttribute("class", "clr-picker clr-" + e.theme); | |
| 38 | break; | |
| 39 | case"margin": | |
| 40 | e.margin *= 1, k.margin = (isNaN(e.margin) ? k : e).margin; | |
| 41 | break; | |
| 42 | case"wrap": | |
| 43 | e.el && e.wrap && E(e.el); | |
| 44 | break; | |
| 45 | case"format": | |
| 46 | k.format = e.format; | |
| 47 | break; | |
| 48 | case"swatches": | |
| 49 | Array.isArray(e.swatches) && function () { | |
| 50 | var a = []; | |
| 51 | e.swatches.forEach(function (e, t) { | |
| 52 | a.push('<button id="clr-swatch-' + t + '" aria-labelledby="clr-swatch-label clr-swatch-' + t + '" style="color: ' + e + ';">' + e + "</button>") | |
| 53 | }), a.length && (N("clr-swatches").innerHTML = "<div>" + a.join("") + "</div>") | |
| 54 | }(); | |
| 55 | break; | |
| 56 | case"a11y": | |
| 57 | var a, r, l = e.a11y, n = !1; | |
| 58 | if ("object" == typeof l) for (var i in l) l[i] && k.a11y[i] && (k.a11y[i] = l[i], n = !0); | |
| 59 | n && (a = N("clr-open-label"), r = N("clr-swatch-label"), a.innerHTML = k.a11y.open, r.innerHTML = k.a11y.swatch, o.setAttribute("aria-label", k.a11y.close), c.setAttribute("aria-label", k.a11y.hueSlider), p.setAttribute("aria-label", k.a11y.alphaSlider), y.setAttribute("aria-label", k.a11y.input), h.setAttribute("aria-label", k.a11y.instruction)) | |
| 60 | } | |
| 61 | } | |
| 62 | ||
| 63 | function x(e) { | |
| 64 | D(d, "click", e, function (e) { | |
| 65 | if (this.readOnly != null && this.readOnly) { | |
| 66 | return; | |
| 67 | } | |
| 68 | var t = k.parent, a = e.target.getBoundingClientRect(), r = u.scrollY, l = {left: !1, top: !1}, | |
| 69 | n = {x: 0, y: 0}, i = a.x, o = r + a.y + a.height + k.margin; | |
| 70 | b = e.target, m = b.value, f.classList.add("clr-open"); | |
| 71 | var c, s = f.offsetWidth, p = f.offsetHeight; | |
| 72 | t ? (c = u.getComputedStyle(t), e = parseFloat(c.marginTop), c = parseFloat(c.borderTopWidth), (n = t.getBoundingClientRect()).y += c + r, i -= n.x, o -= n.y, i + s > t.clientWidth && (i += a.width - s, l.left = !0), o + p > t.clientHeight - e && (o -= a.height + p + 2 * k.margin, l.top = !0), o += t.scrollTop) : (i + s > d.documentElement.clientWidth && (i += a.width - s, l.left = !0), o + p - r > d.documentElement.clientHeight && (o = r + a.y - p - k.margin, l.top = !0)), f.style.left = i + "px", f.style.top = o + "px", v = { | |
| 73 | width: h.offsetWidth, | |
| 74 | height: h.offsetHeight, | |
| 75 | x: f.offsetLeft + n.x, | |
| 76 | y: f.offsetTop + n.y | |
| 77 | }, f.classList.toggle("clr-left", l.left), f.classList.toggle("clr-top", l.top), S(b.value), y.focus({preventScroll: !0}) | |
| 78 | }), D(d, "input", e, function (e) { | |
| 79 | var t = e.target.parentNode; | |
| 80 | t.classList.contains("clr-field") && (t.style.color = e.target.value) | |
| 81 | }) | |
| 82 | } | |
| 83 | ||
| 84 | function E(e) { | |
| 85 | d.querySelectorAll(e).forEach(function (e) { | |
| 86 | var t, a = e.parentNode; | |
| 87 | a.classList.contains("clr-field") || ((t = d.createElement("div")).innerHTML = '<button aria-labelledby="clr-open-label"></button>', a.insertBefore(t, e), t.setAttribute("class", "clr-field"), t.style.color = e.value, t.appendChild(e)) | |
| 88 | }) | |
| 89 | } | |
| 90 | ||
| 91 | function L(e) { | |
| 92 | b && (e && m !== b.value && b.dispatchEvent(new Event("change", {bubbles: !0})), f.classList.remove("clr-open"), b.focus({preventScroll: !0}), b = null) | |
| 93 | } | |
| 94 | ||
| 95 | function S(e) { | |
| 96 | var t = function (e) { | |
| 97 | a.fillStyle = "#000", a.fillStyle = e, e = (e = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(a.fillStyle)) ? { | |
| 98 | r: +e[3], | |
| 99 | g: +e[4], | |
| 100 | b: +e[5], | |
| 101 | a: +e[6] | |
| 102 | } : (e = a.fillStyle.replace("#", "").match(/.{2}/g).map(function (e) { | |
| 103 | return parseInt(e, 16) | |
| 104 | }), {r: e[0], g: e[1], b: e[2], a: 1}); | |
| 105 | return e | |
| 106 | }(e), e = function (e) { | |
| 107 | var t = e.r / 255, a = e.g / 255, r = e.b / 255, l = s.max(t, a, r), n = s.min(t, a, r), i = l - n, o = l, | |
| 108 | c = 0, n = 0; | |
| 109 | i && (l === t && (c = (a - r) / i), l === a && (c = 2 + (r - t) / i), l === r && (c = 4 + (t - a) / i), l && (n = i / l)); | |
| 110 | return {h: (c = s.floor(60 * c)) < 0 ? c + 360 : c, s: s.round(100 * n), v: s.round(100 * o), a: e.a} | |
| 111 | }(t); | |
| 112 | T(e.s, e.v), C(t), c.value = e.h, f.style.color = "hsl(" + e.h + ", 100%, 50%)", r.style.left = e.h / 360 * 100 + "%", i.style.left = v.width * e.s / 100 + "px", i.style.top = 100 - v.height * e.v / 100 + "px", p.value = 100 * e.a, g.style.left = 100 * e.a + "%" | |
| 113 | } | |
| 114 | ||
| 115 | function l() { | |
| 116 | b && (b.value = y.value, b.dispatchEvent(new Event("input", {bubbles: !0}))) | |
| 117 | } | |
| 118 | ||
| 119 | function A(e, t) { | |
| 120 | e = {h: +c.value, s: e / v.width * 100, v: 100 - t / v.height * 100, a: p.value / 100}, t = function (e) { | |
| 121 | var t = e.s / 100, a = e.v / 100, r = t * a, l = e.h / 60, n = r * (1 - s.abs(l % 2 - 1)), i = a - r; | |
| 122 | r += i, n += i; | |
| 123 | t = s.floor(l) % 6, a = [r, n, i, i, n, r][t], l = [n, r, r, n, i, i][t], t = [i, i, n, r, r, n][t]; | |
| 124 | return {r: s.round(255 * a), g: s.round(255 * l), b: s.round(255 * t), a: e.a} | |
| 125 | }(e); | |
| 126 | T(e.s, e.v), C(t), l() | |
| 127 | } | |
| 128 | ||
| 129 | function T(e, t) { | |
| 130 | var a = k.a11y.marker; | |
| 131 | e = +e.toFixed(1), t = +t.toFixed(1), a = (a = a.replace("{s}", e)).replace("{v}", t), i.setAttribute("aria-label", a) | |
| 132 | } | |
| 133 | ||
| 134 | function t(e) { | |
| 135 | var t = { | |
| 136 | pageX: ((a = e).changedTouches ? a.changedTouches[0] : a).pageX, | |
| 137 | pageY: (a.changedTouches ? a.changedTouches[0] : a).pageY | |
| 138 | }, a = t.pageX - v.x, t = t.pageY - v.y; | |
| 139 | k.parent && (t += k.parent.scrollTop), a = a < 0 ? 0 : a > v.width ? v.width : a, t = t < 0 ? 0 : t > v.height ? v.height : t, i.style.left = a + "px", i.style.top = t + "px", A(a, t), e.preventDefault(), e.stopPropagation() | |
| 140 | } | |
| 141 | ||
| 142 | function C(e) { | |
| 143 | for (var t in e) w[t] = e[t]; | |
| 144 | var a, r = function (e) { | |
| 145 | var t = e.r.toString(16), a = e.g.toString(16), r = e.b.toString(16), l = ""; | |
| 146 | e.r < 16 && (t = "0" + t); | |
| 147 | e.g < 16 && (a = "0" + a); | |
| 148 | e.b < 16 && (r = "0" + r); | |
| 149 | e.a < 1 && (e = 255 * e.a | 0, l = e.toString(16), e < 16 && (l = "0" + l)); | |
| 150 | return "#" + t + a + r + l | |
| 151 | }(w), l = r.substring(0, 7), | |
| 152 | n = 1 === (a = w).a ? "rgb(" + a.r + "," + a.g + "," + a.b + ")" : "rgba(" + a.r + "," + a.g + "," + a.b + "," + a.a + ")"; | |
| 153 | switch (i.style.color = l, g.parentNode.style.color = l, g.style.color = r, o.style.color = r, y.value = r, h.style.display = "none", h.offsetHeight, h.style.display = "", g.nextElementSibling.style.display = "none", g.nextElementSibling.offsetHeight, g.nextElementSibling.style.display = "", k.format) { | |
| 154 | case"mixed": | |
| 155 | if (1 === w.a) break; | |
| 156 | case"rgb": | |
| 157 | y.value = n | |
| 158 | } | |
| 159 | } | |
| 160 | ||
| 161 | function e() { | |
| 162 | var e = +c.value, t = +i.style.left.replace("px", ""), a = +i.style.top.replace("px", ""); | |
| 163 | f.style.color = "hsl(" + e + ", 100%, 50%)", r.style.left = e / 360 * 100 + "%", A(t, a) | |
| 164 | } | |
| 165 | ||
| 166 | function H() { | |
| 167 | var e = p.value / 100; | |
| 168 | g.style.left = 100 * e + "%", C({a: e}), l() | |
| 169 | } | |
| 170 | ||
| 171 | function N(e) { | |
| 172 | return d.getElementById(e) | |
| 173 | } | |
| 174 | ||
| 175 | function D(e, t, a, r) { | |
| 176 | var l = Element.prototype.matches || Element.prototype.msMatchesSelector; | |
| 177 | "string" == typeof a ? e.addEventListener(t, function (e) { | |
| 178 | l.call(e.target, a) && r.call(e.target, e) | |
| 179 | }) : (r = a, e.addEventListener(t, r)) | |
| 180 | } | |
| 181 | ||
| 182 | function M(e, t) { | |
| 183 | t = void 0 !== t ? t : [], "loading" !== d.readyState ? e.apply(void 0, t) : d.addEventListener("DOMContentLoaded", function () { | |
| 184 | e.apply(void 0, t) | |
| 185 | }) | |
| 186 | } | |
| 187 | ||
| 188 | void 0 !== NodeList && NodeList.prototype && !NodeList.prototype.forEach && (NodeList.prototype.forEach = Array.prototype.forEach), u.Coloris = function () { | |
| 189 | var l = {set: n, wrap: E, close: L}; | |
| 190 | ||
| 191 | function e(e) { | |
| 192 | M(function () { | |
| 193 | e && ("string" == typeof e ? x : n)(e) | |
| 194 | }) | |
| 195 | } | |
| 196 | ||
| 197 | for (var t in l) !function (r) { | |
| 198 | e[r] = function () { | |
| 199 | for (var e = arguments.length, t = new Array(e), a = 0; a < e; a++) t[a] = arguments[a]; | |
| 200 | M(l[r], t) | |
| 201 | } | |
| 202 | }(t); | |
| 203 | return e | |
| 204 | }(), M(function () { | |
| 205 | (f = d.createElement("div")).setAttribute("id", "clr-picker"), f.setAttribute("class", "clr-picker clr-" + k.theme), f.innerHTML = '<input id="clr-color-value" class="clr-color" type="text" value="" aria-label="' + k.a11y.input + '"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="' + k.a11y.instruction + '"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="' + k.a11y.hueSlider + '"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="' + k.a11y.alphaSlider + '"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-swatches" class="clr-swatches"></div><button id="clr-color-preview" class="clr-preview" aria-label="' + k.a11y.close + '"></button><span id="clr-open-label" hidden>' + k.a11y.open + '</span><span id="clr-swatch-label" hidden>' + k.a11y.swatch + "</span>", d.body.appendChild(f), h = N("clr-color-area"), i = N("clr-color-marker"), o = N("clr-color-preview"), y = N("clr-color-value"), c = N("clr-hue-slider"), r = N("clr-hue-marker"), p = N("clr-alpha-slider"), g = N("clr-alpha-marker"), x(k.el), E(k.el), D(f, "mousedown", function (e) { | |
| 206 | f.classList.remove("clr-keyboard-nav"), e.stopPropagation() | |
| 207 | }), D(h, "mousedown", function (e) { | |
| 208 | D(d, "mousemove", t) | |
| 209 | }), D(h, "touchstart", function (e) { | |
| 210 | d.addEventListener("touchmove", t, {passive: !1}) | |
| 211 | }), D(i, "mousedown", function (e) { | |
| 212 | D(d, "mousemove", t) | |
| 213 | }), D(i, "touchstart", function (e) { | |
| 214 | d.addEventListener("touchmove", t, {passive: !1}) | |
| 215 | }), D(y, "change", function (e) { | |
| 216 | S(y.value), l() | |
| 217 | }), D(o, "click", function (e) { | |
| 218 | L(!0) | |
| 219 | }), D(f, "click", ".clr-swatches button", function (e) { | |
| 220 | S(e.target.style.color), l() | |
| 221 | }), D(d, "mouseup", function (e) { | |
| 222 | d.removeEventListener("mousemove", t) | |
| 223 | }), D(d, "touchend", function (e) { | |
| 224 | d.removeEventListener("touchmove", t) | |
| 225 | }), D(d, "mousedown", function (e) { | |
| 226 | f.classList.remove("clr-keyboard-nav"), L(!0) | |
| 227 | }), D(d, "keydown", function (e) { | |
| 228 | "Escape" === e.key ? L(!0) : "Tab" === e.key && f.classList.add("clr-keyboard-nav") | |
| 229 | }), D(d, "click", ".clr-field button", function (e) { | |
| 230 | e.target.nextElementSibling.dispatchEvent(new Event("click", {bubbles: !0})) | |
| 231 | }), D(i, "keydown", function (e) { | |
| 232 | var t = {ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0]}; | |
| 233 | -1 !== Object.keys(t).indexOf(e.key) && (!function (e, t) { | |
| 234 | e = +i.style.left.replace("px", "") + e, t = +i.style.top.replace("px", "") + t, i.style.left = e + "px", i.style.top = t + "px", A(e, t) | |
| 235 | }.apply(void 0, t[e.key]), e.preventDefault()) | |
| 236 | }), D(h, "click", t), D(c, "input", e), D(p, "input", H) | |
| 237 | }) | |
| 238 | }(window, document, Math); | |
