| 1 | // module: |
|---|
| 2 | // dijit/tests/boilerplate |
|---|
| 3 | // description: |
|---|
| 4 | // A <script src="boilerplate.js"> on your test page will: |
|---|
| 5 | // |
|---|
| 6 | // - load claro or a specified theme |
|---|
| 7 | // - load the loader (i.e. define the require() method) |
|---|
| 8 | // |
|---|
| 9 | // By URL flags you can specify the theme, |
|---|
| 10 | // and optionally enable RTL (right to left) mode, and/or dj_a11y (high- |
|---|
| 11 | // contrast/image off emulation) ... probably not a genuine test for a11y. |
|---|
| 12 | // |
|---|
| 13 | // You should NOT be using this in a production environment. Include |
|---|
| 14 | // your css and set your classes manually: |
|---|
| 15 | // |
|---|
| 16 | // <style type="text/css"> |
|---|
| 17 | // @import "dijit/themes/claro/document.css"; |
|---|
| 18 | // </style> |
|---|
| 19 | // <link id="themeStyles" rel="stylesheet" href="dijit/themes/claro/claro.css"/> |
|---|
| 20 | // <script type="text/javascript" src="dojo/dojo.js"></script> |
|---|
| 21 | // ... |
|---|
| 22 | // <body class="claro"> |
|---|
| 23 | |
|---|
| 24 | var dir = "", |
|---|
| 25 | theme = "claro", |
|---|
| 26 | testMode = null; |
|---|
| 27 | |
|---|
| 28 | dojoConfig = { |
|---|
| 29 | async: true, |
|---|
| 30 | isDebug: true |
|---|
| 31 | }; |
|---|
| 32 | |
|---|
| 33 | // Parse the URL, get parameters |
|---|
| 34 | if(window.location.href.indexOf("?") > -1){ |
|---|
| 35 | var str = window.location.href.substr(window.location.href.indexOf("?")+1).split(/#/); |
|---|
| 36 | var ary = str[0].split(/&/); |
|---|
| 37 | for(var i = 0; i < ary.length; i++){ |
|---|
| 38 | var split = ary[i].split("="), |
|---|
| 39 | key = split[0], |
|---|
| 40 | value = (split[1]||'').replace(/[^\w]/g, ""); // replace() to prevent XSS attack |
|---|
| 41 | switch(key){ |
|---|
| 42 | case "locale": |
|---|
| 43 | // locale string | null |
|---|
| 44 | dojoConfig.locale = value; |
|---|
| 45 | break; |
|---|
| 46 | case "dir": |
|---|
| 47 | // rtl | null |
|---|
| 48 | dir = value; |
|---|
| 49 | break; |
|---|
| 50 | case "theme": |
|---|
| 51 | // tundra | soria | nihilo | claro | null |
|---|
| 52 | theme = /null|none/.test(value) ? null : value; |
|---|
| 53 | break; |
|---|
| 54 | case "a11y": |
|---|
| 55 | if(value){ testMode = "dj_a11y"; } |
|---|
| 56 | break; |
|---|
| 57 | } |
|---|
| 58 | } |
|---|
| 59 | } |
|---|
| 60 | |
|---|
| 61 | // Find the <script src="boilerplate.js"> tag, to get test directory and data-dojo-config argument |
|---|
| 62 | var scripts = document.getElementsByTagName("script"), script, testDir; |
|---|
| 63 | for(i = 0; script = scripts[i]; i++){ |
|---|
| 64 | var src = script.getAttribute("src"), |
|---|
| 65 | match = src && src.match(/(.*|^)boilerplate\.js/i); |
|---|
| 66 | if(match){ |
|---|
| 67 | // Sniff location of dijit/tests directory relative to this test file. testDir will be an empty string if it's |
|---|
| 68 | // the same directory, or a string including a slash, ex: "../", if the test is in a subdirectory. |
|---|
| 69 | testDir = match[1]; |
|---|
| 70 | |
|---|
| 71 | // Sniff configuration on attribute in script element. |
|---|
| 72 | // Allows syntax like <script src="boilerplate.js data-dojo-config="parseOnLoad: true">, where the settings |
|---|
| 73 | // specified override the default settings. |
|---|
| 74 | var attr = script.getAttribute("data-dojo-config"); |
|---|
| 75 | if(attr){ |
|---|
| 76 | var overrides = eval("({ " + attr + " })"); |
|---|
| 77 | for(var key in overrides){ |
|---|
| 78 | dojoConfig[key] = overrides[key]; |
|---|
| 79 | } |
|---|
| 80 | } |
|---|
| 81 | break; |
|---|
| 82 | } |
|---|
| 83 | } |
|---|
| 84 | |
|---|
| 85 | // Output the boilerplate text to load the theme CSS |
|---|
| 86 | if(theme){ |
|---|
| 87 | var themeDir = testDir + "../themes/" + theme + "/"; |
|---|
| 88 | document.write([ |
|---|
| 89 | '<style type="text/css">', |
|---|
| 90 | theme == "claro" ? '@import "' + themeDir + 'document.css";' : "", |
|---|
| 91 | '@import "' + testDir + 'css/dijitTests.css";', |
|---|
| 92 | '</style>', |
|---|
| 93 | '<link id="themeStyles" rel="stylesheet" href="' + themeDir + theme + '.css"/>' |
|---|
| 94 | ].join("\n")); |
|---|
| 95 | } |
|---|
| 96 | |
|---|
| 97 | // Output the boilerplate text to load the loader, and to do some initial manipulation when the page finishes loading |
|---|
| 98 | // For 2.0 this should be changed to require the loader (ex: requirejs) directly, rather than dojo.js. |
|---|
| 99 | document.write('<script type="text/javascript" src="' + testDir + '../../dojo/dojo.js"></script>'); |
|---|
| 100 | |
|---|
| 101 | // On IE9 the following inlined script will run before dojo has finished loading, leading to an error because require() |
|---|
| 102 | // isn't defined yet. Workaround it by putting the code in a separate file. |
|---|
| 103 | //document.write('<script type="text/javascript">require(["dojo/domReady!"], boilerplateOnLoad);</script>'); |
|---|
| 104 | document.write('<script type="text/javascript" src="' + testDir + 'boilerplateOnload.js"></script>'); |
|---|
| 105 | |
|---|
| 106 | function boilerplateOnLoad(){ |
|---|
| 107 | // This function is the first registered domReady() callback, allowing us to setup |
|---|
| 108 | // theme stuff etc. before the widgets start instantiating. |
|---|
| 109 | |
|---|
| 110 | // theme (claro, tundra, etc.) |
|---|
| 111 | if(theme){ |
|---|
| 112 | // Set <body> to point to the specified theme |
|---|
| 113 | document.body.className = theme; |
|---|
| 114 | } |
|---|
| 115 | |
|---|
| 116 | // a11y (flag for faux high-contrast testing) |
|---|
| 117 | if(testMode){ |
|---|
| 118 | document.body.className += " " + testMode; |
|---|
| 119 | } |
|---|
| 120 | |
|---|
| 121 | // BIDI |
|---|
| 122 | if(dir == "rtl"){ |
|---|
| 123 | // set dir=rtl on <html> node |
|---|
| 124 | document.body.parentNode.setAttribute("dir", "rtl"); |
|---|
| 125 | |
|---|
| 126 | require(["dojo/query!css2", "dojo/NodeList-dom"], function(query){ |
|---|
| 127 | // pretend all the labels are in an RTL language, because |
|---|
| 128 | // that affects how they lay out relative to inline form widgets |
|---|
| 129 | query("label").attr("dir", "rtl"); |
|---|
| 130 | }); |
|---|
| 131 | } |
|---|
| 132 | |
|---|
| 133 | // parseOnLoad: true requires that the parser itself be loaded. |
|---|
| 134 | if(dojoConfig.parseOnLoad){ |
|---|
| 135 | require(["dojo/parser"]); |
|---|
| 136 | } |
|---|
| 137 | } |
|---|
