Dom.class.js

/*
    Script: DOM.js
    
    Class: DOM
        Allows for the building of a DOM node-tree via an array.  You can
        assign any attribute, events, styles, and even content with this class.
        
    Author:
        Eric Clemmons

    License:
        MIT-style license

    Copyright:
        copyright (c) 2007 Eric Clemmons & WhiteFence
    
    Usage:
        (start example)
            var treeArray = ["div",
                                {
                                    "class": "classnnn",
                                    "id": "myId"
                                },
                                [    "ul",
                                    [    "li",
                                        {
                                            "class": "odd",
                                            "events": {
                                                "click": function() {
                                                    this.remove();
                                                }
                                            }
                                        },
                                        "Click to Remove..."
                                    ],
                                    [    "li",
                                        {
                                            "styles": { "color": "red" },
                                            "fff": "fff",
                                            "class": "even"
                                        },
                                        "DOM Made Easy?"
                                    ],
                                    [    "li",
                                        {
                                            "disabled": "disabled",
                                            "class": "odd"
                                        },
                                        [    "strong",
                                            "Bold Text"
                                        ]
                                    ]
                                ]
                            ];
            
            var nodeTree = new DOM(treeArray);
            
            document.body.appendChild(nodeTree);
            
            //  Outputs...
            
            <div class="classnnn" id="myId">
                <ul>
                    <li class="odd">Click to Remove...</li>
                    <li style="color: red; " fff="fff" class="even">
                        DOM Made Easy?
                    </li>
                    <li class="odd">
                        <strong>Bold Text</strong>
                    </li>
                </ul>
            </div>
            
            // Note: the onClick handler has been assigned via Mootools, so it's not
            // visible in the code.
        (end example)
*/

var DOM = new Class({
    element: null,
    parent: null,
    
    /*
        Function: initialize
            Takes in the DOM tree as an array or as a string, then calls <evaluate>.
        Parameters:
            object    -    Either the array itself, or a string representing the array, which
                        will be eval'd prior to execution.
    */
    initialize: function(object) {
        if($type(object) === "string") object = eval(object);
        return this.evaluate(object);
    },

    /*
        Function: evaluate
            Called by <initialize> that traverses the array-tree by following a simple
            recursive pattern...
            
                *    The first object of an array is always the tag name, which will be
                    created.  The rest of the array either specifies child elements,
                    attributes/styles/events, or the body text.
                *    Strings that aren't the first index of the array (which would be
                    the tag name) are treated as the HTML for the tag.
                *    Objects are interpreted by Mootools' <set> function, which
                    assigns everything except "styles" & "events" as attributes to
                    the element.  "Styles" & "events" are properly handled.
                    
        Parameters:
            object    -    The array object passed in through <initialize>.
        
        Returns:
            Returns the DOM node-tree, which can then be inserted or manipulated.                    
    */
    evaluate: function(object) {
        var parent = new Element(object[0]);
        var current = parent;

        !$defined(this.element) ?
            this.element = this.parent = parent
            :
            this.parent.adopt(parent);

        for(var i = 1; i < object.length; i++) {
            this.parent = current;        
            switch($type(object[i])) {
                case 'string':
                    parent.setHTML(object[i]);
                    break;
                case 'object':
                    parent.set(object[i]);
                    break;
                case 'array':
                    this.evaluate(object[i]);
                    break;
            }
        }
        
        return this.element;
    }
});