mirror of
https://github.com/google/blockly.git
synced 2026-01-18 22:37:09 +01:00
5c541c6f99
Using 123 as a better indicator to the user this block can represent any number, and the user should replace this value with their own desired number.
96 lines
2.6 KiB
HTML
96 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Blockly Demo: Resizable Blockly (Part 2)</title>
|
|
<script src="../../blockly_compressed.js"></script>
|
|
<script src="../../blocks_compressed.js"></script>
|
|
<script src="../../msg/js/en.js"></script>
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
table {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#blocklyArea {
|
|
height: 99%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h1><a href="https://developers.google.com/blockly/">Blockly</a> >
|
|
<a href="../index.html">Demos</a> > Resizable Blockly (Part 2)</h1>
|
|
|
|
<p>
|
|
Once an <a href="index.html">area is defined</a>, Blockly can be
|
|
injected and positioned over the area.
|
|
A resize handler keeps it in position as the page changes.
|
|
</p>
|
|
|
|
<p>→ More info on <a href="https://developers.google.com/blockly/guides/configure/web/resizable">injecting resizable Blockly</a>…</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td id="blocklyArea">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div id="blocklyDiv" style="position: absolute"></div>
|
|
|
|
<xml id="toolbox" style="display: none">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="controls_repeat_ext"></block>
|
|
<block type="math_number">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic"></block>
|
|
<block type="text"></block>
|
|
<block type="text_print"></block>
|
|
</xml>
|
|
|
|
<script>
|
|
var blocklyArea = document.getElementById('blocklyArea');
|
|
var blocklyDiv = document.getElementById('blocklyDiv');
|
|
var demoWorkspace = Blockly.inject(blocklyDiv,
|
|
{media: '../../media/',
|
|
toolbox: document.getElementById('toolbox')});
|
|
var onresize = function(e) {
|
|
// Compute the absolute coordinates and dimensions of blocklyArea.
|
|
var element = blocklyArea;
|
|
var x = 0;
|
|
var y = 0;
|
|
do {
|
|
x += element.offsetLeft;
|
|
y += element.offsetTop;
|
|
element = element.offsetParent;
|
|
} while (element);
|
|
// Position blocklyDiv over blocklyArea.
|
|
blocklyDiv.style.left = x + 'px';
|
|
blocklyDiv.style.top = y + 'px';
|
|
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
|
|
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
|
|
};
|
|
window.addEventListener('resize', onresize, false);
|
|
onresize();
|
|
Blockly.svgResize(demoWorkspace);
|
|
</script>
|
|
</body>
|
|
</html>
|