From ec2e67f35425a9765c42e1f50e24b177996556b3 Mon Sep 17 00:00:00 2001 From: Momo Bassit Date: Fri, 12 Apr 2024 15:26:15 +0700 Subject: [PATCH] Update dist files and bump version --- dist/coloris.js | 167 +++++++++++++++++++++++++++++--------------- dist/coloris.min.js | 2 +- package-lock.json | 4 +- package.json | 2 +- 4 files changed, 114 insertions(+), 61 deletions(-) diff --git a/dist/coloris.js b/dist/coloris.js index 8a50320..1aa88b0 100644 --- a/dist/coloris.js +++ b/dist/coloris.js @@ -73,7 +73,7 @@ } break; case 'parent': - container = document.querySelector(options.parent); + container = options.parent instanceof HTMLElement ? options.parent : document.querySelector(options.parent); if (container) { container.appendChild(picker); settings.parent = options.parent; @@ -105,7 +105,7 @@ break; case 'rtl': settings.rtl = !!options.rtl; - document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);}); + Array.from(document.getElementsByClassName('clr-field')).forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);}); break; case 'margin': options.margin *= 1; @@ -125,13 +125,30 @@ break; case 'swatches': if (Array.isArray(options.swatches)) {(function () { - var swatches = []; + var swatchesContainer = getEl('clr-swatches'); + var swatches = document.createElement('div'); + // Clear current swatches + swatchesContainer.textContent = ''; + + // Build new swatches options.swatches.forEach(function (swatch, i) { - swatches.push(""); + var button = document.createElement('button'); + + button.setAttribute('type', "button"); + button.setAttribute('id', "clr-swatch-" + i); + button.setAttribute('aria-labelledby', "clr-swatch-label clr-swatch-" + i); + button.style.color = swatch; + button.textContent = swatch; + + swatches.appendChild(button); }); - getEl('clr-swatches').innerHTML = swatches.length ? "
" + swatches.join('') + "
" : ''; + // Append new swatches if any + if (options.swatches.length) { + swatchesContainer.appendChild(swatches); + } + settings.swatches = options.swatches.slice();})(); } break; @@ -294,54 +311,61 @@ /** * Bind the color picker to input fields that match the selector. - * @param {string} selector One or more selectors pointing to input fields. + * @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements. */ function bindFields(selector) { - // Show the color picker on click on the input fields that match the selector - addListener(document, 'click', selector, function (event) { - // Skip if inline mode is in use - if (settings.inline) { - return; - } + if (selector instanceof HTMLElement) { + selector = [selector]; + } - // Apply any per-instance options first - attachVirtualInstance(event.target); + if (Array.isArray(selector)) { + selector.forEach(function (field) { + addListener(field, 'click', openPicker); + addListener(field, 'input', updateColorPreview); + }); + } else { + addListener(document, 'click', selector, openPicker); + addListener(document, 'input', selector, updateColorPreview); + } + } - currentEl = event.target; - oldColor = currentEl.value; - currentFormat = getColorFormatFromStr(oldColor); - picker.classList.add('clr-open'); + /** + * Open the color picker. + * @param {object} event The event that opens the color picker. + */ + function openPicker(event) { + // Skip if inline mode is in use + if (settings.inline) { + return; + } - updatePickerPosition(); - setColorFromStr(oldColor); + // Apply any per-instance options first + attachVirtualInstance(event.target); - if (settings.focusInput || settings.selectInput) { - colorValue.focus({ preventScroll: true }); - colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd); - } + currentEl = event.target; + oldColor = currentEl.value; + currentFormat = getColorFormatFromStr(oldColor); + picker.classList.add('clr-open'); - if (settings.selectInput) { - colorValue.select(); - } + updatePickerPosition(); + setColorFromStr(oldColor); - // Always focus the first element when using keyboard navigation - if (keyboardNav || settings.swatchesOnly) { - getFocusableElements().shift().focus(); - } + if (settings.focusInput || settings.selectInput) { + colorValue.focus({ preventScroll: true }); + colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd); + } - // Trigger an "open" event - currentEl.dispatchEvent(new Event('open', { bubbles: true })); - }); + if (settings.selectInput) { + colorValue.select(); + } - // Update the color preview of the input fields that match the selector - addListener(document, 'input', selector, function (event) { - var parent = event.target.parentNode; + // Always focus the first element when using keyboard navigation + if (keyboardNav || settings.swatchesOnly) { + getFocusableElements().shift().focus(); + } - // Only update the preview if the field has been previously wrapped - if (parent.classList.contains('clr-field')) { - parent.style.color = event.target.value; - } - }); + // Trigger an "open" event + currentEl.dispatchEvent(new Event('open', { bubbles: true })); } /** @@ -423,27 +447,52 @@ /** * Wrap the linked input fields in a div that adds a color preview. - * @param {string} selector One or more selectors pointing to input fields. + * @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements. */ function wrapFields(selector) { - document.querySelectorAll(selector).forEach(function (field) { - var parentNode = field.parentNode; + if (selector instanceof HTMLElement) { + wrapColorField(selector); + } else if (Array.isArray(selector)) { + selector.forEach(wrapColorField); + } else { + document.querySelectorAll(selector).forEach(wrapColorField); + } + } - if (!parentNode.classList.contains('clr-field')) { - var wrapper = document.createElement('div'); - var classes = 'clr-field'; + /** + * Wrap an input field in a div that adds a color preview. + * @param {object} field The input field. + */ + function wrapColorField(field) { + var parentNode = field.parentNode; - if (settings.rtl || field.classList.contains('clr-rtl')) { - classes += ' clr-rtl'; - } + if (!parentNode.classList.contains('clr-field')) { + var wrapper = document.createElement('div'); + var classes = 'clr-field'; - wrapper.innerHTML = ""; - parentNode.insertBefore(wrapper, field); - wrapper.setAttribute('class', classes); - wrapper.style.color = field.value; - wrapper.appendChild(field); + if (settings.rtl || field.classList.contains('clr-rtl')) { + classes += ' clr-rtl'; } - }); + + wrapper.innerHTML = ''; + parentNode.insertBefore(wrapper, field); + wrapper.className = classes; + wrapper.style.color = field.value; + wrapper.appendChild(field); + } + } + + /** + * Update the color preview of an input field + * @param {object} event The "input" event that triggers the color change. + */ + function updateColorPreview(event) { + var parent = event.target.parentNode; + + // Only update the preview if the field has been previously wrapped + if (parent.classList.contains('clr-field')) { + parent.style.color = event.target.value; + } } /** @@ -983,6 +1032,10 @@ addListener(document, 'mousemove', moveMarker); }); + addListener(colorArea, 'contextmenu', function (event) { + event.preventDefault(); + }); + addListener(colorArea, 'touchstart', function (event) { document.addEventListener('touchmove', moveMarker, { passive: false }); }); diff --git a/dist/coloris.min.js b/dist/coloris.min.js index 017d102..ec59a98 100644 --- a/dist/coloris.min.js +++ b/dist/coloris.min.js @@ -3,4 +3,4 @@ * Licensed under the MIT License (MIT) * https://github.com/mdbassit/Coloris */ -!function(u,d,s,c){var p,f,h,i,b,v,y,g,m,l,w,k,L,E,a,n,r=d.createElement("canvas").getContext("2d"),x={r:0,g:0,b:0,h:0,s:0,v:0,a:1},A={},S={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return c},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",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."}},o={},C="",T={},B=!1;function M(e){if("object"==typeof e)for(var t in e)switch(t){case"el":N(e.el),!1!==e.wrap&&j(e.el);break;case"parent":(p=d.querySelector(e.parent))&&(p.appendChild(f),S.parent=e.parent,p===d.body&&(p=c));break;case"themeMode":S.themeMode=e.themeMode,"auto"===e.themeMode&&u.matchMedia&&u.matchMedia("(prefers-color-scheme: dark)").matches&&(S.themeMode="dark");case"theme":e.theme&&(S.theme=e.theme),f.className="clr-picker clr-"+S.theme+" clr-"+S.themeMode,S.inline&&I();break;case"rtl":S.rtl=!!e.rtl,d.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",S.rtl)});break;case"margin":e.margin*=1,S.margin=(isNaN(e.margin)?S:e).margin;break;case"wrap":e.el&&e.wrap&&j(e.el);break;case"formatToggle":S.formatToggle=!!e.formatToggle,z("clr-format").style.display=S.formatToggle?"block":"none",S.formatToggle&&(S.format="auto");break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('")}),z("clr-swatches").innerHTML=a.length?"
"+a.join("")+"
":"",S.swatches=e.swatches.slice()}();break;case"swatchesOnly":S.swatchesOnly=!!e.swatchesOnly,f.setAttribute("data-minimal",S.swatchesOnly);break;case"alpha":S.alpha=!!e.alpha,f.setAttribute("data-alpha",S.alpha);break;case"inline":S.inline=!!e.inline,f.setAttribute("data-inline",S.inline),S.inline&&(l=e.defaultColor||S.defaultColor,E=q(l),I(),W(l));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(S.clearLabel=e.clearButton.label,y.innerHTML=S.clearLabel),e.clearButton=e.clearButton.show),S.clearButton=!!e.clearButton,y.style.display=S.clearButton?"block":"none";break;case"clearLabel":S.clearLabel=e.clearLabel,y.innerHTML=S.clearLabel;break;case"closeButton":S.closeButton=!!e.closeButton,S.closeButton?f.insertBefore(g,b):b.appendChild(g);break;case"closeLabel":S.closeLabel=e.closeLabel,g.innerHTML=S.closeLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&S.a11y[o]&&(S.a11y[o]=r[o],n=!0);n&&(a=z("clr-open-label"),l=z("clr-swatch-label"),a.innerHTML=S.a11y.open,l.innerHTML=S.a11y.swatch,g.setAttribute("aria-label",S.a11y.close),y.setAttribute("aria-label",S.a11y.clear),m.setAttribute("aria-label",S.a11y.hueSlider),w.setAttribute("aria-label",S.a11y.alphaSlider),v.setAttribute("aria-label",S.a11y.input),h.setAttribute("aria-label",S.a11y.instruction));break;default:S[t]=e[t]}}function H(e,t){"string"==typeof e&&"object"==typeof t&&(o[e]=t,B=!0)}function O(e){delete o[e],0===Object.keys(o).length&&(B=!1,e===C&&D())}function t(l){if(B){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in o)if("break"===function(e){var t=o[e];if(l.matches(e)){for(var a in C=e,T={},r.forEach(function(e){return delete t[e]}),t)T[a]=Array.isArray(S[a])?S[a].slice():S[a];return M(t),"break"}}(e))break}}function D(){0r.clientWidth&&(a+=t.width-o,i.left=!0),l+c>r.clientHeight-e&&c+S.margin<=t.top-(s.y-n)&&(l-=t.height+c+2*S.margin,i.top=!0),l+=r.scrollTop):(a+o>d.documentElement.clientWidth&&(a+=t.width-o,i.left=!0),l+c-n>d.documentElement.clientHeight&&c+S.margin<=t.top&&(l=n+t.y-c-S.margin,i.top=!0)),f.classList.toggle("clr-left",i.left),f.classList.toggle("clr-top",i.top),f.style.left=a+"px",f.style.top=l+"px",s.x+=f.offsetLeft,s.y+=f.offsetTop),A={width:h.offsetWidth,height:h.offsetHeight,x:h.offsetLeft+s.x,y:h.offsetTop+s.y}}function j(e){d.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=d.createElement("div"),a="clr-field",(S.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function R(e){var t;L&&!S.inline&&(t=L,e&&(L=c,a!==t.value&&(t.value=a,t.dispatchEvent(new Event("input",{bubbles:!0})))),setTimeout(function(){a!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),f.classList.remove("clr-open"),B&&D(),t.dispatchEvent(new Event("close",{bubbles:!0})),S.focusInput&&t.focus({preventScroll:!0}),L=c)}function W(e){var t=function(e){r.fillStyle="#000",r.fillStyle=e,e=(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?{r:+e[3],g:+e[4],b:+e[5],a:+e[6]}:(e=r.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=s.max(t,a,l),n=s.min(t,a,l),o=r-n,c=r,i=0,n=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(n=o/r));return{h:(i=s.floor(60*i))<0?i+360:i,s:s.round(100*n),v:s.round(100*c),a:e.a}}(t);P(e.s,e.v),G(t,e),m.value=e.h,f.style.color="hsl("+e.h+", 100%, 50%)",l.style.left=e.h/360*100+"%",i.style.left=A.width*e.s/100+"px",i.style.top=A.height-A.height*e.v/100+"px",w.value=100*e.a,k.style.left=100*e.a+"%"}function q(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function F(e){e=e!==c?e:v.value,L&&(L.value=e,L.dispatchEvent(new Event("input",{bubbles:!0}))),S.onChange&&S.onChange.call(u,e,L),d.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:L}}))}function Y(e,t){e={h:+m.value,s:e/A.width*100,v:100-t/A.height*100,a:w.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,n=l*(1-s.abs(r%2-1)),o=a-l;l+=o,n+=o;t=s.floor(r)%6,a=[l,n,o,o,n,l][t],r=[n,l,l,n,o,o][t],t=[o,o,n,l,l,n][t];return{r:s.round(255*a),g:s.round(255*r),b:s.round(255*t),a:e.a}}(e);P(e.s,e.v),G(t,e),F()}function P(e,t){var a=S.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",a)}function U(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-A.x,t=t.pageY-A.y;p&&(t+=p.scrollTop),X(a,t),e.preventDefault(),e.stopPropagation()}function X(e,t){e=e<0?0:e>A.width?A.width:e,t=t<0?0:t>A.height?A.height:t,i.style.left=e+"px",i.style.top=t+"px",Y(e,t),i.focus()}function G(e,t){void 0===t&&(t={});var a,l,r=S.format;for(a in e=void 0===e?{}:e)x[a]=e[a];for(l in t)x[l]=t[l];var n,o=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);S.alpha&&(e.a<1||S.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(x),c=o.substring(0,7);switch(i.style.color=c,k.parentNode.style.color=c,k.style.color=o,b.style.color=o,h.style.display="none",h.offsetHeight,h.style.display="",k.nextElementSibling.style.display="none",k.nextElementSibling.offsetHeight,k.nextElementSibling.style.display="","mixed"===r?r=1===x.a?"hex":"rgb":"auto"===r&&(r=E),r){case"hex":v.value=o;break;case"rgb":v.value=(n=x,!S.alpha||1===n.a&&!S.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":v.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0
'+S.a11y.format+'
",d.body.appendChild(f),h=z("clr-color-area"),i=z("clr-color-marker"),y=z("clr-clear"),g=z("clr-close"),b=z("clr-color-preview"),v=z("clr-color-value"),m=z("clr-hue-slider"),l=z("clr-hue-marker"),w=z("clr-alpha-slider"),k=z("clr-alpha-marker"),N(S.el),j(S.el),J(f,"mousedown",function(e){f.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),J(h,"mousedown",function(e){J(d,"mousemove",U)}),J(h,"touchstart",function(e){d.addEventListener("touchmove",U,{passive:!1})}),J(i,"mousedown",function(e){J(d,"mousemove",U)}),J(i,"touchstart",function(e){d.addEventListener("touchmove",U,{passive:!1})}),J(v,"change",function(e){var t=v.value;(L||S.inline)&&F(""===t?t:W(t))}),J(y,"click",function(e){F(""),R()}),J(g,"click",function(e){F(),R()}),J(z("clr-format"),"click",".clr-format input",function(e){E=e.target.value,G(),F()}),J(f,"click",".clr-swatches button",function(e){W(e.target.textContent),F(),S.swatchesOnly&&R()}),J(d,"mouseup",function(e){d.removeEventListener("mousemove",U)}),J(d,"touchend",function(e){d.removeEventListener("touchmove",U)}),J(d,"mousedown",function(e){n=!1,f.classList.remove("clr-keyboard-nav"),R()}),J(d,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?R(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(n=!0,f.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(a=(t=$()).shift(),t=t.pop(),r&&l===a?(t.focus(),e.preventDefault()):r||l!==t||(a.focus(),e.preventDefault()))}),J(d,"click",".clr-field button",function(e){B&&D(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),J(i,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){X(+i.style.left.replace("px","")+e,+i.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),J(h,"click",U),J(m,"input",e),J(w,"input",K)})}(window,document,Math); \ No newline at end of file +!function(u,p,s,c){var d,f,h,i,b,y,v,m,g,l,w,k,L,E,a,n,r=p.createElement("canvas").getContext("2d"),x={r:0,g:0,b:0,h:0,s:0,v:0,a:1},A={},C={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return c},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",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."}},o={},S="",T={},B=!1;function M(t){if("object"==typeof t)for(var e in t)switch(e){case"el":D(t.el),!1!==t.wrap&&R(t.el);break;case"parent":(d=t.parent instanceof HTMLElement?t.parent:p.querySelector(t.parent))&&(d.appendChild(f),C.parent=t.parent,d===p.body&&(d=c));break;case"themeMode":C.themeMode=t.themeMode,"auto"===t.themeMode&&u.matchMedia&&u.matchMedia("(prefers-color-scheme: dark)").matches&&(C.themeMode="dark");case"theme":t.theme&&(C.theme=t.theme),f.className="clr-picker clr-"+C.theme+" clr-"+C.themeMode,C.inline&&j();break;case"rtl":C.rtl=!!t.rtl,Array.from(p.getElementsByClassName("clr-field")).forEach(function(e){return e.classList.toggle("clr-rtl",C.rtl)});break;case"margin":t.margin*=1,C.margin=(isNaN(t.margin)?C:t).margin;break;case"wrap":t.el&&t.wrap&&R(t.el);break;case"formatToggle":C.formatToggle=!!t.formatToggle,V("clr-format").style.display=C.formatToggle?"block":"none",C.formatToggle&&(C.format="auto");break;case"swatches":Array.isArray(t.swatches)&&function(){var e=V("clr-swatches"),l=p.createElement("div");e.textContent="",t.swatches.forEach(function(e,t){var a=p.createElement("button");a.setAttribute("type","button"),a.setAttribute("id","clr-swatch-"+t),a.setAttribute("aria-labelledby","clr-swatch-label clr-swatch-"+t),a.style.color=e,a.textContent=e,l.appendChild(a)}),t.swatches.length&&e.appendChild(l),C.swatches=t.swatches.slice()}();break;case"swatchesOnly":C.swatchesOnly=!!t.swatchesOnly,f.setAttribute("data-minimal",C.swatchesOnly);break;case"alpha":C.alpha=!!t.alpha,f.setAttribute("data-alpha",C.alpha);break;case"inline":C.inline=!!t.inline,f.setAttribute("data-inline",C.inline),C.inline&&(l=t.defaultColor||C.defaultColor,E=P(l),j(),Y(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(C.clearLabel=t.clearButton.label,v.innerHTML=C.clearLabel),t.clearButton=t.clearButton.show),C.clearButton=!!t.clearButton,v.style.display=C.clearButton?"block":"none";break;case"clearLabel":C.clearLabel=t.clearLabel,v.innerHTML=C.clearLabel;break;case"closeButton":C.closeButton=!!t.closeButton,C.closeButton?f.insertBefore(m,b):b.appendChild(m);break;case"closeLabel":C.closeLabel=t.closeLabel,m.innerHTML=C.closeLabel;break;case"a11y":var a,l,r=t.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&C.a11y[o]&&(C.a11y[o]=r[o],n=!0);n&&(a=V("clr-open-label"),l=V("clr-swatch-label"),a.innerHTML=C.a11y.open,l.innerHTML=C.a11y.swatch,m.setAttribute("aria-label",C.a11y.close),v.setAttribute("aria-label",C.a11y.clear),g.setAttribute("aria-label",C.a11y.hueSlider),w.setAttribute("aria-label",C.a11y.alphaSlider),y.setAttribute("aria-label",C.a11y.input),h.setAttribute("aria-label",C.a11y.instruction));break;default:C[e]=t[e]}}function H(e,t){"string"==typeof e&&"object"==typeof t&&(o[e]=t,B=!0)}function N(e){delete o[e],0===Object.keys(o).length&&(B=!1,e===S&&O())}function t(l){if(B){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in o)if("break"===function(e){var t=o[e];if(l.matches(e)){for(var a in S=e,T={},r.forEach(function(e){return delete t[e]}),t)T[a]=Array.isArray(C[a])?C[a].slice():C[a];return M(t),"break"}}(e))break}}function O(){0r.clientWidth&&(a+=t.width-o,i.left=!0),l+c>r.clientHeight-e&&c+C.margin<=t.top-(s.y-n)&&(l-=t.height+c+2*C.margin,i.top=!0),l+=r.scrollTop):(a+o>p.documentElement.clientWidth&&(a+=t.width-o,i.left=!0),l+c-n>p.documentElement.clientHeight&&c+C.margin<=t.top&&(l=n+t.y-c-C.margin,i.top=!0)),f.classList.toggle("clr-left",i.left),f.classList.toggle("clr-top",i.top),f.style.left=a+"px",f.style.top=l+"px",s.x+=f.offsetLeft,s.y+=f.offsetTop),A={width:h.offsetWidth,height:h.offsetHeight,x:h.offsetLeft+s.x,y:h.offsetTop+s.y}}function R(e){e instanceof HTMLElement?W(e):(Array.isArray(e)?e:p.querySelectorAll(e)).forEach(W)}function W(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=p.createElement("div"),a="clr-field",(C.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='',l.insertBefore(t,e),t.className=a,t.style.color=e.value,t.appendChild(e))}function q(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)}function F(e){var t;L&&!C.inline&&(t=L,e&&(L=c,a!==t.value&&(t.value=a,t.dispatchEvent(new Event("input",{bubbles:!0})))),setTimeout(function(){a!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),f.classList.remove("clr-open"),B&&O(),t.dispatchEvent(new Event("close",{bubbles:!0})),C.focusInput&&t.focus({preventScroll:!0}),L=c)}function Y(e){var t=function(e){r.fillStyle="#000",r.fillStyle=e,e=(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?{r:+e[3],g:+e[4],b:+e[5],a:+e[6]}:(e=r.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=s.max(t,a,l),n=s.min(t,a,l),o=r-n,c=r,i=0,n=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(n=o/r));return{h:(i=s.floor(60*i))<0?i+360:i,s:s.round(100*n),v:s.round(100*c),a:e.a}}(t);G(e.s,e.v),z(t,e),g.value=e.h,f.style.color="hsl("+e.h+", 100%, 50%)",l.style.left=e.h/360*100+"%",i.style.left=A.width*e.s/100+"px",i.style.top=A.height-A.height*e.v/100+"px",w.value=100*e.a,k.style.left=100*e.a+"%"}function P(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function U(e){e=e!==c?e:y.value,L&&(L.value=e,L.dispatchEvent(new Event("input",{bubbles:!0}))),C.onChange&&C.onChange.call(u,e,L),p.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:L}}))}function X(e,t){e={h:+g.value,s:e/A.width*100,v:100-t/A.height*100,a:w.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,n=l*(1-s.abs(r%2-1)),o=a-l;l+=o,n+=o;t=s.floor(r)%6,a=[l,n,o,o,n,l][t],r=[n,l,l,n,o,o][t],t=[o,o,n,l,l,n][t];return{r:s.round(255*a),g:s.round(255*r),b:s.round(255*t),a:e.a}}(e);G(e.s,e.v),z(t,e),U()}function G(e,t){var a=C.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",a)}function K(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-A.x,t=t.pageY-A.y;d&&(t+=d.scrollTop),$(a,t),e.preventDefault(),e.stopPropagation()}function $(e,t){e=e<0?0:e>A.width?A.width:e,t=t<0?0:t>A.height?A.height:t,i.style.left=e+"px",i.style.top=t+"px",X(e,t),i.focus()}function z(e,t){void 0===t&&(t={});var a,l,r=C.format;for(a in e=void 0===e?{}:e)x[a]=e[a];for(l in t)x[l]=t[l];var n,o=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);C.alpha&&(e.a<1||C.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(x),c=o.substring(0,7);switch(i.style.color=c,k.parentNode.style.color=c,k.style.color=o,b.style.color=o,h.style.display="none",h.offsetHeight,h.style.display="",k.nextElementSibling.style.display="none",k.nextElementSibling.offsetHeight,k.nextElementSibling.style.display="","mixed"===r?r=1===x.a?"hex":"rgb":"auto"===r&&(r=E),r){case"hex":y.value=o;break;case"rgb":y.value=(n=x,!C.alpha||1===n.a&&!C.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":y.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0
'+C.a11y.format+'
",p.body.appendChild(f),h=V("clr-color-area"),i=V("clr-color-marker"),v=V("clr-clear"),m=V("clr-close"),b=V("clr-color-preview"),y=V("clr-color-value"),g=V("clr-hue-slider"),l=V("clr-hue-marker"),w=V("clr-alpha-slider"),k=V("clr-alpha-marker"),D(C.el),R(C.el),Z(f,"mousedown",function(e){f.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),Z(h,"mousedown",function(e){Z(p,"mousemove",K)}),Z(h,"contextmenu",function(e){e.preventDefault()}),Z(h,"touchstart",function(e){p.addEventListener("touchmove",K,{passive:!1})}),Z(i,"mousedown",function(e){Z(p,"mousemove",K)}),Z(i,"touchstart",function(e){p.addEventListener("touchmove",K,{passive:!1})}),Z(y,"change",function(e){var t=y.value;(L||C.inline)&&U(""===t?t:Y(t))}),Z(v,"click",function(e){U(""),F()}),Z(m,"click",function(e){U(),F()}),Z(V("clr-format"),"click",".clr-format input",function(e){E=e.target.value,z(),U()}),Z(f,"click",".clr-swatches button",function(e){Y(e.target.textContent),U(),C.swatchesOnly&&F()}),Z(p,"mouseup",function(e){p.removeEventListener("mousemove",K)}),Z(p,"touchend",function(e){p.removeEventListener("touchmove",K)}),Z(p,"mousedown",function(e){n=!1,f.classList.remove("clr-keyboard-nav"),F()}),Z(p,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?F(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(n=!0,f.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(a=(t=Q()).shift(),t=t.pop(),r&&l===a?(t.focus(),e.preventDefault()):r||l!==t||(a.focus(),e.preventDefault()))}),Z(p,"click",".clr-field button",function(e){B&&O(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),Z(i,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){$(+i.style.left.replace("px","")+e,+i.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),Z(h,"click",K),Z(g,"input",e),Z(w,"input",J)})}(window,document,Math); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d634c35..618aa53 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "Coloris", - "version": "0.23.0", + "version": "0.24.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "Coloris", - "version": "0.23.0", + "version": "0.24.0", "license": "MIT", "devDependencies": { "@babel/core": "^7.15.5", diff --git a/package.json b/package.json index be1b425..2e50a14 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Coloris", - "version": "0.23.0", + "version": "0.24.0", "description": "A lightweight and elegant color picker.", "author": "Momo Bassit", "license": "MIT",