quill-easy-color/dist/index.js

Improve color selection

import e from"quill";const t=function(e,t){return e=Math.min(t,Math.max(0,Number.parseFloat(`${e}`))),Math.abs(e-t)<1e-6?1:e%t/Number.parseFloat(t)},o=e=>({h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b)),a:Math.min(1,Math.max(0,e.a))}),s=e=>{e=e.startsWith("#")?e.slice(1):e;return{r:Number.parseInt(e.slice(0,2),16),g:Number.parseInt(e.slice(2,4),16),b:Number.parseInt(e.slice(4,6),16),a:Number((Number.parseInt(e.slice(6,8)||"ff",16)/255).toFixed(2))}},r=e=>{let{r:o,g:s,b:r,a:n}=e;o=t(o,255),s=t(s,255),r=t(r,255);const l=Math.max(o,s,r),i=Math.min(o,s,r);let a;const c=l,d=l-i,u=0===l?0:d/l;if(l===i)a=0;else{switch(l){case o:a=(s-r)/d+(s<r?6:0);break;case s:a=(r-o)/d+2;break;case r:a=(o-s)/d+4}a/=6}return{h:360*a,s:100*u,b:100*c,a:n}},n=e=>{let{h:o,s:s,b:r,a:n}=e;o=6*t(o,360),s=t(s,100),r=t(r,100);const l=Math.floor(o),i=o-l,a=r*(1-s),c=r*(1-i*s),d=r*(1-(1-i)*s),u=l%6,b=[r,c,a,a,d,r][u],m=[d,r,r,c,a,a][u],h=[a,a,d,r,r,c][u];return{r:Math.round(255*b),g:Math.round(255*m),b:Math.round(255*h),a:n}},l=e=>{const t=[e.r.toString(16),e.g.toString(16),e.b.toString(16),Math.round(255*e.a).toString(16)];for(const e in t)1===t[e].length&&(t[e]=`0${t[e]}`);return t.join("")},i=e=>l(n(e)),a=e=>{const t=document.createElement("span");return t.style.backgroundColor=e,(e=>{const t=(e=e.replace(/\s+/g,"")).match(/rgba?\((\d+),(\d+),(\d+)(?:,([\d.]+))?\)/);if(!t)return{a:1,r:0,g:0,b:0};const o=parseInt(t[1],10),s=parseInt(t[2],10),r=parseInt(t[3],10);return{a:t[4]?parseFloat(t[4]):1,r:o,g:s,b:r}})(t.style.backgroundColor)},c=(e={})=>{const t=150;let a=r(s(e.color||"#ff0000"));const c=((e,t="jsf")=>{const o=t?`${t}-`:"";return{b:()=>`${o}${e}`,be:t=>t?`${o}${e}__${t}`:"",bm:t=>t?`${o}${e}--${t}`:"",bem:(t,s)=>t&&s?`${o}${e}__${t}--${s}`:"",ns:e=>e?`${o}${e}`:"",bs:t=>t?`${o}${e}-${t}`:"",cv:e=>e?`--${o}${e}`:"",is:e=>`is-${e}`}})("color-picker"),d=document.createElement("div");d.classList.add(c.b());const u=document.createElement("div");u.classList.add(c.be("content"));const b=document.createElement("div");b.classList.add(c.be("selector"));const m=document.createElement("div");m.classList.add(c.be("background")),b.appendChild(m);const h=document.createElement("div");h.classList.add(c.be("background-handle")),m.appendChild(h);const g=document.createElement("div");g.classList.add(c.be("alpha"));const p=document.createElement("div");p.classList.add(c.be("alpha-bg"));const v=document.createElement("div");v.classList.add(c.be("alpha-handle")),g.appendChild(p),g.appendChild(v);const C=document.createElement("div");C.classList.add(c.be("hue"));const f=document.createElement("div");f.classList.add(c.be("hue-handle")),C.appendChild(f);const E=document.createElement("div");E.classList.add(c.be("action"));const[L,y,k,x]=["r","g","b","a"].map((e=>{const t=document.createElement("div");t.classList.add(c.be("action-item"),e);const s=document.createElement("label");s.textContent=e.toUpperCase();const l=document.createElement("input");return l.classList.add(c.be("input")),l.addEventListener("input",(()=>{l.value=l.value.replaceAll(/[^0-9]/g,"")})),l.addEventListener("change",(()=>{let t=Math.round(Number(l.value));"a"===e&&(t/=100);S(o(r(Object.assign({},n(a),{[e]:t})))),M()})),t.appendChild(s),t.appendChild(l),E.appendChild(t),l}));u.appendChild(C),u.appendChild(b),u.appendChild(g),d.appendChild(u),d.appendChild(E);let I=!1,q=!1,$=!1;function A(){const e=i(a);for(const[t,o]of[L,y,k].entries())o.value=String(Number.parseInt(e[2*t]+e[2*t+1],16));x.value=String((100*a.a).toFixed(0))}function M(){Object.assign(h.style,{left:`${Math.floor(230*a.s/100)}px`,top:`${Math.floor(t*(100-a.b)/100)}px`}),b.style.backgroundColor=`#${l(n({h:a.h,s:100,b:100,a:1}))}`,f.style.top=`${Math.floor(t-t*a.h/360)}px`,v.style.left=100*a.a+"%",function(){const{r:e,g:t,b:o}=n(a);p.style.background=`linear-gradient(to right, rgba(${e}, ${t}, ${o}, 0) 0%, rgba(${e}, ${t}, ${o}, 1) 100%)`}(),A()}function S(t){a=o(Object.assign({},a,t)),A(),e.onChange&&e.onChange(`#${i(a)}`)}function w(e){const o=b.getBoundingClientRect(),s=o.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),r=o.left+document.body.scrollLeft;S({s:Math.floor(100*Math.max(0,Math.min(230,e.pageX-r))/230),b:Math.floor(100*(t-Math.max(0,Math.min(t,e.pageY-s)))/t)}),M()}function O(e){const o=C.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);S({h:Math.floor(360*(t-Math.max(0,Math.min(t,e.pageY-o)))/t)}),M()}function N(e){const{pageX:t}=e,o=g.getBoundingClientRect();let s=t-o.left;s=Math.max(5,s),s=Math.min(s,o.width-5),S({a:Math.round((s-5)/(o.width-10)*100)/100}),M()}function U(e){I&&(e.preventDefault(),w(e)),q&&(e.preventDefault(),O(e)),$&&(e.preventDefault(),N(e))}function T(){document.removeEventListener("mousemove",U),document.removeEventListener("mouseup",T),I=!1}function P(){document.removeEventListener("mousemove",U),document.removeEventListener("mouseup",P),q=!1}function j(){document.removeEventListener("mousemove",U),document.removeEventListener("mouseup",j),$=!1}return b.addEventListener("mousedown",(function(e){document.addEventListener("mousemove",U),document.addEventListener("mouseup",T),I=!0,w(e)})),C.addEventListener("mousedown",(function(e){document.addEventListener("mousemove",U),document.addEventListener("mouseup",P),q=!0,O(e)})),g.addEventListener("mousedown",(function(e){document.addEventListener("mousemove",U),document.addEventListener("mouseup",j),$=!0,N(e)})),M(),d},d=e.import("ui/picker");class u extends d{static clearText="Remove color";static customText="Color picker";currentIndex=-1;get statics(){return this.constructor}constructor(e,t,o){super(e),this.themeOptions=Object.assign({localStorageKey:"used-color",closeAfterChange:!0,customColorChangeDelay:300,maxHistoryColor:10,expandIcon:'<svg viewBox="0 0 32 32"><path fill="currentColor" d="m24 12l-8 10l-8-10z"/></svg>',keepChooseColor:!0},o),this.label.innerHTML=t,this.container.classList.add("ql-color-picker"),this.localColorUsedKey=`${this.select.className}-${this.themeOptions.localStorageKey}`;try{if(this.usedColor=JSON.parse(localStorage.getItem(this.localColorUsedKey)),!(this.usedColor&&this.usedColor instanceof Array))throw new Error("usedColor get wrong type")}catch(e){localStorage.setItem(this.localColorUsedKey,[]),this.usedColor=[]}this.createUsedColor(),this.themeOptions.keepChooseColor&&(this.container.classList.add("keep-color"),this.bindLabelEvent(),this.expendIcon()),this.curColor=""}bindLabelEvent(){this.label.addEventListener("mousedown",(e=>{this.close(),e.preventDefault(),this.selectItem(Array.from(this.options.querySelectorAll(".ql-picker-item")).find((e=>(e.dataset.value??"")===this.curColor)),!0)}))}expendIcon(){const e=document.createElement("span");e.classList.add("ql-picker-expand"),this.themeOptions.expandIcon&&(e.innerHTML=this.themeOptions.expandIcon),this.label.parentNode.insertBefore(e,this.label.nextSibling),e.addEventListener("mousedown",(()=>{this.togglePicker()})),this.labelIcon=e}update(){let e;const t=this.themeOptions.keepChooseColor?this.currentIndex:this.select.selectedIndex;if(t>-1){let o=this.container.querySelectorAll(".ql-picker-item")[t];e=this.select.options[t],this.selectItem(o)}else this.selectItem(null);let o=null!=e&&e!==this.select.querySelector("option[selected]");this.label.classList.toggle("ql-active",o),this.labelIcon&&this.labelIcon.classList.toggle("ql-active",o)}createUsedColor(){const e=document.createElement("div");e.classList.add("used");const t=document.createElement("div");t.classList.add("used-list"),e.appendChild(t),this.options.appendChild(e),this.usedColorLabels=t;for(let e=this.usedColor.length-1;e>=0;e--)this.createUsedColorItem(this.usedColor[e])}createUsedColorItem(e){const t=this.createUsedColorOption(e);this.select.appendChild(t);const o=this.buildItem(t);o.setAttribute("custom",""),this.usedColorLabels.appendChild(o)}createUsedColorOption(e){const t=this.select.querySelector(`option[value='${e}'][custom]`);if(t)return t;const o=document.createElement("option");return o.setAttribute("custom",""),o.setAttribute("value",e),o}removeUsedColor(e){const t=this.select.querySelector(`option[value='${e}'][custom]`),o=this.options.querySelector(`p[data-value='${e}'][custom]`);t&&t.remove(),o&&o.remove()}selectColor(e){if(!e)return;const t=this.usedColor.findIndex((t=>t===e));if(-1!==t){const e=this.usedColor.splice(t,1);this.removeUsedColor(e)}this.usedColor.unshift(e);this.usedColor.slice(this.themeOptions.maxHistoryColor).map((e=>this.removeUsedColor(e))),this.usedColor=this.usedColor.slice(0,this.themeOptions.maxHistoryColor),localStorage.setItem(this.localColorUsedKey,JSON.stringify(this.usedColor)),this.createUsedColorItem(e)}buildItem(e){if("custom"===e.value){const e=function(e,t){let o;return function(...s){o&&clearTimeout(o),o=setTimeout((()=>{e.apply(this,s)}),t)}}((e=>{const{r:t,g:o,b:r,a:n}=s(e),l=`rgba(${t}, ${o}, ${r}, ${n})`;this.selectColor(l),this.selectItem(this.options.querySelector(`p[data-value='${l}']`),!0)}),300),t=document.createElement("div");t.classList.add("custom","ql-picker-item");const o=document.createElement("span");return o.textContent=this.statics.customText,t.appendChild(o),this.customColorPicker=c({onChange:e}),t.addEventListener("click",(e=>{e.stopPropagation(),t.contains(this.customColorPicker)||(t.appendChild(this.customColorPicker),this.customColorPicker.addEventListener("click",(e=>e.stopPropagation())),document.addEventListener("click",(()=>{this.customColorPicker.remove()}),{once:!0}))})),t}{const t=document.createElement("p");t.tabIndex="0",t.setAttribute("role","button"),t.classList.add("ql-picker-item");const o=e.getAttribute("value");if(!e.value){t.classList.add("blank");const e=document.createElement("span");e.textContent=this.statics.clearText,t.appendChild(e)}return e.hasAttribute("value")&&t.setAttribute("data-value",o),e.textContent&&t.setAttribute("data-label",e.textContent),t.addEventListener("click",(()=>{this.selectColor(t?.dataset?.value),this.selectItem(t,!0)})),t.style.setProperty("--bg",o),(e=>{const{r:t,g:o,b:s}=e;return(.299*t+.587*o+.114*s)/255>.5})(a(o))||(t.dataset.dark="true"),t}}close(){super.close(),this.customColorPicker?.remove()}selectItem(e,t=!1){const o=e&&e.getAttribute("data-value")||"",s=this.label.querySelector(".ql-color-label");s&&("line"===s.tagName?s.style.stroke=o:s.style.fill=o),this.curColor=o;const r=this.container.querySelector(".ql-selected");null!=r&&r.classList.remove("ql-selected"),null!=e&&(e.classList.add("ql-selected"),this.select.selectedIndex=Array.from(this.select.children).findIndex((t=>t.value===(e.dataset.value??""))),this.currentIndex=this.select.selectedIndex,e.hasAttribute("data-value")?this.label.setAttribute("data-value",e.getAttribute("data-value")):this.label.removeAttribute("data-value"),e.hasAttribute("data-label")?this.label.setAttribute("data-label",e.getAttribute("data-label")):this.label.removeAttribute("data-label"),t&&(this.select.dispatchEvent(new Event("change")),this.themeOptions.closeAfterChange&&this.close()))}}const b=e.import("parchment"),m=new(b.StyleAttributor||b.Attributor.Style)("background","background-color",{scope:b.Scope.INLINE}),h=e.import("parchment"),g=new(h.StyleAttributor||h.Attributor.Style)("color","color",{scope:h.Scope.INLINE}),p=e.import("themes/snow"),v=e.import("ui/icon-picker"),C=e.import("ui/picker");e.register({"attributors/style/color":g,"formats/color":g,"attributors/style/background":m,"formats/background":m},!0);const f=[!1,"center","right","justify"],E=[!1,"serif","monospace"],L=["1","2","3",!1],y=["small",!1,"large","huge"],k=["","rgb(255, 255, 255)","rgb(0, 0, 0)","rgb(72, 83, 104)","rgb(41, 114, 244)","rgb(0, 163, 245)","rgb(49, 155, 98)","rgb(222, 60, 54)","rgb(248, 136, 37)","rgb(245, 196, 0)","rgb(153, 56, 215)","rgb(242, 242, 242)","rgb(127, 127, 127)","rgb(243, 245, 247)","rgb(229, 239, 255)","rgb(229, 246, 255)","rgb(234, 250, 241)","rgb(254, 233, 232)","rgb(254, 243, 235)","rgb(254, 249, 227)","rgb(253, 235, 255)","rgb(216, 216, 216)","rgb(89, 89, 89)","rgb(197, 202, 211)","rgb(199, 220, 255)","rgb(199, 236, 255)","rgb(195, 234, 213)","rgb(255, 201, 199)","rgb(255, 220, 196)","rgb(255, 238, 173)","rgb(242, 199, 255)","rgb(191, 191, 191)","rgb(63, 63, 63)","rgb(128, 139, 158)","rgb(153, 190, 255)","rgb(153, 221, 255)","rgb(152, 215, 182)","rgb(255, 156, 153)","rgb(255, 186, 132)","rgb(255, 226, 112)","rgb(213, 142, 255)","rgb(165, 165, 165)","rgb(38, 38, 38)","rgb(53, 59, 69)","rgb(20, 80, 184)","rgb(18, 116, 165)","rgb(39, 124, 79)","rgb(158, 30, 26)","rgb(184, 96, 20)","rgb(163, 130, 0)","rgb(94, 34, 129)","rgb(147, 147, 147)","rgb(13, 13, 13)","rgb(36, 39, 46)","rgb(12, 48, 110)","rgb(10, 65, 92)","rgb(24, 78, 50)","rgb(88, 17, 14)","rgb(92, 48, 10)","rgb(102, 82, 0)","rgb(59, 21, 81)","custom"];class x extends p{buildPickers(t,o){this.pickers=Array.from(t).map((e=>{if(e.classList.contains("ql-align")&&(null==e.querySelector("option")&&I(e,f),"object"==typeof o.align))return new v(e,o.align);if(e.classList.contains("ql-background")||e.classList.contains("ql-color")){const t=e.classList.contains("ql-background")?"background":"color";return null==e.querySelector("option")&&function(e,t,o,s){const r=document.createElement("span");t.forEach((t=>{const n=document.createElement("option");t===s?n.setAttribute("selected","selected"):(r.style[o]=t,n.setAttribute("value",r.style[o])),e.appendChild(n)}))}(e,k),new u(e,o[t],this.options.themeOptions)}return null==e.querySelector("option")&&(e.classList.contains("ql-font")?I(e,E):e.classList.contains("ql-header")?I(e,L):e.classList.contains("ql-size")&&I(e,y)),new C(e)}));this.quill.on(e.events.EDITOR_CHANGE,(()=>{this.pickers.forEach((e=>{e instanceof u&&this.options?.themeOptions?.keepChooseColor||e.update()}))}))}}function I(e,t,o=!1){t.forEach((t=>{const s=document.createElement("option");t===o?s.setAttribute("selected","selected"):s.setAttribute("value",t),e.appendChild(s)}))}const q=e.import("themes/bubble"),$=e.import("ui/icon-picker"),A=e.import("ui/picker");e.register({"attributors/style/color":g,"formats/color":g,"attributors/style/background":m,"formats/background":m},!0);const M=[!1,"center","right","justify"],S=[!1,"serif","monospace"],w=["1","2","3",!1],O=["small",!1,"large","huge"],N=["","rgb(255, 255, 255)","rgb(0, 0, 0)","rgb(72, 83, 104)","rgb(41, 114, 244)","rgb(0, 163, 245)","rgb(49, 155, 98)","rgb(222, 60, 54)","rgb(248, 136, 37)","rgb(245, 196, 0)","rgb(153, 56, 215)","rgb(242, 242, 242)","rgb(127, 127, 127)","rgb(243, 245, 247)","rgb(229, 239, 255)","rgb(229, 246, 255)","rgb(234, 250, 241)","rgb(254, 233, 232)","rgb(254, 243, 235)","rgb(254, 249, 227)","rgb(253, 235, 255)","rgb(216, 216, 216)","rgb(89, 89, 89)","rgb(197, 202, 211)","rgb(199, 220, 255)","rgb(199, 236, 255)","rgb(195, 234, 213)","rgb(255, 201, 199)","rgb(255, 220, 196)","rgb(255, 238, 173)","rgb(242, 199, 255)","rgb(191, 191, 191)","rgb(63, 63, 63)","rgb(128, 139, 158)","rgb(153, 190, 255)","rgb(153, 221, 255)","rgb(152, 215, 182)","rgb(255, 156, 153)","rgb(255, 186, 132)","rgb(255, 226, 112)","rgb(213, 142, 255)","rgb(165, 165, 165)","rgb(38, 38, 38)","rgb(53, 59, 69)","rgb(20, 80, 184)","rgb(18, 116, 165)","rgb(39, 124, 79)","rgb(158, 30, 26)","rgb(184, 96, 20)","rgb(163, 130, 0)","rgb(94, 34, 129)","rgb(147, 147, 147)","rgb(13, 13, 13)","rgb(36, 39, 46)","rgb(12, 48, 110)","rgb(10, 65, 92)","rgb(24, 78, 50)","rgb(88, 17, 14)","rgb(92, 48, 10)","rgb(102, 82, 0)","rgb(59, 21, 81)","custom"];class U extends q{buildPickers(t,o){this.pickers=Array.from(t).map((e=>{if(e.classList.contains("ql-align")&&(null==e.querySelector("option")&&T(e,M),"object"==typeof o.align))return new $(e,o.align);if(e.classList.contains("ql-background")||e.classList.contains("ql-color")){const t=e.classList.contains("ql-background")?"background":"color";return null==e.querySelector("option")&&function(e,t,o,s){const r=document.createElement("span");t.forEach((t=>{const n=document.createElement("option");t===s?n.setAttribute("selected","selected"):(r.style[o]=t,n.setAttribute("value",r.style[o])),e.appendChild(n)}))}(e,N),new u(e,o[t],this.options.themeOptions)}return null==e.querySelector("option")&&(e.classList.contains("ql-font")?T(e,S):e.classList.contains("ql-header")?T(e,w):e.classList.contains("ql-size")&&T(e,O)),new A(e)}));this.quill.on(e.events.EDITOR_CHANGE,(()=>{this.pickers.forEach((e=>{e instanceof u&&this.options?.themeOptions?.keepChooseColor||e.update()}))}))}}function T(e,t,o=!1){t.forEach((t=>{const s=document.createElement("option");t===o?s.setAttribute("selected","selected"):s.setAttribute("value",t),e.appendChild(s)}))}export{U as EasyColorBubbleTheme,u as EasyColorPicker,x as EasyColorSnowTheme};
//# sourceMappingURL=index.js.map