extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/core/src/dom/AbstractElement.traversal.js

@@ -0,0 +1,180 @@
+/**
+ * @class Ext.dom.AbstractElement
+ */
+Ext.dom.AbstractElement.override({
+    /**
+     * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
+     * @param {String} selector The simple selector to test
+     * @param {Number/String/HTMLElement/Ext.Element} [limit]
+     * The max depth to search as a number or an element which causes the upward traversal to stop
+     * and is <b>not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
+     * @param {Boolean} [returnEl=false] True to return a Ext.Element object instead of DOM node
+     * @return {HTMLElement} The matching DOM node (or null if no match was found)
+     */
+    findParent: function(simpleSelector, limit, returnEl) {
+        var target = this.dom,
+            topmost = document.documentElement,
+            depth = 0,
+            stopEl;
+
+        limit = limit || 50;
+        if (isNaN(limit)) {
+            stopEl = Ext.getDom(limit);
+            limit = Number.MAX_VALUE;
+        }
+        while (target && target.nodeType == 1 && depth < limit && target != topmost && target != stopEl) {
+            if (Ext.DomQuery.is(target, simpleSelector)) {
+                return returnEl ? Ext.get(target) : target;
+            }
+            depth++;
+            target = target.parentNode;
+        }
+        return null;
+    },
+
+    /**
+     * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
+     * @param {String} selector The simple selector to test
+     * @param {Number/String/HTMLElement/Ext.Element} [limit]
+     * The max depth to search as a number or an element which causes the upward traversal to stop
+     * and is <b>not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
+     * @param {Boolean} [returnEl=false] True to return a Ext.Element object instead of DOM node
+     * @return {HTMLElement} The matching DOM node (or null if no match was found)
+     */
+    findParentNode: function(simpleSelector, limit, returnEl) {
+        var p = Ext.fly(this.dom.parentNode, '_internal');
+        return p ? p.findParent(simpleSelector, limit, returnEl) : null;
+    },
+
+    /**
+     * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
+     * This is a shortcut for findParentNode() that always returns an Ext.dom.Element.
+     * @param {String} selector The simple selector to test
+     * @param {Number/String/HTMLElement/Ext.Element} [limit]
+     * The max depth to search as a number or an element which causes the upward traversal to stop
+     * and is <b>not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
+     * @return {Ext.Element} The matching DOM node (or null if no match was found)
+     */
+    up: function(simpleSelector, limit) {
+        return this.findParentNode(simpleSelector, limit, true);
+    },
+
+    /**
+     * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
+     * @param {String} selector The CSS selector
+     * @return {Ext.CompositeElement} The composite element
+     */
+    select: function(selector, composite) {
+        return Ext.dom.Element.select(selector, this.dom, composite);
+    },
+
+    /**
+     * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
+     * @param {String} selector The CSS selector
+     * @return {HTMLElement[]} An array of the matched nodes
+     */
+    query: function(selector) {
+        return Ext.DomQuery.select(selector, this.dom);
+    },
+
+    /**
+     * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
+     * @param {String} selector The CSS selector
+     * @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element
+     * @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if returnDom = true)
+     */
+    down: function(selector, returnDom) {
+        var n = Ext.DomQuery.selectNode(selector, this.dom);
+        return returnDom ? n : Ext.get(n);
+    },
+
+    /**
+     * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
+     * @param {String} selector The CSS selector
+     * @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element.
+     * @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if returnDom = true)
+     */
+    child: function(selector, returnDom) {
+        var node,
+            me = this,
+            id;
+
+        // Pull the ID from the DOM (Ext.id also ensures that there *is* an ID).
+        // If this object is a Flyweight, it will not have an ID
+        id = Ext.id(me.dom);
+        // Escape . or :
+        id = id.replace(/[\.:]/g, "\\$0");
+        node = Ext.DomQuery.selectNode('#' + id + " > " + selector, me.dom);
+        return returnDom ? node : Ext.get(node);
+    },
+
+     /**
+     * Gets the parent node for this element, optionally chaining up trying to match a selector
+     * @param {String} [selector] Find a parent node that matches the passed simple selector
+     * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
+     * @return {Ext.dom.Element/HTMLElement} The parent node or null
+     */
+    parent: function(selector, returnDom) {
+        return this.matchNode('parentNode', 'parentNode', selector, returnDom);
+    },
+
+     /**
+     * Gets the next sibling, skipping text nodes
+     * @param {String} [selector] Find the next sibling that matches the passed simple selector
+     * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
+     * @return {Ext.dom.Element/HTMLElement} The next sibling or null
+     */
+    next: function(selector, returnDom) {
+        return this.matchNode('nextSibling', 'nextSibling', selector, returnDom);
+    },
+
+    /**
+     * Gets the previous sibling, skipping text nodes
+     * @param {String} [selector] Find the previous sibling that matches the passed simple selector
+     * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
+     * @return {Ext.dom.Element/HTMLElement} The previous sibling or null
+     */
+    prev: function(selector, returnDom) {
+        return this.matchNode('previousSibling', 'previousSibling', selector, returnDom);
+    },
+
+
+    /**
+     * Gets the first child, skipping text nodes
+     * @param {String} [selector] Find the next sibling that matches the passed simple selector
+     * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
+     * @return {Ext.dom.Element/HTMLElement} The first child or null
+     */
+    first: function(selector, returnDom) {
+        return this.matchNode('nextSibling', 'firstChild', selector, returnDom);
+    },
+
+    /**
+     * Gets the last child, skipping text nodes
+     * @param {String} [selector] Find the previous sibling that matches the passed simple selector
+     * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
+     * @return {Ext.dom.Element/HTMLElement} The last child or null
+     */
+    last: function(selector, returnDom) {
+        return this.matchNode('previousSibling', 'lastChild', selector, returnDom);
+    },
+
+    matchNode: function(dir, start, selector, returnDom) {
+        if (!this.dom) {
+            return null;
+        }
+
+        var n = this.dom[start];
+        while (n) {
+            if (n.nodeType == 1 && (!selector || Ext.DomQuery.is(n, selector))) {
+                return !returnDom ? Ext.get(n) : n;
+            }
+            n = n[dir];
+        }
+        return null;
+    },
+
+    isAncestor: function(element) {
+        return this.self.isAncestor.call(this.self, this.dom, element);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/src/dom/AbstractHelper.js

@@ -0,0 +1,291 @@
+/**
+ * @class Ext.dom.AbstractHelper
+ * @private
+ * Abstract base class for {@link Ext.dom.Helper}.
+ * @private
+ */
+Ext.define('Ext.dom.AbstractHelper', {
+    emptyTags : /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
+    confRe : /tag|children|cn|html|tpl|tplData$/i,
+    endRe : /end/i,
+
+    attribXlat: { cls : 'class', htmlFor : 'for' },
+
+    closeTags: {},
+
+    decamelizeName : (function () {
+        var camelCaseRe = /([a-z])([A-Z])/g,
+            cache = {};
+
+        function decamel (match, p1, p2) {
+            return p1 + '-' + p2.toLowerCase();
+        }
+
+        return function (s) {
+            return cache[s] || (cache[s] = s.replace(camelCaseRe, decamel));
+        };
+    }()),
+
+    generateMarkup: function(spec, buffer) {
+        var me = this,
+            attr, val, tag, i, closeTags;
+
+        if (typeof spec == "string") {
+            buffer.push(spec);
+        } else if (Ext.isArray(spec)) {
+            for (i = 0; i < spec.length; i++) {
+                if (spec[i]) {
+                    me.generateMarkup(spec[i], buffer);
+                }
+            }
+        } else {
+            tag = spec.tag || 'div';
+            buffer.push('<', tag);
+
+            for (attr in spec) {
+                if (spec.hasOwnProperty(attr)) {
+                    val = spec[attr];
+                    if (!me.confRe.test(attr)) {
+                        if (typeof val == "object") {
+                            buffer.push(' ', attr, '="');
+                            me.generateStyles(val, buffer).push('"');
+                        } else {
+                            buffer.push(' ', me.attribXlat[attr] || attr, '="', val, '"');
+                        }
+                    }
+                }
+            }
+
+            // Now either just close the tag or try to add children and close the tag.
+            if (me.emptyTags.test(tag)) {
+                buffer.push('/>');
+            } else {
+                buffer.push('>');
+
+                // Apply the tpl html, and cn specifications
+                if ((val = spec.tpl)) {
+                    val.applyOut(spec.tplData, buffer);
+                }
+                if ((val = spec.html)) {
+                    buffer.push(val);
+                }
+                if ((val = spec.cn || spec.children)) {
+                    me.generateMarkup(val, buffer);
+                }
+
+                // we generate a lot of close tags, so cache them rather than push 3 parts
+                closeTags = me.closeTags;
+                buffer.push(closeTags[tag] || (closeTags[tag] = '</' + tag + '>'));
+            }
+        }
+
+        return buffer;
+    },
+
+    /**
+     * Converts the styles from the given object to text. The styles are CSS style names
+     * with their associated value.
+     * 
+     * The basic form of this method returns a string:
+     * 
+     *      var s = Ext.DomHelper.generateStyles({
+     *          backgroundColor: 'red'
+     *      });
+     *      
+     *      // s = 'background-color:red;'
+     *
+     * Alternatively, this method can append to an output array.
+     * 
+     *      var buf = [];
+     *
+     *      ...
+     *
+     *      Ext.DomHelper.generateStyles({
+     *          backgroundColor: 'red'
+     *      }, buf);
+     *
+     * In this case, the style text is pushed on to the array and the array is returned.
+     * 
+     * @param {Object} styles The object describing the styles.
+     * @param {String[]} [buffer] The output buffer.
+     * @return {String/String[]} If buffer is passed, it is returned. Otherwise the style
+     * string is returned.
+     */
+    generateStyles: function (styles, buffer) {
+        var a = buffer || [],
+            name;
+
+        for (name in styles) {
+            if (styles.hasOwnProperty(name)) {
+                a.push(this.decamelizeName(name), ':', styles[name], ';');
+            }
+        }
+
+        return buffer || a.join('');
+    },
+
+    /**
+     * Returns the markup for the passed Element(s) config.
+     * @param {Object} spec The DOM object spec (and children)
+     * @return {String}
+     */
+    markup: function(spec) {
+        if (typeof spec == "string") {
+            return spec;
+        }
+
+        var buf = this.generateMarkup(spec, []);
+        return buf.join('');
+    },
+
+    /**
+     * Applies a style specification to an element.
+     * @param {String/HTMLElement} el The element to apply styles to
+     * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
+     * a function which returns such a specification.
+     */
+    applyStyles: function(el, styles) {
+        if (styles) {
+            var i = 0,
+                len,
+                style;
+
+            el = Ext.fly(el);
+            if (typeof styles == 'function') {
+                styles = styles.call();
+            }
+            if (typeof styles == 'string'){
+                styles = Ext.util.Format.trim(styles).split(/\s*(?::|;)\s*/);
+                for(len = styles.length; i < len;){
+                    el.setStyle(styles[i++], styles[i++]);
+                }
+            } else if (Ext.isObject(styles)) {
+                el.setStyle(styles);
+            }
+        }
+    },
+
+    /**
+     * Inserts an HTML fragment into the DOM.
+     * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
+     *
+     * For example take the following HTML: `<div>Contents</div>`
+     *
+     * Using different `where` values inserts element to the following places:
+     *
+     * - beforeBegin: `<HERE><div>Contents</div>`
+     * - afterBegin: `<div><HERE>Contents</div>`
+     * - beforeEnd: `<div>Contents<HERE></div>`
+     * - afterEnd: `<div>Contents</div><HERE>`
+     *
+     * @param {HTMLElement/TextNode} el The context element
+     * @param {String} html The HTML fragment
+     * @return {HTMLElement} The new node
+     */
+    insertHtml: function(where, el, html) {
+        var hash = {},
+            hashVal,
+            setStart,
+            range,
+            frag,
+            rangeEl,
+            rs;
+
+        where = where.toLowerCase();
+
+        // add these here because they are used in both branches of the condition.
+        hash['beforebegin'] = ['BeforeBegin', 'previousSibling'];
+        hash['afterend'] = ['AfterEnd', 'nextSibling'];
+
+        range = el.ownerDocument.createRange();
+        setStart = 'setStart' + (this.endRe.test(where) ? 'After' : 'Before');
+        if (hash[where]) {
+            range[setStart](el);
+            frag = range.createContextualFragment(html);
+            el.parentNode.insertBefore(frag, where == 'beforebegin' ? el : el.nextSibling);
+            return el[(where == 'beforebegin' ? 'previous' : 'next') + 'Sibling'];
+        }
+        else {
+            rangeEl = (where == 'afterbegin' ? 'first' : 'last') + 'Child';
+            if (el.firstChild) {
+                range[setStart](el[rangeEl]);
+                frag = range.createContextualFragment(html);
+                if (where == 'afterbegin') {
+                    el.insertBefore(frag, el.firstChild);
+                }
+                else {
+                    el.appendChild(frag);
+                }
+            }
+            else {
+                el.innerHTML = html;
+            }
+            return el[rangeEl];
+        }
+
+        throw 'Illegal insertion point -> "' + where + '"';
+    },
+
+    /**
+     * Creates new DOM element(s) and inserts them before el.
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+     * @param {Boolean} [returnElement] true to return a Ext.Element
+     * @return {HTMLElement/Ext.Element} The new node
+     */
+    insertBefore: function(el, o, returnElement) {
+        return this.doInsert(el, o, returnElement, 'beforebegin');
+    },
+
+    /**
+     * Creates new DOM element(s) and inserts them after el.
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object} o The DOM object spec (and children)
+     * @param {Boolean} [returnElement] true to return a Ext.Element
+     * @return {HTMLElement/Ext.Element} The new node
+     */
+    insertAfter: function(el, o, returnElement) {
+        return this.doInsert(el, o, returnElement, 'afterend', 'nextSibling');
+    },
+
+    /**
+     * Creates new DOM element(s) and inserts them as the first child of el.
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+     * @param {Boolean} [returnElement] true to return a Ext.Element
+     * @return {HTMLElement/Ext.Element} The new node
+     */
+    insertFirst: function(el, o, returnElement) {
+        return this.doInsert(el, o, returnElement, 'afterbegin', 'firstChild');
+    },
+
+    /**
+     * Creates new DOM element(s) and appends them to el.
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+     * @param {Boolean} [returnElement] true to return a Ext.Element
+     * @return {HTMLElement/Ext.Element} The new node
+     */
+    append: function(el, o, returnElement) {
+        return this.doInsert(el, o, returnElement, 'beforeend', '', true);
+    },
+
+    /**
+     * Creates new DOM element(s) and overwrites the contents of el with them.
+     * @param {String/HTMLElement/Ext.Element} el The context element
+     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
+     * @param {Boolean} [returnElement] true to return a Ext.Element
+     * @return {HTMLElement/Ext.Element} The new node
+     */
+    overwrite: function(el, o, returnElement) {
+        el = Ext.getDom(el);
+        el.innerHTML = this.markup(o);
+        return returnElement ? Ext.get(el.firstChild) : el.firstChild;
+    },
+
+    doInsert: function(el, o, returnElement, pos, sibling, append) {
+        var newNode = this.insertHtml(pos, Ext.getDom(el), this.markup(o));
+        return returnElement ? Ext.get(newNode, true) : newNode;
+    }
+
+});