@melloware/coloris - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

dist/coloris.d.ts

@@ -175,2 +175,9 @@
   /**
+   * Focus the color value input when the color picker dialog is opened.
+   *
+   * @default true
+   */
+  focusInput?: boolean;
+
+  /**
    * Enable or disable alpha support.
@@ -177,0 +184,0 @@ *

dist/coloris.js

@@ -68,2 +68,3 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
       alpha: true,
+      focusInput: true,
       clearButton: {
@@ -193,3 +194,5 @@ show: false,
               colorArea.setAttribute('aria-label', settings.a11y.instruction);
-            }}
+            }
+          default:
+            settings[key] = options[key];}
 
@@ -271,3 +274,6 @@ }
         setColorFromStr(oldColor);
-        colorValue.focus({ preventScroll: true });
+
+        if (settings.focusInput) {
+          colorValue.focus({ preventScroll: true });
+        }
       });
@@ -325,3 +331,7 @@
         picker.classList.remove('clr-open');
-        currentEl.focus({ preventScroll: true });
+
+        if (settings.focusInput) {
+          currentEl.focus({ preventScroll: true });
+        }
+
         currentEl = null;
@@ -916,3 +926,3 @@ }
      * @param {function} fn The function to call.
-     * @param {array} args Arguments to pass to the function.
+     * @param {array} [args] Arguments to pass to the function.
      */
@@ -919,0 +929,0 @@ function DOMReady(fn, args) {

dist/coloris.min.js

@@ -7,2 +7,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(){
   */
-return 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);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=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)})}var y,m,b,g,w,k,x,E,L,S,T,A,C,M,H,B,N,D,j,O});
+return y=window,m=document,b=Math,D=m.createElement("canvas").getContext("2d"),I={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,focusInput:!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);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":I.parent=m.querySelector(e.parent),I.parent&&I.parent.appendChild(g);break;case"themeMode":I.themeMode=e.themeMode,"auto"===e.themeMode&&y.matchMedia&&y.matchMedia("(prefers-color-scheme: dark)").matches&&(I.themeMode="dark");case"theme":e.theme&&(I.theme=e.theme),g.className="clr-picker clr-"+I.theme+" clr-"+I.themeMode;break;case"margin":e.margin*=1,I.margin=(isNaN(e.margin)?I:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"format":I.format=e.format;break;case"formatToggle":f("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(I.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":I.alpha=!!e.alpha,g.setAttribute("data-alpha",I.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]&&I.a11y[n]&&(I.a11y[n]=r[n],o=!0);o&&(l=f("clr-open-label"),a=f("clr-swatch-label"),l.innerHTML=I.a11y.open,a.innerHTML=I.a11y.swatch,E.setAttribute("aria-label",I.a11y.close),T.setAttribute("aria-label",I.a11y.hueSlider),C.setAttribute("aria-label",I.a11y.alphaSlider),L.setAttribute("aria-label",I.a11y.input),w.setAttribute("aria-label",I.a11y.instruction));default:I[t]=e[t]}}function i(e){h(m,"click",e,function(e){var t=I.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+I.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*I.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-I.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),I.focusInput&&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"),I.focusInput&&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=I.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;I.parent&&(t+=I.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=I.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);I.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,I.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),I.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="'+I.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+I.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="'+I.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="'+I.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+I.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">'+I.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+I.a11y.close+'"></button><span id="clr-open-label" hidden>'+I.a11y.open+'</span><span id="clr-swatch-label" hidden>'+I.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(I.el),c(I.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)})}var y,m,b,g,w,k,x,E,L,S,T,A,C,M,H,B,N,D,j,I});

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "A lightweight and elegant color picker.",
@@ -51,3 +51,4 @@ "author": "Momo Bassit",
     "start": "gulp",
-    "prepack": "gulp build"
+    "prepack": "gulp build && npm run test-npm",
+    "test-npm": "node test-npm/run-tests.js"
   },
@@ -54,0 +55,0 @@ "browserslist": "> 0.25%, not dead",

README.md

@@ -7,2 +7,5 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+A lightweight and elegant JavaScript color picker written in vanilla ES6.  
+Convert any text input field into a color field.
+
 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.
@@ -53,3 +56,3 @@
    <artifactId>melloware__coloris</artifactId>
-   <version>0.8.0</version>
+   <version>0.8.1</version>
 </dependency>
@@ -83,5 +86,7 @@ ```
 
+First of all, again, please note that this is a fork of the original repo!
+
 Clone the git repo:
 ```bash
-git clone [e-mail]:mdbassit/Coloris.git
+git clone [e-mail]:melloware/coloris-npm
 ```
@@ -91,3 +96,3 @@
 ```bash
-cd Coloris && npm install
+cd coloris-npm && npm install
 ```
@@ -94,0 +99,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

Total package byte prevSize

71367

increased by0.94%

Lines of code

1465

increased by0.9%

Number of lines in readme file

123

increased by4.24%

No dependency changes