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``}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\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",