This project is archived and is in readonly mode.

#241 ✓invalid
Daniel Steigerwald

Mootools dom builder, even simplest.

Reported by Daniel Steigerwald | July 20th, 2008 @ 06:00 PM | in 2.0 (closed)

// element extension (and newElement should has next arg)
setDOM: function(def) {
        var that = this, current = this;
        function addEl(p) {
            that.appendChild(current = (typeof p == 'string' ? that.ownerDocument.newElement(p) : $(p)));
        }
        def.each(function(item) {
            switch ($type(item)) {
                case 'string': case 'element': addEl(item); break;                
                case 'object': current.set(item); break;
                case 'array': current.setDOM(item); break;                
            }            
        });
        return this;
    }
// el.setDOM('div', { opacity: .6}, ['h2', { text:'hi'}]);

Comments and changes to this ticket

  • Daniel Steigerwald

    Daniel Steigerwald July 20th, 2008 @ 06:11 PM

    small typo

    // el.setDOM(['div', { opacity: .6}, ['h2', { text:'hi'}]]);

    It's simple. SetDOM has only one argument - array, because childNodes is array (almost). Similar to Moo newElement manner, string denotes new element, object it's properties, and array it's childs definition.

    I'm not sure if this should be property .set('dom'),but I tends use this array as a third argument.

  • Daniel Steigerwald

    Daniel Steigerwald July 20th, 2008 @ 06:15 PM

    Example:

    var cnt = doc.newElement('div', {
                    style: CSS_RESET + 'position:absolute;overflow:hidden;z-index:990',
                    events: { mousemove: onCntMousemove }
                }, [
                    'div', { rel: 'rounded', style: CSS_RESET },
                        ['div', { rel: 'buttons', style: 'position:absolute'}],
                    'div', { rel: 'content' }
                ]).inject(doc.body);
    
  • Daniel Steigerwald

    Daniel Steigerwald July 20th, 2008 @ 06:59 PM

    • Title changed from “Mootools dom builder, simplest.” to “Mootools dom builder, even simplest.”

    Some enchasing.. I added ability to call lazy dom builder methods.

    setDOM: function(def) {
            var current = this;
            def.each(function(item) {
                var type = $type(item);
                type == 'function' && (item = type()); // for lazyness
                switch (type) {
                    case 'string': current = this.appendChild(this.ownerDocument.newElement(item)); break;
                    case 'element': current = this.appendChild(item); break;
                    case 'object': current.set(item); break;
                    case 'array': current.setDOM(item);
                }
            }, this);
            return this;
        }
    
  • Jan Kassens

    Jan Kassens July 20th, 2008 @ 08:37 PM

    • State changed from “new” to “invalid”

    currently not for the core. make it a plugin!

    (btw. use the Element.Properties hash)

  • Daniel Steigerwald

    Daniel Steigerwald July 21st, 2008 @ 02:31 PM

    Element properties is very nice approach I use all the time for templates, localization, rounded corners etc., but I don't see it's suitable for DOM builder, my reasons:

    1) not only setDOM, but also appendDOM is useful

    2) DOM definition array formatting looks better out of element options. I suppose ideal place as a third argument of newElement (but moo must be hacked a bit)

    3) it's only setter

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Pages