| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Test ScaleWidget</title> |
|---|
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|---|
| 6 | <link rel="stylesheet" type="text/css" href="../css/qed.css" /> |
|---|
| 7 | </head> |
|---|
| 8 | <body class="dijitReset claro" id="rft"> |
|---|
| 9 | <script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, isDebug: true"></script> |
|---|
| 10 | <script> |
|---|
| 11 | require([ |
|---|
| 12 | 'dijit/registry', |
|---|
| 13 | 'dojo/dom', |
|---|
| 14 | 'dojo/when', |
|---|
| 15 | 'dojo/parser', |
|---|
| 16 | 'qed/widgets/ScaleWidget', |
|---|
| 17 | 'dojo/domReady!' |
|---|
| 18 | ], function(registry,dom,when,parser,ScaleWidget){ |
|---|
| 19 | when(parser.parse()).then(function(){ |
|---|
| 20 | var scaleWidget = new ScaleWidget({ |
|---|
| 21 | min: -2, |
|---|
| 22 | max: 2, |
|---|
| 23 | min_label: "Bad", |
|---|
| 24 | max_label: "Good", |
|---|
| 25 | naLabel: "N/A", |
|---|
| 26 | name: "lala", |
|---|
| 27 | items: [{ |
|---|
| 28 | text: "How were the lectures?", |
|---|
| 29 | minLabel: "Boring", |
|---|
| 30 | maxLabel: "Engaging" |
|---|
| 31 | },{ |
|---|
| 32 | text: "How was the lab organised? How was the lab organised? How was the lab organised?", |
|---|
| 33 | minLabel: "Sloppy", |
|---|
| 34 | maxLabel: "Stiff as a board" |
|---|
| 35 | }] |
|---|
| 36 | },"widgetNode").startup(); |
|---|
| 37 | |
|---|
| 38 | var valueNode = dom.byId("valueNode"); |
|---|
| 39 | var valueForm = registry.byId("valueForm"); |
|---|
| 40 | registry.byId("valueButton").on("click",function(){ |
|---|
| 41 | valueNode.innerHTML = JSON.stringify(valueForm.get("value")); |
|---|
| 42 | }); |
|---|
| 43 | |
|---|
| 44 | var configNode = dom.byId("configNode"); |
|---|
| 45 | var configForm = registry.byId("configForm"); |
|---|
| 46 | registry.byId("configButton").on("click",function(){ |
|---|
| 47 | configNode.innerHTML = JSON.stringify(configForm.get("value")); |
|---|
| 48 | }); |
|---|
| 49 | }); |
|---|
| 50 | }); |
|---|
| 51 | </script> |
|---|
| 52 | |
|---|
| 53 | <h1>Test ScaleWidget</h1> |
|---|
| 54 | |
|---|
| 55 | <h2>Widget</h2> |
|---|
| 56 | <div> |
|---|
| 57 | <div id="valueForm" data-dojo-type="dijit/form/Form"> |
|---|
| 58 | <div id="widgetNode"></div> |
|---|
| 59 | <button id="valueButton" data-dojo-type="dijit/form/Button">Done</button> |
|---|
| 60 | </div> |
|---|
| 61 | </div> |
|---|
| 62 | |
|---|
| 63 | <h2>Value</h2> |
|---|
| 64 | <div id="valueNode"></div> |
|---|
| 65 | |
|---|
| 66 | <h2>ConfigurationWidget</h2> |
|---|
| 67 | <div> |
|---|
| 68 | <div id="configForm" data-dojo-type="dijit/form/Form"> |
|---|
| 69 | <label>Min value</label><div name="minValue" data-dojo-type="dijit/form/TextBox"></div> |
|---|
| 70 | <label>Min label</label><div name="maxValue" data-dojo-type="dijit/form/TextBox"></div> |
|---|
| 71 | <label>Max value</label><div name="maxValue" data-dojo-type="dijit/form/TextBox"></div> |
|---|
| 72 | <label>Max label</label><div name="maxValue" data-dojo-type="dijit/form/TextBox"></div> |
|---|
| 73 | |
|---|
| 74 | <label>Text</label><div name="items[0].text" data-dojo-type="dijit/form/TextBox"></div> |
|---|
| 75 | <label>Min label</label><div name="items[0].minLabel" data-dojo-type="dijit/form/TextBox"></div> |
|---|
| 76 | <label>Max label</label><div name="items[0].maxLabel" data-dojo-type="dijit/form/TextBox"></div> |
|---|
| 77 | |
|---|
| 78 | <button id="configButton" data-dojo-type="dijit/form/Button">Done</button> |
|---|
| 79 | </div> |
|---|
| 80 | </div> |
|---|
| 81 | |
|---|
| 82 | <h2>Value</h2> |
|---|
| 83 | <div id="configNode"></div> |
|---|
| 84 | |
|---|
| 85 | </body> |
|---|
| 86 | </html> |
|---|
