~anjan/theme-o-matic

e399a19cf0272f2aade998736b4d23ea471c5972 — Anjandev Momi 4 months ago
initial commit with license agreed via email
5 files changed, 666 insertions(+), 0 deletions(-)

A LICENSE
A Symbols-2048-em-Nerd-Font-Complete.woff2
A color-thief.umd.js
A index.html
A vibrant.min.js
A  => LICENSE +20 -0
@@ 1,20 @@
Copyright (c) 2021 Tetrakist tetrakist@mutandum.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


A  => Symbols-2048-em-Nerd-Font-Complete.woff2 +0 -0
A  => color-thief.umd.js +1 -0
@@ 1,1 @@
!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):t.ColorThief=r()}(this,function(){if(!t)var t={map:function(t,r){var n={};return r?t.map(function(t,o){return n.index=o,r.call(n,t)}):t.slice()},naturalOrder:function(t,r){return t<r?-1:t>r?1:0},sum:function(t,r){var n={};return t.reduce(r?function(t,o,e){return n.index=e,t+r.call(n,o)}:function(t,r){return t+r},0)},max:function(r,n){return Math.max.apply(null,n?t.map(r,n):r)}};var r=function(){var r=5,n=8-r,o=1e3;function e(t,n,o){return(t<<2*r)+(n<<r)+o}function i(t){var r=[],n=!1;function o(){r.sort(t),n=!0}return{push:function(t){r.push(t),n=!1},peek:function(t){return n||o(),void 0===t&&(t=r.length-1),r[t]},pop:function(){return n||o(),r.pop()},size:function(){return r.length},map:function(t){return r.map(t)},debug:function(){return n||o(),r}}}function u(t,r,n,o,e,i,u){this.r1=t,this.r2=r,this.g1=n,this.g2=o,this.b1=e,this.b2=i,this.histo=u}function a(){this.vboxes=new i(function(r,n){return t.naturalOrder(r.vbox.count()*r.vbox.volume(),n.vbox.count()*n.vbox.volume())})}function s(r,n){if(n.count()){var o=n.r2-n.r1+1,i=n.g2-n.g1+1,u=t.max([o,i,n.b2-n.b1+1]);if(1==n.count())return[n.copy()];var a,s,h,c,f=0,v=[],l=[];if(u==o)for(a=n.r1;a<=n.r2;a++){for(c=0,s=n.g1;s<=n.g2;s++)for(h=n.b1;h<=n.b2;h++)c+=r[e(a,s,h)]||0;v[a]=f+=c}else if(u==i)for(a=n.g1;a<=n.g2;a++){for(c=0,s=n.r1;s<=n.r2;s++)for(h=n.b1;h<=n.b2;h++)c+=r[e(s,a,h)]||0;v[a]=f+=c}else for(a=n.b1;a<=n.b2;a++){for(c=0,s=n.r1;s<=n.r2;s++)for(h=n.g1;h<=n.g2;h++)c+=r[e(s,h,a)]||0;v[a]=f+=c}return v.forEach(function(t,r){l[r]=f-t}),function(t){var r,o,e,i,u,s=t+"1",h=t+"2",c=0;for(a=n[s];a<=n[h];a++)if(v[a]>f/2){for(e=n.copy(),i=n.copy(),u=(r=a-n[s])<=(o=n[h]-a)?Math.min(n[h]-1,~~(a+o/2)):Math.max(n[s],~~(a-1-r/2));!v[u];)u++;for(c=l[u];!c&&v[u-1];)c=l[--u];return e[h]=u,i[s]=e[h]+1,[e,i]}}(u==o?"r":u==i?"g":"b")}}return u.prototype={volume:function(t){return this._volume&&!t||(this._volume=(this.r2-this.r1+1)*(this.g2-this.g1+1)*(this.b2-this.b1+1)),this._volume},count:function(t){var r=this.histo;if(!this._count_set||t){var n,o,i,u=0;for(n=this.r1;n<=this.r2;n++)for(o=this.g1;o<=this.g2;o++)for(i=this.b1;i<=this.b2;i++)u+=r[e(n,o,i)]||0;this._count=u,this._count_set=!0}return this._count},copy:function(){return new u(this.r1,this.r2,this.g1,this.g2,this.b1,this.b2,this.histo)},avg:function(t){var n=this.histo;if(!this._avg||t){var o,i,u,a,s=0,h=1<<8-r,c=0,f=0,v=0;for(i=this.r1;i<=this.r2;i++)for(u=this.g1;u<=this.g2;u++)for(a=this.b1;a<=this.b2;a++)s+=o=n[e(i,u,a)]||0,c+=o*(i+.5)*h,f+=o*(u+.5)*h,v+=o*(a+.5)*h;this._avg=s?[~~(c/s),~~(f/s),~~(v/s)]:[~~(h*(this.r1+this.r2+1)/2),~~(h*(this.g1+this.g2+1)/2),~~(h*(this.b1+this.b2+1)/2)]}return this._avg},contains:function(t){var r=t[0]>>n;return gval=t[1]>>n,bval=t[2]>>n,r>=this.r1&&r<=this.r2&&gval>=this.g1&&gval<=this.g2&&bval>=this.b1&&bval<=this.b2}},a.prototype={push:function(t){this.vboxes.push({vbox:t,color:t.avg()})},palette:function(){return this.vboxes.map(function(t){return t.color})},size:function(){return this.vboxes.size()},map:function(t){for(var r=this.vboxes,n=0;n<r.size();n++)if(r.peek(n).vbox.contains(t))return r.peek(n).color;return this.nearest(t)},nearest:function(t){for(var r,n,o,e=this.vboxes,i=0;i<e.size();i++)((n=Math.sqrt(Math.pow(t[0]-e.peek(i).color[0],2)+Math.pow(t[1]-e.peek(i).color[1],2)+Math.pow(t[2]-e.peek(i).color[2],2)))<r||void 0===r)&&(r=n,o=e.peek(i).color);return o},forcebw:function(){var r=this.vboxes;r.sort(function(r,n){return t.naturalOrder(t.sum(r.color),t.sum(n.color))});var n=r[0].color;n[0]<5&&n[1]<5&&n[2]<5&&(r[0].color=[0,0,0]);var o=r.length-1,e=r[o].color;e[0]>251&&e[1]>251&&e[2]>251&&(r[o].color=[255,255,255])}},{quantize:function(h,c){if(!h.length||c<2||c>256)return!1;var f=function(t){var o,i=new Array(1<<3*r);return t.forEach(function(t){o=e(t[0]>>n,t[1]>>n,t[2]>>n),i[o]=(i[o]||0)+1}),i}(h);f.forEach(function(){});var v=function(t,r){var o,e,i,a=1e6,s=0,h=1e6,c=0,f=1e6,v=0;return t.forEach(function(t){(o=t[0]>>n)<a?a=o:o>s&&(s=o),(e=t[1]>>n)<h?h=e:e>c&&(c=e),(i=t[2]>>n)<f?f=i:i>v&&(v=i)}),new u(a,s,h,c,f,v,r)}(h,f),l=new i(function(r,n){return t.naturalOrder(r.count(),n.count())});function g(t,r){for(var n,e=t.size(),i=0;i<o;){if(e>=r)return;if(i++>o)return;if((n=t.pop()).count()){var u=s(f,n),a=u[0],h=u[1];if(!a)return;t.push(a),h&&(t.push(h),e++)}else t.push(n),i++}}l.push(v),g(l,.75*c);for(var p=new i(function(r,n){return t.naturalOrder(r.count()*r.volume(),n.count()*n.volume())});l.size();)p.push(l.pop());g(p,c);for(var d=new a;p.size();)d.push(p.pop());return d}}}().quantize,n=function(t){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.width=this.canvas.width=t.width,this.height=this.canvas.height=t.height,this.context.drawImage(t,0,0,this.width,this.height)};n.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)};var o=function(){};return o.prototype.getColor=function(t,r){return void 0===r&&(r=10),this.getPalette(t,5,r)[0]},o.prototype.getPalette=function(t,o,e){var i=function(t){var r=t.colorCount,n=t.quality;if(void 0!==r&&Number.isInteger(r)){if(1===r)throw new Error("colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()");r=Math.max(r,2),r=Math.min(r,20)}else r=10;return void 0===n||Number.isInteger(n)?n=10:n<1&&(n=10),{colorCount:r,quality:n}}({colorCount:o,quality:e}),u=new n(t),a=function(t,r,n){for(var o=t,e=[],i=0,u=void 0,a=void 0,s=void 0,h=void 0,c=void 0;i<r;i+=n)a=o[0+(u=4*i)],s=o[u+1],h=o[u+2],(void 0===(c=o[u+3])||c>=125)&&(a>250&&s>250&&h>250||e.push([a,s,h]));return e}(u.getImageData().data,u.width*u.height,i.quality),s=r(a,i.colorCount);return s?s.palette():null},o.prototype.getColorFromUrl=function(t,r,n){var o=document.createElement("img"),e=this;o.addEventListener("load",function(){var i=e.getPalette(o,5,n);r(i[0],t)}),o.src=t},o.prototype.getImageData=function(t,r){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="arraybuffer",n.onload=function(){if(200==this.status){var t=new Uint8Array(this.response);o=t.length;for(var n=new Array(o),o=0;o<t.length;o++)n[o]=String.fromCharCode(t[o]);var e=n.join(""),i=window.btoa(e);r("data:image/png;base64,"+i)}},n.send()},o.prototype.getColorAsync=function(t,r,n){var o=this;this.getImageData(t,function(t){var e=document.createElement("img");e.addEventListener("load",function(){var t=o.getPalette(e,5,n);r(t[0],this)}),e.src=t})},o});

