CompositeElementLite.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  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-CompositeElementLite'>/**
  19. </span> * This class encapsulates a *collection* of DOM elements, providing methods to filter members, or to perform collective
  20. * actions upon the whole set.
  21. *
  22. * Although they are not listed, this class supports all of the methods of {@link Ext.dom.Element} and
  23. * {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.
  24. *
  25. * Example:
  26. *
  27. * var els = Ext.select(&quot;#some-el div.some-class&quot;);
  28. * // or select directly from an existing element
  29. * var el = Ext.get('some-el');
  30. * el.select('div.some-class');
  31. *
  32. * els.setWidth(100); // all elements become 100 width
  33. * els.hide(true); // all elements fade out and hide
  34. * // or
  35. * els.setWidth(100).hide(true);
  36. */
  37. Ext.define('Ext.dom.CompositeElementLite', {
  38. alternateClassName: 'Ext.CompositeElementLite',
  39. requires: ['Ext.dom.Element'],
  40. statics: {
  41. <span id='Ext-dom-CompositeElementLite-method-importElementMethods'> /**
  42. </span> * @private
  43. * Copies all of the functions from Ext.dom.Element's prototype onto CompositeElementLite's prototype.
  44. * This is called twice - once immediately below, and once again after additional Ext.dom.Element
  45. * are added in Ext JS
  46. */
  47. importElementMethods: function() {
  48. var name,
  49. elementPrototype = Ext.dom.Element.prototype,
  50. prototype = this.prototype;
  51. for (name in elementPrototype) {
  52. if (typeof elementPrototype[name] == 'function'){
  53. (function(key) {
  54. prototype[key] = prototype[key] || function() {
  55. return this.invoke(key, arguments);
  56. };
  57. }).call(prototype, name);
  58. }
  59. }
  60. }
  61. },
  62. constructor: function(elements, root) {
  63. <span id='Ext-dom-CompositeElementLite-property-elements'> /**
  64. </span> * @property {HTMLElement[]} elements
  65. * The Array of DOM elements which this CompositeElement encapsulates.
  66. *
  67. * This will not *usually* be accessed in developers' code, but developers wishing to augment the capabilities
  68. * of the CompositeElementLite class may use it when adding methods to the class.
  69. *
  70. * For example to add the `nextAll` method to the class to **add** all following siblings of selected elements,
  71. * the code would be
  72. *
  73. * Ext.override(Ext.dom.CompositeElementLite, {
  74. * nextAll: function() {
  75. * var elements = this.elements, i, l = elements.length, n, r = [], ri = -1;
  76. *
  77. * // Loop through all elements in this Composite, accumulating
  78. * // an Array of all siblings.
  79. * for (i = 0; i &lt; l; i++) {
  80. * for (n = elements[i].nextSibling; n; n = n.nextSibling) {
  81. * r[++ri] = n;
  82. * }
  83. * }
  84. *
  85. * // Add all found siblings to this Composite
  86. * return this.add(r);
  87. * }
  88. * });
  89. *
  90. * @readonly
  91. */
  92. this.elements = [];
  93. this.add(elements, root);
  94. this.el = new Ext.dom.AbstractElement.Fly();
  95. },
  96. <span id='Ext-dom-CompositeElementLite-property-isComposite'> /**
  97. </span> * @property {Boolean} isComposite
  98. * `true` in this class to identify an object as an instantiated CompositeElement, or subclass thereof.
  99. */
  100. isComposite: true,
  101. // private
  102. getElement: function(el) {
  103. // Set the shared flyweight dom property to the current element
  104. return this.el.attach(el);
  105. },
  106. // private
  107. transformElement: function(el) {
  108. return Ext.getDom(el);
  109. },
  110. <span id='Ext-dom-CompositeElementLite-method-getCount'> /**
  111. </span> * Returns the number of elements in this Composite.
  112. * @return {Number}
  113. */
  114. getCount: function() {
  115. return this.elements.length;
  116. },
  117. <span id='Ext-dom-CompositeElementLite-method-add'> /**
  118. </span> * Adds elements to this Composite object.
  119. * @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an Array of DOM elements to add, or another Composite
  120. * object who's elements should be added.
  121. * @return {Ext.dom.CompositeElement} This Composite object.
  122. */
  123. add: function(els, root) {
  124. var elements = this.elements,
  125. i, ln;
  126. if (!els) {
  127. return this;
  128. }
  129. if (typeof els == &quot;string&quot;) {
  130. els = Ext.dom.Element.selectorFunction(els, root);
  131. }
  132. else if (els.isComposite) {
  133. els = els.elements;
  134. }
  135. else if (!Ext.isIterable(els)) {
  136. els = [els];
  137. }
  138. for (i = 0, ln = els.length; i &lt; ln; ++i) {
  139. elements.push(this.transformElement(els[i]));
  140. }
  141. return this;
  142. },
  143. invoke: function(fn, args) {
  144. var elements = this.elements,
  145. ln = elements.length,
  146. element,
  147. i;
  148. fn = Ext.dom.Element.prototype[fn];
  149. for (i = 0; i &lt; ln; i++) {
  150. element = elements[i];
  151. if (element) {
  152. fn.apply(this.getElement(element), args);
  153. }
  154. }
  155. return this;
  156. },
  157. <span id='Ext-dom-CompositeElementLite-method-item'> /**
  158. </span> * Returns a flyweight Element of the dom element object at the specified index
  159. * @param {Number} index
  160. * @return {Ext.dom.Element}
  161. */
  162. item: function(index) {
  163. var el = this.elements[index],
  164. out = null;
  165. if (el) {
  166. out = this.getElement(el);
  167. }
  168. return out;
  169. },
  170. // fixes scope with flyweight
  171. addListener: function(eventName, handler, scope, opt) {
  172. var els = this.elements,
  173. len = els.length,
  174. i, e;
  175. for (i = 0; i &lt; len; i++) {
  176. e = els[i];
  177. if (e) {
  178. Ext.EventManager.on(e, eventName, handler, scope || e, opt);
  179. }
  180. }
  181. return this;
  182. },
  183. <span id='Ext-dom-CompositeElementLite-method-each'> /**
  184. </span> * Calls the passed function for each element in this composite.
  185. * @param {Function} fn The function to call.
  186. * @param {Ext.dom.Element} fn.el The current Element in the iteration. **This is the flyweight
  187. * (shared) Ext.dom.Element instance, so if you require a a reference to the dom node, use el.dom.**
  188. * @param {Ext.dom.CompositeElement} fn.c This Composite object.
  189. * @param {Number} fn.index The zero-based index in the iteration.
  190. * @param {Object} [scope] The scope (this reference) in which the function is executed.
  191. * Defaults to the Element.
  192. * @return {Ext.dom.CompositeElement} this
  193. */
  194. each: function(fn, scope) {
  195. var me = this,
  196. els = me.elements,
  197. len = els.length,
  198. i, e;
  199. for (i = 0; i &lt; len; i++) {
  200. e = els[i];
  201. if (e) {
  202. e = this.getElement(e);
  203. if (fn.call(scope || e, e, me, i) === false) {
  204. break;
  205. }
  206. }
  207. }
  208. return me;
  209. },
  210. <span id='Ext-dom-CompositeElementLite-method-fill'> /**
  211. </span> * Clears this Composite and adds the elements passed.
  212. * @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an array of DOM elements, or another Composite from which
  213. * to fill this Composite.
  214. * @return {Ext.dom.CompositeElement} this
  215. */
  216. fill: function(els) {
  217. var me = this;
  218. me.elements = [];
  219. me.add(els);
  220. return me;
  221. },
  222. <span id='Ext-dom-CompositeElementLite-method-filter'> /**
  223. </span> * Filters this composite to only elements that match the passed selector.
  224. * @param {String/Function} selector A string CSS selector or a comparison function. The comparison function will be
  225. * called with the following arguments:
  226. * @param {Ext.dom.Element} selector.el The current DOM element.
  227. * @param {Number} selector.index The current index within the collection.
  228. * @return {Ext.dom.CompositeElement} this
  229. */
  230. filter: function(selector) {
  231. var me = this,
  232. els = me.elements,
  233. len = els.length,
  234. out = [],
  235. i = 0,
  236. isFunc = typeof selector == 'function',
  237. add,
  238. el;
  239. for (; i &lt; len; i++) {
  240. el = els[i];
  241. add = false;
  242. if (el) {
  243. el = me.getElement(el);
  244. if (isFunc) {
  245. add = selector.call(el, el, me, i) !== false;
  246. } else {
  247. add = el.is(selector);
  248. }
  249. if (add) {
  250. out.push(me.transformElement(el));
  251. }
  252. }
  253. }
  254. me.elements = out;
  255. return me;
  256. },
  257. <span id='Ext-dom-CompositeElementLite-method-indexOf'> /**
  258. </span> * Find the index of the passed element within the composite collection.
  259. * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.dom.Element, or an HtmlElement
  260. * to find within the composite collection.
  261. * @return {Number} The index of the passed Ext.dom.Element in the composite collection, or -1 if not found.
  262. */
  263. indexOf: function(el) {
  264. return Ext.Array.indexOf(this.elements, this.transformElement(el));
  265. },
  266. <span id='Ext-dom-CompositeElementLite-method-replaceElement'> /**
  267. </span> * Replaces the specified element with the passed element.
  268. * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
  269. * element in this composite to replace.
  270. * @param {String/Ext.Element} replacement The id of an element or the Element itself.
  271. * @param {Boolean} [domReplace] True to remove and replace the element in the document too.
  272. * @return {Ext.dom.CompositeElement} this
  273. */
  274. replaceElement: function(el, replacement, domReplace) {
  275. var index = !isNaN(el) ? el : this.indexOf(el),
  276. d;
  277. if (index &gt; -1) {
  278. replacement = Ext.getDom(replacement);
  279. if (domReplace) {
  280. d = this.elements[index];
  281. d.parentNode.insertBefore(replacement, d);
  282. Ext.removeNode(d);
  283. }
  284. Ext.Array.splice(this.elements, index, 1, replacement);
  285. }
  286. return this;
  287. },
  288. <span id='Ext-dom-CompositeElementLite-method-clear'> /**
  289. </span> * Removes all elements.
  290. */
  291. clear: function() {
  292. this.elements = [];
  293. },
  294. addElements: function(els, root) {
  295. if (!els) {
  296. return this;
  297. }
  298. if (typeof els == &quot;string&quot;) {
  299. els = Ext.dom.Element.selectorFunction(els, root);
  300. }
  301. var yels = this.elements,
  302. eLen = els.length,
  303. e;
  304. for (e = 0; e &lt; eLen; e++) {
  305. yels.push(Ext.get(els[e]));
  306. }
  307. return this;
  308. },
  309. <span id='Ext-dom-CompositeElementLite-method-first'> /**
  310. </span> * Returns the first Element
  311. * @return {Ext.dom.Element}
  312. */
  313. first: function() {
  314. return this.item(0);
  315. },
  316. <span id='Ext-dom-CompositeElementLite-method-last'> /**
  317. </span> * Returns the last Element
  318. * @return {Ext.dom.Element}
  319. */
  320. last: function() {
  321. return this.item(this.getCount() - 1);
  322. },
  323. <span id='Ext-dom-CompositeElementLite-method-contains'> /**
  324. </span> * Returns true if this composite contains the passed element
  325. * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.Element, or an HtmlElement to
  326. * find within the composite collection.
  327. * @return {Boolean}
  328. */
  329. contains: function(el) {
  330. return this.indexOf(el) != -1;
  331. },
  332. <span id='Ext-dom-CompositeElementLite-method-removeElement'> /**
  333. </span> * Removes the specified element(s).
  334. * @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
  335. * element in this composite or an array of any of those.
  336. * @param {Boolean} [removeDom] True to also remove the element from the document
  337. * @return {Ext.dom.CompositeElement} this
  338. */
  339. removeElement: function(keys, removeDom) {
  340. keys = [].concat(keys);
  341. var me = this,
  342. elements = me.elements,
  343. kLen = keys.length,
  344. val, el, k;
  345. for (k = 0; k &lt; kLen; k++) {
  346. val = keys[k];
  347. if ((el = (elements[val] || elements[val = me.indexOf(val)]))) {
  348. if (removeDom) {
  349. if (el.dom) {
  350. el.remove();
  351. } else {
  352. Ext.removeNode(el);
  353. }
  354. }
  355. Ext.Array.erase(elements, val, 1);
  356. }
  357. }
  358. return me;
  359. }
  360. }, function() {
  361. this.importElementMethods();
  362. this.prototype.on = this.prototype.addListener;
  363. if (Ext.DomQuery){
  364. Ext.dom.Element.selectorFunction = Ext.DomQuery.select;
  365. }
  366. <span id='Ext-dom-Element-static-method-select'> /**
  367. </span> * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
  368. * to be applied to many related elements in one statement through the returned
  369. * {@link Ext.dom.CompositeElement CompositeElement} or
  370. * {@link Ext.dom.CompositeElementLite CompositeElementLite} object.
  371. * @param {String/HTMLElement[]} selector The CSS selector or an array of elements
  372. * @param {HTMLElement/String} [root] The root element of the query or id of the root
  373. * @return {Ext.dom.CompositeElementLite/Ext.dom.CompositeElement}
  374. * @member Ext.dom.Element
  375. * @method select
  376. * @static
  377. * @ignore
  378. */
  379. Ext.dom.Element.select = function(selector, root) {
  380. var elements;
  381. if (typeof selector == &quot;string&quot;) {
  382. elements = Ext.dom.Element.selectorFunction(selector, root);
  383. }
  384. else if (selector.length !== undefined) {
  385. elements = selector;
  386. }
  387. else {
  388. //&lt;debug&gt;
  389. throw new Error(&quot;[Ext.select] Invalid selector specified: &quot; + selector);
  390. //&lt;/debug&gt;
  391. }
  392. return new Ext.CompositeElementLite(elements);
  393. };
  394. <span id='Ext-method-select'> /**
  395. </span> * @member Ext
  396. * @method select
  397. * @inheritdoc Ext.dom.Element#select
  398. * @ignore
  399. */
  400. Ext.select = function() {
  401. return Ext.dom.Element.select.apply(Ext.dom.Element, arguments);
  402. };
  403. });
  404. </pre>
  405. </body>
  406. </html>