BHL Prep Tool

http://topia.wikidot.com/bhl-preparation-tool/code/1
(do not open the tool on mobile)

<head>
  <script src="../css-parser/1"></script>
  <script src="../bhl-preparation-tool/4"></script>
  <link rel="stylesheet" href="../bhl-preparation-tool/5">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <div class="wrap">
    <div id="progress"></div>
    <div id="container">
      <textarea></textarea>
      <table id="editor"><tbody><tbody></table>
    </div>
  </div>
 
  <script>
    (async function() {
      var width = 350;
      var container = document.querySelector('#container');
      var editor = document.querySelector('#editor');
      var result = document.querySelector('textarea');
 
      var display = Display(
        document.querySelector('#progress')
      );
 
      var jobs = [
        ['../bhl-preparation-tool/2', 'json'],//config
        ['/local--files/bhl-preparation-tool/sample.html', 'text'],//sample
        ['/local--files/bhl-preparation-tool/var.json', 'json']//basic bhl var
      ]
      var prog = new Progress(jobs.length);
 
      var [conf, html, _bhl] = await Promise.all(jobs.map(function(v,_,a) {
        prog.start() && display('Now Loading...', 0);
        return task(getAsset(...v), function() {
          var _ = prog.end();
          display((_==1) ? 'Loading Complete.' : 'Now Loading...', _);
        });
      }));
 
      var page = new SamplePage(html);
 
      var origin = {};
      for(var k in _bhl) {
        origin[k] = Object.assign({}, _bhl[k]);
      }
 
      result.onfocus =e=>e.target.select();
 
      function cCell(_v, n) {
        var c = _bhl[n].type['color'];
        var v = _bhl[n].type['var'];
        if(c) {
          _v.style.background = `rgb(${_bhl[n].value})`;
          _v.classList.add('color');
          _v.style.color = (c.r + c.g + c.b) < 376 ? '#fff' : 'unset';
          _v.dataset.type = 'color';
        }
        else if(v && v.length==1 && _bhl[n].value.match(/^var\(.*?\)$/)) {
          var r = _bhl[n];
          while(r.type['var']) {
            r = _bhl[r.type['var'][0]]
          }
          if(r.type['color']) {
            c = r.type['color'];
            _v.style.background = `rgb(${r.value})`;
            _v.classList.add('color');
            (c.r + c.g + c.b) < 376 && (_v.style.color = '#fff');
            _v.dataset.type = 'color';
          }
        }
      }
 
      for(var n in _bhl) {
        var input = editor.insertRow();
        var [_n, _v] = [input.insertCell(), input.insertCell()]
 
        var _name = document.createElement('b');
        var _value = document.createElement('input');
        _name.innerText = `${n}:`;
        _value.type = 'text';
        _value.classList.add('value');
        _value.value = _bhl[n].value;
        _value.dataset.key = n;
 
        _n.appendChild(_name);
        _v.appendChild(_value);
 
        cCell(_value, n);
 
        editor.appendChild(input);
      }
 
      for(var i of document.querySelectorAll('input.value')) {
        i.onblur =e=>{
          var v = e.target.value;
          var n = e.target.dataset.key;
          var c = e.target.dataset.type=='color';
          var reg = {
            c: /^(\d+?), ?(\d+?), ?(\d+?)$/,
            v: /var\((.*?)\)/
          };
          _bhl[n].value = v;
          if(c) {
            if(v.match(reg.c)) {
              var _c = v.match(reg.c);
              _bhl[n].type = {'color': {
                r: Number(_c[1]),
                g: Number(_c[2]),
                b: Number(_c[3]),
              }}
            }
            else if(v.match(reg.v)) {
              var r = v.match(reg.v);
              _bhl[n].type = {'var': [r[1]]};
            }
          }
 
          var _style = '';
          for(var j of document.querySelectorAll('input.value')) {
            cCell(j, j.dataset.key);
            var k = j.dataset.key;
            if(_bhl[k].value !== origin[k].value) {
              _style += `${k}: ${_bhl[k].value};`;
            }
          }
          _style = new _CSS(`:root {${_style}}`).string();
          page.appendStyle(_style);
          result.value = _style;
 
        }
      }
 
      //await page.iframe(container);
      await page.open(`width=${width},top=0,left=${width}`);
      //await page.open();
      //page.appendStyle(baseStyle);
      console.log(page);
 
      window.onbeforeunload = e=>page.close();
      page.window.onbeforeunload = e=>window.close();
    })();
  </script>
</body>

function SamplePage(src) {
    this.src = src;
}
SamplePage.prototype.close = function(opt) {
    if(this.window && this.blob_url) {
        this.window.close();
        this.window = undefined;
        URL.revokeObjectURL(this.blob_url);
    }
}
SamplePage.prototype.open = function(opt) {
    this.close();
    return new Promise(r=>{
        this.blob_url = URL.createObjectURL(new Blob([this.src],{type:'text/html'}));
        this.window = window.open(this.blob_url, null, opt);
        this.window.onerror = e=>(console.log(`Ignoring Exception: <${e}>`), true);
        this.window.onload = e=>{
            this.style = this.window.document.createElement('div');
            this.window.document.head.appendChild(this.style);
            return r(this.window);
        }
    });
}
SamplePage.prototype.iframe = function(elm) {
    if(this.window && this.blob_url) {
        this.window.close();
        this.window = undefined;
        URL.revokeObjectURL(this.blob_url);
    }
    return new Promise(r=>{
        this.blob_url = URL.createObjectURL(new Blob([this.src],{type:'text/html'}));
        this.window = document.createElement('iframe');
        this.window.src = this.blob_url;
        elm.appendChild(this.window);
        this.window.onerror = e=>(console.log(`Ignoring Exception: <${e}>`), true);
        this.window.onload = e=>{
            this.style = document.createElement('div');
            e.target.contentWindow.document.head.appendChild(this.style);
            return r(this.window);
        }
    });
}
SamplePage.prototype.appendStyle = function(style) {
    if(this.style) {
        this.style.innerHTML = '';
        var s = document.createElement('style');
        s.innerHTML = style;
        this.style.appendChild(s);
    }
}
 
function Progress(length) {
    this.length = length;
    this.s = 0;
    this.e = 0;
}
Progress.prototype.start = function() {
    this.s++;
    return this.length == this.s;
}
Progress.prototype.end = function() {
    this.e++;
    return (this.s == this.e) ? 1 : (this.e / this.s);
}
 
function getAsset(path, type) {
    return new Promise(r=>fetch(path).then(v=>v[type]().then(_=>r(_))));
}
 
function task(prom, deco) {
    return new Promise(r=>prom.then(v=>(deco(v), r(v))));
}
 
function Display(elm) {
    var e = elm;
    var h = document.createElement('h2');
    var p = document.createElement('p');
    e.appendChild(h);
    e.appendChild(p);
    return function(text, per) {
        p.innerText = text;
        !isNaN(per) && (h.innerText = `${(per * 100)|0}%`);
        (per==1) && e.classList.add('done');
    }
}
 
/*
(async()=>{
    var html = await getAsset('../bhl-preparation-tool/3', 'text');
    var page = new SamplePage(html);
    await page.open();
    page.appendStyle('a {color: blue}');
 
    console.log(page);
})();
*/

page revision: 88, last edited: 09 Nov 2020 08:11

Edit Rate (0) Tags Discuss History Files Print Site tools + Options

The Topiary

yes the bees >:)