A  => index.html +644 -0
@@ 1,644 @@
<html>
	<head>
		<title>SXMO : Theme-o-matic</title>

  <style type="text/css" media="screen">
    @font-face {
      font-family: 'nerdfont';
      src: url('/theme-o-matic/Symbols-2048-em-Nerd-Font-Complete.woff2') format('woff2') ;
      font-weight: 400;
      font-style: normal;
    }

    #output_image {
	   object-fit: cover;
	   object-position: 50% 50%;
    }

    .colorpicktabname:hover {
       border-top-color: #000000;
       border-left-color: #000000;
       border-right-color: #000000;
    }

    .colorpicktabname {
       position:relative; 
       top: 0px; 
       height: 25px;
       float:left;
       background-color: #FFFFFF;
       padding: 3px;
       margin-right: 3px;
       border: 2px;
       font-weight: 700;
       border-top-style: solid;
       border-left-style: solid;
       border-right-style: solid;
       border-top-color: #FFFFFF;
       border-left-color: #FFFFFF;
       border-right-color: #FFFFFF;
    }

    .colorpicktabname-active {
       background-color: #F0F0F0;
    }

    .colorpicktab {
       background-color: #F0F0F0;
       border-color: #000;
       border: 0px;
       border-style: solid;
       position:absolute;
       top: 0px;
       width: 340px;
       border-style: solid;
       display: none;
       padding: 10px;
    }


    .colorpick {
	    width: 60px;
    }

    .colorpickbox:hover{
       background-color: #E0E0E0;
    }

    .lastfocused {
       background-color: #c0c0c0;
    }

    body {
	    font-family: "sans";
    }
    .icon {
	    font-family: "nerdfont";
    }

    .dmenu-foreground{
	    color: #bbbbbb;
    }
    .dmenu-background{
	    background-color: #222222;
    }


    .dmenu-selforeground{
	    color: #eeeeee;
    }
    .dmenu-selbackground{
	    background-color: #005577;
    }

    .dmenu-selhighlightforeground:hover{
	    color: #ffc978;
    }
    .dmenu-selhighlightbackground:hover{
	    background-color: #005577;
    }

    .dmenu-highlightforeground:hover{
	    color: #ffc978;
    }
    .dmenu-highlightbackground:hover{
	    background-color: #222222;
    }

    .dmenu-outforeground{
	    color: #000000;
    }
    .dmenu-outbackground{
	    background-color: #00ffff;
    }

    .dwm-selforeground{
	    color: #eeeeee;
    }
    .dwm-selbackground{
	    background-color: #005577;
    }

    .dwm-foreground{
	    color: #bbbbbb;
    }
    .dwm-background{
	    background-color: #222222;
    }

    .desktop_box{
	    top: 0px;
    }

    .layout_box{
	    top: 0px;
    }


  </style>

		<script src="https://tetrakist.srht.site/theme-o-matic/color-thief.umd.js"></script>
		<script src="https://tetrakist.srht.site/theme-o-matic/vibrant.min.js"></script>

<script type"text/javascript">
    const colorThief = new ColorThief();

function arrToHex(arr) {
    let s = '#';
    for (let i = 0; i < arr.length; i++) {
        s += ((arr[i] / 16) | 0).toString(16);
        s += ((arr[i] % 16) | 0).toString(16);
    }
    return s;
}

let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;

let rgb2lum = function(c) {
	rgbarr = c=>c.match(/\d+/g).map(x=>(+x));
	rgbval = rgbarr(c);
	return(Math.sqrt(Math.pow(rgbval[0],2)*0.299 + Math.pow(rgbval[1],2)*0.587 + Math.pow(rgbval[2],2)*0.114));
};

pickcolor = function(){
	lastfocused.value = rgb2hex(this.style.backgroundColor); 
	lastfocused.rgb = this.style.backgroundColor; 
	lastfocused.dispatchEvent(new Event("change"));
      };

async function makePalette(palette){

    var vib_box = document.getElementById('vib_box');
    while (vib_box.firstChild) { vib_box.removeChild(vib_box.firstChild); }
    vib_palette = await Vibrant.from(img.src).quality(1).clearFilters().getPalette();
    for (colorobj of ["DarkVibrant", "Vibrant", "LightVibrant", "DarkMuted", "Muted", "LightMuted"]){ 
      var colorDiv = document.createElement('div');
      colorDiv.className = 'color';
      colorDiv.style.height = '30';
      colorDiv.style.width = '100';
      colorDiv.style.backgroundColor=vib_palette[colorobj].hex;
      colorDiv.onclick = pickcolor;
      vib_box.appendChild(colorDiv);
    }

    var ct_box = document.getElementById('ct_box');
    while (ct_box.firstChild) { ct_box.removeChild(ct_box.firstChild); }
    for (colorobj of palette){ 
      var colorDiv = document.createElement('div');
      colorDiv.className = 'color';
      colorDiv.style.height = '45';
      colorDiv.style.width = '45';
      colorDiv.style.float = 'left';
      colorDiv.style.align = 'center';
      colorDiv.style.backgroundColor=arrToHex(colorobj);
      colorDiv.onclick = pickcolor;
      ct_box.appendChild(colorDiv);
    }
  }

//  function preview_image() {
//      var output = document.getElementById('output_image');
//      var img_url = document.getElementById('image_url');
//      output.src = img_url.value;
//  }


  function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output_image');
      output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);

  }




</script>

  </head>
  <body>
    <h1>SXMO : Theme-o-matic</h1>
      <hr>
      Download and use on your own machine! No webserver needed! -- <a href="theme-o-matic/theme-o-matic-0.99.tar.gz">theme-o-matic-0.99.tar.gz</a>
      <hr>
    <div style="width:720px">
      <div style="position:absolute; width: 360px;">
            Upload Background Image:
