joicomponents
Version:
Design patterns to build native web components
93 lines (87 loc) • 2.71 kB
HTML
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="polyfill-loader-generator.js"></script>
</head>
<body>
<div id="one">
<h2>Make choices:</h2>
<div id="choosePF">
<div>
<div style="width: 200px; float: left; height: 1em;"></div>
<div class="lab">select</div>
<div class="lab">sync</div>
<div class="lab" style="clear: right;">bypass ready</div>
</div>
</div>
<script>
function makeScript() {
let res = "pf=" + tableValues().join("-");
let readyValue = document.querySelector("#flush").value;
let ready = readyValue === "none" ? "" : "&ready="+ readyValue;
res += ready;
document.querySelector("#asurl").value = res;
let script = generatePolyfill(res);
document.querySelector("#code").innerText = script;
}
let sel = document.querySelector("#choosePF");
for (let pfc in names) {
let div = document.createElement("div");
let label = document.createElement("label");
label.innerText = pfc + ": " + names[pfc];
let use = document.createElement("input");
use.type = "checkbox";
let sync = use.cloneNode();
let excludeReady = use.cloneNode();
use.id = pfc;
div.appendChild(label);
div.appendChild(use);
div.appendChild(sync);
div.appendChild(excludeReady);
sel.appendChild(div);
}
function tableValues() {
let res = [];
let pfs = Array.from(document.querySelector("#choosePF").children);
for (let pf of pfs) {
let child = pf.children;
if (!child[1].checked)
continue;
let name = child[1].id;
if (!child[2].checked)
name = name.toLowerCase();
if (child[3].checked)
name = "_" + name;
res.push(name);
}
return res;
}
document.querySelector("#one").addEventListener("input", makeScript);
</script>
<br>
<br>
<label for="flush">polyfill.ready?</label>
<select id="flush">
<option value="none" default>no polyfill.ready</option>
<option value="asap">when all polyfills loaded</option>
<option value="loaded">all polyfills loaded *and* DOMContentLoaded</option>
</select><br>
<br>
<br>
<label>Slug format</label>
<input id="asurl" type="text" value=""/><br>
<h5>Polyfill short codes description:</h5>
<ol>
<li>Dash (XX-YY): separate polyfill code</li>
<li>Lowercase (xx): polyfill loaded ASYNC</li>
<li>Uppercase (XX): polyfill loaded SYNC</li>
<li>Underscore (_XX): does not delay "polyfill.ready()".
This only applies when "polyfill.ready" framework is active.
</li>
</ol>
</div>
<pre id="code">
code
</pre>
</body>
</html>