| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>Testing dojo.behavior</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../resources/dojo.css"; |
|---|
| 8 | </style> |
|---|
| 9 | <script type="text/javascript" src="../dojo.js" data-dojo-config="isDebug: true, popup: true"></script> |
|---|
| 10 | <script type="text/javascript"> |
|---|
| 11 | require(["dojo", "doh", "dojo/behavior", "dojo/domReady!"], function(dojo, doh){ |
|---|
| 12 | var applyCount = 0; |
|---|
| 13 | |
|---|
| 14 | var behaviorObj = { |
|---|
| 15 | ".bar":function(elem){ |
|---|
| 16 | dojo.style(elem, "opacity", 0.5); |
|---|
| 17 | applyCount++; |
|---|
| 18 | }, |
|---|
| 19 | ".foo > span":function(elem){ |
|---|
| 20 | elem.style.fontStyle = "italic"; |
|---|
| 21 | applyCount++; |
|---|
| 22 | } |
|---|
| 23 | }; |
|---|
| 24 | |
|---|
| 25 | topicCount = 0; |
|---|
| 26 | dojo.subscribe("/foo", function(){ topicCount++; }); |
|---|
| 27 | |
|---|
| 28 | // no behaviors should be executed when onload fires |
|---|
| 29 | doh.register("t", |
|---|
| 30 | [ |
|---|
| 31 | function add(t){ |
|---|
| 32 | t.f(dojo.behavior._behaviors[".bar"]); |
|---|
| 33 | t.f(dojo.behavior._behaviors[".foo > span"]); |
|---|
| 34 | dojo.behavior.add(behaviorObj); |
|---|
| 35 | // make sure they got plopped in |
|---|
| 36 | t.t(dojo.behavior._behaviors[".bar"]); |
|---|
| 37 | t.is(1, dojo.behavior._behaviors[".bar"].length); |
|---|
| 38 | t.t(dojo.behavior._behaviors[".foo > span"]); |
|---|
| 39 | t.is(1, dojo.behavior._behaviors[".foo > span"].length); |
|---|
| 40 | }, |
|---|
| 41 | function apply(t){ |
|---|
| 42 | t.is(0, applyCount); |
|---|
| 43 | dojo.behavior.apply(); |
|---|
| 44 | t.is(2, applyCount); |
|---|
| 45 | |
|---|
| 46 | // reapply and make sure we only match once |
|---|
| 47 | dojo.behavior.apply(); |
|---|
| 48 | t.is(2, applyCount); |
|---|
| 49 | }, |
|---|
| 50 | function reapply(t){ |
|---|
| 51 | t.is(2, applyCount); |
|---|
| 52 | // add the rules again |
|---|
| 53 | dojo.behavior.add(behaviorObj); |
|---|
| 54 | dojo.behavior.apply(); |
|---|
| 55 | t.is(4, applyCount); |
|---|
| 56 | // dojo.behavior.apply(); |
|---|
| 57 | // t.is(4, applyCount); |
|---|
| 58 | // dojo.query(".bar").styles("opacity", 1.0); |
|---|
| 59 | }, |
|---|
| 60 | function topics(t){ |
|---|
| 61 | var d = new doh.Deferred(); |
|---|
| 62 | t.is(0, topicCount); |
|---|
| 63 | dojo.behavior.add({ ".foo": "/foo" }); |
|---|
| 64 | dojo.behavior.apply(); |
|---|
| 65 | t.is(2, topicCount); |
|---|
| 66 | |
|---|
| 67 | // We are going to catch focus events on "thinger", so first move focus |
|---|
| 68 | // somewhere else. |
|---|
| 69 | dojo.byId("another").focus(); |
|---|
| 70 | |
|---|
| 71 | // use timeout because blur/focus event generation isn't synchronous on IE |
|---|
| 72 | setTimeout(d.getTestErrback(function(){ |
|---|
| 73 | |
|---|
| 74 | // setup listener for focus events |
|---|
| 75 | dojo.behavior.add({ ".foo": { |
|---|
| 76 | "onfocus": "/foo" |
|---|
| 77 | } |
|---|
| 78 | }); |
|---|
| 79 | dojo.behavior.apply(); |
|---|
| 80 | t.is(2, topicCount); |
|---|
| 81 | |
|---|
| 82 | // focus blah, publishing /foo |
|---|
| 83 | dojo.byId("blah").focus(); |
|---|
| 84 | |
|---|
| 85 | setTimeout(d.getTestErrback(function(){ |
|---|
| 86 | t.is(3, topicCount); |
|---|
| 87 | |
|---|
| 88 | // blur and then refocus blah, publishing /foo again |
|---|
| 89 | dojo.byId("another").focus(); |
|---|
| 90 | dojo.byId("blah").focus(); |
|---|
| 91 | |
|---|
| 92 | setTimeout(d.getTestCallback(function(){ |
|---|
| 93 | t.is(4, topicCount); |
|---|
| 94 | }), 10); |
|---|
| 95 | }), 10); |
|---|
| 96 | }), 10); |
|---|
| 97 | return d; |
|---|
| 98 | } |
|---|
| 99 | ] |
|---|
| 100 | ); |
|---|
| 101 | doh.runOnLoad(); |
|---|
| 102 | }); |
|---|
| 103 | </script> |
|---|
| 104 | </head> |
|---|
| 105 | <body> |
|---|
| 106 | <div class="foo" id="fooOne"> |
|---|
| 107 | <span>.foo > span</span> |
|---|
| 108 | <div class="bar"> |
|---|
| 109 | <span>.foo > .bar > span</span> |
|---|
| 110 | </div> |
|---|
| 111 | </div> |
|---|
| 112 | |
|---|
| 113 | <!--for focus/topic tests --> |
|---|
| 114 | <input id="another" value="another"> |
|---|
| 115 | <input type="text" id="blah" class="foo blah" name="thinger" value="thinger" tabIndex="0"> |
|---|
| 116 | </body> |
|---|
| 117 | </html> |
|---|
