mirror of
https://github.com/google/blockly.git
synced 2026-01-07 09:00:11 +01:00
Change label of block factory to blockly developer tools. Change the icon too. Also remove old, unneeded index.html file from workspacefactory directory. (#694)
This commit is contained in:
picklesrus
GitHub
BIN
demos/blockfactory/devtools.png
Normal file
BIN
demos/blockfactory/devtools.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -43,7 +43,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body onbeforeunload="return blocklyFactory.confirmLeavePage()">
|
<body onbeforeunload="return blocklyFactory.confirmLeavePage()">
|
||||||
<h1><a href="https://developers.google.com/blockly/">Blockly</a> >
|
<h1><a href="https://developers.google.com/blockly/">Blockly</a> >
|
||||||
<a href="../index.html">Demos</a> > Blockly Factory
|
<a href="../index.html">Demos</a> > Blockly Developer Tools
|
||||||
<button id="helpButton" title="View documentation in new window.">
|
<button id="helpButton" title="View documentation in new window.">
|
||||||
<span>Help</span>
|
<span>Help</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,769 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<title>Blockly Workspace Factory</title>
|
|
||||||
<script src="../../../blockly_compressed.js"></script>
|
|
||||||
<script src="../../../javascript_compressed.js"></script>
|
|
||||||
<script src="../../../msg/messages.js"></script>
|
|
||||||
<script src="../../../blocks_compressed.js"></script>
|
|
||||||
<script src="wfactory_model.js"></script>
|
|
||||||
<script src="wfactory_controller.js"></script>
|
|
||||||
<script src="wfactory_view.js"></script>
|
|
||||||
<script src="wfactory_generator.js"></script>
|
|
||||||
<script src="standard_categories.js"></script>
|
|
||||||
<script src="../../../../closure-library/closure/goog/base.js"></script>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
goog.require('goog.ui.PopupColorPicker');
|
|
||||||
goog.require('goog.ui.ColorPicker');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<table width="100%" height="100%">
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<h1><a href="https://developers.google.com/blockly/">Blockly</a>‏ >
|
|
||||||
<a href="../index.html">Demos</a>‏ >
|
|
||||||
<span id="title">Workspace Factory</span>
|
|
||||||
</h1>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p>
|
|
||||||
<div class="dropdown">
|
|
||||||
<button id="button_import">Import</button>
|
|
||||||
<div id="dropdownDiv_import" class="dropdown-content">
|
|
||||||
<input type="file" id="input_importToolbox" class="inputfile"></input>
|
|
||||||
<label for="input_importToolbox">Toolbox</label>
|
|
||||||
<input type="file" id="input_importPreload" class="inputfile"></input>
|
|
||||||
<label for="input_importPreload">Workspace Blocks</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dropdown">
|
|
||||||
<button id="button_export">Export</button>
|
|
||||||
<div id="dropdownDiv_export" class="dropdown-content">
|
|
||||||
<a id='dropdown_exportToolbox'>Toolbox</a>
|
|
||||||
<a id='dropdown_exportPreload'>Workspace Blocks</a>
|
|
||||||
<a id='dropdown_exportOptions'>Inject Options</a>
|
|
||||||
<a id='dropdown_exportAll'>All</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="button_print">Print Toolbox</button>
|
|
||||||
<button id="button_clear">Clear Toolbox</button>
|
|
||||||
</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<section id="createDiv">
|
|
||||||
<p id="editHelpText">Drag blocks into your toolbox:</p>
|
|
||||||
<table id='workspaceTabs'>
|
|
||||||
<td id="tab_toolbox" class="tabon">Toolbox</td>
|
|
||||||
<td id="tab_preload" class="taboff">Workspace</td>
|
|
||||||
</table>
|
|
||||||
<section id="toolbox_section">
|
|
||||||
<div id="toolbox_blocks" class="content"></div>
|
|
||||||
<div id='disable_div'></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<aside id="toolbox_div">
|
|
||||||
<table id="categoryTable">
|
|
||||||
<td id="tab_help">Your categories will appear here</td>
|
|
||||||
</table>
|
|
||||||
<p> </p>
|
|
||||||
|
|
||||||
<div class='dropdown'>
|
|
||||||
<button id="button_add">+</button>
|
|
||||||
<div id="dropdownDiv_add" class="dropdown-content">
|
|
||||||
<a id='dropdown_newCategory'>New Category</a>
|
|
||||||
<a id='dropdown_loadCategory'>Standard Category</a>
|
|
||||||
<a id='dropdown_separator'>Separator</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="button_remove">-</button>
|
|
||||||
|
|
||||||
<button id="button_up">↑</button>
|
|
||||||
<button id="button_down">↓</button>
|
|
||||||
|
|
||||||
<p> </p>
|
|
||||||
<div class='dropdown'>
|
|
||||||
<button id="button_editCategory">Edit Category</button>
|
|
||||||
<div id="dropdownDiv_editCategory" class="dropdown-content">
|
|
||||||
<a id='dropdown_name'>Name</a>
|
|
||||||
<a id='dropdown_color'>Color</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div class='dropdown'>
|
|
||||||
<button id="button_editShadow">Edit Block</button>
|
|
||||||
<div id="dropdownDiv_editShadowAdd" class="dropdown-content">
|
|
||||||
<a id='dropdown_addShadow'>Add Shadow</a>
|
|
||||||
</div>
|
|
||||||
<div id="dropdownDiv_editShadowRemove" class="dropdown-content">
|
|
||||||
<a id='dropdown_removeShadow'>Remove Shadow</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside id='preload_div' style='display:none'>
|
|
||||||
<p>Configure the <a href="https://developers.google.com/blockly/guides/get-started/web">options</a> for your Blockly inject call.</p>
|
|
||||||
<button class="small" id="button_standardOptions">Standard Options</button>
|
|
||||||
<form id="workspace_options">
|
|
||||||
<input type="checkbox" id="option_collapse_checkbox" name="collapse">Collapsible Blocks<br>
|
|
||||||
<input type="checkbox" id="option_comments_checkbox" name="comments">Comments for Blocks<br>
|
|
||||||
<input type="checkbox" id="option_css_checkbox" name="css">Use Blockly CSS<br>
|
|
||||||
<input type="checkbox" id="option_disable_checkbox" name="disable">Disabled Blocks<br>
|
|
||||||
<input type="checkbox" id="option_grid_checkbox" name="grid">Use Grid<br>
|
|
||||||
<div id="grid_options" name="grid" style="display:none">
|
|
||||||
Spacing <input type="text" id="gridOption_spacing_text" name="spacing" value="0"><br>
|
|
||||||
Length <input type="text" id="gridOption_length_text" name="length" value="1"><br>
|
|
||||||
Color <input type="text" id="gridOption_colour_text" name="colour" value="#888"><br>
|
|
||||||
<input type="checkbox" id="gridOption_snap_checkbox" value="grid_snap_checkbox" name="snap">Snap<br>
|
|
||||||
</div>
|
|
||||||
Max Blocks <input type="text" id="option_maxBlocks_text" name="maxBlocks" value="Infinity"><br>
|
|
||||||
Path to Blockly Media <input type="text" id="option_media_text" name="media"><br>
|
|
||||||
<input type="checkbox" id="option_readOnly_checkbox" name="readOnly">Read Only<br>
|
|
||||||
<input type="checkbox" id="option_rtl_checkbox" name="rtl">Layout with RTL<br>
|
|
||||||
<input type="checkbox" id="option_scrollbars_checkbox" name="scrollbars">Scrollbars<br>
|
|
||||||
<input type="checkbox" id="option_sounds_checkbox" name="sounds">Sounds<br>
|
|
||||||
<input type="checkbox" id="option_trashcan_checkbox" name="trashcan">Trashcan<br>
|
|
||||||
<input type="checkbox" id="option_zoom_checkbox" name="zoom">Zoom<br>
|
|
||||||
<div id="zoom_options" name="zoom" style="display:none">
|
|
||||||
<input type="checkbox" id="zoomOption_controls_checkbox" name="controls">Zoom Controls<br>
|
|
||||||
<input type="checkbox" id="zoomOption_wheel_checkbox" name="wheel">Zoom Wheel<br>
|
|
||||||
Start Scale <input type="text" id="zoomOption_startScale_text" name="startScale" value="1.0"><br>
|
|
||||||
Max Scale <input type="text" id="zoomOption_maxScale_text" name="maxScale" value="3"><br>
|
|
||||||
Min Scale <input type="text" id="zoomOption_minScale_text" name="minScale" value="0.3"><br>
|
|
||||||
Scale Speed <input type="text" id="zoomOption_scaleSpeed_text" name="scaleSpeed" value="1.2"><br>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<aside id="previewDiv">
|
|
||||||
<p>Preview your workspace:</p>
|
|
||||||
<div id="preview_blocks" class="content"></div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<xml id="toolbox" style="display: none">
|
|
||||||
<category name="Logic" colour="210">
|
|
||||||
<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"></block>
|
|
||||||
<block type="logic_ternary"></block>
|
|
||||||
</category>
|
|
||||||
<category name="Loops" colour="120">
|
|
||||||
<block type="controls_repeat_ext">
|
|
||||||
<value name="TIMES">
|
|
||||||
<shadow type="math_number">
|
|
||||||
<field name="NUM">10</field>
|
|
||||||
</shadow>
|
|
||||||
</value>
|
|
||||||
</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" colour="230">
|
|
||||||
<block type="math_number"></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_change">
|
|
||||||
<value name="DELTA">
|
|
||||||
<shadow type="math_number">
|
|
||||||
<field name="NUM">1</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>
|
|
||||||
</category>
|
|
||||||
<category name="Text" colour="160">
|
|
||||||
<block type="text"></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" colour="260">
|
|
||||||
<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" colour="20">
|
|
||||||
<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" colour="330" custom="VARIABLE"></category>
|
|
||||||
<category name="Functions" colour="290" custom="PROCEDURE"></category>
|
|
||||||
</xml>
|
|
||||||
<script type="text/javascript">
|
|
||||||
// Create empty workspace for configuring workspace.
|
|
||||||
var toolboxWorkspace = Blockly.inject('toolbox_blocks',
|
|
||||||
{grid:
|
|
||||||
{spacing: 25,
|
|
||||||
length: 3,
|
|
||||||
colour: '#ccc',
|
|
||||||
snap: true},
|
|
||||||
media: '../../../media/',
|
|
||||||
toolbox: toolbox,
|
|
||||||
});
|
|
||||||
// Create empty workspace for previewing created workspace.
|
|
||||||
var previewWorkspace = Blockly.inject('preview_blocks',
|
|
||||||
{grid:
|
|
||||||
{spacing: 25,
|
|
||||||
length: 3,
|
|
||||||
colour: '#ccc',
|
|
||||||
snap: true},
|
|
||||||
media: '../../../media/',
|
|
||||||
toolbox: '<xml></xml>',
|
|
||||||
zoom:
|
|
||||||
{controls: true,
|
|
||||||
wheel: true}
|
|
||||||
});
|
|
||||||
|
|
||||||
var controller = new WorkspaceFactoryController(toolboxWorkspace, previewWorkspace);
|
|
||||||
|
|
||||||
// Wrappers to attach buttons to method calls for the controller object
|
|
||||||
var addWrapper = function() {
|
|
||||||
document.getElementById('dropdownDiv_add').classList.toggle("show");
|
|
||||||
};
|
|
||||||
var newCategoryWrapper = function() {
|
|
||||||
controller.addCategory();
|
|
||||||
document.getElementById('dropdownDiv_add').classList.remove("show");
|
|
||||||
};
|
|
||||||
var loadCategoryWrapper = function() {
|
|
||||||
controller.loadCategory();
|
|
||||||
document.getElementById('dropdownDiv_add').classList.remove("show");
|
|
||||||
};
|
|
||||||
var separatorWrapper = function() {
|
|
||||||
controller.addSeparator();
|
|
||||||
document.getElementById('dropdownDiv_add').classList.remove("show");
|
|
||||||
};
|
|
||||||
var removeWrapper = function() {
|
|
||||||
controller.removeElement();
|
|
||||||
};
|
|
||||||
var exportWrapper = function() {
|
|
||||||
document.getElementById('dropdownDiv_export').classList.toggle("show");
|
|
||||||
document.getElementById('dropdownDiv_import').classList.remove("show");
|
|
||||||
};
|
|
||||||
var printWrapper = function() {
|
|
||||||
controller.printConfig();
|
|
||||||
};
|
|
||||||
var upWrapper = function() {
|
|
||||||
controller.moveElement(-1);
|
|
||||||
};
|
|
||||||
var downWrapper = function() {
|
|
||||||
controller.moveElement(1);
|
|
||||||
};
|
|
||||||
var editCategoryWrapper = function() {
|
|
||||||
document.getElementById('dropdownDiv_editCategory').classList.toggle("show");
|
|
||||||
};
|
|
||||||
var nameWrapper = function() {
|
|
||||||
controller.changeCategoryName();
|
|
||||||
document.getElementById('dropdownDiv_editCategory').classList.remove("show");
|
|
||||||
};
|
|
||||||
var shadowAddWrapper = function() {
|
|
||||||
controller.addShadow();
|
|
||||||
document.getElementById('dropdownDiv_editShadowAdd').classList.remove("show");
|
|
||||||
};
|
|
||||||
var shadowRemoveWrapper = function() {
|
|
||||||
controller.removeShadow();
|
|
||||||
document.getElementById('dropdownDiv_editShadowRemove').classList.remove("show");
|
|
||||||
// If turning invalid shadow block back to normal block, remove warning and disable
|
|
||||||
// block editing privileges.
|
|
||||||
Blockly.selected.setWarningText(null);
|
|
||||||
if (!Blockly.selected.getSurroundParent()) {
|
|
||||||
document.getElementById('button_editShadow').disabled = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var editShadowWrapper = function() {
|
|
||||||
if (Blockly.selected) {
|
|
||||||
// Can only edit blocks when a block is selected.
|
|
||||||
|
|
||||||
if (!controller.isUserGenShadowBlock(Blockly.selected.id) && Blockly.selected.getSurroundParent() != null) {
|
|
||||||
// If a block is selected that could be a valid shadow block (not a shadow block,
|
|
||||||
// has a surrounding parent), let the user make it a shadow block.
|
|
||||||
// Use toggle instead of add so that the user can click the button again
|
|
||||||
// to make the dropdown disappear without clicking one of the options.
|
|
||||||
document.getElementById('dropdownDiv_editShadowRemove').classList.remove("show");
|
|
||||||
document.getElementById('dropdownDiv_editShadowAdd').classList.toggle("show");
|
|
||||||
} else {
|
|
||||||
// If the block is a shadow block, let the user make it a normal block.
|
|
||||||
document.getElementById('dropdownDiv_editShadowAdd').classList.remove("show");
|
|
||||||
document.getElementById('dropdownDiv_editShadowRemove').classList.toggle("show");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var importWrapper = function() {
|
|
||||||
document.getElementById('dropdownDiv_import').classList.toggle("show");
|
|
||||||
document.getElementById('dropdownDiv_export').classList.remove("show");
|
|
||||||
};
|
|
||||||
var clearWrapper = function() {
|
|
||||||
controller.clearToolbox();
|
|
||||||
};
|
|
||||||
var editToolboxWrapper = function() {
|
|
||||||
controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
|
|
||||||
};
|
|
||||||
var editPreloadWrapper = function() {
|
|
||||||
controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
|
|
||||||
};
|
|
||||||
var importToolboxWrapper = function(e) {
|
|
||||||
controller.importFile(event.target.files[0], WorkspaceFactoryController.MODE_TOOLBOX);
|
|
||||||
document.getElementById('dropdownDiv_import').classList.remove("show");
|
|
||||||
};
|
|
||||||
var importPreloadWrapper = function(e) {
|
|
||||||
controller.importFile(event.target.files[0], WorkspaceFactoryController.MODE_PRELOAD);
|
|
||||||
document.getElementById('dropdownDiv_import').classList.remove("show");
|
|
||||||
};
|
|
||||||
var editToolboxWrapper = function() {
|
|
||||||
controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
|
|
||||||
};
|
|
||||||
var editPreloadWrapper = function() {
|
|
||||||
controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
|
|
||||||
};
|
|
||||||
var exportToolboxWrapper = function() {
|
|
||||||
controller.exportFile(WorkspaceFactoryController.MODE_TOOLBOX);
|
|
||||||
document.getElementById('dropdownDiv_export').classList.remove("show");
|
|
||||||
}
|
|
||||||
var exportPreloadWrapper = function() {
|
|
||||||
controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
|
|
||||||
document.getElementById('dropdownDiv_export').classList.remove("show");
|
|
||||||
}
|
|
||||||
var exportOptionsWrapper = function() {
|
|
||||||
controller.exportOptionsFile();
|
|
||||||
document.getElementById('dropdownDiv_export').classList.remove("show");
|
|
||||||
}
|
|
||||||
var exportAllWrapper = function() {
|
|
||||||
controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
|
|
||||||
controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
|
|
||||||
controller.exportOptionsFile();
|
|
||||||
document.getElementById('dropdownDiv_export').classList.remove("show");
|
|
||||||
}
|
|
||||||
var standardOptionsWrapper = function() {
|
|
||||||
controller.setStandardOptionsAndUpdate();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById('button_add').addEventListener
|
|
||||||
('click', addWrapper);
|
|
||||||
document.getElementById('dropdown_newCategory').addEventListener
|
|
||||||
('click', newCategoryWrapper);
|
|
||||||
document.getElementById('dropdown_loadCategory').addEventListener
|
|
||||||
('click', loadCategoryWrapper);
|
|
||||||
document.getElementById('dropdown_separator').addEventListener
|
|
||||||
('click', separatorWrapper);
|
|
||||||
document.getElementById('button_remove').addEventListener
|
|
||||||
('click', removeWrapper);
|
|
||||||
document.getElementById('dropdown_exportToolbox').addEventListener
|
|
||||||
('click', exportToolboxWrapper);
|
|
||||||
document.getElementById('dropdown_exportPreload').addEventListener
|
|
||||||
('click', exportPreloadWrapper);
|
|
||||||
document.getElementById('dropdown_exportOptions').addEventListener
|
|
||||||
('click', exportOptionsWrapper);
|
|
||||||
document.getElementById('dropdown_exportAll').addEventListener
|
|
||||||
('click', exportAllWrapper);
|
|
||||||
document.getElementById('button_export').addEventListener
|
|
||||||
('click', exportWrapper);
|
|
||||||
document.getElementById('button_print').addEventListener
|
|
||||||
('click', printWrapper);
|
|
||||||
document.getElementById('button_up').addEventListener
|
|
||||||
('click', upWrapper);
|
|
||||||
document.getElementById('button_down').addEventListener
|
|
||||||
('click', downWrapper);
|
|
||||||
document.getElementById('button_editCategory').addEventListener
|
|
||||||
('click', editCategoryWrapper);
|
|
||||||
document.getElementById('button_editShadow').addEventListener
|
|
||||||
('click', editShadowWrapper);
|
|
||||||
document.getElementById('dropdown_name').addEventListener
|
|
||||||
('click', nameWrapper);
|
|
||||||
document.getElementById('button_import').addEventListener
|
|
||||||
('click', importWrapper);
|
|
||||||
document.getElementById('input_importToolbox').addEventListener
|
|
||||||
('change', importToolboxWrapper);
|
|
||||||
document.getElementById('input_importPreload').addEventListener
|
|
||||||
('change', importPreloadWrapper);
|
|
||||||
document.getElementById('button_clear').addEventListener
|
|
||||||
('click', clearWrapper);
|
|
||||||
document.getElementById('dropdown_addShadow').addEventListener
|
|
||||||
('click', shadowAddWrapper);
|
|
||||||
document.getElementById('dropdown_removeShadow').addEventListener
|
|
||||||
('click', shadowRemoveWrapper);
|
|
||||||
document.getElementById('tab_toolbox').addEventListener
|
|
||||||
('click', editToolboxWrapper);
|
|
||||||
document.getElementById('tab_preload').addEventListener
|
|
||||||
('click', editPreloadWrapper);
|
|
||||||
document.getElementById('button_standardOptions').addEventListener
|
|
||||||
('click', standardOptionsWrapper);
|
|
||||||
|
|
||||||
// Use up and down arrow keys to move categories.
|
|
||||||
// TODO(evd2014): When merge with next CL for editing preloaded blocks, make sure
|
|
||||||
// mode is toolbox.
|
|
||||||
window.addEventListener('keydown', function(e) {
|
|
||||||
if (e.keyCode == 38) { // Arrow up.
|
|
||||||
upWrapper();
|
|
||||||
} else if (e.keyCode == 40) { // Arrow down.
|
|
||||||
downWrapper();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Disable category editing buttons until categories are created.
|
|
||||||
document.getElementById('button_remove').disabled = true;
|
|
||||||
document.getElementById('button_up').disabled = true;
|
|
||||||
document.getElementById('button_down').disabled = true;
|
|
||||||
document.getElementById('button_editCategory').disabled = true;
|
|
||||||
document.getElementById('button_editShadow').disabled = true;
|
|
||||||
|
|
||||||
toolboxWorkspace.addChangeListener(function(e) {
|
|
||||||
// Listen for Blockly move and delete events to update preview.
|
|
||||||
// Not listening for Blockly create events because causes the user to drop
|
|
||||||
// blocks when dragging them into workspace. Could cause problems if ever load
|
|
||||||
// blocks into workspace directly without calling updatePreview.
|
|
||||||
if (e.type == Blockly.Events.MOVE || e.type == Blockly.Events.DELETE) {
|
|
||||||
controller.saveStateFromWorkspace();
|
|
||||||
controller.updatePreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listen for Blockly UI events to correctly enable the "Edit Block" button.
|
|
||||||
// Only enable "Edit Block" when a block is selected and it has a surrounding
|
|
||||||
// parent, meaning it is nested in another block (blocks that are not
|
|
||||||
// nested in parents cannot be shadow blocks).
|
|
||||||
if (e.type == Blockly.Events.MOVE || (e.type == Blockly.Events.UI &&
|
|
||||||
e.element == 'selected')) {
|
|
||||||
var selected = Blockly.selected;
|
|
||||||
|
|
||||||
if (selected != null && selected.getSurroundParent() != null) {
|
|
||||||
|
|
||||||
// A valid shadow block is selected. Enable block editing and remove warnings.
|
|
||||||
document.getElementById('button_editShadow').disabled = false;
|
|
||||||
Blockly.selected.setWarningText(null);
|
|
||||||
} else {
|
|
||||||
if (selected != null && controller.isUserGenShadowBlock(selected.id)) {
|
|
||||||
|
|
||||||
// Provide warning if shadow block is moved and is no longer a valid shadow block.
|
|
||||||
Blockly.selected.setWarningText('Shadow blocks must be nested inside other' +
|
|
||||||
' blocks to be displayed.');
|
|
||||||
|
|
||||||
// Give editing options so that the user can make an invalid shadow block
|
|
||||||
// a normal block.
|
|
||||||
document.getElementById('button_editShadow').disabled = false;
|
|
||||||
} else {
|
|
||||||
|
|
||||||
// No block selected that is a shadow block or could be a valid shadow block.
|
|
||||||
// Disable block editing.
|
|
||||||
document.getElementById('button_editShadow').disabled = true;
|
|
||||||
document.getElementById('dropdownDiv_editShadowRemove').classList.remove("show");
|
|
||||||
document.getElementById('dropdownDiv_editShadowAdd').classList.remove("show");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert actual shadow blocks added from the toolbox to user-generated shadow blocks.
|
|
||||||
if (e.type == Blockly.Events.CREATE) {
|
|
||||||
controller.convertShadowBlocks();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add event listeners for checkboxes and text fields for configuring the Options object.
|
|
||||||
|
|
||||||
// Checking the grid checkbox displays grid options and updates the options
|
|
||||||
// object.
|
|
||||||
document.getElementById('option_grid_checkbox').addEventListener('change', function(e) {
|
|
||||||
document.getElementById('grid_options').style.display = document.getElementById('option_grid_checkbox').checked ? 'block' : 'none';
|
|
||||||
controller.generateNewOptions();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Checking the grid checkbox displays zoom options and updates the options
|
|
||||||
// object.
|
|
||||||
document.getElementById('option_zoom_checkbox').addEventListener('change', function(e) {
|
|
||||||
document.getElementById('zoom_options').style.display = document.getElementById('option_zoom_checkbox').checked ? 'block' : 'none';
|
|
||||||
controller.generateNewOptions();
|
|
||||||
});
|
|
||||||
|
|
||||||
var optionListener = function() {
|
|
||||||
controller.generateNewOptions();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add event listeners to generate new options for each options input field.
|
|
||||||
document.getElementById('option_collapse_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_comments_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_css_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_disable_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('gridOption_spacing_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('gridOption_length_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('gridOption_colour_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('gridOption_snap_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_maxBlocks_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_media_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_readOnly_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_rtl_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_scrollbars_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_sounds_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('option_trashcan_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('zoomOption_controls_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('zoomOption_wheel_checkbox').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('zoomOption_startScale_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('zoomOption_maxScale_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('zoomOption_minScale_text').addEventListener('change', optionListener);
|
|
||||||
document.getElementById('zoomOption_scaleSpeed_text').addEventListener('change', optionListener);
|
|
||||||
|
|
||||||
// Check standard options and apply the changes to update the view.
|
|
||||||
controller.setStandardOptionsAndUpdate();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
@@ -199,12 +199,12 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<a href="blockfactory/index.html">
|
<a href="blockfactory/index.html">
|
||||||
<img src="blockfactory/icon.png" height=80 width=100>
|
<img src="blockfactory/devtools.png" height=96 width=184>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div><a href="blockfactory/index.html">Block Factory</a></div>
|
<div><a href="blockfactory/index.html">Blockly Developer Tools</a></div>
|
||||||
<div>Build custom blocks using Blockly.</div>
|
<div>Build custom blocks and setup a toolbox using Blockly.</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
Reference in New Issue
Block a user