Adding easy-template
* Set up binding, preprocessing (to avoid multiple routing each time) and basic testwq
This commit is contained in:
Piper
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<script src="./template-e6d.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<template id="template-example" is="template-e6d">
|
||||
<div>
|
||||
<h2>Easy template</h2>
|
||||
<p class="class-a class-b $class">Here's some text $textinterp interpolation, and some dynamic "$dynamicInterp".</p>
|
||||
<p>$textinterp</p>
|
||||
<button title="$title" data-e6d-event-click="click buttonclick">A button with tooltip and onclick $textinterpfunc</button>
|
||||
<p>Oh, look: a normal dollar sign: $. And then a dollar sign with no vars (does not resolve, emits error): $dollar</p>
|
||||
</div>
|
||||
</template>
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
<button onclick="doExample()">Bind!</button>
|
||||
</div>
|
||||
<div>
|
||||
<input id="text-interp" placeholder="Text to interpolate" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="template-add">
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.getElementById(`template-example`).addEventListener(`e6d-error`, console.log);
|
||||
const doExample = () => {
|
||||
const bind = document.getElementById(`template-example`).bind({
|
||||
textinterp: `String!`,
|
||||
textinterpfunc: () => {
|
||||
return Math.random().toFixed(5);
|
||||
},
|
||||
class: `test-class`,
|
||||
buttonclick: (eventTrigger) => {
|
||||
alert(`Clicked ${ eventTrigger }`);
|
||||
},
|
||||
title: `A title, injected`,
|
||||
dynamicInterp: document.getElementById(`text-interp`).value,
|
||||
});
|
||||
document.getElementById(`template-add`).appendChild(bind);
|
||||
};
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
@@ -0,0 +1,184 @@
|
||||
class TemplateE6d extends HTMLTemplateElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.preprocessed = false;
|
||||
}
|
||||
|
||||
dispatchError(type, detail) {
|
||||
const evtBroad = new CustomEvent(`e6d-error`, {detail,});
|
||||
const evtSpecific = new CustomEvent(`e6d-error-${ type }`, {detail,});
|
||||
this.dispatchEvent(evtBroad);
|
||||
this.dispatchEvent(evtSpecific);
|
||||
}
|
||||
|
||||
preprocess() {
|
||||
if (this.preprocessed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const preprocessNode = document.importNode(this.content, true);
|
||||
|
||||
const interpRegex = /([^\$]+|\$([a-zA-Z0-9]*))/g;
|
||||
const eventRegex = /([^\s]+) ([a-zA-Z0-9]+)/g;
|
||||
const allRoutes = [];
|
||||
|
||||
const buildTextTemplate = (text) => {
|
||||
let anyInterp = false;
|
||||
const template = [];
|
||||
text.matchAll(interpRegex)
|
||||
.forEach(m => {
|
||||
if (m[2]) {
|
||||
// Interpolation match
|
||||
anyInterp = true;
|
||||
template.push({
|
||||
reference: m[2],
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Text match
|
||||
template.push({
|
||||
text: m[1],
|
||||
});
|
||||
});
|
||||
|
||||
if (anyInterp) {
|
||||
return template;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const dfsExplore = (node, trail) => {
|
||||
const bindAttr = [];
|
||||
const bindEvent = [];
|
||||
let bindContent = false;
|
||||
if (node.getAttributeNames) {
|
||||
for (const attr of node.getAttributeNames()) {
|
||||
if (attr.indexOf(`data-e6d-event-`) >= 0) {
|
||||
const matches = [];
|
||||
node.getAttribute(attr).matchAll(eventRegex).forEach(f => matches.push(f));
|
||||
if (matches.length === 1 && matches[0].length === 3) {
|
||||
bindEvent.push({
|
||||
event: matches[0][1],
|
||||
reference: matches[0][2],
|
||||
});
|
||||
} else {
|
||||
this.dispatchError(`bad-data-e6d-event`, {node: node, message: `${ attr } requires format "<event-listener-trigger> <function-reference>"`});
|
||||
}
|
||||
} else {
|
||||
const textTemplate = buildTextTemplate(node.getAttribute(attr));
|
||||
if (textTemplate) {
|
||||
bindAttr.push({
|
||||
attr: attr,
|
||||
template: textTemplate,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (node.nodeType === 3) {
|
||||
const textTemplate = buildTextTemplate(node.data);
|
||||
if (textTemplate) {
|
||||
bindContent = textTemplate;
|
||||
}
|
||||
}
|
||||
|
||||
if (bindAttr.length !== 0 || bindEvent.length !== 0 || bindContent) {
|
||||
// Add a leaf!
|
||||
allRoutes.push({
|
||||
route: trail,
|
||||
bind: {
|
||||
attr: bindAttr,
|
||||
event: bindEvent,
|
||||
content: bindContent,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Extend trail into children
|
||||
for (let c = 0; c < node.childNodes.length; c++) {
|
||||
const child = node.childNodes[c];
|
||||
const thisTrail = trail.slice();
|
||||
thisTrail.push(c);
|
||||
dfsExplore(node.childNodes[c], thisTrail);
|
||||
}
|
||||
};
|
||||
|
||||
for (let t = 0; t < preprocessNode.childNodes.length; t++) {
|
||||
dfsExplore(preprocessNode.childNodes[t], [t]);
|
||||
}
|
||||
|
||||
this.bindRoute = allRoutes;
|
||||
this.preprocessed = true;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
}
|
||||
|
||||
bind(obj) {
|
||||
this.preprocess();
|
||||
|
||||
const templated = document.importNode(this.content, true);
|
||||
if (!obj) {
|
||||
return templated;
|
||||
}
|
||||
|
||||
const resolve = (root, route) => {
|
||||
let ptr = root;
|
||||
for (const r of route) {
|
||||
ptr = ptr.childNodes[r];
|
||||
}
|
||||
return ptr;
|
||||
};
|
||||
|
||||
const templateString = (textTemplate, obj) => {
|
||||
let result = ``;
|
||||
for (const tt of textTemplate) {
|
||||
if (tt.text) {
|
||||
result += tt.text;
|
||||
} else {
|
||||
const reference = obj[tt.reference];
|
||||
|
||||
let value;
|
||||
if (typeof reference === 'function') {
|
||||
value = reference();
|
||||
} else {
|
||||
value = reference;
|
||||
}
|
||||
|
||||
if (value === null || value === undefined) {
|
||||
this.dispatchError(`empty-reference`, {message: `Attempted to find value for $${ tt.reference } but was <${ value }>`});
|
||||
}
|
||||
|
||||
result += value;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
for (const route of this.bindRoute) {
|
||||
const injectTarget = resolve(templated, route.route);
|
||||
for (const attr of route.bind.attr) {
|
||||
const attrValue = templateString(attr.template, obj);
|
||||
injectTarget.setAttribute(attr.attr, attrValue);
|
||||
}
|
||||
for (const evt of route.bind.event) {
|
||||
const trigger = evt.event;
|
||||
const refFunc = obj[evt.reference];
|
||||
if (typeof refFunc === `function`) {
|
||||
injectTarget.addEventListener(trigger, refFunc);
|
||||
} else {
|
||||
this.dispatchError(`ref-not-function`, {message: `Expected to find function for value $${ route.bind.event.reference } but found <${ refFunc }>`});
|
||||
}
|
||||
}
|
||||
if (injectTarget.nodeType === 3 && route.bind.content) {
|
||||
const dataValue = templateString(route.bind.content, obj);
|
||||
injectTarget.data = dataValue;
|
||||
}
|
||||
}
|
||||
|
||||
return templated;
|
||||
}
|
||||
|
||||
}
|
||||
customElements.define(`template-e6d`, TemplateE6d, { extends: `template` });
|
||||
Reference in New Issue
Block a user