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) return this;
  41         if(typeof els == "string"){
  42             els = Roo.Element.selectorFunction(els);
  43         }
  44         var yels = this.elements;
  45         var index = yels.length-1;
  46         for(var i = 0, len = els.length; i < len; i++) {
  47                 yels[++index] = Roo.get(els[i]);
  48         }
  49         return this;
  50     },
  51
  52     /**
  53     * Clears this composite and adds the elements returned by the passed selector.
  54     * @param {String/Array} els A string CSS selector, an array of elements or an element
  55     * @return {CompositeElement} this
  56     */
  57     fill : function(els){
  58         this.elements = [];
  59         this.add(els);
  60         return this;
  61     },
  62
  63     /**
  64     * Filters this composite to only elements that match the passed selector.
  65     * @param {String} selector A string CSS selector
  66     * @param {Boolean} inverse return inverse filter (not matches)
  67     * @return {CompositeElement} this
  68     */
  69     filter : function(selector, inverse){
  70         var els = [];
  71         inverse = inverse || false;
  72         this.each(function(el){
  73             if(el.is(selector)){
  74                 els[els.length] = el.dom;
  75             }
  76         });
  77         this.fill(els);
  78         return this;
  79     },
  80
  81     invoke : function(fn, args){
  82         var els = this.elements;
  83         for(var i = 0, len = els.length; i < len; i++) {
  84                 Roo.Element.prototype[fn].apply(els[i], args);
  85         }
  86         return this;
  87     },
  88     /**
  89     * Adds elements to this composite.
  90     * @param {String/Array} els A string CSS selector, an array of elements or an element
  91     * @return {CompositeElement} this
  92     */
  93     add : function(els){
  94         if(typeof els == "string"){
  95             this.addElements(Roo.Element.selectorFunction(els));
  96         }else if(els.length !== undefined){
  97             this.addElements(els);
  98         }else{
  99             this.addElements([els]);
 100         }
 101         return this;
 102     },
 103     /**
 104     * Calls the passed function passing (el, this, index) for each element in this composite.
 105     * @param {Function} fn The function to call
 106     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
 107     * @return {CompositeElement} this
 108     */
 109     each : function(fn, scope){
 110         var els = this.elements;
 111         for(var i = 0, len = els.length; i < len; i++){
 112             if(fn.call(scope || els[i], els[i], this, i) === false) {
 113                 break;
 114             }
 115         }
 116         return this;
 117     },
 118
 119     /**
 120      * Returns the Element object at the specified index
 121      * @param {Number} index
 122      * @return {Roo.Element}
 123      */
 124     item : function(index){
 125         return this.elements[index] || null;
 126     },
 127
 128     /**
 129      * Returns the first Element
 130      * @return {Roo.Element}
 131      */
 132     first : function(){
 133         return this.item(0);
 134     },
 135
 136     /**
 137      * Returns the last Element
 138      * @return {Roo.Element}
 139      */
 140     last : function(){
 141         return this.item(this.elements.length-1);
 142     },
 143
 144     /**
 145      * Returns the number of elements in this composite
 146      * @return Number
 147      */
 148     getCount : function(){
 149         return this.elements.length;
 150     },
 151
 152     /**
 153      * Returns true if this composite contains the passed element
 154      * @return Boolean
 155      */
 156     contains : function(el){
 157         return this.indexOf(el) !== -1;
 158     },
 159
 160     /**
 161      * Returns true if this composite contains the passed element
 162      * @return Boolean
 163      */
 164     indexOf : function(el){
 165         return this.elements.indexOf(Roo.get(el));
 166     },
 167
 168
 169     /**
 170     * Removes the specified element(s).
 171     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
 172     * or an array of any of those.
 173     * @param {Boolean} removeDom (optional) True to also remove the element from the document
 174     * @return {CompositeElement} this
 175     */
 176     removeElement : function(el, removeDom){
 177         if(el instanceof Array){
 178             for(var i = 0, len = el.length; i < len; i++){
 179                 this.removeElement(el[i]);
 180             }
 181             return this;
 182         }
 183         var index = typeof el == 'number' ? el : this.indexOf(el);
 184         if(index !== -1){
 185             if(removeDom){
 186                 var d = this.elements[index];
 187                 if(d.dom){
 188                     d.remove();
 189                 }else{
 190                     d.parentNode.removeChild(d);
 191                 }
 192             }
 193             this.elements.splice(index, 1);
 194         }
 195         return this;
 196     },
 197
 198     /**
 199     * Replaces the specified element with the passed element.
 200     * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
 201     * to replace.
 202     * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
 203     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
 204     * @return {CompositeElement} this
 205     */
 206     replaceElement : function(el, replacement, domReplace){
 207         var index = typeof el == 'number' ? el : this.indexOf(el);
 208         if(index !== -1){
 209             if(domReplace){
 210                 this.elements[index].replaceWith(replacement);
 211             }else{
 212                 this.elements.splice(index, 1, Roo.get(replacement))
 213             }
 214         }
 215         return this;
 216     },
 217
 218     /**
 219      * Removes all elements.
 220      */
 221     clear : function(){
 222         this.elements = [];
 223     }
 224 };
 225 (function(){
 226     Roo.CompositeElement.createCall = function(proto, fnName){
 227         if(!proto[fnName]){
 228             proto[fnName] = function(){
 229                 return this.invoke(fnName, arguments);
 230             };
 231         }
 232     };
 233     for(var fnName in Roo.Element.prototype){
 234         if(typeof Roo.Element.prototype[fnName] == "function"){
 235             Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
 236         }
 237     };
 238 })();