mirror of
https://github.com/google/blockly.git
synced 2026-01-10 02:17:09 +01:00
817ffab754
Refactor bootstrap.js and bootstrap_helper.js to be able to deal with generator chunks. In particular for each chunk, specify: - The goog.module ID to goog.require() in uncompressed mode. - The script filename to load in compressed mode. - Where the chunk's UMD wrapper will save the export object when loaded as a script. - What global variable the chunk's export object should be saved in (if desired). - Any individual named exports to destructure to global variables. This allows the bootstrap scripts to be slightly simpler while also being more flexible.
179 lines
4.4 KiB
HTML
179 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Shared Procedures Playground</title>
|
|
|
|
<!-- This script loads uncompressed when on localhost and loads
|
|
compressed when it is being hosted or on Internet Explorer. -->
|
|
<script>
|
|
var BLOCKLY_BOOTSTRAP_OPTIONS = {
|
|
scripts: [
|
|
'build/msg/en.js',
|
|
'node_modules/@blockly/dev-tools/dist/index.js',
|
|
],
|
|
};
|
|
</script>
|
|
<script src="../bootstrap.js"></script>
|
|
<script type="module">
|
|
// Wait for Blockly to finish loading.
|
|
import '../bootstrap_done.mjs';
|
|
|
|
const IS_UNCOMPRESSED = !window.bootstrapInfo.compressed; // See bootstrap.js
|
|
var workspace = null;
|
|
|
|
function start() {
|
|
setBackgroundColour();
|
|
|
|
var toolbox = {
|
|
'kind': 'categoryToolbox',
|
|
'contents': [
|
|
{
|
|
'kind': 'category',
|
|
'name': 'Other Blocks',
|
|
'categorystyle': 'logic_category',
|
|
'contents': [
|
|
{
|
|
'kind': 'block',
|
|
'type': 'controls_if',
|
|
},
|
|
{
|
|
'kind': 'block',
|
|
'type': 'logic_operation',
|
|
},
|
|
{
|
|
'kind': 'block',
|
|
'type': 'logic_negate',
|
|
},
|
|
{
|
|
'kind': 'block',
|
|
'type': 'logic_boolean',
|
|
},
|
|
{
|
|
'kind': 'block',
|
|
'type': 'text_print',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
'kind': 'category',
|
|
'name': 'Variables',
|
|
'categorystyle': 'variable_category',
|
|
'custom': 'VARIABLE',
|
|
},
|
|
{
|
|
'kind': 'category',
|
|
'name': 'Procedures',
|
|
'categorystyle': 'procedure_category',
|
|
'custom': 'PROCEDURE',
|
|
},
|
|
],
|
|
};
|
|
var options = {
|
|
comments: true,
|
|
collapse: true,
|
|
disable: true,
|
|
grid: {
|
|
spacing: 25,
|
|
length: 3,
|
|
colour: '#ccc',
|
|
snap: true,
|
|
},
|
|
horizontalLayout: false,
|
|
maxBlocks: Infinity,
|
|
maxInstances: {'test_basic_limit_instances': 3},
|
|
maxTrashcanContents: 256,
|
|
media: '../../media/',
|
|
oneBasedIndex: true,
|
|
readOnly: false,
|
|
rtl: false,
|
|
move: {
|
|
scrollbars: true,
|
|
drag: true,
|
|
wheel: false,
|
|
},
|
|
toolbox: toolbox,
|
|
toolboxPosition: 'start',
|
|
renderer: 'geras',
|
|
zoom: {
|
|
controls: true,
|
|
wheel: true,
|
|
startScale: 1.0,
|
|
maxScale: 4,
|
|
minScale: 0.25,
|
|
scaleSpeed: 1.1,
|
|
},
|
|
};
|
|
workspace = Blockly.inject('blocklyDiv1', options);
|
|
workspace = Blockly.inject('blocklyDiv2', options);
|
|
}
|
|
|
|
function setBackgroundColour() {
|
|
// Set background colour to differentiate between compressed and uncompressed mode.
|
|
if (IS_UNCOMPRESSED) {
|
|
document.body.style.backgroundColor = '#d6d6ff'; // Familiar lilac.
|
|
} else {
|
|
document.body.style.backgroundColor = '#60fcfc'; // Unfamiliar blue.
|
|
}
|
|
}
|
|
|
|
start();
|
|
</script>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
#blocklyDiv1 {
|
|
float: left;
|
|
height: 95%;
|
|
width: 49%;
|
|
}
|
|
#blocklyDiv2 {
|
|
float: right;
|
|
height: 95%;
|
|
width: 49%;
|
|
}
|
|
#importExport {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.ioLabel > .blocklyFlyoutLabelText {
|
|
font-style: italic;
|
|
}
|
|
|
|
#blocklyDiv.renderingDebug .blockRenderDebug {
|
|
display: block;
|
|
}
|
|
|
|
.playgroundToggleOptions {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.playgroundToggleOptions li {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.zelos-renderer .blocklyFlyoutButton .blocklyText {
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Shared Procedures Playground</h1>
|
|
|
|
<div id="blocklyDiv1"></div>
|
|
<div id="blocklyDiv2"></div>
|
|
</body>
|
|
</html>
|