@melloware/coloris - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dist/coloris.d.ts

@@ -62,2 +62,7 @@
 
+   /**
+   * @default "Color format"
+   */
+  format: string;
+
   /**
@@ -99,8 +104,7 @@ * @default "Color swatch"
    *
-   * When `null`, the default behaviour is to append the color picker's dialog
-   * to the end of the document's body. But it is possible to append it to a
-   * custom parent instead. This is especially useful if the color fields are
-   * in a scrollable container and you want color picker' dialog to stay
-   * anchored to them. You will need to set the position of the container to
-   * relative or absolute.
+   * The default behavior is to append the color picker's dialog to the end of the document's
+   * body. but it is possible to append it to a custom parent instead. This is especially useful
+   * if the color fields are in a scrollable container and you want color picker' dialog to stay
+   * anchored to them. You will need to set the position of the container to relative or absolute.
+   * Note: This should be a scrollable container with enough space to display the picker.
    *
@@ -126,3 +130,3 @@ * @default null
    * The color theme to use for the color picker. More themes might be added
-   * in the future.
+   * in the future. Available themes: default, large, polaroid.
    *
@@ -132,2 +136,12 @@ * @default "light"
   theme?: ColorTheme;
+  
+  /**
+   * Set the theme to light or dark mode:
+   *  - light: light mode.
+   *  - dark: dark mode.
+   *  - auto: automatically enables dark mode when the user prefers a dark color scheme.
+   *
+   * @default "auto"
+   */
+  themeMode?: string,
 
