From ac831d7044d8dd884443581ffa0a131510b5786a Mon Sep 17 00:00:00 2001 From: Yair Even Or Date: Sun, 26 Mar 2023 21:49:52 +0300 Subject: [PATCH] 0.12.0 --- color-picker.js | 7 +++++++ dist/color-picker.js | 4 ++-- dist/color-picker.js.map | 2 +- dist/styles.css | 4 +--- dist/styles.css.map | 1 + package-lock.json | 4 ++-- package.json | 2 +- 7 files changed, 15 insertions(+), 9 deletions(-) create mode 100644 dist/styles.css.map diff --git a/color-picker.js b/color-picker.js index 242b3e5..aff4e0c 100644 --- a/color-picker.js +++ b/color-picker.js @@ -1,3 +1,10 @@ +/** + * @yaireo/color-picker - Lightweight javascript color picker + * + * @version v0.12.0 + * @homepage https://yaireo.github.io/color-picker + */ + /** * @yaireo/color-picker - Lightweight javascript color picker * diff --git a/dist/color-picker.js b/dist/color-picker.js index 2bb0a60..b9b3a1a 100644 --- a/dist/color-picker.js +++ b/dist/color-picker.js @@ -1,3 +1,3 @@ -/*! Color-Picker 0.11.0 MIT | https://github.com/yairEO/color-picker */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ColorPicker={})}(this,(function(t){"use strict";var e=t=>(new DOMParser).parseFromString(t.trim(),"text/html").body.firstElementChild,s={color:"white",onInput:t=>t,onChange:t=>t,buttons:{undo:{icon:"↶",title:"Undo"},format:{icon:"⇆",title:"Switch Color Format"},add:{icon:"+",title:"Add to Swatches"}}};const i=t=>t.match(/\((.*)\)/)[1].split(",").map(Number),a=t=>Object.assign([0,0,0,1],t.match(/\((.*)\)/)[1].split(",").map(((t,e)=>3!=e||t.includes("%")?parseFloat(t):100*parseFloat(t)))),o=t=>`hsla(${t.h}, ${t.s}%, ${t.l}%, ${t.a}%)`,n=t=>t.toFixed(1).replace(".0",""),h=t=>{const[e,s,i,a]=(t=>t.match(/\w\w/g))(t),[o,n,h]=[e,s,i].map((t=>parseInt(t,16)));return`rgba(${o},${n},${h},${a?(parseInt(a,16)/255).toFixed(2):1})`},r=t=>{var e,s=document.createElement("canvas").getContext("2d");return s.fillStyle=t,"#"==(e=s.fillStyle)[0]?e:l(e)},l=t=>{const[e,s,a,o]=i(t),n="#"+[e,s,a].map((t=>t.toString(16).padStart(2,"0"))).join("");return 3==t.length?n:n+Math.round(255*o).toString(16).padStart(2,"0")},c=t=>{let[e,s,a,o]=i(t);e/=255,s/=255,a/=255;let h=Math.max(e,s,a),r=Math.min(e,s,a),l=h-r,c=0,u=0,d=((h+r)/2).toPrecision(5);return l&&(u=d>.5?l/(2-h-r):l/(h+r),c=h==e?(s-a)/l+(s(e=(e+"").toLowerCase(),t=r(t),"hex"==e?t:e.startsWith("hsl")?o(c(h(t))):e.startsWith("rgb")?h(t):t);function d({name:t,min:e=0,max:s=100,value:i}){return`
\n \n \n
\n
`}function p(t){const{buttons:{undo:e,format:s}}=this.settings;return`\n
\n \n \n \n
\n
\n `}function S(t,e){const{buttons:{add:s}}=this.settings;return`\n
\n \n ${t.map((t=>m(t,e.includes(t)))).join("")}\n
\n `}function m(t,e){return`
${e?"":''}
`}var g=Object.freeze({__proto__:null,scope:function(){const{h:t,s:e,l:s,a:i}=this.color;return`\n
\n ${d({name:"hue",value:t,max:"360"})}\n ${d({name:"saturation",value:e})}\n ${d({name:"lightness",value:s})}\n ${d({name:"alpha",value:i})}\n \n ${p.call(this,this.color)}\n ${this.swatches?S.call(this,this.swatches,this.initialSwatches):""}\n
\n `},slider:d,value:p,swatches:S,swatch:m});function v(){this.syncGlobalSwatchesWithLocal()}function w(t){t.preventDefault();const{value:e,max:s}=t.target,i=-1*Math.sign(t.deltaY);e&&s&&(t.target.value=Math.min(Math.max(+e+i,0),+s),C.call(this,t))}function f(t){"Escape"==t.key&&this.settings.onClickOutside(t)}function b(t){this.DOM.scope.contains(t.target)||this.settings.onClickOutside(t)}function C(t){const{name:e,value:s,type:i}=t.target;"range"==i&&this.setColor({...this.color,[e[0]]:+s})}function _(t){const{type:e}=t.target;"range"!=e&&"text"!=e||(this.history.last=this.color)}function y(t){this.setColor(this.getHSLA(t.target.value)),this.DOM.value.blur()}function O(t){const{name:e,parentNode:s,classList:i,title:a}=t.target;"format"==e?this.swithFormat():"undo"==e?this.history.undo():"addSwatch"==e?this.addSwatch():"removeSwatch"==e?this.removeSwatch(s,s.title):i.contains("color-picker__swatch")&&a&&(this.history.last=this.color,this.setColor(this.getHSLA(a)))}var $=Object.freeze({__proto__:null,bindEvents:function(){[["scope","input",C],["scope","change",_],["scope","click",O],["scope","wheel",w],["value","change",y]].forEach((([t,e,s])=>this.DOM[t].addEventListener(e,s.bind(this),{pasive:!1}))),window.addEventListener("storage",v.bind(this)),this.settings.onClickOutside&&(document.body.addEventListener("click",b.bind(this)),window.addEventListener("keydown",f.bind(this)))}});function M(){const t=()=>this.settings.onChange(this.CSSColor),e=this.setColor.bind(this);return{_value:[this.color],get pop(){return this._value.pop()},get previous(){return this._value[this._value.length-2]},set last(e){this._value.push(e),t()},undo(){if(this._value.length>1){this.pop;let s=this._value[this._value.length-1];return e(s),t(),s}}}}const x="@yaireo/color-picker/swatches";var D=Object.freeze({__proto__:null,getSetGlobalSwatches:function(t){const e=this.settings.swatchesLocalStorage,s="string"==typeof e?e:"";return e&&t&&(localStorage.setItem(x+s,t),dispatchEvent(new Event("storage"))),localStorage[x+s]?.split(",").filter(String)||[]},syncGlobalSwatchesWithLocal:function(){this.sharedSwatches=this.getSetGlobalSwatches(),this.swatches=this.sharedSwatches.concat(this.initialSwatches),this.DOM.swatches&&setTimeout((()=>{const t=e(this.templates.swatches.call(this,this.swatches,this.initialSwatches));this.DOM.swatches.replaceWith(t),this.DOM.swatches=t}),500)},addSwatch:function(t=this.CSSColor){if(((t,e)=>t.some((t=>r(t)==r(e))))(this.swatches,t))return;const s=e(this.templates.swatch(t));s.classList.add("cp_remove"),this.DOM.swatches.prepend(s),setTimeout((()=>s.classList.remove("cp_remove")),0),this.swatches.unshift(t),this.sharedSwatches.unshift(t),this.getSetGlobalSwatches(this.sharedSwatches)},removeSwatch:function(t,e){t.classList.add("cp_remove"),setTimeout((()=>t.remove()),200);const s=t=>t!=e;this.swatches=this.swatches.filter(s),this.sharedSwatches=this.sharedSwatches.filter(s),this.getSetGlobalSwatches(this.sharedSwatches)}});function k(t){this.settings=Object.assign({},s,t);const{color:e,defaultFormat:i,swatches:a}=this.settings;this.DOM={},this.sharedSwatches=this.getSetGlobalSwatches(),this.initialSwatches=a||[],this.swatches=a&&this.sharedSwatches.concat(this.initialSwatches),this.color=u(e,i),this.history=M.call(this),this.init()}k.prototype={templates:g,...D,...$,getColorFormat:t=>"#"==t[0]?"hex":t.indexOf("hsl")?t.indexOf("rgb")?"":"rgba":"hsla",getHSLA(t){let e;if(t)return t+""=="[object Object]"&&Object.keys(t).join("").startsWith("hsl")?t:(this.colorFormat=this.getColorFormat(t),t.indexOf("hsla")?(t=r(t),t=h(t),e=c(t)):(e=a(t),e={h:e[0],s:e[1],l:e[2],a:e[3]}),e)},swithFormat(){switch(this.colorFormat){case"":case"hex":this.colorFormat="rgba";break;case"rgba":this.colorFormat="hsla";break;case"hsla":this.colorFormat="hex"}this.setCSSColor(),this.DOM.value.value=this.CSSColor},updateRangeSlider(t,e){const s=this.DOM.scope.querySelector(`input[name="${t}"]`);s&&(s.value=e,s.parentNode.style.setProperty("--value",e),s.parentNode.style.setProperty("--text-value",JSON.stringify(""+Math.round(e))),this.updateCSSVar(t,e))},setCSSColor(){this.CSSColor=r(o(this.color)),"rgba"==this.colorFormat?this.CSSColor=h(this.CSSColor):"hsla"==this.colorFormat&&(this.CSSColor=o(this.color)),this.DOM.scope&&this.DOM.scope.setAttribute("data-color-format",this.colorFormat),this.settings.onInput(this.CSSColor)},setColor(t){t&&(t=this.getHSLA(t),this.color=t,this.setCSSColor(),this.DOM.scope&&this.updateAllCSSVars(),this.DOM.value&&(this.DOM.value.value=this.CSSColor))},updateCSSVar(t,e){this.DOM.scope.style.setProperty("--"+t,e)},updateAllCSSVars(){const t=this.NamedHSLA(this.color);Object.entries(t).forEach((([t,e])=>{this.updateRangeSlider(t,e)}))},NamedHSLA:t=>({hue:t.h,saturation:t.s,lightness:t.l,alpha:t.a}),build(){const t=this.templates.scope.call(this);this.DOM.scope=e(t),this.DOM.value=this.DOM.scope.querySelector('input[name="value"]'),this.DOM.swatches=this.DOM.scope.querySelector(".color-picker__swatches")},init(){this.build(),this.setColor(this.color),this.bindEvents()}},t.CSStoHSLA=a,t.HSLAtoCSS=o,t.any_to_hex=r,t.changeColorFormat=u,t.default=k,t.hex_rgba=h,t.rgba_hsla=c,Object.defineProperty(t,"__esModule",{value:!0})})); +/*! Color-Picker 0.12.0 MIT | https://github.com/yairEO/color-picker */ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ColorPicker={})}(this,(function(t){"use strict";var e=t=>(new DOMParser).parseFromString(t.trim(),"text/html").body.firstElementChild,s={color:"white",onInput:t=>t,onChange:t=>t,buttons:{undo:{icon:"↶",title:"Undo"},format:{icon:"⇆",title:"Switch Color Format"},add:{icon:"+",title:"Add to Swatches"}}};const i=t=>t.match(/\((.*)\)/)[1].split(",").map(Number),o=t=>Object.assign([0,0,0,1],t.match(/\((.*)\)/)[1].split(",").map(((t,e)=>3!=e||t.includes("%")?parseFloat(t):100*parseFloat(t)))),a=t=>`hsla(${t.h}, ${t.s}%, ${t.l}%, ${t.a}%)`,n=t=>t.toFixed(1).replace(".0",""),h=t=>{const[e,s,i,o]=(t=>t.match(/\w\w/g))(t),[a,n,h]=[e,s,i].map((t=>parseInt(t,16)));return`rgba(${a},${n},${h},${o?(parseInt(o,16)/255).toFixed(2):1})`},r=t=>{var e,s=document.createElement("canvas").getContext("2d");return s.fillStyle=t,"#"==(e=s.fillStyle)[0]?e:l(e)},l=t=>{const[e,s,o,a]=i(t),n="#"+[e,s,o].map((t=>t.toString(16).padStart(2,"0"))).join("");return 3==t.length?n:n+Math.round(255*a).toString(16).padStart(2,"0")},c=t=>{let[e,s,o,a]=i(t);e/=255,s/=255,o/=255;let h=Math.max(e,s,o),r=Math.min(e,s,o),l=h-r,c=0,u=0,d=((h+r)/2).toPrecision(5);return l&&(u=d>.5?l/(2-h-r):l/(h+r),c=h==e?(s-o)/l+(s(e=(e+"").toLowerCase(),t=r(t),"hex"==e?t:e.startsWith("hsl")?a(c(h(t))):e.startsWith("rgb")?h(t):t);function d({name:t,min:e=0,max:s=100,value:i}){return`
\n \n \n
\n
`}function p(t){const{buttons:{undo:e,format:s}}=this.settings;return`\n
\n \n \n \n
\n
\n `}function S(t,e){const{buttons:{add:s}}=this.settings;return`\n
\n \n ${t.map((t=>m(t,e.includes(t)))).join("")}\n
\n `}function m(t,e){return`
${e?"":''}
`}var g=Object.freeze({__proto__:null,scope:function(){const{h:t,s:e,l:s,a:i}=this.color;return`\n
\n ${d({name:"hue",value:t,max:"360"})}\n ${d({name:"saturation",value:e})}\n ${d({name:"lightness",value:s})}\n ${d({name:"alpha",value:i})}\n \n ${p.call(this,this.color)}\n ${this.swatches?S.call(this,this.swatches,this.initialSwatches):""}\n
\n `},slider:d,swatch:m,swatches:S,value:p});function v(){this.syncGlobalSwatchesWithLocal()}function w(t){t.preventDefault();const{value:e,max:s}=t.target,i=-1*Math.sign(t.deltaY);e&&s&&(t.target.value=Math.min(Math.max(+e+i,0),+s),C.call(this,t))}function f(t){"Escape"==t.key&&this.settings.onClickOutside(t)}function b(t){this.DOM.scope.contains(t.target)||this.settings.onClickOutside(t)}function C(t){const{name:e,value:s,type:i}=t.target;"range"==i&&this.setColor({...this.color,[e[0]]:+s})}function _(t){const{type:e}=t.target;"range"!=e&&"text"!=e||(this.history.last=this.color)}function y(t){this.setColor(this.getHSLA(t.target.value)),this.DOM.value.blur()}function O(t){const{name:e,parentNode:s,classList:i,title:o}=t.target;"format"==e?this.swithFormat():"undo"==e?this.history.undo():"addSwatch"==e?this.addSwatch():"removeSwatch"==e?this.removeSwatch(s,s.title):i.contains("color-picker__swatch")&&o&&(this.history.last=this.color,this.setColor(this.getHSLA(o)))}var $=Object.freeze({__proto__:null,bindEvents:function(){[["scope","input",C],["scope","change",_],["scope","click",O],["scope","wheel",w],["value","change",y]].forEach((([t,e,s])=>this.DOM[t].addEventListener(e,s.bind(this),{pasive:!1}))),window.addEventListener("storage",v.bind(this)),this.settings.onClickOutside&&(document.body.addEventListener("click",b.bind(this)),window.addEventListener("keydown",f.bind(this)))}});function M(){const t=()=>this.settings.onChange(this.CSSColor),e=this.setColor.bind(this);return{_value:[this.color],get pop(){return this._value.pop()},get previous(){return this._value[this._value.length-2]},set last(e){this._value.push(e),t()},undo(){if(this._value.length>1){this.pop;let s=this._value[this._value.length-1];return e(s),t(),s}}}}const x=(t,e)=>t.some((t=>r(t)==r(e))),D="@yaireo/color-picker/swatches";var k=Object.freeze({__proto__:null,addSwatch:function(t=this.CSSColor){if(x(this.swatches,t))return;const s=e(this.templates.swatch(t));s.classList.add("cp_remove"),this.DOM.swatches.prepend(s),setTimeout((()=>s.classList.remove("cp_remove")),0),this.swatches.unshift(t),this.sharedSwatches.unshift(t),this.getSetGlobalSwatches(this.sharedSwatches)},getSetGlobalSwatches:function(t){const e=this.settings.swatchesLocalStorage,s="string"==typeof e?e:"";return e&&t&&(localStorage.setItem(D+s,t.join(";")),dispatchEvent(new Event("storage"))),localStorage[D+s]?.split(";").filter(String)||[]},removeSwatch:function(t,e){t.classList.add("cp_remove"),setTimeout((()=>t.remove()),200);const s=t=>t!=e;this.swatches=this.swatches.filter(s),this.sharedSwatches=this.sharedSwatches.filter(s),this.getSetGlobalSwatches(this.sharedSwatches)},syncGlobalSwatchesWithLocal:function(){this.sharedSwatches=this.getSetGlobalSwatches(),this.swatches=this.sharedSwatches.concat(this.initialSwatches),this.DOM.swatches&&setTimeout((()=>{const t=e(this.templates.swatches.call(this,this.swatches,this.initialSwatches));this.DOM.swatches.replaceWith(t),this.DOM.swatches=t}),500)}});function F(t){this.settings=Object.assign({},s,t);const{color:e,defaultFormat:i,swatches:o}=this.settings;this.DOM={},this.sharedSwatches=this.getSetGlobalSwatches(),this.initialSwatches=o||[],this.swatches=o&&this.sharedSwatches.concat(this.initialSwatches),this.color=u(e,i),this.history=M.call(this),this.init()}F.prototype={templates:g,...k,...$,getColorFormat:t=>"#"==t[0]?"hex":t.indexOf("hsl")?t.indexOf("rgb")?"":"rgba":"hsla",getHSLA(t){let e;if(t)return t+""=="[object Object]"&&Object.keys(t).join("").startsWith("hsl")?t:(this.colorFormat=this.getColorFormat(t),t.indexOf("hsla")?(t=r(t),t=h(t),e=c(t)):(e=o(t),e={h:e[0],s:e[1],l:e[2],a:e[3]}),e)},swithFormat(){switch(this.colorFormat){case"":case"hex":this.colorFormat="rgba";break;case"rgba":this.colorFormat="hsla";break;case"hsla":this.colorFormat="hex"}this.setCSSColor(),this.DOM.value.value=this.CSSColor},updateRangeSlider(t,e){const s=this.DOM.scope.querySelector(`input[name="${t}"]`);s&&(s.value=e,s.parentNode.style.setProperty("--value",e),s.parentNode.style.setProperty("--text-value",JSON.stringify(""+Math.round(e))),this.updateCSSVar(t,e))},setCSSColor(){this.CSSColor=r(a(this.color)),"rgba"==this.colorFormat?this.CSSColor=h(this.CSSColor):"hsla"==this.colorFormat&&(this.CSSColor=a(this.color)),this.DOM.scope&&this.DOM.scope.setAttribute("data-color-format",this.colorFormat),this.settings.onInput(this.CSSColor)},setColor(t){t&&(t=this.getHSLA(t),this.color=t,this.setCSSColor(),this.DOM.scope&&this.updateAllCSSVars(),this.DOM.value&&(this.DOM.value.value=this.CSSColor))},updateCSSVar(t,e){this.DOM.scope.style.setProperty(`--${t}`,e)},updateAllCSSVars(){const t=this.NamedHSLA(this.color);Object.entries(t).forEach((([t,e])=>{this.updateRangeSlider(t,e)}))},NamedHSLA:t=>({hue:t.h,saturation:t.s,lightness:t.l,alpha:t.a}),build(){const t=this.templates.scope.call(this);this.DOM.scope=e(t),this.DOM.value=this.DOM.scope.querySelector('input[name="value"]'),this.DOM.swatches=this.DOM.scope.querySelector(".color-picker__swatches")},init(){this.build(),this.setColor(this.color),this.bindEvents()}},t.CSStoHSLA=o,t.HSLAtoCSS=a,t.any_to_hex=r,t.changeColorFormat=u,t.default=F,t.hex_rgba=h,t.rgba_hsla=c,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=color-picker.js.map diff --git a/dist/color-picker.js.map b/dist/color-picker.js.map index 8670ba4..337dc25 100644 --- a/dist/color-picker.js.map +++ b/dist/color-picker.js.map @@ -1 +1 @@ -{"version":3,"file":"color-picker.js","sources":["../src/utils/parseHTML.js","../src/defaults.js","../src/utils/convertColors.js","../src/templates.js","../src/events.js","../src/history.js","../src/swatches.js","../src/color-picker.js","../src/utils/isObject.js"],"sourcesContent":["export default (str) => {\r\n var parser = new DOMParser(),\r\n node = parser.parseFromString(str.trim(), \"text/html\")\r\n\r\n return node.body.firstElementChild\r\n}","export default {\r\n color: 'white',\r\n onInput: _=>_,\r\n onChange: _=>_,\r\n buttons: {\r\n undo: {\r\n icon: '↶',\r\n title: 'Undo'\r\n },\r\n format: {\r\n icon: '⇆',\r\n title: 'Switch Color Format'\r\n },\r\n add: {\r\n icon: '+',\r\n title: 'Add to Swatches'\r\n }\r\n }\r\n}","// Based on:\r\n// https://github.com/kohrongying/hex-to-rgba/blob/master/src/helpers.js\r\n\r\nexport const CSStoHEX = hex => hex.match(/\\w\\w/g)\r\nexport const CSStoRGBA = rgba => rgba.match(/\\((.*)\\)/)[1].split(',').map(Number)\r\nexport const CSStoHSLA = hsla => Object.assign([0,0,0,1], hsla.match(/\\((.*)\\)/)[1].split(',').map((v,i) => i != 3 ? parseFloat(v) : v.includes('%') ? parseFloat(v) : parseFloat(v)*100 ))\r\nexport const HSLAtoCSS = hsla => `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a}%)`\r\n\r\nconst roundNumber = number => number.toFixed(1).replace('.0', '')\r\n\r\nexport const hex_rgba = hex => {\r\n const [rr, gg, bb, aa] = CSStoHEX(hex),\r\n [r,g,b] = [rr,gg,bb].map(v => parseInt(v, 16)),\r\n alpha = aa ? (parseInt(aa, 16) / 255).toFixed(2) : 1\r\n return `rgba(${r},${g},${b},${alpha})`\r\n}\r\n\r\nexport const any_to_hex = str => {\r\n var ctx = document.createElement(\"canvas\").getContext(\"2d\"),\r\n output;\r\n\r\n\tctx.fillStyle = str\r\n\toutput = ctx.fillStyle\r\n\r\n return output[0] == '#' ? output : rgba_hex(output)\r\n}\r\n\r\nexport const rgba_hex = rgba => {\r\n const [r,g,b,a] = CSStoRGBA(rgba),\r\n hex = \"#\" + [r,g,b].map(v => v.toString(16).padStart(2, '0')).join('')\r\n return rgba.length == 3 ? hex : hex + Math.round(a * 255).toString(16).padStart(2, '0')\r\n}\r\n\r\nexport const rgba_hsla = rgba => {\r\n let [r,g,b,a] = CSStoRGBA(rgba)\r\n\r\n r = r / 255\r\n g = g / 255\r\n b = b / 255\r\n\r\n let max = Math.max(r, g, b),\r\n min = Math.min(r, g, b),\r\n d = max - min,\r\n\r\n h = 0,\r\n s = 0,\r\n l = ((max + min) / 2).toPrecision(5)\r\n\r\n if (d){\r\n s = l > 0.5\r\n ? d / (2 - max - min)\r\n : d / (max + min)\r\n\r\n h = max == r\r\n ? (g - b) / d + (g < b ? 6 : 0)\r\n : max == g\r\n ? h = (b - r) / d + 2\r\n : h = (r - g) / d + 4\r\n\r\n h /= 6\r\n }\r\n\r\n return {\r\n h: roundNumber(h * 360),\r\n s: roundNumber(s * 100),\r\n l: roundNumber(l * 100),\r\n a: roundNumber(a * 100)\r\n }\r\n}\r\n\r\nexport const hexToHsl = hex => rgba_hsla( hex_rgba(hex) )\r\n\r\n/**\r\n * converts any color format to anoter\r\n * @param {String} color\r\n * @param {String} format ['hex', 'rgba', 'hsla']\r\n * @returns a color in another format\r\n */\r\nexport const changeColorFormat = (color, format) => {\r\n format = (format+\"\").toLowerCase()\r\n color = any_to_hex(color)\r\n\r\n return format == 'hex'\r\n ? color\r\n : format.startsWith('hsl')\r\n ? HSLAtoCSS( rgba_hsla( hex_rgba(color) ) )\r\n : format.startsWith('rgb')\r\n ? hex_rgba(color)\r\n : color\r\n}\r\n","import { any_to_hex, HSLAtoCSS } from './utils/convertColors'\r\n\r\nexport function scope() {\r\n const {h,s,l,a} = this.color\r\n const className = `color-picker ${this.settings.className||''}`.trim()\r\n\r\n return `\r\n
\r\n ${slider({ name:\"hue\", value:h, max:\"360\" })}\r\n ${slider({ name:\"saturation\", value:s })}\r\n ${slider({ name:\"lightness\", value:l })}\r\n ${slider({ name:\"alpha\", value:a })}\r\n \r\n ${value.call(this, this.color)}\r\n ${this.swatches ? swatches.call(this, this.swatches, this.initialSwatches) : ''}\r\n
\r\n `\r\n}\r\n\r\nexport function slider({ name, min = 0, max = 100, value }){\r\n return `
\r\n \r\n \r\n
\r\n
`\r\n}\r\n\r\nexport function value( color ){\r\n const { buttons:{undo, format} } = this.settings\r\n\r\n return `\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n `\r\n}\r\n\r\nexport function swatches(swatches, initialSwatches){\r\n const { buttons:{add} } = this.settings\r\n\r\n return `\r\n
\r\n \r\n ${swatches.map(color => swatch(color, initialSwatches.includes(color))).join('')}\r\n
\r\n `\r\n}\r\n\r\nexport function swatch(color, isLocked){\r\n return `
${isLocked ? '' : ''}
`\r\n}\r\n\r\n","export function bindEvents(){\r\n [\r\n ['scope', 'input' , onInput],\r\n ['scope', 'change', onRangeChange],\r\n ['scope', 'click' , onButtonClick],\r\n ['scope', 'wheel' , onWheelMove],\r\n ['value', 'change', onValueChange],\r\n ].forEach(([elm, event, cb]) =>\r\n this.DOM[elm].addEventListener(event, cb.bind(this), {pasive:false})\r\n )\r\n\r\n window.addEventListener('storage', onStorage.bind(this))\r\n\r\n // assuming picker uses as a popup\r\n if( this.settings.onClickOutside ){\r\n document.body.addEventListener('click', onClickOutside.bind(this))\r\n window.addEventListener('keydown', onkeydown.bind(this))\r\n }\r\n}\r\n\r\nfunction onStorage(){\r\n this.syncGlobalSwatchesWithLocal()\r\n}\r\n\r\nfunction onWheelMove(e){\r\n // disable window scroll: https://stackoverflow.com/a/23606063/104380\r\n e.preventDefault()\r\n\r\n const { value, max } = e.target,\r\n delta = Math.sign(e.deltaY) * -1 // normalize jump value to either -1 or 1\r\n\r\n // since the event is on the window object, the callback will be fired in all\r\n // instances, therefore only the currently \"active\" picker should be used.\r\n if( value && max ){\r\n e.target.value = Math.min(Math.max(+value + delta, 0), +max)\r\n onInput.call(this, e)\r\n }\r\n}\r\n\r\nfunction onkeydown(e){\r\n if( e.key == 'Escape' )\r\n this.settings.onClickOutside(e)\r\n}\r\n\r\nfunction onClickOutside(e){\r\n if( !this.DOM.scope.contains(e.target) )\r\n this.settings.onClickOutside(e)\r\n}\r\n\r\nfunction onInput(e){\r\n const {name, value, type} = e.target\r\n\r\n if( type == 'range' ){\r\n this.setColor({...this.color, [name[0]]: +value})\r\n }\r\n}\r\n\r\nfunction onRangeChange(e){\r\n const { type } = e.target\r\n\r\n if( type == 'range' || type == 'text' ){\r\n this.history.last = this.color\r\n }\r\n}\r\n\r\nfunction onValueChange(e){\r\n this.setColor( this.getHSLA(e.target.value) )\r\n this.DOM.value.blur()\r\n}\r\n\r\nfunction onButtonClick(e){\r\n const { name, parentNode:pNode, classList, title } = e.target\r\n\r\n // switch(name){\r\n // case\r\n // }\r\n if( name == 'format' )\r\n this.swithFormat()\r\n\r\n else if( name == 'undo' )\r\n this.history.undo()\r\n\r\n else if( name == 'addSwatch' )\r\n this.addSwatch()\r\n\r\n else if( name == 'removeSwatch' )\r\n this.removeSwatch(pNode, pNode.title)\r\n\r\n else if( classList.contains('color-picker__swatch') && title ){\r\n this.history.last = this.color\r\n this.setColor( this.getHSLA(title) )\r\n }\r\n}","export default function history(){\r\n const historyChange = () => this.settings.onChange(this.CSSColor)\r\n const setColor = this.setColor.bind(this)\r\n\r\n return {\r\n _value: [this.color],\r\n get pop(){\r\n return this._value.pop()\r\n },\r\n get previous(){\r\n return this._value[this._value.length - 2]\r\n },\r\n set last( item ){\r\n this._value.push(item)\r\n historyChange()\r\n },\r\n undo(){\r\n // leave one last item in the value array\r\n if( this._value.length > 1 ){\r\n // get rid of the current color\r\n this.pop\r\n\r\n // get \"new\" last color\r\n let last = this._value[this._value.length - 1]\r\n\r\n setColor(last)\r\n historyChange()\r\n\r\n return last\r\n }\r\n }\r\n }\r\n}","import parseHTML from './utils/parseHTML'\r\nimport { any_to_hex } from './utils/convertColors'\r\n\r\nconst swatchesIncludes = (swatches, color) => swatches.some(swatch => any_to_hex(swatch) == any_to_hex(color))\r\n\r\nconst storeKey = '@yaireo/color-picker/swatches'\r\n\r\nexport function getSetGlobalSwatches(data){\r\n // if \"swatchesLocalStorage\" is \"false\", do not save to localstorage\r\n const _store = this.settings.swatchesLocalStorage,\r\n customKey = typeof _store == 'string' ? _store : '';\r\n\r\n if ( _store && data ){\r\n localStorage.setItem(storeKey + customKey, data)\r\n dispatchEvent( new Event('storage') )\r\n }\r\n\r\n // \"filter(String)\" clean up any empty strings\r\n return localStorage[storeKey + customKey]?.split(',').filter(String) || []\r\n}\r\n\r\n// sync instance swatches with global ones. skip duplicates\r\nexport function syncGlobalSwatchesWithLocal(){\r\n this.sharedSwatches = this.getSetGlobalSwatches()\r\n this.swatches = this.sharedSwatches.concat(this.initialSwatches)\r\n\r\n // reflect swatches change in the DOM (add/remove)\r\n // a delay is needed becasue the whole \"swatches\" element is replaced completely\r\n // if if done immediately, there will be no time for animations (add/remove) and also\r\n // a \"click outside\" event will be registered\r\n this.DOM.swatches && setTimeout(()=>{\r\n const template = parseHTML(this.templates.swatches.call(this, this.swatches, this.initialSwatches))\r\n this.DOM.swatches.replaceWith(template)\r\n this.DOM.swatches = template\r\n }, 500)\r\n}\r\n\r\nexport function addSwatch( color = this.CSSColor ){\r\n // if already exist, abort\r\n if( swatchesIncludes(this.swatches, color) ) return\r\n\r\n // add DOM swatch node\r\n const swatchElm = parseHTML( this.templates.swatch(color) )\r\n swatchElm.classList.add('cp_remove')\r\n this.DOM.swatches.prepend(swatchElm)\r\n setTimeout(() => swatchElm.classList.remove('cp_remove'), 0)\r\n\r\n // save swatch to instance state\r\n this.swatches.unshift(color)\r\n this.sharedSwatches.unshift(color)\r\n\r\n // sync localstorage\r\n this.getSetGlobalSwatches(this.sharedSwatches)\r\n}\r\n\r\nexport function removeSwatch( swatchElm, color ){\r\n swatchElm.classList.add('cp_remove')\r\n setTimeout(() => swatchElm.remove(), 200)\r\n\r\n const notColor = swatch => swatch != color\r\n\r\n this.swatches = this.swatches.filter(notColor)\r\n this.sharedSwatches = this.sharedSwatches.filter(notColor)\r\n\r\n // sync localstorage\r\n this.getSetGlobalSwatches(this.sharedSwatches)\r\n}\r\n","import parseHTML from './utils/parseHTML'\r\nimport DEFAULTS from './defaults'\r\nimport * as templates from './templates'\r\nimport * as events from './events'\r\nimport history from './history'\r\nimport * as swatches from './swatches'\r\nimport isObject from './utils/isObject'\r\nimport {any_to_hex, hex_rgba, rgba_hsla, CSStoHSLA, HSLAtoCSS, changeColorFormat} from './utils/convertColors'\r\n\r\nvar raf = window.requestAnimationFrame || (cb => window.setTimeout(cb, 1000 / 60))\r\n\r\nfunction ColorPicker(settings){\r\n this.settings = Object.assign({}, DEFAULTS, settings)\r\n\r\n const {color, defaultFormat, swatches} = this.settings\r\n\r\n this.DOM = {}\r\n\r\n this.sharedSwatches = this.getSetGlobalSwatches() // only this gets syncs with the localstorage (if chosen to)\r\n this.initialSwatches = swatches || []\r\n this.swatches = swatches && this.sharedSwatches.concat(this.initialSwatches) // global (shared) via localstorage\r\n this.color = changeColorFormat(color, defaultFormat)\r\n this.history = history.call(this)\r\n this.init()\r\n}\r\n\r\nColorPicker.prototype = {\r\n templates,\r\n ...swatches,\r\n ...events,\r\n\r\n getColorFormat( color ){\r\n return color[0] == '#'\r\n ? 'hex'\r\n : !color.indexOf('hsl')\r\n ? 'hsla'\r\n : !color.indexOf('rgb')\r\n ? 'rgba'\r\n : ''\r\n },\r\n\r\n /**\r\n * normalizes any color to HSLA-Object\r\n * @param {String} color\r\n */\r\n getHSLA( color ){\r\n let result\r\n\r\n if( !color ) return\r\n\r\n // if color argument is already an HSLA object, return it as-is\r\n if( isObject(color) && Object.keys(color).join('').startsWith('hsl'))\r\n return color\r\n\r\n this.colorFormat = this.getColorFormat(color)\r\n\r\n if( !color.indexOf('hsla') ){\r\n result = CSStoHSLA(color)\r\n result = { h:result[0], s:result[1], l:result[2], a:result[3] }\r\n }\r\n\r\n else{\r\n color = any_to_hex(color)\r\n color = hex_rgba(color)\r\n result = rgba_hsla(color)\r\n }\r\n\r\n return result\r\n },\r\n\r\n swithFormat(){\r\n const _cf = this.colorFormat\r\n\r\n switch( _cf ){\r\n case '':\r\n case 'hex':\r\n this.colorFormat = 'rgba'\r\n break\r\n case 'rgba':\r\n this.colorFormat = 'hsla'\r\n break\r\n case 'hsla':\r\n this.colorFormat = 'hex'\r\n break\r\n }\r\n\r\n // get a new \"this.CSSColor\" after changing the format above\r\n this.setCSSColor()\r\n this.DOM.value.value = this.CSSColor\r\n },\r\n\r\n updateRangeSlider(name, value){\r\n const elm = this.DOM.scope.querySelector(`input[name=\"${name}\"]`)\r\n\r\n if( !elm ) return\r\n\r\n elm.value = value\r\n elm.parentNode.style.setProperty('--value', value)\r\n elm.parentNode.style.setProperty('--text-value', JSON.stringify(\"\"+Math.round(value)))\r\n\r\n this.updateCSSVar(name, value)\r\n },\r\n\r\n /**\r\n * sets the CSS color text-value according to the current format\r\n */\r\n setCSSColor(){\r\n this.CSSColor = any_to_hex( HSLAtoCSS(this.color) )\r\n\r\n if( this.colorFormat == 'rgba' )\r\n this.CSSColor = hex_rgba(this.CSSColor)\r\n\r\n else if( this.colorFormat == 'hsla' )\r\n this.CSSColor = HSLAtoCSS(this.color)\r\n\r\n this.DOM.scope && this.DOM.scope.setAttribute(\"data-color-format\", this.colorFormat)\r\n this.settings.onInput(this.CSSColor)\r\n },\r\n\r\n /**\r\n *\r\n * @param {Object} hsla {h,s,l,a}\r\n */\r\n setColor( value ){\r\n if( !value ) return\r\n\r\n value = this.getHSLA(value)\r\n\r\n this.color = value\r\n this.setCSSColor()\r\n this.DOM.scope && this.updateAllCSSVars()\r\n\r\n if( this.DOM.value )\r\n this.DOM.value.value = this.CSSColor\r\n },\r\n\r\n updateCSSVar(name, value){\r\n // this.DOM.value\r\n this.DOM.scope.style.setProperty(`--${name}`, value)\r\n },\r\n\r\n updateAllCSSVars(){\r\n const hsla = this.NamedHSLA(this.color)\r\n Object.entries(hsla).forEach(([k, v]) => {\r\n this.updateRangeSlider(k, v)\r\n })\r\n },\r\n\r\n NamedHSLA( hsla ){\r\n return {\r\n \"hue\" : hsla.h,\r\n \"saturation\" : hsla.s,\r\n \"lightness\" : hsla.l,\r\n \"alpha\" : hsla.a\r\n }\r\n },\r\n\r\n build(){\r\n const template = this.templates.scope.call(this)\r\n this.DOM.scope = parseHTML(template)\r\n this.DOM.value = this.DOM.scope.querySelector('input[name=\"value\"]')\r\n this.DOM.swatches = this.DOM.scope.querySelector('.color-picker__swatches')\r\n },\r\n\r\n init(){\r\n this.build()\r\n this.setColor(this.color)\r\n // this.updateAllCSSVars()\r\n this.bindEvents()\r\n }\r\n}\r\n\r\nexport { any_to_hex, hex_rgba, rgba_hsla, CSStoHSLA, HSLAtoCSS, changeColorFormat }\r\n\r\nexport default ColorPicker","export default function isObject(obj) {\r\n return (obj+\"\") === \"[object Object]\"\r\n}\r\n"],"names":["str","DOMParser","parseFromString","trim","body","firstElementChild","color","onInput","_","onChange","buttons","undo","icon","title","format","add","CSStoRGBA","rgba","match","split","map","Number","CSStoHSLA","hsla","Object","assign","v","i","includes","parseFloat","HSLAtoCSS","h","s","l","a","roundNumber","number","toFixed","replace","hex_rgba","hex","rr","gg","bb","aa","CSStoHEX","r","g","b","parseInt","any_to_hex","output","ctx","document","createElement","getContext","fillStyle","rgba_hex","toString","padStart","join","length","Math","round","rgba_hsla","max","min","d","toPrecision","changeColorFormat","toLowerCase","startsWith","slider","name","value","this","settings","swatches","initialSwatches","swatch","isLocked","className","call","onStorage","syncGlobalSwatchesWithLocal","onWheelMove","e","preventDefault","target","delta","sign","deltaY","onkeydown","key","onClickOutside","DOM","scope","contains","type","setColor","onRangeChange","history","last","onValueChange","getHSLA","blur","onButtonClick","parentNode","pNode","classList","swithFormat","addSwatch","removeSwatch","forEach","elm","event","cb","addEventListener","bind","pasive","window","historyChange","CSSColor","_value","pop","item","push","storeKey","data","_store","swatchesLocalStorage","customKey","localStorage","setItem","dispatchEvent","Event","filter","String","sharedSwatches","getSetGlobalSwatches","concat","setTimeout","template","parseHTML","templates","replaceWith","some","swatchesIncludes","swatchElm","prepend","remove","unshift","notColor","ColorPicker","DEFAULTS","defaultFormat","init","prototype","events","getColorFormat","indexOf","result","keys","colorFormat","setCSSColor","updateRangeSlider","querySelector","style","setProperty","JSON","stringify","updateCSSVar","setAttribute","updateAllCSSVars","NamedHSLA","entries","k","build","bindEvents"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"color-picker.js","sources":["../src/utils/parseHTML.js","../src/defaults.js","../src/utils/convertColors.js","../src/templates.js","../src/events.js","../src/history.js","../src/swatches.js","../src/color-picker.js","../src/utils/isObject.js"],"sourcesContent":["export default (str) => {\r\n var parser = new DOMParser(),\r\n node = parser.parseFromString(str.trim(), \"text/html\")\r\n\r\n return node.body.firstElementChild\r\n}","export default {\r\n color: 'white',\r\n onInput: _=>_,\r\n onChange: _=>_,\r\n buttons: {\r\n undo: {\r\n icon: '↶',\r\n title: 'Undo'\r\n },\r\n format: {\r\n icon: '⇆',\r\n title: 'Switch Color Format'\r\n },\r\n add: {\r\n icon: '+',\r\n title: 'Add to Swatches'\r\n }\r\n }\r\n}","// Based on:\r\n// https://github.com/kohrongying/hex-to-rgba/blob/master/src/helpers.js\r\n\r\nexport const CSStoHEX = hex => hex.match(/\\w\\w/g)\r\nexport const CSStoRGBA = rgba => rgba.match(/\\((.*)\\)/)[1].split(',').map(Number)\r\nexport const CSStoHSLA = hsla => Object.assign([0,0,0,1], hsla.match(/\\((.*)\\)/)[1].split(',').map((v,i) => i != 3 ? parseFloat(v) : v.includes('%') ? parseFloat(v) : parseFloat(v)*100 ))\r\nexport const HSLAtoCSS = hsla => `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a}%)`\r\n\r\nconst roundNumber = number => number.toFixed(1).replace('.0', '')\r\n\r\nexport const hex_rgba = hex => {\r\n const [rr, gg, bb, aa] = CSStoHEX(hex),\r\n [r,g,b] = [rr,gg,bb].map(v => parseInt(v, 16)),\r\n alpha = aa ? (parseInt(aa, 16) / 255).toFixed(2) : 1\r\n return `rgba(${r},${g},${b},${alpha})`\r\n}\r\n\r\nexport const any_to_hex = str => {\r\n var ctx = document.createElement(\"canvas\").getContext(\"2d\"),\r\n output;\r\n\r\n\tctx.fillStyle = str\r\n\toutput = ctx.fillStyle\r\n\r\n return output[0] == '#' ? output : rgba_hex(output)\r\n}\r\n\r\nexport const rgba_hex = rgba => {\r\n const [r,g,b,a] = CSStoRGBA(rgba),\r\n hex = \"#\" + [r,g,b].map(v => v.toString(16).padStart(2, '0')).join('')\r\n return rgba.length == 3 ? hex : hex + Math.round(a * 255).toString(16).padStart(2, '0')\r\n}\r\n\r\nexport const rgba_hsla = rgba => {\r\n let [r,g,b,a] = CSStoRGBA(rgba)\r\n\r\n r = r / 255\r\n g = g / 255\r\n b = b / 255\r\n\r\n let max = Math.max(r, g, b),\r\n min = Math.min(r, g, b),\r\n d = max - min,\r\n\r\n h = 0,\r\n s = 0,\r\n l = ((max + min) / 2).toPrecision(5)\r\n\r\n if (d){\r\n s = l > 0.5\r\n ? d / (2 - max - min)\r\n : d / (max + min)\r\n\r\n h = max == r\r\n ? (g - b) / d + (g < b ? 6 : 0)\r\n : max == g\r\n ? h = (b - r) / d + 2\r\n : h = (r - g) / d + 4\r\n\r\n h /= 6\r\n }\r\n\r\n return {\r\n h: roundNumber(h * 360),\r\n s: roundNumber(s * 100),\r\n l: roundNumber(l * 100),\r\n a: roundNumber(a * 100)\r\n }\r\n}\r\n\r\nexport const hexToHsl = hex => rgba_hsla( hex_rgba(hex) )\r\n\r\n/**\r\n * converts any color format to anoter\r\n * @param {String} color\r\n * @param {String} format ['hex', 'rgba', 'hsla']\r\n * @returns a color in another format\r\n */\r\nexport const changeColorFormat = (color, format) => {\r\n format = (format+\"\").toLowerCase()\r\n color = any_to_hex(color)\r\n\r\n return format == 'hex'\r\n ? color\r\n : format.startsWith('hsl')\r\n ? HSLAtoCSS( rgba_hsla( hex_rgba(color) ) )\r\n : format.startsWith('rgb')\r\n ? hex_rgba(color)\r\n : color\r\n}\r\n","import { any_to_hex, HSLAtoCSS } from './utils/convertColors'\r\n\r\nexport function scope() {\r\n const {h,s,l,a} = this.color\r\n const className = `color-picker ${this.settings.className||''}`.trim()\r\n\r\n return `\r\n
\r\n ${slider({ name:\"hue\", value:h, max:\"360\" })}\r\n ${slider({ name:\"saturation\", value:s })}\r\n ${slider({ name:\"lightness\", value:l })}\r\n ${slider({ name:\"alpha\", value:a })}\r\n \r\n ${value.call(this, this.color)}\r\n ${this.swatches ? swatches.call(this, this.swatches, this.initialSwatches) : ''}\r\n
\r\n `\r\n}\r\n\r\nexport function slider({ name, min = 0, max = 100, value }){\r\n return `
\r\n \r\n \r\n
\r\n
`\r\n}\r\n\r\nexport function value( color ){\r\n const { buttons:{undo, format} } = this.settings\r\n\r\n return `\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n `\r\n}\r\n\r\nexport function swatches(swatches, initialSwatches){\r\n const { buttons:{add} } = this.settings\r\n\r\n return `\r\n
\r\n \r\n ${swatches.map(color => swatch(color, initialSwatches.includes(color))).join('')}\r\n
\r\n `\r\n}\r\n\r\nexport function swatch(color, isLocked){\r\n return `
${isLocked ? '' : ''}
`\r\n}\r\n\r\n","export function bindEvents(){\r\n [\r\n ['scope', 'input' , onInput],\r\n ['scope', 'change', onRangeChange],\r\n ['scope', 'click' , onButtonClick],\r\n ['scope', 'wheel' , onWheelMove],\r\n ['value', 'change', onValueChange],\r\n ].forEach(([elm, event, cb]) =>\r\n this.DOM[elm].addEventListener(event, cb.bind(this), {pasive:false})\r\n )\r\n\r\n window.addEventListener('storage', onStorage.bind(this))\r\n\r\n // assuming picker uses as a popup\r\n if( this.settings.onClickOutside ){\r\n document.body.addEventListener('click', onClickOutside.bind(this))\r\n window.addEventListener('keydown', onkeydown.bind(this))\r\n }\r\n}\r\n\r\nfunction onStorage(){\r\n this.syncGlobalSwatchesWithLocal()\r\n}\r\n\r\nfunction onWheelMove(e){\r\n // disable window scroll: https://stackoverflow.com/a/23606063/104380\r\n e.preventDefault()\r\n\r\n const { value, max } = e.target,\r\n delta = Math.sign(e.deltaY) * -1 // normalize jump value to either -1 or 1\r\n\r\n // since the event is on the window object, the callback will be fired in all\r\n // instances, therefore only the currently \"active\" picker should be used.\r\n if( value && max ){\r\n e.target.value = Math.min(Math.max(+value + delta, 0), +max)\r\n onInput.call(this, e)\r\n }\r\n}\r\n\r\nfunction onkeydown(e){\r\n if( e.key == 'Escape' )\r\n this.settings.onClickOutside(e)\r\n}\r\n\r\nfunction onClickOutside(e){\r\n if( !this.DOM.scope.contains(e.target) )\r\n this.settings.onClickOutside(e)\r\n}\r\n\r\nfunction onInput(e){\r\n const {name, value, type} = e.target\r\n\r\n if( type == 'range' ){\r\n this.setColor({...this.color, [name[0]]: +value})\r\n }\r\n}\r\n\r\nfunction onRangeChange(e){\r\n const { type } = e.target\r\n\r\n if( type == 'range' || type == 'text' ){\r\n this.history.last = this.color\r\n }\r\n}\r\n\r\nfunction onValueChange(e){\r\n this.setColor( this.getHSLA(e.target.value) )\r\n this.DOM.value.blur()\r\n}\r\n\r\nfunction onButtonClick(e){\r\n const { name, parentNode:pNode, classList, title } = e.target\r\n\r\n // switch(name){\r\n // case\r\n // }\r\n if( name == 'format' )\r\n this.swithFormat()\r\n\r\n else if( name == 'undo' )\r\n this.history.undo()\r\n\r\n else if( name == 'addSwatch' )\r\n this.addSwatch()\r\n\r\n else if( name == 'removeSwatch' )\r\n this.removeSwatch(pNode, pNode.title)\r\n\r\n else if( classList.contains('color-picker__swatch') && title ){\r\n this.history.last = this.color\r\n this.setColor( this.getHSLA(title) )\r\n }\r\n}","/**\r\n * Changes history manager\r\n */\r\nexport default function history(){\r\n const historyChange = () => this.settings.onChange(this.CSSColor)\r\n const setColor = this.setColor.bind(this)\r\n\r\n return {\r\n _value: [this.color],\r\n\r\n get pop(){\r\n return this._value.pop()\r\n },\r\n\r\n get previous(){\r\n return this._value[this._value.length - 2]\r\n },\r\n\r\n set last( item ){\r\n this._value.push(item)\r\n historyChange()\r\n },\r\n\r\n undo(){\r\n // leave one last item in the value array\r\n if( this._value.length > 1 ){\r\n // get rid of the current color\r\n this.pop\r\n\r\n // get \"new\" last color\r\n let last = this._value[this._value.length - 1]\r\n\r\n setColor(last)\r\n historyChange()\r\n\r\n return last\r\n }\r\n }\r\n }\r\n}","import parseHTML from './utils/parseHTML'\r\nimport { any_to_hex } from './utils/convertColors'\r\n\r\nconst swatchesIncludes = (swatches, color) => swatches.some(swatch => any_to_hex(swatch) == any_to_hex(color))\r\n\r\nconst storeKey = '@yaireo/color-picker/swatches'\r\n\r\nexport function getSetGlobalSwatches(data){\r\n // if \"swatchesLocalStorage\" is \"false\", do not save to localstorage\r\n const _store = this.settings.swatchesLocalStorage,\r\n customKey = typeof _store == 'string' ? _store : '';\r\n\r\n if ( _store && data ){\r\n localStorage.setItem(storeKey + customKey, data.join(';'))\r\n dispatchEvent( new Event('storage') )\r\n }\r\n\r\n // \"filter(String)\" clean up any empty strings\r\n return localStorage[storeKey + customKey]?.split(';').filter(String) || []\r\n}\r\n\r\n// sync instance swatches with global ones. skip duplicates\r\nexport function syncGlobalSwatchesWithLocal(){\r\n this.sharedSwatches = this.getSetGlobalSwatches()\r\n this.swatches = this.sharedSwatches.concat(this.initialSwatches)\r\n\r\n // reflect swatches change in the DOM (add/remove)\r\n // a delay is needed becasue the whole \"swatches\" element is replaced completely\r\n // if if done immediately, there will be no time for animations (add/remove) and also\r\n // a \"click outside\" event will be registered\r\n this.DOM.swatches && setTimeout(()=>{\r\n const template = parseHTML(this.templates.swatches.call(this, this.swatches, this.initialSwatches))\r\n this.DOM.swatches.replaceWith(template)\r\n this.DOM.swatches = template\r\n }, 500)\r\n}\r\n\r\nexport function addSwatch( color = this.CSSColor ){\r\n // if already exist, abort\r\n if( swatchesIncludes(this.swatches, color) ) return\r\n\r\n // add DOM swatch node\r\n const swatchElm = parseHTML( this.templates.swatch(color) )\r\n swatchElm.classList.add('cp_remove')\r\n this.DOM.swatches.prepend(swatchElm)\r\n setTimeout(() => swatchElm.classList.remove('cp_remove'), 0)\r\n\r\n // save swatch to instance state\r\n this.swatches.unshift(color)\r\n this.sharedSwatches.unshift(color)\r\n\r\n // sync localstorage\r\n this.getSetGlobalSwatches(this.sharedSwatches)\r\n}\r\n\r\nexport function removeSwatch( swatchElm, color ){\r\n swatchElm.classList.add('cp_remove')\r\n setTimeout(() => swatchElm.remove(), 200)\r\n\r\n const notColor = swatch => swatch != color\r\n\r\n this.swatches = this.swatches.filter(notColor)\r\n this.sharedSwatches = this.sharedSwatches.filter(notColor)\r\n\r\n // sync localstorage\r\n this.getSetGlobalSwatches(this.sharedSwatches)\r\n}\r\n","import parseHTML from './utils/parseHTML'\r\nimport DEFAULTS from './defaults'\r\nimport * as templates from './templates'\r\nimport * as events from './events'\r\nimport history from './history'\r\nimport * as swatches from './swatches'\r\nimport isObject from './utils/isObject'\r\nimport {any_to_hex, hex_rgba, rgba_hsla, CSStoHSLA, HSLAtoCSS, changeColorFormat} from './utils/convertColors'\r\n\r\nvar raf = window.requestAnimationFrame || (cb => window.setTimeout(cb, 1000 / 60))\r\n\r\nfunction ColorPicker(settings){\r\n this.settings = Object.assign({}, DEFAULTS, settings)\r\n\r\n const {color, defaultFormat, swatches} = this.settings\r\n\r\n this.DOM = {}\r\n\r\n this.sharedSwatches = this.getSetGlobalSwatches() // only this gets syncs with the localstorage (if chosen to)\r\n this.initialSwatches = swatches || []\r\n this.swatches = swatches && this.sharedSwatches.concat(this.initialSwatches) // global (shared) via localstorage\r\n this.color = changeColorFormat(color, defaultFormat)\r\n this.history = history.call(this)\r\n this.init()\r\n}\r\n\r\nColorPicker.prototype = {\r\n templates,\r\n ...swatches,\r\n ...events,\r\n\r\n getColorFormat( color ){\r\n return color[0] == '#'\r\n ? 'hex'\r\n : !color.indexOf('hsl')\r\n ? 'hsla'\r\n : !color.indexOf('rgb')\r\n ? 'rgba'\r\n : ''\r\n },\r\n\r\n /**\r\n * normalizes any color to HSLA-Object\r\n * @param {String} color\r\n */\r\n getHSLA( color ){\r\n let result\r\n\r\n if( !color ) return\r\n\r\n // if color argument is already an HSLA object, return it as-is\r\n if( isObject(color) && Object.keys(color).join('').startsWith('hsl'))\r\n return color\r\n\r\n this.colorFormat = this.getColorFormat(color)\r\n\r\n if( !color.indexOf('hsla') ){\r\n result = CSStoHSLA(color)\r\n result = { h:result[0], s:result[1], l:result[2], a:result[3] }\r\n }\r\n\r\n else{\r\n color = any_to_hex(color)\r\n color = hex_rgba(color)\r\n result = rgba_hsla(color)\r\n }\r\n\r\n return result\r\n },\r\n\r\n swithFormat(){\r\n const _cf = this.colorFormat\r\n\r\n switch( _cf ){\r\n case '':\r\n case 'hex':\r\n this.colorFormat = 'rgba'\r\n break\r\n case 'rgba':\r\n this.colorFormat = 'hsla'\r\n break\r\n case 'hsla':\r\n this.colorFormat = 'hex'\r\n break\r\n }\r\n\r\n // get a new \"this.CSSColor\" after changing the format above\r\n this.setCSSColor()\r\n this.DOM.value.value = this.CSSColor\r\n },\r\n\r\n updateRangeSlider(name, value){\r\n const elm = this.DOM.scope.querySelector(`input[name=\"${name}\"]`)\r\n\r\n if( !elm ) return\r\n\r\n elm.value = value\r\n elm.parentNode.style.setProperty('--value', value)\r\n elm.parentNode.style.setProperty('--text-value', JSON.stringify(\"\"+Math.round(value)))\r\n\r\n this.updateCSSVar(name, value)\r\n },\r\n\r\n /**\r\n * sets the CSS color text-value according to the current format\r\n */\r\n setCSSColor(){\r\n this.CSSColor = any_to_hex( HSLAtoCSS(this.color) )\r\n\r\n if( this.colorFormat == 'rgba' )\r\n this.CSSColor = hex_rgba(this.CSSColor)\r\n\r\n else if( this.colorFormat == 'hsla' )\r\n this.CSSColor = HSLAtoCSS(this.color)\r\n\r\n this.DOM.scope && this.DOM.scope.setAttribute(\"data-color-format\", this.colorFormat)\r\n this.settings.onInput(this.CSSColor)\r\n },\r\n\r\n /**\r\n *\r\n * @param {Object} hsla {h,s,l,a}\r\n */\r\n setColor( value ){\r\n if( !value ) return\r\n\r\n value = this.getHSLA(value)\r\n\r\n this.color = value\r\n this.setCSSColor()\r\n this.DOM.scope && this.updateAllCSSVars()\r\n\r\n if( this.DOM.value )\r\n this.DOM.value.value = this.CSSColor\r\n },\r\n\r\n updateCSSVar(name, value){\r\n // this.DOM.value\r\n this.DOM.scope.style.setProperty(`--${name}`, value)\r\n },\r\n\r\n updateAllCSSVars(){\r\n const hsla = this.NamedHSLA(this.color)\r\n Object.entries(hsla).forEach(([k, v]) => {\r\n this.updateRangeSlider(k, v)\r\n })\r\n },\r\n\r\n NamedHSLA( hsla ){\r\n return {\r\n \"hue\" : hsla.h,\r\n \"saturation\" : hsla.s,\r\n \"lightness\" : hsla.l,\r\n \"alpha\" : hsla.a\r\n }\r\n },\r\n\r\n build(){\r\n const template = this.templates.scope.call(this)\r\n this.DOM.scope = parseHTML(template)\r\n this.DOM.value = this.DOM.scope.querySelector('input[name=\"value\"]')\r\n this.DOM.swatches = this.DOM.scope.querySelector('.color-picker__swatches')\r\n },\r\n\r\n init(){\r\n this.build()\r\n this.setColor(this.color)\r\n // this.updateAllCSSVars()\r\n this.bindEvents()\r\n }\r\n}\r\n\r\nexport { any_to_hex, hex_rgba, rgba_hsla, CSStoHSLA, HSLAtoCSS, changeColorFormat }\r\n\r\nexport default ColorPicker","export default function isObject(obj) {\r\n return (obj+\"\") === \"[object Object]\"\r\n}\r\n"],"names":["parseHTML","str","DOMParser","parseFromString","trim","body","firstElementChild","DEFAULTS","color","onInput","_","onChange","buttons","undo","icon","title","format","add","CSStoRGBA","rgba","match","split","map","Number","CSStoHSLA","hsla","Object","assign","v","i","includes","parseFloat","HSLAtoCSS","h","s","l","a","roundNumber","number","toFixed","replace","hex_rgba","hex","rr","gg","bb","aa","CSStoHEX","r","g","b","parseInt","any_to_hex","output","ctx","document","createElement","getContext","fillStyle","rgba_hex","toString","padStart","join","length","Math","round","rgba_hsla","max","min","d","toPrecision","changeColorFormat","toLowerCase","startsWith","slider","name","value","this","settings","swatches","initialSwatches","swatch","isLocked","className","call","onStorage","syncGlobalSwatchesWithLocal","onWheelMove","e","preventDefault","target","delta","sign","deltaY","onkeydown","key","onClickOutside","DOM","scope","contains","type","setColor","onRangeChange","history","last","onValueChange","getHSLA","blur","onButtonClick","parentNode","pNode","classList","swithFormat","addSwatch","removeSwatch","forEach","elm","event","cb","addEventListener","bind","pasive","window","historyChange","CSSColor","_value","pop","previous","item","push","swatchesIncludes","some","storeKey","swatchElm","templates","prepend","setTimeout","remove","unshift","sharedSwatches","getSetGlobalSwatches","data","_store","swatchesLocalStorage","customKey","localStorage","setItem","dispatchEvent","Event","filter","String","notColor","concat","template","replaceWith","ColorPicker","defaultFormat","init","prototype","events","getColorFormat","indexOf","result","keys","colorFormat","setCSSColor","updateRangeSlider","querySelector","style","setProperty","JSON","stringify","updateCSSVar","setAttribute","updateAllCSSVars","NamedHSLA","entries","k","hue","saturation","lightness","alpha","build","bindEvents"],"mappings":"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"} \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css index f713518..e5b765a 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1,3 +1 @@ -.color-picker .range{--tickEvery: 400;--primaryColor: #000;--progress-color: transparent;--progress-shadow: unset;--value-active-color: white;--value-background: white;--value-font: 700 12px/1 Arial;--fill-color: var(--primaryColor);--thumb-size: 21px;--track-height: calc(var(--thumb-size)/1.5);--thumb-shadow: 0 0 3px rgba(0,0,0,.2);--step: 1;--completed: calc((var(--value) - var(--min) ) / (var(--max) - var(--min)) * 100);--show-min-max: none;--LTR: 1;display:inline-block;height:Max(var(--track-height), var(--thumb-size));background:none;position:relative;z-index:1;padding-bottom:0;padding-top:0;margin:0 0 calc((var(--thumb-size) - var(--track-height)) * -1)}.color-picker .range__progress{position:absolute;left:0;top:50%;transform:translateY(-50%) translateZ(0);width:100%;height:calc(var(--track-height));pointer-events:none;z-index:-1;box-shadow:var(--progress-shadow);border-radius:20px;background:var(--fill-color, white)}.color-picker .range__progress::after{content:unset}.color-picker .range>input{--thumb-color: transparent;--inner-shadow: 0 0 0 calc(var(--thumb-size)/8) inset white;-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;cursor:-webkit-grab;cursor:grab;outline:none;background:none}.color-picker .range>input::-webkit-slider-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-color, white);border:1px solid silver;box-shadow:var(--inner-shadow, 0 0),var(--thumb-shadow)}.color-picker .range>input::-moz-range-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-color, white);border:1px solid silver;box-shadow:var(--inner-shadow, 0 0),var(--thumb-shadow)}.color-picker .range>input:active{cursor:grabbing}.color-picker .range>input:active+output{transition:0s}.color-picker .range>input:hover+output{--value-background: var(--primaryColor);opacity:1;color:var(--value-active-color);transform:translate(var(--x-offset), 0);box-shadow:0 0 0 3px var(--value-background)}.color-picker .range>output{--x-offset: calc(var(--completed) * -1% * var(--LTR));--pos: calc(((var(--value) - var(--min))/(var(--max) - var(--min))) * 100%);opacity:0;pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:0 4px;top:-3.5ch;left:var(--pos);transform:translate(var(--x-offset), 6px);transition:all .12s ease-out, left 0s, top 0s}.color-picker .range>output::before{--size: 5px;content:'';top:calc(100% + 2px);left:50%;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none;border-top-color:var(--value-background);border-width:var(--size);margin-left:calc(var(--size) * -1);transition:inherit}.color-picker .range>output::after{content:var(--text-value);font:var(--value-font)}.color-picker{--hue: 150;--saturation: 100;--lightness: 50;--alpha: 100;--s: calc(var(--saturation) * 1%);--l: calc(var(--lightness) * 1%);--a: calc(var(--alpha) * 1%);--color: hsla(var(--hue), var(--s), var(--l), var(--a));--checkboard-color: #DDD;--checkboard-base-gradient: repeating-conic-gradient(var(--checkboard-color) 0% 25%, transparent 0% 50%);--width: 320;--width-units: 1px;display:flex;flex-flow:column;gap:.5em;width:calc(var(--width) * var(--width-units));position:relative;box-sizing:border-box;transition:opacity .15s;transition-timing-function:ease-out}.color-picker__hue.range{grid-area:hue;--fill-color: linear-gradient(to right, red 0%, #ff0 16.6%, lime 33.3%, cyan 50%, blue 66.6%, #f0f 83.3%, red 100%)}.color-picker__saturation.range{grid-area:saturation;--fill-color: linear-gradient(to right, white, hsl(var(--hue),var(--s), 50%))}.color-picker__lightness.range{grid-area:lightness;--c: hsl(var(--hue), var(--s), 50%);--fill-color: linear-gradient(to right, black, var(--c), white)}.color-picker__alpha.range{grid-area:alpha;--checkboard-size: calc(var(--track-height)/2);--fill-color: linear-gradient(to right, transparent, hsl(var(--hue), var(--s), var(--l))), - var(--checkboard-base-gradient) - 0 / var(--checkboard-size) var(--checkboard-size)}.color-picker button{cursor:pointer;border:none;background:none;outline:none}.cp-checkboard::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;border-radius:inherit;background:repeating-conic-gradient(var(--checkboard-color) 0% 25%, transparent 0% 50%) 0/12px 12px}.color-picker>output{grid-area:color;border-radius:5px;overflow:hidden;position:relative;width:50px;background:hsla(var(--hue), var(--s), var(--l), var(--a));box-shadow:0 0 8px -5px}.color-picker>output::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:repeating-conic-gradient(var(--checkboard-color) 0% 25%, transparent 0% 50%) 0/12px 12px}.color-picker__value{--isLightColor: Min(1, Max(50 - var(--lightness) - (100 - var(--alpha)), 0));grid-area:value;position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:10px;color:hsl(var(--hue), 100%, calc(var(--isLightColor) * 100%));box-shadow:0 0 4px rgba(0,0,0,0.2)}.color-picker__value input{flex:1;order:2;cursor:text;width:0;letter-spacing:-.5px;word-spacing:-3px;font:800 16px/2 monospace;font-size:calc(var(--width)*var(--width-units)/ 22);text-transform:uppercase;padding:0;text-align:center;border:none;outline:none;background:none;color:inherit;transition:color .2s}.color-picker__value input ~ div{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;border-radius:inherit;background:var(--color)}.color-picker__value input:focus{color:black}.color-picker__value input:focus ~ button{transform:translateX(100%)}.color-picker__value input:focus+button{transform:translateX(-100%)}.color-picker__value input:focus ~ div{background:none;transition:background .15s;border:3px solid var(--color)}.color-picker__value>button{order:3;width:1.5em;background:none;border:none;font:22px/1.2 monospace;outline:none;color:inherit;cursor:pointer;user-select:none;transition:color .2s, transform .2s ease-out}.color-picker__value>button[name='undo']{order:1}.color-picker__swatches{display:flex;flex-wrap:wrap;align-items:center;gap:3px}.color-picker__swatches>button{--shadow-size: 2px;order:0;padding:12px;width:0;height:0;border-radius:50%;background:var(--c);font-size:18px;line-height:1px;text-indent:-6px;transition:.1s;box-shadow:0 0 0 var(--shadow-size) inset var(--color)}.color-picker__swatches>button:hover:not(:active){--shadow-size: 4px}.color-picker__swatch{order:1;padding:12px;line-height:0;border-radius:50%;background:var(--c);position:relative;cursor:pointer;transition:.15s ease-in-out}.color-picker__swatch:hover{transition:50ms}.color-picker__swatch:hover>button{opacity:1}.color-picker__swatch.cp_remove{padding:0;pointer-events:none;transition:.2s}.color-picker__swatch>button{opacity:0;position:absolute;top:0;right:0;width:0;height:0;border-radius:50%;line-height:.1;color:black;font-weight:800;text-shadow:0 3px white, -2px 1px white} +.color-picker .range{--tickEvery: 400;--primaryColor: #000;--progress-color: transparent;--progress-shadow: unset;--value-active-color: white;--value-background: white;--value-font: 700 12px/1 Arial;--fill-color: var(--primaryColor);--thumb-size: 21px;--track-height: calc(var(--thumb-size)/1.5);--thumb-shadow: 0 0 3px rgba(0,0,0,.2);--step: 1;--completed: calc((var(--value) - var(--min) ) / (var(--max) - var(--min)) * 100);--show-min-max: none;--LTR: 1;display:inline-block;height:max(var(--track-height),var(--thumb-size));background:none;position:relative;z-index:1;padding-bottom:0;padding-top:0;margin:0 0 calc((var(--thumb-size) - var(--track-height))*-1)}.color-picker .range__progress{position:absolute;left:0;top:50%;transform:translateY(-50%) translateZ(0);width:100%;height:calc(var(--track-height));pointer-events:none;z-index:-1;box-shadow:var(--progress-shadow);border-radius:20px;background:var(--fill-color, white)}.color-picker .range__progress::after{content:unset}.color-picker .range>input{--thumb-color: transparent;--inner-shadow: 0 0 0 calc(var(--thumb-size)/8) inset white;-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;cursor:-webkit-grab;cursor:grab;outline:none;background:none}.color-picker .range>input::-webkit-slider-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-color, white);border:1px solid silver;box-shadow:var(--inner-shadow, 0 0),var(--thumb-shadow)}.color-picker .range>input::-moz-range-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-color, white);border:1px solid silver;box-shadow:var(--inner-shadow, 0 0),var(--thumb-shadow)}.color-picker .range>input:active{opacity:.7;cursor:grabbing}.color-picker .range>input:active+output{transition:0s}.color-picker .range>input:hover+output{--value-background: var(--primaryColor);opacity:1;color:var(--value-active-color);transform:translate(var(--x-offset), 0);box-shadow:0 0 0 3px var(--value-background)}.color-picker .range>output{--x-offset: calc(var(--completed) * -1% * var(--LTR));--pos: calc(((var(--value) - var(--min))/(var(--max) - var(--min))) * 100%);opacity:0;pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:0 4px;top:-3.5ch;left:var(--pos);transform:translate(var(--x-offset), 6px);transition:all .12s ease-out,left 0s,top 0s}.color-picker .range>output::before{--size: 5px;content:"";top:calc(100% + 2px);left:50%;border:solid rgba(0,0,0,0);height:0;width:0;position:absolute;pointer-events:none;border-top-color:var(--value-background);border-width:var(--size);margin-left:calc(var(--size)*-1);transition:inherit}.color-picker .range>output::after{content:var(--text-value);font:var(--value-font)}.color-picker{--hue: 150;--saturation: 100;--lightness: 50;--alpha: 100;--s: calc(var(--saturation) * 1%);--l: calc(var(--lightness) * 1%);--a: calc(var(--alpha) * 1%);--color: hsla(var(--hue), var(--s), var(--l), var(--a));--checkboard-color: #DDD;--checkboard-base-gradient: repeating-conic-gradient(var(--checkboard-color) 0% 25%, transparent 0% 50%);--width: 320;--width-units: 1px;display:flex;flex-flow:column;gap:.5em;width:calc(var(--width)*var(--width-units));position:relative;box-sizing:border-box;transition:opacity .15s;transition-timing-function:ease-out}.color-picker__hue.range{grid-area:hue;--fill-color: linear-gradient(to right, red 0%, #ff0 16.6%, lime 33.3%, cyan 50%, blue 66.6%, #f0f 83.3%, red 100%)}.color-picker__saturation.range{grid-area:saturation;--fill-color: linear-gradient(to right, white, hsl(var(--hue),var(--s), 50%))}.color-picker__lightness.range{grid-area:lightness;--c: hsl(var(--hue), var(--s), 50%);--fill-color: linear-gradient(to right, black, var(--c), white)}.color-picker__alpha.range{grid-area:alpha;--checkboard-size: 8px;--fill-color: linear-gradient(to right, transparent, hsl(var(--hue), var(--s), var(--l))), var(--checkboard-base-gradient) 0 / var(--checkboard-size) var(--checkboard-size)}.color-picker button{cursor:pointer;border:none;background:none;outline:none}.cp-checkboard::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;border-radius:inherit;background:repeating-conic-gradient(var(--checkboard-color) 0% 25%, transparent 0% 50%) 0/12px 12px}.color-picker>output{grid-area:color;border-radius:5px;overflow:hidden;position:relative;width:50px;background:hsla(var(--hue), var(--s), var(--l), var(--a));box-shadow:0 0 8px -5px}.color-picker>output::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:repeating-conic-gradient(var(--checkboard-color) 0% 25%, transparent 0% 50%) 0/12px 12px}.color-picker__value{--isLightColor: Min(1, Max(50 - var(--lightness) - (100 - var(--alpha)), 0));grid-area:value;position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:10px;color:hsl(var(--hue), 100%, calc(var(--isLightColor) * 100%));box-shadow:0 0 4px rgba(0,0,0,.2)}.color-picker__value input{flex:1;order:2;cursor:text;width:0;letter-spacing:-0.5px;word-spacing:-3px;font:800 16px/2 monospace;font-size:calc(var(--width)*var(--width-units)/22);text-transform:uppercase;padding:0;text-align:center;border:none;outline:none;background:none;color:inherit;transition:color .2s}.color-picker__value input~div{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;border-radius:inherit;background:var(--color)}.color-picker__value input:focus{color:#000}.color-picker__value input:focus~button{transform:translateX(100%)}.color-picker__value input:focus+button{transform:translateX(-100%)}.color-picker__value input:focus~div{background:none;transition:background .15s;border:3px solid var(--color)}.color-picker__value>button{order:3;width:1.5em;background:none;border:none;font:22px/1.2 monospace;outline:none;color:inherit;cursor:pointer;user-select:none;transition:color .2s,transform .2s ease-out}.color-picker__value>button[name=undo]{order:1}.color-picker__swatches{display:flex;flex-wrap:wrap;align-items:center;gap:3px}.color-picker__swatches>button{--shadow-size: 2px;order:0;padding:12px;width:0;height:0;border-radius:50%;background:var(--c);font-size:18px;line-height:1px;text-indent:-6px;transition:.1s;box-shadow:0 0 0 var(--shadow-size) inset var(--color)}.color-picker__swatches>button:hover:not(:active){--shadow-size: 4px}.color-picker__swatch{order:1;padding:12px;line-height:0;border-radius:50%;background:var(--c);position:relative;cursor:pointer;transition:.15s ease-in-out}.color-picker__swatch:hover{transition:50ms}.color-picker__swatch:hover>button{opacity:1}.color-picker__swatch.cp_remove{padding:0;pointer-events:none;transition:.2s}.color-picker__swatch>button{opacity:0;position:absolute;top:0;right:0;width:0;height:0;border-radius:50%;line-height:.1;color:#000;font-weight:800;text-shadow:0 3px #fff,-2px 1px #fff}/*# sourceMappingURL=styles.css.map */ diff --git a/dist/styles.css.map b/dist/styles.css.map new file mode 100644 index 0000000..57ee8b3 --- /dev/null +++ b/dist/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/styles/_range.scss","../src/styles/_picker.scss","../src/styles/_output.scss","../src/styles/_value.scss","../src/styles/_swatches.scss"],"names":[],"mappings":"AAAA,qBACE,iBACA,qBACA,8BACA,yBACA,4BACA,0BACA,+BACA,kCACA,mBACA,4CACA,uCACA,UACA,kFACA,qBACA,SAYA,qBACA,kDACA,gBACA,kBACA,UACA,iBACA,cACA,8DAEA,+BACE,kBACA,OACA,QACA,yCACA,WACA,iCACA,oBACA,WACA,kCACA,mBACA,oCAEA,sCACE,cAIJ,2BACE,2BACA,4DAEA,wBACA,WACA,yBACA,SACA,oBACA,YACA,aACA,gBAEA,iDAjDA,gBACA,yBACA,wBACA,kBACA,qCACA,wBACA,wDA4CA,6CAlDA,gBACA,yBACA,wBACA,kBACA,qCACA,wBACA,wDA8CA,kCACE,WACA,gBACA,uDAGF,wCACE,wCACA,UACA,gCACA,wCACA,6CAIJ,4BACE,sDACA,4EAEA,UACA,oBACA,kBACA,UACA,mCACA,mBACA,cACA,WACA,gBACA,0CACA,4CAEA,oCACE,YACA,WACA,qBACA,SACA,2BACA,SACA,QACA,kBACA,oBACA,yCACA,yBACA,iCACA,mBAGF,mCACE,0BACA,uBCvHN,cAGE,WACA,kBACA,gBACA,aAEA,kCACA,iCACA,6BAEA,wDAEA,yBACA,yGAEA,aACA,mBAEA,aACA,iBACA,SAEA,4CACA,kBACA,sBAEA,wBACA,oCAEA,yBACE,cACA,oHAGF,gCACE,qBACA,8EAGF,+BACE,oBACA,oCACA,gEAGF,2BACE,gBACA,uBACA,6KAKF,qBACE,eACA,YACA,gBACA,aAKJ,uBACE,WACA,kBACA,WACA,8BACA,sBACA,oGCrEA,qBACE,gBACA,kBACA,gBACA,kBACA,WACA,0DACA,wBAEA,6BACE,WACA,kBACA,WACA,8BACA,oGCfN,qBACE,6EACA,gBACA,kBACA,oBACA,mBACA,gBACA,mBACA,8DACA,kCAEA,2BACE,OACA,QACA,YACA,QACA,sBACA,kBACA,0BACA,mDACA,yBACA,UACA,kBACA,YACA,aACA,gBACA,cACA,qBAEA,+BACE,kBACA,WACA,8BACA,sBACA,wBAGF,iCACE,WAEA,mEACA,oEACA,qCACE,gBACA,2BACA,8BAKN,4BACE,QACA,YACA,gBACA,YACA,wBACA,aACA,cACA,eACA,iBACA,4CAEA,uCACE,QC9DJ,wBACE,aACA,eACA,mBACA,QAEA,+BACE,mBACA,QACA,aACA,QACA,SACA,kBACA,oBACA,eACA,gBACA,iBACA,eACA,uDAEA,kDACE,mBAMN,sBACE,QACA,aACA,cACA,kBACA,oBACA,kBACA,eAEA,4BAEA,4BACE,gBAGA,mCACE,UAIJ,gCACE,UACA,oBACA,eAIF,6BACE,UACA,kBACA,MACA,QACA,QACA,SACA,kBACA,eACA,WACA,gBACA","file":"styles.css"} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0429dfd..14b019e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@yaireo/color-picker", - "version": "0.11.0", + "version": "0.12.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@yaireo/color-picker", - "version": "0.11.0", + "version": "0.12.0", "license": "MIT", "devDependencies": { "@babel/core": "^7.15.4", diff --git a/package.json b/package.json index 35233eb..bbe6ab7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yaireo/color-picker", - "version": "0.11.0", + "version": "0.12.0", "homepage": "https://yaireo.github.io/color-picker", "description": "Lightweight javascript color picker", "keywords": [