Tap any button to edit its code.
When complete, press Done.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CLOSURE_NO_DEPS is set to true. This allows projects
+ * to include their own deps file(s) from different locations.
+ *
+ * Avoid including base.js more than once. This is strictly discouraged and not
+ * supported. goog.require(...) won't work properly in that case.
+ *
+ * @provideGoog
+ */
+
+
+/**
+ * Base namespace for the Closure library. Checks to see goog is already
+ * defined in the current scope before assigning to prevent clobbering if
+ * base.js is loaded more than once.
+ *
+ * @const
+ */
+var goog = goog || {};
+
+/**
+ * Reference to the global object.
+ * https://www.ecma-international.org/ecma-262/9.0/index.html#sec-global-object
+ *
+ * More info on this implementation here:
+ * https://docs.google.com/document/d/1NAeW4Wk7I7FV0Y2tcUFvQdGMc89k2vdgSXInw8_nvCI/edit
+ *
+ * @const
+ * @suppress {undefinedVars} self won't be referenced unless `this` is falsy.
+ * @type {!Global}
+ */
+goog.global =
+ // Check `this` first for backwards compatibility.
+ // Valid unless running as an ES module or in a function wrapper called
+ // without setting `this` properly.
+ // Note that base.js can't usefully be imported as an ES module, but it may
+ // be compiled into bundles that are loadable as ES modules.
+ this ||
+ // https://developer.mozilla.org/en-US/docs/Web/API/Window/self
+ // For in-page browser environments and workers.
+ self;
+
+/**
+ * Builds an object structure for the provided namespace path, ensuring that
+ * names that already exist are not overwritten. For example:
+ * "a.b.c" -> a = {};a.b={};a.b.c={};
+ * Used by goog.provide and goog.exportSymbol.
+ * @param {string} name name of the object that this file defines.
+ * @private
+ */
+goog.exportPath_ = function(name) {
+ var parts = name.split('.');
+ var cur = goog.global;
+
+ // Internet Explorer exhibits strange behavior when throwing errors from
+ // methods externed in this manner. See the testExportSymbolExceptions in
+ // base_test.html for an example.
+ if (!(parts[0] in cur) && typeof cur.execScript != 'undefined') {
+ cur.execScript('var ' + parts[0]);
+ }
+
+ for (var part; parts.length && (part = parts.shift());) {
+ if (cur[part] && cur[part] !== Object.prototype[part]) {
+ cur = cur[part];
+ } else {
+ cur = cur[part] = {};
+ }
+ }
+};
+
+/**
+ * Defines a namespace in Closure.
+ *
+ * A namespace may only be defined once in a codebase. It may be defined using
+ * goog.provide() or goog.module().
+ *
+ * The presence of one or more goog.provide() calls in a file indicates
+ * that the file defines the given objects/namespaces.
+ * Provided symbols must not be null or undefined.
+ *
+ * In addition, goog.provide() creates the object stubs for a namespace
+ * (for example, goog.provide("goog.foo.bar") will create the object
+ * goog.foo.bar if it does not already exist).
+ *
+ * Build tools also scan for provide/require/module statements
+ * to discern dependencies, build dependency files (see deps.js), etc.
+ *
+ * @see goog.require
+ * @see goog.module
+ * @param {string} name Namespace provided by this file in the form
+ * "goog.package.part".
+ */
+goog.provide = function(name) {
+ // Ensure that the same namespace isn't provided twice.
+ // A goog.module/goog.provide maps a goog.require to a specific file
+ if (goog.isProvided_(name)) {
+ throw Error('Namespace "' + name + '" already declared.');
+ }
+
+ delete goog.implicitNamespaces_[name];
+
+ var namespace = name;
+ while ((namespace = namespace.substring(0, namespace.lastIndexOf('.')))) {
+ if (goog.getObjectByName(namespace)) {
+ break;
+ }
+ goog.implicitNamespaces_[namespace] = true;
+ }
+
+ goog.exportPath_(name);
+};
+
+/**
+ * @private {?{
+ * moduleName: (string|undefined),
+ * declareLegacyNamespace:boolean,
+ * type: ?goog.ModuleType
+ * }}
+ */
+goog.moduleLoaderState_ = null;
+
+/**
+ * Check if the given name has been goog.provided. This will return false for
+ * names that are available only as implicit namespaces.
+ * @param {string} name name of the object to look for.
+ * @return {boolean} Whether the name has been provided.
+ * @private
+ */
+goog.isProvided_ = function(name) {
+ return (!goog.implicitNamespaces_[name] &&
+ goog.isDefAndNotNull(goog.getObjectByName(name)));
+};
+
+/**
+ * Namespaces implicitly defined by goog.provide. For example,
+ * goog.provide('goog.events.Event') implicitly declares that 'goog' and
+ * 'goog.events' must be namespaces.
+ *
+ * @type {!Object
+ var swatch = document.createElement('span');
+ swatch.className = 'cp_swatch';
+ swatch.addEventListener('click', cp_open);
+ swatch.addEventListener('mouseover', cp_cancelclose);
+ swatch.addEventListener('mouseout', cp_closesoon);
+ input.parentNode.insertBefore(swatch, input);
+ // Cross-link the swatch and input.
+ swatch.cp_input = input;
+ input.cp_swatch = swatch;
+ }
+ cp_updateSwatch(input.cp_swatch);
+}
+
+function cp_updateSwatch(swatch) {
+ var colour = swatch.cp_input.value;
+ if (colour) {
+ swatch.style.backgroundColor = '#' + colour;
+ swatch.textContent = '\xa0';
+ } else {
+ swatch.style.backgroundColor = '#fff';
+ swatch.innerHTML = 'X';
+ }
+}
+
+function cp_open(e) {
+ // Create a table of colours.
+ if (cp_popupDom) {
+ cp_close();
+ return;
+ }
+ cp_activeSwatch = e.currentTarget;
+ var currentColour = cp_activeSwatch.cp_input.value.toLowerCase();
+ var element = cp_activeSwatch;
+ var posX = 0;
+ var posY = element.offsetHeight;
+ while (element) {
+ posX += element.offsetLeft;
+ posY += element.offsetTop;
+ element = element.offsetParent;
+ }
+ cp_popupDom = document.createElement('div');
+ cp_popupDom.id = 'cp_popup';
+ var table = document.createElement('table');
+ table.addEventListener('mouseover', cp_cancelclose);
+ table.addEventListener('mouseout', cp_closesoon);
+ table.addEventListener('click', cp_onclick);
+ var tbody = document.createElement('tbody');
+ var row, cell, div;
+ for (var y = 0; y < cp_grid.length; y++) {
+ row = document.createElement('tr');
+ tbody.appendChild(row);
+ for (var x = 0; x < cp_grid[y].length; x++) {
+ var colour = cp_grid[y][x];
+ if (colour === undefined) continue;
+ cell = document.createElement('td');
+ row.appendChild(cell);
+ div = document.createElement('div');
+ cell.appendChild(div);
+ cell.cp_colour = colour;
+ if (colour) {
+ div.style.backgroundColor = '#' + colour;
+ div.innerHTML = '\xa0';
+ } else {
+ div.innerHTML = 'X';
+ }
+ if (currentColour == colour.toLowerCase()) {
+ div.className = 'cp_current'
+ }
+ }
+ }
+ table.appendChild(tbody);
+ cp_popupDom.appendChild(table);
+
+ document.body.appendChild(cp_popupDom);
+ // Don't widen the screen.
+ var rightOverhang = (posX + cp_popupDom.offsetWidth) -
+ (window.innerWidth + window.scrollX) + 15; // Scrollbar is 15px.
+ if (rightOverhang > 0) {
+ posX -= rightOverhang;
+ }
+ // Flip to above swatch if no room below.
+ if (posY + cp_popupDom.offsetHeight >= window.innerHeight + window.scrollY) {
+ posY -= cp_popupDom.offsetHeight + cp_activeSwatch.offsetHeight;
+ if (posY < window.scrollY) {
+ posY = window.scrollY;
+ }
+ }
+ cp_popupDom.style.left = posX + 'px';
+ cp_popupDom.style.top = posY + 'px';
+}
+
+function cp_close() {
+ // Close the table now.
+ cp_cancelclose();
+ if (cp_popupDom) {
+ document.body.removeChild(cp_popupDom)
+ }
+ cp_popupDom = null;
+ cp_activeSwatch = null;
+}
+
+function cp_closesoon() {
+ // Close the table a split-second from now.
+ cp_closePid = setTimeout(cp_close, 250);
+}
+
+function cp_cancelclose() {
+ // Don't close the colour table after all.
+ if (cp_closePid) {
+ clearTimeout(cp_closePid);
+ }
+}
+
+function cp_onclick(e) {
+ // Clicked on a colour.
+ var element = e.target;
+ var colour;
+ // Walk up the DOM, looking for a colour.
+ while (element) {
+ colour = element.cp_colour;
+ if (colour !== undefined) {
+ break;
+ }
+ element = element.parentNode;
+ }
+ if (colour !== undefined) {
+ // Set the colour.
+ cp_activeSwatch.cp_input.value = colour;
+ cp_updateSwatch(cp_activeSwatch);
+ // Fire a change event.
+ var evt = document.createEvent('HTMLEvents');
+ evt.initEvent('change', false, true);
+ cp_activeSwatch.cp_input.dispatchEvent(evt);
+ }
+ // Close the table.
+ cp_close();
+}
diff --git a/js/demos/blockfactory/factory.css b/js/demos/blockfactory/factory.css
new file mode 100644
index 0000000..751f6f0
--- /dev/null
+++ b/js/demos/blockfactory/factory.css
@@ -0,0 +1,579 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+html, body {
+ height: 100%;
+ min-height: 375px;
+}
+
+body {
+ background-color: #fff;
+ font-family: sans-serif;
+ margin: 0 5px;
+ overflow: hidden;
+}
+
+h1 {
+ font-weight: normal;
+ font-size: 140%;
+}
+
+h3 {
+ margin-top: 5px;
+ margin-bottom: 0;
+}
+
+table {
+ border: none;
+ border-collapse: collapse;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+td {
+ vertical-align: top;
+ padding: 0;
+}
+
+p {
+ display: block;
+ -webkit-margin-before: 0;
+ -webkit-margin-after: 0;
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0;
+ padding: 5px 0;
+}
+
+#factoryHeader {
+ display: table;
+ height: 10%;
+}
+
+#blockly {
+ position: absolute;
+}
+
+#blocklyMask {
+ background-color: #000;
+ cursor: not-allowed;
+ display: none;
+ position: fixed;
+ opacity: 0.2;
+ z-index: 9;
+}
+
+#preview {
+ position: absolute;
+}
+
+pre,
+#languageTA {
+ border: #ddd 1px solid;
+ margin-top: 0;
+ position: absolute;
+ overflow: scroll;
+}
+
+#languageTA {
+ display: none;
+ font: 10pt monospace;
+}
+
+.downloadButton {
+ padding: 5px;
+}
+
+.disabled {
+ color: #888;
+}
+
+button:disabled, .buttonStyle:disabled {
+ opacity: 0.6;
+}
+
+button>*, .buttonStyle>* {
+ opacity: 1;
+ vertical-align: text-bottom;
+}
+
+button, .buttonStyle {
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ background-color: #eee;
+ color: #000;
+ padding: 10px;
+ margin: 10px 5px;
+ font-size: small;
+}
+
+.buttonStyle:hover:not(:disabled), button:hover:not(:disabled) {
+ box-shadow: 2px 2px 5px #888;
+}
+
+.buttonStyle:hover:not(:disabled)>*, button:hover:not(:disabled)>* {
+ opacity: 1;
+}
+
+#linkButton {
+ display: none;
+}
+
+#helpButton {
+ float: right;
+}
+
+#blockFactoryContent {
+ height: 85%;
+ width: 100%;
+ overflow: hidden;
+}
+
+#blockFactoryPreview {
+ height: 100%;
+ width: 100%;
+}
+
+#blockLibraryContainer {
+ vertical-align: bottom;
+}
+
+#blockLibraryControls {
+ text-align: right;
+ vertical-align: middle;
+}
+
+#previewContainer {
+ vertical-align: bottom;
+}
+
+#buttonContainer {
+ text-align: right;
+ vertical-align: middle;
+}
+
+#files {
+ position: absolute;
+ visibility: hidden;
+}
+
+.toolbox {
+ display: none;
+}
+
+#blocklyWorkspaceContainer {
+ width: 50%;
+}
+
+#workspaceFactoryContent {
+ clear: both;
+ display: none;
+ height: 90%;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+
+/* Exporter */
+
+#blockLibraryExporter {
+ clear: both;
+ display: none;
+ height: 90%;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+
+#exportSelector {
+ display: inline-block;
+ float: left;
+ height: 70%;
+ width: 30%;
+}
+
+#exportSettings {
+ float: left;
+ overflow: hidden;
+ padding-left: 16px;
+ width: 20%;
+}
+
+#selectedBlocksTextContainer {
+ max-height: 200px;
+ overflow-y: scroll;
+ padding-bottom: 2em;
+}
+
+::-webkit-scrollbar {
+ -webkit-appearance: none;
+ width: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+ border-radius: 4px;
+ background-color: #ccc;
+ -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+
+.subsettings {
+ margin: 0 25px;
+}
+
+#exporterHiddenWorkspace {
+ display: none;
+}
+
+#exportPreview {
+ float: right;
+ height: 90%;
+ overflow: hidden;
+ width: 45%;
+}
+
+.exportPreviewTextArea {
+ display: block;
+ float: right;
+ height: 40%;
+ width: 100%;
+}
+
+#genStubs_textArea, #blockDefs_textArea {
+ display: block;
+ height: 80%;
+ margin-right: 20px;
+ max-height: 300px;
+ overflow: scroll;
+ position: static;
+}
+
+#blockDefs_label, #genStubs_label {
+ display: block;
+}
+
+#blockSelector {
+ background-color: #eee;
+ border: 1px solid lightgrey;
+ width: 80%;
+ height: 90%;
+ overflow-y: scroll;
+ position: relative;
+}
+
+/* Exporter Block Option */
+
+.blockOption {
+ background-color: #eee;
+ padding: 0px 20px;
+ width: 95%;
+}
+
+.blockOption_check_label {
+ position: relative;
+}
+
+.blockOption_check {
+ float: left;
+ display:inline;
+ padding: 4px;
+}
+
+.blockOption_label {
+ display:inline;
+ max-width: inherit;
+ word-wrap: break-word;
+}
+
+.blockOption_preview {
+ height: 100px;
+ padding-top: 10px;
+ width: 90%;
+}
+
+/* Block Library */
+
+#dropdownDiv_blockLib {
+ max-height: 65%;
+ overflow-y: scroll;
+}
+
+#button_blockLib {
+ border-color: darkgrey;
+ font-size: large;
+}
+
+.button_alert {
+ background-color: #fcc;
+ border-color: #f99;
+}
+
+.button_warn {
+ background-color: #aea;
+ border-color: #5d5;
+}
+
+/* Tabs */
+
+.tab {
+ float: left;
+ padding: 5px 19px;
+}
+
+.tab:hover:not(.tabon) {
+ background-color: #e8e8e8;
+}
+
+.tab.tabon {
+ background-color: #ccc;
+}
+
+.tab.taboff {
+ cursor: pointer;
+}
+
+#tabContainer {
+ background-color: #f8f8f8;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ display: table;
+ width: 100%;
+}
+
+/* Workspace Factory */
+
+section {
+ float: left;
+}
+
+aside {
+ float: right;
+}
+
+#categoryTable>table {
+ border: 1px solid #ccc;
+ border-bottom: none;
+ width: auto;
+}
+
+td.tabon {
+ background-color: #ccc;
+ border-bottom-color: #ccc;
+ padding: 5px 19px;
+}
+
+td.taboff {
+ cursor: pointer;
+ padding: 5px 19px;
+}
+
+td.taboff:hover {
+ background-color: #eee;
+}
+
+.large {
+ font-size: large;
+}
+
+.inputfile {
+ height: 0;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ width: 0;
+ z-index: -1;
+}
+#wfactoryHeader {
+ height: 29%;
+ padding: 0.5%;
+}
+
+#workspaceTabs {
+ background-color: #f8f8f8;
+ border: 1px solid #ccc;
+ display: table;
+ width: auto;
+}
+
+#toolbox_section {
+ height: 85%;
+ width: 60%;
+}
+
+#previewHelp {
+ padding: 10px;
+ width: 98%;
+}
+
+#toolbox_blocks {
+ height: 100%;
+ width: 100%;
+}
+
+#preview_blocks {
+ height: 80%;
+ padding: 10px;
+ width: 100%;
+}
+
+#createDiv {
+ height: 79%;
+ padding: 0.5%;
+ width: 60%;
+}
+
+#previewDiv {
+ border: 10px solid #eee;
+ height: 77%;
+ margin-right: 0.5%;
+ padding-bottom: 10px;
+ width: 35%;
+}
+
+#previewBorder {
+ border: 5px solid #ddd;
+ height: 100%;
+ padding-right: 20px;
+}
+
+.disabled {
+ background-color: white;
+ opacity: 0.5;
+}
+
+#toolbox_div {
+ display: table;
+ height: auto;
+ margin-right: 5%;
+ overflow: hidden;
+ width: 35%;
+}
+
+#preload_div {
+ display: table;
+ height: 75%;
+ margin-left: 2%;
+ margin-right: 2%;
+ max-height: 500px;
+ overflow: hidden;
+ overflow-y: scroll;
+ width: 30%;
+}
+
+#shadowBlockDropdown {
+ height: 15%;
+}
+
+#preloadHelp {
+ display: table-row;
+ height: 30%;
+}
+
+#workspace_options {
+ display: table-row;
+ margin-top: 2%;
+}
+
+#disable_div {
+ background-color: white;
+ height: 100%;
+ left: 0;
+ opacity: .5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: -1; /* Start behind workspace */
+}
+
+#grid_options, #zoom_options, #maxBlockNumber_option {
+ padding-left: 15px;
+}
+
+#modalShadow {
+ display: none;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.1);
+ z-index: 100;
+}
+
+/* The container - needed to position the dropdown content */
+.dropdown {
+ display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ background-color: #fff;
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
+ display: none;
+ min-width: 170px;
+ opacity: 1;
+ position: absolute;
+ z-index: 101; /* On top of the modal Shadow. */
+}
+
+/* Links inside the dropdown */
+.dropdown-content a, .dropdown-content label {
+ color: black;
+ display: block;
+ font-size: small;
+ padding: 12px 16px;
+ text-decoration: none;
+}
+
+/* Change color of dropdown links on hover. */
+.dropdown-content a:hover, .dropdown-content label:hover {
+ background-color: #EEE;
+}
+
+/* Change color of dropdown links on selected. */
+.dropdown-content-selected {
+ background-color: #DDD;
+}
+
+/* Show the dropdown menu */
+.show {
+ display: block;
+}
+
+#dropdownDiv_editCategory {
+ padding: 0 1ex;
+}
+
+#dropdownDiv_editCategory>img {
+ vertical-align: middle;
+}
+
+.cp_swatch {
+ vertical-align: middle !important;
+}
+
+#cp_popup {
+ z-index: 999;
+}
+
+.shadowBlock>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.shadowBlock>.blocklyPathLight,
+.shadowBlock>.blocklyPathDark {
+ display: none;
+}
diff --git a/js/demos/blockfactory/factory.js b/js/demos/blockfactory/factory.js
new file mode 100644
index 0000000..77ab56f
--- /dev/null
+++ b/js/demos/blockfactory/factory.js
@@ -0,0 +1,337 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Block Factory application through
+ * which users can build blocks using a visual interface and dynamically
+ * generate a preview block and starter code for the block (block definition and
+ * generator stub. Uses the Block Factory namespace. Depends on the FactoryUtils
+ * for its code generation functions.
+ *
+ * @author fraser@google.com (Neil Fraser), quachtina96 (Tina Quach)
+ */
+'use strict';
+
+/**
+ * Namespace for Block Factory.
+ */
+var BlockFactory = BlockFactory || Object.create(null);
+
+/**
+ * Workspace for user to build block.
+ * @type {Blockly.Workspace}
+ */
+BlockFactory.mainWorkspace = null;
+
+/**
+ * Workspace for preview of block.
+ * @type {Blockly.Workspace}
+ */
+BlockFactory.previewWorkspace = null;
+
+/**
+ * Name of block if not named.
+ * @type string
+ */
+BlockFactory.UNNAMED = 'unnamed';
+
+/**
+ * Existing direction ('ltr' vs 'rtl') of preview.
+ * @type string
+ */
+BlockFactory.oldDir = null;
+
+/**
+ * Flag to signal that an update came from a manual update to the JSON or JavaScript.
+ * definition manually.
+ * @type boolean
+ */
+// TODO: Replace global state with parameter passed to functions.
+BlockFactory.updateBlocksFlag = false;
+
+/**
+ * Delayed flag to avoid infinite update after updating the JSON or JavaScript.
+ * definition manually.
+ * @type boolean
+ */
+// TODO: Replace global state with parameter passed to functions.
+BlockFactory.updateBlocksFlagDelayed = false;
+
+/**
+ * The starting XML for the Block Factory main workspace. Contains the
+ * unmovable, undeletable factory_base block.
+ */
+BlockFactory.STARTER_BLOCK_XML_TEXT =
+ '' +
+ '' +
+ '' +
+ '' +
+ ' ' +
+ '' +
+ '' +
+ ' ' +
+ '' +
+ '' +
+ '230 ' +
+ ' ';
+
+/**
+ * Change the language code format.
+ */
+BlockFactory.formatChange = function() {
+ var mask = document.getElementById('blocklyMask');
+ var languagePre = document.getElementById('languagePre');
+ var languageTA = document.getElementById('languageTA');
+ if (document.getElementById('format').value == 'Manual-JSON' ||
+ document.getElementById('format').value == 'Manual-JS') {
+ Blockly.hideChaff();
+ mask.style.display = 'block';
+ languagePre.style.display = 'none';
+ languageTA.style.display = 'block';
+ var code = languagePre.textContent.trim();
+ languageTA.value = code;
+ languageTA.focus();
+ BlockFactory.updatePreview();
+ } else {
+ mask.style.display = 'none';
+ languageTA.style.display = 'none';
+ languagePre.style.display = 'block';
+ var code = languagePre.textContent.trim();
+ languageTA.value = code;
+
+ BlockFactory.updateLanguage();
+ }
+ BlockFactory.disableEnableLink();
+};
+
+/**
+ * Update the language code based on constructs made in Blockly.
+ */
+BlockFactory.updateLanguage = function() {
+ var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+ if (!rootBlock) {
+ return;
+ }
+ var blockType = rootBlock.getFieldValue('NAME').trim().toLowerCase();
+ if (!blockType) {
+ blockType = BlockFactory.UNNAMED;
+ }
+
+ if (!BlockFactory.updateBlocksFlag) {
+ var format = document.getElementById('format').value;
+ if (format == 'Manual-JSON') {
+ format = 'JSON';
+ } else if (format == 'Manual-JS') {
+ format = 'JavaScript';
+ }
+
+ var code = FactoryUtils.getBlockDefinition(blockType, rootBlock, format,
+ BlockFactory.mainWorkspace);
+ FactoryUtils.injectCode(code, 'languagePre');
+ if (!BlockFactory.updateBlocksFlagDelayed) {
+ var languagePre = document.getElementById('languagePre');
+ var languageTA = document.getElementById('languageTA');
+ code = languagePre.innerText.trim();
+ languageTA.value = code;
+ }
+ }
+
+ BlockFactory.updatePreview();
+};
+
+/**
+ * Update the generator code.
+ * @param {!Blockly.Block} block Rendered block in preview workspace.
+ */
+BlockFactory.updateGenerator = function(block) {
+ var language = document.getElementById('language').value;
+ var generatorStub = FactoryUtils.getGeneratorStub(block, language);
+ FactoryUtils.injectCode(generatorStub, 'generatorPre');
+};
+
+/**
+ * Update the preview display.
+ */
+BlockFactory.updatePreview = function() {
+ // Toggle between LTR/RTL if needed (also used in first display).
+ var newDir = document.getElementById('direction').value;
+ if (BlockFactory.oldDir != newDir) {
+ if (BlockFactory.previewWorkspace) {
+ BlockFactory.previewWorkspace.dispose();
+ }
+ var rtl = newDir == 'rtl';
+ BlockFactory.previewWorkspace = Blockly.inject('preview',
+ {rtl: rtl,
+ media: '../../media/',
+ scrollbars: true});
+ BlockFactory.oldDir = newDir;
+ }
+ BlockFactory.previewWorkspace.clear();
+
+ var format = BlockFactory.getBlockDefinitionFormat();
+ var code = document.getElementById('languageTA').value;
+ if (!code.trim()) {
+ // Nothing to render. Happens while cloud storage is loading.
+ return;
+ }
+
+ // Backup Blockly.Blocks object so that main workspace and preview don't
+ // collide if user creates a 'factory_base' block, for instance.
+ var backupBlocks = Blockly.Blocks;
+ try {
+ // Make a shallow copy.
+ Blockly.Blocks = Object.create(null);
+ for (var prop in backupBlocks) {
+ Blockly.Blocks[prop] = backupBlocks[prop];
+ }
+
+ if (format == 'JSON') {
+ var json = JSON.parse(code);
+ Blockly.Blocks[json.type || BlockFactory.UNNAMED] = {
+ init: function() {
+ this.jsonInit(json);
+ }
+ };
+ } else if (format == 'JavaScript') {
+ try {
+ eval(code);
+ } catch (e) {
+ // TODO: Display error in the UI
+ console.error("Error while evaluating JavaScript formatted block definition", e);
+ return;
+ }
+ }
+
+ // Look for a block on Blockly.Blocks that does not match the backup.
+ var blockType = null;
+ for (var type in Blockly.Blocks) {
+ if (typeof Blockly.Blocks[type].init == 'function' &&
+ Blockly.Blocks[type] != backupBlocks[type]) {
+ blockType = type;
+ break;
+ }
+ }
+ if (!blockType) {
+ return;
+ }
+
+ // Create the preview block.
+ var previewBlock = BlockFactory.previewWorkspace.newBlock(blockType);
+ previewBlock.initSvg();
+ previewBlock.render();
+ previewBlock.setMovable(false);
+ previewBlock.setDeletable(false);
+ previewBlock.moveBy(15, 10);
+ BlockFactory.previewWorkspace.clearUndo();
+ BlockFactory.updateGenerator(previewBlock);
+
+ // Warn user only if their block type is already exists in Blockly's
+ // standard library.
+ var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+ if (StandardCategories.coreBlockTypes.indexOf(blockType) != -1) {
+ rootBlock.setWarningText('A core Blockly block already exists ' +
+ 'under this name.');
+
+ } else if (blockType == 'block_type') {
+ // Warn user to let them know they can't save a block under the default
+ // name 'block_type'
+ rootBlock.setWarningText('You cannot save a block with the default ' +
+ 'name, "block_type"');
+
+ } else {
+ rootBlock.setWarningText(null);
+ }
+ } catch(err) {
+ // TODO: Show error on the UI
+ console.log(err);
+ BlockFactory.updateBlocksFlag = false
+ BlockFactory.updateBlocksFlagDelayed = false
+ } finally {
+ Blockly.Blocks = backupBlocks;
+ }
+};
+
+/**
+ * Gets the format from the Block Definitions' format selector/drop-down.
+ * @return Either 'JavaScript' or 'JSON'.
+ * @throws If selector value is not recognized.
+ */
+BlockFactory.getBlockDefinitionFormat = function() {
+ switch (document.getElementById('format').value) {
+ case 'JSON':
+ case 'Manual-JSON':
+ return 'JSON';
+
+ case 'JavaScript':
+ case 'Manual-JS':
+ return 'JavaScript';
+
+ default:
+ throw 'Unknown format: ' + format;
+ }
+}
+
+/**
+ * Disable link and save buttons if the format is 'Manual', enable otherwise.
+ */
+BlockFactory.disableEnableLink = function() {
+ var linkButton = document.getElementById('linkButton');
+ var saveBlockButton = document.getElementById('localSaveButton');
+ var saveToLibButton = document.getElementById('saveToBlockLibraryButton');
+ var disabled = document.getElementById('format').value.substr(0, 6) == 'Manual';
+ linkButton.disabled = disabled;
+ saveBlockButton.disabled = disabled;
+ saveToLibButton.disabled = disabled;
+};
+
+/**
+ * Render starter block (factory_base).
+ */
+BlockFactory.showStarterBlock = function() {
+ BlockFactory.mainWorkspace.clear();
+ var xml = Blockly.Xml.textToDom(BlockFactory.STARTER_BLOCK_XML_TEXT);
+ Blockly.Xml.domToWorkspace(xml, BlockFactory.mainWorkspace);
+};
+
+/**
+ * Returns whether or not the current block open is the starter block.
+ */
+BlockFactory.isStarterBlock = function() {
+ var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+ return rootBlock && !(
+ // The starter block does not have blocks nested into the factory_base block.
+ rootBlock.getChildren().length > 0 ||
+ // The starter block's name is the default, 'block_type'.
+ rootBlock.getFieldValue('NAME').trim().toLowerCase() != 'block_type' ||
+ // The starter block has no connections.
+ rootBlock.getFieldValue('CONNECTIONS') != 'NONE' ||
+ // The starter block has automatic inputs.
+ rootBlock.getFieldValue('INLINE') != 'AUTO'
+ );
+};
+
+/**
+ * Updates blocks from the manually edited js or json from their text area.
+ */
+BlockFactory.manualEdit = function() {
+ // TODO(#1267): Replace these global state flags with parameters passed to
+ // the right functions.
+ BlockFactory.updateBlocksFlag = true;
+ BlockFactory.updateBlocksFlagDelayed = true;
+ BlockFactory.updateLanguage();
+}
diff --git a/js/demos/blockfactory/factory_utils.js b/js/demos/blockfactory/factory_utils.js
new file mode 100644
index 0000000..92f5a33
--- /dev/null
+++ b/js/demos/blockfactory/factory_utils.js
@@ -0,0 +1,1070 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview FactoryUtils is a namespace that holds block starter code
+ * generation functions shared by the Block Factory, Workspace Factory, and
+ * Exporter applications within Blockly Factory. Holds functions to generate
+ * block definitions and generator stubs and to create and download files.
+ *
+ * @author fraser@google.com (Neil Fraser), quachtina96 (Tina Quach), JC-Orozco
+ * (Juan Carlos Orozco)
+ */
+'use strict';
+
+/**
+ * Namespace for FactoryUtils.
+ */
+var FactoryUtils = FactoryUtils || Object.create(null);
+
+/**
+ * Get block definition code for the current block.
+ * @param {string} blockType Type of block.
+ * @param {!Blockly.Block} rootBlock RootBlock from main workspace in which
+ * user uses Block Factory Blocks to create a custom block.
+ * @param {string} format 'JSON' or 'JavaScript'.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
+ * @return {string} Block definition.
+ */
+FactoryUtils.getBlockDefinition = function(blockType, rootBlock, format, workspace) {
+ blockType = FactoryUtils.cleanBlockType(blockType);
+ switch (format) {
+ case 'JSON':
+ var code = FactoryUtils.formatJson_(blockType, rootBlock);
+ break;
+ case 'JavaScript':
+ var code = FactoryUtils.formatJavaScript_(blockType, rootBlock, workspace);
+ break;
+ }
+ return code;
+};
+
+/**
+ * Convert invalid block name to a valid one. Replaces whitespace
+ * and prepend names that start with a digit with an '_'.
+ * @param {string} blockType Type of block.
+ * @return {string} Cleaned up block type.
+ */
+FactoryUtils.cleanBlockType = function(blockType) {
+ if (!blockType) {
+ return '';
+ }
+ return blockType.replace(/\W/g, '_').replace(/^(\d)/, '_$1');
+};
+
+/**
+ * Get the generator code for a given block.
+ * @param {!Blockly.Block} block Rendered block in preview workspace.
+ * @param {string} generatorLanguage 'JavaScript', 'Python', 'PHP', 'Lua',
+ * or 'Dart'.
+ * @return {string} Generator code for multiple blocks.
+ */
+FactoryUtils.getGeneratorStub = function(block, generatorLanguage) {
+ // Build factory blocks from block
+ if (BlockFactory.updateBlocksFlag) { // TODO: Move this to updatePreview()
+ BlockFactory.mainWorkspace.clear();
+ var xml = BlockDefinitionExtractor.buildBlockFactoryWorkspace(block);
+ Blockly.Xml.domToWorkspace(xml, BlockFactory.mainWorkspace);
+ // Calculate timer to avoid infinite update loops
+ // TODO(#1267): Remove the global variables and any infinite loops.
+ BlockFactory.updateBlocksFlag = false;
+ setTimeout(
+ function() {BlockFactory.updateBlocksFlagDelayed = false;}, 3000);
+ }
+ BlockFactory.lastUpdatedBlock = block; // Variable to share the block value.
+
+ function makeVar(root, name) {
+ name = name.toLowerCase().replace(/\W/g, '_');
+ return ' var ' + root + '_' + name;
+ }
+ // The makevar function lives in the original update generator.
+ var language = generatorLanguage;
+ var code = [];
+ code.push("Blockly." + language + "['" + block.type +
+ "'] = function(block) {");
+
+ // Generate getters for any fields or inputs.
+ for (var i = 0, input; input = block.inputList[i]; i++) {
+ for (var j = 0, field; field = input.fieldRow[j]; j++) {
+ var name = field.name;
+ if (!name) {
+ continue;
+ }
+ if (field instanceof Blockly.FieldVariable) {
+ // Subclass of Blockly.FieldDropdown, must test first.
+ code.push(makeVar('variable', name) +
+ " = Blockly." + language +
+ ".variableDB_.getName(block.getFieldValue('" + name +
+ "'), Blockly.Variables.NAME_TYPE);");
+ } else if (field instanceof Blockly.FieldAngle) {
+ // Subclass of Blockly.FieldTextInput, must test first.
+ code.push(makeVar('angle', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (Blockly.FieldDate && field instanceof Blockly.FieldDate) {
+ // Blockly.FieldDate may not be compiled into Blockly.
+ code.push(makeVar('date', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldColour) {
+ code.push(makeVar('colour', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldCheckbox) {
+ code.push(makeVar('checkbox', name) +
+ " = block.getFieldValue('" + name + "') == 'TRUE';");
+ } else if (field instanceof Blockly.FieldDropdown) {
+ code.push(makeVar('dropdown', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldNumber) {
+ code.push(makeVar('number', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldTextInput) {
+ code.push(makeVar('text', name) +
+ " = block.getFieldValue('" + name + "');");
+ }
+ }
+ var name = input.name;
+ if (name) {
+ if (input.type == Blockly.INPUT_VALUE) {
+ code.push(makeVar('value', name) +
+ " = Blockly." + language + ".valueToCode(block, '" + name +
+ "', Blockly." + language + ".ORDER_ATOMIC);");
+ } else if (input.type == Blockly.NEXT_STATEMENT) {
+ code.push(makeVar('statements', name) +
+ " = Blockly." + language + ".statementToCode(block, '" +
+ name + "');");
+ }
+ }
+ }
+ // Most languages end lines with a semicolon. Python & Lua do not.
+ var lineEnd = {
+ 'JavaScript': ';',
+ 'Python': '',
+ 'PHP': ';',
+ 'Lua': '',
+ 'Dart': ';'
+ };
+ code.push(" // TODO: Assemble " + language + " into code variable.");
+ if (block.outputConnection) {
+ code.push(" var code = '...';");
+ code.push(" // TODO: Change ORDER_NONE to the correct strength.");
+ code.push(" return [code, Blockly." + language + ".ORDER_NONE];");
+ } else {
+ code.push(" var code = '..." + (lineEnd[language] || '') + "\\n';");
+ code.push(" return code;");
+ }
+ code.push("};");
+
+ return code.join('\n');
+};
+
+/**
+ * Update the language code as JSON.
+ * @param {string} blockType Name of block.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @return {string} Generanted language code.
+ * @private
+ */
+FactoryUtils.formatJson_ = function(blockType, rootBlock) {
+ var JS = {};
+ // Type is not used by Blockly, but may be used by a loader.
+ JS.type = blockType;
+ // Generate inputs.
+ var message = [];
+ var args = [];
+ var contentsBlock = rootBlock.getInputTargetBlock('INPUTS');
+ var lastInput = null;
+ while (contentsBlock) {
+ if (!contentsBlock.disabled && !contentsBlock.getInheritedDisabled()) {
+ var fields = FactoryUtils.getFieldsJson_(
+ contentsBlock.getInputTargetBlock('FIELDS'));
+ for (var i = 0; i < fields.length; i++) {
+ if (typeof fields[i] == 'string') {
+ message.push(fields[i].replace(/%/g, '%%'));
+ } else {
+ args.push(fields[i]);
+ message.push('%' + args.length);
+ }
+ }
+
+ var input = {type: contentsBlock.type};
+ // Dummy inputs don't have names. Other inputs do.
+ if (contentsBlock.type != 'input_dummy') {
+ input.name = contentsBlock.getFieldValue('INPUTNAME');
+ }
+ var check = JSON.parse(
+ FactoryUtils.getOptTypesFrom(contentsBlock, 'TYPE') || 'null');
+ if (check) {
+ input.check = check;
+ }
+ var align = contentsBlock.getFieldValue('ALIGN');
+ if (align != 'LEFT') {
+ input.align = align;
+ }
+ args.push(input);
+ message.push('%' + args.length);
+ lastInput = contentsBlock;
+ }
+ contentsBlock = contentsBlock.nextConnection &&
+ contentsBlock.nextConnection.targetBlock();
+ }
+ // Remove last input if dummy and not empty.
+ if (lastInput && lastInput.type == 'input_dummy') {
+ var fields = lastInput.getInputTargetBlock('FIELDS');
+ if (fields && FactoryUtils.getFieldsJson_(fields).join('').trim() != '') {
+ var align = lastInput.getFieldValue('ALIGN');
+ if (align != 'LEFT') {
+ JS.lastDummyAlign0 = align;
+ }
+ args.pop();
+ message.pop();
+ }
+ }
+ JS.message0 = message.join(' ');
+ if (args.length) {
+ JS.args0 = args;
+ }
+ // Generate inline/external switch.
+ if (rootBlock.getFieldValue('INLINE') == 'EXT') {
+ JS.inputsInline = false;
+ } else if (rootBlock.getFieldValue('INLINE') == 'INT') {
+ JS.inputsInline = true;
+ }
+ // Generate output, or next/previous connections.
+ switch (rootBlock.getFieldValue('CONNECTIONS')) {
+ case 'LEFT':
+ JS.output =
+ JSON.parse(
+ FactoryUtils.getOptTypesFrom(rootBlock, 'OUTPUTTYPE') || 'null');
+ break;
+ case 'BOTH':
+ JS.previousStatement =
+ JSON.parse(
+ FactoryUtils.getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+ JS.nextStatement =
+ JSON.parse(
+ FactoryUtils.getOptTypesFrom(rootBlock, 'BOTTOMTYPE') || 'null');
+ break;
+ case 'TOP':
+ JS.previousStatement =
+ JSON.parse(
+ FactoryUtils.getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+ break;
+ case 'BOTTOM':
+ JS.nextStatement =
+ JSON.parse(
+ FactoryUtils.getOptTypesFrom(rootBlock, 'BOTTOMTYPE') || 'null');
+ break;
+ }
+ // Generate colour.
+ var colourBlock = rootBlock.getInputTargetBlock('COLOUR');
+ if (colourBlock && !colourBlock.disabled) {
+ var hue = parseInt(colourBlock.getFieldValue('HUE'), 10);
+ JS.colour = hue;
+ }
+
+ JS.tooltip = FactoryUtils.getTooltipFromRootBlock_(rootBlock);
+ JS.helpUrl = FactoryUtils.getHelpUrlFromRootBlock_(rootBlock);
+
+ return JSON.stringify(JS, null, ' ');
+};
+
+/**
+ * Update the language code as JavaScript.
+ * @param {string} blockType Name of block.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
+ * @return {string} Generated language code.
+ * @private
+ */
+FactoryUtils.formatJavaScript_ = function(blockType, rootBlock, workspace) {
+ var code = [];
+ code.push("Blockly.Blocks['" + blockType + "'] = {");
+ code.push(" init: function() {");
+ // Generate inputs.
+ var TYPES = {'input_value': 'appendValueInput',
+ 'input_statement': 'appendStatementInput',
+ 'input_dummy': 'appendDummyInput'};
+ var contentsBlock = rootBlock.getInputTargetBlock('INPUTS');
+ while (contentsBlock) {
+ if (!contentsBlock.disabled && !contentsBlock.getInheritedDisabled()) {
+ var name = '';
+ // Dummy inputs don't have names. Other inputs do.
+ if (contentsBlock.type != 'input_dummy') {
+ name =
+ JSON.stringify(contentsBlock.getFieldValue('INPUTNAME'));
+ }
+ code.push(' this.' + TYPES[contentsBlock.type] + '(' + name + ')');
+ var check = FactoryUtils.getOptTypesFrom(contentsBlock, 'TYPE');
+ if (check) {
+ code.push(' .setCheck(' + check + ')');
+ }
+ var align = contentsBlock.getFieldValue('ALIGN');
+ if (align != 'LEFT') {
+ code.push(' .setAlign(Blockly.ALIGN_' + align + ')');
+ }
+ var fields = FactoryUtils.getFieldsJs_(
+ contentsBlock.getInputTargetBlock('FIELDS'));
+ for (var i = 0; i < fields.length; i++) {
+ code.push(' .appendField(' + fields[i] + ')');
+ }
+ // Add semicolon to last line to finish the statement.
+ code[code.length - 1] += ';';
+ }
+ contentsBlock = contentsBlock.nextConnection &&
+ contentsBlock.nextConnection.targetBlock();
+ }
+ // Generate inline/external switch.
+ if (rootBlock.getFieldValue('INLINE') == 'EXT') {
+ code.push(' this.setInputsInline(false);');
+ } else if (rootBlock.getFieldValue('INLINE') == 'INT') {
+ code.push(' this.setInputsInline(true);');
+ }
+ // Generate output, or next/previous connections.
+ switch (rootBlock.getFieldValue('CONNECTIONS')) {
+ case 'LEFT':
+ code.push(FactoryUtils.connectionLineJs_('setOutput', 'OUTPUTTYPE', workspace));
+ break;
+ case 'BOTH':
+ code.push(
+ FactoryUtils.connectionLineJs_('setPreviousStatement', 'TOPTYPE', workspace));
+ code.push(
+ FactoryUtils.connectionLineJs_('setNextStatement', 'BOTTOMTYPE', workspace));
+ break;
+ case 'TOP':
+ code.push(
+ FactoryUtils.connectionLineJs_('setPreviousStatement', 'TOPTYPE', workspace));
+ break;
+ case 'BOTTOM':
+ code.push(
+ FactoryUtils.connectionLineJs_('setNextStatement', 'BOTTOMTYPE', workspace));
+ break;
+ }
+ // Generate colour.
+ var colourBlock = rootBlock.getInputTargetBlock('COLOUR');
+ if (colourBlock && !colourBlock.disabled) {
+ var hue = parseInt(colourBlock.getFieldValue('HUE'), 10);
+ if (!isNaN(hue)) {
+ code.push(' this.setColour(' + hue + ');');
+ }
+ }
+
+ var tooltip = FactoryUtils.getTooltipFromRootBlock_(rootBlock);
+ var helpUrl = FactoryUtils.getHelpUrlFromRootBlock_(rootBlock);
+ code.push(' this.setTooltip(' + JSON.stringify(tooltip) + ');');
+ code.push(' this.setHelpUrl(' + JSON.stringify(helpUrl) + ');');
+ code.push(' }');
+ code.push('};');
+ return code.join('\n');
+};
+
+/**
+ * Create JS code required to create a top, bottom, or value connection.
+ * @param {string} functionName JavaScript function name.
+ * @param {string} typeName Name of type input.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
+ * @return {string} Line of JavaScript code to create connection.
+ * @private
+ */
+FactoryUtils.connectionLineJs_ = function(functionName, typeName, workspace) {
+ var type = FactoryUtils.getOptTypesFrom(
+ FactoryUtils.getRootBlock(workspace), typeName);
+ if (type) {
+ type = ', ' + type;
+ } else {
+ type = '';
+ }
+ return ' this.' + functionName + '(true' + type + ');';
+};
+
+/**
+ * Returns field strings and any config.
+ * @param {!Blockly.Block} block Input block.
+ * @return {!Array.} Field strings.
+ * @private
+ */
+FactoryUtils.getFieldsJs_ = function(block) {
+ var fields = [];
+ while (block) {
+ if (!block.disabled && !block.getInheritedDisabled()) {
+ switch (block.type) {
+ case 'field_static':
+ // Result: 'hello'
+ fields.push(JSON.stringify(block.getFieldValue('TEXT')));
+ break;
+ case 'field_label_serializable':
+ // Result: new Blockly.FieldLabelSerializable('Hello'), 'GREET'
+ fields.push('new Blockly.FieldLabelSerializable(' +
+ JSON.stringify(block.getFieldValue('TEXT')) + '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_input':
+ // Result: new Blockly.FieldTextInput('Hello'), 'GREET'
+ fields.push('new Blockly.FieldTextInput(' +
+ JSON.stringify(block.getFieldValue('TEXT')) + '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_number':
+ // Result: new Blockly.FieldNumber(10, 0, 100, 1), 'NUMBER'
+ var args = [
+ Number(block.getFieldValue('VALUE')),
+ Number(block.getFieldValue('MIN')),
+ Number(block.getFieldValue('MAX')),
+ Number(block.getFieldValue('PRECISION'))
+ ];
+ // Remove any trailing arguments that aren't needed.
+ if (args[3] == 0) {
+ args.pop();
+ if (args[2] == Infinity) {
+ args.pop();
+ if (args[1] == -Infinity) {
+ args.pop();
+ }
+ }
+ }
+ fields.push('new Blockly.FieldNumber(' + args.join(', ') + '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_angle':
+ // Result: new Blockly.FieldAngle(90), 'ANGLE'
+ fields.push('new Blockly.FieldAngle(' +
+ Number(block.getFieldValue('ANGLE')) + '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_checkbox':
+ // Result: new Blockly.FieldCheckbox('TRUE'), 'CHECK'
+ fields.push('new Blockly.FieldCheckbox(' +
+ JSON.stringify(block.getFieldValue('CHECKED')) +
+ '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_colour':
+ // Result: new Blockly.FieldColour('#ff0000'), 'COLOUR'
+ fields.push('new Blockly.FieldColour(' +
+ JSON.stringify(block.getFieldValue('COLOUR')) +
+ '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_date':
+ // Result: new Blockly.FieldDate('2015-02-04'), 'DATE'
+ fields.push('new Blockly.FieldDate(' +
+ JSON.stringify(block.getFieldValue('DATE')) + '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_variable':
+ // Result: new Blockly.FieldVariable('item'), 'VAR'
+ var varname
+ = JSON.stringify(block.getFieldValue('TEXT') || null);
+ fields.push('new Blockly.FieldVariable(' + varname + '), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_dropdown':
+ // Result:
+ // new Blockly.FieldDropdown([['yes', '1'], ['no', '0']]), 'TOGGLE'
+ var options = [];
+ for (var i = 0; i < block.optionList_.length; i++) {
+ options[i] = JSON.stringify([block.getUserData(i),
+ block.getFieldValue('CPU' + i)]);
+ }
+ if (options.length) {
+ fields.push('new Blockly.FieldDropdown([' +
+ options.join(', ') + ']), ' +
+ JSON.stringify(block.getFieldValue('FIELDNAME')));
+ }
+ break;
+ case 'field_image':
+ // Result: new Blockly.FieldImage('http://...', 80, 60, '*')
+ var src = JSON.stringify(block.getFieldValue('SRC'));
+ var width = Number(block.getFieldValue('WIDTH'));
+ var height = Number(block.getFieldValue('HEIGHT'));
+ var alt = JSON.stringify(block.getFieldValue('ALT'));
+ var flipRtl = JSON.stringify(block.getFieldValue('FLIP_RTL'));
+ fields.push('new Blockly.FieldImage(' +
+ src + ', ' + width + ', ' + height +
+ ', { alt: ' + alt + ', flipRtl: ' + flipRtl + ' })');
+ break;
+ }
+ }
+ block = block.nextConnection && block.nextConnection.targetBlock();
+ }
+ return fields;
+};
+
+/**
+ * Returns field strings and any config.
+ * @param {!Blockly.Block} block Input block.
+ * @return {!Array.} Array of static text and field configs.
+ * @private
+ */
+FactoryUtils.getFieldsJson_ = function(block) {
+ var fields = [];
+ while (block) {
+ if (!block.disabled && !block.getInheritedDisabled()) {
+ switch (block.type) {
+ case 'field_static':
+ // Result: 'hello'
+ fields.push(block.getFieldValue('TEXT'));
+ break;
+ case 'field_label_serializable':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ text: block.getFieldValue('TEXT')
+ });
+ break;
+ case 'field_input':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ text: block.getFieldValue('TEXT')
+ });
+ break;
+ case 'field_number':
+ var obj = {
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ value: Number(block.getFieldValue('VALUE'))
+ };
+ var min = Number(block.getFieldValue('MIN'));
+ if (min > -Infinity) {
+ obj.min = min;
+ }
+ var max = Number(block.getFieldValue('MAX'));
+ if (max < Infinity) {
+ obj.max = max;
+ }
+ var precision = Number(block.getFieldValue('PRECISION'));
+ if (precision) {
+ obj.precision = precision;
+ }
+ fields.push(obj);
+ break;
+ case 'field_angle':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ angle: Number(block.getFieldValue('ANGLE'))
+ });
+ break;
+ case 'field_checkbox':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ checked: block.getFieldValue('CHECKED') == 'TRUE'
+ });
+ break;
+ case 'field_colour':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ colour: block.getFieldValue('COLOUR')
+ });
+ break;
+ case 'field_date':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ date: block.getFieldValue('DATE')
+ });
+ break;
+ case 'field_variable':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ variable: block.getFieldValue('TEXT') || null
+ });
+ break;
+ case 'field_dropdown':
+ var options = [];
+ for (var i = 0; i < block.optionList_.length; i++) {
+ options[i] = [block.getUserData(i),
+ block.getFieldValue('CPU' + i)];
+ }
+ if (options.length) {
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ options: options
+ });
+ }
+ break;
+ case 'field_image':
+ fields.push({
+ type: block.type,
+ src: block.getFieldValue('SRC'),
+ width: Number(block.getFieldValue('WIDTH')),
+ height: Number(block.getFieldValue('HEIGHT')),
+ alt: block.getFieldValue('ALT'),
+ flipRtl: block.getFieldValue('FLIP_RTL') == 'TRUE'
+ });
+ break;
+ }
+ }
+ block = block.nextConnection && block.nextConnection.targetBlock();
+ }
+ return fields;
+};
+
+/**
+ * Fetch the type(s) defined in the given input.
+ * Format as a string for appending to the generated code.
+ * @param {!Blockly.Block} block Block with input.
+ * @param {string} name Name of the input.
+ * @return {?string} String defining the types.
+ */
+FactoryUtils.getOptTypesFrom = function(block, name) {
+ var types = FactoryUtils.getTypesFrom_(block, name);
+ if (types.length == 0) {
+ return undefined;
+ } else if (types.indexOf('null') != -1) {
+ return 'null';
+ } else if (types.length == 1) {
+ return types[0];
+ } else {
+ return '[' + types.join(', ') + ']';
+ }
+};
+
+
+/**
+ * Fetch the type(s) defined in the given input.
+ * @param {!Blockly.Block} block Block with input.
+ * @param {string} name Name of the input.
+ * @return {!Array.} List of types.
+ * @private
+ */
+FactoryUtils.getTypesFrom_ = function(block, name) {
+ var typeBlock = block.getInputTargetBlock(name);
+ var types;
+ if (!typeBlock || typeBlock.disabled) {
+ types = [];
+ } else if (typeBlock.type == 'type_other') {
+ types = [JSON.stringify(typeBlock.getFieldValue('TYPE'))];
+ } else if (typeBlock.type == 'type_group') {
+ types = [];
+ for (var n = 0; n < typeBlock.typeCount_; n++) {
+ types = types.concat(FactoryUtils.getTypesFrom_(typeBlock, 'TYPE' + n));
+ }
+ // Remove duplicates.
+ var hash = Object.create(null);
+ for (var n = types.length - 1; n >= 0; n--) {
+ if (hash[types[n]]) {
+ types.splice(n, 1);
+ }
+ hash[types[n]] = true;
+ }
+ } else {
+ types = [JSON.stringify(typeBlock.valueType)];
+ }
+ return types;
+};
+
+/**
+ * Return the uneditable container block that everything else attaches to in
+ * given workspace.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
+ * @return {Blockly.Block} Root block.
+ */
+FactoryUtils.getRootBlock = function(workspace) {
+ var blocks = workspace.getTopBlocks(false);
+ for (var i = 0, block; block = blocks[i]; i++) {
+ if (block.type == 'factory_base') {
+ return block;
+ }
+ }
+ return null;
+};
+
+// TODO(quachtina96): Move hide, show, makeInvisible, and makeVisible to a new
+// AppView namespace.
+
+/**
+ * Hides element so that it's invisible and doesn't take up space.
+ * @param {string} elementID ID of element to hide.
+ */
+FactoryUtils.hide = function(elementID) {
+ document.getElementById(elementID).style.display = 'none';
+};
+
+/**
+ * Un-hides an element.
+ * @param {string} elementID ID of element to hide.
+ */
+FactoryUtils.show = function(elementID) {
+ document.getElementById(elementID).style.display = 'block';
+};
+
+/**
+ * Hides element so that it's invisible but still takes up space.
+ * @param {string} elementID ID of element to hide.
+ */
+FactoryUtils.makeInvisible = function(elementID) {
+ document.getElementById(elementID).visibility = 'hidden';
+};
+
+/**
+ * Makes element visible.
+ * @param {string} elementID ID of element to hide.
+ */
+FactoryUtils.makeVisible = function(elementID) {
+ document.getElementById(elementID).visibility = 'visible';
+};
+
+/**
+ * Create a file with the given attributes and download it.
+ * @param {string} contents The contents of the file.
+ * @param {string} filename The name of the file to save to.
+ * @param {string} fileType The type of the file to save.
+ */
+FactoryUtils.createAndDownloadFile = function(contents, filename, fileType) {
+ var data = new Blob([contents], {type: 'text/' + fileType});
+ var clickEvent = new MouseEvent("click", {
+ "view": window,
+ "bubbles": true,
+ "cancelable": false
+ });
+
+ var a = document.createElement('a');
+ a.href = window.URL.createObjectURL(data);
+ a.download = filename;
+ a.textContent = 'Download file!';
+ a.dispatchEvent(clickEvent);
+};
+
+/**
+ * Get Blockly Block by rendering pre-defined block in workspace.
+ * @param {!Element} blockType Type of block that has already been defined.
+ * @param {!Blockly.Workspace} workspace Workspace on which to render
+ * the block.
+ * @return {!Blockly.Block} The Blockly.Block of desired type.
+ */
+FactoryUtils.getDefinedBlock = function(blockType, workspace) {
+ workspace.clear();
+ return workspace.newBlock(blockType);
+};
+
+/**
+ * Parses a block definition get the type of the block it defines.
+ * @param {string} blockDef A single block definition.
+ * @return {string} Type of block defined by the given definition.
+ */
+FactoryUtils.getBlockTypeFromJsDefinition = function(blockDef) {
+ var indexOfStartBracket = blockDef.indexOf('[\'');
+ var indexOfEndBracket = blockDef.indexOf('\']');
+ if (indexOfStartBracket != -1 && indexOfEndBracket != -1) {
+ return blockDef.substring(indexOfStartBracket + 2, indexOfEndBracket);
+ } else {
+ throw Error('Could not parse block type out of JavaScript block ' +
+ 'definition. Brackets normally enclosing block type not found.');
+ }
+};
+
+/**
+ * Generates a category containing blocks of the specified block types.
+ * @param {!Array.} blocks Blocks to include in the category.
+ * @param {string} categoryName Name to use for the generated category.
+ * @return {!Element} Category XML containing the given block types.
+ */
+FactoryUtils.generateCategoryXml = function(blocks, categoryName) {
+ // Create category DOM element.
+ var categoryElement = Blockly.utils.xml.createElement('category');
+ categoryElement.setAttribute('name', categoryName);
+
+ // For each block, add block element to category.
+ for (var i = 0, block; block = blocks[i]; i++) {
+
+ // Get preview block XML.
+ var blockXml = Blockly.Xml.blockToDom(block);
+ blockXml.removeAttribute('id');
+
+ // Add block to category and category to XML.
+ categoryElement.appendChild(blockXml);
+ }
+ return categoryElement;
+};
+
+/**
+ * Parses a string containing JavaScript block definition(s) to create an array
+ * in which each element is a single block definition.
+ * @param {string} blockDefsString JavaScript block definition(s).
+ * @return {!Array.} Array of block definitions.
+ */
+FactoryUtils.parseJsBlockDefinitions = function(blockDefsString) {
+ var blockDefArray = [];
+ var defStart = blockDefsString.indexOf('Blockly.Blocks');
+
+ while (blockDefsString.indexOf('Blockly.Blocks', defStart) != -1) {
+ var nextStart = blockDefsString.indexOf('Blockly.Blocks', defStart + 1);
+ if (nextStart == -1) {
+ // This is the last block definition.
+ nextStart = blockDefsString.length;
+ }
+ var blockDef = blockDefsString.substring(defStart, nextStart);
+ blockDefArray.push(blockDef);
+ defStart = nextStart;
+ }
+ return blockDefArray;
+};
+
+/**
+ * Parses a string containing JSON block definition(s) to create an array
+ * in which each element is a single block definition. Expected input is
+ * one or more block definitions in the form of concatenated, stringified
+ * JSON objects.
+ * @param {string} blockDefsString String containing JSON block
+ * definition(s).
+ * @return {!Array.} Array of block definitions.
+ */
+FactoryUtils.parseJsonBlockDefinitions = function(blockDefsString) {
+ var blockDefArray = [];
+ var unbalancedBracketCount = 0;
+ var defStart = 0;
+ // Iterate through the blockDefs string. Keep track of whether brackets
+ // are balanced.
+ for (var i = 0; i < blockDefsString.length; i++) {
+ var currentChar = blockDefsString[i];
+ if (currentChar == '{') {
+ unbalancedBracketCount++;
+ }
+ else if (currentChar == '}') {
+ unbalancedBracketCount--;
+ if (unbalancedBracketCount == 0 && i > 0) {
+ // The brackets are balanced. We've got a complete block defintion.
+ var blockDef = blockDefsString.substring(defStart, i + 1);
+ blockDefArray.push(blockDef);
+ defStart = i + 1;
+ }
+ }
+ }
+ return blockDefArray;
+};
+
+/**
+ * Define blocks from imported block definitions.
+ * @param {string} blockDefsString Block definition(s).
+ * @param {string} format Block definition format ('JSON' or 'JavaScript').
+ * @return {!Array.} Array of block types defined.
+ */
+FactoryUtils.defineAndGetBlockTypes = function(blockDefsString, format) {
+ var blockTypes = [];
+
+ // Define blocks and get block types.
+ if (format == 'JSON') {
+ var blockDefArray = FactoryUtils.parseJsonBlockDefinitions(blockDefsString);
+
+ // Populate array of blocktypes and define each block.
+ for (var i = 0, blockDef; blockDef = blockDefArray[i]; i++) {
+ var json = JSON.parse(blockDef);
+ blockTypes.push(json.type);
+
+ // Define the block.
+ Blockly.Blocks[json.type] = {
+ init: function() {
+ this.jsonInit(json);
+ }
+ };
+ }
+ } else if (format == 'JavaScript') {
+ var blockDefArray = FactoryUtils.parseJsBlockDefinitions(blockDefsString);
+
+ // Populate array of block types.
+ for (var i = 0, blockDef; blockDef = blockDefArray[i]; i++) {
+ var blockType = FactoryUtils.getBlockTypeFromJsDefinition(blockDef);
+ blockTypes.push(blockType);
+ }
+
+ // Define all blocks.
+ eval(blockDefsString);
+ }
+
+ return blockTypes;
+};
+
+/**
+ * Inject code into a pre tag, with syntax highlighting.
+ * Safe from HTML/script injection.
+ * @param {string} code Lines of code.
+ * @param {string} id ID of
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 20 65 120 160 210 230 260 290 330
+
+
+
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 1
+
+
+
+
+ 10
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 1
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 45
+
+
+
+
+
+
+ 0
+
+
+
+
+
+
+ 3.1
+
+
+
+
+
+
+ 64
+
+
+
+
+ 10
+
+
+
+
+
+
+ 50
+
+
+
+
+ 1
+
+
+
+
+ 100
+
+
+
+
+
+
+ 1
+
+
+
+
+ 100
+
+
+
+
+
+
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+
+
+
+
+
+
+ text
+
+
+
+
+ abc
+
+
+
+
+
+
+ text
+
+
+
+
+
+
+ text
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+ 100
+
+
+
+
+ 50
+
+
+
+
+ 0
+
+
+
+
+
+
+ #ff0000
+
+
+
+
+ #3333ff
+
+
+
+
+ 0.5
+
+
+
+
+
+
+
+
diff --git a/js/demos/blockfactory/link.png b/js/demos/blockfactory/link.png
new file mode 100644
index 0000000..11dfd82
Binary files /dev/null and b/js/demos/blockfactory/link.png differ
diff --git a/js/demos/blockfactory/standard_categories.js b/js/demos/blockfactory/standard_categories.js
new file mode 100644
index 0000000..95c3324
--- /dev/null
+++ b/js/demos/blockfactory/standard_categories.js
@@ -0,0 +1,392 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Contains a map of standard Blockly categories used to load
+ * standard Blockly categories into the user's toolbox. The map is keyed by
+ * the lower case name of the category, and contains the Category object for
+ * that particular category. Also has a list of core block types provided
+ * by Blockly.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+ 'use strict';
+
+/**
+ * Namespace for StandardCategories
+ */
+var StandardCategories = StandardCategories || Object.create(null);
+
+
+// Map of standard category information necessary to add a standard category
+// to the toolbox.
+StandardCategories.categoryMap = Object.create(null);
+
+StandardCategories.categoryMap['logic'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Logic');
+StandardCategories.categoryMap['logic'].xml =
+ Blockly.Xml.textToDom(
+ '' +
+ ' ');
+StandardCategories.categoryMap['logic'].hue = 210;
+
+StandardCategories.categoryMap['loops'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Loops');
+StandardCategories.categoryMap['loops'].xml =
+ Blockly.Xml.textToDom(
+ '' +
+ '' +
+ '' +
+ '' +
+ '10 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '1 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '10 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '1 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ');
+StandardCategories.categoryMap['loops'].hue = 120;
+
+StandardCategories.categoryMap['math'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Math');
+StandardCategories.categoryMap['math'].xml =
+ Blockly.Xml.textToDom(
+ '' +
+ '' +
+ '' +
+ '' +
+ '1 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '1 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '9 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '45 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '0 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '3.1 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '64 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '10 '+
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '50 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '1 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '100 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '1 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '100 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ');
+StandardCategories.categoryMap['math'].hue = 230;
+
+StandardCategories.categoryMap['text'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Text');
+StandardCategories.categoryMap['text'].xml =
+ Blockly.Xml.textToDom(
+ '' +
+ '' +
+ '' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'abc ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'text ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ 'abc ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'text ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'text ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'abc ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'abc ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'abc ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'abc ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ');
+StandardCategories.categoryMap['text'].hue = 160;
+
+StandardCategories.categoryMap['lists'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Lists');
+StandardCategories.categoryMap['lists'].xml =
+ Blockly.Xml.textToDom(
+ '' +
+ '' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '5 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'list ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'list ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'list ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ 'list ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ ', ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ');
+StandardCategories.categoryMap['lists'].hue = 260;
+
+StandardCategories.categoryMap['colour'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Colour');
+StandardCategories.categoryMap['colour'].xml =
+ Blockly.Xml.textToDom(
+ '' +
+ '' +
+ '' +
+ '' +
+ '100 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '50 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '0 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '' +
+ '#ff0000 ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '#3333ff ' +
+ ' ' +
+ ' ' +
+ '' +
+ '' +
+ '0.5 ' +
+ ' ' +
+ ' ' +
+ ' ' +
+ ' ');
+StandardCategories.categoryMap['colour'].hue = 20;
+
+StandardCategories.categoryMap['functions'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Functions');
+StandardCategories.categoryMap['functions'].hue = 290;
+StandardCategories.categoryMap['functions'].custom = 'PROCEDURE';
+
+StandardCategories.categoryMap['variables'] =
+ new ListElement(ListElement.TYPE_CATEGORY, 'Variables');
+StandardCategories.categoryMap['variables'].hue = 330;
+StandardCategories.categoryMap['variables'].custom = 'VARIABLE';
+
+// All standard block types in provided in Blockly core.
+StandardCategories.coreBlockTypes = ["controls_if", "logic_compare",
+ "logic_operation", "logic_negate", "logic_boolean", "logic_null",
+ "logic_ternary", "controls_repeat_ext", "controls_whileUntil",
+ "controls_for", "controls_forEach", "controls_flow_statements",
+ "math_number", "math_arithmetic", "math_single", "math_trig",
+ "math_constant", "math_number_property", "math_change", "math_round",
+ "math_on_list", "math_modulo", "math_constrain", "math_random_int",
+ "math_random_float", "text", "text_join", "text_append", "text_length",
+ "text_isEmpty", "text_indexOf", "variables_get", "text_charAt",
+ "text_getSubstring", "text_changeCase", "text_trim", "text_print",
+ "text_prompt_ext", "colour_picker", "colour_random", "colour_rgb",
+ "colour_blend", "lists_create_with", "lists_repeat", "lists_length",
+ "lists_isEmpty", "lists_indexOf", "lists_getIndex", "lists_setIndex",
+ "lists_getSublist", "lists_split", "lists_sort", "variables_set",
+ "procedures_defreturn", "procedures_ifreturn", "procedures_defnoreturn",
+ "procedures_callreturn"];
diff --git a/js/demos/blockfactory/workspacefactory/wfactory_controller.js b/js/demos/blockfactory/workspacefactory/wfactory_controller.js
new file mode 100644
index 0000000..30f032e
--- /dev/null
+++ b/js/demos/blockfactory/workspacefactory/wfactory_controller.js
@@ -0,0 +1,1348 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Contains the controller code for workspace factory. Depends
+ * on the model and view objects (created as internal variables) and interacts
+ * with previewWorkspace and toolboxWorkspace (internal references stored to
+ * both). Also depends on standard_categories.js for standard Blockly
+ * categories. Provides the functionality for the actions the user can initiate:
+ * - adding and removing categories
+ * - switching between categories
+ * - printing and downloading configuration xml
+ * - updating the preview workspace
+ * - changing a category name
+ * - moving the position of a category.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+
+/**
+ * Class for a WorkspaceFactoryController
+ * @param {string} toolboxName Name of workspace toolbox XML.
+ * @param {string} toolboxDiv Name of div to inject toolbox workspace in.
+ * @param {string} previewDiv Name of div to inject preview workspace in.
+ * @constructor
+ */
+WorkspaceFactoryController = function(toolboxName, toolboxDiv, previewDiv) {
+ // Toolbox XML element for the editing workspace.
+ this.toolbox = document.getElementById(toolboxName);
+
+ // Workspace for user to drag blocks in for a certain category.
+ this.toolboxWorkspace = Blockly.inject(toolboxDiv,
+ {grid:
+ {spacing: 25,
+ length: 3,
+ colour: '#ccc',
+ snap: true},
+ media: '../../media/',
+ toolbox: this.toolbox
+ });
+
+ // Workspace for user to preview their changes.
+ this.previewWorkspace = Blockly.inject(previewDiv,
+ {grid:
+ {spacing: 25,
+ length: 3,
+ colour: '#ccc',
+ snap: true},
+ media: '../../media/',
+ toolbox: '} libBlockTypes Array of block types from the block
+ * library.
+ */
+WorkspaceFactoryController.prototype.setBlockLibCategory =
+ function(categoryXml, libBlockTypes) {
+ var blockLibCategory = document.getElementById('blockLibCategory');
+
+ // Set category ID so that it can be easily replaced, and set a standard,
+ // arbitrary block library color.
+ categoryXml.id = 'blockLibCategory';
+ categoryXml.setAttribute('colour', 260);
+
+ // Update the toolbox and toolboxWorkspace.
+ this.toolbox.replaceChild(categoryXml, blockLibCategory);
+ this.toolboxWorkspace.toolbox_.clearSelection();
+ this.toolboxWorkspace.updateToolbox(this.toolbox);
+
+ // Update the block library types.
+ this.model.updateLibBlockTypes(libBlockTypes);
+
+ // Reload XML on page to account for blocks now defined or undefined in block
+ // library.
+ this.clearAndLoadXml_(Blockly.Xml.workspaceToDom(this.toolboxWorkspace));
+};
+
+/**
+ * Return the block types used in the custom toolbox and pre-loaded workspace.
+ * @return {!Array.} Block types used in the custom toolbox and
+ * pre-loaded workspace.
+ */
+WorkspaceFactoryController.prototype.getAllUsedBlockTypes = function() {
+ return this.model.getAllUsedBlockTypes();
+};
+
+/**
+ * Determines if a block loaded in the workspace has a definition (if it
+ * is a standard block, is defined in the block library, or has a definition
+ * imported).
+ * @param {!Blockly.Block} block The block to examine.
+ */
+WorkspaceFactoryController.prototype.isDefinedBlock = function(block) {
+ return this.model.isDefinedBlockType(block.type);
+};
+
+/**
+ * Sets a warning on blocks loaded to the workspace that are not defined.
+ * @private
+ */
+WorkspaceFactoryController.prototype.warnForUndefinedBlocks_ = function() {
+ var blocks = this.toolboxWorkspace.getAllBlocks(false);
+ for (var i = 0, block; block = blocks[i]; i++) {
+ if (!this.isDefinedBlock(block)) {
+ block.setWarningText(block.type + ' is not defined (it is not a ' +
+ 'standard block,\nin your block library, or an imported block)');
+ }
+ }
+};
+
+/**
+ * Determines if a standard variable category is in the custom toolbox.
+ * @return {boolean} True if a variables category is in use, false otherwise.
+ */
+WorkspaceFactoryController.prototype.hasVariablesCategory = function() {
+ return this.model.hasVariables();
+};
+
+/**
+ * Determines if a standard procedures category is in the custom toolbox.
+ * @return {boolean} True if a procedures category is in use, false otherwise.
+ */
+WorkspaceFactoryController.prototype.hasProceduresCategory = function() {
+ return this.model.hasProcedures();
+};
+
+/**
+ * Determines if there are any unsaved changes in workspace factory.
+ * @return {boolean} True if there are unsaved changes, false otherwise.
+ */
+WorkspaceFactoryController.prototype.hasUnsavedChanges = function() {
+ return this.hasUnsavedToolboxChanges || this.hasUnsavedPreloadChanges;
+};
diff --git a/js/demos/blockfactory/workspacefactory/wfactory_generator.js b/js/demos/blockfactory/workspacefactory/wfactory_generator.js
new file mode 100644
index 0000000..a58c565
--- /dev/null
+++ b/js/demos/blockfactory/workspacefactory/wfactory_generator.js
@@ -0,0 +1,237 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Generates the configuration XML used to update the preview
+ * workspace or print to the console or download to a file. Leverages
+ * Blockly.Xml and depends on information in the model (holds a reference).
+ * Depends on a hidden workspace created in the generator to load saved XML in
+ * order to generate toolbox XML.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+
+
+/**
+ * Class for a WorkspaceFactoryGenerator
+ * @constructor
+ */
+WorkspaceFactoryGenerator = function(model) {
+ // Model to share information about categories and shadow blocks.
+ this.model = model;
+ // Create hidden workspace to load saved XML to generate toolbox XML.
+ var hiddenBlocks = document.createElement('div');
+ // Generate a globally unique ID for the hidden div element to avoid
+ // collisions.
+ var hiddenBlocksId = Blockly.utils.genUid();
+ hiddenBlocks.id = hiddenBlocksId;
+ hiddenBlocks.style.display = 'none';
+ document.body.appendChild(hiddenBlocks);
+ this.hiddenWorkspace = Blockly.inject(hiddenBlocksId);
+};
+
+/**
+ * Generates the XML for the toolbox or flyout with information from
+ * toolboxWorkspace and the model. Uses the hiddenWorkspace to generate XML.
+ * Save state of workspace in model (saveFromWorkspace) before calling if
+ * changes might have been made to the selected category.
+ * @param {!Blockly.workspace} toolboxWorkspace Toolbox editing workspace where
+ * blocks are added by user to be part of the toolbox.
+ * @return {!Element} XML element representing toolbox or flyout corresponding
+ * to toolbox workspace.
+ */
+WorkspaceFactoryGenerator.prototype.generateToolboxXml = function() {
+ // Create DOM for XML.
+ var xmlDom = Blockly.utils.xml.createElement('xml');
+ xmlDom.id = 'toolbox';
+ xmlDom.setAttribute('style', 'display: none');
+
+ if (!this.model.hasElements()) {
+ // Toolbox has no categories. Use XML directly from workspace.
+ this.loadToHiddenWorkspace_(this.model.getSelectedXml());
+ this.appendHiddenWorkspaceToDom_(xmlDom);
+ } else {
+ // Toolbox has categories.
+ // Assert that selected != null
+ if (!this.model.getSelected()) {
+ throw Error('Selected is null when the toolbox is empty.');
+ }
+
+ var xml = this.model.getSelectedXml();
+ var toolboxList = this.model.getToolboxList();
+
+ // Iterate through each category to generate XML for each using the
+ // hidden workspace. Load each category to the hidden workspace to make sure
+ // that all the blocks that are not top blocks are also captured as block
+ // groups in the flyout.
+ for (var i = 0; i < toolboxList.length; i++) {
+ var element = toolboxList[i];
+ if (element.type == ListElement.TYPE_SEPARATOR) {
+ // If the next element is a separator.
+ var nextElement = Blockly.utils.xml.createElement('sep');
+ } else if (element.type == ListElement.TYPE_CATEGORY) {
+ // If the next element is a category.
+ var nextElement = Blockly.utils.xml.createElement('category');
+ nextElement.setAttribute('name', element.name);
+ // Add a colour attribute if one exists.
+ if (element.color != null) {
+ nextElement.setAttribute('colour', element.color);
+ }
+ // Add a custom attribute if one exists.
+ if (element.custom != null) {
+ nextElement.setAttribute('custom', element.custom);
+ }
+ // Load that category to hidden workspace, setting user-generated shadow
+ // blocks as real shadow blocks.
+ this.loadToHiddenWorkspace_(element.xml);
+ this.appendHiddenWorkspaceToDom_(nextElement);
+ }
+ xmlDom.appendChild(nextElement);
+ }
+ }
+ return xmlDom;
+ };
+
+
+ /**
+ * Generates XML for the workspace (different from generateConfigXml in that
+ * it includes XY and ID attributes). Uses a workspace and converts user
+ * generated shadow blocks to actual shadow blocks.
+ * @return {!Element} XML element representing toolbox or flyout corresponding
+ * to toolbox workspace.
+ */
+WorkspaceFactoryGenerator.prototype.generateWorkspaceXml = function() {
+ // Load workspace XML to hidden workspace with user-generated shadow blocks
+ // as actual shadow blocks.
+ this.hiddenWorkspace.clear();
+ Blockly.Xml.domToWorkspace(this.model.getPreloadXml(), this.hiddenWorkspace);
+ this.setShadowBlocksInHiddenWorkspace_();
+
+ // Generate XML and set attributes.
+ var xmlDom = Blockly.Xml.workspaceToDom(this.hiddenWorkspace);
+ xmlDom.id = 'workspaceBlocks';
+ xmlDom.setAttribute('style', 'display: none');
+ return xmlDom;
+};
+
+/**
+ * Generates a string representation of the options object for injecting the
+ * workspace and starter code.
+ * @return {string} String representation of starter code for injecting.
+ */
+WorkspaceFactoryGenerator.prototype.generateInjectString = function() {
+ var addAttributes = function(obj, tabChar) {
+ if (!obj) {
+ return '{}\n';
+ }
+ var str = '';
+ for (var key in obj) {
+ if (key == 'grid' || key == 'zoom') {
+ var temp = tabChar + key + ' : {\n' + addAttributes(obj[key],
+ tabChar + '\t') + tabChar + '}, \n';
+ } else if (typeof obj[key] == 'string') {
+ var temp = tabChar + key + ' : \'' + obj[key] + '\', \n';
+ } else {
+ var temp = tabChar + key + ' : ' + obj[key] + ', \n';
+ }
+ str += temp;
+ }
+ var lastCommaIndex = str.lastIndexOf(',');
+ str = str.slice(0, lastCommaIndex) + '\n';
+ return str;
+ };
+
+ var attributes = addAttributes(this.model.options, '\t');
+ if (!this.model.options['readOnly']) {
+ attributes = '\ttoolbox : toolbox, \n' +
+ attributes;
+ }
+ var finalStr = '/* TODO: Change toolbox XML ID if necessary. Can export ' +
+ 'toolbox XML from Workspace Factory. */\n' +
+ 'var toolbox = document.getElementById("toolbox");\n\n';
+ finalStr += 'var options = { \n' + attributes + '};';
+ finalStr += '\n\n/* Inject your workspace */ \nvar workspace = Blockly.' +
+ 'inject(/* TODO: Add ID of div to inject Blockly into */, options);';
+ finalStr += '\n\n/* Load Workspace Blocks from XML to workspace. ' +
+ 'Remove all code below if no blocks to load */\n\n' +
+ '/* TODO: Change workspace blocks XML ID if necessary. Can export' +
+ ' workspace blocks XML from Workspace Factory. */\n' +
+ 'var workspaceBlocks = document.getElementById("workspaceBlocks"); \n\n' +
+ '/* Load blocks to workspace. */\n' +
+ 'Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);';
+ return finalStr;
+};
+
+/**
+ * Loads the given XML to the hidden workspace and sets any user-generated
+ * shadow blocks to be actual shadow blocks.
+ * @param {!Element} xml The XML to be loaded to the hidden workspace.
+ * @private
+ */
+WorkspaceFactoryGenerator.prototype.loadToHiddenWorkspace_ = function(xml) {
+ this.hiddenWorkspace.clear();
+ Blockly.Xml.domToWorkspace(xml, this.hiddenWorkspace);
+ this.setShadowBlocksInHiddenWorkspace_();
+};
+
+/**
+ * Encodes blocks in the hidden workspace in a XML DOM element. Very
+ * similar to workspaceToDom, but doesn't capture IDs. Uses the top-level
+ * blocks loaded in hiddenWorkspace.
+ * @private
+ * @param {!Element} xmlDom Tree of XML elements to be appended to.
+ */
+WorkspaceFactoryGenerator.prototype.appendHiddenWorkspaceToDom_ =
+ function(xmlDom) {
+ var blocks = this.hiddenWorkspace.getTopBlocks();
+ for (var i = 0, block; block = blocks[i]; i++) {
+ var blockChild = Blockly.Xml.blockToDom(block, /* opt_noId */ true);
+ xmlDom.appendChild(blockChild);
+ }
+};
+
+/**
+ * Sets the user-generated shadow blocks loaded into hiddenWorkspace to be
+ * actual shadow blocks. This is done so that blockToDom records them as
+ * shadow blocks instead of regular blocks.
+ * @private
+ */
+WorkspaceFactoryGenerator.prototype.setShadowBlocksInHiddenWorkspace_ =
+ function() {
+ var blocks = this.hiddenWorkspace.getAllBlocks(false);
+ for (var i = 0; i < blocks.length; i++) {
+ if (this.model.isShadowBlock(blocks[i].id)) {
+ blocks[i].setShadow(true);
+ }
+ }
+};
+
+/**
+ * Given a set of block types, gets the Blockly.Block objects for each block
+ * type.
+ * @param {!Array.} blockTypes Array of blocks that have been defined.
+ * @return {!Array.} Array of Blockly.Block objects corresponding
+ * to the array of blockTypes.
+ */
+WorkspaceFactoryGenerator.prototype.getDefinedBlocks = function(blockTypes) {
+ var blocks = [];
+ for (var i = 0; i < blockTypes.length ; i++) {
+ blocks.push(FactoryUtils.getDefinedBlock(blockTypes[i],
+ this.hiddenWorkspace));
+ }
+ return blocks;
+};
diff --git a/js/demos/blockfactory/workspacefactory/wfactory_init.js b/js/demos/blockfactory/workspacefactory/wfactory_init.js
new file mode 100644
index 0000000..f99e856
--- /dev/null
+++ b/js/demos/blockfactory/workspacefactory/wfactory_init.js
@@ -0,0 +1,554 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Contains the init functions for the workspace factory tab.
+ * Adds click handlers to buttons and dropdowns, adds event listeners for
+ * keydown events and Blockly events, and configures the initial setup of
+ * the page.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+
+/**
+ * Namespace for workspace factory initialization methods.
+ * @namespace
+ */
+WorkspaceFactoryInit = {};
+
+/**
+ * Initialization for workspace factory tab.
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ */
+WorkspaceFactoryInit.initWorkspaceFactory = function(controller) {
+ // 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;
+
+ this.initColourPicker_(controller);
+ this.addWorkspaceFactoryEventListeners_(controller);
+ this.assignWorkspaceFactoryClickHandlers_(controller);
+ this.addWorkspaceFactoryOptionsListeners_(controller);
+
+ // Check standard options and apply the changes to update the view.
+ controller.setStandardOptionsAndUpdate();
+};
+
+/**
+ * Initialize the colour picker in workspace factory.
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ * @private
+ */
+WorkspaceFactoryInit.initColourPicker_ = function(controller) {
+ // Array of Blockly category colours, consistent with the colour defaults.
+ var colours = [20, 65, 120, 160, 210, 230, 260, 290, 330, ''];
+ // Convert hue numbers to RRGGBB strings.
+ for (var i = 0; i < colours.length; i++) {
+ if (colours[i] !== '') {
+ colours[i] = Blockly.hueToHex(colours[i]).substring(1);
+ }
+ }
+ // Convert to 2D array.
+ var maxCols = Math.ceil(Math.sqrt(colours.length));
+ var grid = [];
+ var row = [];
+ for (var i = 0; i < colours.length; i++) {
+ row.push(colours[i]);
+ if (row.length == maxCols) {
+ grid.push(row);
+ row = [];
+ }
+ }
+ if (row.length) {
+ grid.push(row);
+ }
+
+ // Override the default colours.
+ cp_grid = grid;
+};
+
+/**
+ * Assign click handlers for workspace factory.
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ * @private
+ */
+WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
+ function(controller) {
+
+ // Import Custom Blocks button.
+ document.getElementById('button_importBlocks').addEventListener
+ ('click',
+ function() {
+ blocklyFactory.openModal('dropdownDiv_importBlocks');
+ });
+ document.getElementById('input_importBlocksJson').addEventListener
+ ('change',
+ function() {
+ controller.importBlocks(event.target.files[0], 'JSON');
+ });
+ document.getElementById('input_importBlocksJson').addEventListener
+ ('click', function() {blocklyFactory.closeModal()});
+ document.getElementById('input_importBlocksJs').addEventListener
+ ('change',
+ function() {
+ controller.importBlocks(event.target.files[0], 'JavaScript');
+ });
+ document.getElementById('input_importBlocksJs').addEventListener
+ ('click', function() {blocklyFactory.closeModal()});
+
+ // Load to Edit button.
+ document.getElementById('button_load').addEventListener
+ ('click',
+ function() {
+ blocklyFactory.openModal('dropdownDiv_load');
+ });
+ document.getElementById('input_loadToolbox').addEventListener
+ ('change',
+ function() {
+ controller.importFile(event.target.files[0],
+ WorkspaceFactoryController.MODE_TOOLBOX);
+ });
+ document.getElementById('input_loadToolbox').addEventListener
+ ('click', function() {blocklyFactory.closeModal()});
+ document.getElementById('input_loadPreload').addEventListener
+ ('change',
+ function() {
+ controller.importFile(event.target.files[0],
+ WorkspaceFactoryController.MODE_PRELOAD);
+ });
+ document.getElementById('input_loadPreload').addEventListener
+ ('click', function() {blocklyFactory.closeModal()});
+
+ // Export button.
+ document.getElementById('dropdown_exportOptions').addEventListener
+ ('click',
+ function() {
+ controller.exportInjectFile();
+ blocklyFactory.closeModal();
+ });
+ document.getElementById('dropdown_exportToolbox').addEventListener
+ ('click',
+ function() {
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
+ blocklyFactory.closeModal();
+ });
+ document.getElementById('dropdown_exportPreload').addEventListener
+ ('click',
+ function() {
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
+ blocklyFactory.closeModal();
+ });
+ document.getElementById('dropdown_exportAll').addEventListener
+ ('click',
+ function() {
+ controller.exportInjectFile();
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
+ blocklyFactory.closeModal();
+ });
+ document.getElementById('button_export').addEventListener
+ ('click',
+ function() {
+ blocklyFactory.openModal('dropdownDiv_export');
+ });
+
+ // Clear button.
+ document.getElementById('button_clear').addEventListener
+ ('click',
+ function() {
+ controller.clearAll();
+ });
+
+ // Toolbox and Workspace tabs.
+ document.getElementById('tab_toolbox').addEventListener
+ ('click',
+ function() {
+ controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+ });
+ document.getElementById('tab_preload').addEventListener
+ ('click',
+ function() {
+ controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
+ });
+
+ // '+' button.
+ document.getElementById('button_add').addEventListener
+ ('click',
+ function() {
+ blocklyFactory.openModal('dropdownDiv_add');
+ });
+ document.getElementById('dropdown_newCategory').addEventListener
+ ('click',
+ function() {
+ controller.addCategory();
+ blocklyFactory.closeModal();
+ });
+ document.getElementById('dropdown_loadCategory').addEventListener
+ ('click',
+ function() {
+ controller.loadCategory();
+ blocklyFactory.closeModal();
+ });
+ document.getElementById('dropdown_separator').addEventListener
+ ('click',
+ function() {
+ controller.addSeparator();
+ blocklyFactory.closeModal();
+ });
+ document.getElementById('dropdown_loadStandardToolbox').addEventListener
+ ('click',
+ function() {
+ controller.loadStandardToolbox();
+ blocklyFactory.closeModal();
+ });
+
+ // '-' button.
+ document.getElementById('button_remove').addEventListener
+ ('click',
+ function() {
+ controller.removeElement();
+ });
+
+ // Up/Down buttons.
+ document.getElementById('button_up').addEventListener
+ ('click',
+ function() {
+ controller.moveElement(-1);
+ });
+ document.getElementById('button_down').addEventListener
+ ('click',
+ function() {
+ controller.moveElement(1);
+ });
+
+ // Edit Category button.
+ document.getElementById('button_editCategory').addEventListener
+ ('click',
+ function() {
+ var selected = controller.model.getSelected();
+ // Return if a category is not selected.
+ if (selected.type != ListElement.TYPE_CATEGORY) {
+ return;
+ }
+ document.getElementById('categoryName').value = selected.name;
+ document.getElementById('categoryColour').value = selected.color ?
+ selected.color.substring(1).toLowerCase() : '';
+ console.log(document.getElementById('categoryColour').value);
+ // Link the colour picker to the field.
+ cp_init('categoryColour');
+ blocklyFactory.openModal('dropdownDiv_editCategory');
+ });
+
+ document.getElementById('categorySave').addEventListener
+ ('click',
+ function() {
+ var name = document.getElementById('categoryName').value.trim();
+ var colour = document.getElementById('categoryColour').value;
+ colour = colour ? '#' + colour : null;
+ controller.changeSelectedCategory(name, colour);
+ blocklyFactory.closeModal();
+ });
+
+ // Make/Remove Shadow buttons.
+ document.getElementById('button_addShadow').addEventListener
+ ('click',
+ function() {
+ controller.addShadow();
+ WorkspaceFactoryInit.displayAddShadow_(false);
+ WorkspaceFactoryInit.displayRemoveShadow_(true);
+ });
+ document.getElementById('button_removeShadow').addEventListener
+ ('click',
+ function() {
+ controller.removeShadow();
+ WorkspaceFactoryInit.displayAddShadow_(true);
+ WorkspaceFactoryInit.displayRemoveShadow_(false);
+
+ // Disable shadow editing button if turning invalid shadow block back
+ // to normal block.
+ if (!Blockly.selected.getSurroundParent()) {
+ document.getElementById('button_addShadow').disabled = true;
+ }
+ });
+
+ // Help button on workspace tab.
+ document.getElementById('button_optionsHelp').addEventListener
+ ('click', function() {
+ open('https://developers.google.com/blockly/guides/get-started/web#configuration');
+ });
+
+ // Reset to Default button on workspace tab.
+ document.getElementById('button_standardOptions').addEventListener
+ ('click', function() {
+ controller.setStandardOptionsAndUpdate();
+ });
+};
+
+/**
+ * Add event listeners for workspace factory.
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ * @private
+ */
+WorkspaceFactoryInit.addWorkspaceFactoryEventListeners_ = function(controller) {
+ // Use up and down arrow keys to move categories.
+ window.addEventListener('keydown', function(e) {
+ // Don't let arrow keys have any effect if not in Workspace Factory
+ // editing the toolbox.
+ if (!(controller.keyEventsEnabled && controller.selectedMode
+ == WorkspaceFactoryController.MODE_TOOLBOX)) {
+ return;
+ }
+
+ if (e.keyCode == 38) {
+ // Arrow up.
+ controller.moveElement(-1);
+ } else if (e.keyCode == 40) {
+ // Arrow down.
+ controller.moveElement(1);
+ }
+ });
+
+ // Determines if a block breaks shadow block placement rules.
+ // Breaks rules if (1) a shadow block no longer has a valid
+ // parent, or (2) a normal block is inside of a shadow block.
+ var isInvalidBlockPlacement = function(block) {
+ return ((controller.isUserGenShadowBlock(block.id) &&
+ !block.getSurroundParent()) ||
+ (!controller.isUserGenShadowBlock(block.id) &&
+ block.getSurroundParent() &&
+ controller.isUserGenShadowBlock(block.getSurroundParent().id)));
+ };
+
+ // Add change listeners for toolbox workspace in workspace factory.
+ controller.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.BLOCK_MOVE ||
+ e.type == Blockly.Events.BLOCK_DELETE ||
+ e.type == Blockly.Events.BLOCK_CHANGE) {
+ 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.BLOCK_MOVE || (e.type == Blockly.Events.UI &&
+ e.element == 'selected')) {
+ var selected = Blockly.selected;
+
+ // Show shadow button if a block is selected. Show "Add Shadow" if
+ // a block is not a shadow block, show "Remove Shadow" if it is a
+ // shadow block.
+ if (selected) {
+ var isShadow = controller.isUserGenShadowBlock(selected.id);
+ WorkspaceFactoryInit.displayAddShadow_(!isShadow);
+ WorkspaceFactoryInit.displayRemoveShadow_(isShadow);
+ } else {
+ WorkspaceFactoryInit.displayAddShadow_(false);
+ WorkspaceFactoryInit.displayRemoveShadow_(false);
+ }
+
+ if (selected != null && selected.getSurroundParent() != null &&
+ !controller.isUserGenShadowBlock(selected.getSurroundParent().id)) {
+ // Selected block is a valid shadow block or could be a valid shadow
+ // block.
+
+ // Enable block editing and remove warnings if the block is not a
+ // variable user-generated shadow block.
+ document.getElementById('button_addShadow').disabled = false;
+ document.getElementById('button_removeShadow').disabled = false;
+
+ if (!FactoryUtils.hasVariableField(selected) &&
+ controller.isDefinedBlock(selected)) {
+ selected.setWarningText(null);
+ }
+ } else {
+ // Selected block cannot be a valid shadow block.
+
+ if (selected != null && isInvalidBlockPlacement(selected)) {
+ // Selected block breaks shadow block rules.
+ // Invalid shadow block if (1) a shadow block no longer has a valid
+ // parent, or (2) a normal block is inside of a shadow block.
+
+ if (!controller.isUserGenShadowBlock(selected.id)) {
+ // Warn if a non-shadow block is nested inside a shadow block.
+ selected.setWarningText('Only shadow blocks can be nested inside\n'
+ + 'other shadow blocks.');
+ } else if (!FactoryUtils.hasVariableField(selected)) {
+ // Warn if a shadow block is invalid only if not replacing
+ // warning for variables.
+ selected.setWarningText('Shadow blocks must be nested inside other'
+ + ' blocks.')
+ }
+
+ // Give editing options so that the user can make an invalid shadow
+ // block a normal block.
+ document.getElementById('button_removeShadow').disabled = false;
+ document.getElementById('button_addShadow').disabled = true;
+ } else {
+ // Selected block does not break any shadow block rules, but cannot
+ // be a shadow block.
+
+ // Remove possible 'invalid shadow block placement' warning.
+ if (selected != null && controller.isDefinedBlock(selected) &&
+ (!FactoryUtils.hasVariableField(selected) ||
+ !controller.isUserGenShadowBlock(selected.id))) {
+ selected.setWarningText(null);
+ }
+
+ // No block selected that is a shadow block or could be a valid shadow
+ // block. Disable block editing.
+ document.getElementById('button_addShadow').disabled = true;
+ document.getElementById('button_removeShadow').disabled = true;
+ }
+ }
+ }
+
+ // Convert actual shadow blocks added from the toolbox to user-generated
+ // shadow blocks.
+ if (e.type == Blockly.Events.BLOCK_CREATE) {
+ controller.convertShadowBlocks();
+
+ // Let the user create a Variables or Functions category if they use
+ // blocks from either category.
+
+ // Get all children of a block and add them to childList.
+ var getAllChildren = function(block, childList) {
+ childList.push(block);
+ var children = block.getChildren();
+ for (var i = 0, child; child = children[i]; i++) {
+ getAllChildren(child, childList);
+ }
+ };
+
+ var newBaseBlock = controller.toolboxWorkspace.getBlockById(e.blockId);
+ var allNewBlocks = [];
+ getAllChildren(newBaseBlock, allNewBlocks);
+ var variableCreated = false;
+ var procedureCreated = false;
+
+ // Check if the newly created block or any of its children are variable
+ // or procedure blocks.
+ for (var i = 0, block; block = allNewBlocks[i]; i++) {
+ if (FactoryUtils.hasVariableField(block)) {
+ variableCreated = true;
+ } else if (FactoryUtils.isProcedureBlock(block)) {
+ procedureCreated = true;
+ }
+ }
+
+ // If any of the newly created blocks are variable or procedure blocks,
+ // prompt the user to create the corresponding standard category.
+ if (variableCreated && !controller.hasVariablesCategory()) {
+ if (confirm('Your new block has a variables field. To use this block '
+ + 'fully, you will need a Variables category. Do you want to add '
+ + 'a Variables category to your custom toolbox?')) {
+ controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+ controller.loadCategoryByName('variables');
+ }
+ }
+
+ if (procedureCreated && !controller.hasProceduresCategory()) {
+ if (confirm('Your new block is a function block. To use this block '
+ + 'fully, you will need a Functions category. Do you want to add '
+ + 'a Functions category to your custom toolbox?')) {
+ controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+ controller.loadCategoryByName('functions');
+ }
+ }
+ }
+ });
+};
+
+/**
+ * Display or hide the add shadow button.
+ * @param {boolean} show True if the add shadow button should be shown, false
+ * otherwise.
+ */
+WorkspaceFactoryInit.displayAddShadow_ = function(show) {
+ document.getElementById('button_addShadow').style.display =
+ show ? 'inline-block' : 'none';
+};
+
+/**
+ * Display or hide the remove shadow button.
+ * @param {boolean} show True if the remove shadow button should be shown, false
+ * otherwise.
+ */
+WorkspaceFactoryInit.displayRemoveShadow_ = function(show) {
+ document.getElementById('button_removeShadow').style.display =
+ show ? 'inline-block' : 'none';
+};
+
+/**
+ * Add listeners for workspace factory options input elements.
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ * @private
+ */
+WorkspaceFactoryInit.addWorkspaceFactoryOptionsListeners_ =
+ function(controller) {
+ // Checking the grid checkbox displays grid options.
+ document.getElementById('option_grid_checkbox').addEventListener('change',
+ function(e) {
+ document.getElementById('grid_options').style.display =
+ document.getElementById('option_grid_checkbox').checked ?
+ 'block' : 'none';
+ });
+
+ // Checking the zoom checkbox displays zoom options.
+ document.getElementById('option_zoom_checkbox').addEventListener('change',
+ function(e) {
+ document.getElementById('zoom_options').style.display =
+ document.getElementById('option_zoom_checkbox').checked ?
+ 'block' : 'none';
+ });
+
+ // Checking the readonly checkbox enables/disables other options.
+ document.getElementById('option_readOnly_checkbox').addEventListener('change',
+ function(e) {
+ var checkbox = document.getElementById('option_readOnly_checkbox');
+ blocklyFactory.ifCheckedEnable(!checkbox.checked,
+ ['readonly1', 'readonly2']);
+ });
+
+ document.getElementById('option_infiniteBlocks_checkbox').addEventListener('change',
+ function(e) {
+ document.getElementById('maxBlockNumber_option').style.display =
+ document.getElementById('option_infiniteBlocks_checkbox').checked ?
+ 'none' : 'block';
+ });
+
+ // Generate new options every time an options input is updated.
+ var div = document.getElementById('workspace_options');
+ var options = div.getElementsByTagName('input');
+ for (var i = 0, option; option = options[i]; i++) {
+ option.addEventListener('change', function() {
+ controller.generateNewOptions();
+ });
+ }
+};
diff --git a/js/demos/blockfactory/workspacefactory/wfactory_model.js b/js/demos/blockfactory/workspacefactory/wfactory_model.js
new file mode 100644
index 0000000..ff9eaff
--- /dev/null
+++ b/js/demos/blockfactory/workspacefactory/wfactory_model.js
@@ -0,0 +1,561 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Stores and updates information about state and categories
+ * in workspace factory. Each list element is either a separator or a category,
+ * and each category stores its name, XML to load that category, color,
+ * custom tags, and a unique ID making it possible to change category names and
+ * move categories easily. Keeps track of the currently selected list
+ * element. Also keeps track of all the user-created shadow blocks and
+ * manipulates them as necessary.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+
+/**
+ * Class for a WorkspaceFactoryModel
+ * @constructor
+ */
+WorkspaceFactoryModel = function() {
+ // Ordered list of ListElement objects. Empty if there is a single flyout.
+ this.toolboxList = [];
+ // ListElement for blocks in a single flyout. Null if a toolbox exists.
+ this.flyout = new ListElement(ListElement.TYPE_FLYOUT);
+ // Array of block IDs for all user created shadow blocks.
+ this.shadowBlocks = [];
+ // Reference to currently selected ListElement. Stored in this.toolboxList if
+ // there are categories, or in this.flyout if blocks are displayed in a single
+ // flyout.
+ this.selected = this.flyout;
+ // Boolean for if a Variable category has been added.
+ this.hasVariableCategory = false;
+ // Boolean for if a Procedure category has been added.
+ this.hasProcedureCategory = false;
+ // XML to be pre-loaded to workspace. Empty on default;
+ this.preloadXml = Blockly.utils.xml.createElement('xml');
+ // Options object to be configured for Blockly inject call.
+ this.options = new Object(null);
+ // Block Library block types.
+ this.libBlockTypes = [];
+ // Imported block types.
+ this.importedBlockTypes = [];
+ //
+};
+
+/**
+ * Given a name, determines if it is the name of a category already present.
+ * Used when getting a valid category name from the user.
+ * @param {string} name String name to be compared against.
+ * @return {boolean} True if string is a used category name, false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasCategoryByName = function(name) {
+ for (var i = 0; i < this.toolboxList.length; i++) {
+ if (this.toolboxList[i].type == ListElement.TYPE_CATEGORY &&
+ this.toolboxList[i].name == name) {
+ return true;
+ }
+ }
+ return false;
+};
+
+/**
+ * Determines if a category with the 'VARIABLE' tag exists.
+ * @return {boolean} True if there exists a category with the Variables tag,
+ * false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasVariables = function() {
+ return this.hasVariableCategory;
+};
+
+/**
+ * Determines if a category with the 'PROCEDURE' tag exists.
+ * @return {boolean} True if there exists a category with the Procedures tag,
+ * false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasProcedures = function() {
+ return this.hasProcedureCategory;
+};
+
+/**
+ * Determines if the user has any elements in the toolbox. Uses the length of
+ * toolboxList.
+ * @return {boolean} True if elements exist, false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasElements = function() {
+ return this.toolboxList.length > 0;
+};
+
+/**
+ * Given a ListElement, adds it to the toolbox list.
+ * @param {!ListElement} element The element to be added to the list.
+ */
+WorkspaceFactoryModel.prototype.addElementToList = function(element) {
+ // Update state if the copied category has a custom tag.
+ this.hasVariableCategory = element.custom == 'VARIABLE' ? true :
+ this.hasVariableCategory;
+ this.hasProcedureCategory = element.custom == 'PROCEDURE' ? true :
+ this.hasProcedureCategory;
+ // Add element to toolboxList.
+ this.toolboxList.push(element);
+ // Empty single flyout.
+ this.flyout = null;
+};
+
+/**
+ * Given an index, deletes a list element and all associated data.
+ * @param {number} index The index of the list element to delete.
+ */
+WorkspaceFactoryModel.prototype.deleteElementFromList = function(index) {
+ // Check if index is out of bounds.
+ if (index < 0 || index >= this.toolboxList.length) {
+ return; // No entry to delete.
+ }
+ // Check if need to update flags.
+ this.hasVariableCategory = this.toolboxList[index].custom == 'VARIABLE' ?
+ false : this.hasVariableCategory;
+ this.hasProcedureCategory = this.toolboxList[index].custom == 'PROCEDURE' ?
+ false : this.hasProcedureCategory;
+ // Remove element.
+ this.toolboxList.splice(index, 1);
+};
+
+/**
+ * Sets selected to be an empty category not in toolbox list if toolbox list
+ * is empty. Should be called when removing the last element from toolbox list.
+ * If the toolbox list is empty, selected stores the XML for the single flyout
+ * of blocks displayed.
+ */
+WorkspaceFactoryModel.prototype.createDefaultSelectedIfEmpty = function() {
+ if (this.toolboxList.length == 0) {
+ this.flyout = new ListElement(ListElement.TYPE_FLYOUT);
+ this.selected = this.flyout;
+ }
+};
+
+/**
+ * Moves a list element to a certain position in toolboxList by removing it
+ * and then inserting it at the correct index. Checks that indices are in
+ * bounds (throws error if not), but assumes that oldIndex is the correct index
+ * for list element.
+ * @param {!ListElement} element The element to move in toolboxList.
+ * @param {number} newIndex The index to insert the element at.
+ * @param {number} oldIndex The index the element is currently at.
+ */
+WorkspaceFactoryModel.prototype.moveElementToIndex = function(element, newIndex,
+ oldIndex) {
+ // Check that indexes are in bounds.
+ if (newIndex < 0 || newIndex >= this.toolboxList.length || oldIndex < 0 ||
+ oldIndex >= this.toolboxList.length) {
+ throw Error('Index out of bounds when moving element in the model.');
+ }
+ this.deleteElementFromList(oldIndex);
+ this.toolboxList.splice(newIndex, 0, element);
+};
+
+/**
+ * Returns the ID of the currently selected element. Returns null if there are
+ * no categories (if selected == null).
+ * @return {string} The ID of the element currently selected.
+ */
+WorkspaceFactoryModel.prototype.getSelectedId = function() {
+ return this.selected ? this.selected.id : null;
+};
+
+/**
+ * Returns the name of the currently selected category. Returns null if there
+ * are no categories (if selected == null) or the selected element is not
+ * a category (in which case its name is null).
+ * @return {string} The name of the category currently selected.
+ */
+WorkspaceFactoryModel.prototype.getSelectedName = function() {
+ return this.selected ? this.selected.name : null;
+};
+
+/**
+ * Returns the currently selected list element object.
+ * @return {ListElement} The currently selected ListElement
+ */
+WorkspaceFactoryModel.prototype.getSelected = function() {
+ return this.selected;
+};
+
+/**
+ * Sets list element currently selected by id.
+ * @param {string} id ID of list element that should now be selected.
+ */
+WorkspaceFactoryModel.prototype.setSelectedById = function(id) {
+ this.selected = this.getElementById(id);
+};
+
+/**
+ * Given an ID of a list element, returns the index of that list element in
+ * toolboxList. Returns -1 if ID is not present.
+ * @param {string} id The ID of list element to search for.
+ * @return {number} The index of the list element in toolboxList, or -1 if it
+ * doesn't exist.
+ */
+WorkspaceFactoryModel.prototype.getIndexByElementId = function(id) {
+ for (var i = 0; i < this.toolboxList.length; i++) {
+ if (this.toolboxList[i].id == id) {
+ return i;
+ }
+ }
+ return -1; // ID not present in toolboxList.
+};
+
+/**
+ * Given the ID of a list element, returns that ListElement object.
+ * @param {string} id The ID of element to search for.
+ * @return {ListElement} Corresponding ListElement object in toolboxList, or
+ * null if that element does not exist.
+ */
+WorkspaceFactoryModel.prototype.getElementById = function(id) {
+ for (var i = 0; i < this.toolboxList.length; i++) {
+ if (this.toolboxList[i].id == id) {
+ return this.toolboxList[i];
+ }
+ }
+ return null; // ID not present in toolboxList.
+};
+
+/**
+ * Given the index of a list element in toolboxList, returns that ListElement
+ * object.
+ * @param {number} index The index of the element to return.
+ * @return {ListElement} The corresponding ListElement object in toolboxList.
+ */
+WorkspaceFactoryModel.prototype.getElementByIndex = function(index) {
+ if (index < 0 || index >= this.toolboxList.length) {
+ return null;
+ }
+ return this.toolboxList[index];
+};
+
+/**
+ * Returns the XML to load the selected element.
+ * @return {!Element} The XML of the selected element, or null if there is
+ * no selected element.
+ */
+WorkspaceFactoryModel.prototype.getSelectedXml = function() {
+ return this.selected ? this.selected.xml : null;
+};
+
+/**
+ * Return ordered list of ListElement objects.
+ * @return {!Array.} ordered list of ListElement objects
+ */
+WorkspaceFactoryModel.prototype.getToolboxList = function() {
+ return this.toolboxList;
+};
+
+/**
+ * Gets the ID of a category given its name.
+ * @param {string} name Name of category.
+ * @return {number} ID of category
+ */
+WorkspaceFactoryModel.prototype.getCategoryIdByName = function(name) {
+ for (var i = 0; i < this.toolboxList.length; i++) {
+ if (this.toolboxList[i].name == name) {
+ return this.toolboxList[i].id;
+ }
+ }
+ return null; // Name not present in toolboxList.
+};
+
+/**
+ * Clears the toolbox list, deleting all ListElements.
+ */
+WorkspaceFactoryModel.prototype.clearToolboxList = function() {
+ this.toolboxList = [];
+ this.hasVariableCategory = false;
+ this.hasProcedureCategory = false;
+ this.shadowBlocks = [];
+ this.selected.xml = Blockly.utils.xml.createElement('xml');
+};
+
+/**
+ * Class for a ListElement
+ * Adds a shadow block to the list of shadow blocks.
+ * @param {string} blockId The unique ID of block to be added.
+ */
+WorkspaceFactoryModel.prototype.addShadowBlock = function(blockId) {
+ this.shadowBlocks.push(blockId);
+};
+
+/**
+ * Removes a shadow block ID from the list of shadow block IDs if that ID is
+ * in the list.
+ * @param {string} blockId The unique ID of block to be removed.
+ */
+WorkspaceFactoryModel.prototype.removeShadowBlock = function(blockId) {
+ for (var i = 0; i < this.shadowBlocks.length; i++) {
+ if (this.shadowBlocks[i] == blockId) {
+ this.shadowBlocks.splice(i, 1);
+ return;
+ }
+ }
+};
+
+/**
+ * Determines if a block is a shadow block given a unique block ID.
+ * @param {string} blockId The unique ID of the block to examine.
+ * @return {boolean} True if the block is a user-generated shadow block, false
+ * otherwise.
+ */
+WorkspaceFactoryModel.prototype.isShadowBlock = function(blockId) {
+ for (var i = 0; i < this.shadowBlocks.length; i++) {
+ if (this.shadowBlocks[i] == blockId) {
+ return true;
+ }
+ }
+ return false;
+};
+
+/**
+ * Given a set of blocks currently loaded, returns all blocks in the workspace
+ * that are user generated shadow blocks.
+ * @param {!} blocks Array of blocks currently loaded.
+ * @return {!} Array of user-generated shadow blocks currently
+ * loaded.
+ */
+WorkspaceFactoryModel.prototype.getShadowBlocksInWorkspace =
+ function(workspaceBlocks) {
+ var shadowsInWorkspace = [];
+ for (var i = 0; i < workspaceBlocks.length; i++) {
+ if (this.isShadowBlock(workspaceBlocks[i].id)) {
+ shadowsInWorkspace.push(workspaceBlocks[i]);
+ }
+ }
+ return shadowsInWorkspace;
+};
+
+/**
+ * Adds a custom tag to a category, updating state variables accordingly.
+ * Only accepts 'VARIABLE' and 'PROCEDURE' tags.
+ * @param {!ListElement} category The category to add the tag to.
+ * @param {string} tag The custom tag to add to the category.
+ */
+WorkspaceFactoryModel.prototype.addCustomTag = function(category, tag) {
+ // Only update list elements that are categories.
+ if (category.type != ListElement.TYPE_CATEGORY) {
+ return;
+ }
+ // Only update the tag to be 'VARIABLE' or 'PROCEDURE'.
+ if (tag == 'VARIABLE') {
+ this.hasVariableCategory = true;
+ category.custom = 'VARIABLE';
+ } else if (tag == 'PROCEDURE') {
+ this.hasProcedureCategory = true;
+ category.custom = 'PROCEDURE';
+ }
+};
+
+/**
+ * Have basic pre-loaded workspace working
+ * Saves XML as XML to be pre-loaded into the workspace.
+ * @param {!Element} xml The XML to be saved.
+ */
+WorkspaceFactoryModel.prototype.savePreloadXml = function(xml) {
+ this.preloadXml = xml
+};
+
+/**
+ * Gets the XML to be pre-loaded into the workspace.
+ * @return {!Element} The XML for the workspace.
+ */
+WorkspaceFactoryModel.prototype.getPreloadXml = function() {
+ return this.preloadXml;
+};
+
+/**
+ * Sets a new options object for injecting a Blockly workspace.
+ * @param {Object} options Options object for injecting a Blockly workspace.
+ */
+WorkspaceFactoryModel.prototype.setOptions = function(options) {
+ this.options = options;
+};
+
+/**
+ * Returns an array of all the block types currently being used in the toolbox
+ * and the pre-loaded blocks. No duplicates.
+ * TODO(evd2014): Move pushBlockTypesToList to FactoryUtils.
+ * @return {!Array.} Array of block types currently being used.
+ */
+WorkspaceFactoryModel.prototype.getAllUsedBlockTypes = function() {
+ var blockTypeList = [];
+
+ // Given XML for the workspace, adds all block types included in the XML
+ // to the list, not including duplicates.
+ var pushBlockTypesToList = function(xml, list) {
+ // Get all block XML nodes.
+ var blocks = xml.getElementsByTagName('block');
+
+ // Add block types if not already in list.
+ for (var i = 0; i < blocks.length; i++) {
+ var type = blocks[i].getAttribute('type');
+ if (list.indexOf(type) == -1) {
+ list.push(type);
+ }
+ }
+ };
+
+ if (this.flyout) {
+ // If has a single flyout, add block types for the single flyout.
+ pushBlockTypesToList(this.getSelectedXml(), blockTypeList);
+ } else {
+ // If has categories, add block types for each category.
+
+ for (var i = 0, category; category = this.toolboxList[i]; i++) {
+ if (category.type == ListElement.TYPE_CATEGORY) {
+ pushBlockTypesToList(category.xml, blockTypeList);
+ }
+ }
+ }
+
+ // Add the block types from any pre-loaded blocks.
+ pushBlockTypesToList(this.getPreloadXml(), blockTypeList);
+
+ return blockTypeList;
+};
+
+/**
+ * Adds new imported block types to the list of current imported block types.
+ * @param {!Array.} blockTypes Array of block types imported.
+ */
+WorkspaceFactoryModel.prototype.addImportedBlockTypes = function(blockTypes) {
+ this.importedBlockTypes = this.importedBlockTypes.concat(blockTypes);
+};
+
+/**
+ * Updates block types in block library.
+ * @param {!Array.} blockTypes Array of block types in block library.
+ */
+WorkspaceFactoryModel.prototype.updateLibBlockTypes = function(blockTypes) {
+ this.libBlockTypes = blockTypes;
+};
+
+/**
+ * Determines if a block type is defined as a standard block, in the block
+ * library, or as an imported block.
+ * @param {string} blockType Block type to check.
+ * @return {boolean} True if blockType is defined, false otherwise.
+ */
+WorkspaceFactoryModel.prototype.isDefinedBlockType = function(blockType) {
+ var isStandardBlock = StandardCategories.coreBlockTypes.indexOf(blockType)
+ != -1;
+ var isLibBlock = this.libBlockTypes.indexOf(blockType) != -1;
+ var isImportedBlock = this.importedBlockTypes.indexOf(blockType) != -1;
+ return (isStandardBlock || isLibBlock || isImportedBlock);
+};
+
+/**
+ * Checks if any of the block types are already defined.
+ * @param {!Array.} blockTypes Array of block types.
+ * @return {boolean} True if a block type in the array is already defined,
+ * false if none of the blocks are already defined.
+ */
+WorkspaceFactoryModel.prototype.hasDefinedBlockTypes = function(blockTypes) {
+ for (var i = 0, blockType; blockType = blockTypes[i]; i++) {
+ if (this.isDefinedBlockType(blockType)) {
+ return true;
+ }
+ }
+ return false;
+};
+
+/**
+ * Class for a ListElement.
+ * @constructor
+ */
+ListElement = function(type, opt_name) {
+ this.type = type;
+ // XML DOM element to load the element.
+ this.xml = Blockly.utils.xml.createElement('xml');
+ // Name of category. Can be changed by user. Null if separator.
+ this.name = opt_name ? opt_name : null;
+ // Unique ID of element. Does not change.
+ this.id = Blockly.utils.genUid();
+ // Color of category. Default is no color. Null if separator.
+ this.color = null;
+ // Stores a custom tag, if necessary. Null if no custom tag or separator.
+ this.custom = null;
+};
+
+// List element types.
+ListElement.TYPE_CATEGORY = 'category';
+ListElement.TYPE_SEPARATOR = 'separator';
+ListElement.TYPE_FLYOUT = 'flyout';
+
+/**
+ * Saves a category by updating its XML (does not save XML for
+ * elements that are not categories).
+ * @param {!Blockly.workspace} workspace The workspace to save category entry
+ * from.
+ */
+ListElement.prototype.saveFromWorkspace = function(workspace) {
+ // Only save XML for categories and flyouts.
+ if (this.type == ListElement.TYPE_FLYOUT ||
+ this.type == ListElement.TYPE_CATEGORY) {
+ this.xml = Blockly.Xml.workspaceToDom(workspace);
+ }
+};
+
+
+/**
+ * Changes the name of a category object given a new name. Returns if
+ * not a category.
+ * @param {string} name New name of category.
+ */
+ListElement.prototype.changeName = function (name) {
+ // Only update list elements that are categories.
+ if (this.type != ListElement.TYPE_CATEGORY) {
+ return;
+ }
+ this.name = name;
+};
+
+/**
+ * Sets the color of a category. If tries to set the color of something other
+ * than a category, returns.
+ * @param {?string} color The color that should be used for that category,
+ * or null if none.
+ */
+ListElement.prototype.changeColor = function (color) {
+ if (this.type != ListElement.TYPE_CATEGORY) {
+ return;
+ }
+ this.color = color;
+};
+
+/**
+ * Makes a copy of the original element and returns it. Everything about the
+ * copy is identical except for its ID.
+ * @return {!ListElement} The copy of the ListElement.
+ */
+ListElement.prototype.copy = function() {
+ copy = new ListElement(this.type);
+ // Generate a unique ID for the element.
+ copy.id = Blockly.utils.genUid();
+ // Copy all attributes except ID.
+ copy.name = this.name;
+ copy.xml = this.xml;
+ copy.color = this.color;
+ copy.custom = this.custom;
+ // Return copy.
+ return copy;
+};
diff --git a/js/demos/blockfactory/workspacefactory/wfactory_view.js b/js/demos/blockfactory/workspacefactory/wfactory_view.js
new file mode 100644
index 0000000..287fb3d
--- /dev/null
+++ b/js/demos/blockfactory/workspacefactory/wfactory_view.js
@@ -0,0 +1,438 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Controls the UI elements for workspace factory, mainly the category tabs.
+ * Also includes downloading files because that interacts directly with the DOM.
+ * Depends on WorkspaceFactoryController (for adding mouse listeners). Tabs for
+ * each category are stored in tab map, which associates a unique ID for a
+ * category with a particular tab.
+ *
+ * @author Emma Dauterman (edauterman)
+ */
+
+
+/**
+ * Class for a WorkspaceFactoryView
+ * @constructor
+ */
+WorkspaceFactoryView = function() {
+ // For each tab, maps ID of a ListElement to the td DOM element.
+ this.tabMap = Object.create(null);
+};
+
+/**
+ * Adds a category tab to the UI, and updates tabMap accordingly.
+ * @param {string} name The name of the category being created
+ * @param {string} id ID of category being created
+ * @return {!Element} DOM element created for tab
+ */
+WorkspaceFactoryView.prototype.addCategoryRow = function(name, id) {
+ var table = document.getElementById('categoryTable');
+ var count = table.rows.length;
+
+ // Delete help label and enable category buttons if it's the first category.
+ if (count == 0) {
+ document.getElementById('categoryHeader').textContent = 'Your categories:';
+ }
+
+ // Create tab.
+ var row = table.insertRow(count);
+ var nextEntry = row.insertCell(0);
+ // Configure tab.
+ nextEntry.id = this.createCategoryIdName(name);
+ nextEntry.textContent = name;
+ // Store tab.
+ this.tabMap[id] = table.rows[count].cells[0];
+ // Return tab.
+ return nextEntry;
+};
+
+/**
+ * Deletes a category tab from the UI and updates tabMap accordingly.
+ * @param {string} id ID of category to be deleted.
+ * @param {string} name The name of the category to be deleted.
+ */
+WorkspaceFactoryView.prototype.deleteElementRow = function(id, index) {
+ // Delete tab entry.
+ delete this.tabMap[id];
+ // Delete tab row.
+ var table = document.getElementById('categoryTable');
+ var count = table.rows.length;
+ table.deleteRow(index);
+
+ // If last category removed, add category help text and disable category
+ // buttons.
+ this.addEmptyCategoryMessage();
+};
+
+/**
+ * If there are no toolbox elements created, adds a help message to show
+ * where categories will appear. Should be called when deleting list elements
+ * in case the last element is deleted.
+ */
+WorkspaceFactoryView.prototype.addEmptyCategoryMessage = function() {
+ var table = document.getElementById('categoryTable');
+ if (!table.rows.length) {
+ document.getElementById('categoryHeader').textContent =
+ 'You currently have no categories.';
+ }
+};
+
+/**
+ * Given the index of the currently selected element, updates the state of
+ * the buttons that allow the user to edit the list elements. Updates the edit
+ * and arrow buttons. Should be called when adding or removing elements
+ * or when changing to a new element or when swapping to a different element.
+ * TODO(evd2014): Switch to using CSS to add/remove styles.
+ * @param {number} selectedIndex The index of the currently selected category,
+ * -1 if no categories created.
+ * @param {ListElement} selected The selected ListElement.
+ */
+WorkspaceFactoryView.prototype.updateState = function(selectedIndex, selected) {
+ // Disable/enable editing buttons as necessary.
+ document.getElementById('button_editCategory').disabled = selectedIndex < 0 ||
+ selected.type != ListElement.TYPE_CATEGORY;
+ document.getElementById('button_remove').disabled = selectedIndex < 0;
+ document.getElementById('button_up').disabled = selectedIndex <= 0;
+ var table = document.getElementById('categoryTable');
+ document.getElementById('button_down').disabled = selectedIndex >=
+ table.rows.length - 1 || selectedIndex < 0;
+ // Disable/enable the workspace as necessary.
+ this.disableWorkspace(this.shouldDisableWorkspace(selected));
+};
+
+/**
+ * Determines the DOM ID for a category given its name.
+ * @param {string} name Name of category
+ * @return {string} ID of category tab
+ */
+WorkspaceFactoryView.prototype.createCategoryIdName = function(name) {
+ return 'tab_' + name;
+};
+
+/**
+ * Switches a tab on or off.
+ * @param {string} id ID of the tab to switch on or off.
+ * @param {boolean} selected True if tab should be on, false if tab should be
+ * off.
+ */
+WorkspaceFactoryView.prototype.setCategoryTabSelection =
+ function(id, selected) {
+ if (!this.tabMap[id]) {
+ return; // Exit if tab does not exist.
+ }
+ this.tabMap[id].className = selected ? 'tabon' : 'taboff';
+};
+
+/**
+ * Used to bind a click to a certain DOM element (used for category tabs).
+ * Taken directly from code.js
+ * @param {string|!Element} e1 Tab element or corresponding ID string.
+ * @param {!Function} func Function to be executed on click.
+ */
+WorkspaceFactoryView.prototype.bindClick = function(el, func) {
+ if (typeof el == 'string') {
+ el = document.getElementById(el);
+ }
+ el.addEventListener('click', func, true);
+ el.addEventListener('touchend', func, true);
+};
+
+/**
+ * Creates a file and downloads it. In some browsers downloads, and in other
+ * browsers, opens new tab with contents.
+ * @param {string} filename Name of file
+ * @param {!Blob} data Blob containing contents to download
+ */
+WorkspaceFactoryView.prototype.createAndDownloadFile =
+ function(filename, data) {
+ var clickEvent = new MouseEvent('click', {
+ 'view': window,
+ 'bubbles': true,
+ 'cancelable': false
+ });
+ var a = document.createElement('a');
+ a.href = window.URL.createObjectURL(data);
+ a.download = filename;
+ a.textContent = 'Download file!';
+ a.dispatchEvent(clickEvent);
+};
+
+/**
+ * Given the ID of a certain category, updates the corresponding tab in
+ * the DOM to show a new name.
+ * @param {string} newName Name of string to be displayed on tab
+ * @param {string} id ID of category to be updated
+ */
+WorkspaceFactoryView.prototype.updateCategoryName = function(newName, id) {
+ this.tabMap[id].textContent = newName;
+ this.tabMap[id].id = this.createCategoryIdName(newName);
+};
+
+/**
+ * Moves a tab from one index to another. Adjusts index inserting before
+ * based on if inserting before or after. Checks that the indexes are in
+ * bounds, throws error if not.
+ * @param {string} id The ID of the category to move.
+ * @param {number} newIndex The index to move the category to.
+ * @param {number} oldIndex The index the category is currently at.
+ */
+WorkspaceFactoryView.prototype.moveTabToIndex =
+ function(id, newIndex, oldIndex) {
+ var table = document.getElementById('categoryTable');
+ // Check that indexes are in bounds.
+ if (newIndex < 0 || newIndex >= table.rows.length || oldIndex < 0 ||
+ oldIndex >= table.rows.length) {
+ throw Error('Index out of bounds when moving tab in the view.');
+ }
+
+ if (newIndex < oldIndex) {
+ // Inserting before.
+ var row = table.insertRow(newIndex);
+ row.appendChild(this.tabMap[id]);
+ table.deleteRow(oldIndex + 1);
+ } else {
+ // Inserting after.
+ var row = table.insertRow(newIndex + 1);
+ row.appendChild(this.tabMap[id]);
+ table.deleteRow(oldIndex);
+ }
+};
+
+/**
+ * Given a category ID and color, use that color to color the left border of the
+ * tab for that category.
+ * @param {string} id The ID of the category to color.
+ * @param {?string} colour The colour for to be used for the border of the tab,
+ * or null if none. Must be a valid CSS string.
+ */
+WorkspaceFactoryView.prototype.setBorderColor = function(id, colour) {
+ var style = this.tabMap[id].style;
+ if (colour) {
+ style.borderLeftWidth = '8px';
+ style.borderLeftStyle = 'solid';
+ style.borderColor = colour;
+ } else {
+ style.borderLeftWidth = '';
+ style.borderLeftStyle = '';
+ style.borderColor = '';
+ }
+};
+
+/**
+ * Given a separator ID, creates a corresponding tab in the view, updates
+ * tab map, and returns the tab.
+ * @param {string} id The ID of the separator.
+ * @param {!Element} The td DOM element representing the separator.
+ */
+WorkspaceFactoryView.prototype.addSeparatorTab = function(id) {
+ var table = document.getElementById('categoryTable');
+ var count = table.rows.length;
+
+ if (count == 0) {
+ document.getElementById('categoryHeader').textContent = 'Your categories:';
+ }
+ // Create separator.
+ var row = table.insertRow(count);
+ var nextEntry = row.insertCell(0);
+ // Configure separator.
+ nextEntry.style.height = '10px';
+ // Store and return separator.
+ this.tabMap[id] = table.rows[count].cells[0];
+ return nextEntry;
+};
+
+/**
+ * Disables or enables the workspace by putting a div over or under the
+ * toolbox workspace, depending on the value of disable. Used when switching
+ * to/from separators where the user shouldn't be able to drag blocks into
+ * the workspace.
+ * @param {boolean} disable True if the workspace should be disabled, false
+ * if it should be enabled.
+ */
+WorkspaceFactoryView.prototype.disableWorkspace = function(disable) {
+ if (disable) {
+ document.getElementById('toolbox_section').className = 'disabled';
+ document.getElementById('toolbox_blocks').style.pointerEvents = 'none';
+ } else {
+ document.getElementById('toolbox_section').className = '';
+ document.getElementById('toolbox_blocks').style.pointerEvents = 'auto';
+ }
+
+};
+
+/**
+ * Determines if the workspace should be disabled. The workspace should be
+ * disabled if category is a separator or has VARIABLE or PROCEDURE tags.
+ * @return {boolean} True if the workspace should be disabled, false otherwise.
+ */
+WorkspaceFactoryView.prototype.shouldDisableWorkspace = function(category) {
+ return category != null && category.type != ListElement.TYPE_FLYOUT &&
+ (category.type == ListElement.TYPE_SEPARATOR ||
+ category.custom == 'VARIABLE' || category.custom == 'PROCEDURE');
+};
+
+/**
+ * Removes all categories and separators in the view. Clears the tabMap to
+ * reflect this.
+ */
+WorkspaceFactoryView.prototype.clearToolboxTabs = function() {
+ this.tabMap = [];
+ var oldCategoryTable = document.getElementById('categoryTable');
+ var newCategoryTable = document.createElement('table');
+ newCategoryTable.id = 'categoryTable';
+ newCategoryTable.style.width = 'auto';
+ oldCategoryTable.parentElement.replaceChild(newCategoryTable,
+ oldCategoryTable);
+};
+
+/**
+ * Given a set of blocks currently loaded user-generated shadow blocks, visually
+ * marks them without making them actual shadow blocks (allowing them to still
+ * be editable and movable).
+ * @param {!Array.} blocks Array of user-generated shadow blocks
+ * currently loaded.
+ */
+WorkspaceFactoryView.prototype.markShadowBlocks = function(blocks) {
+ for (var i = 0; i < blocks.length; i++) {
+ this.markShadowBlock(blocks[i]);
+ }
+};
+
+/**
+ * Visually marks a user-generated shadow block as a shadow block in the
+ * workspace without making the block an actual shadow block (allowing it
+ * to be moved and edited).
+ * @param {!Blockly.Block} block The block that should be marked as a shadow
+ * block (must be rendered).
+ */
+WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
+ // Add Blockly CSS for user-generated shadow blocks.
+ Blockly.utils.dom.addClass(block.svgGroup_, 'shadowBlock');
+ // If not a valid shadow block, add a warning message.
+ if (!block.getSurroundParent()) {
+ block.setWarningText('Shadow blocks must be nested inside' +
+ ' other blocks to be displayed.');
+ }
+ if (FactoryUtils.hasVariableField(block)) {
+ block.setWarningText('Cannot make variable blocks shadow blocks.');
+ }
+};
+
+/**
+ * Removes visual marking for a shadow block given a rendered block.
+ * @param {!Blockly.Block} block The block that should be unmarked as a shadow
+ * block (must be rendered).
+ */
+WorkspaceFactoryView.prototype.unmarkShadowBlock = function(block) {
+ // Remove Blockly CSS for user-generated shadow blocks.
+ Blockly.utils.dom.removeClass(block.svgGroup_, 'shadowBlock');
+};
+
+/**
+ * Sets the tabs for modes according to which mode the user is currenly
+ * editing in.
+ * @param {string} mode The mode being switched to
+ * (WorkspaceFactoryController.MODE_TOOLBOX or WorkspaceFactoryController.MODE_PRELOAD).
+ */
+WorkspaceFactoryView.prototype.setModeSelection = function(mode) {
+ document.getElementById('tab_preload').className = mode ==
+ WorkspaceFactoryController.MODE_PRELOAD ? 'tabon' : 'taboff';
+ document.getElementById('preload_div').style.display = mode ==
+ WorkspaceFactoryController.MODE_PRELOAD ? 'block' : 'none';
+ document.getElementById('tab_toolbox').className = mode ==
+ WorkspaceFactoryController.MODE_TOOLBOX ? 'tabon' : 'taboff';
+ document.getElementById('toolbox_div').style.display = mode ==
+ WorkspaceFactoryController.MODE_TOOLBOX ? 'block' : 'none';
+};
+
+/**
+ * Updates the help text above the workspace depending on the selected mode.
+ * @param {string} mode The selected mode (WorkspaceFactoryController.MODE_TOOLBOX or
+ * WorkspaceFactoryController.MODE_PRELOAD).
+ */
+WorkspaceFactoryView.prototype.updateHelpText = function(mode) {
+ if (mode == WorkspaceFactoryController.MODE_TOOLBOX) {
+ var helpText = 'Drag blocks into the workspace to configure the toolbox ' +
+ 'in your custom workspace.';
+ } else {
+ var helpText = 'Drag blocks into the workspace to pre-load them in your ' +
+ 'custom workspace.'
+ }
+ document.getElementById('editHelpText').textContent = helpText;
+};
+
+/**
+ * Sets the basic options that are not dependent on if there are categories
+ * or a single flyout of blocks. Updates checkboxes and text fields.
+ */
+WorkspaceFactoryView.prototype.setBaseOptions = function() {
+ // Readonly mode.
+ document.getElementById('option_readOnly_checkbox').checked = false;
+ blocklyFactory.ifCheckedEnable(true, ['readonly1', 'readonly2']);
+
+ // Set basic options.
+ document.getElementById('option_css_checkbox').checked = true;
+ document.getElementById('option_maxBlocks_number').value = 100;
+ document.getElementById('option_media_text').value =
+ 'https://blockly-demo.appspot.com/static/media/';
+ document.getElementById('option_rtl_checkbox').checked = false;
+ document.getElementById('option_sounds_checkbox').checked = true;
+ document.getElementById('option_oneBasedIndex_checkbox').checked = true;
+ document.getElementById('option_horizontalLayout_checkbox').checked = false;
+ document.getElementById('option_toolboxPosition_checkbox').checked = false;
+
+ // Check infinite blocks and hide suboption.
+ document.getElementById('option_infiniteBlocks_checkbox').checked = true;
+ document.getElementById('maxBlockNumber_option').style.display =
+ 'none';
+
+ // Uncheck grid and zoom options and hide suboptions.
+ document.getElementById('option_grid_checkbox').checked = false;
+ document.getElementById('grid_options').style.display = 'none';
+ document.getElementById('option_zoom_checkbox').checked = false;
+ document.getElementById('zoom_options').style.display = 'none';
+
+ // Set grid options.
+ document.getElementById('gridOption_spacing_number').value = 20;
+ document.getElementById('gridOption_length_number').value = 1;
+ document.getElementById('gridOption_colour_text').value = '#888';
+ document.getElementById('gridOption_snap_checkbox').checked = false;
+
+ // Set zoom options.
+ document.getElementById('zoomOption_controls_checkbox').checked = true;
+ document.getElementById('zoomOption_wheel_checkbox').checked = true;
+ document.getElementById('zoomOption_startScale_number').value = 1.0;
+ document.getElementById('zoomOption_maxScale_number').value = 3;
+ document.getElementById('zoomOption_minScale_number').value = 0.3;
+ document.getElementById('zoomOption_scaleSpeed_number').value = 1.2;
+};
+
+/**
+ * Updates category specific options depending on if there are categories
+ * currently present. Updates checkboxes and text fields in the view.
+ * @param {boolean} hasCategories True if categories are present, false if all
+ * blocks are displayed in a single flyout.
+ */
+WorkspaceFactoryView.prototype.setCategoryOptions = function(hasCategories) {
+ document.getElementById('option_collapse_checkbox').checked = hasCategories;
+ document.getElementById('option_comments_checkbox').checked = hasCategories;
+ document.getElementById('option_disable_checkbox').checked = hasCategories;
+ document.getElementById('option_scrollbars_checkbox').checked = hasCategories;
+ document.getElementById('option_trashcan_checkbox').checked = hasCategories;
+};
diff --git a/js/demos/blockfactory_old/blocks.js b/js/demos/blockfactory_old/blocks.js
new file mode 100644
index 0000000..58c7ca3
--- /dev/null
+++ b/js/demos/blockfactory_old/blocks.js
@@ -0,0 +1,824 @@
+/**
+ * @license
+ * Copyright 2012 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Blocks for Blockly's Block Factory application.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+Blockly.Blocks['factory_base'] = {
+ // Base of new block.
+ init: function() {
+ this.setColour(120);
+ this.appendDummyInput()
+ .appendField('name')
+ .appendField(new Blockly.FieldTextInput('block_type'), 'NAME');
+ this.appendStatementInput('INPUTS')
+ .setCheck('Input')
+ .appendField('inputs');
+ var dropdown = new Blockly.FieldDropdown([
+ ['automatic inputs', 'AUTO'],
+ ['external inputs', 'EXT'],
+ ['inline inputs', 'INT']]);
+ this.appendDummyInput()
+ .appendField(dropdown, 'INLINE');
+ dropdown = new Blockly.FieldDropdown([
+ ['no connections', 'NONE'],
+ ['← left output', 'LEFT'],
+ ['↕ top+bottom connections', 'BOTH'],
+ ['↑ top connection', 'TOP'],
+ ['↓ bottom connection', 'BOTTOM']],
+ function(option) {
+ this.sourceBlock_.updateShape_(option);
+ // Connect a shadow block to this new input.
+ this.sourceBlock_.spawnOutputShadow_(option);
+ });
+ this.appendDummyInput()
+ .appendField(dropdown, 'CONNECTIONS');
+ this.appendValueInput('COLOUR')
+ .setCheck('Colour')
+ .appendField('colour');
+ this.setTooltip('Build a custom block by plugging\n' +
+ 'fields, inputs and other blocks here.');
+ this.setHelpUrl(
+ 'https://developers.google.com/blockly/guides/create-custom-blocks/block-factory');
+ },
+ mutationToDom: function() {
+ var container = Blockly.utils.xml.createElement('mutation');
+ container.setAttribute('connections', this.getFieldValue('CONNECTIONS'));
+ return container;
+ },
+ domToMutation: function(xmlElement) {
+ var connections = xmlElement.getAttribute('connections');
+ this.updateShape_(connections);
+ },
+ spawnOutputShadow_: function(option) {
+ // Helper method for deciding which type of outputs this block needs
+ // to attach shaddow blocks to.
+ switch (option) {
+ case 'LEFT':
+ this.connectOutputShadow_('OUTPUTTYPE');
+ break;
+ case 'TOP':
+ this.connectOutputShadow_('TOPTYPE');
+ break;
+ case 'BOTTOM':
+ this.connectOutputShadow_('BOTTOMTYPE');
+ break;
+ case 'BOTH':
+ this.connectOutputShadow_('TOPTYPE');
+ this.connectOutputShadow_('BOTTOMTYPE');
+ break;
+ }
+ },
+ connectOutputShadow_: function(outputType) {
+ // Helper method to create & connect shadow block.
+ var type = this.workspace.newBlock('type_null');
+ type.setShadow(true);
+ type.outputConnection.connect(this.getInput(outputType).connection);
+ type.initSvg();
+ type.render();
+ },
+ updateShape_: function(option) {
+ var outputExists = this.getInput('OUTPUTTYPE');
+ var topExists = this.getInput('TOPTYPE');
+ var bottomExists = this.getInput('BOTTOMTYPE');
+ if (option == 'LEFT') {
+ if (!outputExists) {
+ this.addTypeInput_('OUTPUTTYPE', 'output type');
+ }
+ } else if (outputExists) {
+ this.removeInput('OUTPUTTYPE');
+ }
+ if (option == 'TOP' || option == 'BOTH') {
+ if (!topExists) {
+ this.addTypeInput_('TOPTYPE', 'top type');
+ }
+ } else if (topExists) {
+ this.removeInput('TOPTYPE');
+ }
+ if (option == 'BOTTOM' || option == 'BOTH') {
+ if (!bottomExists) {
+ this.addTypeInput_('BOTTOMTYPE', 'bottom type');
+ }
+ } else if (bottomExists) {
+ this.removeInput('BOTTOMTYPE');
+ }
+ },
+ addTypeInput_: function(name, label) {
+ this.appendValueInput(name)
+ .setCheck('Type')
+ .appendField(label);
+ this.moveInputBefore(name, 'COLOUR');
+ }
+};
+
+var FIELD_MESSAGE = 'fields %1 %2';
+var FIELD_ARGS = [
+ {
+ "type": "field_dropdown",
+ "name": "ALIGN",
+ "options": [['left', 'LEFT'], ['right', 'RIGHT'], ['centre', 'CENTRE']],
+ },
+ {
+ "type": "input_statement",
+ "name": "FIELDS",
+ "check": "Field"
+ }
+];
+
+var TYPE_MESSAGE = 'type %1';
+var TYPE_ARGS = [
+ {
+ "type": "input_value",
+ "name": "TYPE",
+ "check": "Type",
+ "align": "RIGHT"
+ }
+];
+
+Blockly.Blocks['input_value'] = {
+ // Value input.
+ init: function() {
+ this.jsonInit({
+ "message0": "value input %1 %2",
+ "args0": [
+ {
+ "type": "field_input",
+ "name": "INPUTNAME",
+ "text": "NAME"
+ },
+ {
+ "type": "input_dummy"
+ }
+ ],
+ "message1": FIELD_MESSAGE,
+ "args1": FIELD_ARGS,
+ "message2": TYPE_MESSAGE,
+ "args2": TYPE_ARGS,
+ "previousStatement": "Input",
+ "nextStatement": "Input",
+ "colour": 210,
+ "tooltip": "A value socket for horizontal connections.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=71"
+ });
+ },
+ onchange: function() {
+ inputNameCheck(this);
+ }
+};
+
+Blockly.Blocks['input_statement'] = {
+ // Statement input.
+ init: function() {
+ this.jsonInit({
+ "message0": "statement input %1 %2",
+ "args0": [
+ {
+ "type": "field_input",
+ "name": "INPUTNAME",
+ "text": "NAME"
+ },
+ {
+ "type": "input_dummy"
+ },
+ ],
+ "message1": FIELD_MESSAGE,
+ "args1": FIELD_ARGS,
+ "message2": TYPE_MESSAGE,
+ "args2": TYPE_ARGS,
+ "previousStatement": "Input",
+ "nextStatement": "Input",
+ "colour": 210,
+ "tooltip": "A statement socket for enclosed vertical stacks.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=246"
+ });
+ },
+ onchange: function() {
+ inputNameCheck(this);
+ }
+};
+
+Blockly.Blocks['input_dummy'] = {
+ // Dummy input.
+ init: function() {
+ this.jsonInit({
+ "message0": "dummy input",
+ "message1": FIELD_MESSAGE,
+ "args1": FIELD_ARGS,
+ "previousStatement": "Input",
+ "nextStatement": "Input",
+ "colour": 210,
+ "tooltip": "For adding fields on a separate row with no " +
+ "connections. Alignment options (left, right, centre) " +
+ "apply only to multi-line fields.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=293"
+ });
+ }
+};
+
+Blockly.Blocks['field_static'] = {
+ // Text value.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('text')
+ .appendField(new Blockly.FieldTextInput(''), 'TEXT');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('Static text that serves as a label.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=88');
+ }
+};
+
+Blockly.Blocks['field_input'] = {
+ // Text input.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('text input')
+ .appendField(new Blockly.FieldTextInput('default'), 'TEXT')
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('An input field for the user to enter text.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=319');
+ },
+ onchange: function() {
+ fieldNameCheck(this);
+ }
+};
+
+Blockly.Blocks['field_number'] = {
+ // Numeric input.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('numeric input')
+ .appendField(new Blockly.FieldNumber(0), 'VALUE')
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.appendDummyInput()
+ .appendField('min')
+ .appendField(new Blockly.FieldNumber(-Infinity), 'MIN')
+ .appendField('max')
+ .appendField(new Blockly.FieldNumber(Infinity), 'MAX')
+ .appendField('precision')
+ .appendField(new Blockly.FieldNumber(0, 0), 'PRECISION');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('An input field for the user to enter a number.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=319');
+ },
+ onchange: function() {
+ fieldNameCheck(this);
+ }
+};
+
+Blockly.Blocks['field_angle'] = {
+ // Angle input.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('angle input')
+ .appendField(new Blockly.FieldAngle('90'), 'ANGLE')
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('An input field for the user to enter an angle.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=372');
+ },
+ onchange: function() {
+ fieldNameCheck(this);
+ }
+};
+
+Blockly.Blocks['field_dropdown'] = {
+ // Dropdown menu.
+ init: function() {
+ this.appendDummyInput()
+ .appendField('dropdown')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.optionCount_ = 3;
+ this.updateShape_();
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setMutator(new Blockly.Mutator(['field_dropdown_option']));
+ this.setColour(160);
+ this.setTooltip('Dropdown menu with a list of options.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=386');
+ },
+ mutationToDom: function(workspace) {
+ // Create XML to represent menu options.
+ var container = Blockly.utils.xml.createElement('mutation');
+ container.setAttribute('options', this.optionCount_);
+ return container;
+ },
+ domToMutation: function(container) {
+ // Parse XML to restore the menu options.
+ this.optionCount_ = parseInt(container.getAttribute('options'), 10);
+ this.updateShape_();
+ },
+ decompose: function(workspace) {
+ // Populate the mutator's dialog with this block's components.
+ var containerBlock = workspace.newBlock('field_dropdown_container');
+ containerBlock.initSvg();
+ var connection = containerBlock.getInput('STACK').connection;
+ for (var i = 0; i < this.optionCount_; i++) {
+ var optionBlock = workspace.newBlock('field_dropdown_option');
+ optionBlock.initSvg();
+ connection.connect(optionBlock.previousConnection);
+ connection = optionBlock.nextConnection;
+ }
+ return containerBlock;
+ },
+ compose: function(containerBlock) {
+ // Reconfigure this block based on the mutator dialog's components.
+ var optionBlock = containerBlock.getInputTargetBlock('STACK');
+ // Count number of inputs.
+ var data = [];
+ while (optionBlock) {
+ data.push([optionBlock.userData_, optionBlock.cpuData_]);
+ optionBlock = optionBlock.nextConnection &&
+ optionBlock.nextConnection.targetBlock();
+ }
+ this.optionCount_ = data.length;
+ this.updateShape_();
+ // Restore any data.
+ for (var i = 0; i < this.optionCount_; i++) {
+ this.setFieldValue(data[i][0] || 'option', 'USER' + i);
+ this.setFieldValue(data[i][1] || 'OPTIONNAME', 'CPU' + i);
+ }
+ },
+ saveConnections: function(containerBlock) {
+ // Store names and values for each option.
+ var optionBlock = containerBlock.getInputTargetBlock('STACK');
+ var i = 0;
+ while (optionBlock) {
+ optionBlock.userData_ = this.getFieldValue('USER' + i);
+ optionBlock.cpuData_ = this.getFieldValue('CPU' + i);
+ i++;
+ optionBlock = optionBlock.nextConnection &&
+ optionBlock.nextConnection.targetBlock();
+ }
+ },
+ updateShape_: function() {
+ // Modify this block to have the correct number of options.
+ // Add new options.
+ for (var i = 0; i < this.optionCount_; i++) {
+ if (!this.getInput('OPTION' + i)) {
+ this.appendDummyInput('OPTION' + i)
+ .appendField(new Blockly.FieldTextInput('option'), 'USER' + i)
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('OPTIONNAME'), 'CPU' + i);
+ }
+ }
+ // Remove deleted options.
+ while (this.getInput('OPTION' + i)) {
+ this.removeInput('OPTION' + i);
+ i++;
+ }
+ },
+ onchange: function() {
+ if (this.workspace && this.optionCount_ < 1) {
+ this.setWarningText('Drop down menu must\nhave at least one option.');
+ } else {
+ fieldNameCheck(this);
+ }
+ }
+};
+
+Blockly.Blocks['field_dropdown_container'] = {
+ // Container.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('add options');
+ this.appendStatementInput('STACK');
+ this.setTooltip('Add, remove, or reorder options\n' +
+ 'to reconfigure this dropdown menu.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=386');
+ this.contextMenu = false;
+ }
+};
+
+Blockly.Blocks['field_dropdown_option'] = {
+ // Add option.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('option');
+ this.setPreviousStatement(true);
+ this.setNextStatement(true);
+ this.setTooltip('Add a new option to the dropdown menu.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=386');
+ this.contextMenu = false;
+ }
+};
+
+Blockly.Blocks['field_checkbox'] = {
+ // Checkbox.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('checkbox')
+ .appendField(new Blockly.FieldCheckbox('TRUE'), 'CHECKED')
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('Checkbox field.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=485');
+ },
+ onchange: function() {
+ fieldNameCheck(this);
+ }
+};
+
+Blockly.Blocks['field_colour'] = {
+ // Colour input.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('colour')
+ .appendField(new Blockly.FieldColour('#ff0000'), 'COLOUR')
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('Colour input field.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=495');
+ },
+ onchange: function() {
+ fieldNameCheck(this);
+ }
+};
+
+Blockly.Blocks['field_date'] = {
+ // Date input.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('date')
+ .appendField(new Blockly.FieldDate(), 'DATE')
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('Date input field.');
+ },
+ onchange: function() {
+ fieldNameCheck(this);
+ }
+};
+
+Blockly.Blocks['field_variable'] = {
+ // Dropdown for variables.
+ init: function() {
+ this.setColour(160);
+ this.appendDummyInput()
+ .appendField('variable')
+ .appendField(new Blockly.FieldTextInput('item'), 'TEXT')
+ .appendField(',')
+ .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('Dropdown menu for variable names.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=510');
+ },
+ onchange: function() {
+ fieldNameCheck(this);
+ }
+};
+
+Blockly.Blocks['field_image'] = {
+ // Image.
+ init: function() {
+ this.setColour(160);
+ var src = 'https://www.gstatic.com/codesite/ph/images/star_on.gif';
+ this.appendDummyInput()
+ .appendField('image')
+ .appendField(new Blockly.FieldTextInput(src), 'SRC');
+ this.appendDummyInput()
+ .appendField('width')
+ .appendField(new Blockly.FieldNumber('15', 0, NaN, 1), 'WIDTH')
+ .appendField('height')
+ .appendField(new Blockly.FieldNumber('15', 0, NaN, 1), 'HEIGHT')
+ .appendField('alt text')
+ .appendField(new Blockly.FieldTextInput('*'), 'ALT');
+ this.setPreviousStatement(true, 'Field');
+ this.setNextStatement(true, 'Field');
+ this.setTooltip('Static image (JPEG, PNG, GIF, SVG, BMP).\n' +
+ 'Retains aspect ratio regardless of height and width.\n' +
+ 'Alt text is for when collapsed.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=567');
+ }
+};
+
+Blockly.Blocks['type_group'] = {
+ // Group of types.
+ init: function() {
+ this.typeCount_ = 2;
+ this.updateShape_();
+ this.setOutput(true, 'Type');
+ this.setMutator(new Blockly.Mutator(['type_group_item']));
+ this.setColour(230);
+ this.setTooltip('Allows more than one type to be accepted.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=677');
+ },
+ mutationToDom: function(workspace) {
+ // Create XML to represent a group of types.
+ var container = Blockly.utils.xml.createElement('mutation');
+ container.setAttribute('types', this.typeCount_);
+ return container;
+ },
+ domToMutation: function(container) {
+ // Parse XML to restore the group of types.
+ this.typeCount_ = parseInt(container.getAttribute('types'), 10);
+ this.updateShape_();
+ for (var i = 0; i < this.typeCount_; i++) {
+ this.removeInput('TYPE' + i);
+ }
+ for (var i = 0; i < this.typeCount_; i++) {
+ var input = this.appendValueInput('TYPE' + i)
+ .setCheck('Type');
+ if (i == 0) {
+ input.appendField('any of');
+ }
+ }
+ },
+ decompose: function(workspace) {
+ // Populate the mutator's dialog with this block's components.
+ var containerBlock = workspace.newBlock('type_group_container');
+ containerBlock.initSvg();
+ var connection = containerBlock.getInput('STACK').connection;
+ for (var i = 0; i < this.typeCount_; i++) {
+ var typeBlock = workspace.newBlock('type_group_item');
+ typeBlock.initSvg();
+ connection.connect(typeBlock.previousConnection);
+ connection = typeBlock.nextConnection;
+ }
+ return containerBlock;
+ },
+ compose: function(containerBlock) {
+ // Reconfigure this block based on the mutator dialog's components.
+ var typeBlock = containerBlock.getInputTargetBlock('STACK');
+ // Count number of inputs.
+ var connections = [];
+ while (typeBlock) {
+ connections.push(typeBlock.valueConnection_);
+ typeBlock = typeBlock.nextConnection &&
+ typeBlock.nextConnection.targetBlock();
+ }
+ // Disconnect any children that don't belong.
+ for (var i = 0; i < this.typeCount_; i++) {
+ var connection = this.getInput('TYPE' + i).connection.targetConnection;
+ if (connection && connections.indexOf(connection) == -1) {
+ connection.disconnect();
+ }
+ }
+ this.typeCount_ = connections.length;
+ this.updateShape_();
+ // Reconnect any child blocks.
+ for (var i = 0; i < this.typeCount_; i++) {
+ Blockly.Mutator.reconnect(connections[i], this, 'TYPE' + i);
+ }
+ },
+ saveConnections: function(containerBlock) {
+ // Store a pointer to any connected child blocks.
+ var typeBlock = containerBlock.getInputTargetBlock('STACK');
+ var i = 0;
+ while (typeBlock) {
+ var input = this.getInput('TYPE' + i);
+ typeBlock.valueConnection_ = input && input.connection.targetConnection;
+ i++;
+ typeBlock = typeBlock.nextConnection &&
+ typeBlock.nextConnection.targetBlock();
+ }
+ },
+ updateShape_: function() {
+ // Modify this block to have the correct number of inputs.
+ // Add new inputs.
+ for (var i = 0; i < this.typeCount_; i++) {
+ if (!this.getInput('TYPE' + i)) {
+ var input = this.appendValueInput('TYPE' + i);
+ if (i == 0) {
+ input.appendField('any of');
+ }
+ }
+ }
+ // Remove deleted inputs.
+ while (this.getInput('TYPE' + i)) {
+ this.removeInput('TYPE' + i);
+ i++;
+ }
+ }
+};
+
+Blockly.Blocks['type_group_container'] = {
+ // Container.
+ init: function() {
+ this.jsonInit({
+ "message0": "add types %1 %2",
+ "args0": [
+ {"type": "input_dummy"},
+ {"type": "input_statement", "name": "STACK"}
+ ],
+ "colour": 230,
+ "tooltip": "Add, or remove allowed type.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=677"
+ });
+ }
+};
+
+Blockly.Blocks['type_group_item'] = {
+ // Add type.
+ init: function() {
+ this.jsonInit({
+ "message0": "type",
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": 230,
+ "tooltip": "Add a new allowed type.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=677"
+ });
+ }
+};
+
+Blockly.Blocks['type_null'] = {
+ // Null type.
+ valueType: null,
+ init: function() {
+ this.jsonInit({
+ "message0": "any",
+ "output": "Type",
+ "colour": 230,
+ "tooltip": "Any type is allowed.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602"
+ });
+ }
+};
+
+Blockly.Blocks['type_boolean'] = {
+ // Boolean type.
+ valueType: 'Boolean',
+ init: function() {
+ this.jsonInit({
+ "message0": "Boolean",
+ "output": "Type",
+ "colour": 230,
+ "tooltip": "Booleans (true/false) are allowed.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602"
+ });
+ }
+};
+
+Blockly.Blocks['type_number'] = {
+ // Number type.
+ valueType: 'Number',
+ init: function() {
+ this.jsonInit({
+ "message0": "Number",
+ "output": "Type",
+ "colour": 230,
+ "tooltip": "Numbers (int/float) are allowed.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602"
+ });
+ }
+};
+
+Blockly.Blocks['type_string'] = {
+ // String type.
+ valueType: 'String',
+ init: function() {
+ this.jsonInit({
+ "message0": "String",
+ "output": "Type",
+ "colour": 230,
+ "tooltip": "Strings (text) are allowed.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602"
+ });
+ }
+};
+
+Blockly.Blocks['type_list'] = {
+ // List type.
+ valueType: 'Array',
+ init: function() {
+ this.jsonInit({
+ "message0": "Array",
+ "output": "Type",
+ "colour": 230,
+ "tooltip": "Arrays (lists) are allowed.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602"
+ });
+ }
+};
+
+Blockly.Blocks['type_other'] = {
+ // Other type.
+ init: function() {
+ this.jsonInit({
+ "message0": "other %1",
+ "args0": [{"type": "field_input", "name": "TYPE", "text": ""}],
+ "output": "Type",
+ "colour": 230,
+ "tooltip": "Custom type to allow.",
+ "helpUrl": "https://www.youtube.com/watch?v=s2_xaEvcVI0#t=702"
+ });
+ }
+};
+
+Blockly.Blocks['colour_hue'] = {
+ // Set the colour of the block.
+ init: function() {
+ this.appendDummyInput()
+ .appendField('hue:')
+ .appendField(new Blockly.FieldAngle('0', this.validator), 'HUE');
+ this.setOutput(true, 'Colour');
+ this.setTooltip('Paint the block with this colour.');
+ this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=55');
+ },
+ validator: function(text) {
+ // Update the current block's colour to match.
+ var hue = parseInt(text, 10);
+ if (!isNaN(hue)) {
+ this.sourceBlock_.setColour(hue);
+ }
+ },
+ mutationToDom: function(workspace) {
+ var container = Blockly.utils.xml.createElement('mutation');
+ container.setAttribute('colour', this.getColour());
+ return container;
+ },
+ domToMutation: function(container) {
+ this.setColour(container.getAttribute('colour'));
+ }
+};
+
+/**
+ * Check to see if more than one field has this name.
+ * Highly inefficient (On^2), but n is small.
+ * @param {!Blockly.Block} referenceBlock Block to check.
+ */
+function fieldNameCheck(referenceBlock) {
+ if (!referenceBlock.workspace) {
+ // Block has been deleted.
+ return;
+ }
+ var name = referenceBlock.getFieldValue('FIELDNAME').toLowerCase();
+ var count = 0;
+ var blocks = referenceBlock.workspace.getAllBlocks(false);
+ for (var i = 0, block; block = blocks[i]; i++) {
+ var otherName = block.getFieldValue('FIELDNAME');
+ if (!block.disabled && !block.getInheritedDisabled() &&
+ otherName && otherName.toLowerCase() == name) {
+ count++;
+ }
+ }
+ var msg = (count > 1) ?
+ 'There are ' + count + ' field blocks\n with this name.' : null;
+ referenceBlock.setWarningText(msg);
+}
+
+/**
+ * Check to see if more than one input has this name.
+ * Highly inefficient (On^2), but n is small.
+ * @param {!Blockly.Block} referenceBlock Block to check.
+ */
+function inputNameCheck(referenceBlock) {
+ if (!referenceBlock.workspace) {
+ // Block has been deleted.
+ return;
+ }
+ var name = referenceBlock.getFieldValue('INPUTNAME').toLowerCase();
+ var count = 0;
+ var blocks = referenceBlock.workspace.getAllBlocks(false);
+ for (var i = 0, block; block = blocks[i]; i++) {
+ var otherName = block.getFieldValue('INPUTNAME');
+ if (!block.disabled && !block.getInheritedDisabled() &&
+ otherName && otherName.toLowerCase() == name) {
+ count++;
+ }
+ }
+ var msg = (count > 1) ?
+ 'There are ' + count + ' input blocks\n with this name.' : null;
+ referenceBlock.setWarningText(msg);
+}
diff --git a/js/demos/blockfactory_old/factory.js b/js/demos/blockfactory_old/factory.js
new file mode 100644
index 0000000..fce170a
--- /dev/null
+++ b/js/demos/blockfactory_old/factory.js
@@ -0,0 +1,848 @@
+/**
+ * @license
+ * Copyright 2012 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Block Factory application.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+/**
+ * Workspace for user to build block.
+ * @type {Blockly.Workspace}
+ */
+var mainWorkspace = null;
+
+/**
+ * Workspace for preview of block.
+ * @type {Blockly.Workspace}
+ */
+var previewWorkspace = null;
+
+/**
+ * Name of block if not named.
+ */
+var UNNAMED = 'unnamed';
+
+/**
+ * Change the language code format.
+ */
+function formatChange() {
+ var mask = document.getElementById('blocklyMask');
+ var languagePre = document.getElementById('languagePre');
+ var languageTA = document.getElementById('languageTA');
+ if (document.getElementById('format').value == 'Manual') {
+ Blockly.hideChaff();
+ mask.style.display = 'block';
+ languagePre.style.display = 'none';
+ languageTA.style.display = 'block';
+ var code = languagePre.textContent.trim();
+ languageTA.value = code;
+ languageTA.focus();
+ updatePreview();
+ } else {
+ mask.style.display = 'none';
+ languageTA.style.display = 'none';
+ languagePre.style.display = 'block';
+ updateLanguage();
+ }
+ disableEnableLink();
+}
+
+/**
+ * Update the language code based on constructs made in Blockly.
+ */
+function updateLanguage() {
+ var rootBlock = getRootBlock();
+ if (!rootBlock) {
+ return;
+ }
+ var blockType = rootBlock.getFieldValue('NAME').trim().toLowerCase();
+ if (!blockType) {
+ blockType = UNNAMED;
+ }
+ blockType = blockType.replace(/\W/g, '_').replace(/^(\d)/, '_\\1');
+ switch (document.getElementById('format').value) {
+ case 'JSON':
+ var code = formatJson_(blockType, rootBlock);
+ break;
+ case 'JavaScript':
+ var code = formatJavaScript_(blockType, rootBlock);
+ break;
+ }
+ injectCode(code, 'languagePre');
+ updatePreview();
+}
+
+/**
+ * Update the language code as JSON.
+ * @param {string} blockType Name of block.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @return {string} Generanted language code.
+ * @private
+ */
+function formatJson_(blockType, rootBlock) {
+ var JS = {};
+ // Type is not used by Blockly, but may be used by a loader.
+ JS.type = blockType;
+ // Generate inputs.
+ var message = [];
+ var args = [];
+ var contentsBlock = rootBlock.getInputTargetBlock('INPUTS');
+ var lastInput = null;
+ while (contentsBlock) {
+ if (!contentsBlock.disabled && !contentsBlock.getInheritedDisabled()) {
+ var fields = getFieldsJson_(contentsBlock.getInputTargetBlock('FIELDS'));
+ for (var i = 0; i < fields.length; i++) {
+ if (typeof fields[i] == 'string') {
+ message.push(fields[i].replace(/%/g, '%%'));
+ } else {
+ args.push(fields[i]);
+ message.push('%' + args.length);
+ }
+ }
+
+ var input = {type: contentsBlock.type};
+ // Dummy inputs don't have names. Other inputs do.
+ if (contentsBlock.type != 'input_dummy') {
+ input.name = contentsBlock.getFieldValue('INPUTNAME');
+ }
+ var check = JSON.parse(getOptTypesFrom(contentsBlock, 'TYPE') || 'null');
+ if (check) {
+ input.check = check;
+ }
+ var align = contentsBlock.getFieldValue('ALIGN');
+ if (align != 'LEFT') {
+ input.align = align;
+ }
+ args.push(input);
+ message.push('%' + args.length);
+ lastInput = contentsBlock;
+ }
+ contentsBlock = contentsBlock.nextConnection &&
+ contentsBlock.nextConnection.targetBlock();
+ }
+ // Remove last input if dummy and not empty.
+ if (lastInput && lastInput.type == 'input_dummy') {
+ var fields = lastInput.getInputTargetBlock('FIELDS');
+ if (fields && getFieldsJson_(fields).join('').trim() != '') {
+ var align = lastInput.getFieldValue('ALIGN');
+ if (align != 'LEFT') {
+ JS.lastDummyAlign0 = align;
+ }
+ args.pop();
+ message.pop();
+ }
+ }
+ JS.message0 = message.join(' ');
+ if (args.length) {
+ JS.args0 = args;
+ }
+ // Generate inline/external switch.
+ if (rootBlock.getFieldValue('INLINE') == 'EXT') {
+ JS.inputsInline = false;
+ } else if (rootBlock.getFieldValue('INLINE') == 'INT') {
+ JS.inputsInline = true;
+ }
+ // Generate output, or next/previous connections.
+ switch (rootBlock.getFieldValue('CONNECTIONS')) {
+ case 'LEFT':
+ JS.output =
+ JSON.parse(getOptTypesFrom(rootBlock, 'OUTPUTTYPE') || 'null');
+ break;
+ case 'BOTH':
+ JS.previousStatement =
+ JSON.parse(getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+ JS.nextStatement =
+ JSON.parse(getOptTypesFrom(rootBlock, 'BOTTOMTYPE') || 'null');
+ break;
+ case 'TOP':
+ JS.previousStatement =
+ JSON.parse(getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+ break;
+ case 'BOTTOM':
+ JS.nextStatement =
+ JSON.parse(getOptTypesFrom(rootBlock, 'BOTTOMTYPE') || 'null');
+ break;
+ }
+ // Generate colour.
+ var colourBlock = rootBlock.getInputTargetBlock('COLOUR');
+ if (colourBlock && !colourBlock.disabled) {
+ var hue = parseInt(colourBlock.getFieldValue('HUE'), 10);
+ JS.colour = hue;
+ }
+ JS.tooltip = '';
+ JS.helpUrl = 'http://www.example.com/';
+ return JSON.stringify(JS, null, ' ');
+}
+
+/**
+ * Update the language code as JavaScript.
+ * @param {string} blockType Name of block.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @return {string} Generanted language code.
+ * @private
+ */
+function formatJavaScript_(blockType, rootBlock) {
+ var code = [];
+ code.push("Blockly.Blocks['" + blockType + "'] = {");
+ code.push(" init: function() {");
+ // Generate inputs.
+ var TYPES = {'input_value': 'appendValueInput',
+ 'input_statement': 'appendStatementInput',
+ 'input_dummy': 'appendDummyInput'};
+ var contentsBlock = rootBlock.getInputTargetBlock('INPUTS');
+ while (contentsBlock) {
+ if (!contentsBlock.disabled && !contentsBlock.getInheritedDisabled()) {
+ var name = '';
+ // Dummy inputs don't have names. Other inputs do.
+ if (contentsBlock.type != 'input_dummy') {
+ name = escapeString(contentsBlock.getFieldValue('INPUTNAME'));
+ }
+ code.push(' this.' + TYPES[contentsBlock.type] + '(' + name + ')');
+ var check = getOptTypesFrom(contentsBlock, 'TYPE');
+ if (check) {
+ code.push(' .setCheck(' + check + ')');
+ }
+ var align = contentsBlock.getFieldValue('ALIGN');
+ if (align != 'LEFT') {
+ code.push(' .setAlign(Blockly.ALIGN_' + align + ')');
+ }
+ var fields = getFieldsJs_(contentsBlock.getInputTargetBlock('FIELDS'));
+ for (var i = 0; i < fields.length; i++) {
+ code.push(' .appendField(' + fields[i] + ')');
+ }
+ // Add semicolon to last line to finish the statement.
+ code[code.length - 1] += ';';
+ }
+ contentsBlock = contentsBlock.nextConnection &&
+ contentsBlock.nextConnection.targetBlock();
+ }
+ // Generate inline/external switch.
+ if (rootBlock.getFieldValue('INLINE') == 'EXT') {
+ code.push(' this.setInputsInline(false);');
+ } else if (rootBlock.getFieldValue('INLINE') == 'INT') {
+ code.push(' this.setInputsInline(true);');
+ }
+ // Generate output, or next/previous connections.
+ switch (rootBlock.getFieldValue('CONNECTIONS')) {
+ case 'LEFT':
+ code.push(connectionLineJs_('setOutput', 'OUTPUTTYPE'));
+ break;
+ case 'BOTH':
+ code.push(connectionLineJs_('setPreviousStatement', 'TOPTYPE'));
+ code.push(connectionLineJs_('setNextStatement', 'BOTTOMTYPE'));
+ break;
+ case 'TOP':
+ code.push(connectionLineJs_('setPreviousStatement', 'TOPTYPE'));
+ break;
+ case 'BOTTOM':
+ code.push(connectionLineJs_('setNextStatement', 'BOTTOMTYPE'));
+ break;
+ }
+ // Generate colour.
+ var colourBlock = rootBlock.getInputTargetBlock('COLOUR');
+ if (colourBlock && !colourBlock.disabled) {
+ var hue = parseInt(colourBlock.getFieldValue('HUE'), 10);
+ if (!isNaN(hue)) {
+ code.push(' this.setColour(' + hue + ');');
+ }
+ }
+ code.push(" this.setTooltip('');");
+ code.push(" this.setHelpUrl('http://www.example.com/');");
+ code.push(' }');
+ code.push('};');
+ return code.join('\n');
+}
+
+/**
+ * Create JS code required to create a top, bottom, or value connection.
+ * @param {string} functionName JavaScript function name.
+ * @param {string} typeName Name of type input.
+ * @return {string} Line of JavaScript code to create connection.
+ * @private
+ */
+function connectionLineJs_(functionName, typeName) {
+ var type = getOptTypesFrom(getRootBlock(), typeName);
+ if (type) {
+ type = ', ' + type;
+ } else {
+ type = '';
+ }
+ return ' this.' + functionName + '(true' + type + ');';
+}
+
+/**
+ * Returns field strings and any config.
+ * @param {!Blockly.Block} block Input block.
+ * @return {!Array.} Field strings.
+ * @private
+ */
+function getFieldsJs_(block) {
+ var fields = [];
+ while (block) {
+ if (!block.disabled && !block.getInheritedDisabled()) {
+ switch (block.type) {
+ case 'field_static':
+ // Result: 'hello'
+ fields.push(escapeString(block.getFieldValue('TEXT')));
+ break;
+ case 'field_input':
+ // Result: new Blockly.FieldTextInput('Hello'), 'GREET'
+ fields.push('new Blockly.FieldTextInput(' +
+ escapeString(block.getFieldValue('TEXT')) + '), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_number':
+ // Result: new Blockly.FieldNumber(10, 0, 100, 1), 'NUMBER'
+ var args = [
+ Number(block.getFieldValue('VALUE')),
+ Number(block.getFieldValue('MIN')),
+ Number(block.getFieldValue('MAX')),
+ Number(block.getFieldValue('PRECISION'))
+ ];
+ // Remove any trailing arguments that aren't needed.
+ if (args[3] == 0) {
+ args.pop();
+ if (args[2] == Infinity) {
+ args.pop();
+ if (args[1] == -Infinity) {
+ args.pop();
+ }
+ }
+ }
+ fields.push('new Blockly.FieldNumber(' + args.join(', ') + '), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_angle':
+ // Result: new Blockly.FieldAngle(90), 'ANGLE'
+ fields.push('new Blockly.FieldAngle(' +
+ Number(block.getFieldValue('ANGLE')) + '), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_checkbox':
+ // Result: new Blockly.FieldCheckbox('TRUE'), 'CHECK'
+ fields.push('new Blockly.FieldCheckbox(' +
+ escapeString(block.getFieldValue('CHECKED')) + '), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_colour':
+ // Result: new Blockly.FieldColour('#ff0000'), 'COLOUR'
+ fields.push('new Blockly.FieldColour(' +
+ escapeString(block.getFieldValue('COLOUR')) + '), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_date':
+ // Result: new Blockly.FieldDate('2015-02-04'), 'DATE'
+ fields.push('new Blockly.FieldDate(' +
+ escapeString(block.getFieldValue('DATE')) + '), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_variable':
+ // Result: new Blockly.FieldVariable('item'), 'VAR'
+ var varname = escapeString(block.getFieldValue('TEXT') || null);
+ fields.push('new Blockly.FieldVariable(' + varname + '), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_dropdown':
+ // Result:
+ // new Blockly.FieldDropdown([['yes', '1'], ['no', '0']]), 'TOGGLE'
+ var options = [];
+ for (var i = 0; i < block.optionCount_; i++) {
+ options[i] = '[' + escapeString(block.getFieldValue('USER' + i)) +
+ ', ' + escapeString(block.getFieldValue('CPU' + i)) + ']';
+ }
+ if (options.length) {
+ fields.push('new Blockly.FieldDropdown([' +
+ options.join(', ') + ']), ' +
+ escapeString(block.getFieldValue('FIELDNAME')));
+ }
+ break;
+ case 'field_image':
+ // Result: new Blockly.FieldImage('http://...', 80, 60, '*')
+ var src = escapeString(block.getFieldValue('SRC'));
+ var width = Number(block.getFieldValue('WIDTH'));
+ var height = Number(block.getFieldValue('HEIGHT'));
+ var alt = escapeString(block.getFieldValue('ALT'));
+ fields.push('new Blockly.FieldImage(' +
+ src + ', ' + width + ', ' + height + ', ' + alt + ')');
+ break;
+ }
+ }
+ block = block.nextConnection && block.nextConnection.targetBlock();
+ }
+ return fields;
+}
+
+/**
+ * Returns field strings and any config.
+ * @param {!Blockly.Block} block Input block.
+ * @return {!Array.} Array of static text and field configs.
+ * @private
+ */
+function getFieldsJson_(block) {
+ var fields = [];
+ while (block) {
+ if (!block.disabled && !block.getInheritedDisabled()) {
+ switch (block.type) {
+ case 'field_static':
+ // Result: 'hello'
+ fields.push(block.getFieldValue('TEXT'));
+ break;
+ case 'field_input':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ text: block.getFieldValue('TEXT')
+ });
+ break;
+ case 'field_number':
+ var obj = {
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ value: Number(block.getFieldValue('VALUE'))
+ };
+ var min = Number(block.getFieldValue('MIN'));
+ if (min > -Infinity) {
+ obj.min = min;
+ }
+ var max = Number(block.getFieldValue('MAX'));
+ if (max < Infinity) {
+ obj.max = max;
+ }
+ var precision = Number(block.getFieldValue('PRECISION'));
+ if (precision) {
+ obj.precision = precision;
+ }
+ fields.push(obj);
+ break;
+ case 'field_angle':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ angle: Number(block.getFieldValue('ANGLE'))
+ });
+ break;
+ case 'field_checkbox':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ checked: block.getFieldValue('CHECKED') == 'TRUE'
+ });
+ break;
+ case 'field_colour':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ colour: block.getFieldValue('COLOUR')
+ });
+ break;
+ case 'field_date':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ date: block.getFieldValue('DATE')
+ });
+ break;
+ case 'field_variable':
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ variable: block.getFieldValue('TEXT') || null
+ });
+ break;
+ case 'field_dropdown':
+ var options = [];
+ for (var i = 0; i < block.optionCount_; i++) {
+ options[i] = [block.getFieldValue('USER' + i),
+ block.getFieldValue('CPU' + i)];
+ }
+ if (options.length) {
+ fields.push({
+ type: block.type,
+ name: block.getFieldValue('FIELDNAME'),
+ options: options
+ });
+ }
+ break;
+ case 'field_image':
+ fields.push({
+ type: block.type,
+ src: block.getFieldValue('SRC'),
+ width: Number(block.getFieldValue('WIDTH')),
+ height: Number(block.getFieldValue('HEIGHT')),
+ alt: block.getFieldValue('ALT')
+ });
+ break;
+ }
+ }
+ block = block.nextConnection && block.nextConnection.targetBlock();
+ }
+ return fields;
+}
+
+/**
+ * Escape a string.
+ * @param {string} string String to escape.
+ * @return {string} Escaped string surrouned by quotes.
+ */
+function escapeString(string) {
+ return JSON.stringify(string);
+}
+
+/**
+ * Fetch the type(s) defined in the given input.
+ * Format as a string for appending to the generated code.
+ * @param {!Blockly.Block} block Block with input.
+ * @param {string} name Name of the input.
+ * @return {?string} String defining the types.
+ */
+function getOptTypesFrom(block, name) {
+ var types = getTypesFrom_(block, name);
+ if (types.length == 0) {
+ return undefined;
+ } else if (types.indexOf('null') != -1) {
+ return 'null';
+ } else if (types.length == 1) {
+ return types[0];
+ } else {
+ return '[' + types.join(', ') + ']';
+ }
+}
+
+/**
+ * Fetch the type(s) defined in the given input.
+ * @param {!Blockly.Block} block Block with input.
+ * @param {string} name Name of the input.
+ * @return {!Array.} List of types.
+ * @private
+ */
+function getTypesFrom_(block, name) {
+ var typeBlock = block.getInputTargetBlock(name);
+ var types;
+ if (!typeBlock || typeBlock.disabled) {
+ types = [];
+ } else if (typeBlock.type == 'type_other') {
+ types = [escapeString(typeBlock.getFieldValue('TYPE'))];
+ } else if (typeBlock.type == 'type_group') {
+ types = [];
+ for (var i = 0; i < typeBlock.typeCount_; i++) {
+ types = types.concat(getTypesFrom_(typeBlock, 'TYPE' + i));
+ }
+ // Remove duplicates.
+ var hash = Object.create(null);
+ for (var n = types.length - 1; n >= 0; n--) {
+ if (hash[types[n]]) {
+ types.splice(n, 1);
+ }
+ hash[types[n]] = true;
+ }
+ } else {
+ types = [escapeString(typeBlock.valueType)];
+ }
+ return types;
+}
+
+/**
+ * Update the generator code.
+ * @param {!Blockly.Block} block Rendered block in preview workspace.
+ */
+function updateGenerator(block) {
+ function makeVar(root, name) {
+ name = name.toLowerCase().replace(/\W/g, '_');
+ return ' var ' + root + '_' + name;
+ }
+ var language = document.getElementById('language').value;
+ var code = [];
+ code.push("Blockly." + language + "['" + block.type +
+ "'] = function(block) {");
+
+ // Generate getters for any fields or inputs.
+ for (var i = 0, input; input = block.inputList[i]; i++) {
+ for (var j = 0, field; field = input.fieldRow[j]; j++) {
+ var name = field.name;
+ if (!name) {
+ continue;
+ }
+ if (field instanceof Blockly.FieldVariable) {
+ // Subclass of Blockly.FieldDropdown, must test first.
+ code.push(makeVar('variable', name) +
+ " = Blockly." + language +
+ ".variableDB_.getName(block.getFieldValue('" + name +
+ "'), Blockly.Variables.NAME_TYPE);");
+ } else if (field instanceof Blockly.FieldAngle) {
+ // Subclass of Blockly.FieldTextInput, must test first.
+ code.push(makeVar('angle', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (Blockly.FieldDate && field instanceof Blockly.FieldDate) {
+ // Blockly.FieldDate may not be compiled into Blockly.
+ code.push(makeVar('date', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldColour) {
+ code.push(makeVar('colour', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldCheckbox) {
+ code.push(makeVar('checkbox', name) +
+ " = block.getFieldValue('" + name + "') == 'TRUE';");
+ } else if (field instanceof Blockly.FieldDropdown) {
+ code.push(makeVar('dropdown', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldNumber) {
+ code.push(makeVar('number', name) +
+ " = block.getFieldValue('" + name + "');");
+ } else if (field instanceof Blockly.FieldTextInput) {
+ code.push(makeVar('text', name) +
+ " = block.getFieldValue('" + name + "');");
+ }
+ }
+ var name = input.name;
+ if (name) {
+ if (input.type == Blockly.INPUT_VALUE) {
+ code.push(makeVar('value', name) +
+ " = Blockly." + language + ".valueToCode(block, '" + name +
+ "', Blockly." + language + ".ORDER_ATOMIC);");
+ } else if (input.type == Blockly.NEXT_STATEMENT) {
+ code.push(makeVar('statements', name) +
+ " = Blockly." + language + ".statementToCode(block, '" +
+ name + "');");
+ }
+ }
+ }
+ // Most languages end lines with a semicolon. Python does not.
+ var lineEnd = {
+ 'JavaScript': ';',
+ 'Python': '',
+ 'PHP': ';',
+ 'Dart': ';'
+ };
+ code.push(" // TODO: Assemble " + language + " into code variable.");
+ if (block.outputConnection) {
+ code.push(" var code = '...';");
+ code.push(" // TODO: Change ORDER_NONE to the correct strength.");
+ code.push(" return [code, Blockly." + language + ".ORDER_NONE];");
+ } else {
+ code.push(" var code = '..." + (lineEnd[language] || '') + "\\n';");
+ code.push(" return code;");
+ }
+ code.push("};");
+
+ injectCode(code.join('\n'), 'generatorPre');
+}
+
+/**
+ * Existing direction ('ltr' vs 'rtl') of preview.
+ */
+var oldDir = null;
+
+/**
+ * Update the preview display.
+ */
+function updatePreview() {
+ // Toggle between LTR/RTL if needed (also used in first display).
+ var newDir = document.getElementById('direction').value;
+ if (oldDir != newDir) {
+ if (previewWorkspace) {
+ previewWorkspace.dispose();
+ }
+ var rtl = newDir == 'rtl';
+ previewWorkspace = Blockly.inject('preview',
+ {rtl: rtl,
+ media: '../../media/',
+ scrollbars: true});
+ oldDir = newDir;
+ }
+ previewWorkspace.clear();
+
+ // Fetch the code and determine its format (JSON or JavaScript).
+ var format = document.getElementById('format').value;
+ if (format == 'Manual') {
+ var code = document.getElementById('languageTA').value;
+ // If the code is JSON, it will parse, otherwise treat as JS.
+ try {
+ JSON.parse(code);
+ format = 'JSON';
+ } catch (e) {
+ format = 'JavaScript';
+ }
+ } else {
+ var code = document.getElementById('languagePre').textContent;
+ }
+ if (!code.trim()) {
+ // Nothing to render. Happens while cloud storage is loading.
+ return;
+ }
+
+ // Backup Blockly.Blocks object so that main workspace and preview don't
+ // collide if user creates a 'factory_base' block, for instance.
+ var backupBlocks = Blockly.Blocks;
+ try {
+ // Make a shallow copy.
+ Blockly.Blocks = {};
+ for (var prop in backupBlocks) {
+ Blockly.Blocks[prop] = backupBlocks[prop];
+ }
+
+ if (format == 'JSON') {
+ var json = JSON.parse(code);
+ Blockly.Blocks[json.type || UNNAMED] = {
+ init: function() {
+ this.jsonInit(json);
+ }
+ };
+ } else if (format == 'JavaScript') {
+ eval(code);
+ } else {
+ throw 'Unknown format: ' + format;
+ }
+
+ // Look for a block on Blockly.Blocks that does not match the backup.
+ var blockType = null;
+ for (var type in Blockly.Blocks) {
+ if (typeof Blockly.Blocks[type].init == 'function' &&
+ Blockly.Blocks[type] != backupBlocks[type]) {
+ blockType = type;
+ break;
+ }
+ }
+ if (!blockType) {
+ return;
+ }
+
+ // Create the preview block.
+ var previewBlock = previewWorkspace.newBlock(blockType);
+ previewBlock.initSvg();
+ previewBlock.render();
+ previewBlock.setMovable(false);
+ previewBlock.setDeletable(false);
+ previewBlock.moveBy(15, 10);
+ previewWorkspace.clearUndo();
+
+ updateGenerator(previewBlock);
+ } finally {
+ Blockly.Blocks = backupBlocks;
+ }
+}
+
+/**
+ * Inject code into a pre tag, with syntax highlighting.
+ * Safe from HTML/script injection.
+ * @param {string} code Lines of code.
+ * @param {string} id ID of
+
+
+
+
diff --git a/js/demos/blockfactory_old/link.png b/js/demos/blockfactory_old/link.png
new file mode 100644
index 0000000..11dfd82
Binary files /dev/null and b/js/demos/blockfactory_old/link.png differ
diff --git a/js/demos/code/code.js b/js/demos/code/code.js
new file mode 100644
index 0000000..e19b9f5
--- /dev/null
+++ b/js/demos/code/code.js
@@ -0,0 +1,600 @@
+/**
+ * @license
+ * Copyright 2012 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Code demo.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+/**
+ * Create a namespace for the application.
+ */
+var Code = {};
+
+/**
+ * Lookup for names of supported languages. Keys should be in ISO 639 format.
+ */
+Code.LANGUAGE_NAME = {
+ 'ar': 'العربية',
+ 'be-tarask': 'Taraškievica',
+ 'br': 'Brezhoneg',
+ 'ca': 'Català',
+ 'cs': 'Česky',
+ 'da': 'Dansk',
+ 'de': 'Deutsch',
+ 'el': 'Ελληνικά',
+ 'en': 'English',
+ 'es': 'Español',
+ 'et': 'Eesti',
+ 'fa': 'فارسی',
+ 'fr': 'Français',
+ 'he': 'עברית',
+ 'hrx': 'Hunsrik',
+ 'hu': 'Magyar',
+ 'ia': 'Interlingua',
+ 'is': 'Íslenska',
+ 'it': 'Italiano',
+ 'ja': '日本語',
+ 'kab': 'Kabyle',
+ 'ko': '한국어',
+ 'mk': 'Македонски',
+ 'ms': 'Bahasa Melayu',
+ 'nb': 'Norsk Bokmål',
+ 'nl': 'Nederlands, Vlaams',
+ 'oc': 'Lenga d\'òc',
+ 'pl': 'Polski',
+ 'pms': 'Piemontèis',
+ 'pt-br': 'Português Brasileiro',
+ 'ro': 'Română',
+ 'ru': 'Русский',
+ 'sc': 'Sardu',
+ 'sk': 'Slovenčina',
+ 'sr': 'Српски',
+ 'sv': 'Svenska',
+ 'ta': 'தமிழ்',
+ 'th': 'ภาษาไทย',
+ 'tlh': 'tlhIngan Hol',
+ 'tr': 'Türkçe',
+ 'uk': 'Українська',
+ 'vi': 'Tiếng Việt',
+ 'zh-hans': '简体中文',
+ 'zh-hant': '正體中文'
+};
+
+/**
+ * List of RTL languages.
+ */
+Code.LANGUAGE_RTL = ['ar', 'fa', 'he', 'lki'];
+
+/**
+ * Blockly's main workspace.
+ * @type {Blockly.WorkspaceSvg}
+ */
+Code.workspace = null;
+
+/**
+ * Extracts a parameter from the URL.
+ * If the parameter is absent default_value is returned.
+ * @param {string} name The name of the parameter.
+ * @param {string} defaultValue Value to return if parameter not found.
+ * @return {string} The parameter value or the default value if not found.
+ */
+Code.getStringParamFromUrl = function(name, defaultValue) {
+ var val = location.search.match(new RegExp('[?&]' + name + '=([^&]+)'));
+ return val ? decodeURIComponent(val[1].replace(/\+/g, '%20')) : defaultValue;
+};
+
+/**
+ * Get the language of this user from the URL.
+ * @return {string} User's language.
+ */
+Code.getLang = function() {
+ var lang = Code.getStringParamFromUrl('lang', '');
+ if (Code.LANGUAGE_NAME[lang] === undefined) {
+ // Default to English.
+ lang = 'en';
+ }
+ return lang;
+};
+
+/**
+ * Is the current language (Code.LANG) an RTL language?
+ * @return {boolean} True if RTL, false if LTR.
+ */
+Code.isRtl = function() {
+ return Code.LANGUAGE_RTL.indexOf(Code.LANG) != -1;
+};
+
+/**
+ * Load blocks saved on App Engine Storage or in session/local storage.
+ * @param {string} defaultXml Text representation of default blocks.
+ */
+Code.loadBlocks = function(defaultXml) {
+ try {
+ var loadOnce = window.sessionStorage.loadOnceBlocks;
+ } catch(e) {
+ // Firefox sometimes throws a SecurityError when accessing sessionStorage.
+ // Restarting Firefox fixes this, so it looks like a bug.
+ var loadOnce = null;
+ }
+ if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+ // An href with #key trigers an AJAX call to retrieve saved blocks.
+ BlocklyStorage.retrieveXml(window.location.hash.substring(1));
+ } else if (loadOnce) {
+ // Language switching stores the blocks during the reload.
+ delete window.sessionStorage.loadOnceBlocks;
+ var xml = Blockly.Xml.textToDom(loadOnce);
+ Blockly.Xml.domToWorkspace(xml, Code.workspace);
+ } else if (defaultXml) {
+ // Load the editor with default starting blocks.
+ var xml = Blockly.Xml.textToDom(defaultXml);
+ Blockly.Xml.domToWorkspace(xml, Code.workspace);
+ } else if ('BlocklyStorage' in window) {
+ // Restore saved blocks in a separate thread so that subsequent
+ // initialization is not affected from a failed load.
+ window.setTimeout(BlocklyStorage.restoreBlocks, 0);
+ }
+};
+
+/**
+ * Save the blocks and reload with a different language.
+ */
+Code.changeLanguage = function() {
+ // Store the blocks for the duration of the reload.
+ // MSIE 11 does not support sessionStorage on file:// URLs.
+ if (window.sessionStorage) {
+ var xml = Blockly.Xml.workspaceToDom(Code.workspace);
+ var text = Blockly.Xml.domToText(xml);
+ window.sessionStorage.loadOnceBlocks = text;
+ }
+
+ var languageMenu = document.getElementById('languageMenu');
+ var newLang = encodeURIComponent(
+ languageMenu.options[languageMenu.selectedIndex].value);
+ var search = window.location.search;
+ if (search.length <= 1) {
+ search = '?lang=' + newLang;
+ } else if (search.match(/[?&]lang=[^&]*/)) {
+ search = search.replace(/([?&]lang=)[^&]*/, '$1' + newLang);
+ } else {
+ search = search.replace(/\?/, '?lang=' + newLang + '&');
+ }
+
+ window.location = window.location.protocol + '//' +
+ window.location.host + window.location.pathname + search;
+};
+
+/**
+ * Changes the output language by clicking the tab matching
+ * the selected language in the codeMenu.
+ */
+Code.changeCodingLanguage = function() {
+ var codeMenu = document.getElementById('code_menu');
+ Code.tabClick(codeMenu.options[codeMenu.selectedIndex].value);
+}
+
+/**
+ * Bind a function to a button's click event.
+ * On touch enabled browsers, ontouchend is treated as equivalent to onclick.
+ * @param {!Element|string} el Button element or ID thereof.
+ * @param {!Function} func Event handler to bind.
+ */
+Code.bindClick = function(el, func) {
+ if (typeof el == 'string') {
+ el = document.getElementById(el);
+ }
+ el.addEventListener('click', func, true);
+ el.addEventListener('touchend', func, true);
+};
+
+/**
+ * Load the Prettify CSS and JavaScript.
+ */
+Code.importPrettify = function() {
+ var script = document.createElement('script');
+ script.setAttribute('src', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js');
+ document.head.appendChild(script);
+};
+
+/**
+ * Compute the absolute coordinates and dimensions of an HTML element.
+ * @param {!Element} element Element to match.
+ * @return {!Object} Contains height, width, x, and y properties.
+ * @private
+ */
+Code.getBBox_ = function(element) {
+ var height = element.offsetHeight;
+ var width = element.offsetWidth;
+ var x = 0;
+ var y = 0;
+ do {
+ x += element.offsetLeft;
+ y += element.offsetTop;
+ element = element.offsetParent;
+ } while (element);
+ return {
+ height: height,
+ width: width,
+ x: x,
+ y: y
+ };
+};
+
+/**
+ * User's language (e.g. "en").
+ * @type {string}
+ */
+Code.LANG = Code.getLang();
+
+/**
+ * List of tab names.
+ * @private
+ */
+Code.TABS_ = ['blocks', 'javascript', 'php', 'python', 'dart', 'lua', 'xml'];
+
+/**
+ * List of tab names with casing, for display in the UI.
+ * @private
+ */
+Code.TABS_DISPLAY_ = [
+ 'Blocks', 'JavaScript', 'PHP', 'Python', 'Dart', 'Lua', 'XML',
+];
+
+Code.selected = 'blocks';
+
+/**
+ * Switch the visible pane when a tab is clicked.
+ * @param {string} clickedName Name of tab clicked.
+ */
+Code.tabClick = function(clickedName) {
+ // If the XML tab was open, save and render the content.
+ if (document.getElementById('tab_xml').classList.contains('tabon')) {
+ var xmlTextarea = document.getElementById('content_xml');
+ var xmlText = xmlTextarea.value;
+ var xmlDom = null;
+ try {
+ xmlDom = Blockly.Xml.textToDom(xmlText);
+ } catch (e) {
+ var q =
+ window.confirm(MSG['badXml'].replace('%1', e));
+ if (!q) {
+ // Leave the user on the XML tab.
+ return;
+ }
+ }
+ if (xmlDom) {
+ Code.workspace.clear();
+ Blockly.Xml.domToWorkspace(xmlDom, Code.workspace);
+ }
+ }
+
+ if (document.getElementById('tab_blocks').classList.contains('tabon')) {
+ Code.workspace.setVisible(false);
+ }
+ // Deselect all tabs and hide all panes.
+ for (var i = 0; i < Code.TABS_.length; i++) {
+ var name = Code.TABS_[i];
+ var tab = document.getElementById('tab_' + name);
+ tab.classList.add('taboff');
+ tab.classList.remove('tabon');
+ document.getElementById('content_' + name).style.visibility = 'hidden';
+ }
+
+ // Select the active tab.
+ Code.selected = clickedName;
+ var selectedTab = document.getElementById('tab_' + clickedName);
+ selectedTab.classList.remove('taboff');
+ selectedTab.classList.add('tabon');
+ // Show the selected pane.
+ document.getElementById('content_' + clickedName).style.visibility =
+ 'visible';
+ Code.renderContent();
+ // The code menu tab is on if the blocks tab is off.
+ var codeMenuTab = document.getElementById('tab_code');
+ if (clickedName == 'blocks') {
+ Code.workspace.setVisible(true);
+ codeMenuTab.className = 'taboff';
+ } else {
+ codeMenuTab.className = 'tabon';
+ }
+ // Sync the menu's value with the clicked tab value if needed.
+ var codeMenu = document.getElementById('code_menu');
+ for (var i = 0; i < codeMenu.options.length; i++) {
+ if (codeMenu.options[i].value == clickedName) {
+ codeMenu.selectedIndex = i;
+ break;
+ }
+ }
+ Blockly.svgResize(Code.workspace);
+};
+
+/**
+ * Populate the currently selected pane with content generated from the blocks.
+ */
+Code.renderContent = function() {
+ var content = document.getElementById('content_' + Code.selected);
+ // Initialize the pane.
+ if (content.id == 'content_xml') {
+ var xmlTextarea = document.getElementById('content_xml');
+ var xmlDom = Blockly.Xml.workspaceToDom(Code.workspace);
+ var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
+ xmlTextarea.value = xmlText;
+ xmlTextarea.focus();
+ } else if (content.id == 'content_javascript') {
+ Code.attemptCodeGeneration(Blockly.JavaScript);
+ } else if (content.id == 'content_python') {
+ Code.attemptCodeGeneration(Blockly.Python);
+ } else if (content.id == 'content_php') {
+ Code.attemptCodeGeneration(Blockly.PHP);
+ } else if (content.id == 'content_dart') {
+ Code.attemptCodeGeneration(Blockly.Dart);
+ } else if (content.id == 'content_lua') {
+ Code.attemptCodeGeneration(Blockly.Lua);
+ }
+ if (typeof PR == 'object') {
+ PR.prettyPrint();
+ }
+};
+
+/**
+ * Attempt to generate the code and display it in the UI, pretty printed.
+ * @param generator {!Blockly.Generator} The generator to use.
+ */
+Code.attemptCodeGeneration = function(generator) {
+ var content = document.getElementById('content_' + Code.selected);
+ content.textContent = '';
+ if (Code.checkAllGeneratorFunctionsDefined(generator)) {
+ var code = generator.workspaceToCode(Code.workspace);
+ content.textContent = code;
+ // Remove the 'prettyprinted' class, so that Prettify will recalculate.
+ content.className = content.className.replace('prettyprinted', '');
+ }
+};
+
+/**
+ * Check whether all blocks in use have generator functions.
+ * @param generator {!Blockly.Generator} The generator to use.
+ */
+Code.checkAllGeneratorFunctionsDefined = function(generator) {
+ var blocks = Code.workspace.getAllBlocks(false);
+ var missingBlockGenerators = [];
+ for (var i = 0; i < blocks.length; i++) {
+ var blockType = blocks[i].type;
+ if (!generator[blockType]) {
+ if (missingBlockGenerators.indexOf(blockType) == -1) {
+ missingBlockGenerators.push(blockType);
+ }
+ }
+ }
+
+ var valid = missingBlockGenerators.length == 0;
+ if (!valid) {
+ var msg = 'The generator code for the following blocks not specified for ' +
+ generator.name_ + ':\n - ' + missingBlockGenerators.join('\n - ');
+ Blockly.alert(msg); // Assuming synchronous. No callback.
+ }
+ return valid;
+};
+
+/**
+ * Initialize Blockly. Called on page load.
+ */
+Code.init = function() {
+ Code.initLanguage();
+
+ var rtl = Code.isRtl();
+ var container = document.getElementById('content_area');
+ var onresize = function(e) {
+ var bBox = Code.getBBox_(container);
+ for (var i = 0; i < Code.TABS_.length; i++) {
+ var el = document.getElementById('content_' + Code.TABS_[i]);
+ el.style.top = bBox.y + 'px';
+ el.style.left = bBox.x + 'px';
+ // Height and width need to be set, read back, then set again to
+ // compensate for scrollbars.
+ el.style.height = bBox.height + 'px';
+ el.style.height = (2 * bBox.height - el.offsetHeight) + 'px';
+ el.style.width = bBox.width + 'px';
+ el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
+ }
+ // Make the 'Blocks' tab line up with the toolbox.
+ if (Code.workspace && Code.workspace.getToolbox().width) {
+ document.getElementById('tab_blocks').style.minWidth =
+ (Code.workspace.getToolbox().width - 38) + 'px';
+ // Account for the 19 pixel margin and on each side.
+ }
+ };
+ window.addEventListener('resize', onresize, false);
+
+ // The toolbox XML specifies each category name using Blockly's messaging
+ // format (eg. ``).
+ // These message keys need to be defined in `Blockly.Msg` in order to
+ // be decoded by the library. Therefore, we'll use the `MSG` dictionary that's
+ // been defined for each language to import each category name message
+ // into `Blockly.Msg`.
+ // TODO: Clean up the message files so this is done explicitly instead of
+ // through this for-loop.
+ for (var messageKey in MSG) {
+ if (messageKey.indexOf('cat') == 0) {
+ Blockly.Msg[messageKey.toUpperCase()] = MSG[messageKey];
+ }
+ }
+
+ // Construct the toolbox XML, replacing translated variable names.
+ var toolboxText = document.getElementById('toolbox').outerHTML;
+ toolboxText = toolboxText.replace(/(^|[^%]){(\w+)}/g,
+ function(m, p1, p2) {return p1 + MSG[p2];});
+ var toolboxXml = Blockly.Xml.textToDom(toolboxText);
+
+ Code.workspace = Blockly.inject('content_blocks',
+ {grid:
+ {spacing: 25,
+ length: 3,
+ colour: '#ccc',
+ snap: true},
+ media: '../../media/',
+ rtl: rtl,
+ toolbox: toolboxXml,
+ zoom:
+ {controls: true,
+ wheel: true}
+ });
+
+ // Add to reserved word list: Local variables in execution environment (runJS)
+ // and the infinite loop detection function.
+ Blockly.JavaScript.addReservedWords('code,timeouts,checkTimeout');
+
+ Code.loadBlocks('');
+
+ if ('BlocklyStorage' in window) {
+ // Hook a save function onto unload.
+ BlocklyStorage.backupOnUnload(Code.workspace);
+ }
+
+ Code.tabClick(Code.selected);
+
+ Code.bindClick('trashButton',
+ function() {Code.discard(); Code.renderContent();});
+ Code.bindClick('runButton', Code.runJS);
+ // Disable the link button if page isn't backed by App Engine storage.
+ var linkButton = document.getElementById('linkButton');
+ if ('BlocklyStorage' in window) {
+ BlocklyStorage['HTTPREQUEST_ERROR'] = MSG['httpRequestError'];
+ BlocklyStorage['LINK_ALERT'] = MSG['linkAlert'];
+ BlocklyStorage['HASH_ERROR'] = MSG['hashError'];
+ BlocklyStorage['XML_ERROR'] = MSG['xmlError'];
+ Code.bindClick(linkButton,
+ function() {BlocklyStorage.link(Code.workspace);});
+ } else if (linkButton) {
+ linkButton.className = 'disabled';
+ }
+
+ for (var i = 0; i < Code.TABS_.length; i++) {
+ var name = Code.TABS_[i];
+ Code.bindClick('tab_' + name,
+ function(name_) {return function() {Code.tabClick(name_);};}(name));
+ }
+ Code.bindClick('tab_code', function(e) {
+ if (e.target !== document.getElementById('tab_code')) {
+ // Prevent clicks on child codeMenu from triggering a tab click.
+ return;
+ }
+ Code.changeCodingLanguage();
+ });
+
+ onresize();
+ Blockly.svgResize(Code.workspace);
+
+ // Lazy-load the syntax-highlighting.
+ window.setTimeout(Code.importPrettify, 1);
+};
+
+/**
+ * Initialize the page language.
+ */
+Code.initLanguage = function() {
+ // Set the HTML's language and direction.
+ var rtl = Code.isRtl();
+ document.dir = rtl ? 'rtl' : 'ltr';
+ document.head.parentElement.setAttribute('lang', Code.LANG);
+
+ // Sort languages alphabetically.
+ var languages = [];
+ for (var lang in Code.LANGUAGE_NAME) {
+ languages.push([Code.LANGUAGE_NAME[lang], lang]);
+ }
+ var comp = function(a, b) {
+ // Sort based on first argument ('English', 'Русский', '简体字', etc).
+ if (a[0] > b[0]) return 1;
+ if (a[0] < b[0]) return -1;
+ return 0;
+ };
+ languages.sort(comp);
+ // Populate the language selection menu.
+ var languageMenu = document.getElementById('languageMenu');
+ languageMenu.options.length = 0;
+ for (var i = 0; i < languages.length; i++) {
+ var tuple = languages[i];
+ var lang = tuple[tuple.length - 1];
+ var option = new Option(tuple[0], lang);
+ if (lang == Code.LANG) {
+ option.selected = true;
+ }
+ languageMenu.options.add(option);
+ }
+ languageMenu.addEventListener('change', Code.changeLanguage, true);
+
+ // Populate the coding language selection menu.
+ var codeMenu = document.getElementById('code_menu');
+ codeMenu.options.length = 0;
+ for (var i = 1; i < Code.TABS_.length; i++) {
+ codeMenu.options.add(new Option(Code.TABS_DISPLAY_[i], Code.TABS_[i]));
+ }
+ codeMenu.addEventListener('change', Code.changeCodingLanguage);
+
+ // Inject language strings.
+ document.title += ' ' + MSG['title'];
+ document.getElementById('title').textContent = MSG['title'];
+ document.getElementById('tab_blocks').textContent = MSG['blocks'];
+
+ document.getElementById('linkButton').title = MSG['linkTooltip'];
+ document.getElementById('runButton').title = MSG['runTooltip'];
+ document.getElementById('trashButton').title = MSG['trashTooltip'];
+};
+
+/**
+ * Execute the user's code.
+ * Just a quick and dirty eval. Catch infinite loops.
+ */
+Code.runJS = function() {
+ Blockly.JavaScript.INFINITE_LOOP_TRAP = 'checkTimeout();\n';
+ var timeouts = 0;
+ var checkTimeout = function() {
+ if (timeouts++ > 1000000) {
+ throw MSG['timeout'];
+ }
+ };
+ var code = Blockly.JavaScript.workspaceToCode(Code.workspace);
+ Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
+ try {
+ eval(code);
+ } catch (e) {
+ alert(MSG['badCode'].replace('%1', e));
+ }
+};
+
+/**
+ * Discard all blocks from the workspace.
+ */
+Code.discard = function() {
+ var count = Code.workspace.getAllBlocks(false).length;
+ if (count < 2 ||
+ window.confirm(Blockly.Msg['DELETE_ALL_BLOCKS'].replace('%1', count))) {
+ Code.workspace.clear();
+ if (window.location.hash) {
+ window.location.hash = '';
+ }
+ }
+};
+
+// Load the Code demo's language strings.
+document.write('\n');
+// Load Blockly's language strings.
+document.write('\n');
+
+window.addEventListener('load', Code.init);
diff --git a/js/demos/code/icon.png b/js/demos/code/icon.png
new file mode 100644
index 0000000..feaa929
Binary files /dev/null and b/js/demos/code/icon.png differ
diff --git a/js/demos/code/icons.png b/js/demos/code/icons.png
new file mode 100644
index 0000000..7cced7a
Binary files /dev/null and b/js/demos/code/icons.png differ
diff --git a/js/demos/code/index.html b/js/demos/code/index.html
new file mode 100644
index 0000000..298613f
--- /dev/null
+++ b/js/demos/code/index.html
@@ -0,0 +1,393 @@
+
+
+
+
+
+
+ Blockly Demo:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/code/msg/ar.js b/js/demos/code/msg/ar.js
new file mode 100644
index 0000000..952198b
--- /dev/null
+++ b/js/demos/code/msg/ar.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "كود",
+ blocks: "البلوكات",
+ linkTooltip: "احفظ ووصلة إلى البلوكات.",
+ runTooltip: "شغل البرنامج المعرف بواسطة البلوكات في مساحة العمل.",
+ badCode: "خطأ في البرنامج:\n %1",
+ timeout: "تم تجاوز الحد الأقصى لتكرارات التنفيذ .",
+ trashTooltip: "تجاهل كل البلوكات.",
+ catLogic: "منطق",
+ catLoops: "الحلقات",
+ catMath: "رياضيات",
+ catText: "نص",
+ catLists: "قوائم",
+ catColour: "لون",
+ catVariables: "متغيرات",
+ catFunctions: "إجراءات",
+ listVariable: "قائمة",
+ textVariable: "نص",
+ httpRequestError: "كانت هناك مشكلة مع هذا الطلب.",
+ linkAlert: "مشاركة كود بلوكلي الخاص بك مع هذا الرابط:\n %1",
+ hashError: "عذراً،ال '%1' لا تتوافق مع أي برنامج تم حفظه.",
+ xmlError: "تعذر تحميل الملف المحفوظة الخاصة بك. ربما تم إنشاؤه باستخدام إصدار مختلف من بلوكلي؟",
+ badXml: "خطأ في توزيع ال \"XML\":\n %1\n\nحدد 'موافق' للتخلي عن التغييرات أو 'إلغاء الأمر' لمواصلة تحرير ال\"XML\"."
+};
diff --git a/js/demos/code/msg/be-tarask.js b/js/demos/code/msg/be-tarask.js
new file mode 100644
index 0000000..5c8d722
--- /dev/null
+++ b/js/demos/code/msg/be-tarask.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Код",
+ blocks: "Блёкі",
+ linkTooltip: "Захаваць і зьвязаць з блёкамі.",
+ runTooltip: "Запусьціце праграму, вызначаную блёкамі ў працоўнай вобласьці.",
+ badCode: "Памылка праграмы:\n%1",
+ timeout: "Перавышана максымальная колькасьць ітэрацыяў.",
+ trashTooltip: "Выдаліць усе блёкі.",
+ catLogic: "Лёгіка",
+ catLoops: "Петлі",
+ catMath: "Матэматычныя формулы",
+ catText: "Тэкст",
+ catLists: "Сьпісы",
+ catColour: "Колер",
+ catVariables: "Зьменныя",
+ catFunctions: "Функцыі",
+ listVariable: "сьпіс",
+ textVariable: "тэкст",
+ httpRequestError: "Узьнікла праблема з запытам.",
+ linkAlert: "Падзяліцца Вашым блёкам праз гэтую спасылку:\n\n%1",
+ hashError: "Прабачце, '%1' не адпавядае ніводнай захаванай праграме.",
+ xmlError: "Не атрымалася загрузіць захаваны файл. Магчыма, ён быў створаны з іншай вэрсіяй Блёклі?",
+ badXml: "Памылка сынтаксічнага аналізу XML:\n%1\n\nАбярыце \"ОК\", каб адмовіцца ад зьменаў ці \"Скасаваць\" для далейшага рэдагаваньня XML."
+};
diff --git a/js/demos/code/msg/br.js b/js/demos/code/msg/br.js
new file mode 100644
index 0000000..321e28e
--- /dev/null
+++ b/js/demos/code/msg/br.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kod",
+ blocks: "Bloc'hoù",
+ linkTooltip: "Enrollañ ha liammañ d'ar bloc'hadoù.",
+ runTooltip: "Lañsañ ar programm termenet gant ar bloc'hadoù en takad labour.",
+ badCode: "Fazi programm :\n%1",
+ timeout: "Tizhet eo bet an niver brasañ a iteradurioù seveniñ aotreet.",
+ trashTooltip: "Disteurel an holl vloc'hoù.",
+ catLogic: "Poell",
+ catLoops: "Boukloù",
+ catMath: "Matematik",
+ catText: "Testenn",
+ catLists: "Rolloù",
+ catColour: "Liv",
+ catVariables: "Argemmennoù",
+ catFunctions: "Arc'hwelioù",
+ listVariable: "roll",
+ textVariable: "testenn",
+ httpRequestError: "Ur gudenn zo gant ar reked.",
+ linkAlert: "Rannañ ho ploc'hoù gant al liamm-mañ :\n\n%1",
+ hashError: "Digarezit. \"%1\" ne glot gant programm enrollet ebet.",
+ xmlError: "Ne c'haller ket kargañ ho restr enrollet. Marteze e oa bet krouet gant ur stumm disheñvel eus Blockly ?",
+ badXml: "Fazi dielfennañ XML :\n%1\n\nDibabit \"Mat eo\" evit dilezel ar c'hemmoù-se pe \"Nullañ\" evit kemmañ an XML c'hoazh."
+};
diff --git a/js/demos/code/msg/ca.js b/js/demos/code/msg/ca.js
new file mode 100644
index 0000000..2b6d973
--- /dev/null
+++ b/js/demos/code/msg/ca.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Codi",
+ blocks: "Blocs",
+ linkTooltip: "Desa i enllaça als blocs.",
+ runTooltip: "Executa el programa definit pels blocs de l'àrea de treball.",
+ badCode: "Error de programa:\n %1",
+ timeout: "S'ha superat el nombre màxim d'iteracions d'execució.",
+ trashTooltip: "Descarta tots els blocs.",
+ catLogic: "Lògica",
+ catLoops: "Bucles",
+ catMath: "Matemàtiques",
+ catText: "Text",
+ catLists: "Llistes",
+ catColour: "Color",
+ catVariables: "Variables",
+ catFunctions: "Procediments",
+ listVariable: "llista",
+ textVariable: "text",
+ httpRequestError: "Hi ha hagut un problema amb la sol·licitud.",
+ linkAlert: "Comparteix els teus blocs amb aquest enllaç: %1",
+ hashError: "Ho sentim, '%1' no es correspon amb cap fitxer desat de Blockly.",
+ xmlError: "No s'ha pogut carregar el teu fitxer desat. Potser va ser creat amb una versió diferent de Blockly?",
+ badXml: "Error d'anàlisi XML:\n%1\n\nSeleccioneu 'Acceptar' per abandonar els vostres canvis, o 'Cancel·lar' per continuar editant l'XML."
+};
diff --git a/js/demos/code/msg/cs.js b/js/demos/code/msg/cs.js
new file mode 100644
index 0000000..1026511
--- /dev/null
+++ b/js/demos/code/msg/cs.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kód",
+ blocks: "Bloky",
+ linkTooltip: "Ulož a spoj bloky..",
+ runTooltip: "",
+ badCode: "Chyba programu:\n%1",
+ timeout: "Maximum execution iterations exceeded.",
+ trashTooltip: "Zahodit všechny bloky.",
+ catLogic: "Logika",
+ catLoops: "Smyčky",
+ catMath: "Matematika",
+ catText: "Text",
+ catLists: "Seznamy",
+ catColour: "Barva",
+ catVariables: "Proměnné",
+ catFunctions: "Procedury",
+ listVariable: "seznam",
+ textVariable: "text",
+ httpRequestError: "Došlo k potížím s požadavkem.",
+ linkAlert: "Sdílej bloky tímto odkazem: \n\n%1",
+ hashError: "Omlouváme se, '%1' nesouhlasí s žádným z uložených souborů.",
+ xmlError: "Nepodařilo se uložit vás soubor. Pravděpodobně byl vytvořen jinou verzí Blockly?",
+ badXml: "Chyba parsování XML:\n%1\n\nVybrat \"OK\" pro zahození vašich změn nebo 'Cancel' k dalšímu upravování XML."
+};
diff --git a/js/demos/code/msg/da.js b/js/demos/code/msg/da.js
new file mode 100644
index 0000000..089450b
--- /dev/null
+++ b/js/demos/code/msg/da.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kode",
+ blocks: "Blokke",
+ linkTooltip: "Gem og link til blokke.",
+ runTooltip: "Kør programmet, der er defineret af blokkene i arbejdsområdet.",
+ badCode: "Programfejl:\n%1",
+ timeout: "Maksimale antal udførelsesgentagelser overskredet.",
+ trashTooltip: "Kassér alle blokke.",
+ catLogic: "Logik",
+ catLoops: "Løkker",
+ catMath: "Matematik",
+ catText: "Tekst",
+ catLists: "Lister",
+ catColour: "Farve",
+ catVariables: "Variabler",
+ catFunctions: "Funktioner",
+ listVariable: "liste",
+ textVariable: "tekst",
+ httpRequestError: "Der var et problem med forespørgslen.",
+ linkAlert: "Del dine blokke med dette link:\n\n%1",
+ hashError: "Beklager, '%1' passer ikke med nogen gemt Blockly fil.",
+ xmlError: "Kunne ikke hente din gemte fil. Måske er den lavet med en anden udgave af Blockly?",
+ badXml: "Fejl under fortolkningen af XML:\n%1\n\nVælg 'OK' for at opgive dine ændringer eller 'Afbryd' for at redigere XML-filen yderligere."
+};
diff --git a/js/demos/code/msg/de.js b/js/demos/code/msg/de.js
new file mode 100644
index 0000000..422f918
--- /dev/null
+++ b/js/demos/code/msg/de.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Code",
+ blocks: "Bausteine",
+ linkTooltip: "Speichern und auf Bausteine verlinken.",
+ runTooltip: "Das Programm ausführen, das von den Bausteinen im Arbeitsbereich definiert ist.",
+ badCode: "Programmfehler:\n%1",
+ timeout: "Die maximalen Ausführungswiederholungen wurden überschritten.",
+ trashTooltip: "Alle Bausteine verwerfen.",
+ catLogic: "Logik",
+ catLoops: "Schleifen",
+ catMath: "Mathematik",
+ catText: "Text",
+ catLists: "Listen",
+ catColour: "Farbe",
+ catVariables: "Variablen",
+ catFunctions: "Funktionen",
+ listVariable: "Liste",
+ textVariable: "Text",
+ httpRequestError: "Mit der Anfrage gab es ein Problem.",
+ linkAlert: "Teile deine Bausteine mit diesem Link:\n\n%1",
+ hashError: "„%1“ stimmt leider mit keinem gespeicherten Programm überein.",
+ xmlError: "Deine gespeicherte Datei konnte nicht geladen werden. Vielleicht wurde sie mit einer anderen Version von Blockly erstellt.",
+ badXml: "Fehler beim Parsen von XML:\n%1\n\nWähle 'OK' zum Verwerfen deiner Änderungen oder 'Abbrechen' zum weiteren Bearbeiten des XML."
+};
diff --git a/js/demos/code/msg/el.js b/js/demos/code/msg/el.js
new file mode 100644
index 0000000..c63b7a6
--- /dev/null
+++ b/js/demos/code/msg/el.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Κώδικας",
+ blocks: "Μπλοκ",
+ linkTooltip: "Αποθηκεύει και συνδέει σε μπλοκ.",
+ runTooltip: "Εκτελεί το πρόγραμμα που ορίζεται από τα μπλοκ στον χώρο εργασίας.",
+ badCode: "Σφάλμα προγράμματος:\n%1",
+ timeout: "Υπέρβαση μέγιστου αριθμού επαναλήψεων.",
+ trashTooltip: "Απόρριψη όλων των μπλοκ.",
+ catLogic: "Λογική",
+ catLoops: "Επαναλήψεις",
+ catMath: "Μαθηματικά",
+ catText: "Κείμενο",
+ catLists: "Λίστες",
+ catColour: "Χρώμα",
+ catVariables: "Μεταβλητές",
+ catFunctions: "Συναρτήσεις",
+ listVariable: "λίστα",
+ textVariable: "κείμενο",
+ httpRequestError: "Υπήρξε πρόβλημα με το αίτημα.",
+ linkAlert: "Κοινοποίησε τα μπλοκ σου με αυτόν τον σύνδεσμο:\n\n%1",
+ hashError: "Λυπάμαι, το «%1» δεν αντιστοιχεί σε κανένα αποθηκευμένο πρόγραμμα.",
+ xmlError: "Δεν μπορώ να φορτώσω το αποθηκευμένο αρχείο σου. Μήπως δημιουργήθηκε από μία παλιότερη έκδοση του Blockly;",
+ badXml: "Σφάλμα ανάλυσης XML:\n%1\n\nΕπίλεξε «Εντάξει» για να εγκαταλείψεις τις αλλαγές σου ή «Ακύρωση» για να επεξεργαστείς το XML κι άλλο."
+};
diff --git a/js/demos/code/msg/en.js b/js/demos/code/msg/en.js
new file mode 100644
index 0000000..8d52cf3
--- /dev/null
+++ b/js/demos/code/msg/en.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Code",
+ blocks: "Blocks",
+ linkTooltip: "Save and link to blocks.",
+ runTooltip: "Run the program defined by the blocks in the workspace.",
+ badCode: "Program error:\n%1",
+ timeout: "Maximum execution iterations exceeded.",
+ trashTooltip: "Discard all blocks.",
+ catLogic: "Logic",
+ catLoops: "Loops",
+ catMath: "Math",
+ catText: "Text",
+ catLists: "Lists",
+ catColour: "Colour",
+ catVariables: "Variables",
+ catFunctions: "Functions",
+ listVariable: "list",
+ textVariable: "text",
+ httpRequestError: "There was a problem with the request.",
+ linkAlert: "Share your blocks with this link:\n\n%1",
+ hashError: "Sorry, '%1' doesn't correspond with any saved program.",
+ xmlError: "Could not load your saved file. Perhaps it was created with a different version of Blockly?",
+ badXml: "Error parsing XML:\n%1\n\nSelect 'OK' to abandon your changes or 'Cancel' to further edit the XML."
+};
diff --git a/js/demos/code/msg/es.js b/js/demos/code/msg/es.js
new file mode 100644
index 0000000..24358e3
--- /dev/null
+++ b/js/demos/code/msg/es.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Código",
+ blocks: "Bloques",
+ linkTooltip: "Guarda conexión a los bloques.",
+ runTooltip: "Ejecute el programa definido por los bloques en el área de trabajo.",
+ badCode: "Error del programa:\n%1",
+ timeout: "Se excedio el máximo de iteraciones ejecutadas permitidas.",
+ trashTooltip: "Descartar todos los bloques.",
+ catLogic: "Lógica",
+ catLoops: "Secuencias",
+ catMath: "Matemáticas",
+ catText: "Texto",
+ catLists: "Listas",
+ catColour: "Color",
+ catVariables: "Variables",
+ catFunctions: "Funciones",
+ listVariable: "lista",
+ textVariable: "texto",
+ httpRequestError: "Hubo un problema con la petición.",
+ linkAlert: "Comparte tus bloques con este enlace:\n\n%1",
+ hashError: "«%1» no corresponde con ningún programa guardado.",
+ xmlError: "No se pudo cargar el archivo guardado. ¿Quizá fue creado con otra versión de Blockly?",
+ badXml: "Error de análisis XML:\n%1\n\nSelecciona OK para abandonar tus cambios o Cancelar para seguir editando el XML."
+};
diff --git a/js/demos/code/msg/et.js b/js/demos/code/msg/et.js
new file mode 100644
index 0000000..320c391
--- /dev/null
+++ b/js/demos/code/msg/et.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kood",
+ blocks: "Plokid",
+ linkTooltip: "Salvesta ja tekita link plokkidele.",
+ runTooltip: "Käivita töölaual olevate plokkidega defineeritud programm.",
+ badCode: "Viga programmis:\n%1",
+ timeout: "Käivitatavate iteratsioonide maksimaalne arv on ületatud.",
+ trashTooltip: "Eemalda kõik plokid.",
+ catLogic: "Loogika",
+ catLoops: "Kordus",
+ catMath: "Matemaatika",
+ catText: "Tekst",
+ catLists: "Loendid",
+ catColour: "Värv",
+ catVariables: "Muutujad",
+ catFunctions: "Funktsioonid",
+ listVariable: "loend",
+ textVariable: "tekst",
+ httpRequestError: "Probleem päringuga.",
+ linkAlert: "Oma plokke saad jagada selle lingiga:\n\n%1",
+ hashError: "Vabandust, kuid '%1' ei vasta ühelegi salvestatud programmile.",
+ xmlError: "Su salvestatud faili ei õnnestunud laadida. Võibolla on see loodud mõne teise Blockly versiooniga?",
+ badXml: "Viga XML-i parsimisel:\n%1\n\nTehtud muudatustest loobumiseks vajuta 'OK', XML-i muudatuste tegemise jätkamiseks 'Katkesta'."
+};
diff --git a/js/demos/code/msg/fa.js b/js/demos/code/msg/fa.js
new file mode 100644
index 0000000..96dd966
--- /dev/null
+++ b/js/demos/code/msg/fa.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "کد",
+ blocks: "بلوکها",
+ linkTooltip: "ذخیره و پیوند به بلوکها.",
+ runTooltip: "اجرای برنامهٔ تعریفشده توسط بلوکها در فضای کار.",
+ badCode: "خطای برنامه:\n%1",
+ timeout: "حداکثر تکرارهای اجرا رد شدهاست.",
+ trashTooltip: "دورریختن همهٔ بلوکها.",
+ catLogic: "منطق",
+ catLoops: "حلقهها",
+ catMath: "ریاضی",
+ catText: "متن",
+ catLists: "فهرستها",
+ catColour: "رنگ",
+ catVariables: "متغییرها",
+ catFunctions: "توابع",
+ listVariable: "فهرست",
+ textVariable: "متن",
+ httpRequestError: "مشکلی با درخواست وجود داشت.",
+ linkAlert: "اشتراکگذاری بلاکهایتان با این پیوند:\n\n%1",
+ hashError: "شرمنده، «%1» با هیچ برنامهٔ ذخیرهشدهای تطبیق پیدا نکرد.",
+ xmlError: "نتوانست پروندهٔ ذخیرهٔ شما بارگیری شود. احتمالاً با نسخهٔ متفاوتی از بلوکی درست شدهاست؟",
+ badXml: "خطای تجزیهٔ اکسامال:\n%1\n\n«باشد» را برای ذخیره و «فسخ» را برای ویرایش بیشتر اکسامال انتخاب کنید."
+};
diff --git a/js/demos/code/msg/fr.js b/js/demos/code/msg/fr.js
new file mode 100644
index 0000000..6018113
--- /dev/null
+++ b/js/demos/code/msg/fr.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Code",
+ blocks: "Blocs",
+ linkTooltip: "Sauvegarder et lier aux blocs.",
+ runTooltip: "Lancer le programme défini par les blocs dans l’espace de travail.",
+ badCode: "Erreur du programme :\n%1",
+ timeout: "Nombre maximum d’itérations d’exécution dépassé.",
+ trashTooltip: "Jeter tous les blocs.",
+ catLogic: "Logique",
+ catLoops: "Boucles",
+ catMath: "Math",
+ catText: "Texte",
+ catLists: "Listes",
+ catColour: "Couleur",
+ catVariables: "Variables",
+ catFunctions: "Fonctions",
+ listVariable: "liste",
+ textVariable: "texte",
+ httpRequestError: "Il y a eu un problème avec la demande.",
+ linkAlert: "Partagez vos blocs grâce à ce lien:\n\n%1",
+ hashError: "Désolé, '%1' ne correspond à aucun programme sauvegardé.",
+ xmlError: "Impossible de charger le fichier de sauvegarde. Peut être a t-il été créé avec une autre version de Blockly?",
+ badXml: "Erreur d’analyse du XML :\n%1\n\nSélectionner 'OK' pour abandonner vos modifications ou 'Annuler' pour continuer à modifier le XML."
+};
diff --git a/js/demos/code/msg/he.js b/js/demos/code/msg/he.js
new file mode 100644
index 0000000..dc28266
--- /dev/null
+++ b/js/demos/code/msg/he.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "קוד",
+ blocks: "קטעי קוד",
+ linkTooltip: "שמירה וקישור לקטעי קוד.",
+ runTooltip: "הרצת התכנית שהוגדרה על ידי קטעי הקוד שבמרחב העבודה.",
+ badCode: "שגיאה בתכנית: %1",
+ timeout: "חריגה ממספר פעולות חוזרות אפשריות.",
+ trashTooltip: "השלך את כל קטעי הקוד.",
+ catLogic: "לוגיקה",
+ catLoops: "לולאות",
+ catMath: "מתמטיקה",
+ catText: "טקסט",
+ catLists: "רשימות",
+ catColour: "צבע",
+ catVariables: "משתנים",
+ catFunctions: "פונקציות",
+ listVariable: "רשימה",
+ textVariable: "טקסט",
+ httpRequestError: "הבקשה נכשלה.",
+ linkAlert: "ניתן לשתף את קטעי הקוד שלך באמצעות קישור זה:\n\n%1",
+ hashError: "לצערנו, '%1' איננו מתאים לאף אחת מהתוכניות השמורות",
+ xmlError: "נסיון הטעינה של הקובץ השמור שלך נכשל. האם ייתכן שהוא נוצר בגרסא שונה של בלוקלי?",
+ badXml: "תקלה בפענוח XML:\n\n%1\n\nנא לבחור 'אישור' כדי לנטוש את השינויים שלך או 'ביטול' כדי להמשיך ולערוך את ה־XML."
+};
diff --git a/js/demos/code/msg/hrx.js b/js/demos/code/msg/hrx.js
new file mode 100644
index 0000000..ca0dea3
--- /dev/null
+++ b/js/demos/code/msg/hrx.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Code",
+ blocks: "Bausten",
+ linkTooltip: "Speichre und auf Bausten verlinke.",
+ runTooltip: "Das Programm ausfüahre, das von den Bausten im Oorweitsbereich definiert ist.",
+ badCode: "Programmfehler:\n%1",
+ timeout: "Die maximale Ausführungswiederholunge woore üwerschritt.",
+ trashTooltip: "All Bausten verwerfe.",
+ catLogic: "Logik",
+ catLoops: "Schleife",
+ catMath: "Mathematik",
+ catText: "Text",
+ catLists: "Liste",
+ catColour: "Farreb",
+ catVariables: "Variable",
+ catFunctions: "Funktione",
+ listVariable: "List",
+ textVariable: "Text",
+ httpRequestError: "Mit der Oonfroch hots en Problem geb.",
+ linkAlert: "Tel von dein Bausten mit dem Link:\n\n%1",
+ hashError: "„%1“ stimmt leider mit kenem üweren gespeicherte Programm.",
+ xmlError: "Dein gespeicherte Datei könnt net gelood sin. Vielleicht woard se mit ener annre Version von Blockly erstellt.",
+ badXml: "Fehler beim Parse von XML:\n%1\n\nWähle 'OK' zum Verwerfe von deiner Ändrunge orrer 'Abbreche' zum XML weiter beoorbeite."
+};
diff --git a/js/demos/code/msg/hu.js b/js/demos/code/msg/hu.js
new file mode 100644
index 0000000..eee1868
--- /dev/null
+++ b/js/demos/code/msg/hu.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kódszerkesztő",
+ blocks: "Blokkok",
+ linkTooltip: "Hivatkozás létrehozása",
+ runTooltip: "Program futtatása.",
+ badCode: "Program hiba:\n%1",
+ timeout: "A program elérte a maximális végrehajtási időt.",
+ trashTooltip: "Összes blokk törlése.",
+ catLogic: "Logikai műveletek",
+ catLoops: "Ciklusok",
+ catMath: "Matematikai műveletek",
+ catText: "Sztring műveletek",
+ catLists: "Listakezelés",
+ catColour: "Színek",
+ catVariables: "Változók",
+ catFunctions: "Eljárások",
+ listVariable: "lista",
+ textVariable: "szöveg",
+ httpRequestError: "A kéréssel kapcsolatban probléma merült fel.",
+ linkAlert: "Ezzel a hivatkozással tudod megosztani a programodat:\n\n%1",
+ hashError: "Sajnos a '%1' hivatkozás nem tartozik egyetlen programhoz sem.",
+ xmlError: "A programodat nem lehet betölteni. Elképzelhető, hogy a Blockly egy másik verziójában készült?",
+ badXml: "Hiba az XML feldolgozásakor:\n%1\n\nVáltozások elvetése?"
+};
diff --git a/js/demos/code/msg/ia.js b/js/demos/code/msg/ia.js
new file mode 100644
index 0000000..5938458
--- /dev/null
+++ b/js/demos/code/msg/ia.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Codice",
+ blocks: "Blocos",
+ linkTooltip: "Salveguardar e ligar a blocos.",
+ runTooltip: "Executar le programma definite per le blocos in le spatio de travalio.",
+ badCode: "Error del programma:\n%1",
+ timeout: "Le numero de iterationes executate ha excedite le maximo.",
+ trashTooltip: "Abandonar tote le blocos.",
+ catLogic: "Logica",
+ catLoops: "Buclas",
+ catMath: "Mathematica",
+ catText: "Texto",
+ catLists: "Listas",
+ catColour: "Color",
+ catVariables: "Variabiles",
+ catFunctions: "Functiones",
+ listVariable: "lista",
+ textVariable: "texto",
+ httpRequestError: "Il habeva un problema con le requesta.",
+ linkAlert: "Divide tu blocos con iste ligamine:\n\n%1",
+ hashError: "Infelicemente, '%1' non corresponde a alcun programma salveguardate.",
+ xmlError: "Impossibile cargar le file salveguardate. Pote esser que illo ha essite create con un altere version de Blockly?",
+ badXml: "Error de analyse del XML:\n%1\n\nSelige 'OK' pro abandonar le modificationes o 'Cancellar' pro continuar a modificar le codice XML."
+};
diff --git a/js/demos/code/msg/is.js b/js/demos/code/msg/is.js
new file mode 100644
index 0000000..fa5c40d
--- /dev/null
+++ b/js/demos/code/msg/is.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kóði",
+ blocks: "Kubbar",
+ linkTooltip: "Vista og tengja við kubba.",
+ runTooltip: "Keyra forritið sem kubbarnir á vinnusvæðinu mynda.",
+ badCode: "Villa í forriti:\n%1",
+ timeout: "Forritið hefur endurtekið sig of oft.",
+ trashTooltip: "Fleygja öllum kubbum.",
+ catLogic: "Rökvísi",
+ catLoops: "Lykkjur",
+ catMath: "Reikningur",
+ catText: "Texti",
+ catLists: "Listar",
+ catColour: "Litir",
+ catVariables: "Breytur",
+ catFunctions: "Stefjur",
+ listVariable: "listi",
+ textVariable: "texti",
+ httpRequestError: "Það kom upp vandamál með beiðnina.",
+ linkAlert: "Deildu kubbunum þínum með þessari krækju:",
+ hashError: "Því miður, '%1' passar ekki við neitt vistað forrit.",
+ xmlError: "Gat ekki hlaðið vistuðu skrána þína. Var hún kannske búin til í annarri útgáfu af Blockly?",
+ badXml: "Villa við úrvinnslu XML:\n%1\n\nVeldu 'Í lagi' til að sleppa breytingum eða 'Hætta við' til að halda áfram með XML."
+};
diff --git a/js/demos/code/msg/it.js b/js/demos/code/msg/it.js
new file mode 100644
index 0000000..cd69b66
--- /dev/null
+++ b/js/demos/code/msg/it.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Codice",
+ blocks: "Blocchi",
+ linkTooltip: "Salva e collega ai blocchi.",
+ runTooltip: "Esegui il programma definito dai blocchi nell'area di lavoro.",
+ badCode: "Errore programma:\n%1",
+ timeout: "È stato superato il numero massimo consentito di interazioni eseguite.",
+ trashTooltip: "Elimina tutti i blocchi.",
+ catLogic: "Logica",
+ catLoops: "Cicli",
+ catMath: "Matematica",
+ catText: "Testo",
+ catLists: "Elenchi",
+ catColour: "Colore",
+ catVariables: "Variabili",
+ catFunctions: "Funzioni",
+ listVariable: "elenco",
+ textVariable: "testo",
+ httpRequestError: "La richiesta non è stata soddisfatta.",
+ linkAlert: "Condividi i tuoi blocchi con questo collegamento:\n\n%1",
+ hashError: "Mi spiace, '%1' non corrisponde ad alcun programma salvato.",
+ xmlError: "Non è stato possibile caricare il documento. Forse è stato creato con una versione diversa di Blockly?",
+ badXml: "Errore durante l'analisi XML:\n%1\n\nSeleziona 'OK' per abbandonare le modifiche o 'Annulla' per continuare a modificare l'XML."
+};
diff --git a/js/demos/code/msg/ja.js b/js/demos/code/msg/ja.js
new file mode 100644
index 0000000..6d50419
--- /dev/null
+++ b/js/demos/code/msg/ja.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "コード",
+ blocks: "ブロック",
+ linkTooltip: "ブロックの状態を保存してリンクを取得します。",
+ runTooltip: "ブロックで作成したプログラムを実行します。",
+ badCode: "プログラムのエラー:\n%1",
+ timeout: "命令の実行回数が制限値を超えました。",
+ trashTooltip: "すべてのブロックを消します。",
+ catLogic: "論理",
+ catLoops: "繰り返し",
+ catMath: "数学",
+ catText: "テキスト",
+ catLists: "リスト",
+ catColour: "色",
+ catVariables: "変数",
+ catFunctions: "関数",
+ listVariable: "リスト",
+ textVariable: "テキスト",
+ httpRequestError: "ネットワーク接続のエラーです。",
+ linkAlert: "ブロックの状態をこのリンクで共有できます:\n\n%1",
+ hashError: "すみません。「%1」という名前のプログラムは保存されていません。",
+ xmlError: "保存されたファイルを読み込めませんでした。別のバージョンのブロックリーで作成された可能性があります。",
+ badXml: "XML のエラーです:\n%1\n\nXML の変更をやめるには「OK」、編集を続けるには「キャンセル」を選んでください。"
+};
diff --git a/js/demos/code/msg/kab.js b/js/demos/code/msg/kab.js
new file mode 100644
index 0000000..648ff7f
--- /dev/null
+++ b/js/demos/code/msg/kab.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Tangalt",
+ blocks: "Iḥedran",
+ linkTooltip: "Sekles sakin cudd ar iḥedran.",
+ runTooltip: "Senker ahil i d-sbadun iḥedran di tallunt n umahil.",
+ badCode: "Tuccḍa deg ahil :\n%1",
+ timeout: "Amḍan afellay n wallusen n uselkem iɛeddan.",
+ trashTooltip: "Ḍeggeṛ akk iḥedran.",
+ catLogic: "Tameẓla",
+ catLoops: "Tineddicin",
+ catMath: "Tusnakt",
+ catText: "Aḍris",
+ catLists: "Tibdarin",
+ catColour: "Ini",
+ catVariables: "Imuttiyen",
+ catFunctions: "Tiwiriwin",
+ listVariable: "tabdart",
+ textVariable: "aḍris",
+ httpRequestError: "yella ugur deg usuter.",
+ linkAlert: "Bḍu iḥedran-ik s useqdec n useɣwen-agi:\n\n%1",
+ hashError: "Suref-aɣ, '%1' ur imenṭaḍ ulad d yiwen n wahil yettwaskelsen.",
+ xmlError: "Ur izmir ara ad d-isali afaylu n usekles. Ahatyettwarna s lqem-nniḍen n Blockly?",
+ badXml: "Tuccḍa di tesleḍt n XML :\n%1\n\nFren 'IH' akken ad tzgleḍ asnifel-ik 'Sefsex' akken ad tkemmleḍ asnifel n XML."
+};
diff --git a/js/demos/code/msg/ko.js b/js/demos/code/msg/ko.js
new file mode 100644
index 0000000..990cb6f
--- /dev/null
+++ b/js/demos/code/msg/ko.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "코드",
+ blocks: "블록",
+ linkTooltip: "블록을 저장하고 링크를 가져옵니다.",
+ runTooltip: "작업 공간에서 블록으로 정의된 프로그램을 실행합니다.",
+ badCode: "프로그램 오류:\n%1",
+ timeout: "최대 실행 반복을 초과했습니다.",
+ trashTooltip: "모든 블록을 버립니다.",
+ catLogic: "논리",
+ catLoops: "반복",
+ catMath: "수학",
+ catText: "텍스트",
+ catLists: "목록",
+ catColour: "색",
+ catVariables: "변수",
+ catFunctions: "기능",
+ listVariable: "목록",
+ textVariable: "텍스트",
+ httpRequestError: "요청에 문제가 있습니다.",
+ linkAlert: "다음 링크로 블록을 공유하세요:\n\n%1",
+ hashError: "죄송하지만 '%1'은 어떤 저장된 프로그램으로 일치하지 않습니다.",
+ xmlError: "저장된 파일을 불러올 수 없습니다. 혹시 블록리의 다른 버전으로 만들었습니까?",
+ badXml: "XML 구문 분석 오류:\n%1\n\n바뀜을 포기하려면 '확인'을 선택하고 XML을 더 편집하려면 '취소'를 선택하세요."
+};
diff --git a/js/demos/code/msg/mk.js b/js/demos/code/msg/mk.js
new file mode 100644
index 0000000..cc344a6
--- /dev/null
+++ b/js/demos/code/msg/mk.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Код",
+ blocks: "Блокчиња",
+ linkTooltip: "Зачувај и стави врска до блокчињата.",
+ runTooltip: "Пушти го програмот определен од блокчињата во работниот простор.",
+ badCode: "Грешка во програмот:\n%1",
+ timeout: "Го надминавте допуштениот број на повторувања во извршувањето.",
+ trashTooltip: "Отстрани ги сите блокчиња.",
+ catLogic: "Логика",
+ catLoops: "Јамки",
+ catMath: "Математика",
+ catText: "Текст",
+ catLists: "Списоци",
+ catColour: "Боја",
+ catVariables: "Променливи",
+ catFunctions: "Функции",
+ listVariable: "список",
+ textVariable: "текст",
+ httpRequestError: "Се појави проблем во барањето.",
+ linkAlert: "Споделете ги вашите блокчиња со оваа врска:\n\n%1",
+ hashError: "„%1“ не одговара на ниеден зачуван програм.",
+ xmlError: "Не можев да ја вчитам зачуваната податотека. Да не сте ја создале со друга верзија на Blockly?",
+ badXml: "Грешка при расчленувањето на XML:\n%1\n\nСтиснете на „ОК“ за да ги напуштите промените или на „Откажи“ ако сакате уште да ја уредувате XML-податотеката."
+};
diff --git a/js/demos/code/msg/ms.js b/js/demos/code/msg/ms.js
new file mode 100644
index 0000000..87ee8de
--- /dev/null
+++ b/js/demos/code/msg/ms.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kod",
+ blocks: "Blok",
+ linkTooltip: "Simpan dan pautkan kepada blok.",
+ runTooltip: "Jalankan aturcara yang ditetapkan oleh blok-blok di dalam ruang kerja.",
+ badCode: "Ralat aturcara:\n%1",
+ timeout: "Takat maksimum lelaran pelaksanaan dicecah.",
+ trashTooltip: "Buang semua Blok.",
+ catLogic: "Logik",
+ catLoops: "Gelung",
+ catMath: "Matematik",
+ catText: "Teks",
+ catLists: "Senarai",
+ catColour: "Warna",
+ catVariables: "Pemboleh ubah",
+ catFunctions: "Fungsi",
+ listVariable: "senarai",
+ textVariable: "teks",
+ httpRequestError: "Permintaan itu terdapat masalah.",
+ linkAlert: "Kongsikan blok-blok anda dengan pautan ini:\n\n%1",
+ hashError: "Maaf, '%1' tidak berpadanan dengan sebarang aturcara yang disimpan.",
+ xmlError: "Fail simpanan anda tidak dapat dimuatkan. Jangan-jangan ia dicipta dengan versi Blockly yang berlainan?",
+ badXml: "Ralat ketika menghuraikan XML:\n%1\n\nPilih 'OK' untuk melucutkan suntingan anda atau 'Batal' untuk bersambung menyunting XML-nya."
+};
diff --git a/js/demos/code/msg/nb.js b/js/demos/code/msg/nb.js
new file mode 100644
index 0000000..60ac039
--- /dev/null
+++ b/js/demos/code/msg/nb.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kode",
+ blocks: "Blokker",
+ linkTooltip: "Lagre og lenke til blokker.",
+ runTooltip: "Kjør programmet definert av blokken i arbeidsområdet.",
+ badCode: "Programfeil:\n%1",
+ timeout: "Det maksimale antallet utførte looper er oversteget.",
+ trashTooltip: "Fjern alle blokker",
+ catLogic: "Logikk",
+ catLoops: "Looper",
+ catMath: "Matte",
+ catText: "Tekst",
+ catLists: "Lister",
+ catColour: "Farge",
+ catVariables: "Variabler",
+ catFunctions: "Funksjoner",
+ listVariable: "Liste",
+ textVariable: "Tekst",
+ httpRequestError: "Det oppsto et problem med forespørselen din",
+ linkAlert: "Del dine blokker med denne lenken:\n\n%1",
+ hashError: "Beklager, '%1' samsvarer ikke med noe lagret program.",
+ xmlError: "Kunne ikke laste inn filen. Kanskje den ble laget med en annen versjon av Blockly?",
+ badXml: "Feil ved parsering av XML:\n%1\n\nVelg 'OK' for å avbryte endringene eller 'Cancel' for å fortsette å redigere XML-koden."
+};
diff --git a/js/demos/code/msg/nl.js b/js/demos/code/msg/nl.js
new file mode 100644
index 0000000..339a5e8
--- /dev/null
+++ b/js/demos/code/msg/nl.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Code",
+ blocks: "Blokken",
+ linkTooltip: "Opslaan en koppelen naar blokken.",
+ runTooltip: "Voer het programma uit dat met de blokken in de werkruimte is gemaakt.",
+ badCode: "Programmafout:\n%1",
+ timeout: "Het maximale aantal iteraties is overschreden.",
+ trashTooltip: "Alle blokken verwijderen",
+ catLogic: "Logica",
+ catLoops: "Lussen",
+ catMath: "Formules",
+ catText: "Tekst",
+ catLists: "Lijsten",
+ catColour: "Kleur",
+ catVariables: "Variabelen",
+ catFunctions: "Functies",
+ listVariable: "lijst",
+ textVariable: "tekst",
+ httpRequestError: "Er is een probleem opgetreden tijdens het verwerken van het verzoek.",
+ linkAlert: "Deel uw blokken via deze koppeling:\n\n%1",
+ hashError: "\"%1\" komt helaas niet overeen met een opgeslagen bestand.",
+ xmlError: "Uw opgeslagen bestand kan niet geladen worden. Is het misschien gemaakt met een andere versie van Blockly?",
+ badXml: "Fout tijdens het verwerken van de XML:\n%1\n\nSelecteer \"OK\" om uw wijzigingen te negeren of \"Annuleren\" om de XML verder te bewerken."
+};
diff --git a/js/demos/code/msg/oc.js b/js/demos/code/msg/oc.js
new file mode 100644
index 0000000..c184ac8
--- /dev/null
+++ b/js/demos/code/msg/oc.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Còde",
+ blocks: "Blòts",
+ linkTooltip: "Salva e liga als blòts.",
+ runTooltip: "Aviar lo programa definit pels blòts dins l’espaci de trabalh.",
+ badCode: "Error del programa :\n%1",
+ timeout: "Nombre maximum d’iteracions d’execucion depassat.",
+ trashTooltip: "Getar totes los blòts.",
+ catLogic: "Logic",
+ catLoops: "Boclas",
+ catMath: "Math",
+ catText: "Tèxte",
+ catLists: "Listas",
+ catColour: "Color",
+ catVariables: "Variablas",
+ catFunctions: "Foncions",
+ listVariable: "lista",
+ textVariable: "tèxte",
+ httpRequestError: "I a agut un problèma amb la demanda.",
+ linkAlert: "Partejatz vòstres blòts gràcia a aqueste ligam :\n\n%1",
+ hashError: "O planhèm, '%1' correspond pas a un fichièr Blockly salvament.",
+ xmlError: "Impossible de cargar lo fichièr de salvament. Benlèu qu'es estat creat amb una autra version de Blockly ?",
+ badXml: "Error d’analisi del XML :\n%1\n\nSeleccionar 'D'acòrdi' per abandonar vòstras modificacions o 'Anullar' per modificar encara lo XML."
+};
diff --git a/js/demos/code/msg/pl.js b/js/demos/code/msg/pl.js
new file mode 100644
index 0000000..83bb05d
--- /dev/null
+++ b/js/demos/code/msg/pl.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kod",
+ blocks: "Bloki",
+ linkTooltip: "Zapisz i podlinkuj do bloków",
+ runTooltip: "Uruchom program zdefinowany przez bloki w obszarze roboczym",
+ badCode: "Błąd programu:\n%1",
+ timeout: "Maksymalna liczba iteracji wykonywań przekroczona",
+ trashTooltip: "Odrzuć wszystkie bloki.",
+ catLogic: "Logika",
+ catLoops: "Pętle",
+ catMath: "Matematyka",
+ catText: "Tekst",
+ catLists: "Listy",
+ catColour: "Kolor",
+ catVariables: "Zmienne",
+ catFunctions: "Funkcje",
+ listVariable: "lista",
+ textVariable: "tekst",
+ httpRequestError: "Wystąpił problem z żądaniem.",
+ linkAlert: "Udpostępnij swoje bloki korzystając z poniższego linku : \n\n\n%1",
+ hashError: "Przepraszamy, \"%1\" nie odpowiada żadnemu zapisanemu programowi.",
+ xmlError: "Nie można załadować zapisanego pliku. Być może został utworzony za pomocą innej wersji Blockly?",
+ badXml: "Błąd parsowania XML : \n%1\n\nZaznacz 'OK' aby odrzucić twoje zmiany lub 'Cancel', żeby w przyszłości edytować XML."
+};
diff --git a/js/demos/code/msg/pms.js b/js/demos/code/msg/pms.js
new file mode 100644
index 0000000..a7704f7
--- /dev/null
+++ b/js/demos/code/msg/pms.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Còdes",
+ blocks: "Blòch",
+ linkTooltip: "Argistré e lijé ai blòch.",
+ runTooltip: "Fé andé ël programa definì dai blòch ant lë spassi ëd travaj.",
+ badCode: "Eror dël programa:\n%1",
+ timeout: "Nùmer màssim d'arpetission d'esecussion sorpassà.",
+ trashTooltip: "Scarté tuti ij blòch.",
+ catLogic: "Lògica",
+ catLoops: "Liasse",
+ catMath: "Matemàtica",
+ catText: "Test",
+ catLists: "Liste",
+ catColour: "Color",
+ catVariables: "Variàbij",
+ catFunctions: "Fonsion",
+ listVariable: "lista",
+ textVariable: "test",
+ httpRequestError: "A-i é staje un problema con l'arcesta.",
+ linkAlert: "Ch'a partagia ij sò blòch grassie a sta liura: %1",
+ hashError: "An dëspias, '%1 a corëspond a gnun programa salvà.",
+ xmlError: "A l'é nen podusse carié so archivi salvà. Miraco a l'é stàit creà con na version diferenta ëd Blockly?",
+ badXml: "Eror d'anàlisi dl'XML:\n%1\n\nSelessioné 'Va bin' për lassé perde toe modìfiche o 'Anulé' për modifiché ancora l'XML."
+};
diff --git a/js/demos/code/msg/pt-br.js b/js/demos/code/msg/pt-br.js
new file mode 100644
index 0000000..9b18d63
--- /dev/null
+++ b/js/demos/code/msg/pt-br.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Código",
+ blocks: "Blocos",
+ linkTooltip: "Salvar e ligar aos blocos.",
+ runTooltip: "Execute o programa definido pelos blocos na área de trabalho.",
+ badCode: "Erro no programa:\n%1",
+ timeout: "Máximo de iterações de execução excedido.",
+ trashTooltip: "Descartar todos os blocos.",
+ catLogic: "Lógica",
+ catLoops: "Laços",
+ catMath: "Matemática",
+ catText: "Texto",
+ catLists: "Listas",
+ catColour: "Cor",
+ catVariables: "Variáveis",
+ catFunctions: "Funções",
+ listVariable: "lista",
+ textVariable: "texto",
+ httpRequestError: "Houve um problema com a requisição.",
+ linkAlert: "Compartilhe seus blocos com este link:\n\n%1",
+ hashError: "Desculpe, '%1' não corresponde a um programa salvo.",
+ xmlError: "Não foi possível carregar seu arquivo salvo. Talvez ele tenha sido criado com uma versão diferente do Blockly?",
+ badXml: "Erro de análise XML:\n%1\n\nSelecione 'OK' para abandonar suas mudanças ou 'Cancelar' para editar o XML."
+};
diff --git a/js/demos/code/msg/ro.js b/js/demos/code/msg/ro.js
new file mode 100644
index 0000000..cd3de11
--- /dev/null
+++ b/js/demos/code/msg/ro.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Cod",
+ blocks: "Blocuri",
+ linkTooltip: "Salvează și adaugă la blocuri.",
+ runTooltip: "Execută programul definit de către blocuri în spațiul de lucru.",
+ badCode: "Eroare de program:\n%1",
+ timeout: "Numărul maxim de iterații a fost depășit.",
+ trashTooltip: "Șterge toate blocurile.",
+ catLogic: "Logic",
+ catLoops: "Bucle",
+ catMath: "Matematică",
+ catText: "Text",
+ catLists: "Liste",
+ catColour: "Culoare",
+ catVariables: "Variabile",
+ catFunctions: "Funcții",
+ listVariable: "listă",
+ textVariable: "text",
+ httpRequestError: "A apărut o problemă la solicitare.",
+ linkAlert: "Distribuie-ți blocurile folosind această legătură:\n\n%1",
+ hashError: "Scuze, „%1” nu corespunde nici unui program salvat.",
+ xmlError: "Sistemul nu a putut încărca fișierul salvat. Poate că a fost creat cu o altă versiune de Blockly?",
+ badXml: "Eroare de parsare XML:\n%1\n\nAlege „OK” pentru a renunța la modificările efectuate sau „Revocare” pentru a modifica în continuare fișierul XML."
+};
diff --git a/js/demos/code/msg/ru.js b/js/demos/code/msg/ru.js
new file mode 100644
index 0000000..389e905
--- /dev/null
+++ b/js/demos/code/msg/ru.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Код",
+ blocks: "Блоки",
+ linkTooltip: "Сохранить и показать ссылку на блоки.",
+ runTooltip: "Запустить программу, заданную блоками в рабочей области.",
+ badCode: "Ошибка программы:\n%1",
+ timeout: "Превышено максимальное количество итераций.",
+ trashTooltip: "Удалить все блоки.",
+ catLogic: "Логические",
+ catLoops: "Циклы",
+ catMath: "Математика",
+ catText: "Текст",
+ catLists: "Списки",
+ catColour: "Цвет",
+ catVariables: "Переменные",
+ catFunctions: "Функции",
+ listVariable: "список",
+ textVariable: "текст",
+ httpRequestError: "Произошла проблема при запросе.",
+ linkAlert: "Поделитесь своими блоками по этой ссылке:\n\n%1",
+ hashError: "К сожалению, «%1» не соответствует ни одному сохраненному файлу Блокли.",
+ xmlError: "Не удалось загрузить ваш сохраненный файл. Возможно, он был создан в другой версии Блокли?",
+ badXml: "Ошибка синтаксического анализа XML:\n%1\n\nВыберите 'ОК', чтобы отказаться от изменений или 'Cancel' для дальнейшего редактирования XML."
+};
diff --git a/js/demos/code/msg/sc.js b/js/demos/code/msg/sc.js
new file mode 100644
index 0000000..82f94d6
--- /dev/null
+++ b/js/demos/code/msg/sc.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Còdixi",
+ blocks: "Brocus",
+ linkTooltip: "Sarva e alliòngia a is brocus.",
+ runTooltip: "Arròllia su programa cumpostu de is brocus in s'àrea de traballu.",
+ badCode: "Errori in su Programa:\n%1",
+ timeout: "Giai lòmpius a su màssimu numeru de repicus.",
+ trashTooltip: "Boganci totu is brocus.",
+ catLogic: "Lògica",
+ catLoops: "Lòrigas",
+ catMath: "Matemàtica",
+ catText: "Testu",
+ catLists: "Lista",
+ catColour: "Colori",
+ catVariables: "Variabilis",
+ catFunctions: "Funtzionis",
+ listVariable: "lista",
+ textVariable: "testu",
+ httpRequestError: "Ddui fut unu problema cun sa pregunta",
+ linkAlert: "Poni is brocus tuus in custu acàpiu:\n\n%1",
+ hashError: "Mi dispraxit, '%1' non torrat a pari cun nimancu unu de is programas sarvaus.",
+ xmlError: "Non potzu carrigai su file sarvau. Fortzis est stètiu fatu cun d-una versioni diferenti de Blockly?",
+ badXml: "Errori in s'anàlisi XML:\n%1\n\nCraca 'OK' po perdi is mudàntzias 'Anudda' po sighì a scriri su XML."
+};
diff --git a/js/demos/code/msg/sk.js b/js/demos/code/msg/sk.js
new file mode 100644
index 0000000..3917df2
--- /dev/null
+++ b/js/demos/code/msg/sk.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kód",
+ blocks: "Bloky",
+ linkTooltip: "Uložiť a zdieľať odkaz na tento program.",
+ runTooltip: "Spustiť program, zložený z dielcov na pracovnej ploche.",
+ badCode: "Chyba v programe:\n%1",
+ timeout: "Bol prekročený maximálny počet opakovaní.",
+ trashTooltip: "Zahodiť všetky dielce.",
+ catLogic: "Logika",
+ catLoops: "Cykly",
+ catMath: "Matematické",
+ catText: "Text",
+ catLists: "Zoznamy",
+ catColour: "Farby",
+ catVariables: "Premenné",
+ catFunctions: "Funkcie",
+ listVariable: "zoznam",
+ textVariable: "text",
+ httpRequestError: "Problém so spracovaním požiadavky.",
+ linkAlert: "Zdieľať tento program skopírovaním odkazu\n\n%1",
+ hashError: "Prepáč, '%1' nie je meno žiadnemu uloženému programu.",
+ xmlError: "Nebolo možné načítať uložený súbor. Možno bol vytvorený v inej verzii Blocky.",
+ badXml: "Chyba pri parsovaní XML:\n%1\n\nStlačte 'OK' ak chcete zrušiť zmeny alebo 'Zrušiť' pre pokračovanie v úpravách XML."
+};
diff --git a/js/demos/code/msg/sr.js b/js/demos/code/msg/sr.js
new file mode 100644
index 0000000..f9a026c
--- /dev/null
+++ b/js/demos/code/msg/sr.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Кôд",
+ blocks: "Блокови",
+ linkTooltip: "Сачувајте и повежите са блоковима.",
+ runTooltip: "Покрените програм заснован на блоковима у радном простору.",
+ badCode: "Грешка у програму:\n%1",
+ timeout: "Достигнут је максималан број понављања у извршавању.",
+ trashTooltip: "Одбаците све блокове.",
+ catLogic: "Логика",
+ catLoops: "Петље",
+ catMath: "Математика",
+ catText: "Текст",
+ catLists: "Спискови",
+ catColour: "Боја",
+ catVariables: "Променљиве",
+ catFunctions: "Процедуре",
+ listVariable: "списак",
+ textVariable: "текст",
+ httpRequestError: "Дошло је до проблема у захтеву.",
+ linkAlert: "Делите своје блокове овом везом:\n\n%1",
+ hashError: "„%1“ не одговара ниједном сачуваном програму.",
+ xmlError: "Не могу да учитам сачувану датотеку. Можда је направљена другом верзијом Blockly-ја.",
+ badXml: "Грешка при рашчлањивању XML-а:\n%1\n\nПритисните „У реду“ да напустите измене или „Откажи“ да наставите са уређивањем XML датотеке."
+};
diff --git a/js/demos/code/msg/sv.js b/js/demos/code/msg/sv.js
new file mode 100644
index 0000000..4134a4c
--- /dev/null
+++ b/js/demos/code/msg/sv.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kod",
+ blocks: "Block",
+ linkTooltip: "Spara och länka till block.",
+ runTooltip: "Kör programmet som definierats av blocken i arbetsytan.",
+ badCode: "Programfel:\n%1",
+ timeout: "Det maximala antalet utförda loopar har överskridits.",
+ trashTooltip: "Släng alla block.",
+ catLogic: "Logik",
+ catLoops: "Loopar",
+ catMath: "Matematik",
+ catText: "Text",
+ catLists: "Listor",
+ catColour: "Färg",
+ catVariables: "Variabler",
+ catFunctions: "Funktioner",
+ listVariable: "lista",
+ textVariable: "text",
+ httpRequestError: "Det uppstod ett problem med begäran.",
+ linkAlert: "Dela dina block med denna länk: \n\n%1",
+ hashError: "Tyvärr, '%1' överensstämmer inte med något sparat program.",
+ xmlError: "Kunde inte läsa din sparade fil. Den skapades kanske med en annan version av Blockly?",
+ badXml: "Fel vid parsning av XML:\n%1\n\nKlicka på 'OK' för att strunta i dina ändringar eller 'Avbryt' för att fortsätta redigera XML-koden."
+};
diff --git a/js/demos/code/msg/ta.js b/js/demos/code/msg/ta.js
new file mode 100644
index 0000000..ff472e2
--- /dev/null
+++ b/js/demos/code/msg/ta.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "கணினி நிரல்", //Code
+ blocks: "நிரல் துண்டு", //block
+ linkTooltip: "சேமித்து நிரல் துண்டிற்கு இணைக்க", //save and link to block
+ runTooltip: "பணிமனை நினைவகத்தில் இயக்குக", //Run the program defined by the blocks in the workspace.
+ badCode: "கணினி நிரல் கோளாறு:\n%1",
+ timeout: "அதிகபட்ச அடுக்கின் அளவை மீரியது", //max iters reached/exceeded
+ trashTooltip: "நீக்கு",
+ catLogic: "தர்க வகை",
+ catLoops: "மடக்கு வாக்கியம்",
+ catMath: "கணிதம்",
+ catText: "உரை",
+ catLists: "பட்டியல்",
+ catColour: "வண்ணம்",
+ catVariables: "மாறிகள்",
+ catFunctions: "சார்புகள்",
+ listVariable: "பட்டியல் மாறி",
+ textVariable: "உரை சரம்",
+ httpRequestError: "இந்த செயலை இயக்குவதில் கோளாறு ஏற்பட்டது",
+ linkAlert: "இந்த சுட்டி வழியாக நிரல் துண்டுகளை பகிரவும்:\n\n%1",
+ hashError: "'%1' : இது சேமித்த நிரலாக தெரியவில்லை.",
+ xmlError: "உங்களது நிரலை காணவில்லை; வேறு Blockly அத்தியாயத்தில் சேமித்தீரா?",
+ badXml: "XML பகுப்பதில் கோளாறு:\n%1\n\nOK' கிளிக் செய்தால் மாற்றங்கள் இழப்பீர்கள்; பிழைகளுடன் தொடர 'Cancel' கிளிக் செய்யவும்."
+};
diff --git a/js/demos/code/msg/th.js b/js/demos/code/msg/th.js
new file mode 100644
index 0000000..1ac3624
--- /dev/null
+++ b/js/demos/code/msg/th.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "เขียนโปรแกรม",
+ blocks: "บล็อก",
+ linkTooltip: "บันทึกและสร้างลิงก์มายังบล็อกเหล่านี้",
+ runTooltip: "เรียกใช้โปรแกรมตามที่กำหนดไว้ด้วยบล็อกที่อยู่ในพื้นที่ทำงาน",
+ badCode: "โปรแกรมเกิดข้อผิดพลาด:\n%1",
+ timeout: "โปรแกรมทำงานซ้ำคำสั่งเดิมมากเกินไป",
+ trashTooltip: "ยกเลิกบล็อกทั้งหมด",
+ catLogic: "ตรรกะ",
+ catLoops: "การวนซ้ำ",
+ catMath: "คณิตศาสตร์",
+ catText: "ข้อความ",
+ catLists: "รายการ",
+ catColour: "สี",
+ catVariables: "ตัวแปร",
+ catFunctions: "ฟังก์ชัน",
+ listVariable: "รายการ",
+ textVariable: "ข้อความ",
+ httpRequestError: "มีปัญหาเกี่ยวกับการร้องขอ",
+ linkAlert: "แบ่งปันบล็อกของคุณด้วยลิงก์นี้:\n\n%1",
+ hashError: "เสียใจด้วย '%1' ไม่ตรงกับโปรแกรมใดๆ ที่เคยบันทึกเอาไว้เลย",
+ xmlError: "ไม่สามารถโหลดไฟล์ที่บันทึกไว้ของคุณได้ บางทีมันอาจจะถูกสร้างขึ้นด้วย Blockly รุ่นอื่นที่แตกต่างกัน?",
+ badXml: "เกิดข้อผิดพลาดในการแยกวิเคราะห์ XML:\n%1\n\nเลือก 'ตกลง' เพื่อละทิ้งการเปลี่ยนแปลงต่างๆ ที่ทำไว้ หรือเลือก 'ยกเลิก' เพื่อแก้ไข XML ต่อไป"
+};
diff --git a/js/demos/code/msg/tlh.js b/js/demos/code/msg/tlh.js
new file mode 100644
index 0000000..8d0c056
--- /dev/null
+++ b/js/demos/code/msg/tlh.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "ngoq",
+ blocks: "ngoghmey",
+ linkTooltip: "",
+ runTooltip: "",
+ badCode: "Qagh:\n%1",
+ timeout: "tlhoy nI'qu' poH.",
+ trashTooltip: "",
+ catLogic: "meq",
+ catLoops: "vIHtaHbogh ghomey",
+ catMath: "mI'QeD",
+ catText: "ghItlhHommey",
+ catLists: "tetlhmey",
+ catColour: "rItlh",
+ catVariables: "lIwmey",
+ catFunctions: "mIwmey",
+ listVariable: "tetlh",
+ textVariable: "ghItlhHom",
+ httpRequestError: "Qapbe' tlhobmeH QIn.",
+ linkAlert: "latlhvaD ngoghmeylIj DangeHmeH Quvvam yIlo':\n\n%1",
+ hashError: "Do'Ha', ngogh nab pollu'pu'bogh 'oHbe'law' \"%1\"'e'.",
+ xmlError: "ngogh nablIj pollu'pu'bogh chu'qa'laHbe' vay'. chaq pollu'pu'DI' ghunmeH ngogh pIm lo'lu'pu'.",
+ badXml: "XML yajchu'laHbe' vay':\n%1\n\nchoHmeylIj DalonmeH \"ruch\" yIwIv pagh XML DachoHqa'meH \"qIl\" yIwIv."
+};
diff --git a/js/demos/code/msg/tr.js b/js/demos/code/msg/tr.js
new file mode 100644
index 0000000..1448300
--- /dev/null
+++ b/js/demos/code/msg/tr.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Kod",
+ blocks: "Bloklar",
+ linkTooltip: "Blokları ve bağlantı adresini kaydet.",
+ runTooltip: "Çalışma alanında bloklar tarafından tanımlanan programını çalıştırın.",
+ badCode: "Program hatası:\n %1",
+ timeout: "Maksimum yürütme yinelemeleri aşıldı.",
+ trashTooltip: "Bütün blokları at.",
+ catLogic: "Mantık",
+ catLoops: "Döngüler",
+ catMath: "Matematik",
+ catText: "Metin",
+ catLists: "Listeler",
+ catColour: "Renk",
+ catVariables: "Değişkenler",
+ catFunctions: "İşlevler",
+ listVariable: "liste",
+ textVariable: "metin",
+ httpRequestError: "İstek ile ilgili bir problem var.",
+ linkAlert: "Bloklarını bu bağlantı ile paylaş:\n\n%1",
+ hashError: "Üzgünüz, '%1' hiç bir kaydedilmiş program ile uyuşmuyor.",
+ xmlError: "Kaydedilen dosyanız yüklenemiyor\nBlockly'nin önceki sürümü ile kaydedilmiş olabilir mi?",
+ badXml: "XML ayrıştırma hatası:\n%1\n\nDeğişikliklerden vazgeçmek için 'Tamam'ı, düzenlemeye devam etmek için 'İptal' seçeneğini seçiniz."
+};
diff --git a/js/demos/code/msg/uk.js b/js/demos/code/msg/uk.js
new file mode 100644
index 0000000..6b34627
--- /dev/null
+++ b/js/demos/code/msg/uk.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Код",
+ blocks: "Блоки",
+ linkTooltip: "Зберегти і пов'язати з блоками.",
+ runTooltip: "Запустіть програму, визначену блоками у робочій області.",
+ badCode: "Помилка програми:\n%1",
+ timeout: "Максимальне виконання ітерацій перевищено.",
+ trashTooltip: "Відкинути всі блоки.",
+ catLogic: "Логіка",
+ catLoops: "Петлі",
+ catMath: "Математика",
+ catText: "Текст",
+ catLists: "Списки",
+ catColour: "Колір",
+ catVariables: "Змінні",
+ catFunctions: "Функції",
+ listVariable: "список",
+ textVariable: "текст",
+ httpRequestError: "Виникла проблема із запитом.",
+ linkAlert: "Поділитися вашим блоками через посилання:\n\n%1",
+ hashError: "На жаль, \"%1\" не відповідає жодній збереженій програмі.",
+ xmlError: "Не вдалося завантажити ваш збережений файл. Можливо, він був створений з іншої версії Blockly?",
+ badXml: "Помилка синтаксичного аналізу XML:\n%1\n\nВиберіть \"Гаразд\", щоб відмовитися від змін або 'Скасувати' для подальшого редагування XML."
+};
diff --git a/js/demos/code/msg/vi.js b/js/demos/code/msg/vi.js
new file mode 100644
index 0000000..952d024
--- /dev/null
+++ b/js/demos/code/msg/vi.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "Chương trình",
+ blocks: "Các mảnh",
+ linkTooltip: "Lưu và lấy địa chỉ liên kết.",
+ runTooltip: "Chạy chương trình.",
+ badCode: "'Lỗi chương trình:\n%1",
+ timeout: "Đã vượt quá số lần lặp cho phép.",
+ trashTooltip: "Xóa tất cả mọi mảnh.",
+ catLogic: "Logic",
+ catLoops: "Vòng lặp",
+ catMath: "Công thức toán",
+ catText: "Văn bản",
+ catLists: "Danh sách",
+ catColour: "Màu",
+ catVariables: "Biến",
+ catFunctions: "Hàm",
+ listVariable: "danh sách",
+ textVariable: "văn bản",
+ httpRequestError: "Hoạt động bị trục trặc, không thực hiện được yêu cầu của bạn.",
+ linkAlert: "Chia sẻ chương trình của bạn với liên kết sau:\n\n %1",
+ hashError: "Không tìm thấy chương trình được lưu ở '%1'.",
+ xmlError: "Không mở được chương trình của bạn. Có thể nó nằm trong một phiên bản khác của Blockly?",
+ badXml: "Lỗi sử lý XML:\n %1\n\nChọn 'OK' để từ bỏ các thay đổi hoặc 'Hủy' để tiếp tục chỉnh sửa các XML."
+};
diff --git a/js/demos/code/msg/zh-hans.js b/js/demos/code/msg/zh-hans.js
new file mode 100644
index 0000000..abf8a65
--- /dev/null
+++ b/js/demos/code/msg/zh-hans.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "代码",
+ blocks: "块",
+ linkTooltip: "保存模块并生成链接。",
+ runTooltip: "于工作区中运行块所定义的程式。",
+ badCode: "程序错误：\n%1",
+ timeout: "超过最大执行行数。",
+ trashTooltip: "放弃所有块。",
+ catLogic: "逻辑",
+ catLoops: "循环",
+ catMath: "数学",
+ catText: "文本",
+ catLists: "列表",
+ catColour: "颜色",
+ catVariables: "变量",
+ catFunctions: "函数",
+ listVariable: "列表",
+ textVariable: "文本",
+ httpRequestError: "请求存在问题。",
+ linkAlert: "通过这个链接分享您的模块：\n\n%1",
+ hashError: "对不起，没有任何已保存的程序对应'%1' 。",
+ xmlError: "无法载入您保存的文件。您是否使用其他版本的Blockly创建该文件的？",
+ badXml: "XML解析错误：\n%1\n\n选择“确定”以取消您对XML的修改，或选择“取消”以继续编辑XML。"
+};
diff --git a/js/demos/code/msg/zh-hant.js b/js/demos/code/msg/zh-hant.js
new file mode 100644
index 0000000..48a8b52
--- /dev/null
+++ b/js/demos/code/msg/zh-hant.js
@@ -0,0 +1,24 @@
+var MSG = {
+ title: "程式碼",
+ blocks: "積木",
+ linkTooltip: "儲存積木組並提供連結。",
+ runTooltip: "於工作區中執行積木組所定義的程式。",
+ badCode: "程式錯誤：\n%1",
+ timeout: "超過最大執行數。",
+ trashTooltip: "捨棄所有積木。",
+ catLogic: "邏輯",
+ catLoops: "迴圈",
+ catMath: "數學式",
+ catText: "文字",
+ catLists: "列表",
+ catColour: "顏色",
+ catVariables: "變量",
+ catFunctions: "流程",
+ listVariable: "列表",
+ textVariable: "文字",
+ httpRequestError: "命令出現錯誤。",
+ linkAlert: "透過此連結分享您的積木組：\n\n%1",
+ hashError: "對不起，「%1」並未對應任何已保存的程式。",
+ xmlError: "未能載入您保存的檔案。或許它是由其他版本的Blockly創建？",
+ badXml: "解析 XML 時出現錯誤：\n%1\n\n選擇'確定'以放棄您的更改，或選擇'取消'以進一步編輯 XML。"
+};
diff --git a/js/demos/code/style.css b/js/demos/code/style.css
new file mode 100644
index 0000000..c24df88
--- /dev/null
+++ b/js/demos/code/style.css
@@ -0,0 +1,176 @@
+html, body {
+ height: 100%;
+}
+
+body {
+ background-color: #fff;
+ font-family: sans-serif;
+ margin: 0;
+ overflow: hidden;
+}
+
+.farSide {
+ text-align: right;
+}
+
+html[dir="RTL"] .farSide {
+ text-align: left;
+}
+
+/* Buttons */
+button {
+ margin: 5px;
+ padding: 10px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ font-size: large;
+ background-color: #eee;
+ color: #000;
+}
+button.primary {
+ border: 1px solid #dd4b39;
+ background-color: #dd4b39;
+ color: #fff;
+}
+button.primary>img {
+ opacity: 1;
+}
+button>img {
+ opacity: 0.6;
+ vertical-align: text-bottom;
+}
+button:hover>img {
+ opacity: 1;
+}
+button:active {
+ border: 1px solid #888 !important;
+}
+button:hover {
+ box-shadow: 2px 2px 5px #888;
+}
+button.disabled:hover>img {
+ opacity: 0.6;
+}
+button.disabled {
+ display: none;
+}
+button.notext {
+ font-size: 10%;
+}
+
+h1 {
+ font-weight: normal;
+ font-size: 140%;
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+/* Tabs */
+#tabRow>td {
+ border: 1px solid #ccc;
+ border-bottom: none;
+}
+td.tabon {
+ border-bottom-color: #ddd !important;
+ background-color: #ddd;
+ padding: 5px 19px;
+}
+td.taboff {
+ cursor: pointer;
+ padding: 5px 19px;
+}
+td.taboff:hover {
+ background-color: #eee;
+}
+td.tabmin {
+ border-top-style: none !important;
+ border-left-style: none !important;
+ border-right-style: none !important;
+}
+td.tabmax {
+ border-top-style: none !important;
+ border-left-style: none !important;
+ border-right-style: none !important;
+ width: 99%;
+ padding-left: 10px;
+ padding-right: 10px;
+ text-align: right;
+}
+html[dir=rtl] td.tabmax {
+ text-align: left;
+}
+#tab_code {
+ display: none;
+}
+
+table {
+ border-collapse: collapse;
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+td {
+ padding: 0;
+ vertical-align: top;
+}
+.content {
+ visibility: hidden;
+ margin: 0;
+ padding: 1ex;
+ position: absolute;
+ direction: ltr;
+}
+pre.content {
+ border: 1px solid #ccc;
+ overflow: scroll;
+}
+#content_blocks {
+ padding: 0;
+}
+.blocklySvg {
+ border-top: none !important;
+}
+#content_xml {
+ resize: none;
+ outline: none;
+ border: 1px solid #ccc;
+ font-family: monospace;
+ overflow: scroll;
+}
+#languageMenu {
+ vertical-align: top;
+ margin-left: 15px;
+ margin-right: 15px;
+ margin-top: 15px;
+}
+
+/* Buttons */
+button {
+ padding: 1px 10px;
+ margin: 1px 5px;
+}
+
+/* Sprited icons. */
+.icon21 {
+ height: 21px;
+ width: 21px;
+ background-image: url(icons.png);
+}
+.trash {
+ background-position: 0px 0px;
+}
+.link {
+ background-position: -21px 0px;
+}
+.run {
+ background-position: -42px 0px;
+}
+
+@media (max-width: 710px) {
+ .tab_collapse {
+ display: none;
+ }
+ #tab_code {
+ display: table-cell;
+ }
+}
diff --git a/js/demos/codelab/README.md b/js/demos/codelab/README.md
new file mode 100644
index 0000000..2a5e913
--- /dev/null
+++ b/js/demos/codelab/README.md
@@ -0,0 +1,16 @@
+# Blockly for the Web codelab
+
+Code for the [Blockly for the Web codelab](https://developers.google.com/TODO).
+
+In this codelab, you'll learn how to use Blockly JavaScript library
+to add a block code editor to a web application.
+
+## What you'll learn
+
+* How to add Blockly to a sample web app.
+* How to set up a Blockly workspace.
+* How to create a new block in Blockly.
+* How to generate and run JavaScript code from blocks.
+
+Example code for each step of the codelab is available from
+the [completed](completed/) directory.
diff --git a/js/demos/codelab/app-complete/index.html b/js/demos/codelab/app-complete/index.html
new file mode 100644
index 0000000..d5780e1
--- /dev/null
+++ b/js/demos/codelab/app-complete/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+ Blockly for the Web Codelab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/codelab/app-complete/scripts/main.js b/js/demos/codelab/app-complete/scripts/main.js
new file mode 100644
index 0000000..795dd1a
--- /dev/null
+++ b/js/demos/codelab/app-complete/scripts/main.js
@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ (function() {
+
+ let currentButton;
+
+ function handlePlay(event) {
+ loadWorkspace(event.target);
+ Blockly.JavaScript.addReservedWords('code');
+ var code = Blockly.JavaScript.workspaceToCode(Blockly.getMainWorkspace());
+ code += 'MusicMaker.play();';
+ // Eval can be dangerous. For more controlled execution, check
+ // https://github.com/NeilFraser/JS-Interpreter.
+ try {
+ eval(code);
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ function loadWorkspace(button) {
+ let workspace = Blockly.getMainWorkspace();
+ workspace.clear();
+ if (button.blocklyXml) {
+ Blockly.Xml.domToWorkspace(button.blocklyXml, workspace);
+ }
+ }
+
+ function save(button) {
+ let xml = Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace());
+ button.blocklyXml = xml;
+ }
+
+ function handleSave() {
+ document.body.setAttribute('mode', 'edit');
+ save(currentButton);
+ }
+
+ function enableEditMode() {
+ document.body.setAttribute('mode', 'edit');
+ document.querySelectorAll('.button').forEach(btn => {
+ btn.removeEventListener('click', handlePlay);
+ btn.addEventListener('click', enableBlocklyMode);
+ });
+ }
+
+ function enableMakerMode() {
+ document.body.setAttribute('mode', 'maker');
+ document.querySelectorAll('.button').forEach(btn => {
+ btn.addEventListener('click', handlePlay);
+ btn.removeEventListener('click', enableBlocklyMode);
+ });
+ }
+
+ function enableBlocklyMode(e) {
+ document.body.setAttribute('mode', 'blockly');
+ currentButton = e.target;
+ loadWorkspace(currentButton);
+ }
+
+ document.querySelector('#edit').addEventListener('click', enableEditMode);
+ document.querySelector('#done').addEventListener('click', enableMakerMode);
+ document.querySelector('#save').addEventListener('click', handleSave);
+
+ enableMakerMode();
+
+ Blockly.inject('blockly-div', {
+ media: '../../../media/',
+ toolbox: document.getElementById('toolbox'),
+ toolboxPosition: 'end',
+ horizontalLayout: true,
+ scrollbars: false
+ });
+})();
diff --git a/js/demos/codelab/app-complete/scripts/music_maker.js b/js/demos/codelab/app-complete/scripts/music_maker.js
new file mode 100644
index 0000000..e3d4eff
--- /dev/null
+++ b/js/demos/codelab/app-complete/scripts/music_maker.js
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ const MusicMaker = {
+ queue_: [],
+ player_: new Audio(),
+ queueSound: function(soundUrl) {
+ this.queue_.push(soundUrl);
+ },
+ play: function() {
+ let next = this.queue_.shift();
+ if (next) {
+ this.player_.src = next;
+ this.player_.play();
+ }
+ },
+};
+
+MusicMaker.player_.addEventListener(
+ 'ended', MusicMaker.play.bind(MusicMaker));
diff --git a/js/demos/codelab/app-complete/scripts/sound_blocks.js b/js/demos/codelab/app-complete/scripts/sound_blocks.js
new file mode 100644
index 0000000..5546226
--- /dev/null
+++ b/js/demos/codelab/app-complete/scripts/sound_blocks.js
@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Blockly.defineBlocksWithJsonArray([
+ // Block for colour picker.
+ {
+ "type": "play_sound",
+ "message0": "Play %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "VALUE",
+ "options": [
+ ["C4", "sounds/c4.m4a"],
+ ["D4", "sounds/d4.m4a"],
+ ["E4", "sounds/e4.m4a"],
+ ["F4", "sounds/f4.m4a"],
+ ["G4", "sounds/g4.m4a"],
+ ["A5", "sounds/a5.m4a"],
+ ["B5", "sounds/b5.m4a"],
+ ["C5", "sounds/c5.m4a"]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": 355,
+ "tooltip": "",
+ "helpUrl": ""
+ }
+]);
+
+Blockly.JavaScript['play_sound'] = function(block) {
+ var value = '\'' + block.getFieldValue('VALUE') + '\'';
+ return 'MusicMaker.queueSound(' + value + ');\n';
+};
diff --git a/js/demos/codelab/app-complete/sounds/c4.m4a b/js/demos/codelab/app-complete/sounds/c4.m4a
new file mode 100644
index 0000000..33941cf
Binary files /dev/null and b/js/demos/codelab/app-complete/sounds/c4.m4a differ
diff --git a/js/demos/codelab/app-complete/sounds/c5.m4a b/js/demos/codelab/app-complete/sounds/c5.m4a
new file mode 100644
index 0000000..49721cd
Binary files /dev/null and b/js/demos/codelab/app-complete/sounds/c5.m4a differ
diff --git a/js/demos/codelab/app-complete/sounds/d4.m4a b/js/demos/codelab/app-complete/sounds/d4.m4a
new file mode 100644
index 0000000..51bcad6
Binary files /dev/null and b/js/demos/codelab/app-complete/sounds/d4.m4a differ
diff --git a/js/demos/codelab/app-complete/sounds/e4.m4a b/js/demos/codelab/app-complete/sounds/e4.m4a
new file mode 100644
index 0000000..d910052
Binary files /dev/null and b/js/demos/codelab/app-complete/sounds/e4.m4a differ
diff --git a/js/demos/codelab/app-complete/sounds/f4.m4a b/js/demos/codelab/app-complete/sounds/f4.m4a
new file mode 100644
index 0000000..c80a0bf
Binary files /dev/null and b/js/demos/codelab/app-complete/sounds/f4.m4a differ
diff --git a/js/demos/codelab/app-complete/sounds/g4.m4a b/js/demos/codelab/app-complete/sounds/g4.m4a
new file mode 100644
index 0000000..45ea448
Binary files /dev/null and b/js/demos/codelab/app-complete/sounds/g4.m4a differ
diff --git a/js/demos/codelab/app-complete/styles/index.css b/js/demos/codelab/app-complete/styles/index.css
new file mode 100644
index 0000000..0ef8f3b
--- /dev/null
+++ b/js/demos/codelab/app-complete/styles/index.css
@@ -0,0 +1,75 @@
+main {
+ width: 400px;
+ position: relative;
+ margin: 0 auto;
+ overflow:hidden;
+ height: 600px;
+}
+
+header {
+ background-color: green;
+ width: 100%;
+}
+
+h1 {
+ width: 400px;
+ position: relative;
+ margin: 0 auto;
+ color: #fff;
+ font-size: 1.8em;
+ line-height: 2.4em;
+}
+
+.mode-edit,
+.mode-maker,
+.mode-blockly {
+ display: none;
+}
+
+[mode="maker"] .mode-maker,
+[mode="edit"] .mode-edit,
+[mode="blockly"] .mode-blockly {
+ display: block;
+}
+
+.blockly-editor {
+ position: absolute;
+ top: 64px;
+ left: -400px;
+ transition: left .4s;
+ height: 460px;
+ width: 400px;
+ background-color: #eee;
+}
+
+[mode="blockly"] .blockly-editor {
+ left: 0;
+}
+
+.maker {
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between;
+ height: 460px;
+ width: 400px;
+}
+
+.maker > div {
+ display: flex;
+ justify-content: space-between;
+}
+
+.button {
+ width: 120px;
+ height: 140px;
+ color: #fff;
+ font-size: 3em;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 140px;
+}
+
+.mdl-button {
+ margin: 1em 0;
+ float: right;
+}
diff --git a/js/demos/codelab/app/index.html b/js/demos/codelab/app/index.html
new file mode 100644
index 0000000..31eeff7
--- /dev/null
+++ b/js/demos/codelab/app/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+ Blockly for the Web Codelab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/codelab/app/scripts/main.js b/js/demos/codelab/app/scripts/main.js
new file mode 100644
index 0000000..21b8848
--- /dev/null
+++ b/js/demos/codelab/app/scripts/main.js
@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ (function() {
+
+ let currentButton;
+
+ function handlePlay(event) {
+ // Add code for playing sound.
+ }
+
+ function save(button) {
+ // Add code for saving the behavior of a button.
+ }
+
+ function handleSave() {
+ document.body.setAttribute('mode', 'edit');
+ save(currentButton);
+ }
+
+ function enableEditMode() {
+ document.body.setAttribute('mode', 'edit');
+ document.querySelectorAll('.button').forEach(btn => {
+ btn.removeEventListener('click', handlePlay);
+ btn.addEventListener('click', enableBlocklyMode);
+ });
+ }
+
+ function enableMakerMode() {
+ document.body.setAttribute('mode', 'maker');
+ document.querySelectorAll('.button').forEach(btn => {
+ btn.addEventListener('click', handlePlay);
+ btn.removeEventListener('click', enableBlocklyMode);
+ });
+ }
+
+ function enableBlocklyMode(e) {
+ document.body.setAttribute('mode', 'blockly');
+ currentButton = e.target;
+ }
+
+ document.querySelector('#edit').addEventListener('click', enableEditMode);
+ document.querySelector('#done').addEventListener('click', enableMakerMode);
+ document.querySelector('#save').addEventListener('click', handleSave);
+
+ enableMakerMode();
+
+})();
diff --git a/js/demos/codelab/app/scripts/music_maker.js b/js/demos/codelab/app/scripts/music_maker.js
new file mode 100644
index 0000000..e3d4eff
--- /dev/null
+++ b/js/demos/codelab/app/scripts/music_maker.js
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ const MusicMaker = {
+ queue_: [],
+ player_: new Audio(),
+ queueSound: function(soundUrl) {
+ this.queue_.push(soundUrl);
+ },
+ play: function() {
+ let next = this.queue_.shift();
+ if (next) {
+ this.player_.src = next;
+ this.player_.play();
+ }
+ },
+};
+
+MusicMaker.player_.addEventListener(
+ 'ended', MusicMaker.play.bind(MusicMaker));
diff --git a/js/demos/codelab/app/sounds/c4.m4a b/js/demos/codelab/app/sounds/c4.m4a
new file mode 100644
index 0000000..33941cf
Binary files /dev/null and b/js/demos/codelab/app/sounds/c4.m4a differ
diff --git a/js/demos/codelab/app/sounds/c5.m4a b/js/demos/codelab/app/sounds/c5.m4a
new file mode 100644
index 0000000..49721cd
Binary files /dev/null and b/js/demos/codelab/app/sounds/c5.m4a differ
diff --git a/js/demos/codelab/app/sounds/d4.m4a b/js/demos/codelab/app/sounds/d4.m4a
new file mode 100644
index 0000000..51bcad6
Binary files /dev/null and b/js/demos/codelab/app/sounds/d4.m4a differ
diff --git a/js/demos/codelab/app/sounds/e4.m4a b/js/demos/codelab/app/sounds/e4.m4a
new file mode 100644
index 0000000..d910052
Binary files /dev/null and b/js/demos/codelab/app/sounds/e4.m4a differ
diff --git a/js/demos/codelab/app/sounds/f4.m4a b/js/demos/codelab/app/sounds/f4.m4a
new file mode 100644
index 0000000..c80a0bf
Binary files /dev/null and b/js/demos/codelab/app/sounds/f4.m4a differ
diff --git a/js/demos/codelab/app/sounds/g4.m4a b/js/demos/codelab/app/sounds/g4.m4a
new file mode 100644
index 0000000..45ea448
Binary files /dev/null and b/js/demos/codelab/app/sounds/g4.m4a differ
diff --git a/js/demos/codelab/app/styles/index.css b/js/demos/codelab/app/styles/index.css
new file mode 100644
index 0000000..0ef8f3b
--- /dev/null
+++ b/js/demos/codelab/app/styles/index.css
@@ -0,0 +1,75 @@
+main {
+ width: 400px;
+ position: relative;
+ margin: 0 auto;
+ overflow:hidden;
+ height: 600px;
+}
+
+header {
+ background-color: green;
+ width: 100%;
+}
+
+h1 {
+ width: 400px;
+ position: relative;
+ margin: 0 auto;
+ color: #fff;
+ font-size: 1.8em;
+ line-height: 2.4em;
+}
+
+.mode-edit,
+.mode-maker,
+.mode-blockly {
+ display: none;
+}
+
+[mode="maker"] .mode-maker,
+[mode="edit"] .mode-edit,
+[mode="blockly"] .mode-blockly {
+ display: block;
+}
+
+.blockly-editor {
+ position: absolute;
+ top: 64px;
+ left: -400px;
+ transition: left .4s;
+ height: 460px;
+ width: 400px;
+ background-color: #eee;
+}
+
+[mode="blockly"] .blockly-editor {
+ left: 0;
+}
+
+.maker {
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between;
+ height: 460px;
+ width: 400px;
+}
+
+.maker > div {
+ display: flex;
+ justify-content: space-between;
+}
+
+.button {
+ width: 120px;
+ height: 140px;
+ color: #fff;
+ font-size: 3em;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 140px;
+}
+
+.mdl-button {
+ margin: 1em 0;
+ float: right;
+}
diff --git a/js/demos/custom-dialogs/custom-dialog.js b/js/demos/custom-dialogs/custom-dialog.js
new file mode 100644
index 0000000..99c66be
--- /dev/null
+++ b/js/demos/custom-dialogs/custom-dialog.js
@@ -0,0 +1,172 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * An example implementation of how one might replace Blockly's browser
+ * dialogs. This is just an example, and applications are not encouraged to use
+ * it verbatim.
+ *
+ * @namespace
+ */
+CustomDialog = {};
+
+/** Override Blockly.alert() with custom implementation. */
+Blockly.alert = function(message, callback) {
+ console.log('Alert: ' + message);
+ CustomDialog.show('Alert', message, {
+ onCancel: callback
+ });
+};
+
+/** Override Blockly.confirm() with custom implementation. */
+Blockly.confirm = function(message, callback) {
+ console.log('Confirm: ' + message);
+ CustomDialog.show('Confirm', message, {
+ showOkay: true,
+ onOkay: function() {
+ callback(true);
+ },
+ showCancel: true,
+ onCancel: function() {
+ callback(false);
+ }
+ });
+};
+
+/** Override Blockly.prompt() with custom implementation. */
+Blockly.prompt = function(message, defaultValue, callback) {
+ console.log('Prompt: ' + message);
+ CustomDialog.show('Prompt', message, {
+ showInput: true,
+ showOkay: true,
+ onOkay: function() {
+ callback(CustomDialog.inputField.value);
+ },
+ showCancel: true,
+ onCancel: function() {
+ callback(null);
+ }
+ });
+ CustomDialog.inputField.value = defaultValue;
+};
+
+/** Hides any currently visible dialog. */
+CustomDialog.hide = function() {
+ if (CustomDialog.backdropDiv_) {
+ CustomDialog.backdropDiv_.style.display = 'none';
+ CustomDialog.dialogDiv_.style.display = 'none';
+ }
+};
+
+/**
+ * Shows the dialog.
+ * Allowed options:
+ * - showOkay: Whether to show the OK button.
+ * - showCancel: Whether to show the Cancel button.
+ * - showInput: Whether to show the text input field.
+ * - onOkay: Callback to handle the okay button.
+ * - onCancel: Callback to handle the cancel button and backdrop clicks.
+ */
+CustomDialog.show = function(title, message, options) {
+ var backdropDiv = CustomDialog.backdropDiv_;
+ var dialogDiv = CustomDialog.dialogDiv_;
+ if (!dialogDiv) {
+ // Generate HTML
+ backdropDiv = document.createElement('div');
+ backdropDiv.id = 'customDialogBackdrop';
+ backdropDiv.style.cssText =
+ 'position: absolute;' +
+ 'top: 0; left: 0; right: 0; bottom: 0;' +
+ 'background-color: rgba(0, 0, 0, .7);' +
+ 'z-index: 100;';
+ document.body.appendChild(backdropDiv);
+
+ dialogDiv = document.createElement('div');
+ dialogDiv.id = 'customDialog';
+ dialogDiv.style.cssText =
+ 'background-color: #fff;' +
+ 'width: 400px;' +
+ 'margin: 20px auto 0;' +
+ 'padding: 10px;';
+ backdropDiv.appendChild(dialogDiv);
+
+ dialogDiv.onclick = function(event) {
+ event.stopPropagation();
+ };
+
+ CustomDialog.backdropDiv_ = backdropDiv;
+ CustomDialog.dialogDiv_ = dialogDiv;
+ }
+ backdropDiv.style.display = 'block';
+ dialogDiv.style.display = 'block';
+
+ dialogDiv.innerHTML =
+ 'Blockly Demo: Custom Dialog
+
+
+
+
+
+
+ Blockly Demo: Custom Fields
+
+
+
+
+
+
+
diff --git a/js/demos/custom-fields/pitch/blocks.js b/js/demos/custom-fields/pitch/blocks.js
new file mode 100644
index 0000000..3e02ac8
--- /dev/null
+++ b/js/demos/custom-fields/pitch/blocks.js
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Pitch field demo blocks.
+ * @author samelh@gmail.com (Sam El-Husseini)
+ */
+
+Blockly.Blocks['test_pitch_field'] = {
+ init: function() {
+ this.appendDummyInput()
+ .appendField('pitch')
+ .appendField(new CustomFields.FieldPitch('7'), 'PITCH');
+ this.setStyle('loop_blocks');
+ }
+};
diff --git a/js/demos/custom-fields/pitch/field_pitch.js b/js/demos/custom-fields/pitch/field_pitch.js
new file mode 100644
index 0000000..cf3b9fd
--- /dev/null
+++ b/js/demos/custom-fields/pitch/field_pitch.js
@@ -0,0 +1,250 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ * https://github.com/google/blockly-games
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Music pitch input field. Borrowed from Blockly Games.
+ * @author fraser@google.com (Neil Fraser)
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+'use strict';
+
+goog.provide('CustomFields.FieldPitch');
+
+goog.require('Blockly.FieldTextInput');
+goog.require('Blockly.utils.math');
+goog.require('Blockly.utils.object');
+
+var CustomFields = CustomFields || {};
+
+/**
+ * Class for an editable pitch field.
+ * @param {string} text The initial content of the field.
+ * @extends {Blockly.FieldTextInput}
+ * @constructor
+ */
+CustomFields.FieldPitch = function(text) {
+ CustomFields.FieldPitch.superClass_.constructor.call(this, text);
+
+ /**
+ * Click event data.
+ * @type {?Blockly.EventData}
+ * @private
+ */
+ this.clickWrapper_ = null;
+
+ /**
+ * Move event data.
+ * @type {?Blockly.EventData}
+ * @private
+ */
+ this.moveWrapper_ = null;
+};
+Blockly.utils.object.inherits(CustomFields.FieldPitch, Blockly.FieldTextInput);
+
+/**
+ * Construct a FieldPitch from a JSON arg object.
+ * @param {!Object} options A JSON object with options (pitch).
+ * @return {!CustomFields.FieldPitch} The new field instance.
+ * @package
+ * @nocollapse
+ */
+CustomFields.FieldPitch.fromJson = function(options) {
+ return new CustomFields.FieldPitch(options['pitch']);
+};
+
+/**
+ * All notes available for the picker.
+ */
+CustomFields.FieldPitch.NOTES = 'C3 D3 E3 F3 G3 A3 B3 C4 D4 E4 F4 G4 A4'.split(/ /);
+
+/**
+ * Show the inline free-text editor on top of the text and the note picker.
+ * @private
+ */
+CustomFields.FieldPitch.prototype.showEditor_ = function() {
+ CustomFields.FieldPitch.superClass_.showEditor_.call(this);
+
+ var div = Blockly.WidgetDiv.DIV;
+ if (!div.firstChild) {
+ // Mobile interface uses Blockly.prompt.
+ return;
+ }
+ // Build the DOM.
+ var editor = this.dropdownCreate_();
+ Blockly.DropDownDiv.getContentDiv().appendChild(editor);
+
+ Blockly.DropDownDiv.setColour(this.sourceBlock_.style.colourPrimary,
+ this.sourceBlock_.style.colourTertiary);
+
+ Blockly.DropDownDiv.showPositionedByField(
+ this, this.dropdownDispose_.bind(this));
+
+ // The note picker is different from other fields in that it updates on
+ // mousemove even if it's not in the middle of a drag. In future we may
+ // change this behaviour. For now, using bindEvent_ instead of
+ // bindEventWithChecks_ allows it to work without a mousedown/touchstart.
+ this.clickWrapper_ =
+ Blockly.bindEvent_(this.imageElement_, 'click', this,
+ this.hide_);
+ this.moveWrapper_ =
+ Blockly.bindEvent_(this.imageElement_, 'mousemove', this,
+ this.onMouseMove);
+
+ this.updateGraph_();
+};
+
+/**
+ * Create the pitch editor.
+ * @return {!Element} The newly created pitch picker.
+ * @private
+ */
+CustomFields.FieldPitch.prototype.dropdownCreate_ = function() {
+ this.imageElement_ = document.createElement('div');
+ this.imageElement_.id = 'notePicker';
+
+ return this.imageElement_;
+};
+
+/**
+ * Dispose of events belonging to the pitch editor.
+ * @private
+ */
+CustomFields.FieldPitch.prototype.dropdownDispose_ = function() {
+ if (this.clickWrapper_) {
+ Blockly.unbindEvent_(this.clickWrapper_);
+ this.clickWrapper_ = null;
+ }
+ if (this.moveWrapper_) {
+ Blockly.unbindEvent_(this.moveWrapper_);
+ this.moveWrapper_ = null;
+ }
+ this.imageElement_ = null;
+};
+
+/**
+ * Hide the editor.
+ * @private
+ */
+CustomFields.FieldPitch.prototype.hide_ = function() {
+ Blockly.WidgetDiv.hide();
+ Blockly.DropDownDiv.hideWithoutAnimation();
+};
+
+/**
+ * Set the note to match the mouse's position.
+ * @param {!Event} e Mouse move event.
+ */
+CustomFields.FieldPitch.prototype.onMouseMove = function(e) {
+ var bBox = this.imageElement_.getBoundingClientRect();
+ var dy = e.clientY - bBox.top;
+ var note = Blockly.utils.math.clamp(Math.round(13.5 - dy / 7.5), 0, 12);
+ this.imageElement_.style.backgroundPosition = (-note * 37) + 'px 0';
+ this.setEditorValue_(note);
+};
+
+/**
+ * Convert the machine-readable value (0-12) to human-readable text (C3-A4).
+ * @param {number|string} value The provided value.
+ * @return {string|undefined} The respective note, or undefined if invalid.
+ */
+CustomFields.FieldPitch.prototype.valueToNote = function(value) {
+ return CustomFields.FieldPitch.NOTES[Number(value)];
+};
+
+/**
+ * Convert the human-readable text (C3-A4) to machine-readable value (0-12).
+ * @param {string} text The provided note.
+ * @return {number|undefined} The respective value, or undefined if invalid.
+ */
+CustomFields.FieldPitch.prototype.noteToValue = function(text) {
+ var normalizedText = text.trim().toUpperCase();
+ var i = CustomFields.FieldPitch.NOTES.indexOf(normalizedText);
+ return i > -1 ? i : undefined;
+};
+
+/**
+ * Get the text to be displayed on the field node.
+ * @return {?string} The HTML value if we're editing, otherwise null. Null means
+ * the super class will handle it, likely a string cast of value.
+ * @protected
+ */
+CustomFields.FieldPitch.prototype.getText_ = function() {
+ if (this.isBeingEdited_) {
+ return CustomFields.FieldPitch.superClass_.getText_.call(this);
+ }
+ return this.valueToNote(this.getValue()) || null;
+};
+
+/**
+ * Transform the provided value into a text to show in the HTML input.
+ * @param {*} value The value stored in this field.
+ * @return {string} The text to show on the HTML input.
+ */
+CustomFields.FieldPitch.prototype.getEditorText_ = function(value) {
+ return this.valueToNote(value);
+};
+
+/**
+ * Transform the text received from the HTML input (note) into a value
+ * to store in this field.
+ * @param {string} text Text received from the HTML input.
+ * @return {*} The value to store.
+ */
+CustomFields.FieldPitch.prototype.getValueFromEditorText_ = function(text) {
+ return this.noteToValue(text);
+};
+
+/**
+ * Updates the graph when the field rerenders.
+ * @private
+ * @override
+ */
+CustomFields.FieldPitch.prototype.render_ = function() {
+ CustomFields.FieldPitch.superClass_.render_.call(this);
+ this.updateGraph_();
+};
+
+/**
+ * Redraw the note picker with the current note.
+ * @private
+ */
+CustomFields.FieldPitch.prototype.updateGraph_ = function() {
+ if (!this.imageElement_) {
+ return;
+ }
+ var i = this.getValue();
+ this.imageElement_.style.backgroundPosition = (-i * 37) + 'px 0';
+};
+
+/**
+ * Ensure that only a valid value may be entered.
+ * @param {*} opt_newValue The input value.
+ * @return {*} A valid value, or null if invalid.
+ */
+CustomFields.FieldPitch.prototype.doClassValidation_ = function(opt_newValue) {
+ if (opt_newValue === null || opt_newValue === undefined) {
+ return null;
+ }
+ var note = this.valueToNote(opt_newValue);
+ if (note) {
+ return opt_newValue;
+ }
+ return null;
+};
+
+Blockly.fieldRegistry.register('field_pitch', CustomFields.FieldPitch);
diff --git a/js/demos/custom-fields/pitch/index.html b/js/demos/custom-fields/pitch/index.html
new file mode 100644
index 0000000..642482c
--- /dev/null
+++ b/js/demos/custom-fields/pitch/index.html
@@ -0,0 +1,120 @@
+
+
+
+
+ Blockly Demo: Custom Pitch Field
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/custom-fields/pitch/media/notes.png b/js/demos/custom-fields/pitch/media/notes.png
new file mode 100644
index 0000000..b9a57b5
Binary files /dev/null and b/js/demos/custom-fields/pitch/media/notes.png differ
diff --git a/js/demos/custom-fields/pitch/pitch.css b/js/demos/custom-fields/pitch/pitch.css
new file mode 100644
index 0000000..586c6cd
--- /dev/null
+++ b/js/demos/custom-fields/pitch/pitch.css
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+#notePicker {
+ background-image: url(media/notes.png);
+ border: 1px solid #ccc;
+ height: 109px;
+ width: 46px;
+}
\ No newline at end of file
diff --git a/js/demos/custom-fields/turtle/blocks.js b/js/demos/custom-fields/turtle/blocks.js
new file mode 100644
index 0000000..ef8b245
--- /dev/null
+++ b/js/demos/custom-fields/turtle/blocks.js
@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Turtle field demo blocks..
+ * @author bekawestberg@gmail.com (Beka Westberg)
+ */
+
+Blockly.Blocks['turtle_basic'] = {
+ init: function() {
+ this.appendDummyInput()
+ .appendField('simple turtle');
+ this.appendDummyInput()
+ .setAlign(Blockly.ALIGN_CENTRE)
+ .appendField(new CustomFields.FieldTurtle(), 'TURTLE');
+ this.setStyle('loop_blocks');
+ this.setCommentText('Demonstrates a turtle field with no validator.');
+ }
+};
+
+Blockly.Blocks['turtle_nullifier'] = {
+ init: function() {
+ this.appendDummyInput()
+ .appendField('no trademarks');
+ this.appendDummyInput()
+ .setAlign(Blockly.ALIGN_CENTRE)
+ .appendField(new CustomFields.FieldTurtle(null, null, null, this.validate)
+ , 'TURTLE');
+ this.setStyle('loop_blocks');
+ this.setCommentText('Validates combinations of names and hats to null' +
+ ' (invalid) if they could be considered infringe-y. This turns the' +
+ ' turtle field red. Infringe-y combinations are: (Leonardo, Mask),' +
+ ' (Yertle, Crown), and (Franklin, Propeller).');
+ },
+
+ validate: function(newValue) {
+ this.cachedValidatedValue_ = {
+ turtleName: newValue.turtleName,
+ pattern: newValue.pattern,
+ hat: newValue.hat,
+ };
+ if ((newValue.turtleName == 'Leonardo' && newValue.hat == 'Mask') ||
+ (newValue.turtleName == 'Yertle' && newValue.hat == 'Crown') ||
+ (newValue.turtleName == 'Franklin') && newValue.hat == 'Propeller') {
+
+ var currentValue = this.getValue();
+ if (newValue.turtleName != currentValue.turtleName) {
+ // Turtle name changed.
+ this.cachedValidatedValue_.turtleName = null;
+ } else {
+ // Hat must have changed.
+ this.cachedValidatedValue_.hat = null;
+ }
+
+ return null;
+ }
+ return newValue;
+ }
+};
+
+Blockly.Blocks['turtle_changer'] = {
+ init: function() {
+ this.appendDummyInput()
+ .setAlign(Blockly.ALIGN_CENTRE)
+ .appendField('force hats');
+ this.appendDummyInput()
+ .appendField(new CustomFields.FieldTurtle(
+ 'Dots', 'Crown', 'Yertle', this.validate), 'TURTLE');
+ this.setStyle('loop_blocks');
+ this.setCommentText('Validates the input so that certain names always' +
+ ' have specific hats. The name-hat combinations are: (Leonardo, Mask),' +
+ ' (Yertle, Crown), (Franklin, Propeller).');
+ },
+
+ validate: function(newValue) {
+ switch(newValue.turtleName) {
+ case 'Leonardo':
+ newValue.hat = 'Mask';
+ break;
+ case 'Yertle':
+ newValue.hat = 'Crown';
+ break;
+ case 'Franklin':
+ newValue.hat = 'Propeller';
+ break;
+ }
+ return newValue;
+ }
+};
diff --git a/js/demos/custom-fields/turtle/field_turtle.js b/js/demos/custom-fields/turtle/field_turtle.js
new file mode 100644
index 0000000..9a787e4
--- /dev/null
+++ b/js/demos/custom-fields/turtle/field_turtle.js
@@ -0,0 +1,753 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview A field used to customize a turtle.
+ * @author bekawestberg@gmail.com (Beka Westberg)
+ */
+'use strict';
+
+// You must provide the constructor for your custom field.
+goog.provide('CustomFields.FieldTurtle');
+
+// You must require the abstract field class to inherit from.
+goog.require('Blockly.Field');
+goog.require('Blockly.fieldRegistry');
+goog.require('Blockly.utils');
+goog.require('Blockly.utils.dom');
+goog.require('Blockly.utils.object');
+goog.require('Blockly.utils.Size');
+
+var CustomFields = CustomFields || {};
+
+// Generally field's values should be optional, and have logical defaults.
+// If this is not possible (for example image fields can't have logical
+// defaults) the field should throw a clear error when a value is not provided.
+// Editable fields also generally accept validators, so we will accept a
+// validator.
+CustomFields.FieldTurtle = function(
+ opt_pattern, opt_hat, opt_turtleName, opt_validator) {
+
+ // The turtle field contains an object as its value, so we need to compile
+ // the parameters into an object.
+ var value = {};
+ value.pattern = opt_pattern || CustomFields.FieldTurtle.PATTERNS[0];
+ value.hat = opt_hat || CustomFields.FieldTurtle.HATS[0];
+ value.turtleName = opt_turtleName || CustomFields.FieldTurtle.NAMES[0];
+
+ // A field constructor should always call its parent constructor, because
+ // that helps keep the code organized and DRY.
+ CustomFields.FieldTurtle.superClass_.constructor.call(
+ this, value, opt_validator);
+
+ /**
+ * The size of the area rendered by the field.
+ * @type {Blockly.utils.Size}
+ * @protected
+ * @override
+ */
+ this.size_ = new Blockly.utils.Size(0, 0);
+};
+Blockly.utils.object.inherits(CustomFields.FieldTurtle, Blockly.Field);
+
+// This allows the field to be constructed using a JSON block definition.
+CustomFields.FieldTurtle.fromJson = function(options) {
+ // In this case we simply pass the JSON options along to the constructor,
+ // but you can also use this to get message references, and other such things.
+ return new CustomFields.FieldTurtle(
+ options['pattern'],
+ options['hat'],
+ options['turtleName']);
+};
+
+// Since this field is editable we must also define serializable as true
+// (for backwards compatibility reasons serializable is false by default).
+CustomFields.FieldTurtle.prototype.SERIALIZABLE = true;
+
+// The cursor property defines what the mouse will look like when the user
+// hovers over the field. By default the cursor will be whatever
+// .blocklyDraggable's cursor is defined as (vis. grab). Most fields define
+// this property as 'default'.
+CustomFields.FieldTurtle.prototype.CURSOR = 'pointer';
+
+// How far to move the text to keep it to the right of the turtle.
+// May change if the turtle gets fancy enough.
+CustomFields.FieldTurtle.prototype.TEXT_OFFSET_X = 80;
+
+// These are the different options for our turtle. Being declared this way
+// means they are static, and not translatable. If you want to do something
+// similar, but make it translatable you should set up your options like a
+// dropdown field, with language-neutral keys and human-readable values.
+CustomFields.FieldTurtle.PATTERNS =
+ ['Dots', 'Stripes', 'Hexagons'];
+CustomFields.FieldTurtle.HATS =
+ ['Stovepipe', 'Crown', 'Propeller', 'Mask', 'Fedora'];
+CustomFields.FieldTurtle.NAMES =
+ ['Yertle', 'Franklin', 'Crush', 'Leonardo', 'Bowser', 'Squirtle', 'Oogway'];
+
+// Used to keep track of our editor event listeners, so they can be
+// properly disposed of when the field closes. You can keep track of your
+// listeners however you want, just be sure to dispose of them!
+CustomFields.FieldTurtle.prototype.editorListeners_ = [];
+
+// Used to create the DOM of our field.
+CustomFields.FieldTurtle.prototype.initView = function() {
+ // Because we want to have both a borderRect_ (background) and a
+ // textElement_ (text) we can call the super-function. If we only wanted
+ // one or the other, we could call their individual createX functions.
+ CustomFields.FieldTurtle.superClass_.initView.call(this);
+
+ // Note that the field group is created by the abstract field's init_
+ // function. This means that *all elements* should be children of the
+ // fieldGroup_.
+ this.createView_();
+};
+
+// Updates how the field looks depending on if it is editable or not.
+CustomFields.FieldTurtle.prototype.updateEditable = function() {
+ if (!this.fieldGroup_) {
+ // Not initialized yet.
+ return;
+ }
+ // The default functionality just makes it so the borderRect_ does not
+ // highlight when hovered.
+ Blockly.FieldColour.superClass_.updateEditable.call(this);
+ // Things like this are best applied to the clickTarget_. By default the
+ // click target is the same as getSvgRoot, which by default is the
+ // fieldGroup_.
+ var group = this.getClickTarget_();
+ if (!this.isCurrentlyEditable()) {
+ group.style.cursor = 'not-allowed';
+ } else {
+ group.style.cursor = this.CURSOR;
+ }
+};
+
+// Gets the text to display when the block is collapsed
+CustomFields.FieldTurtle.prototype.getText = function() {
+ var text = this.value_.turtleName + ' wearing a ' + this.value_.hat;
+ if (this.value_.hat == 'Stovepipe' || this.value_.hat == 'Propeller') {
+ text += ' hat';
+ }
+ return text;
+};
+
+// Makes sure new field values (given to setValue) are valid, meaning
+// something this field can legally "hold". Class validators can either change
+// the input value, or return null if the input value is invalid. Called by
+// the setValue() function.
+CustomFields.FieldTurtle.prototype.doClassValidation_ = function(newValue) {
+ // Undefined signals that we want the value to remain unchanged. This is a
+ // special feature of turtle fields, but could be useful for other
+ // multi-part fields.
+ if (newValue.pattern == undefined) {
+ newValue.pattern = this.displayValue_ && this.displayValue_.pattern;
+ // We only want to allow patterns that are part of our pattern list.
+ // Anything else is invalid, so we return null.
+ } else if (CustomFields.FieldTurtle.PATTERNS.indexOf(newValue.pattern) == -1) {
+ newValue.pattern = null;
+ }
+
+ if (newValue.hat == undefined) {
+ newValue.hat = this.displayValue_ && this.displayValue_.hat;
+ } else if (CustomFields.FieldTurtle.HATS.indexOf(newValue.hat) == -1) {
+ newValue.hat = null;
+ }
+
+ if (newValue.turtleName == undefined) {
+ newValue.turtleName = this.displayValue_ && this.displayValue_.turtleName;
+ } else if (CustomFields.FieldTurtle.NAMES.indexOf(newValue.turtleName) == -1) {
+ newValue.turtleName = null;
+ }
+
+ // This is a strategy for dealing with defaults on multi-part values.
+ // The class validator sets individual properties of the object to null
+ // to indicate that they are invalid, and then caches that object to the
+ // cachedValidatedValue_ property. This way the field can, for
+ // example, properly handle an invalid pattern, combined with a valid hat.
+ // This can also be done with local validators.
+ this.cachedValidatedValue_ = newValue;
+
+ // Always be sure to return!
+ if (!newValue.pattern || !newValue.hat || !newValue.turtleName) {
+ return null;
+ }
+ return newValue;
+};
+
+// Saves the new field value. Called by the setValue function.
+CustomFields.FieldTurtle.prototype.doValueUpdate_ = function(newValue) {
+ // The default function sets this field's this.value_ property to the
+ // newValue, and its this.isDirty_ property to true. The isDirty_ property
+ // tells the setValue function whether the field needs to be re-rendered.
+ CustomFields.FieldTurtle.superClass_.doValueUpdate_.call(this, newValue);
+ this.displayValue_ = newValue;
+ // Since this field has custom UI for invalid values, we also want to make
+ // sure it knows it is now valid.
+ this.isValueInvalid_ = false;
+};
+
+// Notifies that the field that the new value was invalid. Called by
+// setValue function. Can either be triggered by the class validator, or the
+// local validator.
+CustomFields.FieldTurtle.prototype.doValueInvalid_ = function(invalidValue) {
+ // By default this function is no-op, meaning if the new value is invalid
+ // the field simply won't be updated. This field has custom UI for invalid
+ // values, so we override this function.
+
+ // We want the value to be displayed like normal.
+ // But we want to flag it as invalid, so the render_ function knows to
+ // make the borderRect_ red.
+ this.displayValue_ = invalidValue;
+ this.isDirty_ = true;
+ this.isValueInvalid_ = true;
+};
+
+// Updates the field's on-block display based on the current display value.
+CustomFields.FieldTurtle.prototype.render_ = function() {
+ var value = this.displayValue_;
+
+ // Always do editor updates inside render. This makes sure the editor
+ // always displays the correct value, even if a validator changes it.
+ if (this.editor_) {
+ this.renderEditor_();
+ }
+
+ this.stovepipe_.style.display = 'none';
+ this.crown_.style.display = 'none';
+ this.mask_.style.display = 'none';
+ this.propeller_.style.display = 'none';
+ this.fedora_.style.display = 'none';
+ switch(value.hat) {
+ case 'Stovepipe':
+ this.stovepipe_.style.display = '';
+ this.turtleGroup_.setAttribute('transform', 'translate(0,12)');
+ this.textElement_.setAttribute(
+ 'transform', 'translate(' + this.TEXT_OFFSET_X + ',20)');
+ break;
+ case 'Crown':
+ this.crown_.style.display = '';
+ this.turtleGroup_.setAttribute('transform', 'translate(0,9)');
+ this.textElement_.setAttribute(
+ 'transform', 'translate(' + this.TEXT_OFFSET_X + ',16)');
+ break;
+ case 'Mask':
+ this.mask_.style.display = '';
+ this.turtleGroup_.setAttribute('transform', 'translate(0,1.2)');
+ this.textElement_.setAttribute('transform',
+ 'translate(' + this.TEXT_OFFSET_X + ',4)');
+ break;
+ case 'Propeller':
+ this.propeller_.style.display = '';
+ this.turtleGroup_.setAttribute('transform', 'translate(0,6)');
+ this.textElement_.setAttribute('transform',
+ 'translate(' + this.TEXT_OFFSET_X + ',12)');
+ break;
+ case 'Fedora':
+ this.fedora_.style.display = '';
+ this.turtleGroup_.setAttribute('transform', 'translate(0,6)');
+ this.textElement_.setAttribute('transform',
+ 'translate(' + this.TEXT_OFFSET_X + ',12)');
+ break;
+ }
+
+ switch(value.pattern) {
+ case 'Dots':
+ this.shellPattern_.setAttribute('fill', 'url(#polkadots)');
+ break;
+ case 'Stripes':
+ this.shellPattern_.setAttribute('fill', 'url(#stripes)');
+ break;
+ case 'Hexagons':
+ this.shellPattern_.setAttribute('fill', 'url(#hexagons)');
+ break;
+ }
+
+ // Always modify the textContent_ rather than the textElement_. This
+ // allows fields to append DOM to the textElement (e.g. the angle field).
+ this.textContent_.nodeValue = value.turtleName;
+
+ if (this.isValueInvalid_) {
+ this.borderRect_.style.fill = '#f99';
+ this.borderRect_.style.fillOpacity = 1;
+ } else {
+ this.borderRect_.style.fill = '#fff';
+ this.borderRect_.style.fillOpacity = 0.6;
+ }
+
+ this.updateSize_();
+};
+
+CustomFields.FieldTurtle.prototype.renderEditor_ = function() {
+ var value = this.displayValue_;
+
+ // .textElement is a property assigned to the element.
+ // It allows the text to be edited without destroying the warning icon.
+ this.editor_.patternText.textElement.nodeValue = value.pattern;
+ this.editor_.hatText.textElement.nodeValue = value.hat;
+ this.editor_.turtleNameText.textElement.nodeValue = value.turtleName;
+
+ this.editor_.patternText.warningIcon.style.display =
+ this.cachedValidatedValue_.pattern ? 'none' : '';
+ this.editor_.hatText.warningIcon.style.display =
+ this.cachedValidatedValue_.hat ? 'none' : '';
+ this.editor_.turtleNameText.warningIcon.style.display =
+ this.cachedValidatedValue_.turtleName ? 'none' : '';
+};
+
+// Used to update the size of the field. This function's logic could be simply
+// included inside render_ (it is not called anywhere else), but it is
+// usually separated to keep code more organized.
+CustomFields.FieldTurtle.prototype.updateSize_ = function() {
+ var bbox = this.movableGroup_.getBBox();
+ var width = bbox.width;
+ var height = bbox.height;
+ if (this.borderRect_) {
+ width += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
+ height += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
+ this.borderRect_.setAttribute('width', width);
+ this.borderRect_.setAttribute('height', height);
+ }
+ // Note how both the width and the height can be dynamic.
+ this.size_.width = width;
+ this.size_.height = height;
+};
+
+// Called when the field is clicked. It is usually used to show an editor,
+// but it can also be used for other things e.g. the checkbox field uses
+// this function to check/uncheck itself.
+CustomFields.FieldTurtle.prototype.showEditor_ = function() {
+ this.editor_ = this.dropdownCreate_();
+ this.renderEditor_();
+ Blockly.DropDownDiv.getContentDiv().appendChild(this.editor_);
+
+ // These allow us to have the editor match the block's colour.
+ var fillColour = this.sourceBlock_.getColour();
+ Blockly.DropDownDiv.setColour(fillColour,
+ this.sourceBlock_.style.colourTertiary);
+
+ // Always pass the dropdown div a dispose function so that you can clean
+ // up event listeners when the editor closes.
+ Blockly.DropDownDiv.showPositionedByField(
+ this, this.dropdownDispose_.bind(this));
+};
+
+// Creates the UI of the editor, and adds event listeners to it.
+CustomFields.FieldTurtle.prototype.dropdownCreate_ = function() {
+ var createRow = function(table) {
+ var row = table.appendChild(document.createElement('tr'));
+ row.className = 'row';
+ return row;
+ };
+ var createLeftArrow = function(row) {
+ var cell = document.createElement('div');
+ cell.className = 'arrow';
+ var leftArrow = document.createElement('button');
+ leftArrow.setAttribute('type', 'button');
+ leftArrow.textContent = '<';
+ cell.appendChild(leftArrow);
+ row.appendChild(cell);
+ return cell;
+ };
+ var createTextNode = function(row, text) {
+ var cell = document.createElement('div');
+ cell.className = 'text';
+ var text = document.createTextNode(text);
+ cell.appendChild(text);
+ cell.textElement = text;
+ var warning = document.createElement('img');
+ warning.setAttribute('src', 'media/warning.svg');
+ warning.setAttribute('height', '16px');
+ warning.setAttribute('width', '16px');
+ warning.style.marginLeft = '4px';
+ cell.appendChild(warning);
+ cell.warningIcon = warning;
+ row.appendChild(cell);
+ return cell;
+ };
+ var createRightArrow = function(row) {
+ var cell = document.createElement('div');
+ cell.className = 'arrow';
+ var rightArrow = document.createElement('button');
+ rightArrow.setAttribute('type', 'button');
+ rightArrow.textContent = '>';
+ cell.appendChild(rightArrow);
+ row.appendChild(cell);
+ return cell;
+ };
+ var createArrowListener = function(variable, array, direction) {
+ return function() {
+ var currentIndex = array.indexOf(this.displayValue_[variable]);
+ currentIndex += direction;
+ if (currentIndex <= -1) {
+ currentIndex = array.length - 1;
+ } else if (currentIndex >= array.length) {
+ currentIndex = 0;
+ }
+ var value = {};
+ value[variable] = array[currentIndex];
+ this.setValue(value);
+ };
+ };
+
+ var widget = document.createElement('div');
+ widget.className = 'customFieldsTurtleWidget blocklyNonSelectable';
+
+ var table = document.createElement('div');
+ table.className = 'table';
+ widget.appendChild(table);
+
+ var row = createRow(table);
+ var leftArrow = createLeftArrow(row);
+ widget.patternText = createTextNode(row, this.displayValue_.pattern);
+ var rightArrow = createRightArrow(row);
+ this.editorListeners_.push(Blockly.bindEvent_(leftArrow, 'mouseup', this,
+ createArrowListener('pattern', CustomFields.FieldTurtle.PATTERNS, -1)));
+ this.editorListeners_.push(Blockly.bindEvent_(rightArrow, 'mouseup', this,
+ createArrowListener('pattern', CustomFields.FieldTurtle.PATTERNS, 1)));
+
+ row = createRow(table);
+ leftArrow = createLeftArrow(row);
+ widget.hatText = createTextNode(row, this.displayValue_.hat);
+ rightArrow = createRightArrow(row);
+ this.editorListeners_.push(Blockly.bindEvent_(leftArrow, 'mouseup', this,
+ createArrowListener('hat', CustomFields.FieldTurtle.HATS, -1)));
+ this.editorListeners_.push(Blockly.bindEvent_(rightArrow, 'mouseup', this,
+ createArrowListener('hat', CustomFields.FieldTurtle.HATS, 1)));
+
+ row = createRow(table);
+ leftArrow = createLeftArrow(row);
+ widget.turtleNameText = createTextNode(row, this.displayValue_.turtleName);
+ rightArrow = createRightArrow(row);
+ this.editorListeners_.push(Blockly.bindEvent_(leftArrow, 'mouseup', this,
+ createArrowListener('turtleName', CustomFields.FieldTurtle.NAMES, -1)));
+ this.editorListeners_.push(Blockly.bindEvent_(rightArrow, 'mouseup', this,
+ createArrowListener('turtleName', CustomFields.FieldTurtle.NAMES, 1)));
+
+ var randomizeButton = document.createElement('button');
+ randomizeButton.className = 'randomize';
+ randomizeButton.setAttribute('type', 'button');
+ randomizeButton.textContent = 'randomize turtle';
+ this.editorListeners_.push(Blockly.bindEvent_(randomizeButton, 'mouseup', this,
+ function() {
+ var value = {};
+ value.pattern = CustomFields.FieldTurtle.PATTERNS[
+ Math.floor(Math.random() * CustomFields.FieldTurtle.PATTERNS.length)];
+
+ value.hat = CustomFields.FieldTurtle.HATS[
+ Math.floor(Math.random() * CustomFields.FieldTurtle.HATS.length)];
+
+ value.turtleName = CustomFields.FieldTurtle.NAMES[
+ Math.floor(Math.random() * CustomFields.FieldTurtle.NAMES.length)];
+
+ this.setValue(value);
+ }));
+ widget.appendChild(randomizeButton);
+
+ return widget;
+};
+
+// Cleans up any event listeners that were attached to the now hidden editor.
+CustomFields.FieldTurtle.prototype.dropdownDispose_ = function() {
+ for (var i = this.editorListeners_.length, listener;
+ listener = this.editorListeners_[i]; i--) {
+ Blockly.unbindEvent_(listener);
+ this.editorListeners_.pop();
+ }
+};
+
+// Updates the field's colour based on the colour of the block. Called by
+// block.applyColour.
+CustomFields.FieldTurtle.prototype.applyColour = function() {
+ if (!this.sourceBlock_) {
+ return;
+ }
+ // The getColourX functions are the best way to access the colours of a block.
+ var isShadow = this.sourceBlock_.isShadow();
+ var fillColour = isShadow ?
+ this.sourceBlock_.getColourShadow() : this.sourceBlock_.getColour();
+ // This is technically a package function, meaning it could change.
+ var borderColour = isShadow ? fillColour :
+ this.sourceBlock_.style.colourTertiary;
+
+ if (this.turtleGroup_) {
+ var child = this.turtleGroup_.firstChild;
+ while(child) {
+ // If it is a text node, continue.
+ if (child.nodeType == 3) {
+ child = child.nextSibling;
+ continue;
+ }
+ // Or if it is a non-turtle node, continue.
+ var className = child.getAttribute('class');
+ if (!className || className.indexOf('turtleBody') == -1) {
+ child = child.nextSibling;
+ continue;
+ }
+
+ child.style.fill = fillColour;
+ child.style.stroke = borderColour;
+ child = child.nextSibling;
+ }
+ }
+};
+
+// Saves the field's value to an XML node. Allows for custom serialization.
+CustomFields.FieldTurtle.prototype.toXml = function(fieldElement) {
+ // The default implementation of this function creates a node that looks
+ // like this: (where value is returned by getValue())
+ // value
+ // But this doesn't work for our field because it stores an /object/.
+
+ fieldElement.setAttribute('pattern', this.value_.pattern);
+ fieldElement.setAttribute('hat', this.value_.hat);
+ // The textContent usually contains whatever is closest to the field's
+ // 'value'. The textContent doesn't need to contain anything, but saving
+ // something to it does aid in readability.
+ fieldElement.textContent = this.value_.turtleName;
+
+ // Always return the element!
+ return fieldElement;
+};
+
+// Sets the field's value based on an XML node. Allows for custom
+// de-serialization.
+CustomFields.FieldTurtle.prototype.fromXml = function(fieldElement) {
+ // Because we had to do custom serialization for this field, we also need
+ // to do custom de-serialization.
+
+ var value = {};
+ value.pattern = fieldElement.getAttribute('pattern');
+ value.hat = fieldElement.getAttribute('hat');
+ value.turtleName = fieldElement.textContent;
+ // The end goal is to call this.setValue()
+ this.setValue(value);
+};
+
+// Blockly needs to know the JSON name of this field. Usually this is
+// registered at the bottom of the field class.
+Blockly.fieldRegistry.register('field_turtle', CustomFields.FieldTurtle);
+
+// Called by initView to create all of the SVGs. This is just used to keep
+// the code more organized.
+CustomFields.FieldTurtle.prototype.createView_ = function() {
+ this.movableGroup_ = Blockly.utils.dom.createSvgElement('g',
+ {
+ 'transform': 'translate(0,5)'
+ }, this.fieldGroup_);
+ var scaleGroup = Blockly.utils.dom.createSvgElement('g',
+ {
+ 'transform': 'scale(1.5)'
+ }, this.movableGroup_);
+ this.turtleGroup_ = Blockly.utils.dom.createSvgElement('g',
+ {
+ // Makes the smaller turtle graphic align with the hats.
+ 'class': 'turtleBody'
+ }, scaleGroup);
+ var tail = Blockly.utils.dom.createSvgElement('path',
+ {
+ 'class': 'turtleBody',
+ 'd': 'M7,27.5H0.188c3.959-2,6.547-2.708,8.776-5.237',
+ 'transform': 'translate(0.312 -12.994)'
+ }, this.turtleGroup_);
+ var legLeft = Blockly.utils.dom.createSvgElement('rect',
+ {
+ 'class': 'turtleBody',
+ 'x': 8.812,
+ 'y': 12.506,
+ 'width': 4,
+ 'height': 10
+ }, this.turtleGroup_);
+ var legRight = Blockly.utils.dom.createSvgElement('rect',
+ {
+ 'class': 'turtleBody',
+ 'x': 28.812,
+ 'y': 12.506,
+ 'width': 4,
+ 'height': 10
+ }, this.turtleGroup_);
+ var head = Blockly.utils.dom.createSvgElement('path',
+ {
+ 'class': 'turtleBody',
+ 'd': 'M47.991,17.884c0,1.92-2.144,3.477-4.788,3.477a6.262,6.262,0,0,1-2.212-.392c-0.2-.077-1.995,2.343-4.866,3.112a17.019,17.019,0,0,1-6.01.588c-4.413-.053-2.5-3.412-2.745-3.819-0.147-.242,2.232.144,6.126-0.376a7.392,7.392,0,0,0,4.919-2.588c0-1.92,2.144-3.477,4.788-3.477S47.991,15.964,47.991,17.884Z',
+ 'transform': 'translate(0.312 -12.994)'
+ }, this.turtleGroup_);
+ var smile = Blockly.utils.dom.createSvgElement('path',
+ {
+ 'class': 'turtleBody',
+ 'd': 'M42.223,18.668a3.614,3.614,0,0,0,2.728,2.38',
+ 'transform': 'translate(0.312 -12.994)'
+ }, this.turtleGroup_);
+ var sclera = Blockly.utils.dom.createSvgElement('ellipse',
+ {
+ 'cx': 43.435,
+ 'cy': 2.61,
+ 'rx': 2.247,
+ 'ry': 2.61,
+ 'fill': '#fff'
+ }, this.turtleGroup_);
+ var pupil = Blockly.utils.dom.createSvgElement('ellipse',
+ {
+ 'cx': 44.166,
+ 'cy': 3.403,
+ 'rx': 1.318,
+ 'ry': 1.62
+ }, this.turtleGroup_);
+ var shell = Blockly.utils.dom.createSvgElement('path',
+ {
+ 'class': 'turtleBody',
+ 'd': 'M33.4,27.5H7.193c0-6,5.866-13.021,13.1-13.021S33.4,21.5,33.4,27.5Z',
+ 'transform': 'translate(0.312 -12.994)'
+ }, this.turtleGroup_);
+ this.shellPattern_ = Blockly.utils.dom.createSvgElement('path',
+ {
+ 'd': 'M33.4,27.5H7.193c0-6,5.866-13.021,13.1-13.021S33.4,21.5,33.4,27.5Z',
+ 'transform': 'translate(0.312 -12.994)'
+ }, this.turtleGroup_);
+
+ this.stovepipe_ = Blockly.utils.dom.createSvgElement('image',
+ {
+ 'width': '50',
+ 'height': '18'
+ }, scaleGroup);
+ this.stovepipe_.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+ 'media/stovepipe.svg');
+ this.crown_ = Blockly.utils.dom.createSvgElement('image',
+ {
+ 'width': '50',
+ 'height': '15'
+ }, scaleGroup);
+ this.crown_.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+ 'media/crown.svg');
+ this.mask_ = Blockly.utils.dom.createSvgElement('image',
+ {
+ 'width': '50',
+ 'height': '14'
+ }, scaleGroup);
+ this.mask_.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+ 'media/mask.svg');
+ this.propeller_ = Blockly.utils.dom.createSvgElement('image',
+ {
+ 'width': '50',
+ 'height': '11'
+ }, scaleGroup);
+ this.propeller_.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+ 'media/propeller.svg');
+ this.fedora_ = Blockly.utils.dom.createSvgElement('image',
+ {
+ 'width': '50',
+ 'height': '12'
+ }, scaleGroup);
+ this.fedora_.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+ 'media/fedora.svg');
+
+ // Even if we're not going to display it right away, we want to create all
+ // of our DOM elements inside this function.
+ this.crown_.style.display = 'none';
+ this.mask_.style.display = 'none';
+ this.propeller_.style.display = 'none';
+ this.fedora_.style.display = 'none';
+
+ this.movableGroup_.appendChild(this.textElement_);
+ this.textElement_.setAttribute(
+ 'transform', 'translate(' + this.TEXT_OFFSET_X + ',20)');
+
+ this.defs_ = Blockly.utils.dom.createSvgElement('defs', {}, this.fieldGroup_);
+ this.polkadotPattern_ = Blockly.utils.dom.createSvgElement('pattern',
+ {
+ 'id': 'polkadots',
+ 'patternUnits': 'userSpaceOnUse',
+ 'width': 10,
+ 'height': 10
+ }, this.defs_);
+ this.polkadotGroup_ = Blockly.utils.dom.createSvgElement(
+ 'g', {}, this.polkadotPattern_);
+ Blockly.utils.dom.createSvgElement('circle',
+ {
+ 'cx': 2.5,
+ 'cy': 2.5,
+ 'r': 2.5,
+ 'fill': '#000',
+ 'fill-opacity': .3
+ }, this.polkadotGroup_);
+ Blockly.utils.dom.createSvgElement('circle',
+ {
+ 'cx': 7.5,
+ 'cy': 7.5,
+ 'r': 2.5,
+ 'fill': '#000',
+ 'fill-opacity': .3
+ }, this.polkadotGroup_);
+
+ this.hexagonPattern_ = Blockly.utils.dom.createSvgElement('pattern',
+ {
+ 'id': 'hexagons',
+ 'patternUnits': 'userSpaceOnUse',
+ 'width': 10,
+ 'height': 8.68,
+ 'patternTransform': 'translate(2) rotate(45)'
+ }, this.defs_);
+ Blockly.utils.dom.createSvgElement('polygon',
+ {
+ 'id': 'hex',
+ 'points': '4.96,4.4 7.46,5.84 7.46,8.74 4.96,10.18 2.46,8.74 2.46,5.84',
+ 'stroke': '#000',
+ 'stroke-opacity': .3,
+ 'fill-opacity': 0
+ }, this.hexagonPattern_);
+ var use = Blockly.utils.dom.createSvgElement('use',
+ {
+ 'x': 5,
+ }, this.hexagonPattern_);
+ use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#hex');
+ use = Blockly.utils.dom.createSvgElement('use',
+ {
+ 'x': -5,
+ }, this.hexagonPattern_);
+ use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#hex');
+ use = Blockly.utils.dom.createSvgElement('use',
+ {
+ 'x': 2.5,
+ 'y': -4.34
+ }, this.hexagonPattern_);
+ use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#hex');
+ use = Blockly.utils.dom.createSvgElement('use',
+ {
+ 'x': -2.5,
+ 'y': -4.34
+ }, this.hexagonPattern_);
+ use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#hex');
+
+ this.stripesPattern_ = Blockly.utils.dom.createSvgElement('pattern',
+ {
+ 'id': 'stripes',
+ 'patternUnits': 'userSpaceOnUse',
+ 'width': 5,
+ 'height': 10,
+ 'patternTransform': 'rotate(45)'
+ }, this.defs_);
+ Blockly.utils.dom.createSvgElement('line',
+ {
+ 'x1': 0,
+ 'y1': 0,
+ 'x2': 0,
+ 'y2': 10,
+ 'stroke-width': 4,
+ 'stroke': '#000',
+ 'stroke-opacity': .3
+ }, this.stripesPattern_);
+};
diff --git a/js/demos/custom-fields/turtle/icon.png b/js/demos/custom-fields/turtle/icon.png
new file mode 100644
index 0000000..3a7314a
Binary files /dev/null and b/js/demos/custom-fields/turtle/icon.png differ
diff --git a/js/demos/custom-fields/turtle/index.html b/js/demos/custom-fields/turtle/index.html
new file mode 100644
index 0000000..9bc4dfe
--- /dev/null
+++ b/js/demos/custom-fields/turtle/index.html
@@ -0,0 +1,175 @@
+
+
+
+
+ Blockly Demo: Custom Turtle Field
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/custom-fields/turtle/media/crown.svg b/js/demos/custom-fields/turtle/media/crown.svg
new file mode 100644
index 0000000..3eebccb
--- /dev/null
+++ b/js/demos/custom-fields/turtle/media/crown.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/js/demos/custom-fields/turtle/media/fedora.svg b/js/demos/custom-fields/turtle/media/fedora.svg
new file mode 100644
index 0000000..4a35449
--- /dev/null
+++ b/js/demos/custom-fields/turtle/media/fedora.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/js/demos/custom-fields/turtle/media/mask.svg b/js/demos/custom-fields/turtle/media/mask.svg
new file mode 100644
index 0000000..eb4fded
--- /dev/null
+++ b/js/demos/custom-fields/turtle/media/mask.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/js/demos/custom-fields/turtle/media/propeller.svg b/js/demos/custom-fields/turtle/media/propeller.svg
new file mode 100644
index 0000000..bf0a433
--- /dev/null
+++ b/js/demos/custom-fields/turtle/media/propeller.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/js/demos/custom-fields/turtle/media/stovepipe.svg b/js/demos/custom-fields/turtle/media/stovepipe.svg
new file mode 100644
index 0000000..6971ff7
--- /dev/null
+++ b/js/demos/custom-fields/turtle/media/stovepipe.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/js/demos/custom-fields/turtle/media/warning.svg b/js/demos/custom-fields/turtle/media/warning.svg
new file mode 100644
index 0000000..11136c1
--- /dev/null
+++ b/js/demos/custom-fields/turtle/media/warning.svg
@@ -0,0 +1,5 @@
+
diff --git a/js/demos/custom-fields/turtle/turtle.css b/js/demos/custom-fields/turtle/turtle.css
new file mode 100644
index 0000000..99ab0d4
--- /dev/null
+++ b/js/demos/custom-fields/turtle/turtle.css
@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.customFieldsTurtleWidget {
+ width: 150px;
+}
+
+.customFieldsTurtleWidget button {
+ border-radius: 4px;
+ border: none;
+ background-color: #fff;
+ opacity: .6;
+ color: #000;
+}
+
+.customFieldsTurtleWidget .table {
+ width: 100%;
+}
+
+.customFieldsTurtleWidget .row {
+ width: 100%;
+ display: flex;
+}
+
+.customFieldsTurtleWidget .arrow {
+ text-align: center;
+ padding: 0;
+ flex-grow: 0;
+}
+
+.customFieldsTurtleWidget .text {
+ height: 20px;
+ color: #fff;
+ flex-grow: 1;
+ text-align: center;
+}
+
+.customFieldsTurtleWidget .randomize {
+ width: 100%;
+}
+
+.blocklySvg .blocklyNonEditableText text,
+.blocklySvg .blocklyEditableText text {
+ fill: #000;
+}
diff --git a/js/demos/fixed/icon.png b/js/demos/fixed/icon.png
new file mode 100644
index 0000000..0a80ef9
Binary files /dev/null and b/js/demos/fixed/icon.png differ
diff --git a/js/demos/fixed/index.html b/js/demos/fixed/index.html
new file mode 100644
index 0000000..85d6346
--- /dev/null
+++ b/js/demos/fixed/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+ Blockly Demo: Fixed Blockly
+
+
+
+
+
+
+ Blockly Demo: Generating JavaScript
+
+
+
+
+
+
+
+ Blockly Demo: Graph
+
+
+
+
+
+
+
+
+
+
+
+ Blockly Demo: Headless
+
+
+
+
+
+
+
+
+
+
+ Blockly Demos
+
+
+
+
+
+
+
diff --git a/js/demos/interpreter/acorn_interpreter.js b/js/demos/interpreter/acorn_interpreter.js
new file mode 100644
index 0000000..249bc6c
--- /dev/null
+++ b/js/demos/interpreter/acorn_interpreter.js
@@ -0,0 +1,141 @@
+// Acorn: Copyright 2012 Marijn Haverbeke, MIT License
+var mod$$inline_58=function(a){function b(a){n=a||{};for(var b in Ua)Object.prototype.hasOwnProperty.call(n,b)||(n[b]=Ua[b]);wa=n.sourceFile||null}function c(a,b){var c=Ab(k,a);b+=" ("+c.line+":"+c.column+")";var d=new SyntaxError(b);d.pos=a;d.loc=c;d.raisedAt=f;throw d;}function d(a){function b(a){if(1==a.length)return c+="return str === "+JSON.stringify(a[0])+";";c+="switch(str){";for(var va=0;vaa)++f;else if(47===a)if(a=k.charCodeAt(f+1),42===a){var a=n.onComment&&n.locations&&new e,b=f,d=k.indexOf("*/",f+=2);-1===d&&c(f-2,"Unterminated comment");
+f=d+2;if(n.locations){Y.lastIndex=b;for(var g=void 0;(g=Y.exec(k))&&g.index=a?a=P(!0):(++f,a=g(xa)),a;case 40:return++f,g(I);case 41:return++f,g(E);case 59:return++f,g(J);case 44:return++f,g(L);case 91:return++f,g(ja);
+case 93:return++f,g(ka);case 123:return++f,g(Z);case 125:return++f,g(T);case 58:return++f,g(aa);case 63:return++f,g(ya);case 48:if(a=k.charCodeAt(f+1),120===a||88===a)return f+=2,a=B(16),null==a&&c(x+2,"Expected hexadecimal number"),la(k.charCodeAt(f))&&c(f,"Identifier directly after number"),a=g(ba,a);case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:return P(!1);case 34:case 39:a:{f++;for(var b="";;){f>=S&&c(x,"Unterminated string constant");var d=k.charCodeAt(f);if(d===a){++f;
+a=g(da,b);break a}if(92===d){var d=k.charCodeAt(++f),e=/^[0-7]+/.exec(k.slice(f,f+3));for(e&&(e=e[0]);e&&255=S)return g(pa);var b=k.charCodeAt(f);if(la(b)||92===b)return Ya();a=m(b);if(!1===a){b=String.fromCharCode(b);if("\\"===b||Za.test(b))return Ya();c(f,"Unexpected character '"+b+"'")}return a}function t(a,b){var c=k.slice(f,f+b);f+=b;g(a,c)}function K(){for(var a,b,d=f;;){f>=S&&c(d,
+"Unterminated regular expression");var e=k.charAt(f);na.test(e)&&c(d,"Unterminated regular expression");if(a)a=!1;else{if("["===e)b=!0;else if("]"===e&&b)b=!1;else if("/"===e&&!b)break;a="\\"===e}++f}a=k.slice(d,f);++f;(b=$a())&&!/^[gmsiy]*$/.test(b)&&c(d,"Invalid regexp flag");return g(Ba,new RegExp(a,b))}function B(a,b){for(var c=f,d=0,e=0,g=null==b?Infinity:b;e=h?h-48:Infinity;if(h>=a)break;++f;d=d*a+h}return f===c||null!=b&&
+f-c!==b?null:d}function P(a){var b=f,d=!1,e=48===k.charCodeAt(f);a||null!==B(10)||c(b,"Invalid number");46===k.charCodeAt(f)&&(++f,B(10),d=!0);a=k.charCodeAt(f);if(69===a||101===a)a=k.charCodeAt(++f),43!==a&&45!==a||++f,null===B(10)&&c(b,"Invalid number"),d=!0;la(k.charCodeAt(f))&&c(f,"Identifier directly after number");a=k.slice(b,f);var h;d?h=parseFloat(a):e&&1!==a.length?/[89]/.test(a)||C?c(b,"Invalid number"):h=parseInt(a,8):h=parseInt(a,10);return g(ba,h)}function ma(a){a=B(16,a);null===a&&c(x,
+"Bad character escape sequence");return a}function $a(){ca=!1;for(var a,b=!0,d=f;;){var e=k.charCodeAt(f);if(ab(e))ca&&(a+=k.charAt(f)),++f;else if(92===e){ca||(a=k.slice(d,f));ca=!0;117!=k.charCodeAt(++f)&&c(f,"Expecting Unicode escape sequence \\uXXXX");++f;var e=ma(4),g=String.fromCharCode(e);g||c(f-1,"Invalid Unicode escape");(b?la(e):ab(e))||c(f-4,"Invalid Unicode escape");a+=g}else break;b=!1}return ca?a:k.slice(d,f)}function Ya(){var a=$a(),b=V;ca||(Lb(a)?b=Ca[a]:(n.forbidReserved&&(3===n.ecmaVersion?
+Mb:Nb)(a)||C&&bb(a))&&c(x,"The keyword '"+a+"' is reserved"));return g(b,a)}function r(){Da=x;M=X;Ea=ia;z()}function Fa(a){C=a;f=M;if(n.locations)for(;fb){var e=Q(a);e.left=a;e.operator=H;a=p;r();e.right=Ra(Sa(),d,c);d=q(e,a===Va||a===Wa?"LogicalExpression":"BinaryExpression");return Ra(d,b,c)}return a}function Sa(){if(p.prefix){var a=y(),b=p.isUpdate;a.operator=H;R=a.prefix=!0;r();a.argument=
+Sa();b?ra(a.argument):C&&"delete"===a.operator&&"Identifier"===a.argument.type&&c(a.start,"Deleting local variable in strict mode");return q(a,b?"UpdateExpression":"UnaryExpression")}for(b=ha(ua());p.postfix&&!qa();)a=Q(b),a.operator=H,a.prefix=!1,a.argument=b,ra(b),r(),b=q(a,"UpdateExpression");return b}function ha(a,b){if(u(xa)){var c=Q(a);c.object=a;c.property=O(!0);c.computed=!1;return ha(q(c,"MemberExpression"),b)}return u(ja)?(c=Q(a),c.object=a,c.property=A(),c.computed=!0,v(ka),ha(q(c,"MemberExpression"),
+b)):!b&&u(I)?(c=Q(a),c.callee=a,c.arguments=Ta(E,!1),ha(q(c,"CallExpression"),b)):a}function ua(){switch(p){case ub:var a=y();r();return q(a,"ThisExpression");case V:return O();case ba:case da:case Ba:return a=y(),a.value=H,a.raw=k.slice(x,X),r(),q(a,"Literal");case vb:case wb:case xb:return a=y(),a.value=p.atomValue,a.raw=p.keyword,r(),q(a,"Literal");case I:var a=oa,b=x;r();var d=A();d.start=b;d.end=X;n.locations&&(d.loc.start=a,d.loc.end=ia);n.ranges&&(d.range=[b,X]);v(E);return d;case ja:return a=
+y(),r(),a.elements=Ta(ka,!0,!0),q(a,"ArrayExpression");case Z:a=y();b=!0;d=!1;a.properties=[];for(r();!u(T);){if(b)b=!1;else if(v(L),n.allowTrailingCommas&&u(T))break;var e={key:p===ba||p===da?ua():O(!0)},g=!1,h;u(aa)?(e.value=A(!0),h=e.kind="init"):5<=n.ecmaVersion&&"Identifier"===e.key.type&&("get"===e.key.name||"set"===e.key.name)?(g=d=!0,h=e.kind=e.key.name,e.key=p===ba||p===da?ua():O(!0),p!==I&&N(),e.value=Na(y(),!1)):N();if("Identifier"===e.key.type&&(C||d))for(var f=0;fd?a.id:a.params[d],(bb(e.name)||sa(e.name))&&c(e.start,"Defining '"+e.name+"' in strict mode"),0<=d)for(var g=0;ga?36===a:91>a?!0:97>a?95===a:123>a?!0:170<=a&&Za.test(String.fromCharCode(a))},ab=a.isIdentifierChar=function(a){return 48>a?36===a:58>a?!0:65>a?!1:91>a?!0:97>a?95===a:123>a?!0:170<=a&&Pb.test(String.fromCharCode(a))},ca,Ia={kind:"loop"},Ob={kind:"switch"}};
+"object"==typeof exports&&"object"==typeof module?mod$$inline_58(exports):"function"==typeof define&&define.amd?define(["exports"],mod$$inline_58):mod$$inline_58(this.acorn||(this.acorn={}));
+// JS-Interpreter: Copyright 2013 Google LLC, Apache 2.0
+function u(a,b){"string"===typeof a&&(a=acorn.parse(a,ha));this.ha=a;this.ib=b;this.ya=!1;this.V=[];this.Da=0;this.nb=Object.create(null);var c=/^step([A-Z]\w*)$/,d,e;for(e in this)"function"===typeof this[e]&&(d=e.match(c))&&(this.nb[d[1]]=this[e].bind(this));this.global=ia(this,this.ha,null);this.ha=acorn.parse(this.V.join("\n"),ha);this.V=void 0;ra(this,this.ha,void 0,void 0);c=new y(this.ha,this.global);c.done=!1;this.j=[c];this.lb();this.value=void 0;this.ha=a;c=new y(this.ha,this.global);c.done=
+!1;this.j.length=0;this.j[0]=c;this.Ra=c.node.constructor;this.stateStack=this.j}
+var ha={Ca:5},sa={configurable:!0,enumerable:!0,writable:!1},A={configurable:!0,enumerable:!1,writable:!0},E={configurable:!0,enumerable:!1,writable:!1},za={configurable:!1,enumerable:!0,writable:!0},Aa={STEP_ERROR:!0},Ba={SCOPE_REFERENCE:!0},Ha={VALUE_IN_DESCRIPTOR:!0},Ia={REGEXP_TIMEOUT:!0},Ja=[],Ka=null,La=["onmessage = function(e) {","var result;","var data = e.data;","switch (data[0]) {","case 'split':","result = data[1].split(data[2], data[3]);","break;","case 'match':","result = data[1].match(data[2]);",
+"break;","case 'search':","result = data[1].search(data[2]);","break;","case 'replace':","result = data[1].replace(data[2], data[3]);","break;","case 'exec':","var regexp = data[1];","regexp.lastIndex = data[2];","result = [regexp.exec(data[3]), data[1].lastIndex];","break;","default:","throw 'Unknown RegExp operation: ' + data[0];","}","postMessage(result);","};"];u.prototype.REGEXP_MODE=2;u.prototype.REGEXP_THREAD_TIMEOUT=1E3;
+u.prototype.sb=function(a){var b=this.j[0];if(!b||"Program"!==b.node.type)throw Error("Expecting original AST to start with a Program node.");"string"===typeof a&&(a=acorn.parse(a,ha));if(!a||"Program"!==a.type)throw Error("Expecting new AST to start with a Program node.");Ma(this,a,b.scope);for(var c=0,d;d=a.body[c];c++)b.node.body.push(d);b.done=!1};
+u.prototype.step=function(){var a=this.j,b=a[a.length-1];if(!b)return!1;var c=b.node,d=c.type;if("Program"===d&&b.done)return!1;if(this.ya)return!0;try{var e=this.nb[d](a,b,c)}catch(g){if(g!==Aa)throw g;}e&&a.push(e);return c.end?!0:this.step()};u.prototype.lb=function(){for(;!this.ya&&this.step(););return this.ya};
+function Na(a,b){a.setProperty(b,"NaN",NaN,sa);a.setProperty(b,"Infinity",Infinity,sa);a.setProperty(b,"undefined",void 0,sa);a.setProperty(b,"window",b,sa);a.setProperty(b,"this",b,sa);a.setProperty(b,"self",b);a.G=new Oa(null);a.I=new Oa(a.G);Pa(a,b);cb(a,b);b.oa=a.G;a.setProperty(b,"constructor",a.m,A);db(a,b);Eb(a,b);Fb(a,b);Gb(a,b);Hb(a,b);Ib(a,b);Jb(a,b);Kb(a,b);Lb(a,b);var c=a.b(function(){throw EvalError("Can't happen");},!1);c.eval=!0;a.setProperty(b,"eval",c);a.setProperty(b,"parseInt",
+a.b(parseInt,!1));a.setProperty(b,"parseFloat",a.b(parseFloat,!1));a.setProperty(b,"isNaN",a.b(isNaN,!1));a.setProperty(b,"isFinite",a.b(isFinite,!1));c=[[escape,"escape"],[unescape,"unescape"],[decodeURI,"decodeURI"],[decodeURIComponent,"decodeURIComponent"],[encodeURI,"encodeURI"],[encodeURIComponent,"encodeURIComponent"]];for(var d=0;d>> 0;","if (arguments.length > 1) T = thisArg;","k = 0;","while (k < len) {","if (k in O && !callbackfn.call(T, O[k], k, O)) return false;","k++;","}","return true;",
+"}","});","Object.defineProperty(Array.prototype, 'filter',","{configurable: true, writable: true, value:","function(fun/*, thisArg*/) {","if (this === void 0 || this === null || typeof fun !== 'function') throw TypeError();","var t = Object(this);","var len = t.length >>> 0;","var res = [];","var thisArg = arguments.length >= 2 ? arguments[1] : void 0;","for (var i = 0; i < len; i++) {","if (i in t) {","var val = t[i];","if (fun.call(thisArg, val, i, t)) res.push(val);","}","}","return res;","}",
+"});","Object.defineProperty(Array.prototype, 'forEach',","{configurable: true, writable: true, value:","function(callback, thisArg) {","if (!this || typeof callback !== 'function') throw TypeError();","var T, k;","var O = Object(this);","var len = O.length >>> 0;","if (arguments.length > 1) T = thisArg;","k = 0;","while (k < len) {","if (k in O) callback.call(T, O[k], k, O);","k++;","}","}","});","Object.defineProperty(Array.prototype, 'map',","{configurable: true, writable: true, value:","function(callback, thisArg) {",
+"if (!this || typeof callback !== 'function') new TypeError;","var T, A, k;","var O = Object(this);","var len = O.length >>> 0;","if (arguments.length > 1) T = thisArg;","A = new Array(len);","k = 0;","while (k < len) {","if (k in O) A[k] = callback.call(T, O[k], k, O);","k++;","}","return A;","}","});","Object.defineProperty(Array.prototype, 'reduce',","{configurable: true, writable: true, value:","function(callback /*, initialValue*/) {","if (!this || typeof callback !== 'function') throw TypeError();",
+"var t = Object(this), len = t.length >>> 0, k = 0, value;","if (arguments.length === 2) {","value = arguments[1];","} else {","while (k < len && !(k in t)) k++;","if (k >= len) {","throw TypeError('Reduce of empty array with no initial value');","}","value = t[k++];","}","for (; k < len; k++) {","if (k in t) value = callback(value, t[k], k, t);","}","return value;","}","});","Object.defineProperty(Array.prototype, 'reduceRight',","{configurable: true, writable: true, value:","function(callback /*, initialValue*/) {",
+"if (null === this || 'undefined' === typeof this || 'function' !== typeof callback) throw TypeError();","var t = Object(this), len = t.length >>> 0, k = len - 1, value;","if (arguments.length >= 2) {","value = arguments[1];","} else {","while (k >= 0 && !(k in t)) k--;","if (k < 0) {","throw TypeError('Reduce of empty array with no initial value');","}","value = t[k--];","}","for (; k >= 0; k--) {","if (k in t) value = callback(value, t[k], k, t);","}","return value;","}","});","Object.defineProperty(Array.prototype, 'some',",
+"{configurable: true, writable: true, value:","function(fun/*, thisArg*/) {","if (!this || typeof fun !== 'function') throw TypeError();","var t = Object(this);","var len = t.length >>> 0;","var thisArg = arguments.length >= 2 ? arguments[1] : void 0;","for (var i = 0; i < len; i++) {","if (i in t && fun.call(thisArg, t[i], i, t)) {","return true;","}","}","return false;","}","});","(function() {","var sort_ = Array.prototype.sort;","Array.prototype.sort = function(opt_comp) {","if (typeof opt_comp !== 'function') {",
+"return sort_.call(this);","}","for (var i = 0; i < this.length; i++) {","var changes = 0;","for (var j = 0; j < this.length - i - 1; j++) {","if (opt_comp(this[j], this[j + 1]) > 0) {","var swap = this[j];","this[j] = this[j + 1];","this[j + 1] = swap;","changes++;","}","}","if (!changes) break;","}","return this;","};","})();","Object.defineProperty(Array.prototype, 'toLocaleString',","{configurable: true, writable: true, value:","function() {","var out = [];","for (var i = 0; i < this.length; i++) {",
+"out[i] = (this[i] === null || this[i] === undefined) ? '' : this[i].toLocaleString();","}","return out.join(',');","}","});","")}
+function Eb(a,b){var c=function(e){e=String(e);return vc(a)?(this.data=e,this):e};a.A=a.b(c,!0);a.setProperty(b,"String",a.A);a.setProperty(a.A,"fromCharCode",a.b(String.fromCharCode,!1),A);c="charAt charCodeAt concat indexOf lastIndexOf slice substr substring toLocaleLowerCase toLocaleUpperCase toLowerCase toUpperCase trim".split(" ");for(var d=0;d= 0; i--) {","str = str.substring(0, subs[i][0]) + subs[i][2] + str.substring(subs[i][0] + subs[i][1]);",
+"}","} else {","var i = str.indexOf(substr);","if (i !== -1) {","var inject = newSubstr(str.substr(i, substr.length), i, str);","str = str.substring(0, i) + inject + str.substring(i + substr.length);","}","}","return str;","};","})();","")}function Fb(a,b){a.Wa=a.b(function(c){c=!!c;return vc(a)?(this.data=c,this):c},!0);a.setProperty(b,"Boolean",a.Wa)}
+function Gb(a,b){var c=function(e){e=Number(e);return vc(a)?(this.data=e,this):e};a.T=a.b(c,!0);a.setProperty(b,"Number",a.T);c=["MAX_VALUE","MIN_VALUE","NaN","NEGATIVE_INFINITY","POSITIVE_INFINITY"];for(var d=0;d>>0;return b===Number(a)?b:NaN}function Tc(a){var b=a>>>0;return String(b)===String(a)&&4294967295!==b?b:NaN}function Oa(a){this.O=Object.create(null);this.R=Object.create(null);this.a=Object.create(null);this.oa=a}p=Oa.prototype;p.oa=null;p.o=!0;p.K="Object";p.data=null;
+p.toString=function(){if("Array"===this.K){var a=Ja;a.push(this);try{for(var b=[],c=0;cb.charCodeAt(0)&&T(this,a,this.A)){var c=Tc(b);if(!isNaN(c)&&c>=":d>>=e;break;case ">>>=":d>>>=e;break;case "&=":d&=e;break;case "^=":d^=e;break;case "|=":d|=e;break;default:throw SyntaxError("Unknown assignment expression: "+c.operator);}if(c=Zc(this,b.ua,d))return b.ka=!0,b.Ua=d,bd(this,c,b.ua,d);a.pop();a[a.length-1].value=d}};
+u.prototype.stepBinaryExpression=function(a,b,c){if(!b.Y)return b.Y=!0,new y(c.left,b.scope);if(!b.sa)return b.sa=!0,b.$=b.value,new y(c.right,b.scope);a.pop();var d=b.$;b=b.value;switch(c.operator){case "==":c=d==b;break;case "!=":c=d!=b;break;case "===":c=d===b;break;case "!==":c=d!==b;break;case ">":c=d>b;break;case ">=":c=d>=b;break;case "<":c=d>":c=d>>b;break;case ">>>":c=d>>>b;break;case "in":b&&b.o||J(this,this.h,"'in' expects an object, not '"+b+"'");c=xc(this,b,d);break;case "instanceof":T(this,b,this.C)||J(this,this.h,"Right-hand side of instanceof is not an object");c=d.o?T(this,d,b):!1;break;default:throw SyntaxError("Unknown binary operator: "+c.operator);}a[a.length-1].value=c};
+u.prototype.stepBlockStatement=function(a,b,c){var d=b.s||0;if(c=c.body[d])return b.s=d+1,new y(c,b.scope);a.pop()};u.prototype.stepBreakStatement=function(a,b,c){$c(this,1,void 0,c.label&&c.label.name)};
+u.prototype.stepCallExpression=function(a,b,c){if(!b.ja){b.ja=1;var d=new y(c.callee,b.scope);d.ia=!0;return d}if(1===b.ja){b.ja=2;d=b.value;if(Array.isArray(d)){if(b.Z=Yc(this,d),d[0]===Ba?b.wb="eval"===d[1]:b.J=d[0],(d=b.Z)&&"object"===typeof d&&d.L)return d.L=!1,b.ja=1,ad(this,d,b.value)}else b.Z=d;b.B=[];b.s=0}d=b.Z;if(!b.Oa){0!==b.s&&b.B.push(b.value);if(c.arguments[b.s])return new y(c.arguments[b.s++],b.scope);if("NewExpression"===c.type){d.Fb&&J(this,this.h,d+" is not a constructor");var e=
+d.a.prototype;if("object"!==typeof e||null===e)e=this.G;b.J=this.g(e);b.isConstructor=!0}else void 0===b.J&&(b.J=b.scope.H?void 0:this.global);b.Oa=!0}if(b.Pa)a.pop(),a[a.length-1].value=b.isConstructor&&"object"!==typeof b.value?b.J:b.value;else{b.Pa=!0;d&&d.o||J(this,this.h,d+" is not a function");if(a=d.node){c=ia(this,a.body,d.ca);for(var g=0;gg?b.B[g]:void 0);e=this.g(this.ea);for(g=0;g
+
+
+
+ Blockly Demo: Asynchronous Execution with JS Interpreter
+
+
+
+
+
+
+
+
+
+ Redirecting...
+
+
+
+Redirecting to step execution jsinterpreter demo.
+
+
diff --git a/js/demos/interpreter/step-execution.html b/js/demos/interpreter/step-execution.html
new file mode 100644
index 0000000..f3f4119
--- /dev/null
+++ b/js/demos/interpreter/step-execution.html
@@ -0,0 +1,254 @@
+
+
+
+
+ Blockly Demo: Step Execution with JS Interpreter
+
+
+
+
+
+
+
+
+ Blockly Demo: Keyboard Navigation
+
+
+
+
+
+
+
+
+ Blockly Demo: Maximum Block Limit
+
+
+
+
+
+
+ Blockly Demo: Minimap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/minimap/minimap.js b/js/demos/minimap/minimap.js
new file mode 100644
index 0000000..05e00bb
--- /dev/null
+++ b/js/demos/minimap/minimap.js
@@ -0,0 +1,312 @@
+/**
+
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Minimap demo.
+ * @author karnpurohit@gmail.com (Karan Purohit)
+ */
+'use strict';
+
+/**
+ * Creating a separate namespace for minimap.
+ */
+var Minimap = {};
+
+/**
+ * Initialize the workspace and minimap.
+ * @param {!Workspace} workspace The main workspace of the user.
+ * @param {!Workspace} minimap The workspace that will be used as a minimap.
+ */
+Minimap.init = function(workspace, minimap) {
+ this.workspace = workspace;
+ this.minimap = minimap;
+
+ // Adding scroll callback functionality to vScroll and hScroll just for this demo.
+ // IMPORTANT: This should be changed when there is proper UI event handling
+ // API available and should be handled by workspace's event listeners.
+ this.workspace.scrollbar.vScroll.setHandlePosition = function(newPosition) {
+ this.handlePosition_ = newPosition;
+ this.svgHandle_.setAttribute(this.positionAttribute_, this.handlePosition_);
+
+ // Code above is same as the original setHandlePosition function in core/scrollbar.js.
+ // New code starts from here.
+
+ // Get the absolutePosition.
+ var absolutePosition = (this.handlePosition_ / this.ratio_);
+
+ // Firing the scroll change listener.
+ Minimap.onScrollChange(absolutePosition, this.horizontal_);
+ };
+
+ // Adding call back for horizontal scroll.
+ this.workspace.scrollbar.hScroll.setHandlePosition = function(newPosition) {
+ this.handlePosition_ = newPosition;
+ this.svgHandle_.setAttribute(this.positionAttribute_, this.handlePosition_);
+
+ // Code above is same as the original setHandlePosition function in core/scrollbar.js.
+ // New code starts from here.
+
+ // Get the absolutePosition.
+ var absolutePosition = (this.handlePosition_ / this.ratio_);
+
+ // Firing the scroll change listener.
+ Minimap.onScrollChange(absolutePosition, this.horizontal_);
+ };
+
+
+ // Required to stop a positive feedback loop when user clicks minimap
+ // and the scroll changes, which in turn may change minimap.
+ this.disableScrollChange = false;
+
+ // Listen to events on the main workspace.
+ this.workspace.addChangeListener(Minimap.mirrorEvent);
+
+ //Get rectangle bounding the minimap div.
+ this.rect = document.getElementById('mapDiv').getBoundingClientRect();
+
+ // Create a svg overlay on the top of mapDiv for the minimap.
+ this.svg = Blockly.utils.dom.createSvgElement('svg', {
+ 'xmlns': Blockly.utils.dom.SVG_NS,
+ 'xmlns:html': Blockly.utils.dom.HTML_NS,
+ 'xmlns:xlink': Blockly.utils.dom.XLINK_NS,
+ 'version': '1.1',
+ 'height': this.rect.bottom-this.rect.top,
+ 'width': this.rect.right-this.rect.left,
+ 'class': 'minimap',
+ }, document.getElementById('mapDiv'));
+ this.svg.style.top = this.rect.top + 'px';
+ this.svg.style.left = this.rect.left + 'px';
+
+ // Creating a rectangle in the minimap that represents current view.
+ Blockly.utils.dom.createSvgElement('rect', {
+ 'width': 100,
+ 'height': 100,
+ 'class': 'mapDragger'
+ }, this.svg);
+
+ // Rectangle in the minimap that represents current view.
+ this.mapDragger = this.svg.childNodes[0];
+
+ // Adding mouse events to the rectangle, to make it Draggable.
+ // Using Blockly.bindEvent_ to attach mouse/touch listeners.
+ Blockly.bindEvent_(this.mapDragger, 'mousedown', null, Minimap.mousedown);
+
+ //When the window change, we need to resize the minimap window.
+ window.addEventListener('resize', Minimap.repositionMinimap);
+
+ // Mouse up event for the minimap.
+ this.svg.addEventListener('mouseup', Minimap.updateMapDragger);
+
+ //Boolean to check whether I am dragging the surface or not.
+ this.isDragging = false;
+};
+
+Minimap.mousedown = function(e) {
+ // Using Blockly.bindEvent_ to attach mouse/touch listeners.
+ Minimap.mouseMoveBindData =
+ Blockly.bindEvent_(document, 'mousemove', null, Minimap.mousemove);
+ Minimap.mouseUpBindData =
+ Blockly.bindEvent_(document, 'mouseup', null, Minimap.mouseup);
+
+ Minimap.isDragging = true;
+ e.stopPropagation();
+};
+
+Minimap.mouseup = function(e) {
+ Minimap.isDragging = false;
+ // Removing listeners.
+ Blockly.unbindEvent_(Minimap.mouseUpBindData);
+ Blockly.unbindEvent_(Minimap.mouseMoveBindData);
+ Minimap.updateMapDragger(e);
+ e.stopPropagation();
+};
+
+Minimap.mousemove = function(e) {
+ if (Minimap.isDragging) {
+ Minimap.updateMapDragger(e);
+ e.stopPropagation();
+ }
+};
+
+/**
+ * Run non-UI events from the main workspace on the minimap.
+ * @param {!Event} event Event that triggered in the main workspace.
+ */
+Minimap.mirrorEvent = function(event) {
+ if (event.type == Blockly.Events.UI) {
+ return; // Don't mirror UI events.
+ }
+ // Convert event to JSON. This could then be transmitted across the net.
+ var json = event.toJson();
+ // Convert JSON back into an event, then execute it.
+ var minimapEvent = Blockly.Events.fromJson(json, Minimap.minimap);
+ minimapEvent.run(true);
+ Minimap.scaleMinimap();
+ Minimap.setDraggerHeight();
+ Minimap.setDraggerWidth();
+};
+
+/**
+ * Called when window is resized. Repositions the minimap overlay.
+ */
+Minimap.repositionMinimap = function() {
+ Minimap.rect = document.getElementById('mapDiv').getBoundingClientRect();
+ Minimap.svg.style.top = Minimap.rect.top + 'px';
+ Minimap.svg.style.left = Minimap.rect.left + 'px';
+};
+
+/**
+ * Updates the rectangle's height.
+ */
+Minimap.setDraggerHeight = function() {
+ var workspaceMetrics = Minimap.workspace.getMetrics();
+ var draggerHeight = (workspaceMetrics.viewHeight / Minimap.workspace.scale) *
+ Minimap.minimap.scale;
+ // It's zero when first block is placed.
+ if (draggerHeight == 0) {
+ return;
+ }
+ Minimap.mapDragger.setAttribute('height', draggerHeight);
+};
+
+/**
+ * Updates the rectangle's width.
+ */
+Minimap.setDraggerWidth = function() {
+ var workspaceMetrics = Minimap.workspace.getMetrics();
+ var draggerWidth = (workspaceMetrics.viewWidth / Minimap.workspace.scale) *
+ Minimap.minimap.scale;
+ // It's zero when first block is placed.
+ if (draggerWidth == 0) {
+ return;
+ }
+ Minimap.mapDragger.setAttribute('width', draggerWidth);
+};
+
+
+/**
+ * Updates the overall position of the viewport of the minimap by appropriately
+ * using translate functions.
+ */
+Minimap.scaleMinimap = function() {
+ var minimapBoundingBox = Minimap.minimap.getBlocksBoundingBox();
+ var workspaceBoundingBox = Minimap.workspace.getBlocksBoundingBox();
+ var workspaceMetrics = Minimap.workspace.getMetrics();
+ var minimapMetrics = Minimap.minimap.getMetrics();
+
+ // Scaling the mimimap such that all the blocks can be seen in the viewport.
+ // This padding is default because this is how to scrollbar(in main workspace)
+ // is implemented.
+ var topPadding = (workspaceMetrics.viewHeight) * Minimap.minimap.scale /
+ (2 * Minimap.workspace.scale);
+ var sidePadding = (workspaceMetrics.viewWidth) * Minimap.minimap.scale /
+ (2 * Minimap.workspace.scale);
+
+ // If actual padding is more than half view ports height,
+ // change it to actual padding.
+ if ((workspaceBoundingBox.y * Minimap.workspace.scale -
+ workspaceMetrics.contentTop) *
+ Minimap.minimap.scale / Minimap.workspace.scale > topPadding) {
+ topPadding = (workspaceBoundingBox.y * Minimap.workspace.scale -
+ workspaceMetrics.contentTop) *
+ Minimap.minimap.scale / Minimap.workspace.scale;
+ }
+
+ // If actual padding is more than half view ports height,
+ // change it to actual padding.
+ if ((workspaceBoundingBox.x * Minimap.workspace.scale -
+ workspaceMetrics.contentLeft) *
+ Minimap.minimap.scale / Minimap.workspace.scale > sidePadding) {
+ sidePadding = (workspaceBoundingBox.x * Minimap.workspace.scale -
+ workspaceMetrics.contentLeft) *
+ Minimap.minimap.scale / Minimap.workspace.scale;
+ }
+
+ var scalex = (minimapMetrics.viewWidth - 2 * sidePadding) /
+ minimapBoundingBox.width;
+ var scaley = (minimapMetrics.viewHeight - 2 * topPadding) /
+ minimapBoundingBox.height;
+ Minimap.minimap.setScale(Math.min(scalex, scaley));
+
+ // Translating the minimap.
+ Minimap.minimap.translate(
+ -minimapMetrics.contentLeft * Minimap.minimap.scale + sidePadding,
+ -minimapMetrics.contentTop * Minimap.minimap.scale + topPadding);
+};
+
+/**
+ * Handles the onclick event on the minimapBoundingBox.
+ * Changes mapDraggers position.
+ * @param {!Event} e Event from the mouse click.
+ */
+Minimap.updateMapDragger = function(e) {
+ var y = e.clientY;
+ var x = e.clientX;
+ var draggerHeight = Minimap.mapDragger.getAttribute('height');
+ var draggerWidth = Minimap.mapDragger.getAttribute('width');
+
+ var finalY = y - Minimap.rect.top - draggerHeight / 2;
+ var finalX = x - Minimap.rect.left - draggerWidth / 2;
+
+ var maxValidY = (Minimap.workspace.getMetrics().contentHeight -
+ Minimap.workspace.getMetrics().viewHeight) * Minimap.minimap.scale;
+ var maxValidX = (Minimap.workspace.getMetrics().contentWidth -
+ Minimap.workspace.getMetrics().viewWidth) * Minimap.minimap.scale;
+
+ if (y + draggerHeight / 2 > Minimap.rect.bottom) {
+ finalY = Minimap.rect.bottom - Minimap.rect.top - draggerHeight;
+ } else if (y < Minimap.rect.top + draggerHeight / 2) {
+ finalY = 0;
+ }
+
+ if (x + draggerWidth / 2 > Minimap.rect.right) {
+ finalX = Minimap.rect.right - Minimap.rect.left - draggerWidth;
+ } else if (x < Minimap.rect.left + draggerWidth / 2) {
+ finalX = 0;
+ }
+
+ // Do not go below lower bound of scrollbar.
+ if (finalY > maxValidY) {
+ finalY = maxValidY;
+ }
+ if (finalX > maxValidX) {
+ finalX = maxValidX;
+ }
+ Minimap.mapDragger.setAttribute('y', finalY);
+ Minimap.mapDragger.setAttribute('x', finalX);
+ // Required, otherwise creates a feedback loop.
+ Minimap.disableScrollChange = true;
+ Minimap.workspace.scrollbar.vScroll.set((finalY * Minimap.workspace.scale) /
+ Minimap.minimap.scale);
+ Minimap.workspace.scrollbar.hScroll.set((finalX * Minimap.workspace.scale) /
+ Minimap.minimap.scale);
+ Minimap.disableScrollChange = false;
+};
+
+/**
+ * Handles the onclick event on the minimapBoundingBox, parameters are passed by
+ * the event handler.
+ * @param {number} position This is the absolute position of the scrollbar.
+ * @param {boolean} horizontal Informs if the change event if for
+ * horizontal (true) or vertical (false) scrollbar.
+ */
+Minimap.onScrollChange = function(position, horizontal) {
+ if (!Minimap.disableScrollChange) {
+ Minimap.mapDragger.setAttribute(horizontal ? 'x' : 'y',
+ position * Minimap.minimap.scale / Minimap.workspace.scale);
+ }
+};
diff --git a/js/demos/mirror/icon.png b/js/demos/mirror/icon.png
new file mode 100644
index 0000000..45e2a9a
Binary files /dev/null and b/js/demos/mirror/icon.png differ
diff --git a/js/demos/mirror/index.html b/js/demos/mirror/index.html
new file mode 100644
index 0000000..84762f3
--- /dev/null
+++ b/js/demos/mirror/index.html
@@ -0,0 +1,81 @@
+
+
+
+
+ Blockly Demo: Mirrored Blockly
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/mobile/README.md b/js/demos/mobile/README.md
new file mode 100644
index 0000000..bab0960
--- /dev/null
+++ b/js/demos/mobile/README.md
@@ -0,0 +1,53 @@
+# Blockly on Mobile Devices
+
+This directory contains three examples of running the Blockly library on mobile
+devices. The `html/` directory is a example of configuring a webpage for touch
+devices, with a Blockly workspace that fills the screen.
+
+The `mobile/html/` is also the basis for the Android and iOS demos. Each native
+app copies this demo into the app's local resources, and required Blockly
+library files, and hosts them in an embedded WebView.
+
+Thus, developers can quickly iterate within the `mobile/html/` directory, and
+see changes in both the Android and iOS native apps.
+
+## Running the Mobile HTML Demo
+
+Before running the mobile HTML demo, you need to create some symbolic links
+in your local file system. Run the `mobile/html/ln_resources.sh` file from
+the `mobile/html/` directory. This mimicks the relative locations of the
+Blockly files seen when loading the page in a native app's embedded WebView.
+
+After doing this, opening `mobile/html/index.html` should open normally,
+filling the page with one large Blockly workspace.
+
+## The Android App
+
+### Build and Run
+
+Open the `demos/mobile/android/` directory in Android Studio. The project
+files in the directory should be ready to build and run the demo in an emulator
+or connected device.
+
+### Android Copy Tasks
+
+If you edit the `mobile/html/` demo to include new files, you will need to
+update the native app project files to also copy those files.
+
+In the Android project, two Gradle tasks are responsible for the copies.
+In `mobile/android/app/build.gradle`, the tasks `copyBlocklyHtmlFile` and
+`copyBlocklyMoreFiles` configure the copy actions.
+
+## The iOS App
+
+### Build and Run
+
+Open the `demos/mobile/iOS/` directory in XCode. The project files in the
+directory should be ready to build and run the demo in a simulator or connected
+device.
+
+### iOS Copy Script
+
+The XCode project call out to `mobile/ios/cp_resources.sh` to copy the required
+HTML and related files. If you've edited the `mobile/html/` demo to require new
+files, update this script to copy these files, too.
diff --git a/js/demos/mobile/android/.gitignore b/js/demos/mobile/android/.gitignore
new file mode 100644
index 0000000..3ba2b2b
--- /dev/null
+++ b/js/demos/mobile/android/.gitignore
@@ -0,0 +1,27 @@
+/build
+/captures
+/app/src/main/assets/blockly
+.settings
+.project
+
+# Local Settings
+local.properties
+
+# Project files
+*.komodoproject
+.gradle
+*.iml
+.idea
+
+# Build files
+*.pyc
+*.apk
+*.ap_
+*.class
+*.dex
+
+# OSX Files
+.DS_Store
+
+# Windows Files
+Thumb.db
diff --git a/js/demos/mobile/android/README.md b/js/demos/mobile/android/README.md
new file mode 100644
index 0000000..31f968f
--- /dev/null
+++ b/js/demos/mobile/android/README.md
@@ -0,0 +1,45 @@
+# Blockly in an Android WebView
+
+This code demonstrates how to get Blockly running in an Android app by
+embedding it in a WebView.
+
+### BlocklyWebViewFragment
+
+Most of the work is done within the fragment class `BlocklyWebViewFragment`.
+This fragment instantiates the WebView, loads the HTML
+(`assets/blockly/webview.html`, copied from `demos/mobile/html/index.html`),
+and provides a few helper methods.
+
+### Copying web assets with gradle
+
+This android project copies the necessary files from the main Blockly
+repository (i.e., parent directory). In `app/build.gradle`, note the
+`copyBlocklyHtmlFile` and `copyBlocklyMoreFiles` tasks.
+
+In your own project, the HTML and related files can be placed directly in the
+`assets/blockly` directory without the copy step. However, using the copy tasks
+simplifies the synchronization with an iOS app using the same files.
+
+### Loading Block Definitions and Generator functions
+
+The `webview.html` loads the block definitions and generator functions directly
+into the page, without support or coordination with the Android classes. This
+assumes the app will always utilize the same blocks. This does not mean all
+blocks are visible to the user all the time; that is controlled by the toolbox
+and workspace files. This should accommodate almost all applications.
+
+This does mean loading your own block definitions and generators will involve
+editing the HTML, adding you own `
+
+
+
+
+
+
+
+
+
+
element to inject into.
+ */
+FactoryUtils.injectCode = function(code, id) {
+ var pre = document.getElementById(id);
+ pre.textContent = code;
+ // Remove the 'prettyprinted' class, so that Prettify will recalculate.
+ pre.className = pre.className.replace('prettyprinted', '');
+ PR.prettyPrint();
+};
+
+/**
+ * Returns whether or not two blocks are the same based on their XML. Expects
+ * XML with a single child node that is a factory_base block, the XML found on
+ * Block Factory's main workspace.
+ * @param {!Element} blockXml1 An XML element with a single child node that
+ * is a factory_base block.
+ * @param {!Element} blockXml2 An XML element with a single child node that
+ * is a factory_base block.
+ * @return {boolean} Whether or not two blocks are the same based on their XML.
+ */
+FactoryUtils.sameBlockXml = function(blockXml1, blockXml2) {
+ // Each XML element should contain a single child element with a 'block' tag
+ if (blockXml1.tagName.toLowerCase() != 'xml' ||
+ blockXml2.tagName.toLowerCase() != 'xml') {
+ throw Error('Expected two XML elements, received elements with tag ' +
+ 'names: ' + blockXml1.tagName + ' and ' + blockXml2.tagName + '.');
+ }
+
+ // Compare the block elements directly. The XML tags may include other meta
+ // information we want to ignore.
+ var blockElement1 = blockXml1.getElementsByTagName('block')[0];
+ var blockElement2 = blockXml2.getElementsByTagName('block')[0];
+
+ if (!(blockElement1 && blockElement2)) {
+ throw Error('Could not get find block element in XML.');
+ }
+
+ var cleanBlockXml1 = FactoryUtils.cleanXml(blockElement1);
+ var cleanBlockXml2 = FactoryUtils.cleanXml(blockElement2);
+
+ var blockXmlText1 = Blockly.Xml.domToText(cleanBlockXml1);
+ var blockXmlText2 = Blockly.Xml.domToText(cleanBlockXml2);
+
+ // Strip white space.
+ blockXmlText1 = blockXmlText1.replace(/\s+/g, '');
+ blockXmlText2 = blockXmlText2.replace(/\s+/g, '');
+
+ // Return whether or not changes have been saved.
+ return blockXmlText1 == blockXmlText2;
+};
+
+/**
+ * Strips the provided xml of any attributes that don't describe the
+ * 'structure' of the blocks (i.e. block order, field values, etc).
+ * @param {Node} xml The xml to clean.
+ * @return {Node}
+ */
+FactoryUtils.cleanXml = function(xml) {
+ var newXml = xml.cloneNode(true);
+ var node = newXml;
+ while (node) {
+ // Things like text inside tags are still treated as nodes, but they
+ // don't have attributes (or the removeAttribute function) so we can
+ // skip removing attributes from them.
+ if (node.removeAttribute) {
+ node.removeAttribute('xmlns');
+ node.removeAttribute('x');
+ node.removeAttribute('y');
+ node.removeAttribute('id');
+ }
+
+ // Try to go down the tree
+ var nextNode = node.firstChild || node.nextSibling;
+ // If we can't go down, try to go back up the tree.
+ if (!nextNode) {
+ nextNode = node.parentNode;
+ while (nextNode) {
+ // We are valid again!
+ if (nextNode.nextSibling) {
+ nextNode = nextNode.nextSibling;
+ break;
+ }
+ // Try going up again. If parentNode is null that means we have
+ // reached the top, and we will break out of both loops.
+ nextNode = nextNode.parentNode;
+ }
+ }
+ node = nextNode;
+ }
+ return newXml;
+};
+
+/**
+ * Checks if a block has a variable field. Blocks with variable fields cannot
+ * be shadow blocks.
+ * @param {Blockly.Block} block The block to check if a variable field exists.
+ * @return {boolean} True if the block has a variable field, false otherwise.
+ */
+FactoryUtils.hasVariableField = function(block) {
+ if (!block) {
+ return false;
+ }
+ return block.getVars().length > 0;
+};
+
+/**
+ * Checks if a block is a procedures block. If procedures block names are
+ * ever updated or expanded, this function should be updated as well (no
+ * other known markers for procedure blocks beyond name).
+ * @param {Blockly.Block} block The block to check.
+ * @return {boolean} True if the block is a procedure block, false otherwise.
+ */
+FactoryUtils.isProcedureBlock = function(block) {
+ return block &&
+ (block.type == 'procedures_defnoreturn' ||
+ block.type == 'procedures_defreturn' ||
+ block.type == 'procedures_callnoreturn' ||
+ block.type == 'procedures_callreturn' ||
+ block.type == 'procedures_ifreturn');
+};
+
+/**
+ * Returns whether or not a modified block's changes has been saved to the
+ * Block Library.
+ * TODO(quachtina96): move into the Block Factory Controller once made.
+ * @param {!BlockLibraryController} blockLibraryController Block Library
+ * Controller storing custom blocks.
+ * @return {boolean} True if all changes made to the block have been saved to
+ * the given Block Library.
+ */
+FactoryUtils.savedBlockChanges = function(blockLibraryController) {
+ if (BlockFactory.isStarterBlock()) {
+ return true;
+ }
+ var blockType = blockLibraryController.getCurrentBlockType();
+ var currentXml = Blockly.Xml.workspaceToDom(BlockFactory.mainWorkspace);
+
+ if (blockLibraryController.has(blockType)) {
+ // Block is saved in block library.
+ var savedXml = blockLibraryController.getBlockXml(blockType);
+ return FactoryUtils.sameBlockXml(savedXml, currentXml);
+ }
+ return false;
+};
+
+/**
+ * Given the root block of the factory, return the tooltip specified by the user
+ * or the empty string if no tooltip is found.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @return {string} The tooltip for the generated block, or the empty string.
+ */
+FactoryUtils.getTooltipFromRootBlock_ = function(rootBlock) {
+ var tooltipBlock = rootBlock.getInputTargetBlock('TOOLTIP');
+ if (tooltipBlock && !tooltipBlock.disabled) {
+ return tooltipBlock.getFieldValue('TEXT');
+ }
+ return '';
+};
+
+/**
+ * Given the root block of the factory, return the help url specified by the
+ * user or the empty string if no tooltip is found.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @return {string} The help url for the generated block, or the empty string.
+ */
+FactoryUtils.getHelpUrlFromRootBlock_ = function(rootBlock) {
+ var helpUrlBlock = rootBlock.getInputTargetBlock('HELPURL');
+ if (helpUrlBlock && !helpUrlBlock.disabled) {
+ return helpUrlBlock.getFieldValue('TEXT');
+ }
+ return '';
+};
diff --git a/js/demos/blockfactory/icon.png b/js/demos/blockfactory/icon.png
new file mode 100644
index 0000000..2fcb25e
Binary files /dev/null and b/js/demos/blockfactory/icon.png differ
diff --git a/js/demos/blockfactory/index.html b/js/demos/blockfactory/index.html
new file mode 100644
index 0000000..0c1fc87
--- /dev/null
+++ b/js/demos/blockfactory/index.html
@@ -0,0 +1,763 @@
+
+
+
+
+
+ Blockly Demo: Blockly Developer Tools
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blockly >
+ Demos > Blockly Developer Tools
+
+
+
+ Block Factory
+ Block Exporter
+ Workspace Factory
+
+
+
+
+
+
+ First, select blocks from your block library by clicking on them. Then, use the Export Settings form to download starter code for selected blocks.
+
+
+
+
+
+
+ Export Settings
+
+
+
+
+
+ Export Preview
+
+ Block Definitions:
+
+
+
+ Generator Stubs:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Edit
+ Drag blocks into the workspace to configure the toolbox in your custom workspace.
+
+
+
+ Toolbox
+ Workspace
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
|
+
+
|
+ |||||
| + + + | +
+
|
+
element to inject into.
+ */
+function injectCode(code, id) {
+ var pre = document.getElementById(id);
+ pre.textContent = code;
+ // Remove the 'prettyprinted' class, so that Prettify will recalculate.
+ pre.className = pre.className.replace('prettyprinted', '');
+ PR.prettyPrint();
+}
+
+/**
+ * Return the uneditable container block that everything else attaches to.
+ * @return {Blockly.Block}
+ */
+function getRootBlock() {
+ var blocks = mainWorkspace.getTopBlocks(false);
+ for (var i = 0, block; block = blocks[i]; i++) {
+ if (block.type == 'factory_base') {
+ return block;
+ }
+ }
+ return null;
+}
+
+/**
+ * Disable the link button if the format is 'Manual', enable otherwise.
+ */
+function disableEnableLink() {
+ var linkButton = document.getElementById('linkButton');
+ linkButton.disabled = document.getElementById('format').value == 'Manual';
+}
+
+/**
+ * Initialize Blockly and layout. Called on page load.
+ */
+function init() {
+ if ('BlocklyStorage' in window) {
+ BlocklyStorage.HTTPREQUEST_ERROR =
+ 'There was a problem with the request.\n';
+ BlocklyStorage.LINK_ALERT =
+ 'Share your blocks with this link:\n\n%1';
+ BlocklyStorage.HASH_ERROR =
+ 'Sorry, "%1" doesn\'t correspond with any saved Blockly file.';
+ BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n'+
+ 'Perhaps it was created with a different version of Blockly?';
+ var linkButton = document.getElementById('linkButton');
+ linkButton.style.display = 'inline-block';
+ linkButton.addEventListener('click',
+ function() {BlocklyStorage.link(mainWorkspace);});
+ disableEnableLink();
+ }
+
+ document.getElementById('helpButton').addEventListener('click',
+ function() {
+ open('https://developers.google.com/blockly/guides/create-custom-blocks/block-factory',
+ 'BlockFactoryHelp');
+ });
+
+ var expandList = [
+ document.getElementById('blockly'),
+ document.getElementById('blocklyMask'),
+ document.getElementById('preview'),
+ document.getElementById('languagePre'),
+ document.getElementById('languageTA'),
+ document.getElementById('generatorPre')
+ ];
+ var onresize = function(e) {
+ for (var i = 0, expand; expand = expandList[i]; i++) {
+ expand.style.width = (expand.parentNode.offsetWidth - 2) + 'px';
+ expand.style.height = (expand.parentNode.offsetHeight - 2) + 'px';
+ }
+ };
+ onresize();
+ window.addEventListener('resize', onresize);
+
+ var toolbox = document.getElementById('toolbox');
+ mainWorkspace = Blockly.inject('blockly',
+ {collapse: false,
+ toolbox: toolbox,
+ media: '../../media/'});
+
+ // Create the root block.
+ if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+ BlocklyStorage.retrieveXml(window.location.hash.substring(1),
+ mainWorkspace);
+ } else {
+ var xml = 'Blockly Demo: Block Factory
+
+
+
+
+
+
+
+
+
+
+ Blockly > + Demos > Block Factory+ |
+
+
|
+ |||||
| + + + | +
+
|
+
+ Blockly > + Demos > + ... ++ |
+ + + | +||||||||||||||||
+
|
+ |||||||||||||||||
| + | +|||||||||||||||||
Music Maker
+Music Maker Configuration
+Music Maker
+Music Maker Configuration
+Tap any button to edit its code.
When complete, press Done.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ' +
+ (options.showCancel ? '': '') +
+ (options.showOkay ? '': '') +
+ '
';
+ dialogDiv.getElementsByClassName('customDialogTitle')[0]
+ .appendChild(document.createTextNode(title));
+ dialogDiv.getElementsByClassName('customDialogMessage')[0]
+ .appendChild(document.createTextNode(message));
+
+ var onOkay = function(event) {
+ CustomDialog.hide();
+ options.onOkay && options.onOkay();
+ event && event.stopPropagation();
+ };
+ var onCancel = function(event) {
+ CustomDialog.hide();
+ options.onCancel && options.onCancel();
+ event && event.stopPropagation();
+ };
+
+ var dialogInput = document.getElementById('customDialogInput');
+ CustomDialog.inputField = dialogInput;
+ if (dialogInput) {
+ dialogInput.focus();
+
+ dialogInput.onkeyup = function(event) {
+ if (event.keyCode == 13) {
+ // Process as OK when user hits enter.
+ onOkay();
+ return false;
+ } else if (event.keyCode == 27) {
+ // Process as cancel when user hits esc.
+ onCancel();
+ return false;
+ }
+ };
+ } else {
+ var okay = document.getElementById('customDialogOkay');
+ okay && okay.focus();
+ }
+
+ if (options.showOkay) {
+ document.getElementById('customDialogOkay')
+ .addEventListener('click', onOkay);
+ }
+ if (options.showCancel) {
+ document.getElementById('customDialogCancel')
+ .addEventListener('click', onCancel);
+ }
+
+ backdropDiv.onclick = onCancel;
+};
diff --git a/js/demos/custom-dialogs/icon.png b/js/demos/custom-dialogs/icon.png
new file mode 100644
index 0000000..ba49746
Binary files /dev/null and b/js/demos/custom-dialogs/icon.png differ
diff --git a/js/demos/custom-dialogs/index.html b/js/demos/custom-dialogs/index.html
new file mode 100644
index 0000000..9c17180
--- /dev/null
+++ b/js/demos/custom-dialogs/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+ Blockly > + Demos > Custom Dialog
+ +This is a simple demo of replacing modal browser dialogs with HTML. + To see how it works, see the source code in + custom-dialog.js +
+ +Try creating new variables, creating variables with names already in + use, or deleting multiple blocks on the workspace. +
+ + + + + + + + + + diff --git a/js/demos/custom-fields/icon.png b/js/demos/custom-fields/icon.png new file mode 100644 index 0000000..e69de29 diff --git a/js/demos/custom-fields/index.html b/js/demos/custom-fields/index.html new file mode 100644 index 0000000..9e681a8 --- /dev/null +++ b/js/demos/custom-fields/index.html @@ -0,0 +1,54 @@ + + + + +Blockly > + Demos > Custom Fields
+ +These demos are intended for developers who want creating custom block fields.
+ +
+
+ 
+
+ |
+ + + | +
+
+ 
+
+ |
+ + + | +
+ Blockly > + Demos > + Custom Fields > Pitch Field
+ + +This is a demo of creating custom block fields. In this case the field + is used to select a note pitch. +
+ +All of the custom field implementation is in + demos/custom-fields/pitch/field_pitch.js, including comments on each required + function. +
+ ++ + +
+ +| + + | ++ + | +
+ Blockly > + Demos > + Custom Fields > Turtle Field
+ + +This is a demo of creating custom block fields. In this case the field + is used to define a turtle. +
+ +All of the custom field implementation is in + demos/custom-fields/turtle/field_turtle.js, including comments on each required + function. +
+ +Click on the blocks' comment icons to learn what they are demonstrating. + Use the buttons below to see how the fields react to changes. +
+ ++ + + + + +
+ ++ + +
+ +| + + | ++ + | +
Blockly > + Demos > Fixed Blockly
+ +This is a simple demo of injecting Blockly into a fixed-sized 'div' element.
+ +→ More info on injecting fixed-sized Blockly…
+ + + + + + + + + diff --git a/js/demos/generator/icon.png b/js/demos/generator/icon.png new file mode 100644 index 0000000..c1a84f0 Binary files /dev/null and b/js/demos/generator/icon.png differ diff --git a/js/demos/generator/index.html b/js/demos/generator/index.html new file mode 100644 index 0000000..6f87443 --- /dev/null +++ b/js/demos/generator/index.html @@ -0,0 +1,148 @@ + + + + +Blockly > + Demos > Generating JavaScript
+ +This is a simple demo of generating code from blocks and running + the code in a sandboxed JavaScript interpreter.
+ +→ More info on Code Generators and Running JavaScript.
+ ++ + +
+ + + + + + + + + + + diff --git a/js/demos/graph/icon.png b/js/demos/graph/icon.png new file mode 100644 index 0000000..7828463 Binary files /dev/null and b/js/demos/graph/icon.png differ diff --git a/js/demos/graph/index.html b/js/demos/graph/index.html new file mode 100644 index 0000000..2e68c84 --- /dev/null +++ b/js/demos/graph/index.html @@ -0,0 +1,364 @@ + + + + +Blockly > + Demos > Graph
+ +This is a demo of giving instant feedback as blocks are changed.
+ +→ More info on Realtime generation…
+ +| + + | ++ + | +
+ 
+ ...
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/headless/icon.png b/js/demos/headless/icon.png
new file mode 100644
index 0000000..f431dc4
Binary files /dev/null and b/js/demos/headless/icon.png differ
diff --git a/js/demos/headless/index.html b/js/demos/headless/index.html
new file mode 100644
index 0000000..174537c
--- /dev/null
+++ b/js/demos/headless/index.html
@@ -0,0 +1,120 @@
+
+
+
+
+
+ ...
+ Blockly > + Demos > Headless
+ +This is a simple demo of generating Python code from XML with no graphics. + This might be useful for server-side code generation.
+ +| + + | ++ | ++ + | +
+
+
+
+
+
+
+
diff --git a/js/demos/index.html b/js/demos/index.html
new file mode 100644
index 0000000..1b22326
--- /dev/null
+++ b/js/demos/index.html
@@ -0,0 +1,248 @@
+
+
+
+
+ Blockly > Demos
+ +These demos are intended for developers who want to integrate Blockly with + their own applications.
+ +
+
+ 
+
+ |
+
+
+ Inject Blockly into a page as a fixed element.
+ |
+
+
+ 
+
+ |
+
+
+ Inject Blockly into a page as a resizable element.
+ |
+
+
+ 
+
+ |
+
+
+ Organize blocks into categories for the user.
+ |
+
+
+ 
+
+ |
+
+
+ Limit the total number of blocks allowed (for academic exercises).
+ |
+
+
+ 
+
+ |
+
+
+ Turn blocks into code and execute it.
+ |
+
+
+ 
+
+ |
+
+
+ Generate code from XML without graphics.
+ |
+
+
+ 
+
+ |
+
+ JS Interpreter
+
+
+ |
+
+
+ 
+
+ |
+
+
+ Instant updates when blocks are changed.
+ |
+
+
+ 
+
+ |
+
+
+ See what Blockly looks like in right-to-left mode (for Arabic and Hebrew).
+ |
+
+
+ 
+
+ |
+
+
+ Override Blockly browser dialogs with custom implementations.
+ |
+
+
+ 
+
+ |
+
+
+ Implement a custom field.
+ |
+
+
+ 
+
+ |
+
+
+ Save and load blocks with App Engine.
+ |
+
+
+ 
+
+ |
+
+
+ Two Blockly instances connected as master-slave.
+ |
+
+
+ 
+
+ |
+
+
+ Version of Blockly accessible to screen readers.
+ |
+
+
+ 
+
+ |
+
+
+ Using Closure Templates to support 35 languages.
+ |
+
+
+ 
+
+ |
+
+
+ Export a Blockly program into JavaScript, Python, PHP, Lua, Dart, or XML.
+ |
+
+
+ 
+
+ |
+
+
+ Build custom blocks and setup a toolbox using Blockly.
+ |
+
+
+ 
+
+ |
+
+
+ Demos keyboard navigation.
+ |
+
Blockly > + Demos > Asynchronous Execution with JS Interpreter
+ +This is a demo of executing code asychronously (e.g., waiting for delays or user input) using the JavaScript interpreter.
+ +→ More info on running code with JS Interpreter
+ ++ +
+ +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/interpreter/icon.png b/js/demos/interpreter/icon.png
new file mode 100644
index 0000000..b70d1b0
Binary files /dev/null and b/js/demos/interpreter/icon.png differ
diff --git a/js/demos/interpreter/index.html b/js/demos/interpreter/index.html
new file mode 100644
index 0000000..2245057
--- /dev/null
+++ b/js/demos/interpreter/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Blockly > + Demos > Step Execution with JS Interpreter
+ +This is a demo of executing code step-by-step with a sandboxed JavaScript interpreter.
+ +The generator's Blockly.JavaScript.STATEMENT_PREFIX is assigned 'highlightBlock(%1);\n',
+ where %1 is the block id. The call to highlightBlock() will highlight the identified block
+ and set the variable highlightPause to true.
"Parse JavaScript" will generate the code and load it into the interpreter. Then, each press of the
+ "Step JavaScript" button will run the interpreter one step until the highlightPause is true.
+ That is, until highlightBlock() has highlighted the block that will be executed on the next step.
→ More info on running code with JS Interpreter
+ ++ +
+ +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/interpreter/wait_block.js b/js/demos/interpreter/wait_block.js
new file mode 100644
index 0000000..4f49d8a
--- /dev/null
+++ b/js/demos/interpreter/wait_block.js
@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Example "wait" block that will pause the interpreter for a
+ * number of seconds. Because wait is a blocking behavior, such blocks will
+ * only work in interpreted environments.
+ *
+ * See https://neil.fraser.name/software/JS-Interpreter/docs.html
+ */
+Blockly.defineBlocksWithJsonArray([{
+ "type": "wait_seconds",
+ "message0": " wait %1 seconds",
+ "args0": [{
+ "type": "field_number",
+ "name": "SECONDS",
+ "min": 0,
+ "max": 600,
+ "value": 1
+ }],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "%{BKY_LOOPS_HUE}"
+}]);
+
+/**
+ * Generator for wait block creates call to new method
+ * waitForSeconds().
+ */
+Blockly.JavaScript['wait_seconds'] = function(block) {
+ var seconds = Number(block.getFieldValue('SECONDS'));
+ var code = 'waitForSeconds(' + seconds + ');\n';
+ return code;
+};
+
+/**
+ * Register the interpreter asynchronous function
+ * waitForSeconds().
+ */
+function initInterpreterWaitForSeconds(interpreter, scope) {
+ // Ensure function name does not conflict with variable names.
+ Blockly.JavaScript.addReservedWords('waitForSeconds');
+
+ var wrapper = interpreter.createAsyncFunction(
+ function(timeInSeconds, callback) {
+ // Delay the call to the callback.
+ setTimeout(callback, timeInSeconds * 1000);
+ });
+ interpreter.setProperty(scope, 'waitForSeconds', wrapper);
+}
\ No newline at end of file
diff --git a/js/demos/keyboard_nav/icon.png b/js/demos/keyboard_nav/icon.png
new file mode 100644
index 0000000..ff96ab5
Binary files /dev/null and b/js/demos/keyboard_nav/icon.png differ
diff --git a/js/demos/keyboard_nav/index.html b/js/demos/keyboard_nav/index.html
new file mode 100644
index 0000000..b131bbe
--- /dev/null
+++ b/js/demos/keyboard_nav/index.html
@@ -0,0 +1,577 @@
+
+
+
+
+ Blockly > + Demos > Keyboard Navigation
+ +Keyboard Navigation is our first step towards an accessible Blockly.
+ You can enter accessibility mode by shift clicking anywhere on the
+ workspace or on a block.
Some basic commands for moving around are below.
+ More complete documentation is still in progress.
+ Workspace Navigation
+ W: Previous block/field/input at the same level
+ A: Up one level (Field (or input) -> Block -> Input (or field) -> Block ->
+ Stack -> Workspace)
+ S: Next block/field/input at the same level
+ D: Down one level (Workspace -> Stack -> Block -> Input (or field) -> Block
+ -> Field (or input))
+ T: Will open the toolbox. Once in there you can moving around using the WASD keys. And insert a block by hitting Enter
+ X: While on a connection hit X to disconnect the block after the cursor
+
+ Pre Order Traversal
+ Feel free to just play around in accessibility mode or hit the button below to see the demo.
+ The demo uses preorder tree traversal
+ as an alternative way to navigate the blocks,
+ connections, and fields on the workspace.
+
+
+
+
+ Cursor
+ The cursor controls how the user navigates the blocks, inputs, fields and connections on a workspace.
+ This demo shows two different cursors:
+ Default Cursor: Allow the user to go to the previous, next, in or out location.
+ Basic Cursor: Using the pre order traversal allows the user to go to the next and previous location.
+
+ + + + + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/demos/keyboard_nav/line_cursor.js b/js/demos/keyboard_nav/line_cursor.js
new file mode 100644
index 0000000..d197e8a
--- /dev/null
+++ b/js/demos/keyboard_nav/line_cursor.js
@@ -0,0 +1,180 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview The class representing a line cursor.
+ * A line cursor traverses the blocks as if they were
+ * lines of code in a text editor.
+ * Previous and next go up and down lines. In and out go
+ * through the elements in a line.
+ * @author aschmiedt@google.com (Abby Schmiedt)
+ */
+'use strict';
+
+
+/**
+ * Class for a line cursor.
+ * This will allow the user to get to all nodes in the AST by hitting next or
+ * previous.
+ * @constructor
+ * @extends {Blockly.BasicCursor}
+ */
+Blockly.LineCursor = function() {
+ Blockly.LineCursor.superClass_.constructor.call(this);
+};
+Blockly.utils.object.inherits(Blockly.LineCursor, Blockly.BasicCursor);
+
+
+/**
+ * Find the next node in the pre order traversal.
+ * @return {Blockly.ASTNode} The next node, or null if the current node is
+ * not set or there is no next value.
+ * @override
+ */
+Blockly.LineCursor.prototype.next = function() {
+ var curNode = this.getCurNode();
+ if (!curNode) {
+ return null;
+ }
+ var newNode = this.getNextNode_(curNode, this.validLineNode_);
+
+ // Skip the input or next value if there is a connected block.
+ if (newNode && (newNode.getType() == Blockly.ASTNode.types.INPUT ||
+ newNode.getType() == Blockly.ASTNode.types.NEXT) &&
+ newNode.getLocation().targetBlock()) {
+ newNode = this.getNextNode_(newNode, this.validLineNode_);
+ }
+ if (newNode) {
+ this.setCurNode(newNode);
+ }
+ return newNode;
+};
+
+/**
+ * For a basic cursor we only have the ability to go next and previous, so
+ * in will also allow the user to get to the next node in the pre order traversal.
+ * @return {Blockly.ASTNode} The next node, or null if the current node is
+ * not set or there is no next value.
+ * @override
+ */
+Blockly.LineCursor.prototype.in = function() {
+ var curNode = this.getCurNode();
+ if (!curNode) {
+ return null;
+ }
+ var newNode = this.getNextNode_(curNode, this.validInLineNode_);
+
+ if (newNode) {
+ this.setCurNode(newNode);
+ }
+ return newNode;
+};
+
+/**
+ * Find the previous node in the pre order traversal.
+ * @return {Blockly.ASTNode} The previous node, or null if the current node
+ * is not set or there is no previous value.
+ * @override
+ */
+Blockly.LineCursor.prototype.prev = function() {
+ var curNode = this.getCurNode();
+ if (!curNode) {
+ return null;
+ }
+ var newNode = this.getPreviousNode_(curNode, this.validLineNode_);
+
+ if (newNode && (newNode.getType() == Blockly.ASTNode.types.INPUT ||
+ newNode.getType() == Blockly.ASTNode.types.NEXT) &&
+ newNode.getLocation().targetBlock()) {
+ newNode = this.getPreviousNode_(newNode, this.validLineNode_);
+ }
+
+ if (newNode) {
+ this.setCurNode(newNode);
+ }
+ return newNode;
+};
+
+/**
+ * For a basic cursor we only have the ability to go next and previou, so
+ * out will allow the user to get to the previous node in the pre order traversal.
+ * @return {Blockly.ASTNode} The previous node, or null if the current node is
+ * not set or there is no previous value.
+ * @override
+ */
+Blockly.LineCursor.prototype.out = function() {
+ var curNode = this.getCurNode();
+ if (!curNode) {
+ return null;
+ }
+ var newNode = this.getPreviousNode_(curNode, this.validInLineNode_);
+
+ if (newNode) {
+ this.setCurNode(newNode);
+ }
+ return newNode;
+
+};
+
+/**
+ * Meant to traverse by lines of code. This is blocks, statement inputs and
+ * next connections.
+ * @param {Blockly.ASTNode} node The AST node to check whether it is valid.
+ * @return {boolean} True if the node should be visited, false otherwise.
+ * @private
+ */
+Blockly.LineCursor.prototype.validLineNode_ = function(node) {
+ if (!node) {
+ return false;
+ }
+ var isValid = false;
+ var location = node.getLocation();
+ var type = node && node.getType();
+ if (type == Blockly.ASTNode.types.BLOCK) {
+ if (location.outputConnection === null) {
+ isValid = true;
+ }
+ } else if (type == Blockly.ASTNode.types.INPUT &&
+ location.type == Blockly.NEXT_STATEMENT) {
+ isValid = true;
+ } else if (type == Blockly.ASTNode.types.NEXT) {
+ isValid = true;
+ }
+ return isValid;
+};
+
+/**
+ * Meant to traverse within a block. These are fields and input values.
+ * @param {Blockly.ASTNode} node The AST node to check whether it is valid.
+ * @return {boolean} True if the node should be visited, false otherwise.
+ * @private
+ */
+Blockly.LineCursor.prototype.validInLineNode_ = function(node) {
+ if (!node) {
+ return false;
+ }
+ var isValid = false;
+ var location = node.getLocation();
+ var type = node && node.getType();
+ if (type == Blockly.ASTNode.types.FIELD) {
+ isValid = true;
+ } else if (type == Blockly.ASTNode.types.INPUT &&
+ location.type == Blockly.INPUT_VALUE) {
+ isValid = true;
+ }
+ return isValid;
+};
diff --git a/js/demos/maxBlocks/icon.png b/js/demos/maxBlocks/icon.png
new file mode 100644
index 0000000..b90c796
Binary files /dev/null and b/js/demos/maxBlocks/icon.png differ
diff --git a/js/demos/maxBlocks/index.html b/js/demos/maxBlocks/index.html
new file mode 100644
index 0000000..dc94f2f
--- /dev/null
+++ b/js/demos/maxBlocks/index.html
@@ -0,0 +1,100 @@
+
+
+
+
+ Blockly > + Demos > Maximum Block Limit
+ +This is a demo of Blockly which has been restricted to a maximum of + five blocks.
+ +You have block(s) left.
+ + + + + + + + + diff --git a/js/demos/minimap/icon.png b/js/demos/minimap/icon.png new file mode 100644 index 0000000..870caa0 Binary files /dev/null and b/js/demos/minimap/icon.png differ diff --git a/js/demos/minimap/index.html b/js/demos/minimap/index.html new file mode 100644 index 0000000..2f4e163 --- /dev/null +++ b/js/demos/minimap/index.html @@ -0,0 +1,91 @@ + + + + +Blockly > + Demos > Minimap
+ +This is a simple demo showing how a minimap can be implemented.
+ +| + + | ++ + | +
Blockly > + Demos > Mirrored Blockly
+ +This is a simple demo of a primary Blockly instance that controls a secondary Blockly instance with events. + Open the JavaScript console to see the event passing.
+ +→ More info on events…
+ +| + + | ++ + | +