123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-dom-CompositeElementLite'>/**
- </span> * This class encapsulates a *collection* of DOM elements, providing methods to filter members, or to perform collective
- * actions upon the whole set.
- *
- * Although they are not listed, this class supports all of the methods of {@link Ext.dom.Element} and
- * {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.
- *
- * Example:
- *
- * var els = Ext.select("#some-el div.some-class");
- * // or select directly from an existing element
- * var el = Ext.get('some-el');
- * el.select('div.some-class');
- *
- * els.setWidth(100); // all elements become 100 width
- * els.hide(true); // all elements fade out and hide
- * // or
- * els.setWidth(100).hide(true);
- */
- Ext.define('Ext.dom.CompositeElementLite', {
- alternateClassName: 'Ext.CompositeElementLite',
- requires: ['Ext.dom.Element'],
- statics: {
- <span id='Ext-dom-CompositeElementLite-method-importElementMethods'> /**
- </span> * @private
- * Copies all of the functions from Ext.dom.Element's prototype onto CompositeElementLite's prototype.
- * This is called twice - once immediately below, and once again after additional Ext.dom.Element
- * are added in Ext JS
- */
- importElementMethods: function() {
- var name,
- elementPrototype = Ext.dom.Element.prototype,
- prototype = this.prototype;
- for (name in elementPrototype) {
- if (typeof elementPrototype[name] == 'function'){
- (function(key) {
- prototype[key] = prototype[key] || function() {
- return this.invoke(key, arguments);
- };
- }).call(prototype, name);
- }
- }
- }
- },
- constructor: function(elements, root) {
- <span id='Ext-dom-CompositeElementLite-property-elements'> /**
- </span> * @property {HTMLElement[]} elements
- * The Array of DOM elements which this CompositeElement encapsulates.
- *
- * This will not *usually* be accessed in developers' code, but developers wishing to augment the capabilities
- * of the CompositeElementLite class may use it when adding methods to the class.
- *
- * For example to add the `nextAll` method to the class to **add** all following siblings of selected elements,
- * the code would be
- *
- * Ext.override(Ext.dom.CompositeElementLite, {
- * nextAll: function() {
- * var elements = this.elements, i, l = elements.length, n, r = [], ri = -1;
- *
- * // Loop through all elements in this Composite, accumulating
- * // an Array of all siblings.
- * for (i = 0; i < l; i++) {
- * for (n = elements[i].nextSibling; n; n = n.nextSibling) {
- * r[++ri] = n;
- * }
- * }
- *
- * // Add all found siblings to this Composite
- * return this.add(r);
- * }
- * });
- *
- * @readonly
- */
- this.elements = [];
- this.add(elements, root);
- this.el = new Ext.dom.AbstractElement.Fly();
- },
- <span id='Ext-dom-CompositeElementLite-property-isComposite'> /**
- </span> * @property {Boolean} isComposite
- * `true` in this class to identify an object as an instantiated CompositeElement, or subclass thereof.
- */
- isComposite: true,
- // private
- getElement: function(el) {
- // Set the shared flyweight dom property to the current element
- return this.el.attach(el);
- },
- // private
- transformElement: function(el) {
- return Ext.getDom(el);
- },
- <span id='Ext-dom-CompositeElementLite-method-getCount'> /**
- </span> * Returns the number of elements in this Composite.
- * @return {Number}
- */
- getCount: function() {
- return this.elements.length;
- },
- <span id='Ext-dom-CompositeElementLite-method-add'> /**
- </span> * Adds elements to this Composite object.
- * @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an Array of DOM elements to add, or another Composite
- * object who's elements should be added.
- * @return {Ext.dom.CompositeElement} This Composite object.
- */
- add: function(els, root) {
- var elements = this.elements,
- i, ln;
- if (!els) {
- return this;
- }
- if (typeof els == "string") {
- els = Ext.dom.Element.selectorFunction(els, root);
- }
- else if (els.isComposite) {
- els = els.elements;
- }
- else if (!Ext.isIterable(els)) {
- els = [els];
- }
- for (i = 0, ln = els.length; i < ln; ++i) {
- elements.push(this.transformElement(els[i]));
- }
- return this;
- },
- invoke: function(fn, args) {
- var elements = this.elements,
- ln = elements.length,
- element,
- i;
- fn = Ext.dom.Element.prototype[fn];
- for (i = 0; i < ln; i++) {
- element = elements[i];
- if (element) {
- fn.apply(this.getElement(element), args);
- }
- }
- return this;
- },
- <span id='Ext-dom-CompositeElementLite-method-item'> /**
- </span> * Returns a flyweight Element of the dom element object at the specified index
- * @param {Number} index
- * @return {Ext.dom.Element}
- */
- item: function(index) {
- var el = this.elements[index],
- out = null;
- if (el) {
- out = this.getElement(el);
- }
- return out;
- },
- // fixes scope with flyweight
- addListener: function(eventName, handler, scope, opt) {
- var els = this.elements,
- len = els.length,
- i, e;
- for (i = 0; i < len; i++) {
- e = els[i];
- if (e) {
- Ext.EventManager.on(e, eventName, handler, scope || e, opt);
- }
- }
- return this;
- },
- <span id='Ext-dom-CompositeElementLite-method-each'> /**
- </span> * Calls the passed function for each element in this composite.
- * @param {Function} fn The function to call.
- * @param {Ext.dom.Element} fn.el The current Element in the iteration. **This is the flyweight
- * (shared) Ext.dom.Element instance, so if you require a a reference to the dom node, use el.dom.**
- * @param {Ext.dom.CompositeElement} fn.c This Composite object.
- * @param {Number} fn.index The zero-based index in the iteration.
- * @param {Object} [scope] The scope (this reference) in which the function is executed.
- * Defaults to the Element.
- * @return {Ext.dom.CompositeElement} this
- */
- each: function(fn, scope) {
- var me = this,
- els = me.elements,
- len = els.length,
- i, e;
- for (i = 0; i < len; i++) {
- e = els[i];
- if (e) {
- e = this.getElement(e);
- if (fn.call(scope || e, e, me, i) === false) {
- break;
- }
- }
- }
- return me;
- },
- <span id='Ext-dom-CompositeElementLite-method-fill'> /**
- </span> * Clears this Composite and adds the elements passed.
- * @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an array of DOM elements, or another Composite from which
- * to fill this Composite.
- * @return {Ext.dom.CompositeElement} this
- */
- fill: function(els) {
- var me = this;
- me.elements = [];
- me.add(els);
- return me;
- },
- <span id='Ext-dom-CompositeElementLite-method-filter'> /**
- </span> * Filters this composite to only elements that match the passed selector.
- * @param {String/Function} selector A string CSS selector or a comparison function. The comparison function will be
- * called with the following arguments:
- * @param {Ext.dom.Element} selector.el The current DOM element.
- * @param {Number} selector.index The current index within the collection.
- * @return {Ext.dom.CompositeElement} this
- */
- filter: function(selector) {
- var me = this,
- els = me.elements,
- len = els.length,
- out = [],
- i = 0,
- isFunc = typeof selector == 'function',
- add,
- el;
- for (; i < len; i++) {
- el = els[i];
- add = false;
- if (el) {
- el = me.getElement(el);
- if (isFunc) {
- add = selector.call(el, el, me, i) !== false;
- } else {
- add = el.is(selector);
- }
-
- if (add) {
- out.push(me.transformElement(el));
- }
- }
- }
- me.elements = out;
- return me;
- },
- <span id='Ext-dom-CompositeElementLite-method-indexOf'> /**
- </span> * Find the index of the passed element within the composite collection.
- * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.dom.Element, or an HtmlElement
- * to find within the composite collection.
- * @return {Number} The index of the passed Ext.dom.Element in the composite collection, or -1 if not found.
- */
- indexOf: function(el) {
- return Ext.Array.indexOf(this.elements, this.transformElement(el));
- },
- <span id='Ext-dom-CompositeElementLite-method-replaceElement'> /**
- </span> * Replaces the specified element with the passed element.
- * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
- * element in this composite to replace.
- * @param {String/Ext.Element} replacement The id of an element or the Element itself.
- * @param {Boolean} [domReplace] True to remove and replace the element in the document too.
- * @return {Ext.dom.CompositeElement} this
- */
- replaceElement: function(el, replacement, domReplace) {
- var index = !isNaN(el) ? el : this.indexOf(el),
- d;
- if (index > -1) {
- replacement = Ext.getDom(replacement);
- if (domReplace) {
- d = this.elements[index];
- d.parentNode.insertBefore(replacement, d);
- Ext.removeNode(d);
- }
- Ext.Array.splice(this.elements, index, 1, replacement);
- }
- return this;
- },
- <span id='Ext-dom-CompositeElementLite-method-clear'> /**
- </span> * Removes all elements.
- */
- clear: function() {
- this.elements = [];
- },
- addElements: function(els, root) {
- if (!els) {
- return this;
- }
- if (typeof els == "string") {
- els = Ext.dom.Element.selectorFunction(els, root);
- }
- var yels = this.elements,
- eLen = els.length,
- e;
- for (e = 0; e < eLen; e++) {
- yels.push(Ext.get(els[e]));
- }
- return this;
- },
- <span id='Ext-dom-CompositeElementLite-method-first'> /**
- </span> * Returns the first Element
- * @return {Ext.dom.Element}
- */
- first: function() {
- return this.item(0);
- },
- <span id='Ext-dom-CompositeElementLite-method-last'> /**
- </span> * Returns the last Element
- * @return {Ext.dom.Element}
- */
- last: function() {
- return this.item(this.getCount() - 1);
- },
- <span id='Ext-dom-CompositeElementLite-method-contains'> /**
- </span> * Returns true if this composite contains the passed element
- * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.Element, or an HtmlElement to
- * find within the composite collection.
- * @return {Boolean}
- */
- contains: function(el) {
- return this.indexOf(el) != -1;
- },
- <span id='Ext-dom-CompositeElementLite-method-removeElement'> /**
- </span> * Removes the specified element(s).
- * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
- * element in this composite or an array of any of those.
- * @param {Boolean} [removeDom] True to also remove the element from the document
- * @return {Ext.dom.CompositeElement} this
- */
- removeElement: function(keys, removeDom) {
- keys = [].concat(keys);
- var me = this,
- elements = me.elements,
- kLen = keys.length,
- val, el, k;
- for (k = 0; k < kLen; k++) {
- val = keys[k];
- if ((el = (elements[val] || elements[val = me.indexOf(val)]))) {
- if (removeDom) {
- if (el.dom) {
- el.remove();
- } else {
- Ext.removeNode(el);
- }
- }
- Ext.Array.erase(elements, val, 1);
- }
- }
- return me;
- }
- }, function() {
- this.importElementMethods();
- this.prototype.on = this.prototype.addListener;
- if (Ext.DomQuery){
- Ext.dom.Element.selectorFunction = Ext.DomQuery.select;
- }
- <span id='Ext-dom-Element-static-method-select'> /**
- </span> * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
- * to be applied to many related elements in one statement through the returned
- * {@link Ext.dom.CompositeElement CompositeElement} or
- * {@link Ext.dom.CompositeElementLite CompositeElementLite} object.
- * @param {String/HTMLElement[]} selector The CSS selector or an array of elements
- * @param {HTMLElement/String} [root] The root element of the query or id of the root
- * @return {Ext.dom.CompositeElementLite/Ext.dom.CompositeElement}
- * @member Ext.dom.Element
- * @method select
- * @static
- * @ignore
- */
- Ext.dom.Element.select = function(selector, root) {
- var elements;
- if (typeof selector == "string") {
- elements = Ext.dom.Element.selectorFunction(selector, root);
- }
- else if (selector.length !== undefined) {
- elements = selector;
- }
- else {
- //<debug>
- throw new Error("[Ext.select] Invalid selector specified: " + selector);
- //</debug>
- }
- return new Ext.CompositeElementLite(elements);
- };
- <span id='Ext-method-select'> /**
- </span> * @member Ext
- * @method select
- * @inheritdoc Ext.dom.Element#select
- * @ignore
- */
- Ext.select = function() {
- return Ext.dom.Element.select.apply(Ext.dom.Element, arguments);
- };
- });
- </pre>
- </body>
- </html>
|