<!--            <input type="text" id="image_url" name="image_url">
<input type="button" value="Load" onclick="preview_image()"> -->
<input type="file" accept="image/*" onchange="preview_image(event)"><br>
		    <input type="radio" id="scale" name="image_settings" checked><label for="scale">Scale</label>
		    <input type="radio" id="stretch" name="image_settings"><label for="stretch">Stretch</label>
		    <input type="radio" id="center" name="image_settings"><label for="center">Center</label>
            <hr>
	    <b>Insta-Palette:</b><br>
	    Click a color to assign to selected resource:<br>
              <!--div id="ct_box"  style="position:relative; left: 0px; width: 225px"> </div-->
              <!--div id="vib_box" style="position:relative; top: -180; left: 230px; width: 90"> </div-->
              <div id="ct_box"  style="position:relative; width: 225px; float:left"> </div>
              <div id="vib_box" style="position:relative; width: 101px; float:left"> </div>
	    <br style="clear: both">
	    Custom color: <input type="color" id="custom_color" style="vertical-align:bottom;"> <br>
	    <span style="font-size:small">(Use eye-dropper tool to get pixel color.)</span>
	    <hr>
	    <div>
		    <input type="checkbox" id="show_menu" checked><label for="show_menu">Show Menu</label>
		    <input type="checkbox" id="show_statusbar" checked><label for="show_statusbar">Show Status Bar</label>
		    <input type="button" id="xr_export" value="Export .Xresources file">
	    <hr>
	    <b>X resource settings:</b><br>
	    Select resource configuration tab:<br>
	    <div class="colorpicktabnames">
		    <div class="colorpicktabname" id="dmenu-tabname" >dmenu</div>
		    <div class="colorpicktabname" id="dwm-tabname"   style="position:relative; top: 0px; height: 25px;">dwm</div>
	    </div>
	    <div class="colorpicktabs" style="clear: both; position:relative;">
	      <div class="colorpicktab" id="dmenu-tab">
		      <input type="button" id="dmenu_reset_colors" value="Reset to defaults"><br><br>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dmenu-foreground" data-attr="color"> 
		      <label class="colorpicktext" for=".dmenu-foreground">dmenu.foreground</label>
		    </div>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dmenu-background" data-attr="background-color">
		      <label class="colorpicktext" for=".dmenu-background">dmenu.background</label>
		    </div>
		      <br>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dmenu-selforeground" data-attr="color">
		      <label class="colorpicktext" for=".dmenu-selforeground">dmenu.selforeground</label><br>
		    </div>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dmenu-selbackground" data-attr="background-color">
		      <label class="colorpicktext" for=".dmenu-selbackground">dmenu.selbackground</label><br>
		    </div>
		    <br>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dmenu-outforeground" data-attr="color">
		      <label class="colorpicktext" for=".dmenu-outforeground">dmenu.outforeground</label><br>
		    </div>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dmenu-outbackground" data-attr="background-color">
		      <label class="colorpicktext" for=".dmenu-outbackground">dmenu.outbackground</label><br>
		    </div>
		      <br>
		    <div class="colorpickbox">
		      <i>
		      <input class="colorpick" id=".dmenu-highlightforeground" data-attr="color">
		      <label class="colorpicktext" for=".dmenu-highlightforeground">dmenu.highlightforeground</label>*<br>
		      </i>
		    </div>
		    <div class="colorpickbox">
		      <i>
		      <input class="colorpick" id=".dmenu-highlightbackground" data-attr="background-color">
		      <label class="colorpicktext" for=".dmenu-highlightbackground">dmenu.highlightbackground</label>*<br>
		      </i>
		    </div>
		      <br>
		    <div class="colorpickbox">
		      <i>
		      <input class="colorpick" id=".dmenu-selhighlightforeground" data-attr="color">
		      <label class="colorpicktext" for=".dmenu-selhighlightforeground">dmenu.selhighlightforeground</label>*<br>
		      </i>
		    </div>
		    <div class="colorpickbox">
		      <i>
		      <input class="colorpick" id=".dmenu-selhighlightbackground" data-attr="background-color">
		      <label class="colorpicktext" for=".dmenu-selhighlightbackground">dmenu.selhighlightbackground</label>*<br>
		      </i>
		    </div>
	      </div> <!-- end colorpicktab -->
	      <div class="colorpicktab" id="dwm-tab">
		      <input type="button" id="dwm_reset_colors" value="Reset to defaults"><br><br>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dwm-foreground" data-attr="color">
		      <label class="colorpicktext" for=".dwm-foreground">dwm.foreground</label><br>
		    </div>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dwm-background" data-attr="background-color">
		      <label class="colorpicktext" for=".dwm-background">dwm.background</label><br>
		    </div>
		      <br>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dwm-selforeground" data-attr="color">
		      <label class="colorpicktext" for=".dwm-selforeground">dwm.selforeground</label><br>
		    </div>
		    <div class="colorpickbox">
		      <input class="colorpick" id=".dwm-selbackground" data-attr="background-color">
		      <label class="colorpicktext" for=".dwm-selbackground">dwm.selbackground</label><br>
		    </div>
	      </div> <!-- end colorpicktab -->
	      <i>*No visual feedback</i>
	    <br style="clear: both">
	    <br>
	    
      </div>
      <div style="position:absolute; left: 360px; top: 0px; width: 360px; height: 720px; background-color: #082430;">
            <div id="mockup_box" style="position: static">
		    <img id="output_image" height=720 width=360><br>

              <div id="menu_container" style="position: static">
                  <div id="border_box" class="dmenu-selforeground dmenu-selbackground" style="position: absolute;"></div>
                  <div id="menu_box"   style="position: absolute;"></div>
                <div id="title_box"  class="dmenu-selforeground dmenu-selbackground" style="position: absolute;"></div>
	        <form>
	          <input id="input_box" value="|" class="dmenu-foreground dmenu-background" style="position: absolute; border: none;">
	        </form>
	      </div>
	      <div id="statusbar_container" style="position: static">
                <div id="statustext_box" class="statustext_box dwm-background dwm-foreground"   style="position: absolute;"></div>
                <div id="desktop1_box" class="desktop_box"  style="position: absolute;">&nbsp;1&nbsp;</div>
                <div id="desktop2_box" class="desktop_box"  style="position: absolute;">&nbsp;2&nbsp;</div>
                <div id="desktop3_box" class="desktop_box"  style="position: absolute;">&nbsp;3&nbsp;</div>
                <div id="desktop4_box" class="desktop_box"  style="position: absolute;">&nbsp;4&nbsp;</div>
                <div id="layout_box"   class="layout_box"   style="position: absolute;">&nbsp;[]=&nbsp;</div>
	      </div>
            </div>
      </div>
    </div>
  </body>

<script type"text/javascript">

   imageheight = 720;
    imagewidth = 360;

// menuheightpct = 60;
  menuwidthpct = 60;

menutext = ["Scripts", "Apps", "Files", "Maps",
	   "Dialer" , "Texts", "Camera", "Networks",
	   "Audio", "Config", "Power", "Close Menu"];
