@simonwep/pickr
Advanced tools
Comparing version 0.4.9 to 0.4.10
@@ -1,3 +0,3 @@ | ||
| /*! Pickr 0.4.9 MIT | 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 n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);var r={};n.r(r),n.d(r,"once",function(){return a}),n.d(r,"on",function(){return c}),n.d(r,"off",function(){return s}),n.d(r,"createElementFromString",function(){return l}),n.d(r,"removeAttribute",function(){return p}),n.d(r,"createFromTemplate",function(){return h}),n.d(r,"eventPath",function(){return d}),n.d(r,"adjustableInputNumbers",function(){return f}),n.d(r,"padStart",function(){return v});var o={};n.r(o),n.d(o,"hsvToRgb",function(){return k}),n.d(o,"hsvToHex",function(){return A}),n.d(o,"hsvToCmyk",function(){return C}),n.d(o,"hsvToHsl",function(){return S}),n.d(o,"parseToHSV",function(){return H});n(0);function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a=function(t,e,n,r){return c(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},r)},c=u.bind(null,"addEventListener"),s=u.bind(null,"removeEventListener");function u(t,e,n,r){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(function(e){return n.forEach(function(n){return e[t](n,r,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),r.forEach(function(e){i(t,e,n[e])})}return t}({capture:!1},o))})}),Array.prototype.slice.call(arguments,1)}function l(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function p(t,e){var n=t.getAttribute(e);return t.removeAttribute(e),n}function h(t){return function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=p(e,"data-con"),o=p(e,"data-key");o&&(n[o]=e);for(var i=Array.from(e.children),a=r?n[r]={}:n,c=0,s=i;c<s.length;c++){var u=s[c],l=p(u,"data-arr");l?(a[l]||(a[l]=[])).push(u):t(u,a)}return n}(l(t))}function d(t){var e=t.path||t.composedPath&&t.composedPath();if(e)return e;var n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function f(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=function(t){return t>="0"&&t<="9"||"-"===t||"."===t};function r(r){for(var o=t.value,i=t.selectionStart,a=i,c="",s=i-1;s>0&&n(o[s]);s--)c=o[s]+c,a--;for(var u=i,l=o.length;u<l&&n(o[u]);u++)c+=o[u];if(c.length>0&&!isNaN(c)&&isFinite(c)){var p=r.deltaY<0?1:-1,h=r.ctrlKey?5*p:p,d=Number(c)+h;!e&&d<0&&(d=0);var f=o.substr(0,a)+d+o.substring(a+c.length,o.length),v=a+String(d).length;t.value=f,t.focus(),t.setSelectionRange(v,v)}r.preventDefault(),t.dispatchEvent(new Event("input"))}c(t,"focus",function(){return c(window,"wheel",r,{passive:!1})}),c(t,"blur",function(){return s(window,"wheel",r)})}function v(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:" ";return(e-=t.length)<=0||!n.length?String(t):(e>n.length&&(n+=n.repeat(e/n.length)),n.slice(0,e)+String(t))}function y(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],r=!0,o=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(r=(a=c.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(t){o=!0,i=t}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function m(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=Math.min,b=Math.max,_=Math.floor,w=Math.round;function k(t,e,n){e/=100,n/=100;var r=_(t=t/360*6),o=t-r,i=n*(1-e),a=n*(1-o*e),c=n*(1-(1-o)*e),s=r%6;return[255*[n,a,i,i,c,n][s],255*[c,n,n,a,i,i][s],255*[i,i,c,n,n,a][s]]}function A(t,e,n){return k(t,e,n).map(function(t){return v(w(t).toString(16),2,"0")})}function C(t,e,n){var r,o=k(t,e,n),i=o[0]/255,a=o[1]/255,c=o[2]/255;return[100*(1===(r=g(1-i,1-a,1-c))?0:(1-i-r)/(1-r)),100*(1===r?0:(1-a-r)/(1-r)),100*(1===r?0:(1-c-r)/(1-r)),100*r]}function S(t,e,n){var r=(2-(e/=100))*(n/=100)/2;return 0!==r&&(e=1===r?0:r<.5?e*n/(2*r):e*n/(2-2*r)),[t,100*e,100*r]}function O(t,e,n){var r,o,i=g(t/=255,e/=255,n/=255),a=b(t,e,n),c=a-i;if(0===c)r=o=0;else{o=c/a;var s=((a-t)/6+c/2)/c,u=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?r=l-u:e===a?r=1/3+s-l:n===a&&(r=2/3+u-s),r<0?r+=1:r>1&&(r-=1)}return[360*r,100*o,100*a]}function j(t,e,n,r){return e/=100,n/=100,m(O(255*(1-g(1,(t/=100)*(1-(r/=100))+r)),255*(1-g(1,e*(1-r)+r)),255*(1-g(1,n*(1-r)+r))))}function E(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function x(t){return O.apply(void 0,m(t.match(/.{2}/g).map(function(t){return parseInt(t,16)})))}function H(t){var e,n;t=t.match(/^[a-zA-Z]+$/)?(e=t,(n=document.createElement("canvas").getContext("2d")).fillStyle=e,n.fillStyle):t;var r,o={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},i=function(t){return t.map(function(t){return/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0})};for(var a in o)if(r=o[a].exec(t))switch(a){case"cmyk":var c=y(i(r),5),s=c[1],u=c[2],l=c[3],p=c[4];if(s>100||u>100||l>100||p>100)break;return{values:[].concat(m(j(s,u,l,p)),[1]),type:a};case"rgba":var h=y(i(r),6),d=h[2],f=h[3],v=h[4],g=h[5],b=void 0===g?1:g;if(d>255||f>255||v>255||b<0||b>1)break;return{values:[].concat(m(O(d,f,v)),[b]),type:a};case"hex":var _=function(t,e){return[t.substring(0,e),t.substring(e,t.length)]},w=y(r,2)[1];3===w.length?w+="F":6===w.length&&(w+="FF");var k=void 0;if(4===w.length){var A=y(_(w,3).map(function(t){return t+t}),2);w=A[0],k=A[1]}else if(8===w.length){var C=y(_(w,6),2);w=C[0],k=C[1]}return k=parseInt(k,16)/255,{values:[].concat(m(x(w)),[k]),type:a};case"hsla":var S=y(i(r),6),H=S[2],B=S[3],L=S[4],P=S[5],D=void 0===P?1:P;if(H>360||B>100||L>100||D<0||D>1)break;return{values:[].concat(m(E(H,B,L)),[D]),type:a};case"hsva":var R=y(i(r),6),T=R[2],F=R[3],M=R[4],N=R[5],V=void 0===N?1:N;if(T>360||F>100||M>100||V<0||V>1)break;return{values:[T,F,M,V],type:a}}return{values:null,type:null}}function B(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=Math.ceil,a={h:t,s:e,v:n,a:r,toHSVA:function(){var t=[a.h,a.s,a.v],e=t.map(i);return t.push(a.a),t.toString=function(){return"hsva(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toHSLA:function(){var t=S(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"hsla(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toRGBA:function(){var t=k(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"rgba(".concat(e[0],", ").concat(e[1],", ").concat(e[2],", ").concat(a.a.toFixed(1),")")},t},toCMYK:function(){var t=C(a.h,a.s,a.v),e=t.map(i);return t.toString=function(){return"cmyk(".concat(e[0],"%, ").concat(e[1],"%, ").concat(e[2],"%, ").concat(e[3],"%)")},t},toHEX:function(){var t=A.apply(o,[a.h,a.s,a.v]);return t.toString=function(){var e=a.a>=1?"":v(Number((255*a.a).toFixed(0)).toString(16).toUpperCase(),2,"0");return"#".concat(t.join("").toUpperCase()+e)},t},clone:function(){return B(a.h,a.s,a.v,a.a)}};return a}function L(t){var e={options:Object.assign({lockX:!1,lockY:!1,onchange:function(){return 0}},t),_tapstart:function(t){c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove:function(t){var n=e.options,r=e.cache,o=n.element,i=e.options.wrapper.getBoundingClientRect(),a=0,c=0;if(t){var s=t&&t.touches&&t.touches[0];a=t?(s||t).clientX:0,c=t?(s||t).clientY:0,a<i.left?a=i.left:a>i.left+i.width&&(a=i.left+i.width),c<i.top?c=i.top:c>i.top+i.height&&(c=i.top+i.height),a-=i.left,c-=i.top}else r&&(a=r.x*i.width,c=r.y*i.height);n.lockX||(o.style.left="calc(".concat(a/i.width*100,"% - ").concat(o.offsetWidth/2,"px)")),n.lockY||(o.style.top="calc(".concat(c/i.height*100,"% - ").concat(o.offsetWidth/2,"px)")),e.cache={x:a/i.width,y:c/i.height},n.onchange(a,c)},_tapstop:function(){s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove)},trigger:function(){e._tapmove()},update:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=e.options.wrapper.getBoundingClientRect();e._tapmove({clientX:r.left+t,clientY:r.top+n})},destroy:function(){var t=e.options,n=e._tapstart;s([t.wrapper,t.element],"mousedown",n),s([t.wrapper,t.element],"touchstart",n,{passive:!1})}},n=e.options,r=e._tapstart;return c([n.wrapper,n.element],"mousedown",r),c([n.wrapper,n.element],"touchstart",r,{passive:!1}),e}function P(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function D(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t=Object.assign({onchange:function(){return 0},className:"",elements:[]},t);var e=c(t.elements,"click",function(e){t.elements.forEach(function(n){return n.classList[e.target===n?"add":"remove"](t.className)}),t.onchange(e)});return{destroy:function(){return s.apply(r,P(e))}}}function R(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function T(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function F(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var M=function(){function t(e){var n,r,o=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),F(this,"_initializingActive",!0),F(this,"_recalc",!0),F(this,"_color",B()),F(this,"_lastColor",B()),F(this,"_swatchColors",[]),F(this,"_eventListener",{swatchselect:[],change:[],save:[],init:[]}),F(this,"_rePositioningPicker",function(){if(!o.options.inline){var t=o._root,e=t.app,i=t.button,a=window,c=a.innerWidth,s=a.innerHeight,u=i.getBoundingClientRect(),l=e.getBoundingClientRect();r=s-(u.bottom+l.height+8)<0?u.top-l.height-8:u.bottom+8;var p={left:u.left+u.width-l.width,middle:-l.width/2+(u.left+u.width/2),right:u.left},h=p[o.options.position];n=n+h>c?p.left:h<0?p.right:h,Object.assign(e.style,{left:"".concat(n,"px"),top:"".concat(r,"px")})}}),this.options=e=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,inline:!1,default:"fff",defaultRepresentation:"HEX",position:"middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},e);var i=e,a=i.swatches,c=i.inline,s=i.components;s.interaction||(s.interaction={}),c&&(e.showAlways=!0),this._preBuild(),this._buildComponents(),this._bindEvents(),this._representation=e.defaultRepresentation,this.setColorRepresentation(this._representation),this._finalBuild(),a&&a.length&&a.forEach(function(t){return o.addSwatch(t)});var u=this._root.button;requestAnimationFrame(function t(){if(null===u.offsetParent&&u!==document.body)return requestAnimationFrame(t.bind(this));this.setColor(e.default),e.showAlways&&this.show(),this._initializingActive=!1,this._emit("init")}.bind(this))}var e,n,o;return e=t,(n=[{key:"_preBuild",value:function(){var t,e,n,r,o,i,a,c,s=this.options;"string"==typeof s.el&&(s.el=document.querySelector(s.el)),this._root=(e=(t=s).components,n=t.strings,r=t.useAsButton,o=t.inline,i=function(t){return t?"":'style="display:none" hidden'},a=h('\n <div data-key="root" class="pickr">\n \n '.concat(r?"":'<button type="button" data-key="button" class="pcr-button"></button>','\n\n <div data-key="app" class="pcr-app" ').concat(o?'style="position: unset"':"",'>\n <div class="pcr-selection">\n <div data-con="preview" class="pcr-color-preview" ').concat(i(e.preview),'>\n <button type="button" data-key="lastColor" class="pcr-last-color"></button>\n <div data-key="currentColor" class="pcr-current-color"></div>\n </div>\n\n <div data-con="palette" class="pcr-color-palette">\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="palette" class="pcr-palette"></div>\n </div>\n\n <div data-con="hue" class="pcr-color-chooser" ').concat(i(e.hue),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-hue pcr-slider"></div>\n </div>\n\n <div data-con="opacity" class="pcr-color-opacity" ').concat(i(e.opacity),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n </div>\n </div>\n\n <div class="swatches" data-key="swatches"></div> \n\n <div data-con="interaction" class="pcr-interaction" ').concat(i(Object.keys(e.interaction).length),'>\n <input data-key="result" class="pcr-result" type="text" spellcheck="false" ').concat(i(e.interaction.input),'>\n\n <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ').concat(i(e.interaction.hex),'>\n <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ').concat(i(e.interaction.rgba),'>\n <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ').concat(i(e.interaction.hsla),'>\n <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ').concat(i(e.interaction.hsva),'>\n <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(i(e.interaction.cmyk),'>\n\n <input data-key="save" class="pcr-save" value="').concat(n.save||"Save",'" type="button" ').concat(i(e.interaction.save),'>\n <input data-key="clear" class="pcr-clear" value="').concat(n.clear||"Clear",'" type="button" ').concat(i(e.interaction.clear),">\n </div>\n </div>\n </div>\n ")),(c=a.interaction).options.find(function(t){return!t.hidden&&!t.classList.add("active")}),c.type=function(){return c.options.find(function(t){return t.classList.contains("active")})},a),s.useAsButton&&(this._root.button=s.el),document.body.appendChild(this._root.root)}},{key:"_finalBuild",value:function(){var t=this.options,e=this._root;if(document.body.removeChild(e.root),t.inline){var n=t.el.parentElement;n.lastChild===t.el?n.appendChild(e.app):n.insertBefore(e.app,t.el.nextSibling)}else document.body.appendChild(e.app);t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}},{key:"_buildComponents",value:function(){var t=this,e=this.options.components,n={palette:L({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange:function(e,n){var r=t._color,o=t._root,i=t.options;r.s=e/this.wrapper.offsetWidth*100,r.v=100-n/this.wrapper.offsetHeight*100,r.v<0&&(r.v=0);var a=r.toRGBA().toString();this.element.style.background=a,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(r.a,"), transparent), \n linear-gradient(to left, hsla(").concat(r.h,", 100%, 50%, ").concat(r.a,"), rgba(255, 255, 255, ").concat(r.a,"))\n "),i.comparison||(o.button.style.color=a,i.useAsButton||(o.preview.lastColor.style.color=a)),o.preview.currentColor.style.color=a,t._recalc&&t._updateOutput(),o.button.classList.remove("clear")}}),hue:L({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange:function(r,o){e.hue&&(t._color.h=o/this.wrapper.offsetHeight*360,this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),n.palette.trigger())}}),opacity:L({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange:function(n,r){e.opacity&&(t._color.a=Math.round(r/this.wrapper.offsetHeight*100)/100,this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),t.components.palette.trigger())}}),selectable:D({elements:t._root.interaction.options,className:"active",onchange:function(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}},{key:"_bindEvents",value:function(){var t,e=this,n=this._root,r=this.options,o=[c(n.interaction.clear,"click",function(){return e._clearColor()}),c(n.preview.lastColor,"click",function(){return e.setHSVA.apply(e,R(e._lastColor.toHSVA()))}),c(n.interaction.save,"click",function(){!e.applyColor()&&!r.showAlways&&e.hide()}),c(n.interaction.result,["keyup","input"],function(t){e._recalc=!1,e.setColor(t.target.value,!0)&&!e._initializingActive&&e._emit("change",e._color),t.stopImmediatePropagation()}),c([n.palette.palette,n.palette.picker,n.hue.slider,n.hue.picker,n.opacity.slider,n.opacity.picker],["mousedown","touchstart"],function(){return e._recalc=!0})];if(!r.showAlways){var i=r.closeWithKey;o.push(c(n.button,"click",function(){return e.isOpen()?e.hide():e.show()}),c(document,"keyup",function(t){return e.isOpen()&&(t.key===i||t.code===i)&&e.hide()}),c(document,["touchstart","mousedown"],function(t){e.isOpen()&&!d(t).some(function(t){return t===n.app||t===n.button})&&e.hide()},{capture:!0}))}(r.adjustableNumbers&&f(n.interaction.result,!1),r.inline)||o.push(c(window,["scroll","wheel","resize"],function(){e.isOpen()&&(e.hide(),t&&clearTimeout(t),t=setTimeout(function(){return e.show()},250))}));this._eventBindings=o}},{key:"_updateOutput",value:function(){if(this._root.interaction.type()){var t="to".concat(this._root.interaction.type().getAttribute("data-type"));this._root.interaction.result.value="function"==typeof this._color[t]?this._color[t]().toString():""}this._initializingActive||this._emit("change",this._color)}},{key:"_clearColor",value:function(){var t=this._root,e=this.options;e.useAsButton||(t.button.style.color="rgba(0, 0, 0, 0.15)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._initializingActive||this._emit("save",null)}},{key:"_emit",value:function(t){for(var e=this,n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];this._eventListener[t].forEach(function(t){return t.apply(void 0,r.concat([e]))})}},{key:"on",value:function(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}},{key:"off",value:function(t,e){var n=this._eventListener[t];if(n){var r=n.indexOf(e);~r&&n.splice(r,1)}return this}},{key:"addSwatch",value:function(t){var e=this,n=H(t).values;if(n){var r=this._swatchColors,o=this._root,i=B.apply(void 0,R(n)),a=l('<button type="button" style="color: '.concat(i.toRGBA(),'"></button>'));return o.swatches.appendChild(a),r.push({element:a,hsvaColorObject:i}),this._eventBindings.push(c(a,"click",function(){e.setHSVA.apply(e,R(i.toHSVA()).concat([!0])),e._emit("swatchselect",i)})),!0}return!1}},{key:"removeSwatch",value:function(t){if("number"==typeof t){var e=this._swatchColors[t];if(e){var n=e.element;return this._root.swatches.removeChild(n),this._swatchColors.splice(t,1),!0}}return!1}},{key:"applyColor",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this._root,n=e.preview,r=e.button,o=this._color.toRGBA().toString();n.lastColor.style.color=o,this.options.useAsButton||(r.style.color=o),r.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}},{key:"destroy",value:function(){var t=this;this._eventBindings.forEach(function(t){return s.apply(r,R(t))}),Object.keys(this.components).forEach(function(e){return t.components[e].destroy()})}},{key:"destroyAndRemove",value:function(){this.destroy();var t=this._root.root;t.parentElement.removeChild(t)}},{key:"hide",value:function(){return this._root.app.classList.remove("visible"),this}},{key:"show",value:function(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}},{key:"isOpen",value:function(){return this._root.app.classList.contains("visible")}},{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,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,o=arguments.length>4&&void 0!==arguments[4]&&arguments[4],i=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||r<0||r>1)return!1;var a=this.components,c=a.hue,s=a.opacity,u=a.palette,l=c.options.wrapper.offsetHeight*(t/360);c.update(0,l);var p=s.options.wrapper.offsetHeight*r;s.update(0,p);var h=u.options.wrapper,d=h.offsetWidth*(e/100),f=h.offsetHeight*(1-n/100);return u.update(d,f),this._color=B(t,e,n,r),this._recalc=i,this._recalc&&this._updateOutput(),o||this.applyColor(),!0}},{key:"setColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;var n=H(t),r=n.values,o=n.type;if(r){var i=o.toUpperCase(),a=this._root.interaction.options,c=a.find(function(t){return t.getAttribute("data-type")===i});if(!c.hidden){var s=!0,u=!1,l=void 0;try{for(var p,h=a[Symbol.iterator]();!(s=(p=h.next()).done);s=!0){var d=p.value;d.classList[d===c?"add":"remove"]("active")}}catch(t){u=!0,l=t}finally{try{s||null==h.return||h.return()}finally{if(u)throw l}}}return this.setHSVA.apply(this,R(r).concat([e]))}}},{key:"setColorRepresentation",value:function(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(function(e){return e.getAttribute("data-type")===t&&!e.click()})}},{key:"getColorRepresentation",value:function(){return this._representation}},{key:"getColor",value:function(){return this._color}},{key:"getRoot",value:function(){return this._root}},{key:"disable",value:function(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}},{key:"enable",value:function(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}])&&T(e.prototype,n),o&&T(e,o),t}();M.utils={once:a,on:c,off:s,eventPath:d,createElementFromString:l,adjustableInputNumbers:f,removeAttribute:p,createFromTemplate:h},M.create=function(t){return new M(t)},M.version="0.4.9";e.default=M}]).default}); | ||
| /*! Pickr 0.4.10 MIT | 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 n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);var r={};n.r(r),n.d(r,"once",function(){return a}),n.d(r,"on",function(){return c}),n.d(r,"off",function(){return s}),n.d(r,"createElementFromString",function(){return l}),n.d(r,"removeAttribute",function(){return p}),n.d(r,"createFromTemplate",function(){return h}),n.d(r,"eventPath",function(){return d}),n.d(r,"adjustableInputNumbers",function(){return f}),n.d(r,"padStart",function(){return v});var o={};n.r(o),n.d(o,"hsvToRgb",function(){return k}),n.d(o,"hsvToHex",function(){return A}),n.d(o,"hsvToCmyk",function(){return C}),n.d(o,"hsvToHsl",function(){return S}),n.d(o,"parseToHSV",function(){return H});n(0);function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a=function(t,e,n,r){return c(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},r)},c=u.bind(null,"addEventListener"),s=u.bind(null,"removeEventListener");function u(t,e,n,r){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(function(e){return n.forEach(function(n){return e[t](n,r,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),r.forEach(function(e){i(t,e,n[e])})}return t}({capture:!1},o))})}),Array.prototype.slice.call(arguments,1)}function l(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function p(t,e){var n=t.getAttribute(e);return t.removeAttribute(e),n}function h(t){return function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=p(e,"data-con"),o=p(e,"data-key");o&&(n[o]=e);for(var i=Array.from(e.children),a=r?n[r]={}:n,c=0,s=i;c<s.length;c++){var u=s[c],l=p(u,"data-arr");l?(a[l]||(a[l]=[])).push(u):t(u,a)}return n}(l(t))}function d(t){var e=t.path||t.composedPath&&t.composedPath();if(e)return e;var n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function f(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=function(t){return t>="0"&&t<="9"||"-"===t||"."===t};function r(r){for(var o=t.value,i=t.selectionStart,a=i,c="",s=i-1;s>0&&n(o[s]);s--)c=o[s]+c,a--;for(var u=i,l=o.length;u<l&&n(o[u]);u++)c+=o[u];if(c.length>0&&!isNaN(c)&&isFinite(c)){var p=r.deltaY<0?1:-1,h=r.ctrlKey?5*p:p,d=Number(c)+h;!e&&d<0&&(d=0);var f=o.substr(0,a)+d+o.substring(a+c.length,o.length),v=a+String(d).length;t.value=f,t.focus(),t.setSelectionRange(v,v)}r.preventDefault(),t.dispatchEvent(new Event("input"))}c(t,"focus",function(){return c(window,"wheel",r,{passive:!1})}),c(t,"blur",function(){return s(window,"wheel",r)})}function v(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:" ";return(e-=t.length)<=0||!n.length?String(t):(e>n.length&&(n+=n.repeat(e/n.length)),n.slice(0,e)+String(t))}function y(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],r=!0,o=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(r=(a=c.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(t){o=!0,i=t}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function m(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=Math.min,b=Math.max,_=Math.floor,w=Math.round;function k(t,e,n){e/=100,n/=100;var r=_(t=t/360*6),o=t-r,i=n*(1-e),a=n*(1-o*e),c=n*(1-(1-o)*e),s=r%6;return[255*[n,a,i,i,c,n][s],255*[c,n,n,a,i,i][s],255*[i,i,c,n,n,a][s]]}function A(t,e,n){return k(t,e,n).map(function(t){return v(w(t).toString(16),2,"0")})}function C(t,e,n){var r,o=k(t,e,n),i=o[0]/255,a=o[1]/255,c=o[2]/255;return[100*(1===(r=g(1-i,1-a,1-c))?0:(1-i-r)/(1-r)),100*(1===r?0:(1-a-r)/(1-r)),100*(1===r?0:(1-c-r)/(1-r)),100*r]}function S(t,e,n){var r=(2-(e/=100))*(n/=100)/2;return 0!==r&&(e=1===r?0:r<.5?e*n/(2*r):e*n/(2-2*r)),[t,100*e,100*r]}function O(t,e,n){var r,o,i=g(t/=255,e/=255,n/=255),a=b(t,e,n),c=a-i;if(0===c)r=o=0;else{o=c/a;var s=((a-t)/6+c/2)/c,u=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?r=l-u:e===a?r=1/3+s-l:n===a&&(r=2/3+u-s),r<0?r+=1:r>1&&(r-=1)}return[360*r,100*o,100*a]}function j(t,e,n,r){return e/=100,n/=100,m(O(255*(1-g(1,(t/=100)*(1-(r/=100))+r)),255*(1-g(1,e*(1-r)+r)),255*(1-g(1,n*(1-r)+r))))}function E(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function x(t){return O.apply(void 0,m(t.match(/.{2}/g).map(function(t){return parseInt(t,16)})))}function H(t){var e,n;t=t.match(/^[a-zA-Z]+$/)?(e=t,(n=document.createElement("canvas").getContext("2d")).fillStyle=e,n.fillStyle):t;var r,o={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},i=function(t){return t.map(function(t){return/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0})};for(var a in o)if(r=o[a].exec(t))switch(a){case"cmyk":var c=y(i(r),5),s=c[1],u=c[2],l=c[3],p=c[4];if(s>100||u>100||l>100||p>100)break;return{values:[].concat(m(j(s,u,l,p)),[1]),type:a};case"rgba":var h=y(i(r),6),d=h[2],f=h[3],v=h[4],g=h[5],b=void 0===g?1:g;if(d>255||f>255||v>255||b<0||b>1)break;return{values:[].concat(m(O(d,f,v)),[b]),type:a};case"hex":var _=function(t,e){return[t.substring(0,e),t.substring(e,t.length)]},w=y(r,2)[1];3===w.length?w+="F":6===w.length&&(w+="FF");var k=void 0;if(4===w.length){var A=y(_(w,3).map(function(t){return t+t}),2);w=A[0],k=A[1]}else if(8===w.length){var C=y(_(w,6),2);w=C[0],k=C[1]}return k=parseInt(k,16)/255,{values:[].concat(m(x(w)),[k]),type:a};case"hsla":var S=y(i(r),6),H=S[2],B=S[3],L=S[4],P=S[5],R=void 0===P?1:P;if(H>360||B>100||L>100||R<0||R>1)break;return{values:[].concat(m(E(H,B,L)),[R]),type:a};case"hsva":var D=y(i(r),6),T=D[2],F=D[3],M=D[4],N=D[5],V=void 0===N?1:N;if(T>360||F>100||M>100||V<0||V>1)break;return{values:[T,F,M,V],type:a}}return{values:null,type:null}}function B(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=Math.ceil,a={h:t,s:e,v:n,a:r,toHSVA:function(){var t=[a.h,a.s,a.v],e=t.map(i);return t.push(a.a),t.toString=function(){return"hsva(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toHSLA:function(){var t=S(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"hsla(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toRGBA:function(){var t=k(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"rgba(".concat(e[0],", ").concat(e[1],", ").concat(e[2],", ").concat(a.a.toFixed(1),")")},t},toCMYK:function(){var t=C(a.h,a.s,a.v),e=t.map(i);return t.toString=function(){return"cmyk(".concat(e[0],"%, ").concat(e[1],"%, ").concat(e[2],"%, ").concat(e[3],"%)")},t},toHEXA:function(){var t=A.apply(o,[a.h,a.s,a.v]);return t.toString=function(){var e=a.a>=1?"":v(Number((255*a.a).toFixed(0)).toString(16).toUpperCase(),2,"0");return"#".concat(t.join("").toUpperCase()+e)},t},clone:function(){return B(a.h,a.s,a.v,a.a)}};return a}function L(t){var e={options:Object.assign({lockX:!1,lockY:!1,onchange:function(){return 0}},t),_tapstart:function(t){c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove:function(t){var n=e.options,r=e.cache,o=n.element,i=e.options.wrapper.getBoundingClientRect(),a=0,c=0;if(t){var s=t&&t.touches&&t.touches[0];a=t?(s||t).clientX:0,c=t?(s||t).clientY:0,a<i.left?a=i.left:a>i.left+i.width&&(a=i.left+i.width),c<i.top?c=i.top:c>i.top+i.height&&(c=i.top+i.height),a-=i.left,c-=i.top}else r&&(a=r.x*i.width,c=r.y*i.height);n.lockX||(o.style.left="calc(".concat(a/i.width*100,"% - ").concat(o.offsetWidth/2,"px)")),n.lockY||(o.style.top="calc(".concat(c/i.height*100,"% - ").concat(o.offsetWidth/2,"px)")),e.cache={x:a/i.width,y:c/i.height},n.onchange(a,c)},_tapstop:function(){s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove)},trigger:function(){e._tapmove()},update:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=e.options.wrapper.getBoundingClientRect();e._tapmove({clientX:r.left+t,clientY:r.top+n})},destroy:function(){var t=e.options,n=e._tapstart;s([t.wrapper,t.element],"mousedown",n),s([t.wrapper,t.element],"touchstart",n,{passive:!1})}},n=e.options,r=e._tapstart;return c([n.wrapper,n.element],"mousedown",r),c([n.wrapper,n.element],"touchstart",r,{passive:!1}),e}function P(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function R(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t=Object.assign({onchange:function(){return 0},className:"",elements:[]},t);var e=c(t.elements,"click",function(e){t.elements.forEach(function(n){return n.classList[e.target===n?"add":"remove"](t.className)}),t.onchange(e)});return{destroy:function(){return s.apply(r,P(e))}}}function D(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function T(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function F(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var M=function(){function t(e){var n,r,o=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),F(this,"_initializingActive",!0),F(this,"_recalc",!0),F(this,"_color",B()),F(this,"_lastColor",B()),F(this,"_swatchColors",[]),F(this,"_eventListener",{swatchselect:[],change:[],save:[],init:[]}),F(this,"_rePositioningPicker",function(){if(!o.options.inline){var t=o._root,e=t.app,i=t.button,a=window,c=a.innerWidth,s=a.innerHeight,u=i.getBoundingClientRect(),l=e.getBoundingClientRect();r=s-(u.bottom+l.height+8)<0?u.top-l.height-8:u.bottom+8;var p={left:u.left+u.width-l.width,middle:-l.width/2+(u.left+u.width/2),right:u.left},h=p[o.options.position];n=n+h>c?p.left:h<0?p.right:h,Object.assign(e.style,{left:"".concat(n,"px"),top:"".concat(r,"px")})}}),this.options=e=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,inline:!1,default:"fff",defaultRepresentation:null,position:"middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},e);var i=e,a=i.swatches,c=i.inline,s=i.components;s.interaction||(s.interaction={});var u=s.preview,l=s.opacity,p=s.hue,h=s.palette;s.palette=h||u||l||p,c&&(e.showAlways=!0),this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),a&&a.length&&a.forEach(function(t){return o.addSwatch(t)});var d=this._root.button;requestAnimationFrame(function t(){if(null===d.offsetParent&&d!==document.body)return requestAnimationFrame(t.bind(this));this.setColor(e.default),e.defaultRepresentation&&(this._representation=e.defaultRepresentation,this.setColorRepresentation(this._representation)),e.showAlways&&this.show(),this._initializingActive=!1,this._emit("init")}.bind(this))}var e,n,o;return e=t,(n=[{key:"_preBuild",value:function(){var t,e,n,r,o,i,a,c,s=this.options;"string"==typeof s.el&&(s.el=document.querySelector(s.el)),this._root=(e=(t=s).components,n=t.strings,r=t.useAsButton,o=t.inline,i=function(t){return t?"":'style="display:none" hidden'},a=h('\n <div data-key="root" class="pickr">\n \n '.concat(r?"":'<button type="button" data-key="button" class="pcr-button"></button>','\n\n <div data-key="app" class="pcr-app" ').concat(o?'style="position: unset"':"",'>\n <div class="pcr-selection" ').concat(i(e.palette),'>\n <div data-con="preview" class="pcr-color-preview" ').concat(i(e.preview),'>\n <button type="button" data-key="lastColor" class="pcr-last-color"></button>\n <div data-key="currentColor" class="pcr-current-color"></div>\n </div>\n\n <div data-con="palette" class="pcr-color-palette">\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="palette" class="pcr-palette"></div>\n </div>\n\n <div data-con="hue" class="pcr-color-chooser" ').concat(i(e.hue),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-hue pcr-slider"></div>\n </div>\n\n <div data-con="opacity" class="pcr-color-opacity" ').concat(i(e.opacity),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n </div>\n </div>\n\n <div class="pcr-swatches ').concat(e.palette?"":" pcr-last",'" data-key="swatches"></div> \n\n <div data-con="interaction" class="pcr-interaction" ').concat(i(Object.keys(e.interaction).length),'>\n <input data-key="result" class="pcr-result" type="text" spellcheck="false" ').concat(i(e.interaction.input),'>\n\n <input data-arr="options" class="pcr-type" data-type="HEXA" value="HEXA" type="button" ').concat(i(e.interaction.hex),'>\n <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBA" type="button" ').concat(i(e.interaction.rgba),'>\n <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLA" type="button" ').concat(i(e.interaction.hsla),'>\n <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVA" type="button" ').concat(i(e.interaction.hsva),'>\n <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(i(e.interaction.cmyk),'>\n\n <input data-key="save" class="pcr-save" value="').concat(n.save||"Save",'" type="button" ').concat(i(e.interaction.save),'>\n <input data-key="clear" class="pcr-clear" value="').concat(n.clear||"Clear",'" type="button" ').concat(i(e.interaction.clear),">\n </div>\n </div>\n </div>\n ")),(c=a.interaction).options.find(function(t){return!t.hidden&&!t.classList.add("active")}),c.type=function(){return c.options.find(function(t){return t.classList.contains("active")})},a),s.useAsButton&&(this._root.button=s.el),document.body.appendChild(this._root.root)}},{key:"_finalBuild",value:function(){var t=this.options,e=this._root;if(document.body.removeChild(e.root),t.inline){var n=t.el.parentElement;n.lastChild===t.el?n.appendChild(e.app):n.insertBefore(e.app,t.el.nextSibling)}else document.body.appendChild(e.app);t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}},{key:"_buildComponents",value:function(){var t=this,e=this.options.components,n={palette:L({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange:function(n,r){if(e.palette){var o=t._color,i=t._root,a=t.options;o.s=n/this.wrapper.offsetWidth*100,o.v=100-r/this.wrapper.offsetHeight*100,o.v<0&&(o.v=0);var c=o.toRGBA().toString();this.element.style.background=c,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(o.a,"), transparent), \n linear-gradient(to left, hsla(").concat(o.h,", 100%, 50%, ").concat(o.a,"), rgba(255, 255, 255, ").concat(o.a,"))\n "),a.comparison||(i.button.style.color=c,a.useAsButton||(i.preview.lastColor.style.color=c)),i.preview.currentColor.style.color=c,t._recalc&&t._updateOutput(),i.button.classList.remove("clear")}}}),hue:L({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange:function(r,o){e.hue&&e.palette&&(t._color.h=o/this.wrapper.offsetHeight*360,this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),n.palette.trigger())}}),opacity:L({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange:function(n,r){e.opacity&&e.palette&&(t._color.a=Math.round(r/this.wrapper.offsetHeight*100)/100,this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),t.components.palette.trigger())}}),selectable:R({elements:t._root.interaction.options,className:"active",onchange:function(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}},{key:"_bindEvents",value:function(){var t,e=this,n=this._root,r=this.options,o=[c(n.interaction.clear,"click",function(){return e._clearColor()}),c(n.preview.lastColor,"click",function(){return e.setHSVA.apply(e,D(e._lastColor.toHSVA()))}),c(n.interaction.save,"click",function(){!e.applyColor()&&!r.showAlways&&e.hide()}),c(n.interaction.result,["keyup","input"],function(t){e._recalc=!1,e.setColor(t.target.value,!0)&&!e._initializingActive&&e._emit("change",e._color),t.stopImmediatePropagation()}),c([n.palette.palette,n.palette.picker,n.hue.slider,n.hue.picker,n.opacity.slider,n.opacity.picker],["mousedown","touchstart"],function(){return e._recalc=!0})];if(!r.showAlways){var i=r.closeWithKey;o.push(c(n.button,"click",function(){return e.isOpen()?e.hide():e.show()}),c(document,"keyup",function(t){return e.isOpen()&&(t.key===i||t.code===i)&&e.hide()}),c(document,["touchstart","mousedown"],function(t){e.isOpen()&&!d(t).some(function(t){return t===n.app||t===n.button})&&e.hide()},{capture:!0}))}(r.adjustableNumbers&&f(n.interaction.result,!1),r.inline)||o.push(c(window,["scroll","wheel","resize"],function(){e.isOpen()&&(e.hide(),t&&clearTimeout(t),t=setTimeout(function(){return e.show()},250))}));this._eventBindings=o}},{key:"_updateOutput",value:function(){if(this._root.interaction.type()){var t="to".concat(this._root.interaction.type().getAttribute("data-type"));this._root.interaction.result.value="function"==typeof this._color[t]?this._color[t]().toString():""}this._initializingActive||this._emit("change",this._color)}},{key:"_clearColor",value:function(){var t=this._root,e=this.options;e.useAsButton||(t.button.style.color="rgba(0, 0, 0, 0.15)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._initializingActive||this._emit("save",null)}},{key:"_emit",value:function(t){for(var e=this,n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];this._eventListener[t].forEach(function(t){return t.apply(void 0,r.concat([e]))})}},{key:"on",value:function(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}},{key:"off",value:function(t,e){var n=this._eventListener[t];if(n){var r=n.indexOf(e);~r&&n.splice(r,1)}return this}},{key:"addSwatch",value:function(t){var e=this,n=H(t).values;if(n){var r=this._swatchColors,o=this._root,i=B.apply(void 0,D(n)),a=l('<button type="button" style="color: '.concat(i.toRGBA(),'"></button>'));return o.swatches.appendChild(a),r.push({element:a,hsvaColorObject:i}),this._eventBindings.push(c(a,"click",function(){e.setHSVA.apply(e,D(i.toHSVA()).concat([!0])),e._emit("swatchselect",i)})),!0}return!1}},{key:"removeSwatch",value:function(t){if("number"==typeof t){var e=this._swatchColors[t];if(e){var n=e.element;return this._root.swatches.removeChild(n),this._swatchColors.splice(t,1),!0}}return!1}},{key:"applyColor",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this._root,n=e.preview,r=e.button,o=this._color.toRGBA().toString();n.lastColor.style.color=o,this.options.useAsButton||(r.style.color=o),r.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}},{key:"destroy",value:function(){var t=this;this._eventBindings.forEach(function(t){return s.apply(r,D(t))}),Object.keys(this.components).forEach(function(e){return t.components[e].destroy()})}},{key:"destroyAndRemove",value:function(){this.destroy();var t=this._root.root;t.parentElement.removeChild(t);var e=this._root.app;e.parentElement.removeChild(e);var n=this;Object.keys(n).forEach(function(t){return n[t]=null})}},{key:"hide",value:function(){return this._root.app.classList.remove("visible"),this}},{key:"show",value:function(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}},{key:"isOpen",value:function(){return this._root.app.classList.contains("visible")}},{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,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,o=arguments.length>4&&void 0!==arguments[4]&&arguments[4],i=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||r<0||r>1)return!1;var a=this.components,c=a.hue,s=a.opacity,u=a.palette,l=c.options.wrapper.offsetHeight*(t/360);c.update(0,l);var p=s.options.wrapper.offsetHeight*r;s.update(0,p);var h=u.options.wrapper,d=h.offsetWidth*(e/100),f=h.offsetHeight*(1-n/100);return u.update(d,f),this._color=B(t,e,n,r),this._recalc=i,this._recalc&&this._updateOutput(),o||this.applyColor(),!0}},{key:"setColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;var n=H(t),r=n.values,o=n.type;if(r){var i=o.toUpperCase(),a=this._root.interaction.options,c=a.find(function(t){return t.getAttribute("data-type").startsWith(i)});if(c&&!c.hidden){var s=!0,u=!1,l=void 0;try{for(var p,h=a[Symbol.iterator]();!(s=(p=h.next()).done);s=!0){var d=p.value;d.classList[d===c?"add":"remove"]("active")}}catch(t){u=!0,l=t}finally{try{s||null==h.return||h.return()}finally{if(u)throw l}}}return this.setHSVA.apply(this,D(r).concat([e]))}}},{key:"setColorRepresentation",value:function(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(function(e){return e.getAttribute("data-type").startsWith(t)&&!e.click()})}},{key:"getColorRepresentation",value:function(){return this._representation}},{key:"getColor",value:function(){return this._color}},{key:"getRoot",value:function(){return this._root}},{key:"disable",value:function(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}},{key:"enable",value:function(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}])&&T(e.prototype,n),o&&T(e,o),t}();M.utils={once:a,on:c,off:s,eventPath:d,createElementFromString:l,adjustableInputNumbers:f,removeAttribute:p,createFromTemplate:h},M.create=function(t){return new M(t)},M.version="0.4.10";e.default=M}]).default}); | ||
| //# sourceMappingURL=pickr.es5.min.js.map |
@@ -1,3 +0,3 @@ | ||
| /*! Pickr 0.4.9 MIT | 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 n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);n(0);function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}const i=r.bind(null,"addEventListener"),s=r.bind(null,"removeEventListener");function r(t,e,n,i){let s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(e=>n.forEach(n=>e[t](n,i,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){o(t,e,n[e])})}return t}({capture:!1},s)))),Array.prototype.slice.call(arguments,1)}function a(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function c(t,e){const n=t.getAttribute(e);return t.removeAttribute(e),n}function l(t){return function t(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=c(e,"data-con"),i=c(e,"data-key");i&&(n[i]=e);const s=Array.from(e.children),r=o?n[o]={}:n;for(let e of s){const n=c(e,"data-arr");n?(r[n]||(r[n]=[])).push(e):t(e,r)}return n}(a(t))}function p(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function u(t){let e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];const n=t=>t>="0"&&t<="9"||"-"===t||"."===t;function o(o){const i=t.value,s=t.selectionStart;let r=s,a="";for(let t=s-1;t>0&&n(i[t]);t--)a=i[t]+a,r--;for(let t=s,e=i.length;t<e&&n(i[t]);t++)a+=i[t];if(a.length>0&&!isNaN(a)&&isFinite(a)){const n=o.deltaY<0?1:-1,s=o.ctrlKey?5*n:n;let c=Number(a)+s;!e&&c<0&&(c=0);const l=i.substr(0,r)+c+i.substring(r+a.length,i.length),p=r+String(c).length;t.value=l,t.focus(),t.setSelectionRange(p,p)}o.preventDefault(),t.dispatchEvent(new Event("input"))}i(t,"focus",()=>i(window,"wheel",o,{passive:!1})),i(t,"blur",()=>s(window,"wheel",o))}function h(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:" ";return(e-=t.length)<=0||!n.length?String(t):(e>n.length&&(n+=n.repeat(e/n.length)),n.slice(0,e)+String(t))}function d(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,i=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(o=(r=a.next()).done)&&(n.push(r.value),!e||n.length!==e);o=!0);}catch(t){i=!0,s=t}finally{try{o||null==a.return||a.return()}finally{if(i)throw s}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}const f=Math.min,v=Math.max,y=Math.floor,g=Math.round;function m(t,e,n){e/=100,n/=100;let o=y(t=t/360*6),i=t-o,s=n*(1-e),r=n*(1-i*e),a=n*(1-(1-i)*e),c=o%6;return[255*[n,r,s,s,a,n][c],255*[a,n,n,r,s,s][c],255*[s,s,a,n,n,r][c]]}function b(t,e,n){let o,i,s;const r=f(t/=255,e/=255,n/=255),a=v(t,e,n),c=a-r;if(0===c)o=i=0;else{i=c/a;let s=((a-t)/6+c/2)/c,r=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?o=l-r:e===a?o=1/3+s-l:n===a&&(o=2/3+r-s),o<0?o+=1:o>1&&(o-=1)}return[360*o,100*i,100*(s=a)]}function _(t,e,n,o){return e/=100,n/=100,[...b(255*(1-f(1,(t/=100)*(1-(o/=100))+o)),255*(1-f(1,e*(1-o)+o)),255*(1-f(1,n*(1-o)+o)))]}function w(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function k(t){return b(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function A(t){t=t.match(/^[a-zA-Z]+$/)?function(t){const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let o;for(const r in e)if(o=e[r].exec(t))switch(r){case"cmyk":{let t=d(n(o),5),e=t[1],i=t[2],s=t[3],a=t[4];if(e>100||i>100||s>100||a>100)break;return{values:[..._(e,i,s,a),1],type:r}}case"rgba":{let t=d(n(o),6),e=t[2],i=t[3],s=t[4],a=t[5],c=void 0===a?1:a;if(e>255||i>255||s>255||c<0||c>1)break;return{values:[...b(e,i,s),c],type:r}}case"hex":{const t=(t,e)=>[t.substring(0,e),t.substring(e,t.length)];let e,n=d(o,2)[1];if(3===n.length?n+="F":6===n.length&&(n+="FF"),4===n.length){var i=d(t(n,3).map(t=>t+t),2);n=i[0],e=i[1]}else if(8===n.length){var s=d(t(n,6),2);n=s[0],e=s[1]}return e=parseInt(e,16)/255,{values:[...k(n),e],type:r}}case"hsla":{let t=d(n(o),6),e=t[2],i=t[3],s=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||s>100||c<0||c>1)break;return{values:[...w(e,i,s),c],type:r}}case"hsva":{let t=d(n(o),6),e=t[2],i=t[3],s=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||s>100||c<0||c>1)break;return{values:[e,i,s,c],type:r}}}return{values:null,type:null}}function C(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;const i=Math.ceil,s={h:t,s:e,v:n,a:o,toHSVA(){const t=[s.h,s.s,s.v],e=t.map(i);return t.push(s.a),t.toString=(()=>"hsva(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(s.a.toFixed(1),")")),t},toHSLA(){const t=function(t,e,n){let o=(2-(e/=100))*(n/=100)/2;return 0!==o&&(e=1===o?0:o<.5?e*n/(2*o):e*n/(2-2*o)),[t,100*e,100*o]}(s.h,s.s,s.v),e=t.map(i);return t.push(s.a),t.toString=(()=>"hsla(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(s.a.toFixed(1),")")),t},toRGBA(){const t=m(s.h,s.s,s.v),e=t.map(i);return t.push(s.a),t.toString=(()=>"rgba(".concat(e[0],", ").concat(e[1],", ").concat(e[2],", ").concat(s.a.toFixed(1),")")),t},toCMYK(){const t=function(t,e,n){const o=m(t,e,n),i=o[0]/255,s=o[1]/255,r=o[2]/255;let a,c,l,p;return[100*(c=1===(a=f(1-i,1-s,1-r))?0:(1-i-a)/(1-a)),100*(l=1===a?0:(1-s-a)/(1-a)),100*(p=1===a?0:(1-r-a)/(1-a)),100*a]}(s.h,s.s,s.v),e=t.map(i);return t.toString=(()=>"cmyk(".concat(e[0],"%, ").concat(e[1],"%, ").concat(e[2],"%, ").concat(e[3],"%)")),t},toHEX(){const t=(e=s.h,n=s.s,o=s.v,m(e,n,o).map(t=>h(g(t).toString(16),2,"0")));var e,n,o;return t.toString=(()=>{const e=s.a>=1?"":h(Number((255*s.a).toFixed(0)).toString(16).toUpperCase(),2,"0");return"#".concat(t.join("").toUpperCase()+e)}),t},clone:()=>C(s.h,s.s,s.v,s.a)};return s}function S(t){const e={options:Object.assign({lockX:!1,lockY:!1,onchange:()=>0},t),_tapstart(t){i(document,["mouseup","touchend","touchcancel"],e._tapstop),i(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove(t){const n=e.options,o=e.cache,i=n.element,s=e.options.wrapper.getBoundingClientRect();let r=0,a=0;if(t){const e=t&&t.touches&&t.touches[0];r=t?(e||t).clientX:0,a=t?(e||t).clientY:0,r<s.left?r=s.left:r>s.left+s.width&&(r=s.left+s.width),a<s.top?a=s.top:a>s.top+s.height&&(a=s.top+s.height),r-=s.left,a-=s.top}else o&&(r=o.x*s.width,a=o.y*s.height);n.lockX||(i.style.left="calc(".concat(r/s.width*100,"% - ").concat(i.offsetWidth/2,"px)")),n.lockY||(i.style.top="calc(".concat(a/s.height*100,"% - ").concat(i.offsetWidth/2,"px)")),e.cache={x:r/s.width,y:a/s.height},n.onchange(r,a)},_tapstop(){s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;const o=e.options.wrapper.getBoundingClientRect();e._tapmove({clientX:o.left+t,clientY:o.top+n})},destroy(){const t=e.options,n=e._tapstart;s([t.wrapper,t.element],"mousedown",n),s([t.wrapper,t.element],"touchstart",n,{passive:!1})}},n=e.options,o=e._tapstart;return i([n.wrapper,n.element],"mousedown",o),i([n.wrapper,n.element],"touchstart",o,{passive:!1}),e}function O(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=i(t.elements,"click",e=>{t.elements.forEach(n=>n.classList[e.target===n?"add":"remove"](t.className)),t.onchange(e)});return{destroy:()=>s(...e)}}function E(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}class x{constructor(t){E(this,"_initializingActive",!0),E(this,"_recalc",!0),E(this,"_color",C()),E(this,"_lastColor",C()),E(this,"_swatchColors",[]),E(this,"_eventListener",{swatchselect:[],change:[],save:[],init:[]}),E(this,"_rePositioningPicker",(()=>{let t,e;return()=>{if(this.options.inline)return;const n=this._root,o=n.app,i=n.button,s=window,r=s.innerWidth,a=s.innerHeight,c=i.getBoundingClientRect(),l=o.getBoundingClientRect();e=a-(c.bottom+l.height+8)<0?c.top-l.height-8:c.bottom+8;const p={left:c.left+c.width-l.width,middle:-l.width/2+(c.left+c.width/2),right:c.left},u=p[this.options.position];t=t+u>r?p.left:u<0?p.right:u,Object.assign(o.style,{left:"".concat(t,"px"),top:"".concat(e,"px")})}})()),this.options=t=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,inline:!1,default:"fff",defaultRepresentation:"HEX",position:"middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},t);const e=t,n=e.swatches,o=e.inline,i=e.components;i.interaction||(i.interaction={}),o&&(t.showAlways=!0),this._preBuild(),this._buildComponents(),this._bindEvents(),this._representation=t.defaultRepresentation,this.setColorRepresentation(this._representation),this._finalBuild(),n&&n.length&&n.forEach(t=>this.addSwatch(t));const s=this._root.button;requestAnimationFrame(function e(){if(null===s.offsetParent&&s!==document.body)return requestAnimationFrame(e.bind(this));this.setColor(t.default),t.showAlways&&this.show(),this._initializingActive=!1,this._emit("init")}.bind(this))}_preBuild(){const t=this.options;"string"==typeof t.el&&(t.el=document.querySelector(t.el)),this._root=function(t){const e=t.components,n=t.strings,o=t.useAsButton,i=t.inline,s=t=>t?"":'style="display:none" hidden',r=l('\n <div data-key="root" class="pickr">\n \n '.concat(o?"":'<button type="button" data-key="button" class="pcr-button"></button>','\n\n <div data-key="app" class="pcr-app" ').concat(i?'style="position: unset"':"",'>\n <div class="pcr-selection">\n <div data-con="preview" class="pcr-color-preview" ').concat(s(e.preview),'>\n <button type="button" data-key="lastColor" class="pcr-last-color"></button>\n <div data-key="currentColor" class="pcr-current-color"></div>\n </div>\n\n <div data-con="palette" class="pcr-color-palette">\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="palette" class="pcr-palette"></div>\n </div>\n\n <div data-con="hue" class="pcr-color-chooser" ').concat(s(e.hue),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-hue pcr-slider"></div>\n </div>\n\n <div data-con="opacity" class="pcr-color-opacity" ').concat(s(e.opacity),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n </div>\n </div>\n\n <div class="swatches" data-key="swatches"></div> \n\n <div data-con="interaction" class="pcr-interaction" ').concat(s(Object.keys(e.interaction).length),'>\n <input data-key="result" class="pcr-result" type="text" spellcheck="false" ').concat(s(e.interaction.input),'>\n\n <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ').concat(s(e.interaction.hex),'>\n <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ').concat(s(e.interaction.rgba),'>\n <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ').concat(s(e.interaction.hsla),'>\n <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ').concat(s(e.interaction.hsva),'>\n <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(s(e.interaction.cmyk),'>\n\n <input data-key="save" class="pcr-save" value="').concat(n.save||"Save",'" type="button" ').concat(s(e.interaction.save),'>\n <input data-key="clear" class="pcr-clear" value="').concat(n.clear||"Clear",'" type="button" ').concat(s(e.interaction.clear),">\n </div>\n </div>\n </div>\n ")),a=r.interaction;return a.options.find(t=>!t.hidden&&!t.classList.add("active")),a.type=(()=>a.options.find(t=>t.classList.contains("active"))),r}(t),t.useAsButton&&(this._root.button=t.el),document.body.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(document.body.removeChild(e.root),t.inline){const n=t.el.parentElement;n.lastChild===t.el?n.appendChild(e.app):n.insertBefore(e.app,t.el.nextSibling)}else document.body.appendChild(e.app);t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,n={palette:S({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange(e,n){const o=t._color,i=t._root,s=t.options;o.s=e/this.wrapper.offsetWidth*100,o.v=100-n/this.wrapper.offsetHeight*100,o.v<0&&(o.v=0);const r=o.toRGBA().toString();this.element.style.background=r,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(o.a,"), transparent), \n linear-gradient(to left, hsla(").concat(o.h,", 100%, 50%, ").concat(o.a,"), rgba(255, 255, 255, ").concat(o.a,"))\n "),s.comparison||(i.button.style.color=r,s.useAsButton||(i.preview.lastColor.style.color=r)),i.preview.currentColor.style.color=r,t._recalc&&t._updateOutput(),i.button.classList.remove("clear")}}),hue:S({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange(o,i){e.hue&&(t._color.h=i/this.wrapper.offsetHeight*360,this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),n.palette.trigger())}}),opacity:S({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange(n,o){e.opacity&&(t._color.a=Math.round(o/this.wrapper.offsetHeight*100)/100,this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),t.components.palette.trigger())}}),selectable:O({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}_bindEvents(){const t=this._root,e=this.options,n=[i(t.interaction.clear,"click",()=>this._clearColor()),i(t.preview.lastColor,"click",()=>this.setHSVA(...this._lastColor.toHSVA())),i(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),i(t.interaction.result,["keyup","input"],t=>{this._recalc=!1,this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0)];if(!e.showAlways){const o=e.closeWithKey;n.push(i(t.button,"click",()=>this.isOpen()?this.hide():this.show()),i(document,"keyup",t=>this.isOpen()&&(t.key===o||t.code===o)&&this.hide()),i(document,["touchstart","mousedown"],e=>{this.isOpen()&&!p(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers&&u(t.interaction.result,!1),!e.inline){let t;n.push(i(window,["scroll","wheel","resize"],()=>{this.isOpen()&&(this.hide(),t&&clearTimeout(t),t=setTimeout(()=>this.show(),250))}))}this._eventBindings=n}_updateOutput(){if(this._root.interaction.type()){const t="to".concat(this._root.interaction.type().getAttribute("data-type"));this._root.interaction.result.value="function"==typeof this._color[t]?this._color[t]().toString():""}this._initializingActive||this._emit("change",this._color)}_clearColor(){const t=this._root,e=this.options;e.useAsButton||(t.button.style.color="rgba(0, 0, 0, 0.15)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._initializingActive||this._emit("save",null)}_emit(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),o=1;o<e;o++)n[o-1]=arguments[o];this._eventListener[t].forEach(t=>t(...n,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const n=this._eventListener[t];if(n){const t=n.indexOf(e);~t&&n.splice(t,1)}return this}addSwatch(t){const e=A(t).values;if(e){const t=this._swatchColors,n=this._root,o=C(...e),s=a('<button type="button" style="color: '.concat(o.toRGBA(),'"></button>'));return n.swatches.appendChild(s),t.push({element:s,hsvaColorObject:o}),this._eventBindings.push(i(s,"click",()=>{this.setHSVA(...o.toHSVA(),!0),this._emit("swatchselect",o)})),!0}return!1}removeSwatch(t){if("number"==typeof t){const e=this._swatchColors[t];if(e){const n=e.element;return this._root.swatches.removeChild(n),this._swatchColors.splice(t,1),!0}}return!1}applyColor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=this._root,n=e.preview,o=e.button,i=this._color.toRGBA().toString();n.lastColor.style.color=i,this.options.useAsButton||(o.style.color=i),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}destroy(){this._eventBindings.forEach(t=>s(...t)),Object.keys(this.components).forEach(t=>this.components[t].destroy())}destroyAndRemove(){this.destroy();const t=this._root.root;t.parentElement.removeChild(t)}hide(){return this._root.app.classList.remove("visible"),this}show(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:360,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];const s=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||o<0||o>1)return!1;const r=this.components,a=r.hue,c=r.opacity,l=r.palette,p=a.options.wrapper.offsetHeight*(t/360);a.update(0,p);const u=c.options.wrapper.offsetHeight*o;c.update(0,u);const h=l.options.wrapper,d=h.offsetWidth*(e/100),f=h.offsetHeight*(1-n/100);return l.update(d,f),this._color=C(t,e,n,o),this._recalc=s,this._recalc&&this._updateOutput(),i||this.applyColor(),!0}setColor(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;const n=A(t),o=n.values,i=n.type;if(o){const t=i.toUpperCase(),n=this._root.interaction.options,s=n.find(e=>e.getAttribute("data-type")===t);if(!s.hidden)for(const t of n)t.classList[t===s?"add":"remove"]("active");return this.setHSVA(...o,e)}}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(e=>e.getAttribute("data-type")===t&&!e.click())}getColorRepresentation(){return this._representation}getColor(){return this._color}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}x.utils={once:(t,e,n,o)=>i(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},o),on:i,off:s,eventPath:p,createElementFromString:a,adjustableInputNumbers:u,removeAttribute:c,createFromTemplate:l},x.create=(t=>new x(t)),x.version="0.4.9";e.default=x}]).default}); | ||
| /*! Pickr 0.4.10 MIT | 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 n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);n(0);function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}const i=r.bind(null,"addEventListener"),s=r.bind(null,"removeEventListener");function r(t,e,n,i){let s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(e=>n.forEach(n=>e[t](n,i,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){o(t,e,n[e])})}return t}({capture:!1},s)))),Array.prototype.slice.call(arguments,1)}function a(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function c(t,e){const n=t.getAttribute(e);return t.removeAttribute(e),n}function l(t){return function t(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=c(e,"data-con"),i=c(e,"data-key");i&&(n[i]=e);const s=Array.from(e.children),r=o?n[o]={}:n;for(let e of s){const n=c(e,"data-arr");n?(r[n]||(r[n]=[])).push(e):t(e,r)}return n}(a(t))}function p(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function u(t){let e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];const n=t=>t>="0"&&t<="9"||"-"===t||"."===t;function o(o){const i=t.value,s=t.selectionStart;let r=s,a="";for(let t=s-1;t>0&&n(i[t]);t--)a=i[t]+a,r--;for(let t=s,e=i.length;t<e&&n(i[t]);t++)a+=i[t];if(a.length>0&&!isNaN(a)&&isFinite(a)){const n=o.deltaY<0?1:-1,s=o.ctrlKey?5*n:n;let c=Number(a)+s;!e&&c<0&&(c=0);const l=i.substr(0,r)+c+i.substring(r+a.length,i.length),p=r+String(c).length;t.value=l,t.focus(),t.setSelectionRange(p,p)}o.preventDefault(),t.dispatchEvent(new Event("input"))}i(t,"focus",()=>i(window,"wheel",o,{passive:!1})),i(t,"blur",()=>s(window,"wheel",o))}function h(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:" ";return(e-=t.length)<=0||!n.length?String(t):(e>n.length&&(n+=n.repeat(e/n.length)),n.slice(0,e)+String(t))}function d(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,i=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(o=(r=a.next()).done)&&(n.push(r.value),!e||n.length!==e);o=!0);}catch(t){i=!0,s=t}finally{try{o||null==a.return||a.return()}finally{if(i)throw s}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}const f=Math.min,v=Math.max,y=Math.floor,m=Math.round;function g(t,e,n){e/=100,n/=100;let o=y(t=t/360*6),i=t-o,s=n*(1-e),r=n*(1-i*e),a=n*(1-(1-i)*e),c=o%6;return[255*[n,r,s,s,a,n][c],255*[a,n,n,r,s,s][c],255*[s,s,a,n,n,r][c]]}function b(t,e,n){let o,i,s;const r=f(t/=255,e/=255,n/=255),a=v(t,e,n),c=a-r;if(0===c)o=i=0;else{i=c/a;let s=((a-t)/6+c/2)/c,r=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?o=l-r:e===a?o=1/3+s-l:n===a&&(o=2/3+r-s),o<0?o+=1:o>1&&(o-=1)}return[360*o,100*i,100*(s=a)]}function _(t,e,n,o){return e/=100,n/=100,[...b(255*(1-f(1,(t/=100)*(1-(o/=100))+o)),255*(1-f(1,e*(1-o)+o)),255*(1-f(1,n*(1-o)+o)))]}function w(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function k(t){return b(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function A(t){t=t.match(/^[a-zA-Z]+$/)?function(t){const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let o;for(const r in e)if(o=e[r].exec(t))switch(r){case"cmyk":{let t=d(n(o),5),e=t[1],i=t[2],s=t[3],a=t[4];if(e>100||i>100||s>100||a>100)break;return{values:[..._(e,i,s,a),1],type:r}}case"rgba":{let t=d(n(o),6),e=t[2],i=t[3],s=t[4],a=t[5],c=void 0===a?1:a;if(e>255||i>255||s>255||c<0||c>1)break;return{values:[...b(e,i,s),c],type:r}}case"hex":{const t=(t,e)=>[t.substring(0,e),t.substring(e,t.length)];let e,n=d(o,2)[1];if(3===n.length?n+="F":6===n.length&&(n+="FF"),4===n.length){var i=d(t(n,3).map(t=>t+t),2);n=i[0],e=i[1]}else if(8===n.length){var s=d(t(n,6),2);n=s[0],e=s[1]}return e=parseInt(e,16)/255,{values:[...k(n),e],type:r}}case"hsla":{let t=d(n(o),6),e=t[2],i=t[3],s=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||s>100||c<0||c>1)break;return{values:[...w(e,i,s),c],type:r}}case"hsva":{let t=d(n(o),6),e=t[2],i=t[3],s=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||s>100||c<0||c>1)break;return{values:[e,i,s,c],type:r}}}return{values:null,type:null}}function C(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;const i=Math.ceil,s={h:t,s:e,v:n,a:o,toHSVA(){const t=[s.h,s.s,s.v],e=t.map(i);return t.push(s.a),t.toString=(()=>"hsva(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(s.a.toFixed(1),")")),t},toHSLA(){const t=function(t,e,n){let o=(2-(e/=100))*(n/=100)/2;return 0!==o&&(e=1===o?0:o<.5?e*n/(2*o):e*n/(2-2*o)),[t,100*e,100*o]}(s.h,s.s,s.v),e=t.map(i);return t.push(s.a),t.toString=(()=>"hsla(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(s.a.toFixed(1),")")),t},toRGBA(){const t=g(s.h,s.s,s.v),e=t.map(i);return t.push(s.a),t.toString=(()=>"rgba(".concat(e[0],", ").concat(e[1],", ").concat(e[2],", ").concat(s.a.toFixed(1),")")),t},toCMYK(){const t=function(t,e,n){const o=g(t,e,n),i=o[0]/255,s=o[1]/255,r=o[2]/255;let a,c,l,p;return[100*(c=1===(a=f(1-i,1-s,1-r))?0:(1-i-a)/(1-a)),100*(l=1===a?0:(1-s-a)/(1-a)),100*(p=1===a?0:(1-r-a)/(1-a)),100*a]}(s.h,s.s,s.v),e=t.map(i);return t.toString=(()=>"cmyk(".concat(e[0],"%, ").concat(e[1],"%, ").concat(e[2],"%, ").concat(e[3],"%)")),t},toHEXA(){const t=(e=s.h,n=s.s,o=s.v,g(e,n,o).map(t=>h(m(t).toString(16),2,"0")));var e,n,o;return t.toString=(()=>{const e=s.a>=1?"":h(Number((255*s.a).toFixed(0)).toString(16).toUpperCase(),2,"0");return"#".concat(t.join("").toUpperCase()+e)}),t},clone:()=>C(s.h,s.s,s.v,s.a)};return s}function S(t){const e={options:Object.assign({lockX:!1,lockY:!1,onchange:()=>0},t),_tapstart(t){i(document,["mouseup","touchend","touchcancel"],e._tapstop),i(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove(t){const n=e.options,o=e.cache,i=n.element,s=e.options.wrapper.getBoundingClientRect();let r=0,a=0;if(t){const e=t&&t.touches&&t.touches[0];r=t?(e||t).clientX:0,a=t?(e||t).clientY:0,r<s.left?r=s.left:r>s.left+s.width&&(r=s.left+s.width),a<s.top?a=s.top:a>s.top+s.height&&(a=s.top+s.height),r-=s.left,a-=s.top}else o&&(r=o.x*s.width,a=o.y*s.height);n.lockX||(i.style.left="calc(".concat(r/s.width*100,"% - ").concat(i.offsetWidth/2,"px)")),n.lockY||(i.style.top="calc(".concat(a/s.height*100,"% - ").concat(i.offsetWidth/2,"px)")),e.cache={x:r/s.width,y:a/s.height},n.onchange(r,a)},_tapstop(){s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;const o=e.options.wrapper.getBoundingClientRect();e._tapmove({clientX:o.left+t,clientY:o.top+n})},destroy(){const t=e.options,n=e._tapstart;s([t.wrapper,t.element],"mousedown",n),s([t.wrapper,t.element],"touchstart",n,{passive:!1})}},n=e.options,o=e._tapstart;return i([n.wrapper,n.element],"mousedown",o),i([n.wrapper,n.element],"touchstart",o,{passive:!1}),e}function O(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=i(t.elements,"click",e=>{t.elements.forEach(n=>n.classList[e.target===n?"add":"remove"](t.className)),t.onchange(e)});return{destroy:()=>s(...e)}}function E(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}class x{constructor(t){E(this,"_initializingActive",!0),E(this,"_recalc",!0),E(this,"_color",C()),E(this,"_lastColor",C()),E(this,"_swatchColors",[]),E(this,"_eventListener",{swatchselect:[],change:[],save:[],init:[]}),E(this,"_rePositioningPicker",(()=>{let t,e;return()=>{if(this.options.inline)return;const n=this._root,o=n.app,i=n.button,s=window,r=s.innerWidth,a=s.innerHeight,c=i.getBoundingClientRect(),l=o.getBoundingClientRect();e=a-(c.bottom+l.height+8)<0?c.top-l.height-8:c.bottom+8;const p={left:c.left+c.width-l.width,middle:-l.width/2+(c.left+c.width/2),right:c.left},u=p[this.options.position];t=t+u>r?p.left:u<0?p.right:u,Object.assign(o.style,{left:"".concat(t,"px"),top:"".concat(e,"px")})}})()),this.options=t=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,inline:!1,default:"fff",defaultRepresentation:null,position:"middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},t);const e=t,n=e.swatches,o=e.inline,i=e.components;i.interaction||(i.interaction={});const s=i.preview,r=i.opacity,a=i.hue,c=i.palette;i.palette=c||s||r||a,o&&(t.showAlways=!0),this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),n&&n.length&&n.forEach(t=>this.addSwatch(t));const l=this._root.button;requestAnimationFrame(function e(){if(null===l.offsetParent&&l!==document.body)return requestAnimationFrame(e.bind(this));this.setColor(t.default),t.defaultRepresentation&&(this._representation=t.defaultRepresentation,this.setColorRepresentation(this._representation)),t.showAlways&&this.show(),this._initializingActive=!1,this._emit("init")}.bind(this))}_preBuild(){const t=this.options;"string"==typeof t.el&&(t.el=document.querySelector(t.el)),this._root=function(t){const e=t.components,n=t.strings,o=t.useAsButton,i=t.inline,s=t=>t?"":'style="display:none" hidden',r=l('\n <div data-key="root" class="pickr">\n \n '.concat(o?"":'<button type="button" data-key="button" class="pcr-button"></button>','\n\n <div data-key="app" class="pcr-app" ').concat(i?'style="position: unset"':"",'>\n <div class="pcr-selection" ').concat(s(e.palette),'>\n <div data-con="preview" class="pcr-color-preview" ').concat(s(e.preview),'>\n <button type="button" data-key="lastColor" class="pcr-last-color"></button>\n <div data-key="currentColor" class="pcr-current-color"></div>\n </div>\n\n <div data-con="palette" class="pcr-color-palette">\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="palette" class="pcr-palette"></div>\n </div>\n\n <div data-con="hue" class="pcr-color-chooser" ').concat(s(e.hue),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-hue pcr-slider"></div>\n </div>\n\n <div data-con="opacity" class="pcr-color-opacity" ').concat(s(e.opacity),'>\n <div data-key="picker" class="pcr-picker"></div>\n <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n </div>\n </div>\n\n <div class="pcr-swatches ').concat(e.palette?"":" pcr-last",'" data-key="swatches"></div> \n\n <div data-con="interaction" class="pcr-interaction" ').concat(s(Object.keys(e.interaction).length),'>\n <input data-key="result" class="pcr-result" type="text" spellcheck="false" ').concat(s(e.interaction.input),'>\n\n <input data-arr="options" class="pcr-type" data-type="HEXA" value="HEXA" type="button" ').concat(s(e.interaction.hex),'>\n <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBA" type="button" ').concat(s(e.interaction.rgba),'>\n <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLA" type="button" ').concat(s(e.interaction.hsla),'>\n <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVA" type="button" ').concat(s(e.interaction.hsva),'>\n <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(s(e.interaction.cmyk),'>\n\n <input data-key="save" class="pcr-save" value="').concat(n.save||"Save",'" type="button" ').concat(s(e.interaction.save),'>\n <input data-key="clear" class="pcr-clear" value="').concat(n.clear||"Clear",'" type="button" ').concat(s(e.interaction.clear),">\n </div>\n </div>\n </div>\n ")),a=r.interaction;return a.options.find(t=>!t.hidden&&!t.classList.add("active")),a.type=(()=>a.options.find(t=>t.classList.contains("active"))),r}(t),t.useAsButton&&(this._root.button=t.el),document.body.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(document.body.removeChild(e.root),t.inline){const n=t.el.parentElement;n.lastChild===t.el?n.appendChild(e.app):n.insertBefore(e.app,t.el.nextSibling)}else document.body.appendChild(e.app);t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,n={palette:S({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange(n,o){if(!e.palette)return;const i=t._color,s=t._root,r=t.options;i.s=n/this.wrapper.offsetWidth*100,i.v=100-o/this.wrapper.offsetHeight*100,i.v<0&&(i.v=0);const a=i.toRGBA().toString();this.element.style.background=a,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(i.a,"), transparent), \n linear-gradient(to left, hsla(").concat(i.h,", 100%, 50%, ").concat(i.a,"), rgba(255, 255, 255, ").concat(i.a,"))\n "),r.comparison||(s.button.style.color=a,r.useAsButton||(s.preview.lastColor.style.color=a)),s.preview.currentColor.style.color=a,t._recalc&&t._updateOutput(),s.button.classList.remove("clear")}}),hue:S({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange(o,i){e.hue&&e.palette&&(t._color.h=i/this.wrapper.offsetHeight*360,this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),n.palette.trigger())}}),opacity:S({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange(n,o){e.opacity&&e.palette&&(t._color.a=Math.round(o/this.wrapper.offsetHeight*100)/100,this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),t.components.palette.trigger())}}),selectable:O({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}_bindEvents(){const t=this._root,e=this.options,n=[i(t.interaction.clear,"click",()=>this._clearColor()),i(t.preview.lastColor,"click",()=>this.setHSVA(...this._lastColor.toHSVA())),i(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),i(t.interaction.result,["keyup","input"],t=>{this._recalc=!1,this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0)];if(!e.showAlways){const o=e.closeWithKey;n.push(i(t.button,"click",()=>this.isOpen()?this.hide():this.show()),i(document,"keyup",t=>this.isOpen()&&(t.key===o||t.code===o)&&this.hide()),i(document,["touchstart","mousedown"],e=>{this.isOpen()&&!p(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers&&u(t.interaction.result,!1),!e.inline){let t;n.push(i(window,["scroll","wheel","resize"],()=>{this.isOpen()&&(this.hide(),t&&clearTimeout(t),t=setTimeout(()=>this.show(),250))}))}this._eventBindings=n}_updateOutput(){if(this._root.interaction.type()){const t="to".concat(this._root.interaction.type().getAttribute("data-type"));this._root.interaction.result.value="function"==typeof this._color[t]?this._color[t]().toString():""}this._initializingActive||this._emit("change",this._color)}_clearColor(){const t=this._root,e=this.options;e.useAsButton||(t.button.style.color="rgba(0, 0, 0, 0.15)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._initializingActive||this._emit("save",null)}_emit(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),o=1;o<e;o++)n[o-1]=arguments[o];this._eventListener[t].forEach(t=>t(...n,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const n=this._eventListener[t];if(n){const t=n.indexOf(e);~t&&n.splice(t,1)}return this}addSwatch(t){const e=A(t).values;if(e){const t=this._swatchColors,n=this._root,o=C(...e),s=a('<button type="button" style="color: '.concat(o.toRGBA(),'"></button>'));return n.swatches.appendChild(s),t.push({element:s,hsvaColorObject:o}),this._eventBindings.push(i(s,"click",()=>{this.setHSVA(...o.toHSVA(),!0),this._emit("swatchselect",o)})),!0}return!1}removeSwatch(t){if("number"==typeof t){const e=this._swatchColors[t];if(e){const n=e.element;return this._root.swatches.removeChild(n),this._swatchColors.splice(t,1),!0}}return!1}applyColor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=this._root,n=e.preview,o=e.button,i=this._color.toRGBA().toString();n.lastColor.style.color=i,this.options.useAsButton||(o.style.color=i),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}destroy(){this._eventBindings.forEach(t=>s(...t)),Object.keys(this.components).forEach(t=>this.components[t].destroy())}destroyAndRemove(){this.destroy();const t=this._root.root;t.parentElement.removeChild(t);const e=this._root.app;e.parentElement.removeChild(e);const n=this;Object.keys(n).forEach(t=>n[t]=null)}hide(){return this._root.app.classList.remove("visible"),this}show(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:360,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];const s=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||o<0||o>1)return!1;const r=this.components,a=r.hue,c=r.opacity,l=r.palette,p=a.options.wrapper.offsetHeight*(t/360);a.update(0,p);const u=c.options.wrapper.offsetHeight*o;c.update(0,u);const h=l.options.wrapper,d=h.offsetWidth*(e/100),f=h.offsetHeight*(1-n/100);return l.update(d,f),this._color=C(t,e,n,o),this._recalc=s,this._recalc&&this._updateOutput(),i||this.applyColor(),!0}setColor(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;const n=A(t),o=n.values,i=n.type;if(o){const t=i.toUpperCase(),n=this._root.interaction.options,s=n.find(e=>e.getAttribute("data-type").startsWith(t));if(s&&!s.hidden)for(const t of n)t.classList[t===s?"add":"remove"]("active");return this.setHSVA(...o,e)}}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(e=>e.getAttribute("data-type").startsWith(t)&&!e.click())}getColorRepresentation(){return this._representation}getColor(){return this._color}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}x.utils={once:(t,e,n,o)=>i(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},o),on:i,off:s,eventPath:p,createElementFromString:a,adjustableInputNumbers:u,removeAttribute:c,createFromTemplate:l},x.create=(t=>new x(t)),x.version="0.4.10";e.default=x}]).default}); | ||
| //# sourceMappingURL=pickr.min.js.map |
| { | ||
| "name": "@simonwep/pickr", | ||
| "version": "0.4.9", | ||
| "version": "0.4.10", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "author": "Simon Reinisch <toports@gmx.de>", |
@@ -25,3 +25,3 @@ <h1 align="center"> | ||
| <img alt="Current version" | ||
| src="https://img.shields.io/badge/version-0.4.9-f1c40f.svg?style=popout-square"> | ||
| src="https://img.shields.io/badge/version-0.4.10-f1c40f.svg?style=popout-square"> | ||
| <a href="https://www.patreon.com/simonwep"><img | ||
@@ -201,2 +201,6 @@ alt="Support me" | ||
| // Defines if the palette itself should be visible. | ||
| // Will be overwritten with true if preview, opacity or hue are true | ||
| palette: true, | ||
| preview: true, // Left side color comparison | ||
@@ -203,0 +207,0 @@ opacity: true, // Opacity slider |
@@ -49,3 +49,3 @@ import {padStart} from '../lib/utils'; | ||
| toHEX() { | ||
| toHEXA() { | ||
| const hex = Color.hsvToHex(...[that.h, that.s, that.v]); | ||
@@ -52,0 +52,0 @@ |
@@ -42,3 +42,5 @@ // Import styles | ||
| components: {interaction: {}}, | ||
| components: { | ||
| interaction: {} | ||
| }, | ||
| strings: {}, | ||
@@ -50,3 +52,3 @@ | ||
| default: 'fff', | ||
| defaultRepresentation: 'HEX', | ||
| defaultRepresentation: null, | ||
| position: 'middle', | ||
@@ -65,2 +67,6 @@ adjustableNumbers: true, | ||
| // Overwrite palette if preview, opacity or hue are true | ||
| const {preview, opacity, hue, palette} = components; | ||
| components.palette = palette || preview || opacity || hue; | ||
| // Per default enabled if inline | ||
@@ -76,6 +82,2 @@ if (inline) { | ||
| // Initialize color _epresentation | ||
| this._representation = opt.defaultRepresentation; | ||
| this.setColorRepresentation(this._representation); | ||
| // Finalize build | ||
@@ -101,2 +103,8 @@ this._finalBuild(); | ||
| // Initialize color representation | ||
| if (opt.defaultRepresentation) { | ||
| this._representation = opt.defaultRepresentation; | ||
| this.setColorRepresentation(this._representation); | ||
| } | ||
| // Show pickr if locked | ||
@@ -187,2 +195,3 @@ opt.showAlways && this.show(); | ||
| onchange(x, y) { | ||
| if (!comp.palette) return; | ||
| const {_color, _root, options} = inst; | ||
@@ -235,3 +244,3 @@ | ||
| onchange(x, y) { | ||
| if (!comp.hue) return; | ||
| if (!comp.hue || !comp.palette) return; | ||
@@ -253,3 +262,3 @@ // Calculate hue | ||
| onchange(x, y) { | ||
| if (!comp.opacity) return; | ||
| if (!comp.opacity || !comp.palette) return; | ||
@@ -576,2 +585,11 @@ // Calculate opacity | ||
| root.parentElement.removeChild(root); | ||
| // remove .pcr-app | ||
| const app = this._root.app; | ||
| app.parentElement.removeChild(app); | ||
| // There are references to various DOM elements stored in the pickr instance | ||
| // This cleans all of them to avoid detached DOMs | ||
| const pickr = this; | ||
| Object.keys(pickr).forEach(key => pickr[key] = null); | ||
| } | ||
@@ -684,6 +702,6 @@ | ||
| const {options} = this._root.interaction; | ||
| const target = options.find(el => el.getAttribute('data-type') === utype); | ||
| const target = options.find(el => el.getAttribute('data-type').startsWith(utype)); | ||
| // Auto select only if not hidden | ||
| if (!target.hidden) { | ||
| if (target && !target.hidden) { | ||
| for (const el of options) { | ||
@@ -700,3 +718,3 @@ el.classList[el === target ? 'add' : 'remove']('active'); | ||
| * Changes the color _representation. | ||
| * Allowed values are HEX, RGBA, HSVA, HSLA and CMYK | ||
| * Allowed values are HEX, RGB, HSV, HSL and CMYK | ||
| * @param type | ||
@@ -711,3 +729,3 @@ * @returns {boolean} if the selected type was valid. | ||
| // Find button with given type and trigger click event | ||
| return !!this._root.interaction.options.find(v => v.getAttribute('data-type') === type && !v.click()); | ||
| return !!this._root.interaction.options.find(v => v.getAttribute('data-type').startsWith(type) && !v.click()); | ||
| } | ||
@@ -767,3 +785,3 @@ | ||
| <div data-key="app" class="pcr-app" ${inline ? 'style="position: unset"' : ''}> | ||
| <div class="pcr-selection"> | ||
| <div class="pcr-selection" ${hidden(components.palette)}> | ||
| <div data-con="preview" class="pcr-color-preview" ${hidden(components.preview)}> | ||
@@ -790,3 +808,3 @@ <button type="button" data-key="lastColor" class="pcr-last-color"></button> | ||
| <div class="swatches" data-key="swatches"></div> | ||
| <div class="pcr-swatches ${components.palette ? '' : ' pcr-last'}" data-key="swatches"></div> | ||
@@ -796,6 +814,6 @@ <div data-con="interaction" class="pcr-interaction" ${hidden(Object.keys(components.interaction).length)}> | ||
| <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ${hidden(components.interaction.hex)}> | ||
| <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ${hidden(components.interaction.rgba)}> | ||
| <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ${hidden(components.interaction.hsla)}> | ||
| <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ${hidden(components.interaction.hsva)}> | ||
| <input data-arr="options" class="pcr-type" data-type="HEXA" value="HEXA" type="button" ${hidden(components.interaction.hex)}> | ||
| <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBA" type="button" ${hidden(components.interaction.rgba)}> | ||
| <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLA" type="button" ${hidden(components.interaction.hsla)}> | ||
| <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVA" type="button" ${hidden(components.interaction.hsva)}> | ||
| <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ${hidden(components.interaction.cmyk)}> | ||
@@ -836,3 +854,3 @@ | ||
| // Export | ||
| Pickr.version = '0.4.9'; | ||
| Pickr.version = '0.4.10'; | ||
| export default Pickr; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.35%
312781
- Lines of code
- increased by1.39%
1754
- Number of lines in readme file
- increased by1.41%
288
No dependency changes