diff options
author | David Barksdale <amatus@amatus.name> | 2016-09-10 17:58:46 -0500 |
---|---|---|
committer | David Barksdale <amatus@amatus.name> | 2016-09-10 18:32:35 -0500 |
commit | 475f9f3ac7688e58505690d420cafe6ae8bb8b5f (patch) | |
tree | b1bf14b10751fe4e9e146ad7244ec86bb123893d /blockly/demos/blocklyfactory/index.html | |
parent | 923561056ddb63ce82fd1ec2a5e249bbdae267bf (diff) |
Merge blockly sub-tree
Diffstat (limited to 'blockly/demos/blocklyfactory/index.html')
-rw-r--r-- | blockly/demos/blocklyfactory/index.html | 740 |
1 files changed, 740 insertions, 0 deletions
diff --git a/blockly/demos/blocklyfactory/index.html b/blockly/demos/blocklyfactory/index.html new file mode 100644 index 0000000..69d18a0 --- /dev/null +++ b/blockly/demos/blocklyfactory/index.html @@ -0,0 +1,740 @@ +<!-- TODO(quachtina96): move the CSS out to a separate file --> + +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="target-densitydpi=device-dpi, height=660, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> + <title>Blockly Demo: Blockly 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="workspacefactory/wfactory_model.js"></script> + <script src="workspacefactory/wfactory_controller.js"></script> + <script src="workspacefactory/wfactory_view.js"></script> + <script src="workspacefactory/wfactory_generator.js"></script> + <script src="workspacefactory/wfactory_init.js"></script> + <script src="standard_categories.js"></script> + <script src="/storage.js"></script> + <script src="../../../closure-library/closure/goog/base.js"></script> + <script src="factory_utils.js"></script> + <script src="block_option.js"></script> + <script src="factory.js"></script> + <script src="block_library_view.js"></script> + <script src="block_library_storage.js"></script> + <script src="block_library_controller.js"></script> + <script src="block_exporter_tools.js"></script> + <script src="block_exporter_view.js"></script> + <script src="block_exporter_controller.js"></script> + <script src="../blockfactory/blocks.js"></script> + <script src="app_controller.js"></script> + <link rel="stylesheet" href="factory.css"> + <link rel="stylesheet" href="../prettify.css"> + <script src="../prettify.js"></script> + <script> + var blocklyFactory; + var init = function() { + blocklyFactory = new AppController(); + blocklyFactory.init(); + }; + window.addEventListener('load', init); + </script> +</head> +<body onbeforeunload="return blocklyFactory.confirmLeavePage()"> +<h1><a href="https://developers.google.com/blockly/">Blockly</a> > + <a href="../index.html">Demos</a> > Blockly Factory + <button id="helpButton" title="View documentation in new window."> + <span>Help</span> + </button> +</h1> + <div id="tabContainer"> + <div id="blockFactory_tab" class="tab tabon"> Block Factory</div> + <div id="blocklibraryExporter_tab" class="tab taboff"> Block Exporter</div> + <div id="workspaceFactory_tab" class="tab taboff"> Workspace Factory</div> + </div> + + <!-- Exporter tab --> + <div id="blockLibraryExporter"> + <br> + <p id="helperText"> First, select blocks from your block library by clicking on them. Then, use the Export Settings form to download starter code for selected blocks. + </p> + <div id="exportSelector"> + <br> + <h3> Block Selector </h3> + <div class='dropdown'> + <button id="button_setBlocks">Select</button> + <div id="dropdownDiv_setBlocks" class="dropdown-content"> + <a id='dropdown_addAllFromLib' title="Select all block library blocks.">All Stored in Block Library</a> + <a id='dropdown_addAllUsed' title="Select all block library blocks used in workspace factory.">All Used in Workspace Factory</a> + </div> + <button id='clearSelectedButton' title="Clear selected blocks.">Clear Selected</a> + </div> + + <div id="blockSelector"></div> + </div> + + <!-- Users may customize export settings through this form --> + <div id="exportSettings"> + <br> + <h3> Export Settings </h3> + <form id="exportSettingsForm"> + + <div id="selectedBlocksTextContainer"> + <p>Currently Selected:</p> + <p id="selectedBlocksText"></p> + </div> + <input type="checkbox" id="blockDefCheck">Block Definition(s)<br> + <div id="blockDefSettings" class="subsettings"> + Format: + <select id="exportFormat"> + <option value="JSON">JSON</option> + <option value="JavaScript">JavaScript</option> + </select> + <br> + File Name: + <br> + <input type="text" id="blockDef_filename"> + </div> + <br> + <input type="checkbox" id="genStubCheck">Generator Stub(s)<br> + <div id="genStubSettings" class="subsettings"> + Language: + <select id="exportLanguage"> + <option value="JavaScript">JavaScript</option> + <option value="Python">Python</option> + <option value="PHP">PHP</option> + <option value="Lua">Lua</option> + <option value="Dart">Dart</option> + </select> + <br> + File Name: + <br> + <input type="text" id="generatorStub_filename"><br> + </div> + <br> + </form> + <button id="exporterSubmitButton" title="Download block starter code as specified in export settings."> Export </button> + </div> + <div id="exportPreview"> + <br> + <h3>Export Preview </h3> + <div id="blockDefs" class="exportPreviewTextArea"> + <p id="blockDefs_label">Block Definitions:</p> + <pre id="blockDefs_textArea"></pre> + </div> + <div id="genStubs" class="exportPreviewTextArea"> + <p id="genStubs_label">Generator Stubs:</p> + <pre id="genStubs_textArea"></pre> + </div> + </div> + </div> + + <!-- Workspace Factory tab --> + + <div id="workspaceFactoryContent"> + <div id="factoryHeader"> + <p> + <div class="dropdown"> + <button id="button_importBlocks">Import Custom Blocks</button> + <div id="dropdownDiv_importBlocks" class="dropdown-content"> + <input type="file" id="input_importBlocksJson" accept=".js, .json, .txt" class="inputfile"</input> + <label for="input_importBlocksJson">From JSON</label> + <input type="file" id="input_importBlocksJs" accept=".js, .txt" class="inputfile"</input> + <label for="input_importBlocksJs">From Javascript</label> + </div> + </div> + + <div class="dropdown"> + <button id="button_load">Load to Edit</button> + <div id="dropdownDiv_load" class="dropdown-content"> + <input type="file" id="input_loadToolbox" accept=".xml" class="inputfile"></input> + <label for="input_loadToolbox">Toolbox</label> + <input type="file" id="input_loadPreload" accept=".xml" class="inputfile"</input> + <label for="input_loadPreload">Workspace Blocks</label> + </div> + </div> + + <div class="dropdown"> + <button id="button_export">Export</button> + <div id="dropdownDiv_export" class="dropdown-content"> + <a id='dropdown_exportOptions'>Starter Code</a> + <a id='dropdown_exportToolbox'>Toolbox</a> + <a id='dropdown_exportPreload'>Workspace Blocks</a> + <a id='dropdown_exportAll'>All</a> + </div> + </div> + + <button id="button_clear">Clear</button> + + </p> + </div> + + <section id="createDiv"> + <div id="createHeader"> + <h3>Edit</h3> + <p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p> + </div> + <table id='workspaceTabs' style="width:auto; height:auto"> + <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"></div> + </section> + <aside id="toolbox_div"> + <p id="categoryHeader">Your categories will appear here</p> + <table id="categoryTable" style="width:auto; height:auto"> + </table> + <p> </p> + + <div class='dropdown'> + <button id="button_add" class="large">+</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> + <a id='dropdown_loadStandardToolbox'>Standard Toolbox</a> + </div> + </div> + + <button id="button_remove" class="large">-</button> + + <button id="button_up" class="large">↑</button> + <button id="button_down" class="large">↓</button> + + <br> + <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> + + <button id='button_addShadow' style='display:none'>Make Shadow</button> + <button id='button_removeShadow' style='display:none'>Remove Shadow</button> + + <aside id='preload_div' style='display:none'> + <div id="preloadHelp"> + <p>Configure the options for your Blockly inject call.</p> + <button id="button_optionsHelp">Help</button> + <button class="small" id="button_standardOptions">Reset to Default</button> + </div> + <div id="workspace_options"> + <input type="checkbox" id="option_readOnly_checkbox" class="optionsInput">Read Only<br> + <input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks<br> + <input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks<br> + <input type="checkbox" id="option_css_checkbox" class="optionsInput">Use Blockly CSS<br> + <input type="checkbox" id="option_disable_checkbox" class="optionsInput">Disabled Blocks<br> + <input type="checkbox" id="option_grid_checkbox" class="optionsInput">Use Grid<br> + <div id="grid_options" name="grid" style="display:none"> + Spacing <input type="number" id="gridOption_spacing_number" class="optionsInput" value="0"><br> + Length <input type="number" id="gridOption_length_number" class="optionsInput" value="1"><br> + Color <input type="text" id="gridOption_colour_text" class="optionsInput" value="#888"><br> + <input type="checkbox" id="gridOption_snap_checkbox" class="optionsInput" value="grid_snap_checkbox">Snap<br> + </div> + <input type="checkbox" id="option_infiniteBlocks_checkbox" class="optionsInput" value="checked">Infinite Blocks<br> + <div id="maxBlockNumber_option" style="display:none"> + Max Blocks <input type="number" id="option_maxBlocks_number" class="optionsInput" value=100><br> + </div> + Path to Blockly Media <input type="text" id="option_media_text" class="optionsInput"><br> + <input type="checkbox" id="option_rtl_checkbox" class="optionsInput">Layout with RTL<br> + <input type="checkbox" id="option_scrollbars_checkbox" class="optionsInput">Scrollbars<br> + <input type="checkbox" id="option_sounds_checkbox" class="optionsInput">Sounds<br> + <div id="trashcan_option"> + <input type="checkbox" id="option_trashcan_checkbox" class="optionsInput">Trashcan<br> + </div> + <input type="checkbox" id="option_zoom_checkbox" class="optionsInput">Zoom<br> + <div id="zoom_options" name="zoom" style="display:none"> + <input type="checkbox" id="zoomOption_controls_checkbox" class="optionsInput">Zoom Controls<br> + <input type="checkbox" id="zoomOption_wheel_checkbox" class="optionsInput">Zoom Wheel<br> + Start Scale <input type="number" id="zoomOption_startScale_number" class="optionsInput" name="startScale" value="1.0"><br> + Max Scale <input type="number" id="zoomOption_maxScale_number" class="optionsInput" value="3"><br> + Min Scale <input type="number" id="zoomOption_minScale_number" class="optionsInput" value="0.3"><br> + Scale Speed <input type="number" id="zoomOption_scaleSpeed_number" class="optionsInput" value="1.2"><br> + </div> + </div> + </aside> + + + </section> + + <aside id="previewDiv"> + <div id="previewBorder"> + <div id="previewHelp"> + <h3>Preview</h3> + <p>This is what your custom workspace will look like.</p> + </div> + <div id="preview_blocks" class="content"></div> + </div> + </aside> + </div> + + <!-- Blockly Factory Tab --> + <table id="blockFactoryContent"> + <tr width="100%" height="10%"> + <td width="50%" height="5%"> + <table> + <tr id="blockLibrary"> + <td id="blockLibraryContainer"> + <span> + <div class='dropdown'> + <button id="button_blockLib">Block Library</button> + <div id="dropdownDiv_blockLib" class="dropdown-content"> + <a id='createNewBlockButton'>Create New Block</a> + </div> + </div> + <select id="blockLibraryDropdown" style="display:none"> + </select> + </span> + </td> + <td id="blockLibraryControls"> + <button id="saveToBlockLibraryButton" title="Save block to Block Library."> + Save "block_type" + </button> + <button id="removeBlockFromLibraryButton" title="Remove block from Block Library."> + Delete "block_type" + </button> + </td> + </tr> + </table> + </td> + <td height="5%"> + <table id="blockFactoryPreview"> + <tr> + <td id="previewContainer"> + <h3>Preview: + <select id="direction"> + <option value="ltr">LTR</option> + <option value="rtl">RTL</option> + </select> + </h3> + </td> + <td id="buttonContainer"> + <button id="linkButton" title="Save and link to blocks."> + <img src="link.png" height="21" width="21"> + </button> + <button id="clearBlockLibraryButton" title="Clear Block Library."> + <span>Clear Library</span> + </button> + <label for="files" class="buttonStyle"> + <span class=>Import Block Library</span> + </label> + <input id="files" type="file" name="files" + accept="application/xml"> + <button id="localSaveButton" title="Save block library xml to a local file."> + <span>Download Block Library</span> + </button> + </td> + </tr> + </table> + </td> + </tr> + <tr height="80%"> + <td id="blocklyWorkspaceContainer"> + <div id="blockly"></div> + <div id="blocklyMask"></div> + </td> + <td width="50%"> + <table id="blocklyPreviewContainer"> + <tr> + <td height="30%"> + <div id="preview"></div> + </td> + </tr> + <tr> + <td height="5%"> + <h3>Block Definition: + <select id="format"> + <option value="JSON">JSON</option> + <option value="JavaScript">JavaScript</option> + <option value="Manual">Manual edit…</option> + </select> + </h3> + </td> + </tr> + <tr> + <td height="30%"> + <pre id="languagePre"></pre> + <textarea id="languageTA"></textarea> + </td> + </tr> + <tr> + <td height="5%"> + <h3>Generator stub: + <select id="language"> + <option value="JavaScript">JavaScript</option> + <option value="Python">Python</option> + <option value="PHP">PHP</option> + <option value="Lua">Lua</option> + <option value="Dart">Dart</option> + </select> + </h3> + </td> + </tr> + <tr> + <td height="30%"> + <pre id="generatorPre"></pre> + </td> + </tr> + </table> + </td> + </tr> + </table> + + <xml id="blockfactory_toolbox" class="toolbox"> + <category name="Input"> + <block type="input_value"> + <value name="TYPE"> + <shadow type="type_null"></shadow> + </value> + </block> + <block type="input_statement"> + <value name="TYPE"> + <shadow type="type_null"></shadow> + </value> + </block> + <block type="input_dummy"></block> + </category> + <category name="Field"> + <block type="field_static"></block> + <block type="field_input"></block> + <block type="field_number"></block> + <block type="field_angle"></block> + <block type="field_dropdown"></block> + <block type="field_checkbox"></block> + <block type="field_colour"></block> + <!-- + Date picker commented out since it increases footprint by 60%. + Add it only if you need it. See also goog.require in blockly.js. + <block type="field_date"></block> + --> + <block type="field_variable"></block> + <block type="field_image"></block> + </category> + <category name="Type"> + <block type="type_group"></block> + <block type="type_null"></block> + <block type="type_boolean"></block> + <block type="type_number"></block> + <block type="type_string"></block> + <block type="type_list"></block> + <block type="type_other"></block> + </category> + <category name="Colour" id="colourCategory"> + <block type="colour_hue"><mutation colour="20"></mutation><field name="HUE">20</field></block> + <block type="colour_hue"><mutation colour="65"></mutation><field name="HUE">65</field></block> + <block type="colour_hue"><mutation colour="120"></mutation><field name="HUE">120</field></block> + <block type="colour_hue"><mutation colour="160"></mutation><field name="HUE">160</field></block> + <block type="colour_hue"><mutation colour="210"></mutation><field name="HUE">210</field></block> + <block type="colour_hue"><mutation colour="230"></mutation><field name="HUE">230</field></block> + <block type="colour_hue"><mutation colour="260"></mutation><field name="HUE">260</field></block> + <block type="colour_hue"><mutation colour="290"></mutation><field name="HUE">290</field></block> + <block type="colour_hue"><mutation colour="330"></mutation><field name="HUE">330</field></block> + </category> + </xml> + + <xml id="workspacefactory_toolbox" class="toolbox"> + <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_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> + <sep></sep> + <category name="Block Library" colour="260" id="blockLibCategory"></category> + </xml> + +</body> +</html> |