PageRenderTime 42ms CodeModel.GetById 20ms app.highlight 15ms RepoModel.GetById 0ms app.codeStats 1ms

/ext-4.1.0_b3/docs/source/AbstractHelper.html

https://bitbucket.org/srogerf/javascript
HTML | 311 lines | 280 code | 31 blank | 0 comment | 0 complexity | 0a142987076de70ae205b107029c5fa4 MD5 | raw file
  1<!DOCTYPE html>
  2<html>
  3<head>
  4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5  <title>The source code</title>
  6  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8  <style type="text/css">
  9    .highlight { display: block; background-color: #ddd; }
 10  </style>
 11  <script type="text/javascript">
 12    function highlight() {
 13      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
 14    }
 15  </script>
 16</head>
 17<body onload="prettyPrint(); highlight();">
 18  <pre class="prettyprint lang-js"><span id='Ext-dom-AbstractHelper'>/**
 19</span> * @class Ext.dom.AbstractHelper
 20 * @private
 21 * Abstract base class for {@link Ext.dom.Helper}.
 22 * @private
 23 */
 24Ext.define('Ext.dom.AbstractHelper', {
 25    emptyTags : /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
 26    confRe : /tag|children|cn|html|tpl|tplData$/i,
 27    endRe : /end/i,
 28
 29    attribXlat: { cls : 'class', htmlFor : 'for' },
 30
 31    closeTags: {},
 32
 33    decamelizeName : function () {
 34        var camelCaseRe = /([a-z])([A-Z])/g,
 35            cache = {};
 36
 37        function decamel (match, p1, p2) {
 38            return p1 + '-' + p2.toLowerCase();
 39        }
 40
 41        return function (s) {
 42            return cache[s] || (cache[s] = s.replace(camelCaseRe, decamel));
 43        };
 44    }(),
 45
 46    generateMarkup: function(spec, buffer) {
 47        var me = this,
 48            attr, val, tag, i, closeTags;
 49
 50        if (typeof spec == &quot;string&quot;) {
 51            buffer.push(spec);
 52        } else if (Ext.isArray(spec)) {
 53            for (i = 0; i &lt; spec.length; i++) {
 54                if (spec[i]) {
 55                    me.generateMarkup(spec[i], buffer);
 56                }
 57            }
 58        } else {
 59            tag = spec.tag || 'div';
 60            buffer.push('&lt;', tag);
 61
 62            for (attr in spec) {
 63                if (spec.hasOwnProperty(attr)) {
 64                    val = spec[attr];
 65                    if (!me.confRe.test(attr)) {
 66                        if (typeof val == &quot;object&quot;) {
 67                            buffer.push(' ', attr, '=&quot;');
 68                            me.generateStyles(val, buffer).push('&quot;');
 69                        } else {
 70                            buffer.push(' ', me.attribXlat[attr] || attr, '=&quot;', val, '&quot;');
 71                        }
 72                    }
 73                }
 74            }
 75
 76            // Now either just close the tag or try to add children and close the tag.
 77            if (me.emptyTags.test(tag)) {
 78                buffer.push('/&gt;');
 79            } else {
 80                buffer.push('&gt;');
 81
 82                // Apply the tpl html, and cn specifications
 83                if ((val = spec.tpl)) {
 84                    val.applyOut(spec.tplData, buffer);
 85                }
 86                if ((val = spec.html)) {
 87                    buffer.push(val);
 88                }
 89                if ((val = spec.cn || spec.children)) {
 90                    me.generateMarkup(val, buffer);
 91                }
 92
 93                // we generate a lot of close tags, so cache them rather than push 3 parts
 94                closeTags = me.closeTags;
 95                buffer.push(closeTags[tag] || (closeTags[tag] = '&lt;/' + tag + '&gt;'));
 96            }
 97        }
 98
 99        return buffer;
100    },
101
102<span id='Ext-dom-AbstractHelper-method-generateStyles'>    /**
103</span>     * Converts the styles from the given object to text. The styles are CSS style names
104     * with their associated value.
105     * 
106     * The basic form of this method returns a string:
107     * 
108     *      var s = Ext.DomHelper.generateStyles({
109     *          backgroundColor: 'red'
110     *      });
111     *      
112     *      // s = 'background-color:red;'
113     *
114     * Alternatively, this method can append to an output array.
115     * 
116     *      var buf = [];
117     *
118     *      ...
119     *
120     *      Ext.DomHelper.generateStyles({
121     *          backgroundColor: 'red'
122     *      }, buf);
123     *
124     * In this case, the style text is pushed on to the array and the array is returned.
125     * 
126     * @param {Object} styles The object describing the styles.
127     * @param {String[]} [buffer] The output buffer.
128     * @return {String/String[]} If buffer is passed, it is returned. Otherwise the style
129     * string is returned.
130     */
131    generateStyles: function (styles, buffer) {
132        var a = buffer || [],
133            name;
134
135        for (name in styles) {
136            if (styles.hasOwnProperty(name)) {
137                a.push(this.decamelizeName(name), ':', styles[name], ';');
138            }
139        }
140
141        return buffer || a.join('');
142    },
143
144<span id='Ext-dom-AbstractHelper-method-markup'>    /**
145</span>     * Returns the markup for the passed Element(s) config.
146     * @param {Object} spec The DOM object spec (and children)
147     * @return {String}
148     */
149    markup: function(spec) {
150        if (typeof spec == &quot;string&quot;) {
151            return spec;
152        }
153
154        var buf = this.generateMarkup(spec, []);
155        return buf.join('');
156    },
157
158<span id='Ext-dom-AbstractHelper-method-applyStyles'>    /**
159</span>     * Applies a style specification to an element.
160     * @param {String/HTMLElement} el The element to apply styles to
161     * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
162     * a function which returns such a specification.
163     */
164    applyStyles: function(el, styles) {
165        if (styles) {
166            var i = 0,
167                len,
168                style;
169
170            el = Ext.fly(el);
171            if (typeof styles == 'function') {
172                styles = styles.call();
173            }
174            if (typeof styles == 'string'){
175                styles = Ext.util.Format.trim(styles).split(/\s*(?::|;)\s*/);
176                for(len = styles.length; i &lt; len;){
177                    el.setStyle(styles[i++], styles[i++]);
178                }
179            } else if (Ext.isObject(styles)) {
180                el.setStyle(styles);
181            }
182        }
183    },
184
185<span id='Ext-dom-AbstractHelper-method-insertHtml'>    /**
186</span>     * Inserts an HTML fragment into the DOM.
187     * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
188     *
189     * For example take the following HTML: `&lt;div&gt;Contents&lt;/div&gt;`
190     *
191     * Using different `where` values inserts element to the following places:
192     *
193     * - beforeBegin: `&lt;HERE&gt;&lt;div&gt;Contents&lt;/div&gt;`
194     * - afterBegin: `&lt;div&gt;&lt;HERE&gt;Contents&lt;/div&gt;`
195     * - beforeEnd: `&lt;div&gt;Contents&lt;HERE&gt;&lt;/div&gt;`
196     * - afterEnd: `&lt;div&gt;Contents&lt;/div&gt;&lt;HERE&gt;`
197     *
198     * @param {HTMLElement/TextNode} el The context element
199     * @param {String} html The HTML fragment
200     * @return {HTMLElement} The new node
201     */
202    insertHtml: function(where, el, html) {
203        var hash = {},
204            hashVal,
205            setStart,
206            range,
207            frag,
208            rangeEl,
209            rs;
210
211        where = where.toLowerCase();
212
213        // add these here because they are used in both branches of the condition.
214        hash['beforebegin'] = ['BeforeBegin', 'previousSibling'];
215        hash['afterend'] = ['AfterEnd', 'nextSibling'];
216
217        range = el.ownerDocument.createRange();
218        setStart = 'setStart' + (this.endRe.test(where) ? 'After' : 'Before');
219        if (hash[where]) {
220            range[setStart](el);
221            frag = range.createContextualFragment(html);
222            el.parentNode.insertBefore(frag, where == 'beforebegin' ? el : el.nextSibling);
223            return el[(where == 'beforebegin' ? 'previous' : 'next') + 'Sibling'];
224        }
225        else {
226            rangeEl = (where == 'afterbegin' ? 'first' : 'last') + 'Child';
227            if (el.firstChild) {
228                range[setStart](el[rangeEl]);
229                frag = range.createContextualFragment(html);
230                if (where == 'afterbegin') {
231                    el.insertBefore(frag, el.firstChild);
232                }
233                else {
234                    el.appendChild(frag);
235                }
236            }
237            else {
238                el.innerHTML = html;
239            }
240            return el[rangeEl];
241        }
242
243        throw 'Illegal insertion point -&gt; &quot;' + where + '&quot;';
244    },
245
246<span id='Ext-dom-AbstractHelper-method-insertBefore'>    /**
247</span>     * Creates new DOM element(s) and inserts them before el.
248     * @param {String/HTMLElement/Ext.Element} el The context element
249     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
250     * @param {Boolean} [returnElement] true to return a Ext.Element
251     * @return {HTMLElement/Ext.Element} The new node
252     */
253    insertBefore: function(el, o, returnElement) {
254        return this.doInsert(el, o, returnElement, 'beforebegin');
255    },
256
257<span id='Ext-dom-AbstractHelper-method-insertAfter'>    /**
258</span>     * Creates new DOM element(s) and inserts them after el.
259     * @param {String/HTMLElement/Ext.Element} el The context element
260     * @param {Object} o The DOM object spec (and children)
261     * @param {Boolean} [returnElement] true to return a Ext.Element
262     * @return {HTMLElement/Ext.Element} The new node
263     */
264    insertAfter: function(el, o, returnElement) {
265        return this.doInsert(el, o, returnElement, 'afterend', 'nextSibling');
266    },
267
268<span id='Ext-dom-AbstractHelper-method-insertFirst'>    /**
269</span>     * Creates new DOM element(s) and inserts them as the first child of el.
270     * @param {String/HTMLElement/Ext.Element} el The context element
271     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
272     * @param {Boolean} [returnElement] true to return a Ext.Element
273     * @return {HTMLElement/Ext.Element} The new node
274     */
275    insertFirst: function(el, o, returnElement) {
276        return this.doInsert(el, o, returnElement, 'afterbegin', 'firstChild');
277    },
278
279<span id='Ext-dom-AbstractHelper-method-append'>    /**
280</span>     * Creates new DOM element(s) and appends them to el.
281     * @param {String/HTMLElement/Ext.Element} el The context element
282     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
283     * @param {Boolean} [returnElement] true to return a Ext.Element
284     * @return {HTMLElement/Ext.Element} The new node
285     */
286    append: function(el, o, returnElement) {
287        return this.doInsert(el, o, returnElement, 'beforeend', '', true);
288    },
289
290<span id='Ext-dom-AbstractHelper-method-overwrite'>    /**
291</span>     * Creates new DOM element(s) and overwrites the contents of el with them.
292     * @param {String/HTMLElement/Ext.Element} el The context element
293     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
294     * @param {Boolean} [returnElement] true to return a Ext.Element
295     * @return {HTMLElement/Ext.Element} The new node
296     */
297    overwrite: function(el, o, returnElement) {
298        el = Ext.getDom(el);
299        el.innerHTML = this.markup(o);
300        return returnElement ? Ext.get(el.firstChild) : el.firstChild;
301    },
302
303    doInsert: function(el, o, returnElement, pos, sibling, append) {
304        var newNode = this.insertHtml(pos, Ext.getDom(el), this.markup(o));
305        return returnElement ? Ext.get(newNode, true) : newNode;
306    }
307
308});
309</pre>
310</body>
311</html>