diff --git a/color-picker.js b/color-picker.js index c2818bc..dbaf8e9 100644 --- a/color-picker.js +++ b/color-picker.js @@ -1,3 +1,10 @@ +/** + * @yaireo/color-picker - Lightweight javascript color picker + * + * @version v0.10.2 + * @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 54f4312..cbebfe2 100644 --- a/dist/color-picker.js +++ b/dist/color-picker.js @@ -1,425 +1,3 @@ - -(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document); -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : - typeof define === 'function' && define.amd ? define(['exports'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ColorPicker = {})); -}(this, (function (exports) { 'use strict'; - - var parseHTML = (str) => { - var parser = new DOMParser(), - node = parser.parseFromString(str.trim(), "text/html"); - return node.body.firstElementChild - }; - - var DEFAULTS = { - color: 'white', - onInput: _=>_, - onChange: _=>_, - buttons: { - undo: { - icon: '↶', - title: 'Undo' - }, - format: { - icon: '⇆', - title: 'Switch Color Format' - }, - add: { - icon: '+', - title: 'Add to Swatches' - } - } - }; - - const CSStoHEX = hex => hex.match(/\w\w/g); - const CSStoRGBA = rgba => rgba.match(/\((.*)\)/)[1].split(',').map(Number); - 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 )); - const HSLAtoCSS = hsla => `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a}%)`; - const roundNumber = number => number.toFixed(1).replace('.0', ''); - const hex_rgba = hex => { - const [rr, gg, bb, aa] = CSStoHEX(hex), - [r,g,b] = [rr,gg,bb].map(v => parseInt(v, 16)), - alpha = aa ? (parseInt(aa, 16) / 255).toFixed(2) : 1; - return `rgba(${r},${g},${b},${alpha})` - }; - const any_to_hex = str => { - var ctx = document.createElement("canvas").getContext("2d"), - output; - ctx.fillStyle = str; - output = ctx.fillStyle; - return output[0] == '#' ? output : rgba_hex(output) - }; - const rgba_hex = rgba => { - const [r,g,b,a] = CSStoRGBA(rgba), - hex = "#" + [r,g,b].map(v => v.toString(16).padStart(2, '0')).join(''); - return rgba.length == 3 ? hex : hex + Math.round(a * 255).toString(16).padStart(2, '0') - }; - const rgba_hsla = rgba => { - let [r,g,b,a] = CSStoRGBA(rgba); - r = r / 255; - g = g / 255; - b = b / 255; - let max = Math.max(r, g, b), - min = Math.min(r, g, b), - d = max - min, - h = 0, - s = 0, - l = ((max + min) / 2).toPrecision(5); - if (d){ - s = l > 0.5 - ? d / (2 - max - min) - : d / (max + min); - h = max == r - ? (g - b) / d + (g < b ? 6 : 0) - : max == g - ? h = (b - r) / d + 2 - : h = (r - g) / d + 4; - h /= 6; - } - return { - h: roundNumber(h * 360), - s: roundNumber(s * 100), - l: roundNumber(l * 100), - a: roundNumber(a * 100) - } - }; - const changeColorFormat = (color, format) => { - format = (format+"").toLowerCase(); - color = any_to_hex(color); - return format == 'hex' - ? color - : format.startsWith('hsl') - ? HSLAtoCSS( rgba_hsla( hex_rgba(color) ) ) - : format.startsWith('rgb') - ? hex_rgba(color) - : color - }; - - function scope() { - const {h,s,l,a} = this.color; - const className = `color-picker ${this.settings.className||''}`.trim(); - return ` -
- ${slider({ name:"hue", value:h, max:"360" })} - ${slider({ name:"saturation", value:s })} - ${slider({ name:"lightness", value:l })} - ${slider({ name:"alpha", value:a })} - - ${value.call(this, this.color)} - ${this.swatches ? swatches.call(this, this.swatches, this.initialSwatches) : ''} -
- ` - } - function slider({ name, min = 0, max = 100, value }){ - return `
- - -
-
` - } - function value( color ){ - const { buttons:{undo, format} } = this.settings; - return ` -
- - - -
-
- ` - } - function swatches(swatches, initialSwatches){ - const { buttons:{add} } = this.settings; - return ` -
- - ${swatches.map(color => swatch(color, initialSwatches.includes(color))).join('')} -
- ` - } - function swatch(color, isLocked){ - return `
${isLocked ? '' : ''}
` - } - - var templates = /*#__PURE__*/Object.freeze({ - __proto__: null, - scope: scope, - slider: slider, - value: value, - swatches: swatches, - swatch: swatch - }); - - function bindEvents(){ - [ - ['scope', 'input' , onInput], - ['scope', 'change', onRangeChange], - ['scope', 'click' , onButtonClick], - ['scope', 'wheel' , onWheelMove], - ['value', 'change', onValueChange], - ].forEach(([elm, event, cb]) => - this.DOM[elm].addEventListener(event, cb.bind(this), {pasive:false}) - ); - window.addEventListener('storage', onStorage.bind(this)); - if( this.settings.onClickOutside ){ - document.body.addEventListener('click', onClickOutside.bind(this)); - window.addEventListener('keydown', onkeydown.bind(this)); - } - } - function onStorage(){ - this.syncGlobalSwatchesWithLocal(); - } - function onWheelMove(e){ - e.preventDefault(); - const { value, max } = e.target, - delta = Math.sign(e.deltaY) * -1; - if( value && max ){ - e.target.value = Math.min(Math.max(+value + delta, 0), +max); - onInput.call(this, e); - } - } - function onkeydown(e){ - if( e.key == 'Escape' ) - this.settings.onClickOutside(e); - } - function onClickOutside(e){ - if( !this.DOM.scope.contains(e.target) ) - this.settings.onClickOutside(e); - } - function onInput(e){ - const {name, value, type} = e.target; - if( type == 'range' ){ - this.setColor({...this.color, [name[0]]: +value}); - } - } - function onRangeChange(e){ - const { type } = e.target; - if( type == 'range' || type == 'text' ){ - this.history.last = this.color; - } - } - function onValueChange(e){ - this.setColor( this.getHSLA(e.target.value) ); - this.DOM.value.blur(); - } - function onButtonClick(e){ - const { name, parentNode:pNode, classList, title } = e.target; - if( name == 'format' ) - this.swithFormat(); - else if( name == 'undo' ) - this.history.undo(); - else if( name == 'addSwatch' ) - this.addSwatch(); - else if( name == 'removeSwatch' ) - this.removeSwatch(pNode, pNode.title); - else if( classList.contains('color-picker__swatch') && title ){ - this.history.last = this.color; - this.setColor( this.getHSLA(title) ); - } - } - - var events = /*#__PURE__*/Object.freeze({ - __proto__: null, - bindEvents: bindEvents - }); - - function history(){ - const historyChange = () => this.settings.onChange(this.CSSColor); - const setColor = 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( item ){ - this._value.push(item); - historyChange(); - }, - undo(){ - if( this._value.length > 1 ){ - this.pop; - let last = this._value[this._value.length - 1]; - setColor(last); - historyChange(); - return last - } - } - } - } - - const swatchesIncludes = (swatches, color) => swatches.some(swatch => any_to_hex(swatch) == any_to_hex(color)); - const storeKey = '@yaireo/color-picker/swatches'; - function getSetGlobalSwatches(data){ - const _store = this.settings.swatchesLocalStorage, - customKey = typeof _store == 'string' ? _store : ''; - if ( _store && data ){ - localStorage.setItem(storeKey + customKey, data); - dispatchEvent( new Event('storage') ); - } - return localStorage[storeKey + customKey]?.split(',').filter(String) || [] - } - function syncGlobalSwatchesWithLocal(){ - this.sharedSwatches = this.getSetGlobalSwatches(); - this.swatches = this.sharedSwatches.concat(this.initialSwatches); - this.DOM.swatches && setTimeout(()=>{ - const template = parseHTML(this.templates.swatches.call(this, this.swatches, this.initialSwatches)); - this.DOM.swatches.replaceWith(template); - this.DOM.swatches = template; - }, 500); - } - function addSwatch( color = this.CSSColor ){ - if( swatchesIncludes(this.swatches, color) ) return - const swatchElm = parseHTML( this.templates.swatch(color) ); - swatchElm.classList.add('cp_remove'); - this.DOM.swatches.prepend(swatchElm); - setTimeout(() => swatchElm.classList.remove('cp_remove'), 0); - this.swatches.unshift(color); - this.sharedSwatches.unshift(color); - this.getSetGlobalSwatches(this.sharedSwatches); - } - function removeSwatch( swatchElm, color ){ - swatchElm.classList.add('cp_remove'); - setTimeout(() => swatchElm.remove(), 200); - const notColor = swatch => swatch != color; - this.swatches = this.swatches.filter(notColor); - this.sharedSwatches = this.sharedSwatches.filter(notColor); - this.getSetGlobalSwatches(this.sharedSwatches); - } - - var swatches$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - getSetGlobalSwatches: getSetGlobalSwatches, - syncGlobalSwatchesWithLocal: syncGlobalSwatchesWithLocal, - addSwatch: addSwatch, - removeSwatch: removeSwatch - }); - - function ColorPicker(settings){ - this.settings = Object.assign({}, DEFAULTS, settings); - const {color, defaultFormat, swatches} = this.settings; - this.DOM = {}; - this.sharedSwatches = this.getSetGlobalSwatches(); - this.initialSwatches = swatches || []; - this.swatches = swatches && this.sharedSwatches.concat(this.initialSwatches); - this.color = changeColorFormat(color, defaultFormat); - this.history = history.call(this); - this.init(); - } - ColorPicker.prototype = { - templates, - ...swatches$1, - ...events, - getColorFormat( color ){ - return color[0] == '#' - ? 'hex' - : !color.indexOf('hsl') - ? 'hsla' - : !color.indexOf('rgb') - ? 'rgba' - : '' - }, - getHSLA( color ){ - let result; - if( !color ) return - if( color.h && color.s ) - return color - this.colorFormat = this.getColorFormat(color); - if( !color.indexOf('hsla') ){ - result = CSStoHSLA(color); - result = { h:result[0], s:result[1], l:result[2], a:result[3] }; - } - else { - color = any_to_hex(color); - color = hex_rgba(color); - result = rgba_hsla(color); - } - return result - }, - swithFormat(){ - const _cf = this.colorFormat; - switch( _cf ){ - case '': - case 'hex': - this.colorFormat = 'rgba'; - break - case 'rgba': - this.colorFormat = 'hsla'; - break - case 'hsla': - this.colorFormat = 'hex'; - break - } - this.setCSSColor(); - this.DOM.value.value = this.CSSColor; - }, - updateRangeSlider(name, value){ - const elm = this.DOM.scope.querySelector(`input[name="${name}"]`); - if( !elm ) return - elm.value = value; - elm.parentNode.style.setProperty('--value', value); - elm.parentNode.style.setProperty('--text-value', JSON.stringify(""+Math.round(value))); - this.updateCSSVar(name, value); - }, - setCSSColor(){ - this.CSSColor = any_to_hex( HSLAtoCSS(this.color) ); - if( this.colorFormat == 'rgba' ) - this.CSSColor = hex_rgba(this.CSSColor); - else if( this.colorFormat == 'hsla' ) - this.CSSColor = HSLAtoCSS(this.color); - this.DOM.scope && this.DOM.scope.setAttribute("data-color-format", this.colorFormat); - this.settings.onInput(this.CSSColor); - }, - setColor( value ){ - if( !value ) return - value = this.getHSLA(value); - this.color = value; - this.setCSSColor(); - this.DOM.scope && this.updateAllCSSVars(); - if( this.DOM.value ) - this.DOM.value.value = this.CSSColor; - }, - updateCSSVar(name, value){ - this.DOM.scope.style.setProperty(`--${name}`, value); - }, - updateAllCSSVars(){ - const hsla = this.NamedHSLA(this.color); - Object.entries(hsla).forEach(([k, v]) => { - this.updateRangeSlider(k, v); - }); - }, - NamedHSLA( hsla ){ - return { - "hue" : hsla.h, - "saturation" : hsla.s, - "lightness" : hsla.l, - "alpha" : hsla.a - } - }, - build(){ - const template = this.templates.scope.call(this); - this.DOM.scope = parseHTML(template); - 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(); - } - }; - - exports.CSStoHSLA = CSStoHSLA; - exports.HSLAtoCSS = HSLAtoCSS; - exports.any_to_hex = any_to_hex; - exports.changeColorFormat = changeColorFormat; - exports.default = ColorPicker; - exports.hex_rgba = hex_rgba; - exports.rgba_hsla = rgba_hsla; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); +/*! Color-Picker 0.10.2 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.h&&t.s?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})})); +//# sourceMappingURL=color-picker.js.map diff --git a/dist/color-picker.js.map b/dist/color-picker.js.map new file mode 100644 index 0000000..026df13 --- /dev/null +++ b/dist/color-picker.js.map @@ -0,0 +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"],"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 {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( color.h && color.s )\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"],"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","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 diff --git a/package-lock.json b/package-lock.json index 023154a..719546b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@yaireo/color-picker", - "version": "0.10.1", + "version": "0.10.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@yaireo/color-picker", - "version": "0.10.1", + "version": "0.10.2", "license": "MIT", "devDependencies": { "@babel/core": "^7.12.10", diff --git a/package.json b/package.json index bf6240a..76077d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yaireo/color-picker", - "version": "0.10.1", + "version": "0.10.2", "homepage": "https://yaireo.github.io/color-picker", "description": "Lightweight javascript color picker", "keywords": [ @@ -12,10 +12,6 @@ "lightweight" ], "license": "MIT", - "_npmUser": { - "name": "vsync", - "email": "vsync.design@gmail.com" - }, "browserslist": [ ">3% and ie 11", "not dead",