diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index e152415..1bf0ce0 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -74,12 +74,13 @@ module.exports = { | extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\_ | | value | **optional:** default or possible value/s for option | see below | -| type | value | -| ------ | ----------------- | -| toggle | _boolean_ | -| select | _array\_ | -| input | _string_ | -| file | none | +| type | value | +| ------ | -------------------- | +| toggle | _boolean_ | +| select | _array\_ | +| input | _string_ or _number_ | +| color | _string_ | +| file | none | > the file option stores only a filepath, not the file itself. diff --git a/mods/core/client.js b/mods/core/client.js index ce6386d..b8d92c5 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -53,7 +53,7 @@ module.exports = (store, __exports) => { dragarea.className = 'window-dragarea'; document.querySelector('.notion-topbar').prepend(dragarea); document.documentElement.style.setProperty( - '--configured-dragarea_height', + '--configured--dragarea_height', `${store().dragarea_height + 2}px` ); } diff --git a/mods/core/colorjoe/min.js b/mods/core/colorjoe/min.js new file mode 100644 index 0000000..0d60153 --- /dev/null +++ b/mods/core/colorjoe/min.js @@ -0,0 +1,4 @@ +/*! colorjoe - v4.1.1 - Juho Vepsalainen - MIT +https://bebraw.github.com/colorjoe - 2020-01-27 */ +!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.colorjoe=n()}(this,function(){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function e(e,n){return e(n={exports:{}},n.exports),n.exports}var p=e(function(e,n){e.exports=function(){function r(e,n){e?(t(e,n,"touchstart","touchmove","touchend"),t(e,n,"mousedown","mousemove","mouseup")):console.warn("drag is missing elem!")}return r.xyslider=function(e){var n=i(e.class||"",e.parent),t=i("pointer",n);return i("shape shape1",t),i("shape shape2",t),i("bg bg1",n),i("bg bg2",n),r(n,a(e.cbs,t)),{background:n,pointer:t}},r.slider=function(e){var n=i(e.class,e.parent),t=i("pointer",n);return i("shape",t),i("bg",n),r(n,a(e.cbs,t)),{background:n,pointer:t}},r;function a(e,t){var n={};for(var r in e)n[r]=a(e[r]);function a(n){return function(e){e.pointer=t,n(e)}}return n}function i(e,n){return t="div",r=e,a=n,i=document.createElement(t),r&&(i.className=r),a.appendChild(i),i;var t,r,a,i}function t(r,e,n,a,i){var t,o,u,s=(e=(t=e)?{begin:t.begin||p,change:t.change||p,end:t.end||p}:{begin:function(e){o={x:e.elem.offsetLeft,y:e.elem.offsetTop},u=e.cursor},change:function(e){d(e.elem,"left",o.x+e.cursor.x-u.x+"px"),d(e.elem,"top",o.y+e.cursor.y-u.y+"px")},end:p}).begin,l=e.change,f=e.end;c(r,n,function(n){var t=function(e){var n=Array.prototype.slice,t=n.apply(arguments,[1]);return function(){return e.apply(null,t.concat(n.apply(arguments)))}}(g,l,r);c(document,a,t),c(document,i,function e(){h(document,a,t),h(document,i,e),g(f,r,n)}),g(s,r,n)})}function c(e,n,t){var r=!1;try{var a=Object.defineProperty({},"passive",{get:function(){r=!0}});window.addEventListener("testPassive",null,a),window.removeEventListener("testPassive",null,a)}catch(e){}e.addEventListener(n,t,!!r&&{passive:!1})}function h(e,n,t){e.removeEventListener(n,t,!1)}function d(e,n,t){e.style[n]=t}function p(){}function g(e,n,t){t.preventDefault();var r,a,i,o={x:(r=n.getBoundingClientRect()).left,y:r.top},u=n.clientWidth,s=n.clientHeight,l={x:(i=t,(i.touches?i.touches[i.touches.length-1]:i).clientX),y:(a=t,(a.touches?a.touches[a.touches.length-1]:a).clientY)},f=(l.x-o.x)/u,c=(l.y-o.y)/s;e({x:isNaN(f)?0:f,y:isNaN(c)?0:c,cursor:l,elem:n,e:t})}}()}),a=e(function(e,n){e.exports=function(){function c(e){if(Array.isArray(e)){if("string"==typeof e[0]&&"function"==typeof c[e[0]])return new c[e[0]](e.slice(1,e.length));if(4===e.length)return new c.RGB(e[0]/255,e[1]/255,e[2]/255,e[3]/255)}else if("string"==typeof e){var n=e.toLowerCase();c.namedColors[n]&&(e="#"+c.namedColors[n]),"transparent"===n&&(e="rgba(0,0,0,0)");var t=e.match(p);if(t){var r=t[1].toUpperCase(),a=h(t[8])?t[8]:parseFloat(t[8]),i="H"===r[0],o=t[3]?100:i?360:255,u=t[5]||i?100:255,s=t[7]||i?100:255;if(h(c[r]))throw new Error("color."+r+" is not installed.");return new c[r](parseFloat(t[2])/o,parseFloat(t[4])/u,parseFloat(t[6])/s,a)}e.length<6&&(e=e.replace(/^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i,"$1$1$2$2$3$3"));var l=e.match(/^#?([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])$/i);if(l)return new c.RGB(parseInt(l[1],16)/255,parseInt(l[2],16)/255,parseInt(l[3],16)/255);if(c.CMYK){var f=e.match(new RegExp("^cmyk\\("+d.source+","+d.source+","+d.source+","+d.source+"\\)$","i"));if(f)return new c.CMYK(parseFloat(f[1])/100,parseFloat(f[2])/100,parseFloat(f[3])/100,parseFloat(f[4])/100)}}else if("object"==typeof e&&e.isColor)return e;return!1}var u=[],h=function(e){return void 0===e},e=/\s*(\.\d+|\d+(?:\.\d+)?)(%)?\s*/,d=/\s*(\.\d+|100|\d?\d(?:\.\d+)?)%\s*/,p=new RegExp("^(rgb|hsl|hsv)a?\\("+e.source+","+e.source+","+e.source+"(?:,"+/\s*(\.\d+|\d+(?:\.\d+)?)\s*/.source+")?\\)$","i");c.namedColors={},c.installColorSpace=function(a,i,e){function n(e,r){var n={};for(var t in n[r.toLowerCase()]=function(){return this.rgb()[r.toLowerCase()]()},c[r].propertyNames.forEach(function(t){var e="black"===t?"k":t.charAt(0);n[t]=n[e]=function(e,n){return this[r.toLowerCase()]()[t](e,n)}}),n)n.hasOwnProperty(t)&&void 0===c[e].prototype[t]&&(c[e].prototype[t]=n[t])}(c[a]=function(e){var r=Array.isArray(e)?e:arguments;i.forEach(function(e,n){var t=r[n];if("alpha"===e)this._alpha=isNaN(t)||1n)return!1;return!0},r.toJSON=function(){return[a].concat(i.map(function(e){return this["_"+e]},this))},e)if(e.hasOwnProperty(t)){var o=t.match(/^from(.*)$/);o?c[o[1].toUpperCase()].prototype[a.toLowerCase()]=e[t]:r[t]=e[t]}return r[a.toLowerCase()]=function(){return this},r.toString=function(){return"["+a+" "+i.map(function(e){return this["_"+e]},this).join(", ")+"]"},i.forEach(function(t){var e="black"===t?"k":t.charAt(0);r[t]=r[e]=function(n,e){return void 0===n?this["_"+t]:e?new this.constructor(i.map(function(e){return this["_"+e]+(t===e?n:0)},this)):new this.constructor(i.map(function(e){return t===e?n:this["_"+e]},this))}}),u.forEach(function(e){n(a,e),n(e,a)}),u.push(a),c},c.pluginList=[],c.use=function(e){return-1===c.pluginList.indexOf(e)&&(this.pluginList.push(e),e(c)),c},c.installMethod=function(n,t){return u.forEach(function(e){c[e].prototype[n]=t}),this},c.installColorSpace("RGB",["red","green","blue","alpha"],{hex:function(){var e=(65536*Math.round(255*this._red)+256*Math.round(255*this._green)+Math.round(255*this._blue)).toString(16);return"#"+"00000".substr(0,6-e.length)+e},hexa:function(){var e=Math.round(255*this._alpha).toString(16);return"#"+"00".substr(0,2-e.length)+e+this.hex().substr(1,6)},css:function(){return"rgb("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+")"},cssa:function(){return"rgba("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+","+this._alpha+")"}});var n=function(a){a.installColorSpace("XYZ",["x","y","z","alpha"],{fromRgb:function(){var e=function(e){return.04045t[e]?r[e]=(n[e]-t[e])/(1-t[e]):n[e]>t[e]?r[e]=(t[e]-n[e])/t[e]:r[e]=0}),r._red>r._green?r._red>r._blue?n._alpha=r._red:n._alpha=r._blue:r._green>r._blue?n._alpha=r._green:n._alpha=r._blue,n._alpha<1e-10||(a.forEach(function(e){n[e]=(n[e]-t[e])/n._alpha+t[e]}),n._alpha*=r._alpha),n})})}()}),g=n(b,"div");function b(e,n,t){var r=document.createElement(e);return r.className=n,t.appendChild(r),r}function n(e){var n=Array.prototype.slice,t=n.apply(arguments,[1]);return function(){return e.apply(null,t.concat(n.apply(arguments)))}}function t(e,n,t){return Math.min(Math.max(e,n),t)}var v={clamp:t,e:b,div:g,partial:n,labelInput:function(e,n,t,r){var a="colorPickerInput"+Math.floor(1001*Math.random()),i=g(e,t);return{label:(c=n,h=i,d=a,p=b("label","",h),p.innerHTML=c,d&&p.setAttribute("for",d),p),input:(o="text",u=i,s=r,l=a,f=b("input","",u),f.type=o,s&&(f.maxLength=s),l&&f.setAttribute("id",l),s&&(f.maxLength=s),f)};var o,u,s,l,f;var c,h,d,p},X:function(e,n){e.style.left=t(100*n,0,100)+"%"},Y:function(e,n){e.style.top=t(100*n,0,100)+"%"},BG:function(e,n){e.style.background=n}};var r={currentColor:function(e){var n=v.div("currentColorContainer",e),t=v.div("currentColor",n);return{change:function(e){v.BG(t,e.cssa())}}},fields:function(e,t,n){var r=n.space,a=n.limit||255,i=0<=n.fix?n.fix:0,o=(""+a).length+i;o=i?o+1:o;var u=r.split(""),s="A"==r[r.length-1];if(r=s?r.slice(0,-1):r,["RGB","HSL","HSV","CMYK"].indexOf(r)<0)return console.warn("Invalid field names",r);var l=v.div("colorFields",e),f=u.map(function(e){e=e.toLowerCase();var n=v.labelInput("color "+e,e,l,o);return n.input.onblur=c,n.input.onkeydown=h,n.input.onkeyup=d,{name:e,e:n}});function c(){t.done()}function h(e){e.ctrlKey||e.altKey||!/^[a-zA-Z]$/.test(e.key)||e.preventDefault()}function d(){var n=[r];f.forEach(function(e){n.push(e.e.input.value/a)}),s||n.push(t.getAlpha()),t.set(n)}return{change:function(n){f.forEach(function(e){e.e.input.value=(n[e.name]()*a).toFixed(i)})}}},hex:function(e,r,n){var t=v.labelInput("hex",n.label||"",e,7);return t.input.value="#",t.input.onkeyup=function(e){var n=e.keyCode||e.which,t=e.target.value;t=function(e,n,t){for(var r=e,a=e.length;a button { + display: block; + position: absolute; + bottom: 8px; + right: 8px; + margin: 0; + padding: 0; + border: none; + width: 21px; + height: 20px; + cursor: pointer; + background: transparent; + transition: background 0.2s; +} +.colorPicker > button::after { + content: '×'; + font-size: 1.5em; + position: relative; + bottom: 5px; +} +.colorPicker > button:hover { + background: var(--theme--interactive_hover); + border-radius: 4px; + box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border); +} +.colorPicker > button:focus { + outline: none; + box-shadow: 0 0 0 1px var(--theme--table-border); +} +.colorPicker .twod .pointer .shape.shape1 { + width: 11px; + height: 11px; +} +.colorPicker .twod .pointer .shape.shape2 { + width: 9px; + height: 9px; +} +.colorPicker .oned .pointer .shape { + height: 6.5px; + margin-left: 0; + border: 2px solid #fff; + box-shadow: 0 0 0 1px #000; +} +.shape { + cursor: pointer; +} + +@media (max-width: 300px) { + .colorPicker .twod, + .colorPicker .twod .bg { + width: 200px; + height: 200px; + } + .colorPicker .oned, + .colorPicker .oned .bg { + height: 172.5px; + } +} +@media (max-width: 250px) { + .colorPicker .twod, + .colorPicker .twod .bg { + width: 150px; + height: 150px; + } + .colorPicker .oned, + .colorPicker .oned .bg { + height: 132.5px; + } +} diff --git a/mods/core/css/scrollbars.css b/mods/core/css/scrollbars.css index cd34ffa..2525fb5 100644 --- a/mods/core/css/scrollbars.css +++ b/mods/core/css/scrollbars.css @@ -19,18 +19,10 @@ border-radius: 5px; } -.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb { - background-color: var(--theme_dark--scrollbar); - border: var(--theme_dark--scrollbar-border); +.smooth-scrollbars ::-webkit-scrollbar-thumb { + background-color: var(--theme--scrollbar); + border: 1px solid var(--theme--scrollbar-border); } -.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover { - background: var(--theme_dark--scrollbar_hover); -} - -.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb { - background-color: var(--theme_light--scrollbar); - border: 1px solid var(--theme_light--scrollbar-border); -} -.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover { - background: var(--theme_light--scrollbar_hover); +.smooth-scrollbars ::-webkit-scrollbar-thumb:hover { + background: var(--theme--scrollbar_hover); } diff --git a/mods/core/css/titlebar.css b/mods/core/css/titlebar.css index 23a332a..8f49bba 100644 --- a/mods/core/css/titlebar.css +++ b/mods/core/css/titlebar.css @@ -8,22 +8,19 @@ @import 'buttons.css'; .frameless .notion-topbar { - height: calc(var(--configured-dragarea_height, 10px) + 45px) !important; + height: calc(var(--configured--dragarea_height, 10px) + 45px) !important; } .frameless .window-dragarea { - height: var(--configured-dragarea_height, 10px); + height: var(--configured--dragarea_height, 10px); width: 100%; } -.frameless .notion-dark-theme .window-dragarea { - background: var(--theme_dark--dragarea); -} -.frameless .notion-light-theme .window-dragarea { - background: var(--theme_light--dragarea); +.frameless .window-dragarea { + background: var(--theme--dragarea); } @media (max-width: 760px) { .frameless .notion-topbar { - height: calc(var(--configured-dragarea_height, 10px) + 80px) !important; + height: calc(var(--configured--dragarea_height, 10px) + 80px) !important; } .frameless .notion-topbar > :nth-child(2) { height: 80px !important; diff --git a/mods/core/menu.html b/mods/core/menu.html index af01707..83e6d60 100644 --- a/mods/core/menu.html +++ b/mods/core/menu.html @@ -4,8 +4,9 @@ notion-enhancer menu + + - @@ -22,6 +23,10 @@
+ diff --git a/mods/core/menu.js b/mods/core/menu.js index 389d513..542fc11 100644 --- a/mods/core/menu.js +++ b/mods/core/menu.js @@ -130,6 +130,37 @@ window['__start'] = async () => { ).append(); } + // further-configuration popup + const $popup = document.querySelector('#popup'); + document.addEventListener('keyup', (event) => { + if ( + $popup.classList.contains('visible') && + [13, 27].includes(event.keyCode) + ) + $popup.classList.remove('visible'); + }); + let colorpicker_target = null; + const $colorpicker = colorjoe + .rgb('colorpicker') + .on('change', function (color) { + if (!colorpicker_target) return; + colorpicker_target.elem.style.setProperty( + '--configured--color-value', + color.css() + ); + store(colorpicker_target.id)[colorpicker_target.key] = color.css(); + }) + .update(); + + document + .querySelector('#colorpicker') + .appendChild(createElement('')); + document.querySelectorAll('#popup .close-modal').forEach((el) => + el.addEventListener('click', (event) => { + $popup.classList.remove('visible'); + }) + ); + // search const search_query = { enabled: true, @@ -244,6 +275,94 @@ window['__start'] = async () => { modified_notice.append(); } + const file_icon = await fs.readFile( + path.resolve(`${__dirname}/icons/file.svg`) + ); + function createOption(opt, id) { + let $opt; + switch (opt.type) { + case 'toggle': + $opt = ` + + + `; + break; + case 'select': + $opt = ` + + + `; + break; + case 'input': + $opt = ` + + + `; + break; + case 'color': + $opt = ` + + + `; + break; + case 'file': + $opt = ` + + + `; + } + $opt = createElement(`

${$opt}

`); + if (opt.type === 'color') { + $opt + .querySelector(`#${opt.type}_${id}--${opt.key}`) + .style.setProperty( + '--configured--color-value', + store(id, { [opt.key]: opt.value })[opt.key] + ); + } else if (opt.type === 'file') { + $opt.querySelector('.clear').addEventListener('click', (event) => { + store(id)[opt.key] = ''; + $opt.querySelector('.path').innerText = 'choose a file...'; + }); + } else { + $opt.querySelector(`#${opt.type}_${id}--${opt.key}`).value = store(id, { + [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value, + })[opt.key]; + } + + return $opt; + } + const $modules = document.querySelector('#modules'); for (let mod of modules.loaded.sort((a, b) => a.tags.includes('core') || @@ -302,114 +421,40 @@ window['__start'] = async () => { }); const $options = mod.elem.querySelector('.options'); - let file_icon; if ($options) for (const opt of mod.options) { - let $opt; - switch (opt.type) { - case 'toggle': - $opt = createElement(` -

- - -

- `); - break; - case 'select': - $opt = createElement(` -

- - -

- `); - break; - case 'input': - $opt = createElement(` -

- - -

- `); - break; - case 'file': - if (!file_icon) - file_icon = await fs.readFile( - path.resolve(`${__dirname}/icons/file.svg`) - ); - $opt = createElement(` -

- - -

- `); - $opt.querySelector('.clear').addEventListener('click', (event) => { - store(mod.id)[opt.key] = ''; - $opt.querySelector('.path').innerText = store(mod.id)[opt.key] - ? store(mod.id)[opt.key].split(path.sep).reverse()[0] - : 'choose a file...'; - }); - break; - } - - if (opt.type !== 'file') { - $opt.querySelector( - `#${opt.type}_${mod.id}--${opt.key}` - ).value = store(mod.id, { - [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value, - })[opt.key]; - } - $opt - .querySelector(`#${opt.type}_${mod.id}--${opt.key}`) - .addEventListener('change', (event) => { - if (opt.type === 'toggle') { - store(mod.id)[opt.key] = event.target.checked; - } else if (opt.type === 'file') { - if (event.target.files.length) - store(mod.id)[opt.key] = event.target.files[0].path; - $opt.querySelector('.path').innerText = store(mod.id)[opt.key] - ? store(mod.id)[opt.key].split(path.sep).reverse()[0] - : 'choose a file...'; - } else - store(mod.id)[opt.key] = - typeof opt.value === 'number' - ? Number(event.target.value) - : event.target.value; - modified(); + const $opt = createOption(opt, mod.id); + if (opt.type === 'color') { + const $preview = $opt.querySelector('input'); + $opt.addEventListener('click', (event) => { + colorpicker_target = { + id: mod.id, + key: opt.key, + elem: $preview, + }; + $colorpicker.set(store(mod.id)[opt.key]); + $popup.classList.add('visible'); }); + } else { + $opt + .querySelector(`#${opt.type}_${mod.id}--${opt.key}`) + .addEventListener('change', (event) => { + if (opt.type === 'toggle') { + store(mod.id)[opt.key] = event.target.checked; + } else if (opt.type === 'file') { + if (event.target.files.length) + store(mod.id)[opt.key] = event.target.files[0].path; + $opt.querySelector('.path').innerText = store(mod.id)[opt.key] + ? store(mod.id)[opt.key].split(path.sep).reverse()[0] + : 'choose a file...'; + } else + store(mod.id)[opt.key] = + typeof opt.value === 'number' + ? Number(event.target.value) + : event.target.value; + modified(); + }); + } $options.appendChild($opt); } $modules.append(mod.elem); diff --git a/mods/dark+/mod.js b/mods/dark+/mod.js index 3448f2b..56d4d99 100644 --- a/mods/dark+/mod.js +++ b/mods/dark+/mod.js @@ -13,4 +13,40 @@ module.exports = { desc: 'a vivid-colour near-black theme.', version: '0.1.0', author: 'dragonwocky', + options: [ + { + key: 'primary', + label: 'primary colour', + type: 'color', + value: 'rgb(177, 24, 24)', + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + const color = require('./one-color.js')(store().primary); + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + document.documentElement.style.setProperty( + '--theme_dark--selected', + color.lightness(0.35).alpha(0.2).cssa() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary', + color.hex() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary_hover', + color.lightness(0.5).hex() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary_click', + color.lightness(0.6).hex() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary_indicator', + color.lightness(0.4).hex() + ); + }); + }, + }, }; diff --git a/mods/dark+/one-color.js b/mods/dark+/one-color.js new file mode 100644 index 0000000..b602090 --- /dev/null +++ b/mods/dark+/one-color.js @@ -0,0 +1,2 @@ +!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):((t=t||self).one=t.one||{},t.one.color=r())}(this,(function(){"use strict";var t=[],r=function(t){return void 0===t},e=/\s*(\.\d+|\d+(?:\.\d+)?)(%)?\s*/,n=/\s*(\.\d+|100|\d?\d(?:\.\d+)?)%\s*/,a=new RegExp("^(rgb|hsl|hsv)a?\\("+e.source+","+e.source+","+e.source+"(?:,"+/\s*(\.\d+|\d+(?:\.\d+)?)\s*/.source+")?\\)$","i");function o(t){if(Array.isArray(t)){if("string"==typeof t[0]&&"function"==typeof o[t[0]])return new o[t[0]](t.slice(1,t.length));if(4===t.length)return new o.RGB(t[0]/255,t[1]/255,t[2]/255,t[3]/255)}else if("string"==typeof t){var e=t.toLowerCase();o.namedColors[e]&&(t="#"+o.namedColors[e]),"transparent"===e&&(t="rgba(0,0,0,0)");var s=t.match(a);if(s){var i=s[1].toUpperCase(),u=r(s[8])?s[8]:parseFloat(s[8]),h="H"===i[0],c=s[3]?100:h?360:255,f=s[5]||h?100:255,l=s[7]||h?100:255;if(r(o[i]))throw new Error("color."+i+" is not installed.");return new o[i](parseFloat(s[2])/c,parseFloat(s[4])/f,parseFloat(s[6])/l,u)}t.length<6&&(t=t.replace(/^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i,"$1$1$2$2$3$3"));var p=t.match(/^#?([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])$/i);if(p)return new o.RGB(parseInt(p[1],16)/255,parseInt(p[2],16)/255,parseInt(p[3],16)/255);if(o.CMYK){var d=t.match(new RegExp("^cmyk\\("+n.source+","+n.source+","+n.source+","+n.source+"\\)$","i"));if(d)return new o.CMYK(parseFloat(d[1])/100,parseFloat(d[2])/100,parseFloat(d[3])/100,parseFloat(d[4])/100)}}else if("object"==typeof t&&t.isColor)return t;return!1}o.namedColors={},o.installColorSpace=function(e,n,a){o[e]=function(t){var r=Array.isArray(t)?t:arguments;n.forEach((function(t,a){var o=r[a];if("alpha"===t)this._alpha=isNaN(o)||o>1?1:o<0?0:o;else{if(isNaN(o))throw new Error("["+e+"]: Invalid color: ("+n.join(",")+")");"hue"===t?this._hue=o<0?o-Math.floor(o):o%1:this["_"+t]=o<0?0:o>1?1:o}}),this)},o[e].propertyNames=n;var s=o[e].prototype;for(var i in["valueOf","hex","hexa","css","cssa"].forEach((function(t){s[t]=s[t]||("RGB"===e?s.hex:function(){return this.rgb()[t]()})})),s.isColor=!0,s.equals=function(t,a){r(a)&&(a=1e-10),t=t[e.toLowerCase()]();for(var o=0;oa)return!1;return!0},s.toJSON=function(){return[e].concat(n.map((function(t){return this["_"+t]}),this))},a)if(Object.prototype.hasOwnProperty.call(a,i)){var u=i.match(/^from(.*)$/);u?o[u[1].toUpperCase()].prototype[e.toLowerCase()]=a[i]:s[i]=a[i]}function h(t,r){var e={};for(var n in e[r.toLowerCase()]=function(){return this.rgb()[r.toLowerCase()]()},o[r].propertyNames.forEach((function(t){var n="black"===t?"k":t.charAt(0);e[t]=e[n]=function(e,n){return this[r.toLowerCase()]()[t](e,n)}})),e)Object.prototype.hasOwnProperty.call(e,n)&&void 0===o[t].prototype[n]&&(o[t].prototype[n]=e[n])}return s[e.toLowerCase()]=function(){return this},s.toString=function(){return"["+e+" "+n.map((function(t){return this["_"+t]}),this).join(", ")+"]"},n.forEach((function(t){var r="black"===t?"k":t.charAt(0);s[t]=s[r]=function(r,e){return void 0===r?this["_"+t]:e?new this.constructor(n.map((function(e){return this["_"+e]+(t===e?r:0)}),this)):new this.constructor(n.map((function(e){return t===e?r:this["_"+e]}),this))}})),t.forEach((function(t){h(e,t),h(t,e)})),t.push(e),o},o.pluginList=[],o.use=function(t){return-1===o.pluginList.indexOf(t)&&(this.pluginList.push(t),t(o)),o},o.installMethod=function(r,e){return t.forEach((function(t){o[t].prototype[r]=e})),this},o.installColorSpace("RGB",["red","green","blue","alpha"],{hex:function(){var t=(65536*Math.round(255*this._red)+256*Math.round(255*this._green)+Math.round(255*this._blue)).toString(16);return"#"+"00000".substr(0,6-t.length)+t},hexa:function(){var t=Math.round(255*this._alpha).toString(16);return"#"+"00".substr(0,2-t.length)+t+this.hex().substr(1,6)},css:function(){return"rgb("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+")"},cssa:function(){return"rgba("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+","+this._alpha+")"}});var s=function(t){t.installColorSpace("HSV",["hue","saturation","value","alpha"],{rgb:function(){var r,e,n,a=this._hue,o=this._saturation,s=this._value,i=Math.min(5,Math.floor(6*a)),u=6*a-i,h=s*(1-o),c=s*(1-u*o),f=s*(1-(1-u)*o);switch(i){case 0:r=s,e=f,n=h;break;case 1:r=c,e=s,n=h;break;case 2:r=h,e=s,n=f;break;case 3:r=h,e=c,n=s;break;case 4:r=f,e=h,n=s;break;case 5:r=s,e=h,n=c}return new t.RGB(r,e,n,this._alpha)},hsl:function(){var r,e=(2-this._saturation)*this._value,n=this._saturation*this._value,a=e<=1?e:2-e;return r=a<1e-9?0:n/a,new t.HSL(this._hue,r,e/2,this._alpha)},fromRgb:function(){var r,e=this._red,n=this._green,a=this._blue,o=Math.max(e,n,a),s=o-Math.min(e,n,a),i=0===o?0:s/o,u=o;if(0===s)r=0;else switch(o){case e:r=(n-a)/s/6+(n - ['toggle', 'select', 'input', 'file'].includes(opt.type) + ['toggle', 'select', 'input', 'file', 'color'].includes(opt.type) )) ) throw Error;