@@ -151,2 +165,11 @@ /**
   /**
+   * Set to true to enable format toggle buttons in the color picker dialog.
+   *
+   * This will also force the format to auto.
+   *
+   * @default true
+   */
+  formatToggle?: boolean;
+
+  /**
    * Enable or disable alpha support.
@@ -153,0 +176,0 @@ *

dist/coloris.js

@@ -50,3 +50,3 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
 
-  return function (window, document, Math) {
+  (function (window, document, Math) {
     var ctx = document.createElement('canvas').getContext('2d');
@@ -61,3 +61,4 @@ var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
       parent: null,
-      theme: 'light',
+      theme: 'default',
+      themeMode: 'light',
       wrap: true,
@@ -109,4 +110,13 @@ margin: 2,
             break;
+          case 'themeMode':
+            settings.themeMode = options.themeMode;
+            if (options.themeMode === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+              settings.themeMode = 'dark';
+            }
+          // The lack of a break statement is intentional
           case 'theme':
-            picker.className = "clr-picker clr-" + options.theme.split('-').join(' clr-');
+            if (options.theme) {
+              settings.theme = options.theme;
+            }
+            picker.className = "clr-picker clr-" + settings.theme + " clr-" + settings.themeMode;
             break;
@@ -364,3 +374,3 @@ case 'margin':
       if (currentEl) {
-        currentEl.value = color !== undefined ? color : colorValue.value;
+        currentEl.value = color || colorValue.value;
         currentEl.dispatchEvent(new Event('input', { bubbles: true }));
@@ -404,3 +414,3 @@ }
 
-    // 
+    //
     /**
@@ -553,3 +563,2 @@ * Get the pageX and pageY positions of the pointer.
       x = x + m;
-      m = m;
 
@@ -636,3 +645,3 @@ var index = Math.floor(hueBy60) % 6;
 
-      // Use canvas to convert the string to a valid color string 
+      // Use canvas to convert the string to a valid color string
       ctx.fillStyle = str;
@@ -962,3 +971,3 @@ match = regex.exec(ctx.fillStyle);
 
-  }(window, document, Math);
+  })(window, document, Math);
 });

dist/coloris.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"function"==typeof define&&define.amd?define("@melloware/coloris",[],t):"object"==typeof module&&module.exports?module.exports.Coloris=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){
+!function(e,t){"function"==typeof define&&define.amd?define("@melloware/coloris",[],t):"object"==typeof module&&module.exports?module.exports.Coloris=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){function a(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&c(e.el);break;case"parent":O.parent=m.querySelector(e.parent),O.parent&&O.parent.appendChild(g);break;case"themeMode":O.themeMode=e.themeMode,"auto"===e.themeMode&&y.matchMedia&&y.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":e.theme&&(O.theme=e.theme),g.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode;break;case"margin":e.margin*=1,O.margin=(isNaN(e.margin)?O:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"format":O.format=e.format;break;case"formatToggle":f("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(O.format="auto");break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),a.length&&(f("clr-swatches").innerHTML="<div>"+a.join("")+"</div>")}();break;case"alpha":O.alpha=!!e.alpha,g.setAttribute("data-alpha",O.alpha);break;case"clearButton":var a="none";e.clearButton.show&&(a="block"),e.clearButton.label&&(S.innerHTML=e.clearButton.label),S.style.display=a;break;case"a11y":var l,r=e.a11y,o=!1;if("object"==typeof r)for(var n in r)r[n]&&O.a11y[n]&&(O.a11y[n]=r[n],o=!0);o&&(l=f("clr-open-label"),a=f("clr-swatch-label"),l.innerHTML=O.a11y.open,a.innerHTML=O.a11y.swatch,E.setAttribute("aria-label",O.a11y.close),T.setAttribute("aria-label",O.a11y.hueSlider),C.setAttribute("aria-label",O.a11y.alphaSlider),L.setAttribute("aria-label",O.a11y.input),w.setAttribute("aria-label",O.a11y.instruction))}}function i(e){h(m,"click",e,function(e){var t=O.parent,a=e.target.getBoundingClientRect(),l=y.scrollY,r={left:!1,top:!1},o={x:0,y:0},n=a.x,i=l+a.y+a.height+O.margin;H=e.target,N=H.value,B=function(e){e=e.substring(0,3).toLowerCase();return"rgb"!==e&&"hsl"!==e?"hex":e}(N),g.classList.add("clr-open");var c,s=g.offsetWidth,u=g.offsetHeight;t?(c=y.getComputedStyle(t),e=parseFloat(c.marginTop),c=parseFloat(c.borderTopWidth),(o=t.getBoundingClientRect()).y+=c+l,n-=o.x,i-=o.y,n+s>t.clientWidth&&(n+=a.width-s,r.left=!0),i+u>t.clientHeight-e&&(i-=a.height+u+2*O.margin,r.top=!0),i+=t.scrollTop):(n+s>m.documentElement.clientWidth&&(n+=a.width-s,r.left=!0),i+u-l>m.documentElement.clientHeight&&(i=l+a.y-u-O.margin,r.top=!0)),g.classList.toggle("clr-left",r.left),g.classList.toggle("clr-top",r.top),g.style.left=n+"px",g.style.top=i+"px",k={width:w.offsetWidth,height:w.offsetHeight,x:g.offsetLeft+w.offsetLeft+o.x,y:g.offsetTop+w.offsetTop+o.y},d(N),L.focus({preventScroll:!0})}),h(m,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(e){m.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=m.createElement("div")).innerHTML='<button aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function l(e){H&&(e&&N!==H.value&&(H.value=N,H.dispatchEvent(new Event("input",{bubbles:!0}))),N!==H.value&&H.dispatchEvent(new Event("change",{bubbles:!0})),g.classList.remove("clr-open"),H.focus({preventScroll:!0}),H=null)}function d(e){var t=function(e){D.fillStyle="#000",D.fillStyle=e,e=(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(D.fillStyle))?{r:+e[3],g:+e[4],b:+e[5],a:+e[6]}:(e=D.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),{r:e[0],g:e[1],b:e[2],a:1});return e}(e),e=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=b.max(t,a,l),o=b.min(t,a,l),n=r-o,i=r,c=0,o=0;n&&(r===t&&(c=(a-l)/n),r===a&&(c=2+(l-t)/n),r===l&&(c=4+(t-a)/n),r&&(o=n/r));return{h:(c=b.floor(60*c))<0?c+360:c,s:b.round(100*o),v:b.round(100*i),a:e.a}}(t);n(e.s,e.v),s(t,e),T.value=e.h,g.style.color="hsl("+e.h+", 100%, 50%)",A.style.left=e.h/360*100+"%",x.style.left=k.width*e.s/100+"px",x.style.top=k.height-k.height*e.v/100+"px",C.value=100*e.a,M.style.left=100*e.a+"%"}function r(e){H&&(H.value=e||L.value,H.dispatchEvent(new Event("input",{bubbles:!0})))}function o(e,t){e={h:+T.value,s:e/k.width*100,v:100-t/k.height*100,a:C.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,o=l*(1-b.abs(r%2-1)),n=a-l;l+=n,o+=n;t=b.floor(r)%6,a=[l,o,n,n,o,l][t],r=[o,l,l,o,n,n][t],t=[n,n,o,l,l,o][t];return{r:b.round(255*a),g:b.round(255*r),b:b.round(255*t),a:e.a}}(e);n(e.s,e.v),s(t,e),r()}function n(e,t){var a=O.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),x.setAttribute("aria-label",a)}function t(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-k.x,t=t.pageY-k.y;O.parent&&(t+=O.parent.scrollTop),a=a<0?0:a>k.width?k.width:a,t=t<0?0:t>k.height?k.height:t,x.style.left=a+"px",x.style.top=t+"px",o(a,t),e.preventDefault(),e.stopPropagation()}function s(e,t){void 0===t&&(t={});var a,l,r=O.format;for(a in e=void 0===e?{}:e)j[a]=e[a];for(l in t)j[l]=t[l];var o,n=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);O.alpha&&e.a<1&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(j),i=n.substring(0,7);switch(x.style.color=i,M.parentNode.style.color=i,M.style.color=n,E.style.color=n,w.style.display="none",w.offsetHeight,w.style.display="",M.nextElementSibling.style.display="none",M.nextElementSibling.offsetHeight,M.nextElementSibling.style.display="","mixed"===r?r=1===j.a?"hex":"rgb":"auto"===r&&(r=B),r){case"hex":L.value=n;break;case"rgb":L.value=(o=j,O.alpha&&1!==o.a?"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")":"rgb("+o.r+", "+o.g+", "+o.b+")");break;case"hsl":L.value=(o=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(j),O.alpha&&1!==o.a?"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")":"hsl("+o.h+", "+o.s+"%, "+o.l+"%)")}m.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+T.value,t=+x.style.left.replace("px",""),a=+x.style.top.replace("px","");g.style.color="hsl("+e+", 100%, 50%)",A.style.left=e/360*100+"%",o(t,a)}function u(){var e=C.value/100;M.style.left=100*e+"%",s({a:e}),r()}function p(){(g=m.createElement("div")).setAttribute("id","clr-picker"),g.className="clr-picker",g.innerHTML='<input id="clr-color-value" class="clr-color" type="text" value="" aria-label="'+O.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+O.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+O.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+O.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+O.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button id="clr-clear" class="clr-clear">'+O.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+O.a11y.close+'"></button><span id="clr-open-label" hidden>'+O.a11y.open+'</span><span id="clr-swatch-label" hidden>'+O.a11y.swatch+"</span>",m.body.appendChild(g),w=f("clr-color-area"),x=f("clr-color-marker"),S=f("clr-clear"),E=f("clr-color-preview"),L=f("clr-color-value"),T=f("clr-hue-slider"),A=f("clr-hue-marker"),C=f("clr-alpha-slider"),M=f("clr-alpha-marker"),i(O.el),c(O.el),h(g,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),h(w,"mousedown",function(e){h(m,"mousemove",t)}),h(w,"touchstart",function(e){m.addEventListener("touchmove",t,{passive:!1})}),h(x,"mousedown",function(e){h(m,"mousemove",t)}),h(x,"touchstart",function(e){m.addEventListener("touchmove",t,{passive:!1})}),h(L,"change",function(e){d(L.value),r()}),h(S,"click",function(e){r(""),l()}),h(E,"click",function(e){r(),l()}),h(m,"click",".clr-format input",function(e){B=e.target.value,s(),r()}),h(g,"click",".clr-swatches button",function(e){d(e.target.textContent),r()}),h(m,"mouseup",function(e){m.removeEventListener("mousemove",t)}),h(m,"touchend",function(e){m.removeEventListener("touchmove",t)}),h(m,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),l()}),h(m,"keydown",function(e){"Escape"===e.key?l(!0):"Tab"===e.key&&g.classList.add("clr-keyboard-nav")}),h(m,"click",".clr-field button",function(e){e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),h(x,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+x.style.left.replace("px","")+e,t=+x.style.top.replace("px","")+t,x.style.left=e+"px",x.style.top=t+"px",o(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),h(w,"click",t),h(T,"input",e),h(C,"input",u)}function f(e){return m.getElementById(e)}function h(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function v(e,t){t=void 0!==t?t:[],"loading"!==m.readyState?e.apply(void 0,t):m.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}
 /*!
@@ -7,2 +7,2 @@ * Copyright (c) 2021 Momo Bassit.
   */
