prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add full el to render.js

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-07-02 14:27:59 -07:00
parent 7e003b72d1
commit fcdd3d2010
1 changed files with 43 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
docs/render.js
View file

@ -1,12 +1,45 @@
window.el = function (tagName, attrs, ...children) {
let l = document.createElement(tagName);
Object.entries(attrs).forEach(([k,v]) => l[k] = v);
children.forEach((c) => l.appendChild(typeof c == "string" ? document.createTextNode(c) : c));
return l;
}
// window.el = function (tagName, attrs, ...children) {
// let l = document.createElement(tagName);
// Object.entries(attrs).forEach(([k,v]) => l[k] = v);
// children.forEach((c) => l.appendChild(typeof c == "string" ? document.createTextNode(c) : c));
// return l;
// }
const el = (selector, ...args) => {
var attrs = (args[0] && typeof args[0] === 'object' && !Array.isArray(args[0]) && !(args[0] instanceof HTMLElement)) ? args.shift() : {};
function loadScript(src, callback) {
let script = el("script", { src });
let classes = selector.split(".");
if (classes.length > 0) selector = classes.shift();
if (classes.length) attrs.className = classes.join(" ")
let id = selector.split("#");
if (id.length > 0) selector = id.shift();
if (id.length) attrs.id = id[0];
var node = document.createElement(selector.length > 0 ? selector : "div");
for (let prop in attrs) {
if (attrs.hasOwnProperty(prop) && attrs[prop] != undefined) {
if (prop.indexOf("data-") == 0) {
let dataProp = prop.substring(5).replace(/-([a-z])/g, function(g) { return g[1].toUpperCase(); });
node.dataset[dataProp] = attrs[prop];
} else {
node[prop] = attrs[prop];
}
}
}
const append = (child) => {
if (Array.isArray(child)) return child.forEach(append);
if (typeof child == "string") child = document.createTextNode(child);
if (child) node.appendChild(child);
};
args.forEach(append);
return node;
};
window.el = el;
function loadScript(src, callback, type = "module") {
let script = el("script", { src, type });
script.addEventListener('load', function(e) {
console.debug("Loaded script", src);
if (callback) callback(e);
@ -32,11 +65,11 @@ function loadSyle(href, callback) {
function renderScriptContent(data, origin) {
var base = el('base', {href: data});
var base = el('base', {href: data.script});
document.head.appendChild(base);
window.params = data;
window.params.origin = origin;
console.log("Rendering with", data.script, data)
console.log("🖊 Rendering with", {script:data.script, params:data})
loadScript(data.script);
}