diff --git a/README.md b/README.md index 0be33c4..9e837b4 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,27 @@ I advise using a `type='text'` input which can offer support for any color forma ## Use +The codebase is bundled into 2 formats: + +`iife` (to be used as standalone script): + +```html + + +``` + +`es` (to be used via `import` command in your bundle or moduled sciprt).
+This is the default ("main") the package serves: +```html + + +``` + + ```js const cPicker = new ColorPicker({ // accepted formats: HEX(A), RGB(A), HSL(A), X11 color name diff --git a/dist/color-picker.es.js b/dist/color-picker.es.js new file mode 100644 index 0000000..bc780cf --- /dev/null +++ b/dist/color-picker.es.js @@ -0,0 +1,3 @@ +/*! Color-Picker 0.12.1 MIT | https://github.com/yairEO/color-picker */ +var t=t=>(new DOMParser).parseFromString(t.trim(),"text/html").body.firstElementChild,e={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 s=t=>t.match(/\((.*)\)/)[1].split(",").map(Number),i=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}%)`,o=t=>t.toFixed(1).replace(".0",""),n=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})`},h=t=>{var e,s=document.createElement("canvas").getContext("2d");return s.fillStyle=t,"#"==(e=s.fillStyle)[0]?e:r(e)},r=t=>{const[e,i,a,o]=s(t),n="#"+[e,i,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")},l=t=>{let[e,i,a,n]=s(t);e/=255,i/=255,a/=255;let h=Math.max(e,i,a),r=Math.min(e,i,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?(i-a)/l+(i(e=(e+"").toLowerCase(),t=h(t),"hex"==e?t:e.startsWith("hsl")?a(l(n(t))):e.startsWith("rgb")?n(t):t);function u({name:t,min:e=0,max:s=100,value:i}){return`
\n \n \n
\n
`}function d(t){const{buttons:{undo:e,format:s}}=this.settings;return`\n
\n \n \n \n
\n
\n `}function p(t,e){const{buttons:{add:s}}=this.settings;return`\n
\n \n ${t.map((t=>S(t,e.includes(t)))).join("")}\n
\n `}function S(t,e){return`
${e?"":''}
`}var m=Object.freeze({__proto__:null,scope:function(){const{h:t,s:e,l:s,a:i}=this.color;return`\n
\n ${u({name:"hue",value:t,max:"360"})}\n ${u({name:"saturation",value:e})}\n ${u({name:"lightness",value:s})}\n ${u({name:"alpha",value:i})}\n \n ${d.call(this,this.color)}\n ${this.swatches?p.call(this,this.swatches,this.initialSwatches):""}\n
\n `},slider:u,swatch:S,swatches:p,value:d});function v(){this.syncGlobalSwatchesWithLocal()}function g(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),f.call(this,t))}function w(t){"Escape"==t.key&&this.settings.onClickOutside(t)}function b(t){this.DOM.scope.contains(t.target)||this.settings.onClickOutside(t)}function f(t){const{name:e,value:s,type:i}=t.target;"range"==i&&this.setColor({...this.color,[e[0]]:+s})}function C(t){const{type:e}=t.target;"range"!=e&&"text"!=e||(this.history.last=this.color)}function $(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",f],["scope","change",C],["scope","click",O],["scope","wheel",g],["value","change",$]].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",w.bind(this)))}});function y(){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 M="@yaireo/color-picker/swatches";var D=Object.freeze({__proto__:null,addSwatch:function(e=this.CSSColor){if(((t,e)=>t.some((t=>h(t)==h(e))))(this.swatches,e))return;const s=t(this.templates.swatch(e));s.classList.add("cp_remove"),this.DOM.swatches.prepend(s),setTimeout((()=>s.classList.remove("cp_remove")),0),this.swatches.unshift(e),this.sharedSwatches.unshift(e),this.getSetGlobalSwatches(this.sharedSwatches)},getSetGlobalSwatches:function(t){const e=this.settings.swatchesLocalStorage,s="string"==typeof e?e:"";return e&&t&&(localStorage.setItem(M+s,t.join(";")),dispatchEvent(new Event("storage"))),localStorage[M+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 e=t(this.templates.swatches.call(this,this.swatches,this.initialSwatches));this.DOM.swatches.replaceWith(e),this.DOM.swatches=e}),500)}});function x(t){this.settings=Object.assign({},e,t);const{color:s,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=c(s,i),this.history=y.call(this),this.init()}x.prototype={templates:m,...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=h(t),t=n(t),e=l(t)):(e=i(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=h(a(this.color)),"rgba"==this.colorFormat?this.CSSColor=n(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 e=this.templates.scope.call(this);this.DOM.scope=t(e),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()}};export{i as CSStoHSLA,a as HSLAtoCSS,h as any_to_hex,c as changeColorFormat,x as default,n as hex_rgba,l as rgba_hsla}; +//# sourceMappingURL=color-picker.es.js.map diff --git a/dist/color-picker.es.js.map b/dist/color-picker.es.js.map new file mode 100644 index 0000000..7461ed4 --- /dev/null +++ b/dist/color-picker.es.js.map @@ -0,0 +1 @@ +{"version":3,"file":"color-picker.es.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 // bind storage event listener because all color pickers are connected,\r\n // so if one save or remove a color the change will reflect in all others\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","storeKey","swatchesIncludes","some","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/color-picker.iife.js b/dist/color-picker.iife.js new file mode 100644 index 0000000..ce296ad --- /dev/null +++ b/dist/color-picker.iife.js @@ -0,0 +1,3 @@ +/*! Color-Picker 0.12.1 MIT | https://github.com/yairEO/color-picker */ +var colorPicker=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,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 b(t){"Escape"==t.key&&this.settings.onClickOutside(t)}function f(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 O(t){this.setColor(this.getHSLA(t.target.value)),this.DOM.value.blur()}function $(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 y=Object.freeze({__proto__:null,bindEvents:function(){[["scope","input",C],["scope","change",_],["scope","click",$],["scope","wheel",w],["value","change",O]].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",f.bind(this)),window.addEventListener("keydown",b.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 D="@yaireo/color-picker/swatches";var x=Object.freeze({__proto__:null,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)},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 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()}return k.prototype={templates:g,...x,...y,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}),t}({}); +//# sourceMappingURL=color-picker.iife.js.map diff --git a/dist/color-picker.iife.js.map b/dist/color-picker.iife.js.map new file mode 100644 index 0000000..a5dd7a6 --- /dev/null +++ b/dist/color-picker.iife.js.map @@ -0,0 +1 @@ +{"version":3,"file":"color-picker.iife.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 // bind storage event listener because all color pickers are connected,\r\n // so if one save or remove a color the change will reflect in all others\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","storeKey","swatchesIncludes","some","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/color-picker.js b/dist/color-picker.js deleted file mode 100644 index bb55379..0000000 --- a/dist/color-picker.js +++ /dev/null @@ -1,3 +0,0 @@ -/*! Color-Picker 0.12.1 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="@yaireo/color-picker/swatches";var D=Object.freeze({__proto__:null,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)},getSetGlobalSwatches:function(t){const e=this.settings.swatchesLocalStorage,s="string"==typeof e?e:"";return e&&t&&(localStorage.setItem(x+s,t.join(";")),dispatchEvent(new Event("storage"))),localStorage[x+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 k(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()}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=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=k,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 deleted file mode 100644 index d9e7768..0000000 --- a/dist/color-picker.js.map +++ /dev/null @@ -1 +0,0 @@ -{"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 // bind storage event listener because all color pickers are connected,\r\n // so if one save or remove a color the change will reflect in all others\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","storeKey","swatchesIncludes","some","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/index.html b/index.html index 874f7e6..4271c8f 100644 --- a/index.html +++ b/index.html @@ -117,9 +117,11 @@

Color Picker

- + + +