mirror of
https://github.com/google/blockly.git
synced 2026-01-19 14:57:12 +01:00
9e69fa9491
Since blockly.mjs is no longer returning just the exports object from core/blockly.js (see PR #5995), it might be better named after its actual purpose: to wait for bootstrapping to be done. Remove all the code that was used to pass the blockly.js exports object along from the bootstrap callback to the blockly.mjs export, since there's no reason to go to a lot of trouble to set a local variable named Blockly to the same value as a global variable named Blockly. (Something like this may be needed again in future, but certainly in a different form.)
492 lines
14 KiB
HTML
492 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Multi-toolbox Playground</title>
|
|
|
|
<!-- This script loads uncompressed when on localhost and loads
|
|
compressed when it is being hosted or on Internet Explorer. -->
|
|
<script src="bootstrap.js"></script>
|
|
<script type=module>
|
|
// Wait for Blockly to finish loading.
|
|
import './bootstrap_done.mjs';
|
|
|
|
const IS_UNCOMPRESSED = Boolean(window.BlocklyLoader); // See bootstrap.js
|
|
|
|
var options = {
|
|
comments: true,
|
|
collapse: true,
|
|
disable: true,
|
|
maxBlocks: Infinity,
|
|
media: '../media/',
|
|
oneBasedIndex: true,
|
|
readOnly: false,
|
|
//rtl: false,
|
|
scrollbars: true,
|
|
trashcan: true,
|
|
//toolbox: null,
|
|
//horizontalLayout: false,
|
|
//toolboxPosition: 'start',
|
|
zoom: {
|
|
controls: true,
|
|
wheel: false,
|
|
startScale: 1.0,
|
|
maxScale: 4,
|
|
minScale: 0.25,
|
|
scaleSpeed: 1.1
|
|
}
|
|
};
|
|
|
|
function start() {
|
|
setBackgroundColour();
|
|
var match = location.search.match(/toolbox=([^&]+)/);
|
|
var toolbox =
|
|
document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
|
|
document.forms.options.elements.toolbox.selectedIndex =
|
|
Number(toolbox.getElementsByTagName('category').length == 0);
|
|
startBlocklyInstance('VertStartLTR', false, false, 'start', toolbox);
|
|
startBlocklyInstance('VertStartRTL', true, false, 'start', toolbox);
|
|
|
|
startBlocklyInstance('VertEndLTR', false, false, 'end', toolbox);
|
|
startBlocklyInstance('VertEndRTL', true, false, 'end', toolbox);
|
|
|
|
startBlocklyInstance('HorizontalStartLTR', false, true, 'start', toolbox);
|
|
startBlocklyInstance('HorizontalStartRTL', true, true, 'start', toolbox);
|
|
|
|
startBlocklyInstance('HorizontalEndLTR', false, true, 'end', toolbox);
|
|
startBlocklyInstance('HorizontalEndRTL', true, true, 'end', toolbox);
|
|
}
|
|
|
|
function startBlocklyInstance(suffix, rtl, horizontalLayout, position,
|
|
toolbox) {
|
|
options.rtl = rtl;
|
|
options.toolbox = toolbox;
|
|
options.horizontalLayout = horizontalLayout;
|
|
options.toolboxPosition = position;
|
|
Blockly.inject('blocklyDiv' + suffix, 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.
|
|
}
|
|
}
|
|
|
|
// Call start(). Because this <script> has type=module, it is
|
|
// automatically deferred, so it will not be run until after the
|
|
// document has been parsed, but before firing DOMContentLoaded.
|
|
start();
|
|
|
|
</script>
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
|
|
#octaweb {
|
|
width: 100%;
|
|
}
|
|
#octaweb th {
|
|
padding-top: 1em;
|
|
width: 50%;
|
|
}
|
|
#octaweb td {
|
|
width: 50%;
|
|
}
|
|
#octaweb td >div {
|
|
height: 480px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Blockly Multi Playground</h1>
|
|
|
|
<form id="options">
|
|
<select name="toolbox" onchange="document.forms.options.submit()">
|
|
<option value="categories">Categories</option>
|
|
<option value="simple">Simple</option>
|
|
</select>
|
|
</form>
|
|
|
|
<table id="octaweb">
|
|
<tr>
|
|
<th>LTR, Vertical, Start</th>
|
|
<th>RTL, Vertical, Start</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivVertStartLTR"></div></td>
|
|
<td><div id="blocklyDivVertStartRTL"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<th>LTR, Vertical, End</th>
|
|
<th>RTL, Vertical, End</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivVertEndLTR"></div></td>
|
|
<td><div id="blocklyDivVertEndRTL"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<th>LTR, Horizontal, Start</th>
|
|
<th>RTL, Horizontal, Start</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivHorizontalStartLTR"></div></td>
|
|
<td><div id="blocklyDivHorizontalStartRTL"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<th>LTR, Horizontal, End</th>
|
|
<th>RTL, Horizontal, End</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivHorizontalEndLTR"></div></td>
|
|
<td><div id="blocklyDivHorizontalEndRTL"></div></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-simple" style="display: none">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<!-- <block type="control_repeat"></block> -->
|
|
<block type="logic_operation"></block>
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
<block type="logic_null" disabled="true"></block>
|
|
<block type="logic_ternary"></block>
|
|
</xml>
|
|
|
|
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-categories" style="display: none">
|
|
<category name="Logic" categorystyle="logic_category">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
<block type="logic_null" disabled="true"></block>
|
|
<block type="logic_ternary"></block>
|
|
</category>
|
|
<category name="Loops" categorystyle="loop_category">
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="controls_repeat" disabled="true"></block>
|
|
<block type="controls_whileUntil"></block>
|
|
<block type="controls_for">
|
|
<value name="FROM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="TO">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="BY">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="controls_forEach"></block>
|
|
<block type="controls_flow_statements"></block>
|
|
</category>
|
|
<category name="Math" categorystyle="math_category">
|
|
<block type="math_number" gap="32">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic">
|
|
<value name="A">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="B">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_single">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">9</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_trig">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">45</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_constant"></block>
|
|
<block type="math_number_property">
|
|
<value name="NUMBER_TO_CHECK">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_round">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">3.1</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_on_list"></block>
|
|
<block type="math_modulo">
|
|
<value name="DIVIDEND">
|
|
<shadow type="math_number">
|
|
<field name="NUM">64</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="DIVISOR">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_constrain">
|
|
<value name="VALUE">
|
|
<shadow type="math_number">
|
|
<field name="NUM">50</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="LOW">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="HIGH">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_int">
|
|
<value name="FROM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="TO">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_float"></block>
|
|
<block type="math_atan2">
|
|
<value name="X">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="Y">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Text" categorystyle="text_category">
|
|
<block type="text"></block>
|
|
<block type="text_multiline"></block>
|
|
<block type="text_join"></block>
|
|
<block type="text_append">
|
|
<value name="TEXT">
|
|
<shadow type="text"></shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_length">
|
|
<value name="VALUE">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_isEmpty">
|
|
<value name="VALUE">
|
|
<shadow type="text">
|
|
<field name="TEXT"></field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_indexOf">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
<value name="FIND">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_charAt">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_getSubstring">
|
|
<value name="STRING">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_changeCase">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_trim">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_print">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_prompt_ext">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Lists" categorystyle="list_category">
|
|
<block type="lists_create_with">
|
|
<mutation items="0"></mutation>
|
|
</block>
|
|
<block type="lists_create_with"></block>
|
|
<block type="lists_repeat">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">5</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="lists_length"></block>
|
|
<block type="lists_isEmpty"></block>
|
|
<block type="lists_indexOf">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_getIndex">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_setIndex">
|
|
<value name="LIST">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_getSublist">
|
|
<value name="LIST">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_split">
|
|
<value name="DELIM">
|
|
<shadow type="text">
|
|
<field name="TEXT">,</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="lists_sort"></block>
|
|
</category>
|
|
<category name="Colour" categorystyle="colour_category">
|
|
<block type="colour_picker"></block>
|
|
<block type="colour_random"></block>
|
|
<block type="colour_rgb">
|
|
<value name="RED">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="GREEN">
|
|
<shadow type="math_number">
|
|
<field name="NUM">50</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="BLUE">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="colour_blend">
|
|
<value name="COLOUR1">
|
|
<shadow type="colour_picker">
|
|
<field name="COLOUR">#ff0000</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="COLOUR2">
|
|
<shadow type="colour_picker">
|
|
<field name="COLOUR">#3333ff</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="RATIO">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0.5</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<sep></sep>
|
|
<category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
|
|
<category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
|
|
</xml>
|
|
</body>
|
|
</html>
|