-return y=window,b=document,g=Math,D=b.createElement("canvas").getContext("2d"),O={el:"[data-coloris]",parent:null,theme:"light",wrap:!0,margin:2,format:"hex",formatToggle:!(j={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],alpha:!0,clearButton:{show:!1,label:"Clear"},a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),function(){var r={init:d,set:a,wrap:c,close:l};function e(e){v(function(){e&&("string"==typeof e?i:a)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];v(r[l],t)}}(t);return e}();function a(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&c(e.el);break;case"parent":O.parent=b.querySelector(e.parent),O.parent&&O.parent.appendChild(m);break;case"theme":m.className="clr-picker clr-"+e.theme.split("-").join(" clr-");break;case"margin":e.margin*=1,O.margin=(isNaN(e.margin)?O:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"format":O.format=e.format;break;case"formatToggle":f("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(O.format="auto");break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),a.length&&(f("clr-swatches").innerHTML="<div>"+a.join("")+"</div>")}();break;case"alpha":O.alpha=!!e.alpha,m.setAttribute("data-alpha",O.alpha);break;case"clearButton":var a="none";e.clearButton.show&&(a="block"),e.clearButton.label&&(S.innerHTML=e.clearButton.label),S.style.display=a;break;case"a11y":var l,r=e.a11y,o=!1;if("object"==typeof r)for(var n in r)r[n]&&O.a11y[n]&&(O.a11y[n]=r[n],o=!0);o&&(l=f("clr-open-label"),a=f("clr-swatch-label"),l.innerHTML=O.a11y.open,a.innerHTML=O.a11y.swatch,E.setAttribute("aria-label",O.a11y.close),T.setAttribute("aria-label",O.a11y.hueSlider),C.setAttribute("aria-label",O.a11y.alphaSlider),L.setAttribute("aria-label",O.a11y.input),w.setAttribute("aria-label",O.a11y.instruction))}}function i(e){h(b,"click",e,function(e){var t=O.parent,a=e.target.getBoundingClientRect(),l=y.scrollY,r={left:!1,top:!1},o={x:0,y:0},n=a.x,i=l+a.y+a.height+O.margin;B=e.target,M=B.value,N=function(e){e=e.substring(0,3).toLowerCase();return"rgb"!==e&&"hsl"!==e?"hex":e}(M),m.classList.add("clr-open");var c,s=m.offsetWidth,u=m.offsetHeight;t?(c=y.getComputedStyle(t),e=parseFloat(c.marginTop),c=parseFloat(c.borderTopWidth),(o=t.getBoundingClientRect()).y+=c+l,n-=o.x,i-=o.y,n+s>t.clientWidth&&(n+=a.width-s,r.left=!0),i+u>t.clientHeight-e&&(i-=a.height+u+2*O.margin,r.top=!0),i+=t.scrollTop):(n+s>b.documentElement.clientWidth&&(n+=a.width-s,r.left=!0),i+u-l>b.documentElement.clientHeight&&(i=l+a.y-u-O.margin,r.top=!0)),m.classList.toggle("clr-left",r.left),m.classList.toggle("clr-top",r.top),m.style.left=n+"px",m.style.top=i+"px",k={width:w.offsetWidth,height:w.offsetHeight,x:m.offsetLeft+w.offsetLeft+o.x,y:m.offsetTop+w.offsetTop+o.y},p(M),L.focus({preventScroll:!0})}),h(b,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(e){b.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=b.createElement("div")).innerHTML='<button aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function l(e){B&&(e&&M!==B.value&&(B.value=M,B.dispatchEvent(new Event("input",{bubbles:!0}))),M!==B.value&&B.dispatchEvent(new Event("change",{bubbles:!0})),m.classList.remove("clr-open"),B.focus({preventScroll:!0}),B=null)}function p(e){var t=function(e){D.fillStyle="#000",D.fillStyle=e,e=(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(D.fillStyle))?{r:+e[3],g:+e[4],b:+e[5],a:+e[6]}:(e=D.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),{r:e[0],g:e[1],b:e[2],a:1});return e}(e),e=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=g.max(t,a,l),o=g.min(t,a,l),n=r-o,i=r,c=0,o=0;n&&(r===t&&(c=(a-l)/n),r===a&&(c=2+(l-t)/n),r===l&&(c=4+(t-a)/n),r&&(o=n/r));return{h:(c=g.floor(60*c))<0?c+360:c,s:g.round(100*o),v:g.round(100*i),a:e.a}}(t);n(e.s,e.v),s(t,e),T.value=e.h,m.style.color="hsl("+e.h+", 100%, 50%)",A.style.left=e.h/360*100+"%",x.style.left=k.width*e.s/100+"px",x.style.top=k.height-k.height*e.v/100+"px",C.value=100*e.a,H.style.left=100*e.a+"%"}function r(e){B&&(B.value=void 0!==e?e:L.value,B.dispatchEvent(new Event("input",{bubbles:!0})))}function o(e,t){e={h:+T.value,s:e/k.width*100,v:100-t/k.height*100,a:C.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,o=l*(1-g.abs(r%2-1)),n=a-l;l+=n,o+=n;t=g.floor(r)%6,a=[l,o,n,n,o,l][t],r=[o,l,l,o,n,n][t],t=[n,n,o,l,l,o][t];return{r:g.round(255*a),g:g.round(255*r),b:g.round(255*t),a:e.a}}(e);n(e.s,e.v),s(t,e),r()}function n(e,t){var a=O.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),x.setAttribute("aria-label",a)}function t(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-k.x,t=t.pageY-k.y;O.parent&&(t+=O.parent.scrollTop),a=a<0?0:a>k.width?k.width:a,t=t<0?0:t>k.height?k.height:t,x.style.left=a+"px",x.style.top=t+"px",o(a,t),e.preventDefault(),e.stopPropagation()}function s(e,t){void 0===t&&(t={});var a,l,r=O.format;for(a in e=void 0===e?{}:e)j[a]=e[a];for(l in t)j[l]=t[l];var o,n=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);O.alpha&&e.a<1&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(j),i=n.substring(0,7);switch(x.style.color=i,H.parentNode.style.color=i,H.style.color=n,E.style.color=n,w.style.display="none",w.offsetHeight,w.style.display="",H.nextElementSibling.style.display="none",H.nextElementSibling.offsetHeight,H.nextElementSibling.style.display="","mixed"===r?r=1===j.a?"hex":"rgb":"auto"===r&&(r=N),r){case"hex":L.value=n;break;case"rgb":L.value=(o=j,O.alpha&&1!==o.a?"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")":"rgb("+o.r+", "+o.g+", "+o.b+")");break;case"hsl":L.value=(o=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=g.round((a-l)/g.min(l,1-l)*100));return{h:e.h,s:t||0,l:g.round(100*l),a:e.a}}(j),O.alpha&&1!==o.a?"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")":"hsl("+o.h+", "+o.s+"%, "+o.l+"%)")}b.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+T.value,t=+x.style.left.replace("px",""),a=+x.style.top.replace("px","");m.style.color="hsl("+e+", 100%, 50%)",A.style.left=e/360*100+"%",o(t,a)}function u(){var e=C.value/100;H.style.left=100*e+"%",s({a:e}),r()}function d(){(m=b.createElement("div")).setAttribute("id","clr-picker"),m.className="clr-picker",m.innerHTML='<input id="clr-color-value" class="clr-color" type="text" value="" aria-label="'+O.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+O.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+O.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+O.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+O.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button id="clr-clear" class="clr-clear">'+O.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+O.a11y.close+'"></button><span id="clr-open-label" hidden>'+O.a11y.open+'</span><span id="clr-swatch-label" hidden>'+O.a11y.swatch+"</span>",b.body.appendChild(m),w=f("clr-color-area"),x=f("clr-color-marker"),S=f("clr-clear"),E=f("clr-color-preview"),L=f("clr-color-value"),T=f("clr-hue-slider"),A=f("clr-hue-marker"),C=f("clr-alpha-slider"),H=f("clr-alpha-marker"),i(O.el),c(O.el),h(m,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),h(w,"mousedown",function(e){h(b,"mousemove",t)}),h(w,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),h(x,"mousedown",function(e){h(b,"mousemove",t)}),h(x,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),h(L,"change",function(e){p(L.value),r()}),h(S,"click",function(e){r(""),l()}),h(E,"click",function(e){r(),l()}),h(b,"click",".clr-format input",function(e){N=e.target.value,s(),r()}),h(m,"click",".clr-swatches button",function(e){p(e.target.textContent),r()}),h(b,"mouseup",function(e){b.removeEventListener("mousemove",t)}),h(b,"touchend",function(e){b.removeEventListener("touchmove",t)}),h(b,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),l()}),h(b,"keydown",function(e){"Escape"===e.key?l(!0):"Tab"===e.key&&m.classList.add("clr-keyboard-nav")}),h(b,"click",".clr-field button",function(e){e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),h(x,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+x.style.left.replace("px","")+e,t=+x.style.top.replace("px","")+t,x.style.left=e+"px",x.style.top=t+"px",o(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),h(w,"click",t),h(T,"input",e),h(C,"input",u)}function f(e){return b.getElementById(e)}function h(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function v(e,t){t=void 0!==t?t:[],"loading"!==b.readyState?e.apply(void 0,t):b.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var y,b,g,m,w,k,x,E,L,S,T,A,C,H,B,N,M,D,j,O});
+var y,m,b,g,w,k,x,E,L,S,T,A,C,M,H,B,N,D,j,O;y=window,m=document,b=Math,D=m.createElement("canvas").getContext("2d"),O={el:"[data-coloris]",parent:null,theme:"default",themeMode:"light",wrap:!0,margin:2,format:"hex",formatToggle:!(j={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],alpha:!0,clearButton:{show:!1,label:"Clear"},a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),function(){var r={init:p,set:a,wrap:c,close:l};function e(e){v(function(){e&&("string"==typeof e?i:a)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];v(r[l],t)}}(t)}()});

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A lightweight and elegant color picker.",
@@ -5,0 +5,0 @@ "author": "Momo Bassit",

README.md

@@ -7,47 +7,8 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-![Coloris in light, dark and polaroid themes](https://raw.githubusercontent.com/mdbassit/Coloris/gh-pages/images/coloris-light-dark-polaroid.jpg)
+Forked from https://github.com/mdbassit/Coloris so we could provide TypeScript and NPM support. Head over to Momo Bassit's original repo for user documentation.
 
-A lightweight and elegant JavaScript color picker written in vanilla ES6.
-Convert any text input field into a color field.
+## NPM
 
-**NOTE:** Forked from https://github.com/mdbassit/Coloris so we could provide TypeScript and NPM support.
+You can download the color picker from NPM:
 
-[**View demo**](https://coloris.js.org/examples.html)
-
-## Features
-
-* Zero dependencies
-* Very easy to use
-* Customizable
-* Dark theme
-* Opacity support
-* Color swatches
-* Multiple color formats
-* Touch support
-* Fully accessible
-* Works on all modern browsers (no IE support)
-* TypeScript support
-
-## Getting Started
-
-### Basic usage
-
-Download the [latest version](https://github.com/melloware/coloris-npm/releases/latest), and add the script and style to your page:
-
-```html
-<link rel="stylesheet" href="coloris.min.css"/>
-<script src="coloris.min.js"></script>
-```
-
-Then just add the data-coloris attribute to your input fields:
-```html
-<input type="text" data-coloris>
-```
-
-That's it. All done!
-
-### NPM
-
-You can also download the color picker from NPM
-
 ```bash
@@ -71,3 +32,3 @@ # using NPM
 
-### AMD
+## AMD
 
@@ -85,3 +46,3 @@ The color picker also works with AMD / require.js:
 
-### Java / Maven
+## Java / Maven
 
@@ -98,84 +59,4 @@ The colorpicker can also be downloaded as a Java JAR for use in Java web applicatons:
 
-### Options
+## TypeScript
 
-```js
-Coloris({
-  // The default behavior is to append the color picker's dialog to the end of the document's
-  // body. but it is possible to append it to a custom parent instead. This is especially useful
-  // if the color fields are in a scrollable container and you want color picker' dialog to stay
-  // anchored to them. You will need to set the position of the container to relative or absolute.
-  parent: '.container',
-
-  // A custom selector to bind the color picker to. This must point to input fields.
-  el: '.color-field',
-
-  // The bound input fields are wrapped in a div that adds a thumbnail showing the current color
-  // and a button to open the color picker (for accessibility only). If you wish to keep your
-  // fields unaltered, set this to false, in which case you will lose the color thumbnail and
-  // the accessible button (not recommended).
-  wrap: true,
-
-  // Available themes: light, dark, large, large-dark, polaroid, polaroid-dark.
-  // More themes might be added in the future.
-  theme: 'light',
-
-  // The margin in pixels between the input fields and the color picker's dialog.
-  margin: 2,
-
-  // Set the preferred color string format:
-  //  * hex: outputs #RRGGBB or #RRGGBBAA (default).
-  //  * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A).
-  //  * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A).
-  //  * auto: guesses the format from the active input field. Defaults to hex if it fails.
-  //  * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A).
-  format: 'hex',
-
-  // Enable or disable alpha support.
-  // When disabled, it will strip the alpha value from the existing color value in all formats.
-  alpha: true,
-
-  // Show an optional clear button and set its label
-  clearButton: {
-    show: true,
-    label: 'Clear'
-  },
-
-  // An array of the desired color swatches to display. If omitted or the array is empty,
-  // the color swatches will be disabled.
-  swatches: [
-    '#264653',
-    '#2a9d8f',
-    '#e9c46a',
-    'rgb(244,162,97)',
-    '#e76f51',
-    '#d62828',
-    'navy',
-    '#07b',
-    '#0096c7',
-    '#00b4d880',
-    'rgba(0,119,182,0.8)',
-  ]
-});
-```
-
-### Events
-
-An "input" event is triggered on the bound input field whenever a new color is selected.
-A "change" event is triggered when the color picker is closed and if the color has changed since it was opened.
-
-### Closing the color picker
-
-The color picker dialog can be closed by clicking anywhere on the page or by pressing the ESC on the keyboard. The later will also revert the color to its original value.
-
-If you would like to close the dialog programmatically, you can do so by calling the close() method:
-```js
-// Close the dialog
-Coloris.close();
-
-// Close the dialog and revert the color to its original value
-Coloris.close(true);
-```
-
-# TypeScript
-
 This package includes TypeScript declarations. When you use it in a module
@@ -206,3 +87,3 @@ environment, just import it:
 ```bash
-git clone [e-mail]:melloware/Coloris.git
+git clone [e-mail]:mdbassit/Coloris.git
 ```
@@ -209,0 +90,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1485

increased by4.72%

Worsened metrics

Total package byte prevSize

70632

decreased by-3.57%

Number of lines in readme file

118

decreased by-50.21%

No dependency changes