| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | |
|---|
| 5 | <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|---|
| 6 | |
|---|
| 7 | <title>Test Dijit Internal Event: "ondijitclick"</title> |
|---|
| 8 | |
|---|
| 9 | <script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="isDebug: true"></script> |
|---|
| 10 | <script type="text/javascript"> |
|---|
| 11 | dojo.require("dijit._Widget"); |
|---|
| 12 | dojo.require("dojo.parser"); |
|---|
| 13 | |
|---|
| 14 | dojo.ready(function(){ |
|---|
| 15 | dojo.declare("dijit.WidgetWithOndijitclick", |
|---|
| 16 | dijit._Widget, |
|---|
| 17 | { |
|---|
| 18 | clickCount: 0, |
|---|
| 19 | onClick: function(){ |
|---|
| 20 | }, |
|---|
| 21 | _onClick: function(){ |
|---|
| 22 | this.clickCount++; |
|---|
| 23 | this.onClick(); |
|---|
| 24 | }, |
|---|
| 25 | postCreate: function(){ |
|---|
| 26 | this.connect(this.domNode, "ondijitclick", "_onClick"); |
|---|
| 27 | } |
|---|
| 28 | } |
|---|
| 29 | ); |
|---|
| 30 | |
|---|
| 31 | dojo.parser.parse(); |
|---|
| 32 | }); |
|---|
| 33 | </script> |
|---|
| 34 | <style> |
|---|
| 35 | div { |
|---|
| 36 | border: 1px solid blue; |
|---|
| 37 | margin-top: 1em; |
|---|
| 38 | } |
|---|
| 39 | </style> |
|---|
| 40 | </head> |
|---|
| 41 | <body class="claro"> |
|---|
| 42 | <h1>_Widget.ondijitclick test</h1> |
|---|
| 43 | <p> |
|---|
| 44 | This tests dijit's infrastructure for catching SPACE and ENTER key clicks on nodes |
|---|
| 45 | that aren't <button> or <a>, and therefore don't normally respond to keyboard |
|---|
| 46 | "click events". |
|---|
| 47 | </p> |
|---|
| 48 | <p> |
|---|
| 49 | Clicking the first widget moves focus to the plain button, |
|---|
| 50 | but that button itself shouldn't get a click event. (There are some subtleties about |
|---|
| 51 | whether catch clicks on key-down or key-up so this tests to make sure we are doing |
|---|
| 52 | the right one.) |
|---|
| 53 | </p> |
|---|
| 54 | <div id="first" tabIndex="0" data-dojo-type="dijit.WidgetWithOndijitclick" data-dojo-props=' |
|---|
| 55 | onClick:function(){ dojo.byId("plainbutton").focus(); }'> |
|---|
| 56 | click me using space or enter, to focus button below |
|---|
| 57 | </div> |
|---|
| 58 | <button id="plainbutton" onclick="console.log('plain button clicked'); window.clicked = true;" type="button" >plain button</button> |
|---|
| 59 | |
|---|
| 60 | <div id="second" tabIndex="0" data-dojo-type="dijit.WidgetWithOndijitclick" data-dojo-props=' |
|---|
| 61 | onClick:function(){ dojo.byId("textarea").focus(); }'> |
|---|
| 62 | click me using space or enter, to focus textarea below |
|---|
| 63 | </div> |
|---|
| 64 | <textarea id="textarea">hello world</textarea> |
|---|
| 65 | |
|---|
| 66 | <br> |
|---|
| 67 | <button id="plainbutton2" style="margin-top: 2em;" type="button" |
|---|
| 68 | onClick="dojo.byId('third').focus();"> |
|---|
| 69 | click me using space or enter, to focus ondijitclick widget below |
|---|
| 70 | </button> |
|---|
| 71 | <div id="third" tabIndex="0" data-dojo-type="dijit.WidgetWithOndijitclick" data-dojo-props='style:"margin-top: 0px;", |
|---|
| 72 | onFocus:function(){ console.log("onfocus on third"); window.onDijitClickFocus = true; }, |
|---|
| 73 | onClick:function(){ console.log("onclick on third"); window.spuriousOnDijitClick = true; }'> |
|---|
| 74 | clicking the button above shouldn't cause my ondijitclick handler to fire |
|---|
| 75 | </div> |
|---|
| 76 | <br> |
|---|
| 77 | <div id="fourth" tabIndex="0" data-dojo-type="dijit.WidgetWithOndijitclick" data-dojo-props='style:"margin-top: 0px;", |
|---|
| 78 | onClick:function(){ alert("make sure can close this alert via keyboard"); }'> |
|---|
| 79 | Manual Test: Click me using space or enter to launch a JavaScript alert() from element using ondijitclick |
|---|
| 80 | </div> |
|---|
| 81 | <br> |
|---|
| 82 | Clicking this button should produce exactly one click event to console: |
|---|
| 83 | <button id="widgetbutton" tabIndex="0" data-dojo-type="dijit.WidgetWithOndijitclick"> |
|---|
| 84 | button w/ondijitclick |
|---|
| 85 | </button> |
|---|
| 86 | </body> |
|---|
| 87 | </html> |
|---|
