From ee5a03d2957da0f25400178a1e5e60a7c2918e10 Mon Sep 17 00:00:00 2001 From: narsenico Date: Thu, 11 Oct 2018 14:41:15 +0200 Subject: [PATCH] version updated --- dist/acolorpicker.js | 2 +- docs/docs.js | 2 +- docs/docs.js.map | 2 +- docs/index.html | 24 +++++++++++++++++------- package-lock.json | 2 +- package.json | 2 +- src/acolorpicker.js | 2 +- src/docs/docs.css | 37 ++++++++++++++++++++++++++++++++++++- src/docs/index.html | 24 +++++++++++++++++------- 9 files changed, 76 insertions(+), 21 deletions(-) diff --git a/dist/acolorpicker.js b/dist/acolorpicker.js index 6bc5bc6..f72378b 100644 --- a/dist/acolorpicker.js +++ b/dist/acolorpicker.js @@ -23,4 +23,4 @@ * * Copyright (c) 2017-2018, Gianfranco Caldi. * Released under the MIT License. - */var u="undefined"!=typeof window&&window.navigator.userAgent.indexOf("Edge")>-1,h="undefined"!=typeof window&&window.navigator.userAgent.indexOf("rv:")>-1,p={id:null,attachTo:"body",showHSL:!0,showRGB:!0,showHEX:!0,showAlpha:!1,color:"#ff0000",palette:null,paletteEditable:!1,useAlphaInPalette:"auto"},d=[200,150],g=[150,16],f=g,v="COLOR",b="RGBA_USER",m="HSLA_USER",y='
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n
\n
';function F(e,t,r){return e?e instanceof HTMLElement?e:e instanceof NodeList?e[0]:"string"==typeof e?document.querySelector(e):e.jquery?e.get(0):r?t:null:t}function A(e){var t=e.getContext("2d"),r=+e.width,n=+e.height,i=t.createLinearGradient(1,1,1,n-1);return i.addColorStop(0,"white"),i.addColorStop(1,"black"),{setHue:function(e){var o=t.createLinearGradient(0,0,r-1,0);o.addColorStop(0,"hsla("+e+", 100%, 50%, 0)"),o.addColorStop(1,"hsla("+e+", 100%, 50%, 1)"),t.fillStyle=i,t.fillRect(0,0,r,n),t.fillStyle=o,t.globalCompositeOperation="multiply",t.fillRect(0,0,r,n),t.globalCompositeOperation="source-over"},grabColor:function(e,r){return t.getImageData(e,r,1,1).data},findColor:function(e,i,o){for(var s=4*r,a=t.getImageData(0,0,r,n).data,l=[-1,-1],c=0;c2&&void 0!==arguments[2]?arguments[2]:"acp-";if(t.hasAttribute(r+"show-hsl")&&(e.showHSL=k(t.getAttribute(r+"show-hsl"),p.showHSL,!0)),t.hasAttribute(r+"show-rgb")&&(e.showRGB=k(t.getAttribute(r+"show-rgb"),p.showRGB,!0)),t.hasAttribute(r+"show-hex")&&(e.showHEX=k(t.getAttribute(r+"show-hex"),p.showHEX,!0)),t.hasAttribute(r+"show-alpha")&&(e.showAlpha=k(t.getAttribute(r+"show-alpha"),p.showAlpha,!0)),t.hasAttribute(r+"palette-editable")&&(e.paletteEditable=k(t.getAttribute(r+"palette-editable"),p.paletteEditable,!0)),t.hasAttribute(r+"palette")){var n=t.getAttribute(r+"palette");switch(n){case"PALETTE_MATERIAL_500":e.palette=s.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":case"":e.palette=s.PALETTE_MATERIAL_CHROME;break;default:e.palette=n.split(/[;\|]/)}}t.hasAttribute(r+"color")&&(e.color=t.getAttribute(r+"color"))}(this.options,t),this.H=0,this.S=0,this.L=0,this.R=0,this.G=0,this.B=0,this.A=1,this.palette={},this.element=document.createElement("div"),this.options.id&&(this.element.id=this.options.id),this.element.className="a-color-picker",this.options.showRGB||(this.element.className+=" hide-rgb"),this.options.showHSL||(this.element.className+=" hide-hsl"),this.options.showHEX||(this.element.className+=" hide-single-input"),this.options.showAlpha||(this.element.className+=" hide-alpha"),this.element.innerHTML=y,t.appendChild(this.element);var n=this.element.querySelector(".a-color-picker-h");this.setupHueCanvas(n),this.hueBarHelper=A(n),this.huePointer=this.element.querySelector(".a-color-picker-h+.a-color-picker-dot");var i=this.element.querySelector(".a-color-picker-sl");this.setupSlCanvas(i),this.slBarHelper=A(i),this.slPointer=this.element.querySelector(".a-color-picker-sl+.a-color-picker-dot"),this.preview=this.element.querySelector(".a-color-picker-preview"),this.setupClipboard(this.preview.querySelector(".a-color-picker-clipbaord")),this.setupInput(this.inputH=this.element.querySelector(".a-color-picker-hsl>input[name=H]")),this.setupInput(this.inputS=this.element.querySelector(".a-color-picker-hsl>input[name=S]")),this.setupInput(this.inputL=this.element.querySelector(".a-color-picker-hsl>input[name=L]")),this.setupInput(this.inputR=this.element.querySelector(".a-color-picker-rgb>input[name=R]")),this.setupInput(this.inputG=this.element.querySelector(".a-color-picker-rgb>input[name=G]")),this.setupInput(this.inputB=this.element.querySelector(".a-color-picker-rgb>input[name=B]")),this.setupInput(this.inputRGBHEX=this.element.querySelector("input[name=RGBHEX]")),this.setPalette(this.element.querySelector(".a-color-picker-palette")),this.setupAlphaCanvas(this.element.querySelector(".a-color-picker-a")),this.alphaPointer=this.element.querySelector(".a-color-picker-a+.a-color-picker-dot"),this.onValueChanged(v,this.options.color)}return o(e,[{key:"setupHueCanvas",value:function(e){var t=this;e.width=g[0],e.height=g[1];for(var r=e.getContext("2d"),n=r.createLinearGradient(0,0,g[0],0),i=0;i<=1;i+=1/360)n.addColorStop(i,"hsl("+360*i+", 100%, 50%)");r.fillStyle=n,r.fillRect(0,0,g[0],g[1]);var o=function(r){var n=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,g[0]),i=Math.round(360*n/g[0]);t.huePointer.style.left=n-7+"px",t.onValueChanged("H",i)},a=function e(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){o(e),document.addEventListener("mousemove",o),document.addEventListener("mouseup",a)})}},{key:"setupSlCanvas",value:function(e){var t=this;e.width=d[0],e.height=d[1];var r=function(r){var n=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,d[0]-1),i=(0,s.limit)(r.clientY-e.getBoundingClientRect().top,0,d[1]-1),o=t.slBarHelper.grabColor(n,i);t.slPointer.style.left=n-7+"px",t.slPointer.style.top=i-7+"px",t.onValueChanged("RGB",o)},n=function e(){document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){r(e),document.addEventListener("mousemove",r),document.addEventListener("mouseup",n)})}},{key:"setupAlphaCanvas",value:function(e){var t=this;e.width=f[0],e.height=f[1];var r=e.getContext("2d"),n=r.createLinearGradient(0,0,e.width-1,0);n.addColorStop(0,"hsla(0, 0%, 50%, 0)"),n.addColorStop(1,"hsla(0, 0%, 50%, 1)"),r.fillStyle=n,r.fillRect(0,0,f[0],f[1]);var i=function(r){var n=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,f[0]),i=+(n/f[0]).toFixed(2);t.alphaPointer.style.left=n-7+"px",t.onValueChanged("ALPHA",i)},o=function e(){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){i(e),document.addEventListener("mousemove",i),document.addEventListener("mouseup",o)})}},{key:"setupInput",value:function(e){var t=this,r=+e.min,n=+e.max,i=e.name;e.hasAttribute("select-on-focus")&&e.addEventListener("focus",function(){e.select()}),"text"===e.type?e.addEventListener("change",function(){t.onValueChanged(i,e.value)}):((u||h)&&e.addEventListener("keydown",function(o){"Up"===o.key?(e.value=(0,s.limit)(+e.value+1,r,n),t.onValueChanged(i,e.value),o.returnValue=!1):"Down"===o.key&&(e.value=(0,s.limit)(+e.value-1,r,n),t.onValueChanged(i,e.value),o.returnValue=!1)}),e.addEventListener("change",function(){var o=+e.value;t.onValueChanged(i,(0,s.limit)(o,r,n))}))}},{key:"setupClipboard",value:function(e){var t=this;e.title="click to copy",e.addEventListener("click",function(){e.value=(0,s.parseColor)([t.R,t.G,t.B,t.A],"hexcss4"),e.select(),document.execCommand("copy")})}},{key:"setPalette",value:function(e){var t=this,r="auto"===this.options.useAlphaInPalette?this.options.showAlpha:this.options.useAlphaInPalette,n=(0,s.ensureArray)(this.options.palette);if(this.options.paletteEditable||n.length>0){var i=function(r,n,i){var o=e.querySelector('.a-color-picker-palette-color[data-color="'+r+'"]')||document.createElement("div");o.className="a-color-picker-palette-color",o.style.backgroundColor=r,o.setAttribute("data-color",r),o.title=r,e.insertBefore(o,n),t.palette[r]=!0,i&&t.onPaletteColorAdd(r)},o=function(r,n){r?(e.removeChild(r),t.palette[r.getAttribute("data-color")]=!1,n&&t.onPaletteColorRemove(r.getAttribute("data-color"))):(e.querySelectorAll(".a-color-picker-palette-color[data-color]").forEach(function(t){e.removeChild(t)}),Object.keys(t.palette).forEach(function(e){t.palette[e]=!1}),n&&t.onPaletteColorRemove())};if(n.map(function(e){return(0,s.parseColor)(e,r?"rgbcss4":"hex")}).filter(function(e){return!!e}).forEach(function(e){return i(e)}),this.options.paletteEditable){var a=document.createElement("div");a.className="a-color-picker-palette-color a-color-picker-palette-add",a.innerHTML="+",e.appendChild(a),e.addEventListener("click",function(e){/a-color-picker-palette-add/.test(e.target.className)?e.shiftKey?o(null,!0):i(r?(0,s.parseColor)([t.R,t.G,t.B,t.A],"rgbcss4"):(0,s.rgbToHex)(t.R,t.G,t.B),e.target,!0):/a-color-picker-palette-color/.test(e.target.className)&&(e.shiftKey?o(e.target,!0):t.onValueChanged(v,e.target.getAttribute("data-color")))})}else e.addEventListener("click",function(e){/a-color-picker-palette-color/.test(e.target.className)&&t.onValueChanged(v,e.target.getAttribute("data-color"))})}else e.style.display="none"}},{key:"onValueChanged",value:function(e,t){switch(e){case"H":this.H=t;var r=(0,s.hslToRgb)(this.H,this.S,this.L),n=i(r,3);this.R=n[0],this.G=n[1],this.B=n[2],this.slBarHelper.setHue(t),this.updatePointerH(this.H),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"S":this.S=t;var o=(0,s.hslToRgb)(this.H,this.S,this.L),a=i(o,3);this.R=a[0],this.G=a[1],this.B=a[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"L":this.L=t;var l=(0,s.hslToRgb)(this.H,this.S,this.L),c=i(l,3);this.R=c[0],this.G=c[1],this.B=c[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"R":this.R=t;var u=(0,s.rgbToHsl)(this.R,this.G,this.B),h=i(u,3);this.H=h[0],this.S=h[1],this.L=h[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"G":this.G=t;var p=(0,s.rgbToHsl)(this.R,this.G,this.B),d=i(p,3);this.H=d[0],this.S=d[1],this.L=d[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"B":this.B=t;var g=(0,s.rgbToHsl)(this.R,this.G,this.B),f=i(g,3);this.H=f[0],this.S=f[1],this.L=f[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"RGB":var y=i(t,3);this.R=y[0],this.G=y[1],this.B=y[2];var F=(0,s.rgbToHsl)(this.R,this.G,this.B),A=i(F,3);this.H=A[0],this.S=A[1],this.L=A[2],this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case b:var k=i(t,4);this.R=k[0],this.G=k[1],this.B=k[2],this.A=k[3];var E=(0,s.rgbToHsl)(this.R,this.G,this.B),H=i(E,3);this.H=H[0],this.S=H[1],this.L=H[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case m:var C=i(t,4);this.H=C[0],this.S=C[1],this.L=C[2],this.A=C[3];var R=(0,s.hslToRgb)(this.H,this.S,this.L),B=i(R,3);this.R=B[0],this.G=B[1],this.B=B[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"RGBHEX":var L=(0,s.cssColorToRgb)(t)||[this.R,this.G,this.B],x=i(L,3);this.R=x[0],this.G=x[1],this.B=x[2];var S=(0,s.rgbToHsl)(this.R,this.G,this.B),w=i(S,3);this.H=w[0],this.S=w[1],this.L=w[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B);break;case v:var T=(0,s.parseColor)(t,"rgba")||[0,0,0,1],G=i(T,4);this.R=G[0],this.G=G[1],this.B=G[2],this.A=G[3];var I=(0,s.rgbToHsl)(this.R,this.G,this.B),P=i(I,3);this.H=P[0],this.S=P[1],this.L=P[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"ALPHA":this.A=t}this.onColorChanged(this.R,this.G,this.B,this.A)}},{key:"onColorChanged",value:function(e,t,r,n){this.preview.style.backgroundColor=1===n?"rgb("+e+","+t+","+r+")":"rgba("+e+","+t+","+r+","+n+")",this.onchange&&this.onchange(this.preview.style.backgroundColor)}},{key:"onPaletteColorAdd",value:function(e){this.oncoloradd&&this.oncoloradd(e)}},{key:"onPaletteColorRemove",value:function(e){this.oncolorremove&&this.oncolorremove(e)}},{key:"updateInputHSL",value:function(e,t,r){this.inputH.value=e,this.inputS.value=t,this.inputL.value=r}},{key:"updateInputRGB",value:function(e,t,r){this.inputR.value=e,this.inputG.value=t,this.inputB.value=r}},{key:"updateInputRGBHEX",value:function(e,t,r){this.inputRGBHEX.value=(0,s.rgbToHex)(e,t,r)}},{key:"updatePointerH",value:function(e){var t=g[0]*e/360;this.huePointer.style.left=t-7+"px"}},{key:"updatePointerSL",value:function(e,t,r){var n=(0,s.hslToRgb)(e,t,r),o=i(n,3),a=o[0],l=o[1],c=o[2],u=this.slBarHelper.findColor(a,l,c),h=i(u,2),p=h[0],d=h[1];p>=0&&(this.slPointer.style.left=p-7+"px",this.slPointer.style.top=d-7+"px")}},{key:"updatePointerA",value:function(e){var t=f[0]*e;this.alphaPointer.style.left=t-7+"px"}}]),e}(),H=function(){function e(t){l(this,e),this.name=t,this.listeners=[]}return o(e,[{key:"on",value:function(e){e&&this.listeners.push(e)}},{key:"off",value:function(e){this.listeners=e?this.listeners.filter(function(t){return t!==e}):[]}},{key:"emit",value:function(e,t){for(var r=this.listeners.slice(0),n=0;nstyle[data-source="a-color-picker"]')){var R=r(3).toString(),B=document.createElement("style");B.setAttribute("type","text/css"),B.setAttribute("data-source","a-color-picker"),B.innerHTML=R,document.querySelector("head").appendChild(B)}t.createPicker=C,t.from=function(e,t){var r=function(e){return e?Array.isArray(e)?e:e instanceof HTMLElement?[e]:e instanceof NodeList?[].concat(c(e)):"string"==typeof e?[].concat(c(document.querySelectorAll(e))):e.jquery?e.get():[]:[]}(e).map(function(e,r){var n=C(e,t);return n.index=r,n});return r.on=function(e,t){return r.forEach(function(r){return r.on(e,t)}),this},r.off=function(e){return r.forEach(function(t){return t.off(e)}),this},r},t.parseColorToRgb=s.parseColorToRgb,t.parseColorToRgba=s.parseColorToRgba,t.parseColorToHsl=s.parseColorToHsl,t.parseColorToHsla=s.parseColorToHsla,t.parseColor=s.parseColor,t.rgbToHex=s.rgbToHex,t.hslToRgb=s.hslToRgb,t.rgbToHsl=s.rgbToHsl,t.rgbToInt=s.rgbToInt,t.intToRgb=s.intToRgb,t.getLuminance=s.getLuminance,t.COLOR_NAMES=s.COLOR_NAMES,t.PALETTE_MATERIAL_500=s.PALETTE_MATERIAL_500,t.PALETTE_MATERIAL_CHROME=s.PALETTE_MATERIAL_CHROME,t.VERSION="1.1.2"}])}); \ No newline at end of file + */var u="undefined"!=typeof window&&window.navigator.userAgent.indexOf("Edge")>-1,h="undefined"!=typeof window&&window.navigator.userAgent.indexOf("rv:")>-1,p={id:null,attachTo:"body",showHSL:!0,showRGB:!0,showHEX:!0,showAlpha:!1,color:"#ff0000",palette:null,paletteEditable:!1,useAlphaInPalette:"auto"},d=[200,150],g=[150,16],f=g,v="COLOR",b="RGBA_USER",m="HSLA_USER",y='
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n
\n
';function F(e,t,r){return e?e instanceof HTMLElement?e:e instanceof NodeList?e[0]:"string"==typeof e?document.querySelector(e):e.jquery?e.get(0):r?t:null:t}function A(e){var t=e.getContext("2d"),r=+e.width,n=+e.height,i=t.createLinearGradient(1,1,1,n-1);return i.addColorStop(0,"white"),i.addColorStop(1,"black"),{setHue:function(e){var o=t.createLinearGradient(0,0,r-1,0);o.addColorStop(0,"hsla("+e+", 100%, 50%, 0)"),o.addColorStop(1,"hsla("+e+", 100%, 50%, 1)"),t.fillStyle=i,t.fillRect(0,0,r,n),t.fillStyle=o,t.globalCompositeOperation="multiply",t.fillRect(0,0,r,n),t.globalCompositeOperation="source-over"},grabColor:function(e,r){return t.getImageData(e,r,1,1).data},findColor:function(e,i,o){for(var s=4*r,a=t.getImageData(0,0,r,n).data,l=[-1,-1],c=0;c2&&void 0!==arguments[2]?arguments[2]:"acp-";if(t.hasAttribute(r+"show-hsl")&&(e.showHSL=k(t.getAttribute(r+"show-hsl"),p.showHSL,!0)),t.hasAttribute(r+"show-rgb")&&(e.showRGB=k(t.getAttribute(r+"show-rgb"),p.showRGB,!0)),t.hasAttribute(r+"show-hex")&&(e.showHEX=k(t.getAttribute(r+"show-hex"),p.showHEX,!0)),t.hasAttribute(r+"show-alpha")&&(e.showAlpha=k(t.getAttribute(r+"show-alpha"),p.showAlpha,!0)),t.hasAttribute(r+"palette-editable")&&(e.paletteEditable=k(t.getAttribute(r+"palette-editable"),p.paletteEditable,!0)),t.hasAttribute(r+"palette")){var n=t.getAttribute(r+"palette");switch(n){case"PALETTE_MATERIAL_500":e.palette=s.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":case"":e.palette=s.PALETTE_MATERIAL_CHROME;break;default:e.palette=n.split(/[;\|]/)}}t.hasAttribute(r+"color")&&(e.color=t.getAttribute(r+"color"))}(this.options,t),this.H=0,this.S=0,this.L=0,this.R=0,this.G=0,this.B=0,this.A=1,this.palette={},this.element=document.createElement("div"),this.options.id&&(this.element.id=this.options.id),this.element.className="a-color-picker",this.options.showRGB||(this.element.className+=" hide-rgb"),this.options.showHSL||(this.element.className+=" hide-hsl"),this.options.showHEX||(this.element.className+=" hide-single-input"),this.options.showAlpha||(this.element.className+=" hide-alpha"),this.element.innerHTML=y,t.appendChild(this.element);var n=this.element.querySelector(".a-color-picker-h");this.setupHueCanvas(n),this.hueBarHelper=A(n),this.huePointer=this.element.querySelector(".a-color-picker-h+.a-color-picker-dot");var i=this.element.querySelector(".a-color-picker-sl");this.setupSlCanvas(i),this.slBarHelper=A(i),this.slPointer=this.element.querySelector(".a-color-picker-sl+.a-color-picker-dot"),this.preview=this.element.querySelector(".a-color-picker-preview"),this.setupClipboard(this.preview.querySelector(".a-color-picker-clipbaord")),this.setupInput(this.inputH=this.element.querySelector(".a-color-picker-hsl>input[name=H]")),this.setupInput(this.inputS=this.element.querySelector(".a-color-picker-hsl>input[name=S]")),this.setupInput(this.inputL=this.element.querySelector(".a-color-picker-hsl>input[name=L]")),this.setupInput(this.inputR=this.element.querySelector(".a-color-picker-rgb>input[name=R]")),this.setupInput(this.inputG=this.element.querySelector(".a-color-picker-rgb>input[name=G]")),this.setupInput(this.inputB=this.element.querySelector(".a-color-picker-rgb>input[name=B]")),this.setupInput(this.inputRGBHEX=this.element.querySelector("input[name=RGBHEX]")),this.setPalette(this.element.querySelector(".a-color-picker-palette")),this.setupAlphaCanvas(this.element.querySelector(".a-color-picker-a")),this.alphaPointer=this.element.querySelector(".a-color-picker-a+.a-color-picker-dot"),this.onValueChanged(v,this.options.color)}return o(e,[{key:"setupHueCanvas",value:function(e){var t=this;e.width=g[0],e.height=g[1];for(var r=e.getContext("2d"),n=r.createLinearGradient(0,0,g[0],0),i=0;i<=1;i+=1/360)n.addColorStop(i,"hsl("+360*i+", 100%, 50%)");r.fillStyle=n,r.fillRect(0,0,g[0],g[1]);var o=function(r){var n=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,g[0]),i=Math.round(360*n/g[0]);t.huePointer.style.left=n-7+"px",t.onValueChanged("H",i)},a=function e(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){o(e),document.addEventListener("mousemove",o),document.addEventListener("mouseup",a)})}},{key:"setupSlCanvas",value:function(e){var t=this;e.width=d[0],e.height=d[1];var r=function(r){var n=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,d[0]-1),i=(0,s.limit)(r.clientY-e.getBoundingClientRect().top,0,d[1]-1),o=t.slBarHelper.grabColor(n,i);t.slPointer.style.left=n-7+"px",t.slPointer.style.top=i-7+"px",t.onValueChanged("RGB",o)},n=function e(){document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){r(e),document.addEventListener("mousemove",r),document.addEventListener("mouseup",n)})}},{key:"setupAlphaCanvas",value:function(e){var t=this;e.width=f[0],e.height=f[1];var r=e.getContext("2d"),n=r.createLinearGradient(0,0,e.width-1,0);n.addColorStop(0,"hsla(0, 0%, 50%, 0)"),n.addColorStop(1,"hsla(0, 0%, 50%, 1)"),r.fillStyle=n,r.fillRect(0,0,f[0],f[1]);var i=function(r){var n=(0,s.limit)(r.clientX-e.getBoundingClientRect().left,0,f[0]),i=+(n/f[0]).toFixed(2);t.alphaPointer.style.left=n-7+"px",t.onValueChanged("ALPHA",i)},o=function e(){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e)};e.addEventListener("mousedown",function(e){i(e),document.addEventListener("mousemove",i),document.addEventListener("mouseup",o)})}},{key:"setupInput",value:function(e){var t=this,r=+e.min,n=+e.max,i=e.name;e.hasAttribute("select-on-focus")&&e.addEventListener("focus",function(){e.select()}),"text"===e.type?e.addEventListener("change",function(){t.onValueChanged(i,e.value)}):((u||h)&&e.addEventListener("keydown",function(o){"Up"===o.key?(e.value=(0,s.limit)(+e.value+1,r,n),t.onValueChanged(i,e.value),o.returnValue=!1):"Down"===o.key&&(e.value=(0,s.limit)(+e.value-1,r,n),t.onValueChanged(i,e.value),o.returnValue=!1)}),e.addEventListener("change",function(){var o=+e.value;t.onValueChanged(i,(0,s.limit)(o,r,n))}))}},{key:"setupClipboard",value:function(e){var t=this;e.title="click to copy",e.addEventListener("click",function(){e.value=(0,s.parseColor)([t.R,t.G,t.B,t.A],"hexcss4"),e.select(),document.execCommand("copy")})}},{key:"setPalette",value:function(e){var t=this,r="auto"===this.options.useAlphaInPalette?this.options.showAlpha:this.options.useAlphaInPalette,n=(0,s.ensureArray)(this.options.palette);if(this.options.paletteEditable||n.length>0){var i=function(r,n,i){var o=e.querySelector('.a-color-picker-palette-color[data-color="'+r+'"]')||document.createElement("div");o.className="a-color-picker-palette-color",o.style.backgroundColor=r,o.setAttribute("data-color",r),o.title=r,e.insertBefore(o,n),t.palette[r]=!0,i&&t.onPaletteColorAdd(r)},o=function(r,n){r?(e.removeChild(r),t.palette[r.getAttribute("data-color")]=!1,n&&t.onPaletteColorRemove(r.getAttribute("data-color"))):(e.querySelectorAll(".a-color-picker-palette-color[data-color]").forEach(function(t){e.removeChild(t)}),Object.keys(t.palette).forEach(function(e){t.palette[e]=!1}),n&&t.onPaletteColorRemove())};if(n.map(function(e){return(0,s.parseColor)(e,r?"rgbcss4":"hex")}).filter(function(e){return!!e}).forEach(function(e){return i(e)}),this.options.paletteEditable){var a=document.createElement("div");a.className="a-color-picker-palette-color a-color-picker-palette-add",a.innerHTML="+",e.appendChild(a),e.addEventListener("click",function(e){/a-color-picker-palette-add/.test(e.target.className)?e.shiftKey?o(null,!0):i(r?(0,s.parseColor)([t.R,t.G,t.B,t.A],"rgbcss4"):(0,s.rgbToHex)(t.R,t.G,t.B),e.target,!0):/a-color-picker-palette-color/.test(e.target.className)&&(e.shiftKey?o(e.target,!0):t.onValueChanged(v,e.target.getAttribute("data-color")))})}else e.addEventListener("click",function(e){/a-color-picker-palette-color/.test(e.target.className)&&t.onValueChanged(v,e.target.getAttribute("data-color"))})}else e.style.display="none"}},{key:"onValueChanged",value:function(e,t){switch(e){case"H":this.H=t;var r=(0,s.hslToRgb)(this.H,this.S,this.L),n=i(r,3);this.R=n[0],this.G=n[1],this.B=n[2],this.slBarHelper.setHue(t),this.updatePointerH(this.H),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"S":this.S=t;var o=(0,s.hslToRgb)(this.H,this.S,this.L),a=i(o,3);this.R=a[0],this.G=a[1],this.B=a[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"L":this.L=t;var l=(0,s.hslToRgb)(this.H,this.S,this.L),c=i(l,3);this.R=c[0],this.G=c[1],this.B=c[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"R":this.R=t;var u=(0,s.rgbToHsl)(this.R,this.G,this.B),h=i(u,3);this.H=h[0],this.S=h[1],this.L=h[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"G":this.G=t;var p=(0,s.rgbToHsl)(this.R,this.G,this.B),d=i(p,3);this.H=d[0],this.S=d[1],this.L=d[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"B":this.B=t;var g=(0,s.rgbToHsl)(this.R,this.G,this.B),f=i(g,3);this.H=f[0],this.S=f[1],this.L=f[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"RGB":var y=i(t,3);this.R=y[0],this.G=y[1],this.B=y[2];var F=(0,s.rgbToHsl)(this.R,this.G,this.B),A=i(F,3);this.H=A[0],this.S=A[1],this.L=A[2],this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case b:var k=i(t,4);this.R=k[0],this.G=k[1],this.B=k[2],this.A=k[3];var E=(0,s.rgbToHsl)(this.R,this.G,this.B),H=i(E,3);this.H=H[0],this.S=H[1],this.L=H[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case m:var C=i(t,4);this.H=C[0],this.S=C[1],this.L=C[2],this.A=C[3];var R=(0,s.hslToRgb)(this.H,this.S,this.L),B=i(R,3);this.R=B[0],this.G=B[1],this.B=B[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"RGBHEX":var L=(0,s.cssColorToRgb)(t)||[this.R,this.G,this.B],x=i(L,3);this.R=x[0],this.G=x[1],this.B=x[2];var S=(0,s.rgbToHsl)(this.R,this.G,this.B),w=i(S,3);this.H=w[0],this.S=w[1],this.L=w[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B);break;case v:var T=(0,s.parseColor)(t,"rgba")||[0,0,0,1],G=i(T,4);this.R=G[0],this.G=G[1],this.B=G[2],this.A=G[3];var I=(0,s.rgbToHsl)(this.R,this.G,this.B),P=i(I,3);this.H=P[0],this.S=P[1],this.L=P[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"ALPHA":this.A=t}this.onColorChanged(this.R,this.G,this.B,this.A)}},{key:"onColorChanged",value:function(e,t,r,n){this.preview.style.backgroundColor=1===n?"rgb("+e+","+t+","+r+")":"rgba("+e+","+t+","+r+","+n+")",this.onchange&&this.onchange(this.preview.style.backgroundColor)}},{key:"onPaletteColorAdd",value:function(e){this.oncoloradd&&this.oncoloradd(e)}},{key:"onPaletteColorRemove",value:function(e){this.oncolorremove&&this.oncolorremove(e)}},{key:"updateInputHSL",value:function(e,t,r){this.inputH.value=e,this.inputS.value=t,this.inputL.value=r}},{key:"updateInputRGB",value:function(e,t,r){this.inputR.value=e,this.inputG.value=t,this.inputB.value=r}},{key:"updateInputRGBHEX",value:function(e,t,r){this.inputRGBHEX.value=(0,s.rgbToHex)(e,t,r)}},{key:"updatePointerH",value:function(e){var t=g[0]*e/360;this.huePointer.style.left=t-7+"px"}},{key:"updatePointerSL",value:function(e,t,r){var n=(0,s.hslToRgb)(e,t,r),o=i(n,3),a=o[0],l=o[1],c=o[2],u=this.slBarHelper.findColor(a,l,c),h=i(u,2),p=h[0],d=h[1];p>=0&&(this.slPointer.style.left=p-7+"px",this.slPointer.style.top=d-7+"px")}},{key:"updatePointerA",value:function(e){var t=f[0]*e;this.alphaPointer.style.left=t-7+"px"}}]),e}(),H=function(){function e(t){l(this,e),this.name=t,this.listeners=[]}return o(e,[{key:"on",value:function(e){e&&this.listeners.push(e)}},{key:"off",value:function(e){this.listeners=e?this.listeners.filter(function(t){return t!==e}):[]}},{key:"emit",value:function(e,t){for(var r=this.listeners.slice(0),n=0;nstyle[data-source="a-color-picker"]')){var R=r(3).toString(),B=document.createElement("style");B.setAttribute("type","text/css"),B.setAttribute("data-source","a-color-picker"),B.innerHTML=R,document.querySelector("head").appendChild(B)}t.createPicker=C,t.from=function(e,t){var r=function(e){return e?Array.isArray(e)?e:e instanceof HTMLElement?[e]:e instanceof NodeList?[].concat(c(e)):"string"==typeof e?[].concat(c(document.querySelectorAll(e))):e.jquery?e.get():[]:[]}(e).map(function(e,r){var n=C(e,t);return n.index=r,n});return r.on=function(e,t){return r.forEach(function(r){return r.on(e,t)}),this},r.off=function(e){return r.forEach(function(t){return t.off(e)}),this},r},t.parseColorToRgb=s.parseColorToRgb,t.parseColorToRgba=s.parseColorToRgba,t.parseColorToHsl=s.parseColorToHsl,t.parseColorToHsla=s.parseColorToHsla,t.parseColor=s.parseColor,t.rgbToHex=s.rgbToHex,t.hslToRgb=s.hslToRgb,t.rgbToHsl=s.rgbToHsl,t.rgbToInt=s.rgbToInt,t.intToRgb=s.intToRgb,t.getLuminance=s.getLuminance,t.COLOR_NAMES=s.COLOR_NAMES,t.PALETTE_MATERIAL_500=s.PALETTE_MATERIAL_500,t.PALETTE_MATERIAL_CHROME=s.PALETTE_MATERIAL_CHROME,t.VERSION="1.1.3"}])}); \ No newline at end of file diff --git a/docs/docs.js b/docs/docs.js index 609867d..be24791 100644 --- a/docs/docs.js +++ b/docs/docs.js @@ -17,5 +17,5 @@ * * Copyright (c) 2017-2018, Gianfranco Caldi. * Released under the MIT License. - */var p="undefined"!=typeof window&&window.navigator.userAgent.indexOf("Edge")>-1,h="undefined"!=typeof window&&window.navigator.userAgent.indexOf("rv:")>-1,d={id:null,attachTo:"body",showHSL:!0,showRGB:!0,showHEX:!0,showAlpha:!1,color:"#ff0000",palette:null,paletteEditable:!1,useAlphaInPalette:"auto"},f=[200,150],g=[150,16],b=g,v="COLOR",m="RGBA_USER",y="HSLA_USER",E='
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n
\n
';function A(t,e,n){return t?t instanceof HTMLElement?t:t instanceof NodeList?t[0]:"string"==typeof t?document.querySelector(t):t.jquery?t.get(0):n?e:null:e}function F(t){var e=t.getContext("2d"),n=+t.width,r=+t.height,o=e.createLinearGradient(1,1,1,r-1);return o.addColorStop(0,"white"),o.addColorStop(1,"black"),{setHue:function(t){var i=e.createLinearGradient(0,0,n-1,0);i.addColorStop(0,"hsla("+t+", 100%, 50%, 0)"),i.addColorStop(1,"hsla("+t+", 100%, 50%, 1)"),e.fillStyle=o,e.fillRect(0,0,n,r),e.fillStyle=i,e.globalCompositeOperation="multiply",e.fillRect(0,0,n,r),e.globalCompositeOperation="source-over"},grabColor:function(t,n){return e.getImageData(t,n,1,1).data},findColor:function(t,o,i){for(var s=4*n,a=e.getImageData(0,0,n,r).data,l=[-1,-1],c=0;c2&&void 0!==arguments[2]?arguments[2]:"acp-";if(e.hasAttribute(n+"show-hsl")&&(t.showHSL=C(e.getAttribute(n+"show-hsl"),d.showHSL,!0)),e.hasAttribute(n+"show-rgb")&&(t.showRGB=C(e.getAttribute(n+"show-rgb"),d.showRGB,!0)),e.hasAttribute(n+"show-hex")&&(t.showHEX=C(e.getAttribute(n+"show-hex"),d.showHEX,!0)),e.hasAttribute(n+"show-alpha")&&(t.showAlpha=C(e.getAttribute(n+"show-alpha"),d.showAlpha,!0)),e.hasAttribute(n+"palette-editable")&&(t.paletteEditable=C(e.getAttribute(n+"palette-editable"),d.paletteEditable,!0)),e.hasAttribute(n+"palette")){var r=e.getAttribute(n+"palette");switch(r){case"PALETTE_MATERIAL_500":t.palette=s.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":case"":t.palette=s.PALETTE_MATERIAL_CHROME;break;default:t.palette=r.split(/[;\|]/)}}e.hasAttribute(n+"color")&&(t.color=e.getAttribute(n+"color"))}(this.options,e),this.H=0,this.S=0,this.L=0,this.R=0,this.G=0,this.B=0,this.A=1,this.palette={},this.element=document.createElement("div"),this.options.id&&(this.element.id=this.options.id),this.element.className="a-color-picker",this.options.showRGB||(this.element.className+=" hide-rgb"),this.options.showHSL||(this.element.className+=" hide-hsl"),this.options.showHEX||(this.element.className+=" hide-single-input"),this.options.showAlpha||(this.element.className+=" hide-alpha"),this.element.innerHTML=E,e.appendChild(this.element);var r=this.element.querySelector(".a-color-picker-h");this.setupHueCanvas(r),this.hueBarHelper=F(r),this.huePointer=this.element.querySelector(".a-color-picker-h+.a-color-picker-dot");var o=this.element.querySelector(".a-color-picker-sl");this.setupSlCanvas(o),this.slBarHelper=F(o),this.slPointer=this.element.querySelector(".a-color-picker-sl+.a-color-picker-dot"),this.preview=this.element.querySelector(".a-color-picker-preview"),this.setupClipboard(this.preview.querySelector(".a-color-picker-clipbaord")),this.setupInput(this.inputH=this.element.querySelector(".a-color-picker-hsl>input[name=H]")),this.setupInput(this.inputS=this.element.querySelector(".a-color-picker-hsl>input[name=S]")),this.setupInput(this.inputL=this.element.querySelector(".a-color-picker-hsl>input[name=L]")),this.setupInput(this.inputR=this.element.querySelector(".a-color-picker-rgb>input[name=R]")),this.setupInput(this.inputG=this.element.querySelector(".a-color-picker-rgb>input[name=G]")),this.setupInput(this.inputB=this.element.querySelector(".a-color-picker-rgb>input[name=B]")),this.setupInput(this.inputRGBHEX=this.element.querySelector("input[name=RGBHEX]")),this.setPalette(this.element.querySelector(".a-color-picker-palette")),this.setupAlphaCanvas(this.element.querySelector(".a-color-picker-a")),this.alphaPointer=this.element.querySelector(".a-color-picker-a+.a-color-picker-dot"),this.onValueChanged(v,this.options.color)}return i(t,[{key:"setupHueCanvas",value:function(t){var e=this;t.width=g[0],t.height=g[1];for(var n=t.getContext("2d"),r=n.createLinearGradient(0,0,g[0],0),o=0;o<=1;o+=1/360)r.addColorStop(o,"hsl("+360*o+", 100%, 50%)");n.fillStyle=r,n.fillRect(0,0,g[0],g[1]);var i=function(n){var r=(0,s.limit)(n.clientX-t.getBoundingClientRect().left,0,g[0]),o=Math.round(360*r/g[0]);e.huePointer.style.left=r-7+"px",e.onValueChanged("H",o)},a=function t(){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",t)};t.addEventListener("mousedown",function(t){i(t),document.addEventListener("mousemove",i),document.addEventListener("mouseup",a)})}},{key:"setupSlCanvas",value:function(t){var e=this;t.width=f[0],t.height=f[1];var n=function(n){var r=(0,s.limit)(n.clientX-t.getBoundingClientRect().left,0,f[0]-1),o=(0,s.limit)(n.clientY-t.getBoundingClientRect().top,0,f[1]-1),i=e.slBarHelper.grabColor(r,o);e.slPointer.style.left=r-7+"px",e.slPointer.style.top=o-7+"px",e.onValueChanged("RGB",i)},r=function t(){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",t)};t.addEventListener("mousedown",function(t){n(t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",r)})}},{key:"setupAlphaCanvas",value:function(t){var e=this;t.width=b[0],t.height=b[1];var n=t.getContext("2d"),r=n.createLinearGradient(0,0,t.width-1,0);r.addColorStop(0,"hsla(0, 0%, 50%, 0)"),r.addColorStop(1,"hsla(0, 0%, 50%, 1)"),n.fillStyle=r,n.fillRect(0,0,b[0],b[1]);var o=function(n){var r=(0,s.limit)(n.clientX-t.getBoundingClientRect().left,0,b[0]),o=+(r/b[0]).toFixed(2);e.alphaPointer.style.left=r-7+"px",e.onValueChanged("ALPHA",o)},i=function t(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",t)};t.addEventListener("mousedown",function(t){o(t),document.addEventListener("mousemove",o),document.addEventListener("mouseup",i)})}},{key:"setupInput",value:function(t){var e=this,n=+t.min,r=+t.max,o=t.name;t.hasAttribute("select-on-focus")&&t.addEventListener("focus",function(){t.select()}),"text"===t.type?t.addEventListener("change",function(){e.onValueChanged(o,t.value)}):((p||h)&&t.addEventListener("keydown",function(i){"Up"===i.key?(t.value=(0,s.limit)(+t.value+1,n,r),e.onValueChanged(o,t.value),i.returnValue=!1):"Down"===i.key&&(t.value=(0,s.limit)(+t.value-1,n,r),e.onValueChanged(o,t.value),i.returnValue=!1)}),t.addEventListener("change",function(){var i=+t.value;e.onValueChanged(o,(0,s.limit)(i,n,r))}))}},{key:"setupClipboard",value:function(t){var e=this;t.title="click to copy",t.addEventListener("click",function(){t.value=(0,s.parseColor)([e.R,e.G,e.B,e.A],"hexcss4"),t.select(),document.execCommand("copy")})}},{key:"setPalette",value:function(t){var e=this,n="auto"===this.options.useAlphaInPalette?this.options.showAlpha:this.options.useAlphaInPalette,r=(0,s.ensureArray)(this.options.palette);if(this.options.paletteEditable||r.length>0){var o=function(n,r,o){var i=t.querySelector('.a-color-picker-palette-color[data-color="'+n+'"]')||document.createElement("div");i.className="a-color-picker-palette-color",i.style.backgroundColor=n,i.setAttribute("data-color",n),i.title=n,t.insertBefore(i,r),e.palette[n]=!0,o&&e.onPaletteColorAdd(n)},i=function(n,r){n?(t.removeChild(n),e.palette[n.getAttribute("data-color")]=!1,r&&e.onPaletteColorRemove(n.getAttribute("data-color"))):(t.querySelectorAll(".a-color-picker-palette-color[data-color]").forEach(function(e){t.removeChild(e)}),Object.keys(e.palette).forEach(function(t){e.palette[t]=!1}),r&&e.onPaletteColorRemove())};if(r.map(function(t){return(0,s.parseColor)(t,n?"rgbcss4":"hex")}).filter(function(t){return!!t}).forEach(function(t){return o(t)}),this.options.paletteEditable){var a=document.createElement("div");a.className="a-color-picker-palette-color a-color-picker-palette-add",a.innerHTML="+",t.appendChild(a),t.addEventListener("click",function(t){/a-color-picker-palette-add/.test(t.target.className)?t.shiftKey?i(null,!0):o(n?(0,s.parseColor)([e.R,e.G,e.B,e.A],"rgbcss4"):(0,s.rgbToHex)(e.R,e.G,e.B),t.target,!0):/a-color-picker-palette-color/.test(t.target.className)&&(t.shiftKey?i(t.target,!0):e.onValueChanged(v,t.target.getAttribute("data-color")))})}else t.addEventListener("click",function(t){/a-color-picker-palette-color/.test(t.target.className)&&e.onValueChanged(v,t.target.getAttribute("data-color"))})}else t.style.display="none"}},{key:"onValueChanged",value:function(t,e){switch(t){case"H":this.H=e;var n=(0,s.hslToRgb)(this.H,this.S,this.L),r=o(n,3);this.R=r[0],this.G=r[1],this.B=r[2],this.slBarHelper.setHue(e),this.updatePointerH(this.H),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"S":this.S=e;var i=(0,s.hslToRgb)(this.H,this.S,this.L),a=o(i,3);this.R=a[0],this.G=a[1],this.B=a[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"L":this.L=e;var l=(0,s.hslToRgb)(this.H,this.S,this.L),c=o(l,3);this.R=c[0],this.G=c[1],this.B=c[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"R":this.R=e;var u=(0,s.rgbToHsl)(this.R,this.G,this.B),p=o(u,3);this.H=p[0],this.S=p[1],this.L=p[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"G":this.G=e;var h=(0,s.rgbToHsl)(this.R,this.G,this.B),d=o(h,3);this.H=d[0],this.S=d[1],this.L=d[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"B":this.B=e;var f=(0,s.rgbToHsl)(this.R,this.G,this.B),g=o(f,3);this.H=g[0],this.S=g[1],this.L=g[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"RGB":var b=o(e,3);this.R=b[0],this.G=b[1],this.B=b[2];var E=(0,s.rgbToHsl)(this.R,this.G,this.B),A=o(E,3);this.H=A[0],this.S=A[1],this.L=A[2],this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case m:var F=o(e,4);this.R=F[0],this.G=F[1],this.B=F[2],this.A=F[3];var C=(0,s.rgbToHsl)(this.R,this.G,this.B),x=o(C,3);this.H=x[0],this.S=x[1],this.L=x[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case y:var k=o(e,4);this.H=k[0],this.S=k[1],this.L=k[2],this.A=k[3];var w=(0,s.hslToRgb)(this.H,this.S,this.L),H=o(w,3);this.R=H[0],this.G=H[1],this.B=H[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"RGBHEX":var B=(0,s.cssColorToRgb)(e)||[this.R,this.G,this.B],R=o(B,3);this.R=R[0],this.G=R[1],this.B=R[2];var L=(0,s.rgbToHsl)(this.R,this.G,this.B),S=o(L,3);this.H=S[0],this.S=S[1],this.L=S[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B);break;case v:var T=(0,s.parseColor)(e,"rgba")||[0,0,0,1],G=o(T,4);this.R=G[0],this.G=G[1],this.B=G[2],this.A=G[3];var I=(0,s.rgbToHsl)(this.R,this.G,this.B),D=o(I,3);this.H=D[0],this.S=D[1],this.L=D[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"ALPHA":this.A=e}this.onColorChanged(this.R,this.G,this.B,this.A)}},{key:"onColorChanged",value:function(t,e,n,r){this.preview.style.backgroundColor=1===r?"rgb("+t+","+e+","+n+")":"rgba("+t+","+e+","+n+","+r+")",this.onchange&&this.onchange(this.preview.style.backgroundColor)}},{key:"onPaletteColorAdd",value:function(t){this.oncoloradd&&this.oncoloradd(t)}},{key:"onPaletteColorRemove",value:function(t){this.oncolorremove&&this.oncolorremove(t)}},{key:"updateInputHSL",value:function(t,e,n){this.inputH.value=t,this.inputS.value=e,this.inputL.value=n}},{key:"updateInputRGB",value:function(t,e,n){this.inputR.value=t,this.inputG.value=e,this.inputB.value=n}},{key:"updateInputRGBHEX",value:function(t,e,n){this.inputRGBHEX.value=(0,s.rgbToHex)(t,e,n)}},{key:"updatePointerH",value:function(t){var e=g[0]*t/360;this.huePointer.style.left=e-7+"px"}},{key:"updatePointerSL",value:function(t,e,n){var r=(0,s.hslToRgb)(t,e,n),i=o(r,3),a=i[0],l=i[1],c=i[2],u=this.slBarHelper.findColor(a,l,c),p=o(u,2),h=p[0],d=p[1];h>=0&&(this.slPointer.style.left=h-7+"px",this.slPointer.style.top=d-7+"px")}},{key:"updatePointerA",value:function(t){var e=b[0]*t;this.alphaPointer.style.left=e-7+"px"}}]),t}(),k=function(){function t(e){c(this,t),this.name=e,this.listeners=[]}return i(t,[{key:"on",value:function(t){t&&this.listeners.push(t)}},{key:"off",value:function(t){this.listeners=t?this.listeners.filter(function(e){return e!==t}):[]}},{key:"emit",value:function(t,e){for(var n=this.listeners.slice(0),r=0;rstyle[data-source="a-color-picker"]')){var H=n(3).toString(),B=document.createElement("style");B.setAttribute("type","text/css"),B.setAttribute("data-source","a-color-picker"),B.innerHTML=H,document.querySelector("head").appendChild(B)}e.createPicker=w,e.from=function(t,e){var n=function(t){return t?Array.isArray(t)?t:t instanceof HTMLElement?[t]:t instanceof NodeList?[].concat(u(t)):"string"==typeof t?[].concat(u(document.querySelectorAll(t))):t.jquery?t.get():[]:[]}(t).map(function(t,n){var r=w(t,e);return r.index=n,r});return n.on=function(t,e){return n.forEach(function(n){return n.on(t,e)}),this},n.off=function(t){return n.forEach(function(e){return e.off(t)}),this},n},e.parseColorToRgb=s.parseColorToRgb,e.parseColorToRgba=s.parseColorToRgba,e.parseColorToHsl=s.parseColorToHsl,e.parseColorToHsla=s.parseColorToHsla,e.parseColor=s.parseColor,e.rgbToHex=s.rgbToHex,e.hslToRgb=s.hslToRgb,e.rgbToHsl=s.rgbToHsl,e.rgbToInt=s.rgbToInt,e.intToRgb=s.intToRgb,e.getLuminance=s.getLuminance,e.COLOR_NAMES=s.COLOR_NAMES,e.PALETTE_MATERIAL_500=s.PALETTE_MATERIAL_500,e.PALETTE_MATERIAL_CHROME=s.PALETTE_MATERIAL_CHROME,e.VERSION="1.1.2"},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var o,i=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?t:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(t,e,n){var r,o,i={},s=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),a=function(t){var e={};return function(t){if("function"==typeof t)return t();if(void 0===e[t]){var n=function(t){return document.querySelector(t)}.call(this,t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}}(),l=null,c=0,u=[],p=n(7);function h(t,e){for(var n=0;n=0&&u.splice(e,1)}function b(t){var e=document.createElement("style");return void 0===t.attrs.type&&(t.attrs.type="text/css"),v(e,t.attrs),f(t,e),e}function v(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function m(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i=e.transform(t.css)))return function(){};t.css=i}if(e.singleton){var s=c++;n=l||(l=b(e)),r=A.bind(null,n,s,!1),o=A.bind(null,n,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",v(e,t.attrs),f(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=p(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}.bind(null,n,e),o=function(){g(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){g(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=d(t,e);return h(n,e),function(t){for(var r=[],o=0;oh1 {\n\tpadding: 8px 4px;\n\tmargin: 0;\n\tletter-spacing: .1em;\n\tfont-size: 3em;\n\tcolor: var(--color-light);\n}\n\n.title>h1.logo {\n\tpadding: 4px 0 11px 38px;\n}\n\n.avatar {\n\tborder-radius: 4px;\n\tvertical-align: text-top;\n\tobject-fit: cover;\n width: 100%;\n\tmax-height: 6.6em;\n opacity: .3;\n filter: grayscale(100%);\n -webkit-filter: grayscale(100%);\t\n}\n\n.badges {\n\tpadding: 4px;\n}\n\n.badges a {\n\ttext-decoration: none;\n}\n\n.content>nav a {\n color: var(--color-light);\n}\n\n.content>nav>ul {\n\tposition: sticky;\n\tposition: -webkit-sticky;\n\ttop: 0px;\n\tlist-style: none;\n\tpadding: 0;\n}\n\n.content>nav>ul>li::before {\n\tcontent: '> ';\n\tcolor: #dedede;\n}\n\n.content>nav>ul>li>ul {\n\tfont-size: .8em;\n\ttop: 0px;\n\tlist-style: none;\n\tpadding: 0 0 0 .8em;\n}\n\n.content>.pens>section {\n\tbackground-color: #fafafa;\n\tmargin: 16px 8px;\n\tpadding: 8px 24px;\n\tborder-radius: 2px;\n}\n\n.content>.pens>section>h3::before {\n\tcontent: '> ';\n\tcolor: #dedede;\n}\n\ntable.detail {\n\twidth: 100%;\n\tborder-collapse: collapse;\n}\n\ntable.detail th {\n\tfont-size: .85em;\n\ttext-align: left;\n\tpadding-top: 16px;\n}\n\ntable.detail td {\n\tvertical-align: top;\n\tborder-bottom: solid 1px #ededed;\n\tmax-width: 14em;\n\tpadding: 4px 0px;\n}\n\ntable.detail tbody,\ntable.detail tbody>tr {\n\ttransition: background-color .4s ease;\n}\n\ntable.detail.hover-on-row tbody>tr:hover,\ntable.detail.hover-on-body tbody:hover {\n\tbackground-color: #efefef;\n}\n\n@media (min-width: 68em) {\n\thtml {\n\t\tfont-size: 18px;\n\t}\n}\n\n@media (max-height: 400px) {\n\t.content>nav>ul {\n\t\tposition: relative;\n\t}\t\n}",""])},function(t,e,n){var r=n(10);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};n(8)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){"use strict";n(11);var r=n(6),o=document.querySelector(".title");r.from(".picker").on("change",function(t,e){console.log(e),o.style.backgroundColor=e,r.getLuminance.apply(r,function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e-1,h="undefined"!=typeof window&&window.navigator.userAgent.indexOf("rv:")>-1,d={id:null,attachTo:"body",showHSL:!0,showRGB:!0,showHEX:!0,showAlpha:!1,color:"#ff0000",palette:null,paletteEditable:!1,useAlphaInPalette:"auto"},f=[200,150],g=[150,16],b=g,v="COLOR",m="RGBA_USER",y="HSLA_USER",E='
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n
\n
';function A(t,e,n){return t?t instanceof HTMLElement?t:t instanceof NodeList?t[0]:"string"==typeof t?document.querySelector(t):t.jquery?t.get(0):n?e:null:e}function F(t){var e=t.getContext("2d"),n=+t.width,r=+t.height,o=e.createLinearGradient(1,1,1,r-1);return o.addColorStop(0,"white"),o.addColorStop(1,"black"),{setHue:function(t){var i=e.createLinearGradient(0,0,n-1,0);i.addColorStop(0,"hsla("+t+", 100%, 50%, 0)"),i.addColorStop(1,"hsla("+t+", 100%, 50%, 1)"),e.fillStyle=o,e.fillRect(0,0,n,r),e.fillStyle=i,e.globalCompositeOperation="multiply",e.fillRect(0,0,n,r),e.globalCompositeOperation="source-over"},grabColor:function(t,n){return e.getImageData(t,n,1,1).data},findColor:function(t,o,i){for(var s=4*n,a=e.getImageData(0,0,n,r).data,l=[-1,-1],c=0;c2&&void 0!==arguments[2]?arguments[2]:"acp-";if(e.hasAttribute(n+"show-hsl")&&(t.showHSL=C(e.getAttribute(n+"show-hsl"),d.showHSL,!0)),e.hasAttribute(n+"show-rgb")&&(t.showRGB=C(e.getAttribute(n+"show-rgb"),d.showRGB,!0)),e.hasAttribute(n+"show-hex")&&(t.showHEX=C(e.getAttribute(n+"show-hex"),d.showHEX,!0)),e.hasAttribute(n+"show-alpha")&&(t.showAlpha=C(e.getAttribute(n+"show-alpha"),d.showAlpha,!0)),e.hasAttribute(n+"palette-editable")&&(t.paletteEditable=C(e.getAttribute(n+"palette-editable"),d.paletteEditable,!0)),e.hasAttribute(n+"palette")){var r=e.getAttribute(n+"palette");switch(r){case"PALETTE_MATERIAL_500":t.palette=s.PALETTE_MATERIAL_500;break;case"PALETTE_MATERIAL_CHROME":case"":t.palette=s.PALETTE_MATERIAL_CHROME;break;default:t.palette=r.split(/[;\|]/)}}e.hasAttribute(n+"color")&&(t.color=e.getAttribute(n+"color"))}(this.options,e),this.H=0,this.S=0,this.L=0,this.R=0,this.G=0,this.B=0,this.A=1,this.palette={},this.element=document.createElement("div"),this.options.id&&(this.element.id=this.options.id),this.element.className="a-color-picker",this.options.showRGB||(this.element.className+=" hide-rgb"),this.options.showHSL||(this.element.className+=" hide-hsl"),this.options.showHEX||(this.element.className+=" hide-single-input"),this.options.showAlpha||(this.element.className+=" hide-alpha"),this.element.innerHTML=E,e.appendChild(this.element);var r=this.element.querySelector(".a-color-picker-h");this.setupHueCanvas(r),this.hueBarHelper=F(r),this.huePointer=this.element.querySelector(".a-color-picker-h+.a-color-picker-dot");var o=this.element.querySelector(".a-color-picker-sl");this.setupSlCanvas(o),this.slBarHelper=F(o),this.slPointer=this.element.querySelector(".a-color-picker-sl+.a-color-picker-dot"),this.preview=this.element.querySelector(".a-color-picker-preview"),this.setupClipboard(this.preview.querySelector(".a-color-picker-clipbaord")),this.setupInput(this.inputH=this.element.querySelector(".a-color-picker-hsl>input[name=H]")),this.setupInput(this.inputS=this.element.querySelector(".a-color-picker-hsl>input[name=S]")),this.setupInput(this.inputL=this.element.querySelector(".a-color-picker-hsl>input[name=L]")),this.setupInput(this.inputR=this.element.querySelector(".a-color-picker-rgb>input[name=R]")),this.setupInput(this.inputG=this.element.querySelector(".a-color-picker-rgb>input[name=G]")),this.setupInput(this.inputB=this.element.querySelector(".a-color-picker-rgb>input[name=B]")),this.setupInput(this.inputRGBHEX=this.element.querySelector("input[name=RGBHEX]")),this.setPalette(this.element.querySelector(".a-color-picker-palette")),this.setupAlphaCanvas(this.element.querySelector(".a-color-picker-a")),this.alphaPointer=this.element.querySelector(".a-color-picker-a+.a-color-picker-dot"),this.onValueChanged(v,this.options.color)}return i(t,[{key:"setupHueCanvas",value:function(t){var e=this;t.width=g[0],t.height=g[1];for(var n=t.getContext("2d"),r=n.createLinearGradient(0,0,g[0],0),o=0;o<=1;o+=1/360)r.addColorStop(o,"hsl("+360*o+", 100%, 50%)");n.fillStyle=r,n.fillRect(0,0,g[0],g[1]);var i=function(n){var r=(0,s.limit)(n.clientX-t.getBoundingClientRect().left,0,g[0]),o=Math.round(360*r/g[0]);e.huePointer.style.left=r-7+"px",e.onValueChanged("H",o)},a=function t(){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",t)};t.addEventListener("mousedown",function(t){i(t),document.addEventListener("mousemove",i),document.addEventListener("mouseup",a)})}},{key:"setupSlCanvas",value:function(t){var e=this;t.width=f[0],t.height=f[1];var n=function(n){var r=(0,s.limit)(n.clientX-t.getBoundingClientRect().left,0,f[0]-1),o=(0,s.limit)(n.clientY-t.getBoundingClientRect().top,0,f[1]-1),i=e.slBarHelper.grabColor(r,o);e.slPointer.style.left=r-7+"px",e.slPointer.style.top=o-7+"px",e.onValueChanged("RGB",i)},r=function t(){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",t)};t.addEventListener("mousedown",function(t){n(t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",r)})}},{key:"setupAlphaCanvas",value:function(t){var e=this;t.width=b[0],t.height=b[1];var n=t.getContext("2d"),r=n.createLinearGradient(0,0,t.width-1,0);r.addColorStop(0,"hsla(0, 0%, 50%, 0)"),r.addColorStop(1,"hsla(0, 0%, 50%, 1)"),n.fillStyle=r,n.fillRect(0,0,b[0],b[1]);var o=function(n){var r=(0,s.limit)(n.clientX-t.getBoundingClientRect().left,0,b[0]),o=+(r/b[0]).toFixed(2);e.alphaPointer.style.left=r-7+"px",e.onValueChanged("ALPHA",o)},i=function t(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",t)};t.addEventListener("mousedown",function(t){o(t),document.addEventListener("mousemove",o),document.addEventListener("mouseup",i)})}},{key:"setupInput",value:function(t){var e=this,n=+t.min,r=+t.max,o=t.name;t.hasAttribute("select-on-focus")&&t.addEventListener("focus",function(){t.select()}),"text"===t.type?t.addEventListener("change",function(){e.onValueChanged(o,t.value)}):((p||h)&&t.addEventListener("keydown",function(i){"Up"===i.key?(t.value=(0,s.limit)(+t.value+1,n,r),e.onValueChanged(o,t.value),i.returnValue=!1):"Down"===i.key&&(t.value=(0,s.limit)(+t.value-1,n,r),e.onValueChanged(o,t.value),i.returnValue=!1)}),t.addEventListener("change",function(){var i=+t.value;e.onValueChanged(o,(0,s.limit)(i,n,r))}))}},{key:"setupClipboard",value:function(t){var e=this;t.title="click to copy",t.addEventListener("click",function(){t.value=(0,s.parseColor)([e.R,e.G,e.B,e.A],"hexcss4"),t.select(),document.execCommand("copy")})}},{key:"setPalette",value:function(t){var e=this,n="auto"===this.options.useAlphaInPalette?this.options.showAlpha:this.options.useAlphaInPalette,r=(0,s.ensureArray)(this.options.palette);if(this.options.paletteEditable||r.length>0){var o=function(n,r,o){var i=t.querySelector('.a-color-picker-palette-color[data-color="'+n+'"]')||document.createElement("div");i.className="a-color-picker-palette-color",i.style.backgroundColor=n,i.setAttribute("data-color",n),i.title=n,t.insertBefore(i,r),e.palette[n]=!0,o&&e.onPaletteColorAdd(n)},i=function(n,r){n?(t.removeChild(n),e.palette[n.getAttribute("data-color")]=!1,r&&e.onPaletteColorRemove(n.getAttribute("data-color"))):(t.querySelectorAll(".a-color-picker-palette-color[data-color]").forEach(function(e){t.removeChild(e)}),Object.keys(e.palette).forEach(function(t){e.palette[t]=!1}),r&&e.onPaletteColorRemove())};if(r.map(function(t){return(0,s.parseColor)(t,n?"rgbcss4":"hex")}).filter(function(t){return!!t}).forEach(function(t){return o(t)}),this.options.paletteEditable){var a=document.createElement("div");a.className="a-color-picker-palette-color a-color-picker-palette-add",a.innerHTML="+",t.appendChild(a),t.addEventListener("click",function(t){/a-color-picker-palette-add/.test(t.target.className)?t.shiftKey?i(null,!0):o(n?(0,s.parseColor)([e.R,e.G,e.B,e.A],"rgbcss4"):(0,s.rgbToHex)(e.R,e.G,e.B),t.target,!0):/a-color-picker-palette-color/.test(t.target.className)&&(t.shiftKey?i(t.target,!0):e.onValueChanged(v,t.target.getAttribute("data-color")))})}else t.addEventListener("click",function(t){/a-color-picker-palette-color/.test(t.target.className)&&e.onValueChanged(v,t.target.getAttribute("data-color"))})}else t.style.display="none"}},{key:"onValueChanged",value:function(t,e){switch(t){case"H":this.H=e;var n=(0,s.hslToRgb)(this.H,this.S,this.L),r=o(n,3);this.R=r[0],this.G=r[1],this.B=r[2],this.slBarHelper.setHue(e),this.updatePointerH(this.H),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"S":this.S=e;var i=(0,s.hslToRgb)(this.H,this.S,this.L),a=o(i,3);this.R=a[0],this.G=a[1],this.B=a[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"L":this.L=e;var l=(0,s.hslToRgb)(this.H,this.S,this.L),c=o(l,3);this.R=c[0],this.G=c[1],this.B=c[2],this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"R":this.R=e;var u=(0,s.rgbToHsl)(this.R,this.G,this.B),p=o(u,3);this.H=p[0],this.S=p[1],this.L=p[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"G":this.G=e;var h=(0,s.rgbToHsl)(this.R,this.G,this.B),d=o(h,3);this.H=d[0],this.S=d[1],this.L=d[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"B":this.B=e;var f=(0,s.rgbToHsl)(this.R,this.G,this.B),g=o(f,3);this.H=g[0],this.S=g[1],this.L=g[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGBHEX(this.R,this.G,this.B);break;case"RGB":var b=o(e,3);this.R=b[0],this.G=b[1],this.B=b[2];var E=(0,s.rgbToHsl)(this.R,this.G,this.B),A=o(E,3);this.H=A[0],this.S=A[1],this.L=A[2],this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B);break;case m:var F=o(e,4);this.R=F[0],this.G=F[1],this.B=F[2],this.A=F[3];var C=(0,s.rgbToHsl)(this.R,this.G,this.B),x=o(C,3);this.H=x[0],this.S=x[1],this.L=x[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case y:var k=o(e,4);this.H=k[0],this.S=k[1],this.L=k[2],this.A=k[3];var w=(0,s.hslToRgb)(this.H,this.S,this.L),H=o(w,3);this.R=H[0],this.G=H[1],this.B=H[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"RGBHEX":var B=(0,s.cssColorToRgb)(e)||[this.R,this.G,this.B],R=o(B,3);this.R=R[0],this.G=R[1],this.B=R[2];var L=(0,s.rgbToHsl)(this.R,this.G,this.B),S=o(L,3);this.H=S[0],this.S=S[1],this.L=S[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B);break;case v:var T=(0,s.parseColor)(e,"rgba")||[0,0,0,1],G=o(T,4);this.R=G[0],this.G=G[1],this.B=G[2],this.A=G[3];var I=(0,s.rgbToHsl)(this.R,this.G,this.B),D=o(I,3);this.H=D[0],this.S=D[1],this.L=D[2],this.slBarHelper.setHue(this.H),this.updatePointerH(this.H),this.updatePointerSL(this.H,this.S,this.L),this.updateInputHSL(this.H,this.S,this.L),this.updateInputRGB(this.R,this.G,this.B),this.updateInputRGBHEX(this.R,this.G,this.B),this.updatePointerA(this.A);break;case"ALPHA":this.A=e}this.onColorChanged(this.R,this.G,this.B,this.A)}},{key:"onColorChanged",value:function(t,e,n,r){this.preview.style.backgroundColor=1===r?"rgb("+t+","+e+","+n+")":"rgba("+t+","+e+","+n+","+r+")",this.onchange&&this.onchange(this.preview.style.backgroundColor)}},{key:"onPaletteColorAdd",value:function(t){this.oncoloradd&&this.oncoloradd(t)}},{key:"onPaletteColorRemove",value:function(t){this.oncolorremove&&this.oncolorremove(t)}},{key:"updateInputHSL",value:function(t,e,n){this.inputH.value=t,this.inputS.value=e,this.inputL.value=n}},{key:"updateInputRGB",value:function(t,e,n){this.inputR.value=t,this.inputG.value=e,this.inputB.value=n}},{key:"updateInputRGBHEX",value:function(t,e,n){this.inputRGBHEX.value=(0,s.rgbToHex)(t,e,n)}},{key:"updatePointerH",value:function(t){var e=g[0]*t/360;this.huePointer.style.left=e-7+"px"}},{key:"updatePointerSL",value:function(t,e,n){var r=(0,s.hslToRgb)(t,e,n),i=o(r,3),a=i[0],l=i[1],c=i[2],u=this.slBarHelper.findColor(a,l,c),p=o(u,2),h=p[0],d=p[1];h>=0&&(this.slPointer.style.left=h-7+"px",this.slPointer.style.top=d-7+"px")}},{key:"updatePointerA",value:function(t){var e=b[0]*t;this.alphaPointer.style.left=e-7+"px"}}]),t}(),k=function(){function t(e){c(this,t),this.name=e,this.listeners=[]}return i(t,[{key:"on",value:function(t){t&&this.listeners.push(t)}},{key:"off",value:function(t){this.listeners=t?this.listeners.filter(function(e){return e!==t}):[]}},{key:"emit",value:function(t,e){for(var n=this.listeners.slice(0),r=0;rstyle[data-source="a-color-picker"]')){var H=n(3).toString(),B=document.createElement("style");B.setAttribute("type","text/css"),B.setAttribute("data-source","a-color-picker"),B.innerHTML=H,document.querySelector("head").appendChild(B)}e.createPicker=w,e.from=function(t,e){var n=function(t){return t?Array.isArray(t)?t:t instanceof HTMLElement?[t]:t instanceof NodeList?[].concat(u(t)):"string"==typeof t?[].concat(u(document.querySelectorAll(t))):t.jquery?t.get():[]:[]}(t).map(function(t,n){var r=w(t,e);return r.index=n,r});return n.on=function(t,e){return n.forEach(function(n){return n.on(t,e)}),this},n.off=function(t){return n.forEach(function(e){return e.off(t)}),this},n},e.parseColorToRgb=s.parseColorToRgb,e.parseColorToRgba=s.parseColorToRgba,e.parseColorToHsl=s.parseColorToHsl,e.parseColorToHsla=s.parseColorToHsla,e.parseColor=s.parseColor,e.rgbToHex=s.rgbToHex,e.hslToRgb=s.hslToRgb,e.rgbToHsl=s.rgbToHsl,e.rgbToInt=s.rgbToInt,e.intToRgb=s.intToRgb,e.getLuminance=s.getLuminance,e.COLOR_NAMES=s.COLOR_NAMES,e.PALETTE_MATERIAL_500=s.PALETTE_MATERIAL_500,e.PALETTE_MATERIAL_CHROME=s.PALETTE_MATERIAL_CHROME,e.VERSION="1.1.3"},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var o,i=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?t:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(t,e,n){var r,o,i={},s=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),a=function(t){var e={};return function(t){if("function"==typeof t)return t();if(void 0===e[t]){var n=function(t){return document.querySelector(t)}.call(this,t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}}(),l=null,c=0,u=[],p=n(7);function h(t,e){for(var n=0;n=0&&u.splice(e,1)}function b(t){var e=document.createElement("style");return void 0===t.attrs.type&&(t.attrs.type="text/css"),v(e,t.attrs),f(t,e),e}function v(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function m(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i=e.transform(t.css)))return function(){};t.css=i}if(e.singleton){var s=c++;n=l||(l=b(e)),r=A.bind(null,n,s,!1),o=A.bind(null,n,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",v(e,t.attrs),f(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=p(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}.bind(null,n,e),o=function(){g(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){g(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=d(t,e);return h(n,e),function(t){for(var r=[],o=0;oh1 {\n\tpadding: 8px 4px;\n\tmargin: 0;\n\tletter-spacing: .1em;\n\tfont-size: 3em;\n\tcolor: var(--color-light);\n}\n\n.title>h1.logo {\n\tpadding: 4px 0 11px 38px;\n}\n\n.avatar {\n\tborder-radius: 4px;\n\tvertical-align: text-top;\n\tobject-fit: cover;\n width: 100%;\n\tmax-height: 6.6em;\n opacity: .3;\n filter: grayscale(100%);\n -webkit-filter: grayscale(100%);\t\n}\n\n.badges {\n\tpadding: 4px;\n}\n\n.badges a {\n\ttext-decoration: none;\n}\n\n.content>nav a {\n color: var(--color-light);\n}\n\n.content>nav>ul {\n\tposition: sticky;\n\tposition: -webkit-sticky;\n\ttop: 0px;\n\tlist-style: none;\n\tpadding: 0;\n}\n\n.content>nav>ul>li::before {\n\tcontent: '> ';\n\tcolor: #dedede;\n}\n\n.content>nav>ul>li>ul {\n\tfont-size: .8em;\n\ttop: 0px;\n\tlist-style: none;\n\tpadding: 0 0 0 .8em;\n}\n\n.content>.pens>section {\n\tbackground-color: #fafafa;\n\tmargin: 16px 8px;\n\tpadding: 8px 24px;\n\tborder-radius: 2px;\n}\n\n.content>.pens>section>h3::before {\n\tcontent: '> ';\n\tcolor: #dedede;\n}\n\ntable.detail {\n\twidth: 100%;\n\tborder-collapse: collapse;\n}\n\ntable.detail th {\n\tfont-size: .85em;\n\ttext-align: left;\n\tpadding-top: 16px;\n}\n\ntable.detail td {\n\tvertical-align: top;\n\tborder-bottom: solid 1px #ededed;\n\tmax-width: 14em;\n\tpadding: 4px 0px;\n}\n\ntable.detail tbody,\ntable.detail tbody>tr {\n\ttransition: background-color .4s ease;\n}\n\ntable.detail.hover-on-row tbody>tr:hover,\ntable.detail.hover-on-body tbody:hover {\n\tbackground-color: #efefef;\n}\n\n@media (min-width: 68em) {\n\thtml {\n\t\tfont-size: 18px;\n\t}\n}\n\n@media (max-height: 400px) {\n\t.content>nav>ul {\n\t\tposition: relative;\n\t}\t\n}\n\n.theme-gray {\n\t--color-light: #697b82;\n}\n\n.theme-gray body {\n\tbackground-color: #f5f5f5;\n}\n\n.theme-gray .avatar {\n\topacity: .6;\n}",""])},function(t,e,n){var r=n(10);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};n(8)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){"use strict";n(11);var r=n(6),o=document.querySelector(".title");r.from(".picker").on("change",function(t,e){console.log(e),o.style.backgroundColor=e,r.getLuminance.apply(r,function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e\n *\n * Copyright (c) 2014-2017, Jon Schlinkert.\n * Released under the MIT License.\n */\n\n'use strict';\n\nvar isObject = require('isobject');\n\nfunction isObjectObject(o) {\n return isObject(o) === true\n && Object.prototype.toString.call(o) === '[object Object]';\n}\n\nmodule.exports = function isPlainObject(o) {\n var ctor,prot;\n\n if (isObjectObject(o) === false) return false;\n\n // If has modified constructor\n ctor = o.constructor;\n if (typeof ctor !== 'function') return false;\n\n // If has modified prototype\n prot = ctor.prototype;\n if (isObjectObject(prot) === false) return false;\n\n // If constructor does not have an Object-specific method\n if (prot.hasOwnProperty('isPrototypeOf') === false) {\n return false;\n }\n\n // Most likely a plain Object\n return true;\n};\n","/*!\n * isobject \n *\n * Copyright (c) 2014-2017, Jon Schlinkert.\n * Released under the MIT License.\n */\n\n'use strict';\n\nmodule.exports = function isObject(val) {\n return val != null && typeof val === 'object' && Array.isArray(val) === false;\n};\n","/*!\n * a-color-picker\n * https://github.com/narsenico/a-color-picker\n * \n * Copyright (c) 2017-2018, Gianfranco Caldi.\n * Released under the MIT License.\n */\n\nimport {\n COLOR_NAMES,\n PALETTE_MATERIAL_500,\n PALETTE_MATERIAL_CHROME,\n rgbToHex,\n hslToRgb,\n rgbToHsl,\n rgbToInt,\n intToRgb,\n cssColorToRgb,\n cssColorToRgba,\n cssRgbToRgb,\n cssRgbaToRgba,\n parseColorToRgb,\n parseColorToRgba,\n cssHslToHsl,\n cssHslaToHsla,\n parseColorToHsl,\n parseColorToHsla,\n parseColor,\n getLuminance,\n limit,\n ensureArray,\n nvl\n} from './utils.js';\nimport isPlainObject from 'is-plain-object';\n\nconst VERSION = '1.1.2';\n\nconst IS_EDGE = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('Edge') > -1,\n IS_IE11 = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('rv:') > -1;\n\nconst DEFAULT = {\n id: null,\n attachTo: 'body',\n showHSL: true,\n showRGB: true,\n showHEX: true,\n showAlpha: false,\n color: '#ff0000',\n palette: null,\n paletteEditable: false,\n useAlphaInPalette: 'auto' //true|false|auto\n};\n\nconst SL_BAR_SIZE = [200, 150],\n HUE_BAR_SIZE = [150, 16],\n ALPHA_BAR_SIZE = HUE_BAR_SIZE,\n HUE = 'H',\n SATURATION = 'S',\n LUMINANCE = 'L',\n RGB = 'RGB',\n RED = 'R',\n GREEN = 'G',\n BLUE = 'B',\n RGBHEX = 'RGBHEX',\n COLOR = 'COLOR',\n RGBA_USER = 'RGBA_USER',\n HSLA_USER = 'HSLA_USER',\n ALPHA = 'ALPHA';\n\nconst HTML_BOX = `
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n
\n
`;\n\nfunction parseElement(element, defaultElement, fallToDefault) {\n if (!element) {\n return defaultElement;\n } else if (element instanceof HTMLElement) {\n return element;\n } else if (element instanceof NodeList) {\n return element[0];\n } else if (typeof element == 'string') {\n return document.querySelector(element);\n } else if (element.jquery) {\n return element.get(0); //TODO: da testare parseElement con jQuery\n } else if (fallToDefault) {\n return defaultElement;\n } else {\n return null;\n }\n}\n\nfunction parseElements(selector) {\n if (!selector) {\n return [];\n } else if (Array.isArray(selector)) {\n return selector;\n } else if (selector instanceof HTMLElement) {\n return [selector];\n } else if (selector instanceof NodeList) {\n return [...selector];\n } else if (typeof selector == 'string') {\n return [...document.querySelectorAll(selector)];\n } else if (selector.jquery) {\n return selector.get(); //TODO: da testare parseElements con jQuery\n } else {\n return [];\n }\n}\n\nfunction canvasHelper(canvas) {\n const ctx = canvas.getContext('2d'),\n width = +canvas.width,\n height = +canvas.height;\n // questo gradiente da bianco (alto) a nero (basso) viene applicato come sfondo al canvas\n const whiteBlackGradient = ctx.createLinearGradient(1, 1, 1, height - 1);\n whiteBlackGradient.addColorStop(0, 'white');\n whiteBlackGradient.addColorStop(1, 'black');\n return {\n setHue(hue) {\n // gradiente con il colore relavito a lo HUE da sinistra a destra partendo da trasparente a opaco\n // la combinazione del gradiente bianco/nero e questo permette di avere un canvas dove \n // sull'asse delle ordinate è espressa la saturazione, e sull'asse delle ascisse c'è la luminosità\n const colorGradient = ctx.createLinearGradient(0, 0, width - 1, 0);\n colorGradient.addColorStop(0, `hsla(${hue}, 100%, 50%, 0)`);\n colorGradient.addColorStop(1, `hsla(${hue}, 100%, 50%, 1)`);\n // applico i gradienti\n ctx.fillStyle = whiteBlackGradient;\n ctx.fillRect(0, 0, width, height);\n ctx.fillStyle = colorGradient;\n ctx.globalCompositeOperation = 'multiply';\n ctx.fillRect(0, 0, width, height);\n ctx.globalCompositeOperation = 'source-over';\n },\n\n grabColor(x, y) {\n // recupera il colore del pixel in formato RGBA\n return ctx.getImageData(x, y, 1, 1).data;\n },\n\n findColor(r, g, b) {\n // TODO: se la luminosità è bassa posso controllare prima la parte inferiore\n const rowLen = width * 4,\n // visto che non sono sicuro di trovare il colore esatto considero un gap in + e - su tutti i 3 valori\n gap = 5,\n // array contenente tutti i pixel, ogni pixel sono 4 byte RGBA (quindi è grande w*h*4)\n data = ctx.getImageData(0, 0, width, height).data;\n let coord = [-1, -1];\n // console.log(data.length, r, g, b)\n // console.log(data)\n // console.time('findColor');\n // scorro l'array di pixel, ogni 4 byte c'è un pixel nuovo\n for (let ii = 0; ii < data.length; ii += 4) {\n if (Math.abs(data[ii] - r) <= gap &&\n Math.abs(data[ii + 1] - g) <= gap &&\n Math.abs(data[ii + 2] - b) <= gap) {\n // console.log('found', ii, Math.floor(ii/rowLen), (ii%rowLen)/4);\n coord = [(ii % rowLen) / 4, Math.floor(ii / rowLen)];\n break;\n }\n }\n // console.timeEnd('findColor');\n return coord;\n }\n };\n}\n\nfunction parseAttrBoolean(value, ifNull, ifEmpty) {\n if (value === null) {\n return ifNull;\n } else if (/^\\s*$/.test(value)) {\n return ifEmpty;\n } else if (/true|yes|1/i.test(value)) {\n return true;\n } else if (/false|no|0/i.test(value)) {\n return false;\n } else {\n return ifNull;\n }\n}\n\nfunction copyOptionsFromElement(options, element, attrPrefix = 'acp-') {\n // getAttribute() dovrebbe restituire null se l'attr non esiste, ma le vecchie specifiche prevedono il ritorno di una stringa vuota\n // quindi è meglio verificare l'esistenza dell'attr con hasAttribute()\n if (element.hasAttribute(attrPrefix + 'show-hsl')) {\n options.showHSL = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-hsl'), DEFAULT.showHSL, true);\n }\n if (element.hasAttribute(attrPrefix + 'show-rgb')) {\n options.showRGB = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-rgb'), DEFAULT.showRGB, true);\n }\n if (element.hasAttribute(attrPrefix + 'show-hex')) {\n options.showHEX = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-hex'), DEFAULT.showHEX, true);\n }\n if (element.hasAttribute(attrPrefix + 'show-alpha')) {\n options.showAlpha = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-alpha'), DEFAULT.showAlpha, true);\n }\n if (element.hasAttribute(attrPrefix + 'palette-editable')) {\n options.paletteEditable = parseAttrBoolean(element.getAttribute(attrPrefix + 'palette-editable'), DEFAULT.paletteEditable, true);\n }\n if (element.hasAttribute(attrPrefix + 'palette')) {\n const palette = element.getAttribute(attrPrefix + 'palette');\n switch (palette) {\n case 'PALETTE_MATERIAL_500':\n options.palette = PALETTE_MATERIAL_500;\n break;\n case 'PALETTE_MATERIAL_CHROME':\n case '':\n options.palette = PALETTE_MATERIAL_CHROME;\n break;\n default:\n options.palette = palette.split(/[;\\|]/);\n break;\n }\n }\n if (element.hasAttribute(attrPrefix + 'color')) {\n options.color = element.getAttribute(attrPrefix + 'color');\n }\n}\n\nclass ColorPicker {\n constructor(container, options) {\n if (!options) {\n //controllo se siamo nel caso di options passato come primo parametro\n if (container && isPlainObject(container)) {\n // se non trovo options e container è un {} lo considero il vero options\n this.options = Object.assign({}, DEFAULT, container);\n container = parseElement(this.options.attachTo);\n } else {\n // altrimenti uso le opzioni di default\n this.options = Object.assign({}, DEFAULT);\n // nel caso non vengano proprio passati parametri, considero attachTo di default\n container = parseElement(nvl(container, this.options.attachTo));\n }\n } else {\n container = parseElement(container);\n this.options = Object.assign({}, DEFAULT, options);\n }\n\n /* if (container) {\n // se viene passato al costrutto un elemento HTML uso le opzioni di default\n this.options = Object.assign({}, DEFAULT, { attachTo: options });\n } else {\n // altrimenti presumo che sia indicato nelle opzioni qual'è il contenitore\n this.options = Object.assign({}, DEFAULT, options);\n container = parseElement(this.options.attachTo);\n }\n */\n if (container) {\n // le opzioni possono essere specificate come attributi dell'elemento contenitore\n // quelle presenti sostituiranno le corrispondenti passate con il parametro options\n copyOptionsFromElement(this.options, container);\n\n this.H = 0;\n this.S = 0;\n this.L = 0;\n this.R = 0;\n this.G = 0;\n this.B = 0;\n this.A = 1;\n // andrà a contenere la palette di colori effettivamente usata\n // compresi i colori aggiunti o rimossi dall'utente, non sarà modificabile dirretamente dall'utente\n this.palette = { /*: boolean*/ };\n\n // creo gli elementi HTML e li aggiungo al container\n this.element = document.createElement('div');\n if (this.options.id) {\n this.element.id = this.options.id;\n }\n this.element.className = 'a-color-picker';\n // se falsy viene nascosto .a-color-picker-rgb\n if (!this.options.showRGB) this.element.className += ' hide-rgb';\n // se falsy viene nascosto .a-color-picker-hsl\n if (!this.options.showHSL) this.element.className += ' hide-hsl';\n // se falsy viene nascosto .a-color-picker-single-input (css hex)\n if (!this.options.showHEX) this.element.className += ' hide-single-input';\n // se falsy viene nascosto .a-color-picker-a\n if (!this.options.showAlpha) this.element.className += ' hide-alpha';\n this.element.innerHTML = HTML_BOX;\n container.appendChild(this.element);\n // preparo il canvas con tutto lo spettro del HUE (da 0 a 360)\n // in base al valore selezionato su questo canvas verrà disegnato il canvas per SL\n const hueBar = this.element.querySelector('.a-color-picker-h');\n this.setupHueCanvas(hueBar);\n this.hueBarHelper = canvasHelper(hueBar);\n this.huePointer = this.element.querySelector('.a-color-picker-h+.a-color-picker-dot');\n // preparo il canvas per SL (saturation e luminance)\n const slBar = this.element.querySelector('.a-color-picker-sl');\n this.setupSlCanvas(slBar);\n this.slBarHelper = canvasHelper(slBar);\n this.slPointer = this.element.querySelector('.a-color-picker-sl+.a-color-picker-dot');\n // preparo il box della preview\n this.preview = this.element.querySelector('.a-color-picker-preview');\n this.setupClipboard(this.preview.querySelector('.a-color-picker-clipbaord'));\n // prearo gli input box\n this.setupInput(this.inputH = this.element.querySelector('.a-color-picker-hsl>input[name=H]'));\n this.setupInput(this.inputS = this.element.querySelector('.a-color-picker-hsl>input[name=S]'));\n this.setupInput(this.inputL = this.element.querySelector('.a-color-picker-hsl>input[name=L]'));\n this.setupInput(this.inputR = this.element.querySelector('.a-color-picker-rgb>input[name=R]'));\n this.setupInput(this.inputG = this.element.querySelector('.a-color-picker-rgb>input[name=G]'));\n this.setupInput(this.inputB = this.element.querySelector('.a-color-picker-rgb>input[name=B]'));\n // preparo l'input per il formato hex css\n this.setupInput(this.inputRGBHEX = this.element.querySelector('input[name=RGBHEX]'));\n // preparo la palette con i colori predefiniti\n this.setPalette(this.element.querySelector('.a-color-picker-palette'));\n // preparo in canvas per l'opacità\n this.setupAlphaCanvas(this.element.querySelector('.a-color-picker-a'));\n this.alphaPointer = this.element.querySelector('.a-color-picker-a+.a-color-picker-dot');\n // imposto il colore iniziale\n this.onValueChanged(COLOR, this.options.color);\n } else {\n throw new Error(`Container not found: ${this.options.attachTo}`);\n }\n }\n\n setupHueCanvas(canvas) {\n canvas.width = HUE_BAR_SIZE[0];\n canvas.height = HUE_BAR_SIZE[1];\n // disegno sul canvas applicando un gradiente lineare che copra tutti i possibili valori di HUE\n // quindi ci vogliono 361 stop (da 0 a 360), mantendo fisse S e L\n const ctx = canvas.getContext('2d'),\n gradient = ctx.createLinearGradient(0, 0, HUE_BAR_SIZE[0], 0),\n step = 1 / 360;\n // aggiungo tutti i 361 step al gradiente\n for (let ii = 0; ii <= 1; ii += step) {\n gradient.addColorStop(ii, `hsl(${360 * ii}, 100%, 50%)`);\n }\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, HUE_BAR_SIZE[0], HUE_BAR_SIZE[1]);\n // gestisco gli eventi per la selezione del valore e segnalo il cambiamento tramite callbak\n // una volta che il puntatore è premuto sul canvas (mousedown) \n // intercetto le variazioni nella posizione del puntatore (mousemove)\n // relativamente al document, in modo che il puntatore in movimento possa uscire dal canvas\n // una volta sollevato (mouseup) elimino i listener\n const onMouseMove = (e) => {\n const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, HUE_BAR_SIZE[0]),\n hue = Math.round(x * 360 / HUE_BAR_SIZE[0]);\n this.huePointer.style.left = (x - 7) + 'px';\n this.onValueChanged(HUE, hue);\n };\n const onMouseUp = () => {\n // rimuovo i listener, verranno riattivati al prossimo mousedown\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n // mouse down sul canvas: intercetto il movimento, smetto appena il mouse viene sollevato\n canvas.addEventListener('mousedown', (e) => {\n onMouseMove(e);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n });\n }\n\n setupSlCanvas(canvas) {\n canvas.width = SL_BAR_SIZE[0];\n canvas.height = SL_BAR_SIZE[1];\n // gestisco gli eventi per la selezione del valore e segnalo il cambiamento tramite callbak\n // una volta che il puntatore è premuto sul canvas (mousedown) \n // intercetto le variazioni nella posizione del puntatore (mousemove)\n // relativamente al document, in modo che il puntatore in movimento possa uscire dal canvas\n // una volta sollevato (mouseup) elimino i listener\n const onMouseMove = (e) => {\n const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, SL_BAR_SIZE[0] - 1),\n y = limit(e.clientY - canvas.getBoundingClientRect().top, 0, SL_BAR_SIZE[1] - 1),\n c = this.slBarHelper.grabColor(x, y);\n // console.log('grab', x, y, c)\n this.slPointer.style.left = (x - 7) + 'px';\n this.slPointer.style.top = (y - 7) + 'px';\n this.onValueChanged(RGB, c);\n };\n const onMouseUp = () => {\n // rimuovo i listener, verranno riattivati al prossimo mousedown\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n // mouse down sul canvas: intercetto il movimento, smetto appena il mouse viene sollevato\n canvas.addEventListener('mousedown', (e) => {\n onMouseMove(e);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n });\n }\n\n setupAlphaCanvas(canvas) {\n canvas.width = ALPHA_BAR_SIZE[0];\n canvas.height = ALPHA_BAR_SIZE[1];\n // disegno sul canvas con un gradiente che va dalla piena trasparenza al pieno opaco\n const ctx = canvas.getContext('2d'),\n gradient = ctx.createLinearGradient(0, 0, canvas.width - 1, 0);\n gradient.addColorStop(0, `hsla(0, 0%, 50%, 0)`);\n gradient.addColorStop(1, `hsla(0, 0%, 50%, 1)`);\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, ALPHA_BAR_SIZE[0], ALPHA_BAR_SIZE[1]);\n // gestisco gli eventi per la selezione del valore e segnalo il cambiamento tramite callbak\n // una volta che il puntatore è premuto sul canvas (mousedown) \n // intercetto le variazioni nella posizione del puntatore (mousemove)\n // relativamente al document, in modo che il puntatore in movimento possa uscire dal canvas\n // una volta sollevato (mouseup) elimino i listener\n const onMouseMove = (e) => {\n const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, ALPHA_BAR_SIZE[0]),\n alpha = +(x / ALPHA_BAR_SIZE[0]).toFixed(2);\n this.alphaPointer.style.left = (x - 7) + 'px';\n this.onValueChanged(ALPHA, alpha);\n };\n const onMouseUp = () => {\n // rimuovo i listener, verranno riattivati al prossimo mousedown\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n // mouse down sul canvas: intercetto il movimento, smetto appena il mouse viene sollevato\n canvas.addEventListener('mousedown', (e) => {\n onMouseMove(e);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n });\n }\n\n setupInput(input) {\n const min = +input.min,\n max = +input.max,\n prop = input.name;\n if (input.hasAttribute('select-on-focus')) {\n input.addEventListener('focus', () => {\n //non funziona in IE/Edge\n input.select();\n });\n }\n if (input.type === 'text') {\n input.addEventListener('change', () => {\n this.onValueChanged(prop, input.value);\n });\n } else {\n if (IS_EDGE || IS_IE11) {\n // edge modifica il valore con le frecce MA non scatena l'evento change\n // quindi le intercetto impostando e.returnValue a false in modo\n // che non il valore non venga modificato anche da edge subito dopo il keydown\n input.addEventListener('keydown', (e) => {\n if (e.key === 'Up') {\n input.value = limit((+input.value) + 1, min, max);\n this.onValueChanged(prop, input.value);\n e.returnValue = false;\n } else if (e.key === 'Down') {\n input.value = limit((+input.value) - 1, min, max);\n this.onValueChanged(prop, input.value);\n e.returnValue = false;\n }\n });\n }\n input.addEventListener('change', () => {\n const value = +input.value;\n this.onValueChanged(prop, limit(value, min, max));\n });\n }\n }\n\n setupClipboard(input) {\n // l'input ricopre completamente la preview ma è totalmente trasparente\n input.title = 'click to copy';\n input.addEventListener('click', () => {\n // non uso direttamente inputRGBHEX perchè potrebbe contenere un colore non valido\n // converto in hexcss4 quindi aggiunge anche il valore hex dell'alpha ma solo se significativo (0<=a<1)\n input.value = parseColor([this.R, this.G, this.B, this.A], 'hexcss4');\n input.select();\n document.execCommand('copy');\n });\n }\n\n setPalette(row) {\n // indica se considerare il canale alpha nei controlli della palette\n // se 'auto' dipende dall'opzione showAlpha (se true allora alpha è considerata anche nella palette)\n const useAlphaInPalette = this.options.useAlphaInPalette === 'auto' ? this.options.showAlpha : this.options.useAlphaInPalette;\n // palette è una copia di this.options.palette\n const palette = ensureArray(this.options.palette);\n if (this.options.paletteEditable || palette.length > 0) {\n const addColorToPalette = (color, refElement, fire) => {\n // se il colore è già presente, non creo un nuovo
ma sposto quello esistente in coda\n const el = row.querySelector('.a-color-picker-palette-color[data-color=\"' + color + '\"]') ||\n document.createElement('div');\n el.className = 'a-color-picker-palette-color';\n el.style.backgroundColor = color;\n el.setAttribute('data-color', color);\n el.title = color;\n row.insertBefore(el, refElement);\n this.palette[color] = true;\n if (fire) {\n this.onPaletteColorAdd(color);\n }\n };\n const removeColorToPalette = (element, fire) => {\n // se element è nullo elimino tutti i colori\n if (element) {\n row.removeChild(element);\n this.palette[element.getAttribute('data-color')] = false;\n if (fire) {\n this.onPaletteColorRemove(element.getAttribute('data-color'));\n }\n } else {\n row.querySelectorAll('.a-color-picker-palette-color[data-color]').forEach(el => {\n row.removeChild(el);\n });\n Object.keys(this.palette).forEach(k => {\n this.palette[k] = false;\n });\n if (fire) {\n this.onPaletteColorRemove();\n }\n }\n };\n // solo i colori validi vengono aggiunti alla palette\n palette.map(c => parseColor(c, useAlphaInPalette ? 'rgbcss4' : 'hex'))\n .filter(c => !!c)\n .forEach(c => addColorToPalette(c));\n // in caso di palette editabile viene aggiunto un pulsante + che serve ad aggiungere il colore corrente\n if (this.options.paletteEditable) {\n const el = document.createElement('div');\n el.className = 'a-color-picker-palette-color a-color-picker-palette-add';\n el.innerHTML = '+';\n row.appendChild(el);\n // gestisco eventi di aggiunta/rimozione/selezione colori\n row.addEventListener('click', (e) => {\n if (/a-color-picker-palette-add/.test(e.target.className)) {\n if (e.shiftKey) {\n // rimuove tutti i colori\n removeColorToPalette(null, true);\n } else {\n // aggiungo il colore e triggero l'evento 'oncoloradd'\n if (useAlphaInPalette) {\n addColorToPalette(parseColor([this.R, this.G, this.B, this.A], 'rgbcss4'), e.target, true);\n } else {\n addColorToPalette(rgbToHex(this.R, this.G, this.B), e.target, true);\n }\n }\n } else if (/a-color-picker-palette-color/.test(e.target.className)) {\n if (e.shiftKey) {\n // rimuovo il colore e triggero l'evento 'oncolorremove'\n removeColorToPalette(e.target, true);\n } else {\n // visto che il colore letto da backgroundColor risulta nel formato rgb()\n // devo usare il valore hex originale\n this.onValueChanged(COLOR, e.target.getAttribute('data-color'));\n }\n }\n });\n } else {\n // gestisco il solo evento di selezione del colore\n row.addEventListener('click', (e) => {\n if (/a-color-picker-palette-color/.test(e.target.className)) {\n // visto che il colore letto da backgroundColor risulta nel formato rgb()\n // devo usare il valore hex originale\n this.onValueChanged(COLOR, e.target.getAttribute('data-color'));\n }\n });\n }\n } else {\n // la palette con i colori predefiniti viene nasconsta se non ci sono colori\n row.style.display = 'none';\n }\n }\n\n onValueChanged(prop, value) {\n // console.log(prop, value);\n switch (prop) {\n case HUE:\n this.H = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.slBarHelper.setHue(value);\n this.updatePointerH(this.H);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case SATURATION:\n this.S = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case LUMINANCE:\n this.L = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case RED:\n this.R = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case GREEN:\n this.G = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case BLUE:\n this.B = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case RGB:\n [this.R, this.G, this.B] = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case RGBA_USER:\n [this.R, this.G, this.B, this.A] = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n this.updatePointerA(this.A);\n break;\n case HSLA_USER:\n [this.H, this.S, this.L, this.A] = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n this.updatePointerA(this.A);\n break;\n case RGBHEX:\n [this.R, this.G, this.B] = cssColorToRgb(value) || [this.R, this.G, this.B];\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n break;\n case COLOR:\n [this.R, this.G, this.B, this.A] = parseColor(value, 'rgba') || [0, 0, 0, 1];\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n this.updatePointerA(this.A);\n break;\n case ALPHA:\n this.A = value;\n break;\n }\n this.onColorChanged(this.R, this.G, this.B, this.A);\n }\n\n onColorChanged(r, g, b, a) {\n if (a === 1) {\n this.preview.style.backgroundColor = `rgb(${r},${g},${b})`;\n } else {\n this.preview.style.backgroundColor = `rgba(${r},${g},${b},${a})`;\n }\n // this.onchange && this.onchange();\n this.onchange && this.onchange(this.preview.style.backgroundColor);\n }\n\n onPaletteColorAdd(color) {\n this.oncoloradd && this.oncoloradd(color);\n }\n\n onPaletteColorRemove(color) {\n this.oncolorremove && this.oncolorremove(color);\n }\n\n updateInputHSL(h, s, l) {\n this.inputH.value = h;\n this.inputS.value = s;\n this.inputL.value = l;\n }\n\n updateInputRGB(r, g, b) {\n this.inputR.value = r;\n this.inputG.value = g;\n this.inputB.value = b;\n }\n\n updateInputRGBHEX(r, g, b) {\n this.inputRGBHEX.value = rgbToHex(r, g, b);\n }\n\n updatePointerH(h) {\n const x = HUE_BAR_SIZE[0] * h / 360;\n this.huePointer.style.left = (x - 7) + 'px';\n }\n\n updatePointerSL(h, s, l) {\n const [r, g, b] = hslToRgb(h, s, l);\n const [x, y] = this.slBarHelper.findColor(r, g, b);\n if (x >= 0) {\n this.slPointer.style.left = (x - 7) + 'px';\n this.slPointer.style.top = (y - 7) + 'px';\n }\n }\n\n updatePointerA(a) {\n const x = ALPHA_BAR_SIZE[0] * a;\n this.alphaPointer.style.left = (x - 7) + 'px';\n }\n}\n\nclass EventEmitter {\n constructor(name) {\n this.name = name;\n this.listeners = [];\n }\n on(callback) {\n if (callback) {\n this.listeners.push(callback);\n }\n }\n off(callback) {\n if (callback) {\n this.listeners = this.listeners.filter(cb => cb !== callback);\n } else {\n this.listeners = [];\n }\n }\n emit(args, _this) {\n const listeners = this.listeners.slice(0);\n for (let ii = 0; ii < listeners.length; ii++) {\n listeners[ii].apply(_this, args);\n }\n }\n}\n\n// function wrapEventCallback(ctrl, picker, eventName, cb) {\n// if (cb && typeof cb === 'function') {\n// picker['on' + eventName] = () => {\n// cb.call(null, ctrl, ...arguments);\n// };\n// } else {\n// picker['on' + eventName] = null;\n// }\n// }\n\n/**\n * Crea il color picker.\n * Le opzioni sono:\n * - attachTo: elemento DOM al quale aggiungere il picker (default 'body')\n * - showHSL: indica se mostrare i campi per la definizione del colore in formato HSL (default true)\n * - showRGB: indica se mostrare i campi per la definizione del colore in formato RGB (default true)\n * - showHEX: indica se mostrare i campi per la definizione del colore in formato RGB HEX (default true)\n * - color: colore iniziale (default '#ff0000')\n *\n * @param {Object} element (opzionale) Un elemento HTML che andrà a contenere il picker\n * @param {Object} options (opzionale) Le opzioni di creazione\n * @return {Object} ritorna un controller per impostare e recuperare il colore corrente del picker\n */\nfunction createPicker(element, options) {\n const picker = new ColorPicker(element, options);\n // gestione degli eventi: il \"controller\" assegna le callbak degli eventi ai rispettivi EventEmitter\n // quando il picker triggera un evento, \n // il \"controller\" emette lo stesso evento tramite il rispettivo EventEmitter\n const cbEvents = {\n change: new EventEmitter('change'),\n coloradd: new EventEmitter('coloradd'),\n colorremove: new EventEmitter('colorremove')\n };\n let isChanged = true,\n // memoize per la proprietà all\n memAll = {};\n // non permetto l'accesso diretto al picker\n // ma ritorno un \"controller\" per eseguire solo alcune azioni (get/set colore, eventi, etc.)\n const controller = {\n get element() {\n return picker.element;\n },\n\n get rgb() {\n return [picker.R, picker.G, picker.B];\n },\n\n set rgb([r, g, b]) {\n [r, g, b] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255)];\n picker.onValueChanged(RGBA_USER, [r, g, b, 1]);\n },\n\n get hsl() {\n return [picker.H, picker.S, picker.L];\n },\n\n set hsl([h, s, l]) {\n [h, s, l] = [limit(h, 0, 360), limit(s, 0, 100), limit(l, 0, 100)];\n picker.onValueChanged(HSLA_USER, [h, s, l, 1]);\n },\n\n get rgbhex() {\n // return rgbToHex(picker.R, picker.G, picker.B);\n return this.all.hex;\n },\n\n get rgba() {\n return [picker.R, picker.G, picker.B, picker.A];\n },\n\n set rgba([r, g, b, a]) {\n [r, g, b, a] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255), limit(a, 0, 1)];\n picker.onValueChanged(RGBA_USER, [r, g, b, a]);\n },\n\n get hsla() {\n return [picker.H, picker.S, picker.L, picker.A];\n },\n\n set hsla([h, s, l, a]) {\n [h, s, l, a] = [limit(h, 0, 360), limit(s, 0, 100), limit(l, 0, 100), limit(a, 0, 1)];\n picker.onValueChanged(HSLA_USER, [h, s, l, a]);\n },\n\n /**\n * Ritorna il colore corrente nel formato RGB HEX, \n * oppure nella notazione rgba() con alpha != 1.\n *\n * @return {string} colore corrente\n */\n get color() {\n // if (picker.A === 1) {\n // return this.rgbhex;\n // } else {\n // return `rgba(${picker.R},${picker.G},${picker.B},${picker.A})`;\n // }\n return this.all.toString();\n },\n\n /**\n * Imposta il colore corrente.\n * Accetta:\n * - il nome di un colore (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)\n * - un colore espresso nel formato RGB HEX sia esteso (#ffdd00) che compatto (#fd0)\n * - un array di interi [R,G,B]\n *\n * @param {string|array} color il colore\n */\n set color(color) {\n picker.onValueChanged(COLOR, color);\n },\n\n /**\n * @return {Object} oggetto contenente il colore corrente in tutti i formati noti a parseColor()\n */\n get all() {\n if (isChanged) {\n const rgba = [picker.R, picker.G, picker.B, picker.A];\n // la conversione in stringa segue le regole della proprietà color\n const ts = picker.A < 1 ? `rgba(${picker.R},${picker.G},${picker.B},${picker.A})` : rgbToHex(...rgba);\n // passando un oggetto a parseColor come secondo parametro, lo riempirà con tutti i formati disponibili\n memAll = parseColor(rgba, memAll);\n memAll.toString = () => ts;\n isChanged = false;\n }\n // devo per forza passare una copia, altrimenti memAll può esssere modificato dall'esterno\n return Object.assign({}, memAll);\n },\n\n /**\n * @deprecated\n */\n get onchange() {\n return cbEvents.change && cbEvents.change.listeners[0];\n },\n\n /**\n * @deprecated usare on('change', cb)\n */\n set onchange(cb) {\n // wrapEventCallback(this, picker, 'change', cb);\n // cbEvents['change'] = cb;\n this.off('change').on('change', cb);\n },\n\n /**\n * @deprecated\n */\n get oncoloradd() {\n return cbEvents.coloradd && cbEvents.coloradd.listeners[0];\n },\n\n /**\n * @deprecated usare on('coloradd', cb)\n */\n set oncoloradd(cb) {\n // wrapEventCallback(this, picker, 'coloradd', cb);\n // cbEvents['coloradd'] = cb;\n this.off('coloradd').on('coloradd', cb);\n },\n\n /**\n * @deprecated\n */\n get oncolorremove() {\n return cbEvents.colorremove && cbEvents.colorremove.listeners[0];\n },\n\n /**\n * @deprecated usare on('colorremove', cb)\n */\n set oncolorremove(cb) {\n // wrapEventCallback(this, picker, 'colorremove', cb);\n // cbEvents['colorremove'] = cb;\n this.off('colorremove').on('colorremove', cb);\n },\n\n /**\n * Ritorna la palette dei colori.\n *\n * @return {Array} array di colori in formato hex\n */\n get palette() {\n return Object.keys(picker.palette).filter(k => picker.palette[k]);\n },\n\n on(eventName, cb) {\n if (eventName) {\n cbEvents[eventName] && cbEvents[eventName].on(cb);\n }\n return this;\n },\n\n off(eventName, cb) {\n if (eventName) {\n cbEvents[eventName] && cbEvents[eventName].off(cb);\n }\n return this;\n }\n };\n // ogni volta che viene triggerato un evento, uso il corrispettivo EventEmitter per propagarlo a tutte le callback associate\n // le callback vengono richiamate con il \"controller\" come \"this\" \n // e il primo parametro è sempre il \"controller\" seguito da tutti i parametri dell'evento\n picker.onchange = (...args) => {\n isChanged = true; // così le proprietà in lettura dovranno ricalcolare il loro valore\n cbEvents.change.emit([controller, ...args], controller);\n };\n picker.oncoloradd = (...args) => {\n cbEvents.coloradd.emit([controller, ...args], controller);\n };\n picker.oncolorremove = (...args) => {\n cbEvents.colorremove.emit([controller, ...args], controller);\n };\n // TOOD: trovare un altro nome a ctrl, troppo comune\n // TODO: definirla come readonly\n picker.element.ctrl = controller;\n return controller;\n}\n\n/**\n * \n * @param {any} selector \n * @param {object} options \n * @return un Array di controller così come restituito da createPicker()\n */\nfunction from(selector, options) {\n // TODO: gestire eventuali errori nella creazione del picker\n const pickers = parseElements(selector).map((el, index) => {\n const picker = createPicker(el, options);\n picker.index = index;\n return picker;\n });\n pickers.on = function (eventName, cb) {\n pickers.forEach(picker => picker.on(eventName, cb));\n return this;\n };\n pickers.off = function (eventName) {\n pickers.forEach(picker => picker.off(eventName));\n return this;\n };\n return pickers;\n}\n\nif (typeof window !== 'undefined') {\n // solo in ambiente browser inserisco direttamente nella pagina html il css\n // per sicurezza controllo che non sia già presente\n if (!document.querySelector('head>style[data-source=\"a-color-picker\"]')) {\n const css = require('./acolorpicker.css').toString();\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute('data-source', 'a-color-picker');\n style.innerHTML = css;\n // TODO: verificare che esista \n document.querySelector('head').appendChild(style);\n }\n}\n\nexport {\n createPicker,\n from,\n parseColorToRgb,\n parseColorToRgba,\n parseColorToHsl,\n parseColorToHsla,\n parseColor,\n rgbToHex,\n hslToRgb,\n rgbToHsl,\n rgbToInt,\n intToRgb,\n getLuminance,\n COLOR_NAMES,\n PALETTE_MATERIAL_500,\n PALETTE_MATERIAL_CHROME,\n VERSION\n};"],"mappings":"AACA;;;;;;ACQA;;;;;;ACAA;;;;;;;AC0BA","sourceRoot":""} \ No newline at end of file +{"version":3,"file":"docs.js","sources":["webpack:///webpack/bootstrap","webpack:///./node_modules/is-plain-object/index.js","webpack:///./node_modules/is-plain-object/node_modules/isobject/index.js","webpack:///./src/acolorpicker.js"],"sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 12);\n","/*!\n * is-plain-object \n *\n * Copyright (c) 2014-2017, Jon Schlinkert.\n * Released under the MIT License.\n */\n\n'use strict';\n\nvar isObject = require('isobject');\n\nfunction isObjectObject(o) {\n return isObject(o) === true\n && Object.prototype.toString.call(o) === '[object Object]';\n}\n\nmodule.exports = function isPlainObject(o) {\n var ctor,prot;\n\n if (isObjectObject(o) === false) return false;\n\n // If has modified constructor\n ctor = o.constructor;\n if (typeof ctor !== 'function') return false;\n\n // If has modified prototype\n prot = ctor.prototype;\n if (isObjectObject(prot) === false) return false;\n\n // If constructor does not have an Object-specific method\n if (prot.hasOwnProperty('isPrototypeOf') === false) {\n return false;\n }\n\n // Most likely a plain Object\n return true;\n};\n","/*!\n * isobject \n *\n * Copyright (c) 2014-2017, Jon Schlinkert.\n * Released under the MIT License.\n */\n\n'use strict';\n\nmodule.exports = function isObject(val) {\n return val != null && typeof val === 'object' && Array.isArray(val) === false;\n};\n","/*!\n * a-color-picker\n * https://github.com/narsenico/a-color-picker\n * \n * Copyright (c) 2017-2018, Gianfranco Caldi.\n * Released under the MIT License.\n */\n\nimport {\n COLOR_NAMES,\n PALETTE_MATERIAL_500,\n PALETTE_MATERIAL_CHROME,\n rgbToHex,\n hslToRgb,\n rgbToHsl,\n rgbToInt,\n intToRgb,\n cssColorToRgb,\n cssColorToRgba,\n cssRgbToRgb,\n cssRgbaToRgba,\n parseColorToRgb,\n parseColorToRgba,\n cssHslToHsl,\n cssHslaToHsla,\n parseColorToHsl,\n parseColorToHsla,\n parseColor,\n getLuminance,\n limit,\n ensureArray,\n nvl\n} from './utils.js';\nimport isPlainObject from 'is-plain-object';\n\nconst VERSION = '1.1.3';\n\nconst IS_EDGE = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('Edge') > -1,\n IS_IE11 = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('rv:') > -1;\n\nconst DEFAULT = {\n id: null,\n attachTo: 'body',\n showHSL: true,\n showRGB: true,\n showHEX: true,\n showAlpha: false,\n color: '#ff0000',\n palette: null,\n paletteEditable: false,\n useAlphaInPalette: 'auto' //true|false|auto\n};\n\nconst SL_BAR_SIZE = [200, 150],\n HUE_BAR_SIZE = [150, 16],\n ALPHA_BAR_SIZE = HUE_BAR_SIZE,\n HUE = 'H',\n SATURATION = 'S',\n LUMINANCE = 'L',\n RGB = 'RGB',\n RED = 'R',\n GREEN = 'G',\n BLUE = 'B',\n RGBHEX = 'RGBHEX',\n COLOR = 'COLOR',\n RGBA_USER = 'RGBA_USER',\n HSLA_USER = 'HSLA_USER',\n ALPHA = 'ALPHA';\n\nconst HTML_BOX = `
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n
\n
`;\n\nfunction parseElement(element, defaultElement, fallToDefault) {\n if (!element) {\n return defaultElement;\n } else if (element instanceof HTMLElement) {\n return element;\n } else if (element instanceof NodeList) {\n return element[0];\n } else if (typeof element == 'string') {\n return document.querySelector(element);\n } else if (element.jquery) {\n return element.get(0); //TODO: da testare parseElement con jQuery\n } else if (fallToDefault) {\n return defaultElement;\n } else {\n return null;\n }\n}\n\nfunction parseElements(selector) {\n if (!selector) {\n return [];\n } else if (Array.isArray(selector)) {\n return selector;\n } else if (selector instanceof HTMLElement) {\n return [selector];\n } else if (selector instanceof NodeList) {\n return [...selector];\n } else if (typeof selector == 'string') {\n return [...document.querySelectorAll(selector)];\n } else if (selector.jquery) {\n return selector.get(); //TODO: da testare parseElements con jQuery\n } else {\n return [];\n }\n}\n\nfunction canvasHelper(canvas) {\n const ctx = canvas.getContext('2d'),\n width = +canvas.width,\n height = +canvas.height;\n // questo gradiente da bianco (alto) a nero (basso) viene applicato come sfondo al canvas\n const whiteBlackGradient = ctx.createLinearGradient(1, 1, 1, height - 1);\n whiteBlackGradient.addColorStop(0, 'white');\n whiteBlackGradient.addColorStop(1, 'black');\n return {\n setHue(hue) {\n // gradiente con il colore relavito a lo HUE da sinistra a destra partendo da trasparente a opaco\n // la combinazione del gradiente bianco/nero e questo permette di avere un canvas dove \n // sull'asse delle ordinate è espressa la saturazione, e sull'asse delle ascisse c'è la luminosità\n const colorGradient = ctx.createLinearGradient(0, 0, width - 1, 0);\n colorGradient.addColorStop(0, `hsla(${hue}, 100%, 50%, 0)`);\n colorGradient.addColorStop(1, `hsla(${hue}, 100%, 50%, 1)`);\n // applico i gradienti\n ctx.fillStyle = whiteBlackGradient;\n ctx.fillRect(0, 0, width, height);\n ctx.fillStyle = colorGradient;\n ctx.globalCompositeOperation = 'multiply';\n ctx.fillRect(0, 0, width, height);\n ctx.globalCompositeOperation = 'source-over';\n },\n\n grabColor(x, y) {\n // recupera il colore del pixel in formato RGBA\n return ctx.getImageData(x, y, 1, 1).data;\n },\n\n findColor(r, g, b) {\n // TODO: se la luminosità è bassa posso controllare prima la parte inferiore\n const rowLen = width * 4,\n // visto che non sono sicuro di trovare il colore esatto considero un gap in + e - su tutti i 3 valori\n gap = 5,\n // array contenente tutti i pixel, ogni pixel sono 4 byte RGBA (quindi è grande w*h*4)\n data = ctx.getImageData(0, 0, width, height).data;\n let coord = [-1, -1];\n // console.log(data.length, r, g, b)\n // console.log(data)\n // console.time('findColor');\n // scorro l'array di pixel, ogni 4 byte c'è un pixel nuovo\n for (let ii = 0; ii < data.length; ii += 4) {\n if (Math.abs(data[ii] - r) <= gap &&\n Math.abs(data[ii + 1] - g) <= gap &&\n Math.abs(data[ii + 2] - b) <= gap) {\n // console.log('found', ii, Math.floor(ii/rowLen), (ii%rowLen)/4);\n coord = [(ii % rowLen) / 4, Math.floor(ii / rowLen)];\n break;\n }\n }\n // console.timeEnd('findColor');\n return coord;\n }\n };\n}\n\nfunction parseAttrBoolean(value, ifNull, ifEmpty) {\n if (value === null) {\n return ifNull;\n } else if (/^\\s*$/.test(value)) {\n return ifEmpty;\n } else if (/true|yes|1/i.test(value)) {\n return true;\n } else if (/false|no|0/i.test(value)) {\n return false;\n } else {\n return ifNull;\n }\n}\n\nfunction copyOptionsFromElement(options, element, attrPrefix = 'acp-') {\n // getAttribute() dovrebbe restituire null se l'attr non esiste, ma le vecchie specifiche prevedono il ritorno di una stringa vuota\n // quindi è meglio verificare l'esistenza dell'attr con hasAttribute()\n if (element.hasAttribute(attrPrefix + 'show-hsl')) {\n options.showHSL = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-hsl'), DEFAULT.showHSL, true);\n }\n if (element.hasAttribute(attrPrefix + 'show-rgb')) {\n options.showRGB = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-rgb'), DEFAULT.showRGB, true);\n }\n if (element.hasAttribute(attrPrefix + 'show-hex')) {\n options.showHEX = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-hex'), DEFAULT.showHEX, true);\n }\n if (element.hasAttribute(attrPrefix + 'show-alpha')) {\n options.showAlpha = parseAttrBoolean(element.getAttribute(attrPrefix + 'show-alpha'), DEFAULT.showAlpha, true);\n }\n if (element.hasAttribute(attrPrefix + 'palette-editable')) {\n options.paletteEditable = parseAttrBoolean(element.getAttribute(attrPrefix + 'palette-editable'), DEFAULT.paletteEditable, true);\n }\n if (element.hasAttribute(attrPrefix + 'palette')) {\n const palette = element.getAttribute(attrPrefix + 'palette');\n switch (palette) {\n case 'PALETTE_MATERIAL_500':\n options.palette = PALETTE_MATERIAL_500;\n break;\n case 'PALETTE_MATERIAL_CHROME':\n case '':\n options.palette = PALETTE_MATERIAL_CHROME;\n break;\n default:\n options.palette = palette.split(/[;\\|]/);\n break;\n }\n }\n if (element.hasAttribute(attrPrefix + 'color')) {\n options.color = element.getAttribute(attrPrefix + 'color');\n }\n}\n\nclass ColorPicker {\n constructor(container, options) {\n if (!options) {\n //controllo se siamo nel caso di options passato come primo parametro\n if (container && isPlainObject(container)) {\n // se non trovo options e container è un {} lo considero il vero options\n this.options = Object.assign({}, DEFAULT, container);\n container = parseElement(this.options.attachTo);\n } else {\n // altrimenti uso le opzioni di default\n this.options = Object.assign({}, DEFAULT);\n // nel caso non vengano proprio passati parametri, considero attachTo di default\n container = parseElement(nvl(container, this.options.attachTo));\n }\n } else {\n container = parseElement(container);\n this.options = Object.assign({}, DEFAULT, options);\n }\n\n /* if (container) {\n // se viene passato al costrutto un elemento HTML uso le opzioni di default\n this.options = Object.assign({}, DEFAULT, { attachTo: options });\n } else {\n // altrimenti presumo che sia indicato nelle opzioni qual'è il contenitore\n this.options = Object.assign({}, DEFAULT, options);\n container = parseElement(this.options.attachTo);\n }\n */\n if (container) {\n // le opzioni possono essere specificate come attributi dell'elemento contenitore\n // quelle presenti sostituiranno le corrispondenti passate con il parametro options\n copyOptionsFromElement(this.options, container);\n\n this.H = 0;\n this.S = 0;\n this.L = 0;\n this.R = 0;\n this.G = 0;\n this.B = 0;\n this.A = 1;\n // andrà a contenere la palette di colori effettivamente usata\n // compresi i colori aggiunti o rimossi dall'utente, non sarà modificabile dirretamente dall'utente\n this.palette = { /*: boolean*/ };\n\n // creo gli elementi HTML e li aggiungo al container\n this.element = document.createElement('div');\n if (this.options.id) {\n this.element.id = this.options.id;\n }\n this.element.className = 'a-color-picker';\n // se falsy viene nascosto .a-color-picker-rgb\n if (!this.options.showRGB) this.element.className += ' hide-rgb';\n // se falsy viene nascosto .a-color-picker-hsl\n if (!this.options.showHSL) this.element.className += ' hide-hsl';\n // se falsy viene nascosto .a-color-picker-single-input (css hex)\n if (!this.options.showHEX) this.element.className += ' hide-single-input';\n // se falsy viene nascosto .a-color-picker-a\n if (!this.options.showAlpha) this.element.className += ' hide-alpha';\n this.element.innerHTML = HTML_BOX;\n container.appendChild(this.element);\n // preparo il canvas con tutto lo spettro del HUE (da 0 a 360)\n // in base al valore selezionato su questo canvas verrà disegnato il canvas per SL\n const hueBar = this.element.querySelector('.a-color-picker-h');\n this.setupHueCanvas(hueBar);\n this.hueBarHelper = canvasHelper(hueBar);\n this.huePointer = this.element.querySelector('.a-color-picker-h+.a-color-picker-dot');\n // preparo il canvas per SL (saturation e luminance)\n const slBar = this.element.querySelector('.a-color-picker-sl');\n this.setupSlCanvas(slBar);\n this.slBarHelper = canvasHelper(slBar);\n this.slPointer = this.element.querySelector('.a-color-picker-sl+.a-color-picker-dot');\n // preparo il box della preview\n this.preview = this.element.querySelector('.a-color-picker-preview');\n this.setupClipboard(this.preview.querySelector('.a-color-picker-clipbaord'));\n // prearo gli input box\n this.setupInput(this.inputH = this.element.querySelector('.a-color-picker-hsl>input[name=H]'));\n this.setupInput(this.inputS = this.element.querySelector('.a-color-picker-hsl>input[name=S]'));\n this.setupInput(this.inputL = this.element.querySelector('.a-color-picker-hsl>input[name=L]'));\n this.setupInput(this.inputR = this.element.querySelector('.a-color-picker-rgb>input[name=R]'));\n this.setupInput(this.inputG = this.element.querySelector('.a-color-picker-rgb>input[name=G]'));\n this.setupInput(this.inputB = this.element.querySelector('.a-color-picker-rgb>input[name=B]'));\n // preparo l'input per il formato hex css\n this.setupInput(this.inputRGBHEX = this.element.querySelector('input[name=RGBHEX]'));\n // preparo la palette con i colori predefiniti\n this.setPalette(this.element.querySelector('.a-color-picker-palette'));\n // preparo in canvas per l'opacità\n this.setupAlphaCanvas(this.element.querySelector('.a-color-picker-a'));\n this.alphaPointer = this.element.querySelector('.a-color-picker-a+.a-color-picker-dot');\n // imposto il colore iniziale\n this.onValueChanged(COLOR, this.options.color);\n } else {\n throw new Error(`Container not found: ${this.options.attachTo}`);\n }\n }\n\n setupHueCanvas(canvas) {\n canvas.width = HUE_BAR_SIZE[0];\n canvas.height = HUE_BAR_SIZE[1];\n // disegno sul canvas applicando un gradiente lineare che copra tutti i possibili valori di HUE\n // quindi ci vogliono 361 stop (da 0 a 360), mantendo fisse S e L\n const ctx = canvas.getContext('2d'),\n gradient = ctx.createLinearGradient(0, 0, HUE_BAR_SIZE[0], 0),\n step = 1 / 360;\n // aggiungo tutti i 361 step al gradiente\n for (let ii = 0; ii <= 1; ii += step) {\n gradient.addColorStop(ii, `hsl(${360 * ii}, 100%, 50%)`);\n }\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, HUE_BAR_SIZE[0], HUE_BAR_SIZE[1]);\n // gestisco gli eventi per la selezione del valore e segnalo il cambiamento tramite callbak\n // una volta che il puntatore è premuto sul canvas (mousedown) \n // intercetto le variazioni nella posizione del puntatore (mousemove)\n // relativamente al document, in modo che il puntatore in movimento possa uscire dal canvas\n // una volta sollevato (mouseup) elimino i listener\n const onMouseMove = (e) => {\n const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, HUE_BAR_SIZE[0]),\n hue = Math.round(x * 360 / HUE_BAR_SIZE[0]);\n this.huePointer.style.left = (x - 7) + 'px';\n this.onValueChanged(HUE, hue);\n };\n const onMouseUp = () => {\n // rimuovo i listener, verranno riattivati al prossimo mousedown\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n // mouse down sul canvas: intercetto il movimento, smetto appena il mouse viene sollevato\n canvas.addEventListener('mousedown', (e) => {\n onMouseMove(e);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n });\n }\n\n setupSlCanvas(canvas) {\n canvas.width = SL_BAR_SIZE[0];\n canvas.height = SL_BAR_SIZE[1];\n // gestisco gli eventi per la selezione del valore e segnalo il cambiamento tramite callbak\n // una volta che il puntatore è premuto sul canvas (mousedown) \n // intercetto le variazioni nella posizione del puntatore (mousemove)\n // relativamente al document, in modo che il puntatore in movimento possa uscire dal canvas\n // una volta sollevato (mouseup) elimino i listener\n const onMouseMove = (e) => {\n const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, SL_BAR_SIZE[0] - 1),\n y = limit(e.clientY - canvas.getBoundingClientRect().top, 0, SL_BAR_SIZE[1] - 1),\n c = this.slBarHelper.grabColor(x, y);\n // console.log('grab', x, y, c)\n this.slPointer.style.left = (x - 7) + 'px';\n this.slPointer.style.top = (y - 7) + 'px';\n this.onValueChanged(RGB, c);\n };\n const onMouseUp = () => {\n // rimuovo i listener, verranno riattivati al prossimo mousedown\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n // mouse down sul canvas: intercetto il movimento, smetto appena il mouse viene sollevato\n canvas.addEventListener('mousedown', (e) => {\n onMouseMove(e);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n });\n }\n\n setupAlphaCanvas(canvas) {\n canvas.width = ALPHA_BAR_SIZE[0];\n canvas.height = ALPHA_BAR_SIZE[1];\n // disegno sul canvas con un gradiente che va dalla piena trasparenza al pieno opaco\n const ctx = canvas.getContext('2d'),\n gradient = ctx.createLinearGradient(0, 0, canvas.width - 1, 0);\n gradient.addColorStop(0, `hsla(0, 0%, 50%, 0)`);\n gradient.addColorStop(1, `hsla(0, 0%, 50%, 1)`);\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, ALPHA_BAR_SIZE[0], ALPHA_BAR_SIZE[1]);\n // gestisco gli eventi per la selezione del valore e segnalo il cambiamento tramite callbak\n // una volta che il puntatore è premuto sul canvas (mousedown) \n // intercetto le variazioni nella posizione del puntatore (mousemove)\n // relativamente al document, in modo che il puntatore in movimento possa uscire dal canvas\n // una volta sollevato (mouseup) elimino i listener\n const onMouseMove = (e) => {\n const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, ALPHA_BAR_SIZE[0]),\n alpha = +(x / ALPHA_BAR_SIZE[0]).toFixed(2);\n this.alphaPointer.style.left = (x - 7) + 'px';\n this.onValueChanged(ALPHA, alpha);\n };\n const onMouseUp = () => {\n // rimuovo i listener, verranno riattivati al prossimo mousedown\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n // mouse down sul canvas: intercetto il movimento, smetto appena il mouse viene sollevato\n canvas.addEventListener('mousedown', (e) => {\n onMouseMove(e);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n });\n }\n\n setupInput(input) {\n const min = +input.min,\n max = +input.max,\n prop = input.name;\n if (input.hasAttribute('select-on-focus')) {\n input.addEventListener('focus', () => {\n //non funziona in IE/Edge\n input.select();\n });\n }\n if (input.type === 'text') {\n input.addEventListener('change', () => {\n this.onValueChanged(prop, input.value);\n });\n } else {\n if (IS_EDGE || IS_IE11) {\n // edge modifica il valore con le frecce MA non scatena l'evento change\n // quindi le intercetto impostando e.returnValue a false in modo\n // che non il valore non venga modificato anche da edge subito dopo il keydown\n input.addEventListener('keydown', (e) => {\n if (e.key === 'Up') {\n input.value = limit((+input.value) + 1, min, max);\n this.onValueChanged(prop, input.value);\n e.returnValue = false;\n } else if (e.key === 'Down') {\n input.value = limit((+input.value) - 1, min, max);\n this.onValueChanged(prop, input.value);\n e.returnValue = false;\n }\n });\n }\n input.addEventListener('change', () => {\n const value = +input.value;\n this.onValueChanged(prop, limit(value, min, max));\n });\n }\n }\n\n setupClipboard(input) {\n // l'input ricopre completamente la preview ma è totalmente trasparente\n input.title = 'click to copy';\n input.addEventListener('click', () => {\n // non uso direttamente inputRGBHEX perchè potrebbe contenere un colore non valido\n // converto in hexcss4 quindi aggiunge anche il valore hex dell'alpha ma solo se significativo (0<=a<1)\n input.value = parseColor([this.R, this.G, this.B, this.A], 'hexcss4');\n input.select();\n document.execCommand('copy');\n });\n }\n\n setPalette(row) {\n // indica se considerare il canale alpha nei controlli della palette\n // se 'auto' dipende dall'opzione showAlpha (se true allora alpha è considerata anche nella palette)\n const useAlphaInPalette = this.options.useAlphaInPalette === 'auto' ? this.options.showAlpha : this.options.useAlphaInPalette;\n // palette è una copia di this.options.palette\n const palette = ensureArray(this.options.palette);\n if (this.options.paletteEditable || palette.length > 0) {\n const addColorToPalette = (color, refElement, fire) => {\n // se il colore è già presente, non creo un nuovo
ma sposto quello esistente in coda\n const el = row.querySelector('.a-color-picker-palette-color[data-color=\"' + color + '\"]') ||\n document.createElement('div');\n el.className = 'a-color-picker-palette-color';\n el.style.backgroundColor = color;\n el.setAttribute('data-color', color);\n el.title = color;\n row.insertBefore(el, refElement);\n this.palette[color] = true;\n if (fire) {\n this.onPaletteColorAdd(color);\n }\n };\n const removeColorToPalette = (element, fire) => {\n // se element è nullo elimino tutti i colori\n if (element) {\n row.removeChild(element);\n this.palette[element.getAttribute('data-color')] = false;\n if (fire) {\n this.onPaletteColorRemove(element.getAttribute('data-color'));\n }\n } else {\n row.querySelectorAll('.a-color-picker-palette-color[data-color]').forEach(el => {\n row.removeChild(el);\n });\n Object.keys(this.palette).forEach(k => {\n this.palette[k] = false;\n });\n if (fire) {\n this.onPaletteColorRemove();\n }\n }\n };\n // solo i colori validi vengono aggiunti alla palette\n palette.map(c => parseColor(c, useAlphaInPalette ? 'rgbcss4' : 'hex'))\n .filter(c => !!c)\n .forEach(c => addColorToPalette(c));\n // in caso di palette editabile viene aggiunto un pulsante + che serve ad aggiungere il colore corrente\n if (this.options.paletteEditable) {\n const el = document.createElement('div');\n el.className = 'a-color-picker-palette-color a-color-picker-palette-add';\n el.innerHTML = '+';\n row.appendChild(el);\n // gestisco eventi di aggiunta/rimozione/selezione colori\n row.addEventListener('click', (e) => {\n if (/a-color-picker-palette-add/.test(e.target.className)) {\n if (e.shiftKey) {\n // rimuove tutti i colori\n removeColorToPalette(null, true);\n } else {\n // aggiungo il colore e triggero l'evento 'oncoloradd'\n if (useAlphaInPalette) {\n addColorToPalette(parseColor([this.R, this.G, this.B, this.A], 'rgbcss4'), e.target, true);\n } else {\n addColorToPalette(rgbToHex(this.R, this.G, this.B), e.target, true);\n }\n }\n } else if (/a-color-picker-palette-color/.test(e.target.className)) {\n if (e.shiftKey) {\n // rimuovo il colore e triggero l'evento 'oncolorremove'\n removeColorToPalette(e.target, true);\n } else {\n // visto che il colore letto da backgroundColor risulta nel formato rgb()\n // devo usare il valore hex originale\n this.onValueChanged(COLOR, e.target.getAttribute('data-color'));\n }\n }\n });\n } else {\n // gestisco il solo evento di selezione del colore\n row.addEventListener('click', (e) => {\n if (/a-color-picker-palette-color/.test(e.target.className)) {\n // visto che il colore letto da backgroundColor risulta nel formato rgb()\n // devo usare il valore hex originale\n this.onValueChanged(COLOR, e.target.getAttribute('data-color'));\n }\n });\n }\n } else {\n // la palette con i colori predefiniti viene nasconsta se non ci sono colori\n row.style.display = 'none';\n }\n }\n\n onValueChanged(prop, value) {\n // console.log(prop, value);\n switch (prop) {\n case HUE:\n this.H = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.slBarHelper.setHue(value);\n this.updatePointerH(this.H);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case SATURATION:\n this.S = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case LUMINANCE:\n this.L = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case RED:\n this.R = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case GREEN:\n this.G = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case BLUE:\n this.B = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case RGB:\n [this.R, this.G, this.B] = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n break;\n case RGBA_USER:\n [this.R, this.G, this.B, this.A] = value;\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n this.updatePointerA(this.A);\n break;\n case HSLA_USER:\n [this.H, this.S, this.L, this.A] = value;\n [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n this.updatePointerA(this.A);\n break;\n case RGBHEX:\n [this.R, this.G, this.B] = cssColorToRgb(value) || [this.R, this.G, this.B];\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n break;\n case COLOR:\n [this.R, this.G, this.B, this.A] = parseColor(value, 'rgba') || [0, 0, 0, 1];\n [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);\n this.slBarHelper.setHue(this.H);\n this.updatePointerH(this.H);\n this.updatePointerSL(this.H, this.S, this.L);\n this.updateInputHSL(this.H, this.S, this.L);\n this.updateInputRGB(this.R, this.G, this.B);\n this.updateInputRGBHEX(this.R, this.G, this.B);\n this.updatePointerA(this.A);\n break;\n case ALPHA:\n this.A = value;\n break;\n }\n this.onColorChanged(this.R, this.G, this.B, this.A);\n }\n\n onColorChanged(r, g, b, a) {\n if (a === 1) {\n this.preview.style.backgroundColor = `rgb(${r},${g},${b})`;\n } else {\n this.preview.style.backgroundColor = `rgba(${r},${g},${b},${a})`;\n }\n // this.onchange && this.onchange();\n this.onchange && this.onchange(this.preview.style.backgroundColor);\n }\n\n onPaletteColorAdd(color) {\n this.oncoloradd && this.oncoloradd(color);\n }\n\n onPaletteColorRemove(color) {\n this.oncolorremove && this.oncolorremove(color);\n }\n\n updateInputHSL(h, s, l) {\n this.inputH.value = h;\n this.inputS.value = s;\n this.inputL.value = l;\n }\n\n updateInputRGB(r, g, b) {\n this.inputR.value = r;\n this.inputG.value = g;\n this.inputB.value = b;\n }\n\n updateInputRGBHEX(r, g, b) {\n this.inputRGBHEX.value = rgbToHex(r, g, b);\n }\n\n updatePointerH(h) {\n const x = HUE_BAR_SIZE[0] * h / 360;\n this.huePointer.style.left = (x - 7) + 'px';\n }\n\n updatePointerSL(h, s, l) {\n const [r, g, b] = hslToRgb(h, s, l);\n const [x, y] = this.slBarHelper.findColor(r, g, b);\n if (x >= 0) {\n this.slPointer.style.left = (x - 7) + 'px';\n this.slPointer.style.top = (y - 7) + 'px';\n }\n }\n\n updatePointerA(a) {\n const x = ALPHA_BAR_SIZE[0] * a;\n this.alphaPointer.style.left = (x - 7) + 'px';\n }\n}\n\nclass EventEmitter {\n constructor(name) {\n this.name = name;\n this.listeners = [];\n }\n on(callback) {\n if (callback) {\n this.listeners.push(callback);\n }\n }\n off(callback) {\n if (callback) {\n this.listeners = this.listeners.filter(cb => cb !== callback);\n } else {\n this.listeners = [];\n }\n }\n emit(args, _this) {\n const listeners = this.listeners.slice(0);\n for (let ii = 0; ii < listeners.length; ii++) {\n listeners[ii].apply(_this, args);\n }\n }\n}\n\n// function wrapEventCallback(ctrl, picker, eventName, cb) {\n// if (cb && typeof cb === 'function') {\n// picker['on' + eventName] = () => {\n// cb.call(null, ctrl, ...arguments);\n// };\n// } else {\n// picker['on' + eventName] = null;\n// }\n// }\n\n/**\n * Crea il color picker.\n * Le opzioni sono:\n * - attachTo: elemento DOM al quale aggiungere il picker (default 'body')\n * - showHSL: indica se mostrare i campi per la definizione del colore in formato HSL (default true)\n * - showRGB: indica se mostrare i campi per la definizione del colore in formato RGB (default true)\n * - showHEX: indica se mostrare i campi per la definizione del colore in formato RGB HEX (default true)\n * - color: colore iniziale (default '#ff0000')\n *\n * @param {Object} element (opzionale) Un elemento HTML che andrà a contenere il picker\n * @param {Object} options (opzionale) Le opzioni di creazione\n * @return {Object} ritorna un controller per impostare e recuperare il colore corrente del picker\n */\nfunction createPicker(element, options) {\n const picker = new ColorPicker(element, options);\n // gestione degli eventi: il \"controller\" assegna le callbak degli eventi ai rispettivi EventEmitter\n // quando il picker triggera un evento, \n // il \"controller\" emette lo stesso evento tramite il rispettivo EventEmitter\n const cbEvents = {\n change: new EventEmitter('change'),\n coloradd: new EventEmitter('coloradd'),\n colorremove: new EventEmitter('colorremove')\n };\n let isChanged = true,\n // memoize per la proprietà all\n memAll = {};\n // non permetto l'accesso diretto al picker\n // ma ritorno un \"controller\" per eseguire solo alcune azioni (get/set colore, eventi, etc.)\n const controller = {\n get element() {\n return picker.element;\n },\n\n get rgb() {\n return [picker.R, picker.G, picker.B];\n },\n\n set rgb([r, g, b]) {\n [r, g, b] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255)];\n picker.onValueChanged(RGBA_USER, [r, g, b, 1]);\n },\n\n get hsl() {\n return [picker.H, picker.S, picker.L];\n },\n\n set hsl([h, s, l]) {\n [h, s, l] = [limit(h, 0, 360), limit(s, 0, 100), limit(l, 0, 100)];\n picker.onValueChanged(HSLA_USER, [h, s, l, 1]);\n },\n\n get rgbhex() {\n // return rgbToHex(picker.R, picker.G, picker.B);\n return this.all.hex;\n },\n\n get rgba() {\n return [picker.R, picker.G, picker.B, picker.A];\n },\n\n set rgba([r, g, b, a]) {\n [r, g, b, a] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255), limit(a, 0, 1)];\n picker.onValueChanged(RGBA_USER, [r, g, b, a]);\n },\n\n get hsla() {\n return [picker.H, picker.S, picker.L, picker.A];\n },\n\n set hsla([h, s, l, a]) {\n [h, s, l, a] = [limit(h, 0, 360), limit(s, 0, 100), limit(l, 0, 100), limit(a, 0, 1)];\n picker.onValueChanged(HSLA_USER, [h, s, l, a]);\n },\n\n /**\n * Ritorna il colore corrente nel formato RGB HEX, \n * oppure nella notazione rgba() con alpha != 1.\n *\n * @return {string} colore corrente\n */\n get color() {\n // if (picker.A === 1) {\n // return this.rgbhex;\n // } else {\n // return `rgba(${picker.R},${picker.G},${picker.B},${picker.A})`;\n // }\n return this.all.toString();\n },\n\n /**\n * Imposta il colore corrente.\n * Accetta:\n * - il nome di un colore (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)\n * - un colore espresso nel formato RGB HEX sia esteso (#ffdd00) che compatto (#fd0)\n * - un array di interi [R,G,B]\n *\n * @param {string|array} color il colore\n */\n set color(color) {\n picker.onValueChanged(COLOR, color);\n },\n\n /**\n * @return {Object} oggetto contenente il colore corrente in tutti i formati noti a parseColor()\n */\n get all() {\n if (isChanged) {\n const rgba = [picker.R, picker.G, picker.B, picker.A];\n // la conversione in stringa segue le regole della proprietà color\n const ts = picker.A < 1 ? `rgba(${picker.R},${picker.G},${picker.B},${picker.A})` : rgbToHex(...rgba);\n // passando un oggetto a parseColor come secondo parametro, lo riempirà con tutti i formati disponibili\n memAll = parseColor(rgba, memAll);\n memAll.toString = () => ts;\n isChanged = false;\n }\n // devo per forza passare una copia, altrimenti memAll può esssere modificato dall'esterno\n return Object.assign({}, memAll);\n },\n\n /**\n * @deprecated\n */\n get onchange() {\n return cbEvents.change && cbEvents.change.listeners[0];\n },\n\n /**\n * @deprecated usare on('change', cb)\n */\n set onchange(cb) {\n // wrapEventCallback(this, picker, 'change', cb);\n // cbEvents['change'] = cb;\n this.off('change').on('change', cb);\n },\n\n /**\n * @deprecated\n */\n get oncoloradd() {\n return cbEvents.coloradd && cbEvents.coloradd.listeners[0];\n },\n\n /**\n * @deprecated usare on('coloradd', cb)\n */\n set oncoloradd(cb) {\n // wrapEventCallback(this, picker, 'coloradd', cb);\n // cbEvents['coloradd'] = cb;\n this.off('coloradd').on('coloradd', cb);\n },\n\n /**\n * @deprecated\n */\n get oncolorremove() {\n return cbEvents.colorremove && cbEvents.colorremove.listeners[0];\n },\n\n /**\n * @deprecated usare on('colorremove', cb)\n */\n set oncolorremove(cb) {\n // wrapEventCallback(this, picker, 'colorremove', cb);\n // cbEvents['colorremove'] = cb;\n this.off('colorremove').on('colorremove', cb);\n },\n\n /**\n * Ritorna la palette dei colori.\n *\n * @return {Array} array di colori in formato hex\n */\n get palette() {\n return Object.keys(picker.palette).filter(k => picker.palette[k]);\n },\n\n on(eventName, cb) {\n if (eventName) {\n cbEvents[eventName] && cbEvents[eventName].on(cb);\n }\n return this;\n },\n\n off(eventName, cb) {\n if (eventName) {\n cbEvents[eventName] && cbEvents[eventName].off(cb);\n }\n return this;\n }\n };\n // ogni volta che viene triggerato un evento, uso il corrispettivo EventEmitter per propagarlo a tutte le callback associate\n // le callback vengono richiamate con il \"controller\" come \"this\" \n // e il primo parametro è sempre il \"controller\" seguito da tutti i parametri dell'evento\n picker.onchange = (...args) => {\n isChanged = true; // così le proprietà in lettura dovranno ricalcolare il loro valore\n cbEvents.change.emit([controller, ...args], controller);\n };\n picker.oncoloradd = (...args) => {\n cbEvents.coloradd.emit([controller, ...args], controller);\n };\n picker.oncolorremove = (...args) => {\n cbEvents.colorremove.emit([controller, ...args], controller);\n };\n // TOOD: trovare un altro nome a ctrl, troppo comune\n // TODO: definirla come readonly\n picker.element.ctrl = controller;\n return controller;\n}\n\n/**\n * \n * @param {any} selector \n * @param {object} options \n * @return un Array di controller così come restituito da createPicker()\n */\nfunction from(selector, options) {\n // TODO: gestire eventuali errori nella creazione del picker\n const pickers = parseElements(selector).map((el, index) => {\n const picker = createPicker(el, options);\n picker.index = index;\n return picker;\n });\n pickers.on = function (eventName, cb) {\n pickers.forEach(picker => picker.on(eventName, cb));\n return this;\n };\n pickers.off = function (eventName) {\n pickers.forEach(picker => picker.off(eventName));\n return this;\n };\n return pickers;\n}\n\nif (typeof window !== 'undefined') {\n // solo in ambiente browser inserisco direttamente nella pagina html il css\n // per sicurezza controllo che non sia già presente\n if (!document.querySelector('head>style[data-source=\"a-color-picker\"]')) {\n const css = require('./acolorpicker.css').toString();\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute('data-source', 'a-color-picker');\n style.innerHTML = css;\n // TODO: verificare che esista \n document.querySelector('head').appendChild(style);\n }\n}\n\nexport {\n createPicker,\n from,\n parseColorToRgb,\n parseColorToRgba,\n parseColorToHsl,\n parseColorToHsla,\n parseColor,\n rgbToHex,\n hslToRgb,\n rgbToHsl,\n rgbToInt,\n intToRgb,\n getLuminance,\n COLOR_NAMES,\n PALETTE_MATERIAL_500,\n PALETTE_MATERIAL_CHROME,\n VERSION\n};"],"mappings":"AACA;;;;;;ACQA;;;;;;ACAA;;;;;;;AC0BA","sourceRoot":""} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 9686cde..deccb2f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,5 +1,5 @@ - + @@ -13,6 +13,7 @@ +
@@ -20,14 +21,14 @@
-

+

a-color-picker | for web app

npm version - + codepen