render_stuff.js

(function(glob){
    var persist = {};
    persist.Renderer = (function(base_url){
        var that = this;
        that.templates = {}; // url:<XML Object>
        that.loaded_scripts = []; // [url]
        that.loaded_styles = [];  // [url]
        that.load_script = (function(url){
            // add to the head.
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('script');
            link.rel = 'stylesheet';
            link.type = 'text/javascript';
            link.src = url;
            head.appendChild(link);
        });
        that.load_style = (function(url){
            // add to the head.
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = url;
            link.media = 'all';
            head.appendChild(link);
        });
        that.load_template = (function(url){
            // insert into that.templates
            var req = new XMLHttpRequest();
            req.open("GET",url,false);
            req.send();
            that.templates[url] = req.responseXML;
        });
        that.render_template = (function(template_node,datastack){
            // creates DOM elements based on the template_node.
            // any elements with a 'repeat' recurse this function,
            // and add a level to the datastack (.push(node.repeat)).
            // returns the root node.
            var root = document.createElement(template_node.nodeName);
            var current_data = datastack[datastack.length-1];
            if(current_data instanceof Object || current_data instanceof Array) {
                for(var key in current_data)(function(key){
                    var obj = current_data[key];
                    var t = typeof obj;
                    if(t=='string'||t=='number'||t=='boolean'||obj===null) {
                        root.setAttribute(key,obj);
                    }
                })(key);
            }           console.log(template_node,current_data);
            if(template_node.childNodes.length) {
                // there are children nodes.
                // this is not a leaf node.
                // don't set any text.
                // do, however, set data-attributes.
                for(var i=0;i<template_node.childNodes.length;i++)(function(){
                    // render & append each child node.
                    var child = template_node.childNodes.item(i);
                    var attributes = child.attributes||null;
                    if(attributes!==null&&attributes.getNamedItem("repeat")!==null) {
                        // this one iterates a list.
                        // create a copy of the datastack,
                        // push the key specified by the "repeat" attribute.
                        var ndata = current_data[attributes.getNamedItem("repeat").value];
                        for(var ii=0;ii<ndata.length;ii++)(function(){
                            var new_stack = datastack.slice();
                            new_stack.push(ndata[ii]);
                            root.appendChild(that.render_template(child,new_stack));
                        })();
                    } else if(attributes!==null&&attributes.getNamedItem("data-value")!==null) {
                        var el = document.createElement(child.nodeName);
                        var field = attributes.getNamedItem("data-value").nodeValue;
                        el.setAttribute("data-value",field);
                        var t = typeof current_data;
                        var lbl = null;
                        if(field=='$'&&(t=='string'||t=='number'||t=='boolean')) {
                            lbl = current_data;
                        } else {
                            lbl = current_data[field];
                        }
                        var text = document.createTextNode(lbl);
                        el.appendChild(text);
                        root.appendChild(el);
                    } else if(child.nodeName=='#text') {
                        // text node.
                        // just append it anyways, I guess.
                        var el = document.createTextNode(child.nodeValue);
                        root.appendChild(el);
                    } else {
                        var el = document.createElement(child.nodeName);
                        if(child.childNodes.length) {
                            // there are sub-nodes here.
                            el = that.render_template(child,datastack);
                        }
                        root.appendChild(el);
                    }
                })();
            } else {
                var attributes = template_node.attributes||null;
                if(attributes!==null&&attributes.getNamedItem("data-value")!==null) {
                    var field = attributes.getNamedItem("data-value").nodeValue;
                    root.setAttribute("data-value",field);
                    var t = typeof current_data;
                    var lbl = null;
                    if(field=='$'&&(t=='string'||t=='number'||t=='boolean')) {
                        lbl = current_data;
                    } else {
                        lbl = current_data[field];
                    }
                    var text = document.createTextNode(lbl);
                    root.appendChild(text);
                }
            }
            return root;
        });
        that.render_entity = (function(entity){
            // entity required fields:
            //   - base-template
            //   - [scripts]
            //   - [styles]
            var template_url = entity.base_template;
            var needed_scripts = entity.modules;
            var needed_styles = entity.styles;
            if((that.templates[template_url]||null)===null) {
                that.load_template(template_url);
            }
            for(var i=0;i<needed_scripts.length;i++) {
                if(that.loaded_scripts.indexOf(needed_scripts[i])<0) {
                    that.load_script(needed_scripts[i]);
                }
            }
            for(var i=0;i<needed_styles.length;i++) {
                if(that.loaded_styles.indexOf(needed_styles[i])<0) {
                    that.load_style(needed_styles[i]);
                }
            }
            var template = that.templates[template_url].childNodes.item(0);
            return that.render_template(template,[entity]);
        });
        return that;
    });
    glob.persist = persist;
})(window);