menuicons = ["", "", "", '',
	   "" , "", "", "",
	   "", "", "⏻", ""];


     menuitems = menutext.length;
     menuslots = menuitems + 1;

    titlebox = document.getElementById("title_box")
    titlebox.innerHTML = "Sys&nbsp;";
    titlebox.padding = "2px";


    itemheight = 20; // set this based on font height.
    itemheight = titlebox.offsetHeight; // set this based on font height.
    
    //menuheight = Math.floor(imageheight*menuheightpct/100);
    menuheight = menuslots*itemheight;
     menuwidth = Math.floor(imagewidth*menuwidthpct/100);
       menutop = Math.floor(imageheight/2-menuheight/2);
      menuleft = Math.floor(imagewidth/2-menuwidth/2);
    menuborder =   3; 

     menuboxheight = menuheight+menuborder*2;
      menuboxwidth = menuwidth+menuborder*2;
        menuboxtop = menutop-menuborder;
       menuboxleft = menuleft-menuborder;

       titleboxtop = menutop;
      titleboxleft = menuleft;
    titleboxheight = itemheight;
    
    mockup_box = document.getElementById("mockup_box");

    document.getElementById("menu_box").style.cssText += "top: "+menutop+"; left: "+menuleft+"px; width: "+menuwidth+"px; height: "+menuheight+"px; " ;
    document.getElementById("border_box").style.cssText += "top: "+menuboxtop+"; left: "+menuboxleft+"px; width: "+menuboxwidth+"px; height: "+menuboxheight+"px;" ;
    titlebox.style.cssText += "top: "+titleboxtop+"; left: "+titleboxleft+"px; height: "+titleboxheight+"px;" ;
    inputboxleft = titleboxleft + titlebox.offsetWidth;
    inputboxwidth = menuwidth - titlebox.offsetWidth;
    document.getElementById("input_box").style.cssText += "top: "+titleboxtop+"; left: "+inputboxleft+"px; width: "+inputboxwidth+"px; height: "+titleboxheight+"px;" ;

    menu_container = document.getElementById('menu_container');
    show_menu = document.getElementById('show_menu');
    show_menu.onchange = function(){
      menu_container.style.display = menu_container.style.display == "none" ? "block" : "none";
    }

    statusbar_container = document.getElementById('statusbar_container');
    show_statusbar = document.getElementById('show_statusbar');
    show_statusbar.onchange = function(){
      statusbar_container.style.display = statusbar_container.style.display == "none" ? "block" : "none";
    }

    for(i = 1; i < menuslots; i++){
      menuitem = document.createElement('div');
      menuitem.style.top    = menutop + i*itemheight;
      menuitem.style.height = itemheight;
      menuitem.style.left   = menuleft;
      menuitem.style.width  = menuwidth;
      menuitem.style.position = "absolute";
      menuitem.classList.add('dmenu-foreground');
      menuitem.classList.add('dmenu-background');
//      menuitem.classList.add('dmenu-selforeground');
//      menuitem.classList.add('dmenu-selbackground');
      menuitem.onmouseout = function() { 
	      this.classList.toggle("dmenu-selforeground"); 
	      this.classList.toggle("dmenu-selbackground"); 
      }
      menuitem.onmouseover = function() { 
	      this.classList.toggle("dmenu-selforeground"); 
	      this.classList.toggle("dmenu-selbackground"); 
      }
      menuitem.onclick = function() { 
	      this.classList.toggle("dmenu-outforeground"); 
	      this.classList.toggle("dmenu-outbackground"); 
      }
      menuitem.innerHTML = '&nbsp;<span class="icon">' + menuicons[i-1] + "</span> " + menutext[i-1];
      menu_container.appendChild(menuitem); 
    }

      statusbartop = 0;
     statusbarleft = 0;
    statusbarwidth = imagewidth;
   statusbarheight = titleboxheight;

    document.getElementById("statustext_box").style.cssText += "top: "+statusbartop+"; left: "+statusbarleft+"px; width: "+statusbarwidth+"px; height: "+statusbarheight+"px;" ;

    titlebox = document.getElementById("title_box")
    titlebox.innerHTML = "Sys";
    titlebox.padding = "2px";

    desktop_boxen = document.getElementsByClassName("desktop_box")
    desktop_boxen[0].style.left = 0+"px";
    desktop_boxen[0].classList.add('dwm-selforeground');
    desktop_boxen[0].classList.add('dwm-selbackground');
    for(i=1; i < desktop_boxen.length; i++){
      desktop_boxen[i].style.left = parseInt(desktop_boxen[i-1].style.left) + desktop_boxen[i-1].offsetWidth;
      desktop_boxen[i].classList.add('dwm-foreground');
      desktop_boxen[i].classList.add('dwm-background');
    }

    layout_box = document.getElementById("layout_box")
    layout_box.style.left = parseInt(desktop_boxen[i-1].style.left) + desktop_boxen[i-1].offsetWidth;


    status_text = "W H46 C85% ";

    var currentTime = new Date ( );
    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    var currentSeconds = currentTime.getSeconds ( )
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    var currentTimeString = currentHours + ":" + currentMinutes;
    status_text += currentTimeString;
    statustext_box = document.getElementById("statustext_box");
    statustext_box.innerHTML = status_text;
    statustext_box.style.left = 0;
    statustext_box.style.width = imagewidth;
    statustext_box.style.textAlign = "right";


  rules = document.styleSheets[0].rules;

function getStyleRuleIndexBySelector(selector, prop){
  var result = [], i,
      value = (prop ? selector + "{" + prop + "}" : selector).replace(/\s/g, ''), // remove whitespaces
      s = prop ? "cssText" : "selectorText";

  for( i=0; i < rules.length; i++ )
	if(rules[i][s] !== undefined){
	    if( rules[i][s].replace(/\s/g, '') == value)
	      result.push(i);
	}

  return result;
}


   updateCSS = function(){
	   if(/^#([0-9A-F]{3}){1,2}$/i.test(this.value)){
	     console.log("valid RGB hex.");
	     rule_idx = getStyleRuleIndexBySelector(this.id)
	     rules[rule_idx[0]].style[this.dataset.attr] = this.value;
	   }
	this.style.backgroundColor = this.value; 
	luminosity = rgb2lum(this.rgb);
	this.style.color = luminosity > 186 ? "#000" : "#FFF";
   }

    reset_color = function(obj, color) {
	    obj.value = color;
	    obj.style.backgroundColor = color;
	    obj.rgb = obj.style.backgroundColor; 
    }

    reset_dmenu_colors = function() {
	    reset_color(document.getElementById('.dmenu-foreground'), "#bbbbbb");
	    reset_color(document.getElementById('.dmenu-background'), "#222222");
	    reset_color(document.getElementById('.dmenu-selforeground'), "#eeeeee");
	    reset_color(document.getElementById('.dmenu-selbackground'), "#005577");
	    reset_color(document.getElementById('.dmenu-outforeground'), "#000000");
	    reset_color(document.getElementById('.dmenu-outbackground'), "#00ffff");
	    var colorpicks = document.getElementsByClassName('colorpick');
	    for(i = 0; i < colorpicks.length; i++){
	      colorpicks[i].dispatchEvent(new Event("change"));
            }
    };
    reset_dmenu_colors();
    
   document.getElementById('dmenu_reset_colors').onclick = reset_dmenu_colors;

    var colorpicks = document.getElementsByClassName('colorpick');
    lastfocused = colorpicks[0];
    lastfocused.parentElement.classList.toggle("lastfocused");
    for(i = 0; i < colorpicks.length; i++){
	    colorpicks[i].onfocus = function() { lastfocused.parentElement.classList.toggle("lastfocused"); lastfocused = this; lastfocused.parentElement.classList.toggle("lastfocused"); };
	    colorpicks[i].onchange = updateCSS;
	    colorpicks[i].dispatchEvent(new Event("change"));
    }

    var colorpickboxes = document.getElementsByClassName('colorpickbox');
    for(i = 0; i < colorpickboxes.length; i++){
	colorpickboxes[i].onclick = function() { this.children[0].focus=true; this.children[0].dispatchEvent(new Event("focus")); } ;
    }
 
  function download(filename, text) {
	  var element = document.createElement('a');
	  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
	  element.setAttribute('download', filename);

	  element.style.display = 'none';
	  document.body.appendChild(element);

	  element.click();

	  document.body.removeChild(element);
  }

export_xr_file = function(){
      colorpicks = document.getElementsByClassName('colorpick');
      var output_str = "!------- Custom Theme by Theme-o-matic --------\n"
      for(i = 0; i < colorpicks.length; i++){
        output_str += colorpicks[i].id.replace(".","").replace("-",".") + ": " +  colorpicks[i].value + "\n"
      }
      download("theme-o-matic.xr", output_str);
    }

    xr_export_btn = document.getElementById('xr_export');
    xr_export_btn.onclick = export_xr_file;


    switchTabs = function(){
      tabs = document.getElementsByClassName("colorpicktab")
      tabnames = document.getElementsByClassName("colorpicktabname")
      for(i=0; i < tabs.length; i++){
        if(tabs[i].id == (this.innerHTML + "-tab")){
          tabs[i].style.display = "block";
          tabnames[i].classList.add("colorpicktabname-active"); 
	  lastfocused.parentElement.classList.toggle("lastfocused"); 
          lastfocused = tabs[i].getElementsByClassName('colorpick')[0];
          lastfocused.parentElement.classList.toggle("lastfocused");
        } else{
          tabs[i].style.display = "none";
          tabnames[i].classList.remove("colorpicktabname-active"); 
        }
      }
    }

    tabs = document.getElementsByClassName("colorpicktab")
    tabs[0].style.display = "block";

    tabnames = document.getElementsByClassName("colorpicktabname")
    tabnames[0].classList.toggle("colorpicktabname-active"); 
    for(i=0; i < tabnames.length; i++){
      tabnames[i].onclick = switchTabs;
    }


