git.roojs.org Git - roojs1/blob - Roo/CompositeElement.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12
  13 /**
  14  * @class Roo.CompositeElement
  15  * Standard composite class. Creates a Roo.Element for every element in the collection.
  16  * <br><br>
  17  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
  18  * actions will be performed on all the elements in this collection.</b>
  19  * <br><br>
  20  * All methods return <i>this</i> and can be chained.
  21  <pre><code>
  22  var els = Roo.select("#some-el div.some-class", true);
  23  // or select directly from an existing element
  24  var el = Roo.get('some-el');
  25  el.select('div.some-class', true);
  26
  27  els.setWidth(100); // all elements become 100 width
  28  els.hide(true); // all elements fade out and hide
  29  // or
  30  els.setWidth(100).hide(true);
  31  </code></pre>
  32  */
  33 Roo.CompositeElement = function(els){
  34     this.elements = [];
  35     this.addElements(els);
  36 };
  37 Roo.CompositeElement.prototype = {
  38     isComposite: true,
  39     addElements : function(els){
  40         if(!els) {
  41             return this;
  42         }
  43         if(typeof els == "string"){
  44             els = Roo.Element.selectorFunction(els);
  45         }
  46         var yels = this.elements;
  47         var index = yels.length-1;
  48         for(var i = 0, len = els.length; i < len; i++) {
  49                 yels[++index] = Roo.get(els[i]);
  50         }
  51         return this;
  52     },
  53
  54     /**
  55     * Clears this composite and adds the elements returned by the passed selector.
  56     * @param {String/Array} els A string CSS selector, an array of elements or an element
  57     * @return {CompositeElement} this
  58     */
  59     fill : function(els){
  60         this.elements = [];
  61         this.add(els);
  62         return this;
  63     },
  64
  65     /**
  66     * Filters this composite to only elements that match the passed selector.
  67     * @param {String} selector A string CSS selector
  68     * @param {Boolean} inverse return inverse filter (not matches)
  69     * @return {CompositeElement} this
  70     */
  71     filter : function(selector, inverse){
  72         var els = [];
  73         inverse = inverse || false;
  74         this.each(function(el){
  75             var match = inverse ? !el.is(selector) : el.is(selector);
  76             if(match){
  77                 els[els.length] = el.dom;
  78             }
  79         });
  80         this.fill(els);
  81         return this;
  82     },
  83
  84     invoke : function(fn, args){
  85         var els = this.elements;
  86         for(var i = 0, len = els.length; i < len; i++) {
  87                 Roo.Element.prototype[fn].apply(els[i], args);
  88         }
  89         return this;
  90     },
  91     /**
  92     * Adds elements to this composite.
  93     * @param {String/Array} els A string CSS selector, an array of elements or an element
  94     * @return {CompositeElement} this
  95     */
  96     add : function(els){
  97         if(typeof els == "string"){
  98             this.addElements(Roo.Element.selectorFunction(els));
  99         }else if(els.length !== undefined){
 100             this.addElements(els);
 101         }else{
 102             this.addElements([els]);
 103         }
 104         return this;
 105     },
 106     /**
 107     * Calls the passed function passing (el, this, index) for each element in this composite.
 108     * @param {Function} fn The function to call
 109     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
 110     * @return {CompositeElement} this
 111     */
 112     each : function(fn, scope){
 113         var els = this.elements;
 114         for(var i = 0, len = els.length; i < len; i++){
 115             if(fn.call(scope || els[i], els[i], this, i) === false) {
 116                 break;
 117             }
 118         }
 119         return this;
 120     },
 121
 122     /**
 123      * Returns the Element object at the specified index
 124      * @param {Number} index
 125      * @return {Roo.Element}
 126      */
 127     item : function(index){
 128         return this.elements[index] || null;
 129     },
 130
 131     /**
 132      * Returns the first Element
 133      * @return {Roo.Element}
 134      */
 135     first : function(){
 136         return this.item(0);
 137     },
 138
 139     /**
 140      * Returns the last Element
 141      * @return {Roo.Element}
 142      */
 143     last : function(){
 144         return this.item(this.elements.length-1);
 145     },
 146
 147     /**
 148      * Returns the number of elements in this composite
 149      * @return Number
 150      */
 151     getCount : function(){
 152         return this.elements.length;
 153     },
 154
 155     /**
 156      * Returns true if this composite contains the passed element
 157      * @return Boolean
 158      */
 159     contains : function(el){
 160         return this.indexOf(el) !== -1;
 161     },
 162
 163     /**
 164      * Returns true if this composite contains the passed element
 165      * @return Boolean
 166      */
 167     indexOf : function(el){
 168         return this.elements.indexOf(Roo.get(el));
 169     },
 170
 171
 172     /**
 173     * Removes the specified element(s).
 174     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
 175     * or an array of any of those.
 176     * @param {Boolean} removeDom (optional) True to also remove the element from the document
 177     * @return {CompositeElement} this
 178     */
 179     removeElement : function(el, removeDom){
 180         if(el instanceof Array){
 181             for(var i = 0, len = el.length; i < len; i++){
 182                 this.removeElement(el[i]);
 183             }
 184             return this;
 185         }
 186         var index = typeof el == 'number' ? el : this.indexOf(el);
 187         if(index !== -1){
 188             if(removeDom){
 189                 var d = this.elements[index];
 190                 if(d.dom){
 191                     d.remove();
 192                 }else{
 193                     d.parentNode.removeChild(d);
 194                 }
 195             }
 196             this.elements.splice(index, 1);
 197         }
 198         return this;
 199     },
 200
 201     /**
 202     * Replaces the specified element with the passed element.
 203     * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
 204     * to replace.
 205     * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
 206     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
 207     * @return {CompositeElement} this
 208     */
 209     replaceElement : function(el, replacement, domReplace){
 210         var index = typeof el == 'number' ? el : this.indexOf(el);
 211         if(index !== -1){
 212             if(domReplace){
 213                 this.elements[index].replaceWith(replacement);
 214             }else{
 215                 this.elements.splice(index, 1, Roo.get(replacement))
 216             }
 217         }
 218         return this;
 219     },
 220
 221     /**
 222      * Removes all elements.
 223      */
 224     clear : function(){
 225         this.elements = [];
 226     }
 227 };
 228 (function(){
 229     Roo.CompositeElement.createCall = function(proto, fnName){
 230         if(!proto[fnName]){
 231             proto[fnName] = function(){
 232                 return this.invoke(fnName, arguments);
 233             };
 234         }
 235     };
 236     for(var fnName in Roo.Element.prototype){
 237         if(typeof Roo.Element.prototype[fnName] == "function"){
 238             Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
 239         }
 240     };
 241 })();