Initial creation of a JS template system.

jst/jst.js

+
+
+function isElement(obj) {
+  try {
+    // Using W3 DOM2 (works for FF, Opera and Chrome)
+    return obj instanceof HTMLElement;
+  } catch(e) {
+    //Browsers not supporting W3 DOM2 don't have HTMLElement and
+    //an exception is thrown and we end up here. Testing some
+    //properties that all elements have (works on IE7)
+    return (typeof obj==="object") &&
+      (obj.nodeType===1) && (typeof obj.style === "object") &&
+      (typeof obj.ownerDocument ==="object");
+  }
+}
+
+function appendCTX(el, ctx){
+  if (isElement(ctx)){
+    el.appendChild(ctx);
+  } else {
+    var t = document.createTextNode(ctx.toString());
+    el.appendChild(t);
+  }
+}
+
+export function el(ename, ctx, cls, attr){
+  var e = document.createElement(ename);
+  if (ctx){
+    if (ctx instanceof Array){
+      ctx.forEach(item => appendCTX(el, item));
+    } else {
+      appendCTX(el, ctx);
+    }
+  }
+
+  if (cls){
+    var cl = cls;
+    if (typeof(cl) === "String")
+      cl = cl.split(" ");
+    if (cl instanceof Array){
+      cl.forEach(c => el.classList.add(c.trim()));
+    }
+  }
+  if (attr){
+    var keys = Object.keys(attr);
+    keys.forEach(function(key){
+      if (attr.hasOwnProperty(key)){
+        var att = document.createAttribute(key.toString());
+        if (typeof(attr[key]) === "String"){
+          att.value = attr[key];
+          el.setAttributeNode(att);
+        }
+      }
+    });
+  }
+}
+
+export const header = el.bind(null, "header");
+export const title = el.bind(null, "title");
+export const script = el.bind(null, "script");
+export const link = el.bind(null, "link");
+export const meta = el.bind(null, "meta");
+export const div = el.bind(null, "div");
+export const span = el.bind(null, "span");
+export const a = el.bind(null, "a");
+export const p = el.bind(null, "p");
+export const b = el.bind(null, "b");
+export const i = el.bind(null, "i");
+export const br = el.bind(null, "br");
+export const ol = el.bind(null, "ol");
+export const ul = el.bind(null, "ul");
+export const li = el.bind(null, "li");
+export const em = el.bind(null, "em");
+export const font = el.bind(null, "font");
+export const h1 = el.bind(null, "h1");
+export const h2 = el.bind(null, "h2");
+export const h3 = el.bind(null, "h3");
+export const h4 = el.bind(null, "h4");
+export const h5 = el.bind(null, "h5");
+export const h6 = el.bind(null, "h6");
+export const hr = el.bind(null, "hr");
+export const blockquote = el.bind(null, "blockquote");
+export const button = el.bind(null, "button");
+export const nav = el.bind(null, "nav");
+export const canvas = el.bind(null, "canvas");
+export const caption = el.bind(null, "caption");
+
+
+
+
+
+
+