index.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Blockly Demo: Realtime Collaboration</title>
  6. <script src="../../blockly_compressed.js"></script>
  7. <script src="../../blocks_compressed.js"></script>
  8. <script src="../../msg/js/en.js"></script>
  9. <script src="https://apis.google.com/js/api.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. #collaborators > img {
  20. margin-right: 5px;
  21. height: 30px;
  22. padding-bottom: 5px;
  23. width: 30px;
  24. border-radius: 3px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  30. <a href="../index.html">Demos</a> &gt; Realtime Collaboration</h1>
  31. <p>This is a simple demo of realtime collaboration in Blockly.</p>
  32. <p>&rarr; More info on
  33. <a href="https://developers.google.com/blockly/realtime-collaboration">
  34. realtime collaboration in Blockly</a>...</p>
  35. <div id="collaborators"></div>
  36. <div id="blocklyDiv"
  37. style="height: 480px; width: 600px;">
  38. </div>
  39. <xml id="toolbox" style="display: none">
  40. <block type="controls_if"></block>
  41. <block type="controls_repeat_ext"></block>
  42. <block type="logic_compare"></block>
  43. <block type="math_number"></block>
  44. <block type="math_arithmetic"></block>
  45. <block type="text"></block>
  46. <block type="text_print"></block>
  47. </xml>
  48. <p>Test realtime collaboration by opening
  49. <a target="_blank" href="#" onmouseover="this.href = window.location.href">
  50. this link</a> in a separate browser window or tab and they will be
  51. synchronized. You can even share the link with a friend!.</p>
  52. <br>
  53. <br>
  54. <!-- Text area that will be used for our collaborative chat box. -->
  55. <textarea id="chatbox" style="width: 26%; height: 12em" disabled="true"></textarea>
  56. <script>
  57. // See https://developers.google.com/blockly/realtime-collaboration for how
  58. // to set up your app for realtime collaboration and how to get the
  59. // clientId that you need below.
  60. Blockly.inject(document.getElementById('blocklyDiv'),
  61. {toolbox: document.getElementById('toolbox'),
  62. realtime: true,
  63. realtimeOptions:
  64. {clientId: 'YOUR CLIENT ID HERE',
  65. chatbox: {elementId: 'chatbox'},
  66. collabElementId: 'collaborators'}});
  67. </script>
  68. </body>
  69. </html>