index.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Blockly Demo: Cloud Storage</title>
  6. <script src="/storage.js"></script>
  7. <script src="../../blockly_compressed.js"></script>
  8. <script src="../../blocks_compressed.js"></script>
  9. <script src="../../msg/js/en.js"></script>
  10. <style>
  11. body {
  12. background-color: #fff;
  13. font-family: sans-serif;
  14. }
  15. h1 {
  16. font-weight: normal;
  17. font-size: 140%;
  18. }
  19. #sorry {
  20. padding: 1ex;
  21. background-color: #f9edbe;
  22. border: solid 1px #f0c36d;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  28. <a href="../index.html">Demos</a> &gt; Cloud Storage</h1>
  29. <p>This is a simple demo of cloud storage using App Engine.</p>
  30. <script>
  31. if ('BlocklyStorage' in window) {
  32. BlocklyStorage.HTTPREQUEST_ERROR = 'There was a problem with the request.\n';
  33. BlocklyStorage.LINK_ALERT = 'Share your blocks with this link:\n\n%1';
  34. BlocklyStorage.HASH_ERROR = 'Sorry, "%1" doesn\'t correspond with any saved Blockly file.';
  35. BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n'+
  36. 'Perhaps it was created with a different version of Blockly?';
  37. } else {
  38. document.write('<p id="sorry">Sorry, cloud storage is not available. This demo must be hosted on App Engine.</p>');
  39. }
  40. </script>
  41. <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/cloud-storage">Cloud Storage</a>&hellip;</p>
  42. <p>
  43. <button onclick="BlocklyStorage.link()">Save Blocks</button>
  44. </p>
  45. <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  46. <xml id="toolbox" style="display: none">
  47. <category name="Logic">
  48. <block type="controls_if"></block>
  49. <block type="logic_compare"></block>
  50. <block type="logic_operation"></block>
  51. <block type="logic_negate"></block>
  52. <block type="logic_boolean"></block>
  53. </category>
  54. <category name="Loops">
  55. <block type="controls_repeat_ext">
  56. <value name="TIMES">
  57. <block type="math_number">
  58. <field name="NUM">10</field>
  59. </block>
  60. </value>
  61. </block>
  62. <block type="controls_whileUntil"></block>
  63. </category>
  64. <category name="Math">
  65. <block type="math_number"></block>
  66. <block type="math_arithmetic"></block>
  67. <block type="math_single"></block>
  68. </category>
  69. <category name="Text">
  70. <block type="text"></block>
  71. <block type="text_length"></block>
  72. <block type="text_print"></block>
  73. </category>
  74. </xml>
  75. <script>
  76. var workspace = Blockly.inject('blocklyDiv',
  77. {media: '../../media/',
  78. toolbox: document.getElementById('toolbox')});
  79. // An href with #key trigers an AJAX call to retrieve saved blocks.
  80. if ('BlocklyStorage' in window && window.location.hash.length > 1) {
  81. BlocklyStorage.retrieveXml(window.location.hash.substring(1));
  82. }
  83. </script>
  84. </body>
  85. </html>