behavior.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. define(["./_base/kernel", "./_base/lang", "./_base/array", "./_base/connect", "./query", "./domReady"],
  2. function(dojo, lang, darray, connect, query, domReady){
  3. // module:
  4. // dojo/behavior
  5. dojo.deprecated("dojo.behavior", "Use dojo/on with event delegation (on.selector())");
  6. var Behavior = function(){
  7. // summary:
  8. // Deprecated. dojo/behavior's functionality can be achieved using event delegation using dojo/on
  9. // and on.selector().
  10. // description:
  11. // A very simple, lightweight mechanism for applying code to
  12. // existing documents, based around `dojo/query` (CSS3 selectors) for node selection,
  13. // and a simple two-command API: `add()` and `apply()`;
  14. //
  15. // Behaviors apply to a given page, and are registered following the syntax
  16. // options described by `add()` to match nodes to actions, or "behaviors".
  17. //
  18. // Added behaviors are applied to the current DOM when .apply() is called,
  19. // matching only new nodes found since .apply() was last called.
  20. function arrIn(obj, name){
  21. if(!obj[name]){ obj[name] = []; }
  22. return obj[name];
  23. }
  24. var _inc = 0;
  25. function forIn(obj, scope, func){
  26. var tmpObj = {};
  27. for(var x in obj){
  28. if(typeof tmpObj[x] == "undefined"){
  29. if(!func){
  30. scope(obj[x], x);
  31. }else{
  32. func.call(scope, obj[x], x);
  33. }
  34. }
  35. }
  36. }
  37. // FIXME: need a better test so we don't exclude nightly Safari's!
  38. this._behaviors = {};
  39. this.add = function(/* Object */behaviorObj){
  40. // summary:
  41. // Add the specified behavior to the list of behaviors, ignoring existing
  42. // matches.
  43. // behaviorObj: Object
  44. // The behavior object that will be added to behaviors list. The behaviors
  45. // in the list will be applied the next time apply() is called.
  46. // description:
  47. // Add the specified behavior to the list of behaviors which will
  48. // be applied the next time apply() is called. Calls to add() for
  49. // an already existing behavior do not replace the previous rules,
  50. // but are instead additive. New nodes which match the rule will
  51. // have all add()-ed behaviors applied to them when matched.
  52. //
  53. // The "found" method is a generalized handler that's called as soon
  54. // as the node matches the selector. Rules for values that follow also
  55. // apply to the "found" key.
  56. //
  57. // The "on*" handlers are attached with `dojo.connect()`, using the
  58. // matching node
  59. //
  60. // If the value corresponding to the ID key is a function and not a
  61. // list, it's treated as though it was the value of "found".
  62. //
  63. // dojo/behavior.add() can be called any number of times before
  64. // the DOM is ready. `dojo/behavior.apply()` is called automatically
  65. // by `dojo.addOnLoad`, though can be called to re-apply previously added
  66. // behaviors anytime the DOM changes.
  67. //
  68. // There are a variety of formats permitted in the behaviorObject
  69. //
  70. // example:
  71. // Simple list of properties. "found" is special. "Found" is assumed if
  72. // no property object for a given selector, and property is a function.
  73. //
  74. // | behavior.add({
  75. // | "#id": {
  76. // | "found": function(element){
  77. // | // node match found
  78. // | },
  79. // | "onclick": function(evt){
  80. // | // register onclick handler for found node
  81. // | }
  82. // | },
  83. // | "#otherid": function(element){
  84. // | // assumes "found" with this syntax
  85. // | }
  86. // | });
  87. //
  88. // example:
  89. // If property is a string, a dojo.publish will be issued on the channel:
  90. //
  91. // | behavior.add({
  92. // | // topic.publish() whenever class="noclick" found on anchors
  93. // | "a.noclick": "/got/newAnchor",
  94. // | "div.wrapper": {
  95. // | "onclick": "/node/wasClicked"
  96. // | }
  97. // | });
  98. // | topic.subscribe("/got/newAnchor", function(node){
  99. // | // handle node finding when dojo/behavior.apply() is called,
  100. // | // provided a newly matched node is found.
  101. // | });
  102. //
  103. // example:
  104. // Scoping can be accomplished by passing an object as a property to
  105. // a connection handle (on*):
  106. //
  107. // | behavior.add({
  108. // | "#id": {
  109. // | // like calling dojo.hitch(foo,"bar"). execute foo.bar() in scope of foo
  110. // | "onmouseenter": { targetObj: foo, targetFunc: "bar" },
  111. // | "onmouseleave": { targetObj: foo, targetFunc: "baz" }
  112. // | }
  113. // | });
  114. //
  115. // example:
  116. // Behaviors match on CSS3 Selectors, powered by dojo/query. Example selectors:
  117. //
  118. // | behavior.add({
  119. // | // match all direct descendants
  120. // | "#id4 > *": function(element){
  121. // | // ...
  122. // | },
  123. // |
  124. // | // match the first child node that's an element
  125. // | "#id4 > :first-child": { ... },
  126. // |
  127. // | // match the last child node that's an element
  128. // | "#id4 > :last-child": { ... },
  129. // |
  130. // | // all elements of type tagname
  131. // | "tagname": {
  132. // | // ...
  133. // | },
  134. // |
  135. // | "tagname1 tagname2 tagname3": {
  136. // | // ...
  137. // | },
  138. // |
  139. // | ".classname": {
  140. // | // ...
  141. // | },
  142. // |
  143. // | "tagname.classname": {
  144. // | // ...
  145. // | }
  146. // | });
  147. //
  148. forIn(behaviorObj, this, function(behavior, name){
  149. var tBehavior = arrIn(this._behaviors, name);
  150. if(typeof tBehavior["id"] != "number"){
  151. tBehavior.id = _inc++;
  152. }
  153. var cversion = [];
  154. tBehavior.push(cversion);
  155. if((lang.isString(behavior))||(lang.isFunction(behavior))){
  156. behavior = { found: behavior };
  157. }
  158. forIn(behavior, function(rule, ruleName){
  159. arrIn(cversion, ruleName).push(rule);
  160. });
  161. });
  162. };
  163. var _applyToNode = function(node, action, ruleSetName){
  164. if(lang.isString(action)){
  165. if(ruleSetName == "found"){
  166. connect.publish(action, [ node ]);
  167. }else{
  168. connect.connect(node, ruleSetName, function(){
  169. connect.publish(action, arguments);
  170. });
  171. }
  172. }else if(lang.isFunction(action)){
  173. if(ruleSetName == "found"){
  174. action(node);
  175. }else{
  176. connect.connect(node, ruleSetName, action);
  177. }
  178. }
  179. };
  180. this.apply = function(){
  181. // summary:
  182. // Applies all currently registered behaviors to the document.
  183. //
  184. // description:
  185. // Applies all currently registered behaviors to the document,
  186. // taking care to ensure that only incremental updates are made
  187. // since the last time add() or apply() were called.
  188. //
  189. // If new matching nodes have been added, all rules in a behavior will be
  190. // applied to that node. For previously matched nodes, only
  191. // behaviors which have been added since the last call to apply()
  192. // will be added to the nodes.
  193. //
  194. // apply() is called once automatically by `dojo.addOnLoad`, so
  195. // registering behaviors with `dojo/behavior.add()` before the DOM is
  196. // ready is acceptable, provided the dojo.behavior module is ready.
  197. //
  198. // Calling appy() manually after manipulating the DOM is required
  199. // to rescan the DOM and apply newly .add()ed behaviors, or to match
  200. // nodes that match existing behaviors when those nodes are added to
  201. // the DOM.
  202. //
  203. forIn(this._behaviors, function(tBehavior, id){
  204. query(id).forEach(
  205. function(elem){
  206. var runFrom = 0;
  207. var bid = "_dj_behavior_"+tBehavior.id;
  208. if(typeof elem[bid] == "number"){
  209. runFrom = elem[bid];
  210. if(runFrom == (tBehavior.length)){
  211. return;
  212. }
  213. }
  214. // run through the versions, applying newer rules at each step
  215. for(var x=runFrom, tver; tver = tBehavior[x]; x++){
  216. forIn(tver, function(ruleSet, ruleSetName){
  217. if(lang.isArray(ruleSet)){
  218. darray.forEach(ruleSet, function(action){
  219. _applyToNode(elem, action, ruleSetName);
  220. });
  221. }
  222. });
  223. }
  224. // ensure that re-application only adds new rules to the node
  225. elem[bid] = tBehavior.length;
  226. }
  227. );
  228. });
  229. };
  230. };
  231. dojo.behavior = new Behavior();
  232. domReady( function(){ dojo.behavior.apply(); } );
  233. return dojo.behavior;
  234. });