newdavinci-blockly
Version:
New daVinci Fork of Blockly
79 lines (69 loc) • 2.43 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Realtime Collaboration</title>
<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../msg/js/en.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<style>
body {
background-color: #fff;
font-family: sans-serif;
}
h1 {
font-weight: normal;
font-size: 140%;
}
#collaborators > img {
margin-right: 5px;
height: 30px;
padding-bottom: 5px;
width: 30px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1><a href="https://developers.google.com/blockly/">Blockly</a> >
<a href="../index.html">Demos</a> > Realtime Collaboration</h1>
<p>This is a simple demo of realtime collaboration in Blockly.</p>
<p>→ More info on
<a href="https://developers.google.com/blockly/realtime-collaboration">
realtime collaboration in Blockly</a>...</p>
<div id="collaborators"></div>
<div id="blocklyDiv"
style="height: 480px; width: 600px;">
</div>
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<p>Test realtime collaboration by opening
<a target="_blank" href="#" onmouseover="this.href = window.location.href">
this link</a> in a separate browser window or tab and they will be
synchronized. You can even share the link with a friend!.</p>
<br>
<br>
<!-- Text area that will be used for our collaborative chat box. -->
<textarea id="chatbox" style="width: 26%; height: 12em" disabled="true"></textarea>
<script>
// See https://developers.google.com/blockly/realtime-collaboration for how
// to set up your app for realtime collaboration and how to get the
// clientId that you need below.
Blockly.inject(document.getElementById('blocklyDiv'),
{toolbox: document.getElementById('toolbox'),
realtime: true,
realtimeOptions:
{clientId: 'YOUR CLIENT ID HERE',
chatbox: {elementId: 'chatbox'},
collabElementId: 'collaborators'}});
</script>
</body>
</html>