index.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Accessible Blockly Demo</title>
  6. <!-- Load Blockly -->
  7. <script src="../../blockly_compressed.js"></script>
  8. <script src="../../blocks_compressed.js"></script>
  9. <script src="../../javascript_compressed.js"></script>
  10. <script src="../../msg/js/en.js"></script>
  11. <script src="../../msg/messages.js"></script>
  12. <script src="../../accessible/messages.js"></script>
  13. <!-- Load accessibleBlockly -->
  14. <script src="../../accessible/libs/es6-shim.min.js"></script>
  15. <script src="../../accessible/libs/angular2-polyfills.min.js"></script>
  16. <script src="../../accessible/libs/Rx.umd.min.js"></script>
  17. <script src="../../accessible/libs/angular2-all.umd.min.js"></script>
  18. <script src="../../accessible/utils.service.js"></script>
  19. <script src="../../accessible/clipboard.service.js"></script>
  20. <script src="../../accessible/tree.service.js"></script>
  21. <script src="../../accessible/translate.pipe.js"></script>
  22. <script src="../../accessible/field.component.js"></script>
  23. <script src="../../accessible/toolbox-tree.component.js"></script>
  24. <script src="../../accessible/toolbox.component.js"></script>
  25. <script src="../../accessible/workspace-tree.component.js"></script>
  26. <script src="../../accessible/workspace.component.js"></script>
  27. <script src="../../accessible/app.component.js"></script>
  28. <link rel="stylesheet" href="../../media/accessible.css">
  29. <style>
  30. body {
  31. background-color: #fff;
  32. font-family: sans-serif;
  33. }
  34. h1 {
  35. font-weight: normal;
  36. font-size: 140%;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  42. <a href="../index.html">Demos</a> &gt; Accessible Blockly</h1>
  43. <p>This is a simple demo of a version of Blockly designed for screen readers.</p>
  44. <!--
  45. <p>&rarr; More info on <a href="https://developers.google.com/blockly/">accessible Blockly</a>&hellip;</p>
  46. -->
  47. <blockly-app></blockly-app>
  48. <script>
  49. var ACCESSIBLE_GLOBALS = {
  50. // Additional buttons for the workspace toolbar that
  51. // go before the "Clear Workspace" button.
  52. toolbarButtonConfig: []
  53. };
  54. document.addEventListener('DOMContentLoaded', function() {
  55. ng.platform.browser.bootstrap(blocklyApp.AppView);
  56. });
  57. </script>
  58. <xml id="blockly-toolbox-xml" style="display: none">
  59. <category name="Logic" colour="210">
  60. <block type="controls_if"></block>
  61. <block type="logic_compare"></block>
  62. <block type="logic_operation"></block>
  63. <block type="logic_negate"></block>
  64. <block type="logic_boolean"></block>
  65. <block type="logic_null" disabled="true"></block>
  66. <block type="logic_ternary"></block>
  67. </category>
  68. <category name="Loops" colour="120">
  69. <block type="controls_repeat_ext">
  70. <value name="TIMES">
  71. <block type="math_number">
  72. <field name="NUM">10</field>
  73. </block>
  74. </value>
  75. </block>
  76. <block type="controls_repeat" disabled="true"></block>
  77. <block type="controls_whileUntil"></block>
  78. <block type="controls_for">
  79. <value name="FROM">
  80. <block type="math_number">
  81. <field name="NUM">1</field>
  82. </block>
  83. </value>
  84. <value name="TO">
  85. <block type="math_number">
  86. <field name="NUM">10</field>
  87. </block>
  88. </value>
  89. <value name="BY">
  90. <block type="math_number">
  91. <field name="NUM">1</field>
  92. </block>
  93. </value>
  94. </block>
  95. <block type="controls_forEach"></block>
  96. <block type="controls_flow_statements"></block>
  97. </category>
  98. <category name="Math" colour="230">
  99. <block type="math_number" gap="32"></block>
  100. <block type="math_arithmetic">
  101. <value name="A">
  102. <block type="math_number">
  103. <field name="NUM">1</field>
  104. </block>
  105. </value>
  106. <value name="B">
  107. <block type="math_number">
  108. <field name="NUM">1</field>
  109. </block>
  110. </value>
  111. </block>
  112. <block type="math_single">
  113. <value name="NUM">
  114. <block type="math_number">
  115. <field name="NUM">9</field>
  116. </block>
  117. </value>
  118. </block>
  119. <block type="math_trig">
  120. <value name="NUM">
  121. <block type="math_number">
  122. <field name="NUM">45</field>
  123. </block>
  124. </value>
  125. </block>
  126. <block type="math_constant"></block>
  127. <block type="math_number_property">
  128. <value name="NUMBER_TO_CHECK">
  129. <block type="math_number">
  130. <field name="NUM">0</field>
  131. </block>
  132. </value>
  133. </block>
  134. <block type="math_change">
  135. <value name="DELTA">
  136. <block type="math_number">
  137. <field name="NUM">1</field>
  138. </block>
  139. </value>
  140. </block>
  141. <block type="math_round">
  142. <value name="NUM">
  143. <block type="math_number">
  144. <field name="NUM">3.1</field>
  145. </block>
  146. </value>
  147. </block>
  148. <block type="math_on_list"></block>
  149. <block type="math_modulo">
  150. <value name="DIVIDEND">
  151. <block type="math_number">
  152. <field name="NUM">64</field>
  153. </block>
  154. </value>
  155. <value name="DIVISOR">
  156. <block type="math_number">
  157. <field name="NUM">10</field>
  158. </block>
  159. </value>
  160. </block>
  161. <block type="math_constrain">
  162. <value name="VALUE">
  163. <block type="math_number">
  164. <field name="NUM">50</field>
  165. </block>
  166. </value>
  167. <value name="LOW">
  168. <block type="math_number">
  169. <field name="NUM">1</field>
  170. </block>
  171. </value>
  172. <value name="HIGH">
  173. <block type="math_number">
  174. <field name="NUM">100</field>
  175. </block>
  176. </value>
  177. </block>
  178. <block type="math_random_int">
  179. <value name="FROM">
  180. <block type="math_number">
  181. <field name="NUM">1</field>
  182. </block>
  183. </value>
  184. <value name="TO">
  185. <block type="math_number">
  186. <field name="NUM">100</field>
  187. </block>
  188. </value>
  189. </block>
  190. <block type="math_random_float"></block>
  191. </category>
  192. <category name="Text" colour="160">
  193. <block type="text"></block>
  194. <block type="text_join"></block>
  195. <block type="text_append">
  196. <value name="TEXT">
  197. <block type="text"></block>
  198. </value>
  199. </block>
  200. <block type="text_length">
  201. <value name="VALUE">
  202. <block type="text">
  203. <field name="TEXT">abc</field>
  204. </block>
  205. </value>
  206. </block>
  207. <block type="text_isEmpty">
  208. <value name="VALUE">
  209. <block type="text">
  210. <field name="TEXT"></field>
  211. </block>
  212. </value>
  213. </block>
  214. <block type="text_indexOf">
  215. <value name="VALUE">
  216. <block type="variables_get">
  217. <field name="VAR">text</field>
  218. </block>
  219. </value>
  220. <value name="FIND">
  221. <block type="text">
  222. <field name="TEXT">abc</field>
  223. </block>
  224. </value>
  225. </block>
  226. <block type="text_charAt">
  227. <value name="VALUE">
  228. <block type="variables_get">
  229. <field name="VAR">text</field>
  230. </block>
  231. </value>
  232. </block>
  233. <block type="text_getSubstring">
  234. <value name="STRING">
  235. <block type="variables_get">
  236. <field name="VAR">text</field>
  237. </block>
  238. </value>
  239. </block>
  240. <block type="text_changeCase">
  241. <value name="TEXT">
  242. <block type="text">
  243. <field name="TEXT">abc</field>
  244. </block>
  245. </value>
  246. </block>
  247. <block type="text_trim">
  248. <value name="TEXT">
  249. <block type="text">
  250. <field name="TEXT">abc</field>
  251. </block>
  252. </value>
  253. </block>
  254. <block type="text_print">
  255. <value name="TEXT">
  256. <block type="text">
  257. <field name="TEXT">abc</field>
  258. </block>
  259. </value>
  260. </block>
  261. <block type="text_prompt_ext">
  262. <value name="TEXT">
  263. <block type="text">
  264. <field name="TEXT">abc</field>
  265. </block>
  266. </value>
  267. </block>
  268. </category>
  269. <category name="Lists" colour="260">
  270. <block type="lists_create_with">
  271. <mutation items="0"></mutation>
  272. </block>
  273. <block type="lists_create_with"></block>
  274. <block type="lists_repeat">
  275. <value name="NUM">
  276. <block type="math_number">
  277. <field name="NUM">5</field>
  278. </block>
  279. </value>
  280. </block>
  281. <block type="lists_length"></block>
  282. <block type="lists_isEmpty"></block>
  283. <block type="lists_indexOf">
  284. <value name="VALUE">
  285. <block type="variables_get">
  286. <field name="VAR">list</field>
  287. </block>
  288. </value>
  289. </block>
  290. <block type="lists_getIndex">
  291. <value name="VALUE">
  292. <block type="variables_get">
  293. <field name="VAR">list</field>
  294. </block>
  295. </value>
  296. </block>
  297. <block type="lists_setIndex">
  298. <value name="LIST">
  299. <block type="variables_get">
  300. <field name="VAR">list</field>
  301. </block>
  302. </value>
  303. </block>
  304. <block type="lists_getSublist">
  305. <value name="LIST">
  306. <block type="variables_get">
  307. <field name="VAR">list</field>
  308. </block>
  309. </value>
  310. </block>
  311. <block type="lists_split">
  312. <value name="DELIM">
  313. <block type="text">
  314. <field name="TEXT">,</field>
  315. </block>
  316. </value>
  317. </block>
  318. </category>
  319. <sep></sep>
  320. <category name="Variables" colour="330" custom="VARIABLE"></category>
  321. <category name="Functions" colour="290" custom="PROCEDURE"></category>
  322. </xml>
  323. </body>
  324. </html>