//allevents = Object.keys(document.__proto__.__proto__).reduce((arr, event)=> {
//  if(event.startsWith('on')) return [...arr, event.substr(2)];
//  return arr;
//}, [])
//allevents.forEach(e => custom_color.addEventListener(e, function(event){console.log(event.type)}))


    custom_color = document.getElementById("custom_color");
    custom_color.onchange = function(){
	lastfocused.value = this.value;
	lastfocused.dispatchEvent(new Event("change"));
      };

    img = document.getElementById('output_image');

    img.addEventListener('load', function() {
      makePalette(colorThief.getPalette(img, 20,5))
    });


    //Backgroun setting buttons
document.getElementById("scale").onclick = function(){ document.getElementById("output_image").style.objectFit = "cover"; };
document.getElementById("stretch").onclick = function(){ document.getElementById("output_image").style.objectFit = "fill"; };
document.getElementById("center").onclick = function(){ document.getElementById("output_image").style.objectFit = "none"; };



</script>


</html>

A  => vibrant.min.js +1 -0
@@ 1,1 @@
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Vibrant=e():t.Vibrant=e()}(window,function(){return n={},o.m=r=[function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.assignDeep=e.mapValues=void 0,e.mapValues=function(t,e){var r,n,o={};for(r in t){t.hasOwnProperty(r)&&(n=t[r],o[r]=e(n))}return o},e.assignDeep=function n(o){for(var t=[],e=1;e<arguments.length;e++)t[e-1]=arguments[e];return t.forEach(function(t){if(t)for(var e in t){var r;t.hasOwnProperty(e)&&(r=t[e],Array.isArray(r)?o[e]=r.slice(0):"object"==typeof r?(o[e]||(o[e]={}),n(o[e],r)):o[e]=r)}}),o}},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var o=r(7),i=n(r(8)),a=r(0),r=(u.use=function(t){this._pipeline=t},u.from=function(t){return new i.default(t)},Object.defineProperty(u.prototype,"result",{get:function(){return this._result},enumerable:!1,configurable:!0}),u.prototype._process=function(t,e){this.opts.quantizer;t.scaleDown(this.opts);e=o.buildProcessOptions(this.opts,e);return u._pipeline.process(t.getImageData(),e)},u.prototype.palette=function(){return this.swatches()},u.prototype.swatches=function(){throw new Error("Method deprecated. Use `Vibrant.result.palettes[name]` instead")},u.prototype.getPalette=function(){var e=this,t=arguments[0],r="string"==typeof t?t:"default",n="string"==typeof t?arguments[1]:t,o=new this.opts.ImageClass;return o.load(this._src).then(function(t){return e._process(t,{generators:[r]})}).then(function(t){return(e._result=t).palettes[r]}).then(function(t){return o.remove(),n&&n(void 0,t),t}).catch(function(t){return o.remove(),n&&n(t),Promise.reject(t)})},u.prototype.getPalettes=function(){var e=this,t=arguments[0],r=arguments[1],n=Array.isArray(t)?t:["*"],o=Array.isArray(t)?r:t,i=new this.opts.ImageClass;return i.load(this._src).then(function(t){return e._process(t,{generators:n})}).then(function(t){return(e._result=t).palettes}).then(function(t){return i.remove(),o&&o(void 0,t),t}).catch(function(t){return i.remove(),o&&o(t),Promise.reject(t)})},u.DefaultOpts={colorCount:64,quality:5,filters:[]},u);function u(t,e){this._src=t,this.opts=a.assignDeep({},u.DefaultOpts,e)}e.default=r},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.applyFilters=e.ImageBase=void 0;var n=(o.prototype.scaleDown=function(t){var e,r=this.getWidth(),n=this.getHeight(),o=1;0<t.maxDimension?(e=Math.max(r,n))>t.maxDimension&&(o=t.maxDimension/e):o=1/t.quality,o<1&&this.resize(r*o,n*o,o)},o);function o(){}e.ImageBase=n,e.applyFilters=function(t,e){if(0<e.length)for(var r,n,o,i,a,u=t.data,s=u.length/4,l=0;l<s;l++){n=u[0+(r=4*l)],o=u[1+r],i=u[2+r],a=u[3+r];for(var c=0;c<e.length;c++)if(!e[c](n,o,i,a)){u[3+r]=0;break}}return t}},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Swatch=void 0;var n=r(4),r=(o.applyFilters=function(t,i){return 0<i.length?t.filter(function(t){for(var e=t.r,r=t.g,n=t.b,o=0;o<i.length;o++)if(!i[o](e,r,n,255))return!1;return!0}):t},o.clone=function(t){return new o(t._rgb,t._population)},Object.defineProperty(o.prototype,"r",{get:function(){return this._rgb[0]},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"g",{get:function(){return this._rgb[1]},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"b",{get:function(){return this._rgb[2]},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"rgb",{get:function(){return this._rgb},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"hsl",{get:function(){var t,e,r;return this._hsl||(t=(r=this._rgb)[0],e=r[1],r=r[2],this._hsl=n.rgbToHsl(t,e,r)),this._hsl},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"hex",{get:function(){var t,e,r;return this._hex||(t=(r=this._rgb)[0],e=r[1],r=r[2],this._hex=n.rgbToHex(t,e,r)),this._hex},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"population",{get:function(){return this._population},enumerable:!1,configurable:!0}),o.prototype.toJSON=function(){return{rgb:this.rgb,population:this.population}},o.prototype.getRgb=function(){return this._rgb},o.prototype.getHsl=function(){return this.hsl},o.prototype.getPopulation=function(){return this._population},o.prototype.getHex=function(){return this.hex},o.prototype.getYiq=function(){var t;return this._yiq||(t=this._rgb,this._yiq=(299*t[0]+587*t[1]+114*t[2])/1e3),this._yiq},Object.defineProperty(o.prototype,"titleTextColor",{get:function(){return this._titleTextColor&&(this._titleTextColor=this.getYiq()<200?"#fff":"#000"),this._titleTextColor},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"bodyTextColor",{get:function(){return this._bodyTextColor&&(this._bodyTextColor=this.getYiq()<150?"#fff":"#000"),this._bodyTextColor},enumerable:!1,configurable:!0}),o.prototype.getTitleTextColor=function(){return this.titleTextColor},o.prototype.getBodyTextColor=function(){return this.bodyTextColor},o);function o(t,e){this._rgb=t,this._population=e}e.Swatch=r},function(t,e,r){"use strict";function n(t){var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);if(!e)throw new RangeError("'"+t+"' is not a valid hex color");return[e[1],e[2],e[3]].map(function(t){return parseInt(t,16)})}function o(t,e,r){return e/=255,r/=255,t=.04045<(t/=255)?Math.pow((t+.005)/1.055,2.4):t/12.92,e=.04045<e?Math.pow((e+.005)/1.055,2.4):e/12.92,r=.04045<r?Math.pow((r+.005)/1.055,2.4):r/12.92,[.4124*(t*=100)+.3576*(e*=100)+.1805*(r*=100),.2126*t+.7152*e+.0722*r,.0193*t+.1192*e+.9505*r]}function i(t,e,r){return e/=100,r/=108.883,t=.008856<(t/=95.047)?Math.pow(t,1/3):7.787*t+16/116,[116*(e=.008856<e?Math.pow(e,1/3):7.787*e+16/116)-16,500*(t-e),200*(e-(r=.008856<r?Math.pow(r,1/3):7.787*r+16/116))]}function a(t,e,r){r=o(t,e,r);return i(r[0],r[1],r[2])}function u(t,e){var r=t[0],n=t[1],o=t[2],i=e[0],a=e[1],u=e[2],s=r-i,t=n-a,e=o-u,o=Math.sqrt(n*n+o*o),r=i-r,u=Math.sqrt(a*a+u*u)-o,e=Math.sqrt(s*s+t*t+e*e),e=Math.sqrt(e)>Math.sqrt(Math.abs(r))+Math.sqrt(Math.abs(u))?Math.sqrt(e*e-r*r-u*u):0;return r/=1,u/=1+.045*o,e/=1+.015*o,Math.sqrt(r*r+u*u+e*e)}function s(t,e){return u(a.apply(void 0,t),a.apply(void 0,e))}Object.defineProperty(e,"__esModule",{value:!0}),e.getColorDiffStatus=e.hexDiff=e.rgbDiff=e.deltaE94=e.rgbToCIELab=e.xyzToCIELab=e.rgbToXyz=e.hslToRgb=e.rgbToHsl=e.rgbToHex=e.hexToRgb=e.DELTAE94_DIFF_STATUS=void 0,e.DELTAE94_DIFF_STATUS={NA:0,PERFECT:1,CLOSE:2,GOOD:10,SIMILAR:50},e.hexToRgb=n,e.rgbToHex=function(t,e,r){return"#"+((1<<24)+(t<<16)+(e<<8)+r).toString(16).slice(1,7)},e.rgbToHsl=function(t,e,r){t/=255,e/=255,r/=255;var n=Math.max(t,e,r),o=Math.min(t,e,r),i=0,a=0,u=(n+o)/2;if(n!==o){var s=n-o,a=.5<u?s/(2-n-o):s/(n+o);switch(n){case t:i=(e-r)/s+(e<r?6:0);break;case e:i=(r-t)/s+2;break;case r:i=(t-e)/s+4}i/=6}return[i,a,u]},e.hslToRgb=function(t,e,r){var n,o,i;function a(t,e,r){return r<0&&(r+=1),1<r&&--r,r<1/6?t+6*(e-t)*r:r<.5?e:r<2/3?t+(e-t)*(2/3-r)*6:t}return 0===e?n=o=i=r:(n=a(e=2*r-(r=r<.5?r*(1+e):r+e-r*e),r,t+1/3),o=a(e,r,t),i=a(e,r,t-1/3)),[255*n,255*o,255*i]},e.rgbToXyz=o,e.xyzToCIELab=i,e.rgbToCIELab=a,e.deltaE94=u,e.rgbDiff=s,e.hexDiff=function(t,e){return s(n(t),n(e))},e.getColorDiffStatus=function(t){return t<e.DELTAE94_DIFF_STATUS.NA?"N/A":t<=e.DELTAE94_DIFF_STATUS.PERFECT?"Perfect":t<=e.DELTAE94_DIFF_STATUS.CLOSE?"Close":t<=e.DELTAE94_DIFF_STATUS.GOOD?"Good":t<e.DELTAE94_DIFF_STATUS.SIMILAR?"Similar":"Wrong"}},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}},o=n(r(6)),r=n(r(9));o.default.DefaultOpts.ImageClass=r.default,t.exports=o.default},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});r=n(r(1));r.default.DefaultOpts.quantizer="mmcq",r.default.DefaultOpts.generators=["default"],r.default.DefaultOpts.filters=["default"],e.default=r.default},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.buildProcessOptions=void 0;var i=r(0);e.buildProcessOptions=function(t,e){var r=t.colorCount,n=t.quantizer,o=t.generators,t=t.filters,r={colorCount:r};return(n="string"==typeof n?{name:n,options:{}}:n).options=i.assignDeep({},r,n.options),i.assignDeep({},{quantizer:n,generators:o,filters:t},e)}},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var o=n(r(1)),i=r(0),r=(a.prototype.maxColorCount=function(t){return this._opts.colorCount=t,this},a.prototype.maxDimension=function(t){return this._opts.maxDimension=t,this},a.prototype.addFilter=function(t){return this._opts.filters?this._opts.filters.push(t):this._opts.filters=[t],this},a.prototype.removeFilter=function(t){return!this._opts.filters||0<(t=this._opts.filters.indexOf(t))&&this._opts.filters.splice(t),this},a.prototype.clearFilters=function(){return this._opts.filters=[],this},a.prototype.quality=function(t){return this._opts.quality=t,this},a.prototype.useImageClass=function(t){return this._opts.ImageClass=t,this},a.prototype.useGenerator=function(t,e){return this._opts.generators||(this._opts.generators=[]),this._opts.generators.push(e?{name:t,options:e}:t),this},a.prototype.useQuantizer=function(t,e){return this._opts.quantizer=e?{name:t,options:e}:t,this},a.prototype.build=function(){return new o.default(this._src,this._opts)},a.prototype.getPalette=function(t){return this.build().getPalette(t)},a.prototype.getSwatches=function(t){return this.build().getPalette(t)},a);function a(t,e){void 0===e&&(e={}),this._src=t,this._opts=i.assignDeep({},o.default.DefaultOpts,e)}e.default=r},function(t,e,r){"use strict";var n,o=this&&this.__extends||(n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)},function(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)});Object.defineProperty(e,"__esModule",{value:!0});r=r(2);var i,o=(i=r.ImageBase,o(a,i),a.prototype._initCanvas=function(){var t=this.image,e=this._canvas=document.createElement("canvas"),r=e.getContext("2d");if(!r)throw new ReferenceError("Failed to create canvas context");this._context=r,e.className="@vibrant/canvas",e.style.display="none",this._width=e.width=t.width,this._height=e.height=t.height,r.drawImage(t,0,0),document.body.appendChild(e)},a.prototype.load=function(t){var n,o,e,r,i=this;if("string"==typeof t)n=document.createElement("img"),r=o=t,(r=new URL(r,location.href)).protocol===location.protocol&&r.host===location.host&&r.port===location.port||(e=window.location.href,r=o,e=new URL(e),r=new URL(r),e.protocol===r.protocol&&e.hostname===r.hostname&&e.port===r.port)||(n.crossOrigin="anonymous"),n.src=o;else{if(!(t instanceof HTMLImageElement))return Promise.reject(new Error("Cannot load buffer as an image in browser"));o=(n=t).src}return this.image=n,new Promise(function(t,e){function r(){i._initCanvas(),t(i)}n.complete?r():(n.onload=r,n.onerror=function(t){return e(new Error("Fail to load image: "+o))})})},a.prototype.clear=function(){this._context.clearRect(0,0,this._width,this._height)},a.prototype.update=function(t){this._context.putImageData(t,0,0)},a.prototype.getWidth=function(){return this._width},a.prototype.getHeight=function(){return this._height},a.prototype.resize=function(t,e,r){var n=this._canvas,o=this._context,i=this.image;this._width=n.width=t,this._height=n.height=e,o.scale(r,r),o.drawImage(i,0,0)},a.prototype.getPixelCount=function(){return this._width*this._height},a.prototype.getImageData=function(){return this._context.getImageData(0,0,this._width,this._height)},a.prototype.remove=function(){this._canvas&&this._canvas.parentNode&&this._canvas.parentNode.removeChild(this._canvas)},a);function a(){return null!==i&&i.apply(this,arguments)||this}e.default=o},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}},o=r(5),r=n(r(11));o.use(r.default),t.exports=o},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var o=n(r(12)),n=n(r(16)),n=(new(r(17).BasicPipeline)).filter.register("default",function(t,e,r,n){return 125<=n&&!(250<t&&250<e&&250<r)}).quantizer.register("mmcq",o.default).generator.register("default",n.default);e.default=n},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var o=r(3),i=n(r(13)),a=n(r(15));function u(t,e){for(var r=t.size();t.size()<e;){var n=t.pop();if(!(n&&0<n.count()))break;var o=n.split(),n=o[0],o=o[1];if(t.push(n),o&&0<o.count()&&t.push(o),t.size()===r)break;r=t.size()}}e.default=function(t,e){if(0===t.length||e.colorCount<2||256<e.colorCount)throw new Error("Wrong MMCQ parameters");var r=i.default.build(t),t=(r.histogram.colorCount,new a.default(function(t,e){return t.count()-e.count()}));t.push(r),u(t,.75*e.colorCount);r=new a.default(function(t,e){return t.count()*t.volume()-e.count()*e.volume()});return r.contents=t.contents,u(r,e.colorCount-r.size()),function(t){var e=[];for(;t.size();){var r=t.pop(),n=r.avg();n[0],n[1],n[2];e.push(new o.Swatch(n,r.count()))}return e}(r)}},function(t,e,r){"use strict";var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var o=n(r(14)),r=(i.build=function(t){t=new o.default(t,{sigBits:5});return new i(t.rmin,t.rmax,t.gmin,t.gmax,t.bmin,t.bmax,t)},i.prototype.invalidate=function(){this._volume=this._count=-1,this._avg=null},i.prototype.volume=function(){var t,e,r,n,o,i;return this._volume<0&&(t=(i=this.dimension).r1,e=i.r2,r=i.g1,n=i.g2,o=i.b1,i=i.b2,this._volume=(e-t+1)*(n-r+1)*(i-o+1)),this._volume},i.prototype.count=function(){if(this._count<0){for(var t=this.histogram,e=t.hist,r=t.getColorIndex,n=this.dimension,t=n.r1,o=n.r2,i=n.g1,a=n.g2,u=n.b1,s=n.b2,l=0,c=t;c<=o;c++)for(var f=i;f<=a;f++)for(var h=u;h<=s;h++){l+=e[r(c,f,h)]}this._count=l}return this._count},i.prototype.clone=function(){var t=this.histogram,e=this.dimension;return new i(e.r1,e.r2,e.g1,e.g2,e.b1,e.b2,t)},i.prototype.avg=function(){if(!this._avg){for(var t=this.histogram,e=t.hist,r=t.getColorIndex,n=this.dimension,t=n.r1,o=n.r2,i=n.g1,a=n.g2,u=n.b1,s=n.b2,l=0,c=void 0,f=void 0,h=void 0,c=f=h=0,p=t;p<=o;p++)for(var g=i;g<=a;g++)for(var d=u;d<=s;d++){var m=e[r(p,g,d)];l+=m,c+=m*(p+.5)*8,f+=m*(g+.5)*8,h+=m*(d+.5)*8}this._avg=l?[~~(c/l),~~(f/l),~~(h/l)]:[~~(8*(t+o+1)/2),~~(8*(i+a+1)/2),~~(8*(u+s+1)/2)]}return this._avg},i.prototype.contains=function(t){var e=t[0],r=t[1],n=t[2],o=this.dimension,i=o.r1,a=o.r2,u=o.g1,s=o.g2,t=o.b1,o=o.b2;return r>>=3,n>>=3,i<=(e>>=3)&&e<=a&&u<=r&&r<=s&&t<=n&&n<=o},i.prototype.split=function(){var t=this.histogram,e=t.hist,r=t.getColorIndex,n=this.dimension,o=n.r1,i=n.r2,a=n.g1,u=n.g2,s=n.b1,l=n.b2,c=this.count();if(!c)return[];if(1===c)return[this.clone()];var f,h=i-o+1,t=u-a+1,n=l-s+1,c=Math.max(h,t,n),p=null,g=f=0,n=null;if(c===h){n="r",p=new Uint32Array(i+1);for(var d=o;d<=i;d++){g=0;for(var m=a;m<=u;m++)for(var b=s;b<=l;b++){g+=e[r(d,m,b)]}f+=g,p[d]=f}}else if(c===t){n="g",p=new Uint32Array(u+1);for(m=a;m<=u;m++){g=0;for(d=o;d<=i;d++)for(b=s;b<=l;b++){g+=e[r(d,m,b)]}f+=g,p[m]=f}}else{n="b",p=new Uint32Array(l+1);for(b=s;b<=l;b++){g=0;for(d=o;d<=i;d++)for(m=a;m<=u;m++){g+=e[r(d,m,b)]}f+=g,p[b]=f}}for(var _=-1,y=new Uint32Array(p.length),v=0;v<p.length;v++){var w=p[v];_<0&&f/2<w&&(_=v),y[v]=f-w}var M=this;return function(t){for(var e=t+"1",r=t+"2",n=M.dimension[e],o=M.dimension[r],i=M.clone(),a=M.clone(),u=_-n,o=u<=(t=o-_)?(o=Math.min(o-1,~~(_+t/2)),Math.max(0,o)):(o=Math.max(n,~~(_-1-u/2)),Math.min(M.dimension[r],o));!p[o];)o++;for(var s=y[o];!s&&p[o-1];)s=y[--o];return i.dimension[r]=o,a.dimension[e]=o+1,[i,a]}(n)},i);function i(t,e,r,n,o,i,a){this.histogram=a,this._volume=-1,this._count=-1,this.dimension={r1:t,r2:e,g1:r,g2:n,b1:o,b2:i}}e.default=r},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=(Object.defineProperty(o.prototype,"colorCount",{get:function(){return this._colorCount},enumerable:!1,configurable:!0}),o);function o(t,e){this.pixels=t;function r(t,e,r){return(t<<2*n)+(e<<n)+r}var n=(this.opts=e).sigBits;this.getColorIndex=r;for(var o,i,a,u,s,l,c,f=8-n,h=new Uint32Array(1<<3*n),p=o=a=0,g=i=u=Number.MAX_VALUE,d=t.length/4,m=0;m<d;){var b=4*m;m++,s=t[0+b],l=t[1+b],c=t[2+b],0!==t[3+b]&&(h[r(s>>=f,l>>=f,c>>=f)]+=1,p<s&&(p=s),s<g&&(g=s),o<l&&(o=l),l<i&&(i=l),a<c&&(a=c),c<u&&(u=c))}this._colorCount=h.reduce(function(t,e){return 0<e?t+1:t},0),this.hist=h,this.rmax=p,this.rmin=g,this.gmax=o,this.gmin=i,this.bmax=a,this.bmin=u}e.default=n},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=(o.prototype._sort=function(){this._sorted||(this.contents.sort(this._comparator),this._sorted=!0)},o.prototype.push=function(t){this.contents.push(t),this._sorted=!1},o.prototype.peek=function(t){return this._sort(),t="number"==typeof t?t:this.contents.length-1,this.contents[t]},o.prototype.pop=function(){return this._sort(),this.contents.pop()},o.prototype.size=function(){return this.contents.length},o.prototype.map=function(t){return this._sort(),this.contents.map(t)},o);function o(t){this._comparator=t,this.contents=[],this._sorted=!1}e.default=n},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var p=r(3),g=r(4),d={targetDarkLuma:.26,maxDarkLuma:.45,minLightLuma:.55,targetLightLuma:.74,minNormalLuma:.3,targetNormalLuma:.5,maxNormalLuma:.7,targetMutesSaturation:.3,maxMutesSaturation:.4,targetVibrantSaturation:1,minVibrantSaturation:.35,weightSaturation:3,weightLuma:6.5,weightPopulation:.5};function m(t,e,r,n,o,i,a){function u(t,e){return 1-Math.abs(t-e)}return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];for(var r=0,n=0,o=0;o<t.length;o+=2){var i=t[o],a=t[o+1];r+=i*a,n+=a}return r/n}(u(t,e),a.weightSaturation,u(r,n),a.weightLuma,o/i,a.weightPopulation)}function b(i,t,a,u,s,l,c,f,h,p){var g=null,d=0;return t.forEach(function(t){var e,r=t.hsl,n=r[1],o=r[2];f<=n&&n<=h&&s<=o&&o<=l&&(e=t,(r=i).Vibrant!==e&&r.DarkVibrant!==e&&r.LightVibrant!==e&&r.Muted!==e&&r.DarkMuted!==e&&r.LightMuted!==e)&&(o=m(n,c,o,u,t.population,a,p),(null===g||d<o)&&(g=t,d=o))}),g}e.default=function(t,e){e=Object.assign({},d,e);var r,n,o,i,a,u,s,l,c,f,h=(r=0,t.forEach(function(t){r=Math.max(r,t.population)}),r),h=((o={Vibrant:null,DarkVibrant:null,LightVibrant:null,Muted:null,DarkMuted:null,LightMuted:null}).Vibrant=b(o,n=t,t=h,(h=e).targetNormalLuma,h.minNormalLuma,h.maxNormalLuma,h.targetVibrantSaturation,h.minVibrantSaturation,1,h),o.LightVibrant=b(o,n,t,h.targetLightLuma,h.minLightLuma,1,h.targetVibrantSaturation,h.minVibrantSaturation,1,h),o.DarkVibrant=b(o,n,t,h.targetDarkLuma,0,h.maxDarkLuma,h.targetVibrantSaturation,h.minVibrantSaturation,1,h),o.Muted=b(o,n,t,h.targetNormalLuma,h.minNormalLuma,h.maxNormalLuma,h.targetMutesSaturation,0,h.maxMutesSaturation,h),o.LightMuted=b(o,n,t,h.targetLightLuma,h.minLightLuma,1,h.targetMutesSaturation,0,h.maxMutesSaturation,h),o.DarkMuted=b(o,n,t,h.targetDarkLuma,0,h.maxDarkLuma,h.targetMutesSaturation,0,h.maxMutesSaturation,h),o);return o=e,(e=h).Vibrant||e.DarkVibrant||e.LightVibrant||(!e.DarkVibrant&&e.DarkMuted&&(l=(f=e.DarkMuted.hsl)[0],c=f[1],f=f[2],f=o.targetDarkLuma,e.DarkVibrant=new p.Swatch(g.hslToRgb(l,c,f),0)),!e.LightVibrant&&e.LightMuted&&(l=(i=e.LightMuted.hsl)[0],c=i[1],f=i[2],f=o.targetDarkLuma,e.DarkVibrant=new p.Swatch(g.hslToRgb(l,c,f),0))),!e.Vibrant&&e.DarkVibrant?(l=(i=e.DarkVibrant.hsl)[0],c=i[1],f=i[2],f=o.targetNormalLuma,e.Vibrant=new p.Swatch(g.hslToRgb(l,c,f),0)):!e.Vibrant&&e.LightVibrant&&(l=(a=e.LightVibrant.hsl)[0],c=a[1],f=a[2],f=o.targetNormalLuma,e.Vibrant=new p.Swatch(g.hslToRgb(l,c,f),0)),!e.DarkVibrant&&e.Vibrant&&(l=(a=e.Vibrant.hsl)[0],c=a[1],f=a[2],f=o.targetDarkLuma,e.DarkVibrant=new p.Swatch(g.hslToRgb(l,c,f),0)),!e.LightVibrant&&e.Vibrant&&(l=(u=e.Vibrant.hsl)[0],c=u[1],f=u[2],f=o.targetLightLuma,e.LightVibrant=new p.Swatch(g.hslToRgb(l,c,f),0)),!e.Muted&&e.Vibrant&&(l=(u=e.Vibrant.hsl)[0],c=u[1],f=u[2],f=o.targetMutesSaturation,e.Muted=new p.Swatch(g.hslToRgb(l,c,f),0)),!e.DarkMuted&&e.DarkVibrant&&(l=(s=e.DarkVibrant.hsl)[0],c=s[1],f=s[2],f=o.targetMutesSaturation,e.DarkMuted=new p.Swatch(g.hslToRgb(l,c,f),0)),!e.LightMuted&&e.LightVibrant&&(l=(s=e.LightVibrant.hsl)[0],c=s[1],f=s[2],f=o.targetMutesSaturation,e.LightMuted=new p.Swatch(g.hslToRgb(l,c,f),0)),h}},function(t,e,r){"use strict";var o=this&&this.__awaiter||function(t,a,u,s){return new(u=u||Promise)(function(r,e){function n(t){try{i(s.next(t))}catch(t){e(t)}}function o(t){try{i(s.throw(t))}catch(t){e(t)}}function i(t){var e;t.done?r(t.value):((e=t.value)instanceof u?e:new u(function(t){t(e)})).then(n,o)}i((s=s.apply(t,a||[])).next())})},u=this&&this.__generator||function(r,n){var o,i,a,u={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},t={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(t[Symbol.iterator]=function(){return this}),t;function e(e){return function(t){return function(e){if(o)throw new TypeError("Generator is already executing.");for(;u;)try{if(o=1,i&&(a=2&e[0]?i.return:e[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,e[1])).done)return a;switch(i=0,a&&(e=[2&e[0],a.value]),e[0]){case 0:case 1:a=e;break;case 4:return u.label++,{value:e[1],done:!1};case 5:u.label++,i=e[1],e=[0];continue;case 7:e=u.ops.pop(),u.trys.pop();continue;default:if(!(a=0<(a=u.trys).length&&a[a.length-1])&&(6===e[0]||2===e[0])){u=0;continue}if(3===e[0]&&(!a||e[1]>a[0]&&e[1]<a[3])){u.label=e[1];break}if(6===e[0]&&u.label<a[1]){u.label=a[1],a=e;break}if(a&&u.label<a[2]){u.label=a[2],u.ops.push(e);break}a[2]&&u.ops.pop(),u.trys.pop();continue}e=n.call(r,u)}catch(t){e=[6,t],i=0}finally{o=a=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([e,t])}}};Object.defineProperty(e,"__esModule",{value:!0}),e.BasicPipeline=e.Stage=void 0;var n=r(2),i=(a.prototype.names=function(){return Object.keys(this._map)},a.prototype.has=function(t){return!!this._map[t]},a.prototype.get=function(t){return this._map[t]},a.prototype.register=function(t,e){return this._map[t]=e,this.pipeline},a);function a(t){this.pipeline=t,this._map={}}e.Stage=i;s.prototype._buildProcessTasks=function(t){var e=this,r=t.filters,n=t.quantizer,t=t.generators;return 1===t.length&&"*"===t[0]&&(t=this.generator.names()),{filters:r.map(function(t){return o(e.filter,t)}),quantizer:o(this.quantizer,n),generators:t.map(function(t){return o(e.generator,t)})};function o(t,e){var r,n;return"string"==typeof e?r=e:(r=e.name,n=e.options),{name:r,fn:t.get(r),options:n}}},s.prototype.process=function(i,a){return o(this,void 0,void 0,function(){var e,r,n,o;return u(this,function(t){switch(t.label){case 0:return o=this._buildProcessTasks(a),r=o.filters,e=o.quantizer,o=o.generators,[4,this._filterColors(r,i)];case 1:return r=t.sent(),[4,this._generateColors(e,r)];case 2:return n=t.sent(),[4,this._generatePalettes(o,n)];case 3:return o=t.sent(),[2,{colors:n,palettes:o}]}})})},s.prototype._filterColors=function(t,e){return Promise.resolve(n.applyFilters(e,t.map(function(t){return t.fn})))},s.prototype._generateColors=function(t,e){return Promise.resolve(t.fn(e.data,t.options))},s.prototype._generatePalettes=function(n,r){return o(this,void 0,void 0,function(){var e;return u(this,function(t){switch(t.label){case 0:return[4,Promise.all(n.map(function(t){var e=t.fn,t=t.options;return Promise.resolve(e(r,t))}))];case 1:return e=t.sent(),[2,Promise.resolve(e.reduce(function(t,e,r){return t[n[r].name]=e,t},{}))]}})})},r=s;function s(){this.filter=new i(this),this.quantizer=new i(this),this.generator=new i(this)}e.BasicPipeline=r}],o.c=n,o.d=function(t,e,r){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=10);function o(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return r[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}var r,n});
\ No newline at end of file