diff --git a/accessible/README b/accessible/README
index 21c2e202..37ea6787 100644
--- a/accessible/README
+++ b/accessible/README
@@ -5,10 +5,8 @@ Google's Blockly is a web-based, visual programming editor that is accessible
to blind users.
The code in this directory renders a version of the Blockly toolbox and
-workspace that is fully keyboard-navigable, and compatible with JAWS/NVDA
-screen readers on Firefox for Windows. (We chose this combination because JAWS
-and NVDA are the most robust screen readers, and are compatible with many more
-aria tags than other screen readers.)
+workspace that is fully keyboard-navigable, and compatible with most screen
+readers.
In the future, Accessible Blockly may be modified to suit accessibility needs
other than visual impairments. Note that deaf users are expected to continue
@@ -27,15 +25,16 @@ the main component to be loaded. This will usually be blocklyApp.AppView, but
if you have another component that wraps it, use that one instead.
-Customizing the Toolbar
------------------------
+Customizing the Toolbar and Audio
+---------------------------------
The Accessible Blockly workspace comes with a customizable toolbar.
To customize the toolbar, you will need to declare an ACCESSIBLE_GLOBALS object
in the global scope that looks like this:
var ACCESSIBLE_GLOBALS = {
- toolbarButtonConfig: []
+ toolbarButtonConfig: [],
+ mediaPathPrefix: null
};
The value corresponding to 'toolbarButtonConfig' can be modified by adding
@@ -45,6 +44,9 @@ two keys:
- 'text' (the text to display on the button)
- 'action' (the function that gets run when the button is clicked)
+In addition, if you want audio to be played, set mediaPathPrefix to the
+location of the accessible/media folder.
+
Limitations
-----------
diff --git a/accessible/app.component.js b/accessible/app.component.js
index 763a13c1..e1c4329d 100644
--- a/accessible/app.component.js
+++ b/accessible/app.component.js
@@ -29,6 +29,9 @@ blocklyApp.AppView = ng.core
.Component({
selector: 'blockly-app',
template: `
+
+ Status: {{getStatusMessage()}}
+
@@ -46,19 +49,29 @@ blocklyApp.AppView = ng.core
+
+
+
+
-
+
`,
directives: [blocklyApp.ToolboxComponent, blocklyApp.WorkspaceComponent],
pipes: [blocklyApp.TranslatePipe],
- // The clipboard, tree and utils services are declared here, so that all
- // components in the application use the same instance of the service.
+ // All services are declared here, so that all components in the
+ // application use the same instance of the service.
// https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
providers: [
- blocklyApp.ClipboardService, blocklyApp.TreeService,
- blocklyApp.UtilsService]
+ blocklyApp.ClipboardService, blocklyApp.NotificationsService,
+ blocklyApp.TreeService, blocklyApp.UtilsService,
+ blocklyApp.AudioService]
})
.Class({
- constructor: [function() {}]
+ constructor: [blocklyApp.NotificationsService, function(_notificationsService) {
+ this.notificationsService = _notificationsService;
+ }],
+ getStatusMessage: function() {
+ return this.notificationsService.getStatusMessage();
+ }
});
diff --git a/accessible/audio.service.js b/accessible/audio.service.js
new file mode 100644
index 00000000..c358c083
--- /dev/null
+++ b/accessible/audio.service.js
@@ -0,0 +1,57 @@
+/**
+ * AccessibleBlockly
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 Angular2 Service that plays audio files.
+ * @author sll@google.com (Sean Lip)
+ */
+
+blocklyApp.AudioService = ng.core
+ .Class({
+ constructor: [function() {
+ // We do not play any audio unless a media path prefix is specified.
+ this.canPlayAudio = false;
+ if (ACCESSIBLE_GLOBALS.hasOwnProperty('mediaPathPrefix')) {
+ this.canPlayAudio = true;
+ var mediaPathPrefix = ACCESSIBLE_GLOBALS['mediaPathPrefix'];
+ this.AUDIO_PATHS_ = {
+ 'connect': mediaPathPrefix + 'click.mp3',
+ 'delete': mediaPathPrefix + 'delete.mp3'
+ };
+ }
+
+ // TODO(sll): Add ogg and mp3 fallbacks.
+ this.cachedAudioFiles_ = {};
+ }],
+ play_: function(audioId) {
+ if (this.canPlayAudio) {
+ if (!this.cachedAudioFiles_.hasOwnProperty(audioId)) {
+ this.cachedAudioFiles_[audioId] = new Audio(
+ this.AUDIO_PATHS_[audioId]);
+ }
+ this.cachedAudioFiles_[audioId].play();
+ }
+ },
+ playConnectSound: function() {
+ this.play_('connect');
+ },
+ playDeleteSound: function() {
+ this.play_('delete');
+ }
+ });
diff --git a/accessible/clipboard.service.js b/accessible/clipboard.service.js
index db65e2d9..05b0afe6 100644
--- a/accessible/clipboard.service.js
+++ b/accessible/clipboard.service.js
@@ -24,12 +24,19 @@
blocklyApp.ClipboardService = ng.core
.Class({
- constructor: function() {
+ constructor: [
+ blocklyApp.NotificationsService, blocklyApp.UtilsService,
+ blocklyApp.AudioService,
+ function(_notificationsService, _utilsService, _audioService) {
this.clipboardBlockXml_ = null;
- this.clipboardBlockSuperiorConnection_ = null;
+ this.clipboardBlockPreviousConnection_ = null;
this.clipboardBlockNextConnection_ = null;
+ this.clipboardBlockOutputConnection_ = null;
this.markedConnection_ = null;
- },
+ this.notificationsService = _notificationsService;
+ this.utilsService = _utilsService;
+ this.audioService = _audioService;
+ }],
areConnectionsCompatible_: function(blockConnection, connection) {
// Check that both connections exist, that it's the right kind of
// connection, and that the types match.
@@ -39,11 +46,20 @@ blocklyApp.ClipboardService = ng.core
connection.checkType_(blockConnection));
},
isCompatibleWithClipboard: function(connection) {
- var superiorConnection = this.clipboardBlockSuperiorConnection_;
+ var previousConnection = this.clipboardBlockPreviousConnection_;
var nextConnection = this.clipboardBlockNextConnection_;
+ var outputConnection = this.clipboardBlockOutputConnection_;
return Boolean(
- this.areConnectionsCompatible_(connection, superiorConnection) ||
- this.areConnectionsCompatible_(connection, nextConnection));
+ this.areConnectionsCompatible_(connection, previousConnection) ||
+ this.areConnectionsCompatible_(connection, nextConnection) ||
+ this.areConnectionsCompatible_(connection, outputConnection));
+ },
+ getMarkedConnectionBlock: function() {
+ if (!this.markedConnection_) {
+ return null;
+ } else {
+ return this.markedConnection_.getSourceBlock();
+ }
},
isMovableToMarkedConnection: function(block) {
// It should not be possible to move any ancestor of the block containing
@@ -52,7 +68,7 @@ blocklyApp.ClipboardService = ng.core
return false;
}
- var markedSpotAncestorBlock = this.markedConnection_.getSourceBlock();
+ var markedSpotAncestorBlock = this.getMarkedConnectionBlock();
while (markedSpotAncestorBlock) {
if (markedSpotAncestorBlock.id == block.id) {
return false;
@@ -82,24 +98,28 @@ blocklyApp.ClipboardService = ng.core
},
markConnection: function(connection) {
this.markedConnection_ = connection;
- alert(Blockly.Msg.MARKED_SPOT_MSG);
+ this.notificationsService.setStatusMessage(Blockly.Msg.MARKED_SPOT_MSG);
},
cut: function(block) {
- var blockSummary = block.toString();
- this.copy(block, false);
+ this.copy(block);
block.dispose(true);
- alert(Blockly.Msg.CUT_BLOCK_MSG + blockSummary);
},
- copy: function(block, announce) {
+ copy: function(block) {
this.clipboardBlockXml_ = Blockly.Xml.blockToDom(block);
- this.clipboardBlockSuperiorConnection_ = block.outputConnection ||
- block.previousConnection;
+ this.clipboardBlockPreviousConnection_ = block.previousConnection;
this.clipboardBlockNextConnection_ = block.nextConnection;
- if (announce) {
- alert(Blockly.Msg.COPIED_BLOCK_MSG + block.toString());
- }
+ this.clipboardBlockOutputConnection_ = block.outputConnection;
},
- pasteFromClipboard: function(connection) {
+ pasteFromClipboard: function(inputConnection) {
+ var connection = inputConnection;
+ // If the connection is a 'previousConnection' and that connection is
+ // already joined to something, use the 'nextConnection' of the
+ // previous block instead in order to do an insertion.
+ if (inputConnection.type == Blockly.PREVIOUS_STATEMENT &&
+ inputConnection.isConnected()) {
+ connection = inputConnection.targetConnection;
+ }
+
var reconstitutedBlock = Blockly.Xml.domToBlock(blocklyApp.workspace,
this.clipboardBlockXml_);
switch (connection.type) {
@@ -112,11 +132,13 @@ blocklyApp.ClipboardService = ng.core
default:
connection.connect(reconstitutedBlock.outputConnection);
}
- alert(
- Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG +
- reconstitutedBlock.toString());
+ this.audioService.playConnectSound();
+ this.notificationsService.setStatusMessage(
+ this.utilsService.getBlockDescription(reconstitutedBlock) + ' ' +
+ Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG);
+ return reconstitutedBlock.id;
},
- pasteToMarkedConnection: function(block, announce) {
+ pasteToMarkedConnection: function(block) {
var xml = Blockly.Xml.blockToDom(block);
var reconstitutedBlock = Blockly.Xml.domToBlock(
blocklyApp.workspace, xml);
@@ -132,6 +154,7 @@ blocklyApp.ClipboardService = ng.core
if (this.areConnectionsCompatible_(
this.markedConnection_, potentialConnections[i])) {
this.markedConnection_.connect(potentialConnections[i]);
+ this.audioService.playConnectSound();
connectionSuccessful = true;
break;
}
@@ -142,12 +165,8 @@ blocklyApp.ClipboardService = ng.core
return;
}
- if (announce) {
- alert(
- Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
- reconstitutedBlock.toString());
- }
-
this.markedConnection_ = null;
+
+ return reconstitutedBlock.id;
}
});
diff --git a/accessible/field.component.js b/accessible/field.component.js
index 9b1a3514..e10323db 100644
--- a/accessible/field.component.js
+++ b/accessible/field.component.js
@@ -28,40 +28,41 @@ blocklyApp.FieldComponent = ng.core
.Component({
selector: 'blockly-field',
template: `
-
0; i--) {
if (trees[i].id == treeId) {
- trees[i - 1].focus();
- return true;
+ return trees[i - 1].id;
}
}
- return false;
+ return null;
},
getActiveDescId: function(treeId) {
return this.activeDescendantIds_[treeId] || '';
@@ -107,13 +107,11 @@ blocklyApp.TreeService = ng.core
var activeDesc = document.getElementById(activeDescId);
if (activeDesc) {
activeDesc.classList.remove('blocklyActiveDescendant');
- activeDesc.setAttribute('aria-selected', 'false');
}
},
markActiveDesc_: function(activeDescId) {
var newActiveDesc = document.getElementById(activeDescId);
newActiveDesc.classList.add('blocklyActiveDescendant');
- newActiveDesc.setAttribute('aria-selected', 'true');
},
// Runs the given function while preserving the focus and active descendant
// for the given tree.
@@ -133,22 +131,68 @@ blocklyApp.TreeService = ng.core
document.getElementById(treeId).focus();
}, 0);
},
+ // This clears the active descendant of the given tree. It is used just
+ // before the tree is deleted.
+ clearActiveDesc: function(treeId) {
+ this.unmarkActiveDesc_(this.getActiveDescId(treeId));
+ delete this.activeDescendantIds_[treeId];
+ },
// Make a given node the active descendant of a given tree.
setActiveDesc: function(newActiveDescId, treeId) {
this.unmarkActiveDesc_(this.getActiveDescId(treeId));
this.markActiveDesc_(newActiveDescId);
this.activeDescendantIds_[treeId] = newActiveDescId;
+
+ // Scroll the new active desc into view, if needed. This has no effect
+ // for blind users, but is helpful for sighted onlookers.
+ var activeDescNode = document.getElementById(newActiveDescId);
+ var documentNode = document.body || document.documentElement;
+ if (activeDescNode.offsetTop < documentNode.scrollTop ||
+ activeDescNode.offsetTop >
+ documentNode.scrollTop + window.innerHeight) {
+ window.scrollTo(0, activeDescNode.offsetTop);
+ }
+ },
+ initActiveDesc: function(treeId) {
+ // Set the active desc to the first child in this tree.
+ var tree = document.getElementById(treeId);
+ this.setActiveDesc(this.getFirstChild(tree).id, treeId);
+ },
+ getTreeIdForBlock: function(blockId) {
+ // Walk up the DOM until we get to the root node of the tree.
+ var domNode = document.getElementById(blockId + 'blockRoot');
+ while (!domNode.classList.contains('blocklyTree')) {
+ domNode = domNode.parentNode;
+ }
+ return domNode.id;
+ },
+ focusOnBlock: function(blockId) {
+ // Set focus to the tree containing the given block, and set the active
+ // desc for this tree to the given block.
+ var domNode = document.getElementById(blockId + 'blockRoot');
+ // Walk up the DOM until we get to the root node of the tree.
+ while (!domNode.classList.contains('blocklyTree')) {
+ domNode = domNode.parentNode;
+ }
+ domNode.focus();
+
+ // We need to wait a while to set the active desc, because domNode takes
+ // a while to be given an ID if a new tree has just been created.
+ // TODO(sll): Make this more deterministic.
+ var that = this;
+ setTimeout(function() {
+ that.setActiveDesc(blockId + 'blockRoot', domNode.id);
+ }, 100);
},
onWorkspaceToolbarKeypress: function(e, treeId) {
if (e.keyCode == 9) {
// Tab key.
- if (e.shiftKey) {
- this.focusOnPreviousTree_(treeId);
- } else {
- this.focusOnNextTree_(treeId);
+ var destinationTreeId =
+ e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
+ this.getIdOfNextTree_(treeId);
+ if (destinationTreeId) {
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
}
- e.preventDefault();
- e.stopPropagation();
}
},
isButtonOrFieldNode_: function(node) {
@@ -181,42 +225,52 @@ blocklyApp.TreeService = ng.core
// in the first place.
console.error('Could not handle deletion of block.' + blockRootNode);
},
+ notifyUserAboutCurrentTree_: function(treeId) {
+ if (this.getToolboxTreeNode_().id == treeId) {
+ this.notificationsService.setStatusMessage('Now in toolbox.');
+ } else {
+ var workspaceTreeNodes = this.getWorkspaceTreeNodes_();
+ for (var i = 0; i < workspaceTreeNodes.length; i++) {
+ if (workspaceTreeNodes[i].id == treeId) {
+ this.notificationsService.setStatusMessage(
+ 'Now in workspace group ' + (i + 1) + ' of ' +
+ workspaceTreeNodes.length);
+ }
+ }
+ }
+ },
onKeypress: function(e, tree) {
var treeId = tree.id;
var activeDesc = document.getElementById(this.getActiveDescId(treeId));
if (!activeDesc) {
console.error('ERROR: no active descendant for current tree.');
-
- // TODO(sll): Generalize this to other trees (outside the workspace).
- var workspaceTreeNodes = this.getWorkspaceTreeNodes_();
- for (var i = 0; i < workspaceTreeNodes.length; i++) {
- if (workspaceTreeNodes[i].id == treeId) {
- // Set the active desc to the first child in this tree.
- this.setActiveDesc(
- this.getFirstChild(workspaceTreeNodes[i]).id, treeId);
- break;
- }
- }
+ this.initActiveDesc(treeId);
return;
}
- if (document.activeElement.tagName == 'INPUT') {
+ if (e.altKey || e.ctrlKey) {
+ // Do not intercept combinations such as Alt+Home.
+ return;
+ } else if (document.activeElement.tagName == 'INPUT') {
// For input fields, only Esc and Tab keystrokes are handled specially.
if (e.keyCode == 27 || e.keyCode == 9) {
// For Esc and Tab keys, the focus is removed from the input field.
this.focusOnCurrentTree_(treeId);
- // In addition, for Tab keys, the user tabs to the previous/next tree.
if (e.keyCode == 9) {
- if (e.shiftKey) {
- this.focusOnPreviousTree_(treeId);
- } else {
- this.focusOnNextTree_(treeId);
+ var destinationTreeId =
+ e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
+ this.getIdOfNextTree_(treeId);
+ if (destinationTreeId) {
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
}
}
- e.preventDefault();
- e.stopPropagation();
+ // Allow Tab keypresses to go through.
+ if (e.keyCode == 27) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
}
} else {
// Outside an input field, Enter, Tab and navigation keys are all
@@ -224,23 +278,41 @@ blocklyApp.TreeService = ng.core
if (e.keyCode == 13) {
// Enter key. The user wants to interact with a button or an input
// field.
- if (activeDesc.children.length == 1) {
- var child = activeDesc.children[0];
- if (child.tagName == 'BUTTON') {
- child.click();
- } else if (child.tagName == 'INPUT') {
- child.focus();
+ // Algorithm to find the field: do a DFS through the children until
+ // we find an INPUT or BUTTON element (in which case we use it).
+ // Truncate the search at child LI elements.
+ var dfsStack = Array.from(activeDesc.children);
+ while (dfsStack.length) {
+ var currentNode = dfsStack.shift();
+ if (currentNode.tagName == 'BUTTON') {
+ this.moveActiveDescToParent(treeId);
+ currentNode.click();
+ break;
+ } else if (currentNode.tagName == 'INPUT') {
+ currentNode.focus();
+ this.notificationsService.setStatusMessage(
+ 'Type a value, then press Escape to exit');
+ break;
+ } else if (currentNode.tagName == 'LI') {
+ continue;
+ }
+
+ if (currentNode.children) {
+ var reversedChildren = Array.from(currentNode.children).reverse();
+ reversedChildren.forEach(function(childNode) {
+ dfsStack.unshift(childNode);
+ });
}
}
} else if (e.keyCode == 9) {
- // Tab key.
- if (e.shiftKey) {
- this.focusOnPreviousTree_(treeId);
- } else {
- this.focusOnNextTree_(treeId);
+ // Tab key. Note that allowing the event to propagate through is
+ // intentional.
+ var destinationTreeId =
+ e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
+ this.getIdOfNextTree_(treeId);
+ if (destinationTreeId) {
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
}
- e.preventDefault();
- e.stopPropagation();
} else if (e.keyCode >= 35 && e.keyCode <= 40) {
// End, home, and arrow keys.
if (e.keyCode == 35) {
@@ -257,21 +329,15 @@ blocklyApp.TreeService = ng.core
}
} else if (e.keyCode == 37) {
// Left arrow key. Go up a level, if possible.
- var nextNode = activeDesc.parentNode;
- if (this.isButtonOrFieldNode_(activeDesc)) {
- nextNode = nextNode.parentNode;
- }
- while (nextNode && nextNode.tagName != 'LI') {
- nextNode = nextNode.parentNode;
- }
- if (nextNode) {
- this.setActiveDesc(nextNode.id, treeId);
- }
+ this.moveActiveDescToParent(treeId);
} else if (e.keyCode == 38) {
// Up arrow key. Go to the previous sibling, if possible.
var prevSibling = this.getPreviousSibling(activeDesc);
if (prevSibling) {
this.setActiveDesc(prevSibling.id, treeId);
+ } else {
+ this.notificationsService.setStatusMessage(
+ 'Reached top of list');
}
} else if (e.keyCode == 39) {
// Right arrow key. Go down a level, if possible.
@@ -284,6 +350,9 @@ blocklyApp.TreeService = ng.core
var nextSibling = this.getNextSibling(activeDesc);
if (nextSibling) {
this.setActiveDesc(nextSibling.id, treeId);
+ } else {
+ this.notificationsService.setStatusMessage(
+ 'Reached bottom of list');
}
}
@@ -292,6 +361,19 @@ blocklyApp.TreeService = ng.core
}
}
},
+ moveActiveDescToParent: function(treeId) {
+ var activeDesc = document.getElementById(this.getActiveDescId(treeId));
+ var nextNode = activeDesc.parentNode;
+ if (this.isButtonOrFieldNode_(activeDesc)) {
+ nextNode = nextNode.parentNode;
+ }
+ while (nextNode && nextNode.tagName != 'LI') {
+ nextNode = nextNode.parentNode;
+ }
+ if (nextNode) {
+ this.setActiveDesc(nextNode.id, treeId);
+ }
+ },
getFirstChild: function(element) {
if (!element) {
return element;
diff --git a/accessible/utils.service.js b/accessible/utils.service.js
index 5afd8969..3a7eef79 100644
--- a/accessible/utils.service.js
+++ b/accessible/utils.service.js
@@ -41,20 +41,17 @@ blocklyApp.UtilsService = ng.core
return idMap;
},
generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
- var attrValue = mainLabel + ' ' + secondLabel;
+ var attrValue = mainLabel + (secondLabel ? ' ' + secondLabel : '');
if (isDisabled) {
attrValue += ' blockly-disabled';
}
return attrValue;
},
getInputTypeLabel: function(connection) {
- // Returns an upper case string in the case of official input type names.
- // Returns the lower case string 'any' if any official input type qualifies.
- // The differentiation between upper and lower case signifies the difference
- // between an input type (BOOLEAN, LIST, etc) and the colloquial english term
- // 'any'.
+ // Returns the input type name, or 'any' if any official input type
+ // qualifies.
if (connection.check_) {
- return connection.check_.join(', ').toUpperCase();
+ return connection.check_.join(', ');
} else {
return Blockly.Msg.ANY;
}
@@ -65,5 +62,13 @@ blocklyApp.UtilsService = ng.core
} else {
return Blockly.Msg.VALUE;
}
+ },
+ getBlockDescription: function(block) {
+ // We use 'BLANK' instead of the default '?' so that the string is read
+ // out. (By default, screen readers tend to ignore punctuation.)
+ return block.toString(undefined, 'BLANK');
+ },
+ isWorkspaceEmpty: function() {
+ return !blocklyApp.workspace.topBlocks_.length;
}
});
diff --git a/accessible/workspace-tree.component.js b/accessible/workspace-tree.component.js
index 83dda119..04ec09b1 100644
--- a/accessible/workspace-tree.component.js
+++ b/accessible/workspace-tree.component.js
@@ -29,56 +29,61 @@ blocklyApp.WorkspaceTreeComponent = ng.core
selector: 'blockly-workspace-tree',
template: `
This is a simple demo of a version of Blockly designed for screen readers.
+
+ In Blockly, you can move blocks from the toolbox to the workspace and join
+ them to create programs. To navigate between components, use Tab or
+ Shift-Tab. When you're on a block, move right to access its submenus, and
+ move up or down to go to the next or previous block in the sequence.
+
+
@@ -58,7 +73,9 @@
var ACCESSIBLE_GLOBALS = {
// Additional buttons for the workspace toolbar that
// go before the "Clear Workspace" button.
- toolbarButtonConfig: []
+ toolbarButtonConfig: [],
+ // Prefix of path to sound files.
+ mediaPathPrefix: '../../accessible/media/'
};
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(blocklyApp.AppView);
@@ -72,7 +89,6 @@
-
@@ -83,7 +99,6 @@
-
@@ -326,9 +341,6 @@
-
-
-
diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html
index ce87f88f..449b9a5e 100644
--- a/demos/blockfactory/index.html
+++ b/demos/blockfactory/index.html
@@ -140,8 +140,8 @@
Language code:
diff --git a/demos/blocklyfactory/app_controller.js b/demos/blocklyfactory/app_controller.js
new file mode 100644
index 00000000..8a6ba837
--- /dev/null
+++ b/demos/blocklyfactory/app_controller.js
@@ -0,0 +1,635 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 AppController Class brings together the Block
+ * Factory, Block Library, and Block Exporter functionality into a single web
+ * app.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+goog.provide('AppController');
+
+goog.require('BlockFactory');
+goog.require('FactoryUtils');
+goog.require('BlockLibraryController');
+goog.require('BlockExporterController');
+goog.require('goog.dom.classlist');
+goog.require('goog.string');
+goog.require('goog.ui.PopupColorPicker');
+goog.require('goog.ui.ColorPicker');
+
+/**
+ * Controller for the Blockly Factory
+ * @constructor
+ */
+AppController = function() {
+ // Initialize Block Library
+ this.blockLibraryName = 'blockLibrary';
+ this.blockLibraryController =
+ new BlockLibraryController(this.blockLibraryName);
+ this.blockLibraryController.populateBlockLibrary();
+
+ // Construct Workspace Factory Controller.
+ this.workspaceFactoryController = new WorkspaceFactoryController
+ ('workspacefactory_toolbox', 'toolbox_blocks', 'preview_blocks');
+
+ // Initialize Block Exporter
+ this.exporter =
+ new BlockExporterController(this.blockLibraryController.storage);
+
+ // Map of tab type to the div element for the tab.
+ this.tabMap = Object.create(null);
+ this.tabMap[AppController.BLOCK_FACTORY] =
+ goog.dom.getElement('blockFactory_tab');
+ this.tabMap[AppController.WORKSPACE_FACTORY] =
+ goog.dom.getElement('workspaceFactory_tab');
+ this.tabMap[AppController.EXPORTER] =
+ goog.dom.getElement('blocklibraryExporter_tab');
+
+ // Selected tab.
+ this.selectedTab = AppController.BLOCK_FACTORY;
+};
+
+// Constant values representing the three tabs in the controller.
+AppController.BLOCK_FACTORY = 'BLOCK_FACTORY';
+AppController.WORKSPACE_FACTORY = 'WORKSPACE_FACTORY';
+AppController.EXPORTER = 'EXPORTER';
+
+/**
+ * Tied to the 'Import Block Library' button. Imports block library from file to
+ * Block Factory. Expects user to upload a single file of JSON mapping each
+ * block type to its xml text representation.
+ */
+AppController.prototype.importBlockLibraryFromFile = function() {
+ var self = this;
+ var files = document.getElementById('files');
+ // If the file list is empty, the user likely canceled in the dialog.
+ if (files.files.length > 0) {
+ // The input tag doesn't have the "multiple" attribute
+ // so the user can only choose 1 file.
+ var file = files.files[0];
+ var fileReader = new FileReader();
+
+ // Create a map of block type to xml text from the file when it has been
+ // read.
+ fileReader.addEventListener('load', function(event) {
+ var fileContents = event.target.result;
+ // Create empty object to hold the read block library information.
+ var blockXmlTextMap = Object.create(null);
+ try {
+ // Parse the file to get map of block type to xml text.
+ blockXmlTextMap = self.formatBlockLibraryForImport_(fileContents);
+ } catch (e) {
+ var message = 'Could not load your block library file.\n'
+ window.alert(message + '\nFile Name: ' + file.name);
+ return;
+ }
+
+ // Create a new block library storage object with inputted block library.
+ var blockLibStorage = new BlockLibraryStorage(
+ self.blockLibraryName, blockXmlTextMap);
+
+ // Update block library controller with the new block library
+ // storage.
+ self.blockLibraryController.setBlockLibraryStorage(blockLibStorage);
+ // Update the block library dropdown.
+ self.blockLibraryController.populateBlockLibrary();
+ // Update the exporter's block library storage.
+ self.exporter.setBlockLibraryStorage(blockLibStorage);
+ });
+ // Read the file.
+ fileReader.readAsText(file);
+ }
+};
+
+/**
+ * Tied to the 'Export Block Library' button. Exports block library to file that
+ * contains JSON mapping each block type to its xml text representation.
+ */
+AppController.prototype.exportBlockLibraryToFile = function() {
+ // Get map of block type to xml.
+ var blockLib = this.blockLibraryController.getBlockLibrary();
+ // Concatenate the xmls, each separated by a blank line.
+ var blockLibText = this.formatBlockLibraryForExport_(blockLib);
+ // Get file name.
+ var filename = prompt('Enter the file name under which to save your block ' +
+ 'library.');
+ // Download file if all necessary parameters are provided.
+ if (filename) {
+ FactoryUtils.createAndDownloadFile(blockLibText, filename, 'xml');
+ } else {
+ alert('Could not export Block Library without file name under which to ' +
+ 'save library.');
+ }
+};
+
+/**
+ * Converts an object mapping block type to xml to text file for output.
+ * @private
+ *
+ * @param {!Object} blockXmlMap - Object mapping block type to xml.
+ * @return {string} Xml text containing the block xmls.
+ */
+AppController.prototype.formatBlockLibraryForExport_ = function(blockXmlMap) {
+ // Create DOM for XML.
+ var xmlDom = goog.dom.createDom('xml', {
+ 'xmlns':"http://www.w3.org/1999/xhtml"
+ });
+
+ // Append each block node to xml dom.
+ for (var blockType in blockXmlMap) {
+ var blockXmlDom = Blockly.Xml.textToDom(blockXmlMap[blockType]);
+ var blockNode = blockXmlDom.firstElementChild;
+ xmlDom.appendChild(blockNode);
+ }
+
+ // Return the xml text.
+ return Blockly.Xml.domToText(xmlDom);
+};
+
+/**
+ * Converts imported block library to an object mapping block type to block xml.
+ * @private
+ *
+ * @param {string} xmlText - String representation of an xml with each block as
+ * a child node.
+ * @return {!Object} object mapping block type to xml text.
+ */
+AppController.prototype.formatBlockLibraryForImport_ = function(xmlText) {
+ var xmlDom = Blockly.Xml.textToDom(xmlText);
+
+ // Get array of xmls. Use an asterisk (*) instead of a tag name for the XPath
+ // selector, to match all elements at that level and get all factory_base
+ // blocks.
+ var blockNodes = goog.dom.xml.selectNodes(xmlDom, '*');
+
+ // Create empty map. The line below creates a truly empy object. It doesn't
+ // have built-in attributes/functions such as length or toString.
+ var blockXmlTextMap = Object.create(null);
+
+ // Populate map.
+ for (var i = 0, blockNode; blockNode = blockNodes[i]; i++) {
+
+ // Add outer xml tag to the block for proper injection in to the
+ // main workspace.
+ // Create DOM for XML.
+ var xmlDom = goog.dom.createDom('xml', {
+ 'xmlns':"http://www.w3.org/1999/xhtml"
+ });
+ xmlDom.appendChild(blockNode);
+
+ var xmlText = Blockly.Xml.domToText(xmlDom);
+ // All block types should be lowercase.
+ var blockType = this.getBlockTypeFromXml_(xmlText).toLowerCase();
+
+ blockXmlTextMap[blockType] = xmlText;
+ }
+
+ return blockXmlTextMap;
+};
+
+/**
+ * Extracts out block type from xml text, the kind that is saved in block
+ * library storage.
+ * @private
+ *
+ * @param {!string} xmlText - A block's xml text.
+ * @return {string} The block type that corresponds to the provided xml text.
+ */
+AppController.prototype.getBlockTypeFromXml_ = function(xmlText) {
+ var xmlDom = Blockly.Xml.textToDom(xmlText);
+ // Find factory base block.
+ var factoryBaseBlockXml = xmlDom.getElementsByTagName('block')[0];
+ // Get field elements from factory base.
+ var fields = factoryBaseBlockXml.getElementsByTagName('field');
+ for (var i = 0; i < fields.length; i++) {
+ // The field whose name is 'NAME' holds the block type as its value.
+ if (fields[i].getAttribute('name') == 'NAME') {
+ return fields[i].childNodes[0].nodeValue;
+ }
+ }
+};
+
+/**
+ * Updates the Block Factory tab to show selected block when user selects a
+ * different block in the block library dropdown. Tied to block library dropdown
+ * in index.html.
+ *
+ * @param {!Element} blockLibraryDropdown - HTML select element from which the
+ * user selects a block to work on.
+ */
+AppController.prototype.onSelectedBlockChanged
+ = function(blockLibraryDropdown) {
+ // Get selected block type.
+ var blockType = this.blockLibraryController.getSelectedBlockType(
+ blockLibraryDropdown);
+ // Update Block Factory page by showing the selected block.
+ this.blockLibraryController.openBlock(blockType);
+};
+
+/**
+ * Add click handlers to each tab to allow switching between the Block Factory,
+ * Workspace Factory, and Block Exporter tab.
+ *
+ * @param {!Object} tabMap - Map of tab name to div element that is the tab.
+ */
+AppController.prototype.addTabHandlers = function(tabMap) {
+ var self = this;
+ for (var tabName in tabMap) {
+ var tab = tabMap[tabName];
+ // Use an additional closure to correctly assign the tab callback.
+ tab.addEventListener('click', self.makeTabClickHandler_(tabName));
+ }
+};
+
+/**
+ * Set the selected tab.
+ * @private
+ *
+ * @param {string} tabName AppController.BLOCK_FACTORY,
+ * AppController.WORKSPACE_FACTORY, or AppController.EXPORTER
+ */
+AppController.prototype.setSelected_ = function(tabName) {
+ this.selectedTab = tabName;
+};
+
+/**
+ * Creates the tab click handler specific to the tab specified.
+ * @private
+ *
+ * @param {string} tabName AppController.BLOCK_FACTORY,
+ * AppController.WORKSPACE_FACTORY, or AppController.EXPORTER
+ * @return {Function} The tab click handler.
+ */
+AppController.prototype.makeTabClickHandler_ = function(tabName) {
+ var self = this;
+ return function() {
+ self.setSelected_(tabName);
+ self.onTab();
+ };
+};
+
+/**
+ * Called on each tab click. Hides and shows specific content based on which tab
+ * (Block Factory, Workspace Factory, or Exporter) is selected.
+ */
+AppController.prototype.onTab = function() {
+ // Get tab div elements.
+ var blockFactoryTab = this.tabMap[AppController.BLOCK_FACTORY];
+ var exporterTab = this.tabMap[AppController.EXPORTER];
+ var workspaceFactoryTab = this.tabMap[AppController.WORKSPACE_FACTORY];
+
+ // Turn selected tab on and other tabs off.
+ this.styleTabs_();
+
+ // Only enable key events in workspace factory if workspace factory tab is
+ // selected.
+ this.workspaceFactoryController.keyEventsEnabled =
+ this.selectedTab == AppController.WORKSPACE_FACTORY;
+
+ if (this.selectedTab == AppController.EXPORTER) {
+ // Show container of exporter.
+ FactoryUtils.show('blockLibraryExporter');
+ FactoryUtils.hide('workspaceFactoryContent');
+
+ // Need accurate state in order to know which blocks are used in workspace
+ // factory.
+ this.workspaceFactoryController.saveStateFromWorkspace();
+
+ // Update exporter's list of the types of blocks used in workspace factory.
+ var usedBlockTypes = this.workspaceFactoryController.getAllUsedBlockTypes();
+ this.exporter.setUsedBlockTypes(usedBlockTypes);
+
+ // Update exporter's block selector to reflect current block library.
+ this.exporter.updateSelector();
+
+ // Update the preview to reflect any changes made to the blocks.
+ this.exporter.updatePreview();
+
+ } else if (this.selectedTab == AppController.BLOCK_FACTORY) {
+ // Hide container of exporter.
+ FactoryUtils.hide('blockLibraryExporter');
+ FactoryUtils.hide('workspaceFactoryContent');
+
+ } else if (this.selectedTab == AppController.WORKSPACE_FACTORY) {
+ // Hide container of exporter.
+ FactoryUtils.hide('blockLibraryExporter');
+ // Show workspace factory container.
+ FactoryUtils.show('workspaceFactoryContent');
+ // Update block library category.
+ var categoryXml = this.exporter.getBlockLibraryCategory();
+ var blockTypes = this.blockLibraryController.getStoredBlockTypes();
+ this.workspaceFactoryController.setBlockLibCategory(categoryXml,
+ blockTypes);
+ }
+
+ // Resize to render workspaces' toolboxes correctly for all tabs.
+ window.dispatchEvent(new Event('resize'));
+};
+
+/**
+ * Called on each tab click. Styles the tabs to reflect which tab is selected.
+ * @private
+ */
+AppController.prototype.styleTabs_ = function() {
+ for (var tabName in this.tabMap) {
+ if (this.selectedTab == tabName) {
+ goog.dom.classlist.addRemove(this.tabMap[tabName], 'taboff', 'tabon');
+ } else {
+ goog.dom.classlist.addRemove(this.tabMap[tabName], 'tabon', 'taboff');
+ }
+ }
+};
+
+/**
+ * Assign button click handlers for the exporter.
+ */
+AppController.prototype.assignExporterClickHandlers = function() {
+ var self = this;
+ document.getElementById('button_setBlocks').addEventListener('click',
+ function() {
+ document.getElementById('dropdownDiv_setBlocks').classList.toggle("show");
+ });
+
+ document.getElementById('dropdown_addAllUsed').addEventListener('click',
+ function() {
+ self.exporter.selectUsedBlocks();
+ self.exporter.updatePreview();
+ document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+ });
+
+ document.getElementById('dropdown_clearSelected').addEventListener('click',
+ function() {
+ self.exporter.clearSelectedBlocks();
+ self.exporter.updatePreview();
+ document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+ });
+
+ document.getElementById('dropdown_addAllFromLib').addEventListener('click',
+ function() {
+ self.exporter.selectAllBlocks();
+ self.exporter.updatePreview();
+ document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+ });
+
+ // Export blocks when the user submits the export settings.
+ document.getElementById('exporterSubmitButton').addEventListener('click',
+ function() {
+ self.exporter.export();
+ });
+};
+
+/**
+ * Assign change listeners for the exporter. These allow for the dynamic update
+ * of the exporter preview.
+ */
+AppController.prototype.assignExporterChangeListeners = function() {
+ var self = this;
+
+ var blockDefCheck = document.getElementById('blockDefCheck');
+ var genStubCheck = document.getElementById('genStubCheck');
+
+ var blockDefs = document.getElementById('blockDefs');
+ var blockDefSettings = document.getElementById('blockDefSettings');
+ var blockDefElements = [blockDefs, blockDefSettings];
+
+ var genStubs = document.getElementById('genStubs');
+ var genStubSettings = document.getElementById('genStubSettings');
+ var genStubElements = [genStubs, genStubSettings];
+
+ // Select the block definitions and generator stubs on default.
+ blockDefCheck.checked = true;
+ genStubCheck.checked = true;
+
+ // Checking the block definitions checkbox displays preview of code to export.
+ document.getElementById('blockDefCheck').addEventListener('change',
+ function(e) {
+ self.ifCheckedDisplay(blockDefCheck, blockDefElements);
+ });
+
+ // Preview updates when user selects different block definition format.
+ document.getElementById('exportFormat').addEventListener('change',
+ function(e) {
+ self.exporter.updatePreview();
+ });
+
+ // Checking the generator stub checkbox displays preview of code to export.
+ document.getElementById('genStubCheck').addEventListener('change',
+ function(e) {
+ self.ifCheckedDisplay(genStubCheck, genStubElements);
+ });
+
+ // Preview updates when user selects different generator stub language.
+ document.getElementById('exportLanguage').addEventListener('change',
+ function(e) {
+ self.exporter.updatePreview();
+ });
+};
+
+/**
+ * If given checkbox is checked, display given elements. Otherwise, hide.
+ *
+ * @param {!Element} checkbox - Input element of type checkbox.
+ * @param {!Array.} elementArray - Array of elements to show when
+ * block is checked.
+ */
+AppController.prototype.ifCheckedDisplay = function(checkbox, elementArray) {
+ for (var i = 0, element; element = elementArray[i]; i++) {
+ element.style.display = checkbox.checked ? 'block' : 'none';
+ }
+};
+
+/**
+ * Assign button click handlers for the block library.
+ */
+AppController.prototype.assignLibraryClickHandlers = function() {
+ var self = this;
+ // Assign button click handlers for Block Library.
+ document.getElementById('saveToBlockLibraryButton').addEventListener('click',
+ function() {
+ self.blockLibraryController.saveToBlockLibrary();
+ });
+
+ document.getElementById('removeBlockFromLibraryButton').addEventListener(
+ 'click',
+ function() {
+ self.blockLibraryController.removeFromBlockLibrary();
+ });
+
+ document.getElementById('clearBlockLibraryButton').addEventListener('click',
+ function() {
+ self.blockLibraryController.clearBlockLibrary();
+ });
+
+ var dropdown = document.getElementById('blockLibraryDropdown');
+ dropdown.addEventListener('change',
+ function() {
+ self.onSelectedBlockChanged(dropdown);
+ });
+};
+
+/**
+ * Assign button click handlers for the block factory.
+ */
+AppController.prototype.assignBlockFactoryClickHandlers = function() {
+ var self = this;
+ // Assign button event handlers for Block Factory.
+ document.getElementById('localSaveButton')
+ .addEventListener('click', function() {
+ self.exportBlockLibraryToFile();
+ });
+
+ document.getElementById('helpButton').addEventListener('click',
+ function() {
+ open('https://developers.google.com/blockly/custom-blocks/block-factory',
+ 'BlockFactoryHelp');
+ });
+
+ document.getElementById('files').addEventListener('change',
+ function() {
+ // Warn user.
+ var replace = confirm('This imported block library will ' +
+ 'replace your current block library.');
+ if (replace) {
+ self.importBlockLibraryFromFile();
+ // Clear this so that the change event still fires even if the
+ // same file is chosen again. If the user re-imports a file, we
+ // want to reload the workspace with its contents.
+ this.value = null;
+ }
+ });
+
+ document.getElementById('createNewBlockButton')
+ .addEventListener('click', function() {
+ BlockFactory.showStarterBlock();
+ BlockLibraryView.selectDefaultOption('blockLibraryDropdown');
+ });
+};
+
+/**
+ * Add event listeners for the block factory.
+ */
+AppController.prototype.addBlockFactoryEventListeners = function() {
+ BlockFactory.mainWorkspace.addChangeListener(BlockFactory.updateLanguage);
+ document.getElementById('direction')
+ .addEventListener('change', BlockFactory.updatePreview);
+ document.getElementById('languageTA')
+ .addEventListener('change', BlockFactory.updatePreview);
+ document.getElementById('languageTA')
+ .addEventListener('keyup', BlockFactory.updatePreview);
+ document.getElementById('format')
+ .addEventListener('change', BlockFactory.formatChange);
+ document.getElementById('language')
+ .addEventListener('change', BlockFactory.updatePreview);
+};
+
+/**
+ * Handle Blockly Storage with App Engine.
+ */
+AppController.prototype.initializeBlocklyStorage = function() {
+ 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(BlockFactory.mainWorkspace);});
+ BlockFactory.disableEnableLink();
+};
+
+/**
+ * Handle resizing of elements.
+ */
+AppController.prototype.onresize = function(event) {
+ // Handle resizing of Block Factory elements.
+ var expandList = [
+ document.getElementById('blockly'),
+ document.getElementById('blocklyMask'),
+ document.getElementById('preview'),
+ document.getElementById('languagePre'),
+ document.getElementById('languageTA'),
+ document.getElementById('generatorPre')
+ ];
+ 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';
+ }
+
+ // Handle resize of Exporter block options.
+ this.exporter.view.centerPreviewBlocks();
+};
+
+/**
+ * Initialize Blockly and layout. Called on page load.
+ */
+AppController.prototype.init = function() {
+ // Handle Blockly Storage with App Engine
+ if ('BlocklyStorage' in window) {
+ this.initializeBlocklyStorage();
+ }
+
+ // Assign click handlers.
+ this.assignExporterClickHandlers();
+ this.assignLibraryClickHandlers();
+ this.assignBlockFactoryClickHandlers();
+
+ this.onresize();
+ self = this;
+ window.addEventListener('resize', function() {
+ self.onresize();
+ });
+
+ // Inject Block Factory Main Workspace.
+ var toolbox = document.getElementById('blockfactory_toolbox');
+ BlockFactory.mainWorkspace = Blockly.inject('blockly',
+ {collapse: false,
+ toolbox: toolbox,
+ media: '../../media/'});
+
+ // Add tab handlers for switching between Block Factory and Block Exporter.
+ this.addTabHandlers(this.tabMap);
+
+ // Assign exporter change listeners.
+ this.assignExporterChangeListeners();
+
+ // Create the root block on Block Factory main workspace.
+ if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+ BlocklyStorage.retrieveXml(window.location.hash.substring(1),
+ BlockFactory.mainWorkspace);
+ } else {
+ BlockFactory.showStarterBlock();
+ }
+ BlockFactory.mainWorkspace.clearUndo();
+
+ // Add Block Factory event listeners.
+ this.addBlockFactoryEventListeners();
+
+ // Workspace Factory init.
+ WorkspaceFactoryInit.initWorkspaceFactory(this.workspaceFactoryController);
+};
+
+
diff --git a/demos/blocklyfactory/block_exporter_controller.js b/demos/blocklyfactory/block_exporter_controller.js
new file mode 100644
index 00000000..e0c192fb
--- /dev/null
+++ b/demos/blocklyfactory/block_exporter_controller.js
@@ -0,0 +1,335 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 the Block Exporter Controller class. Allows
+ * users to export block definitions and generator stubs of their saved blocks
+ * easily using a visual interface. Depends on Block Exporter View and Block
+ * Exporter Tools classes. Interacts with Export Settings in the index.html.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockExporterController');
+
+goog.require('FactoryUtils');
+goog.require('StandardCategories');
+goog.require('BlockExporterView');
+goog.require('BlockExporterTools');
+goog.require('goog.dom.xml');
+
+/**
+ * BlockExporter Controller Class
+ * @constructor
+ *
+ * @param {!BlockLibrary.Storage} blockLibStorage - Block Library Storage.
+ */
+BlockExporterController = function(blockLibStorage) {
+ // BlockLibrary.Storage object containing user's saved blocks.
+ this.blockLibStorage = blockLibStorage;
+ // Utils for generating code to export.
+ this.tools = new BlockExporterTools();
+ // The ID of the block selector, a div element that will be populated with the
+ // block options.
+ this.selectorID = 'blockSelector';
+ // Map of block types stored in block library to their corresponding Block
+ // Option objects.
+ this.blockOptions = this.tools.createBlockSelectorFromLib(
+ this.blockLibStorage, this.selectorID);
+ // View provides the block selector and export settings UI.
+ this.view = new BlockExporterView(this.blockOptions);
+};
+
+/**
+ * Set the block library storage object from which exporter exports.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ * that stores the blocks.
+ */
+BlockExporterController.prototype.setBlockLibraryStorage =
+ function(blockLibStorage) {
+ this.blockLibStorage = blockLibStorage;
+};
+
+/**
+ * Get the block library storage object from which exporter exports.
+ *
+ * @return {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ * that stores the blocks.
+ */
+BlockExporterController.prototype.getBlockLibraryStorage =
+ function(blockLibStorage) {
+ return this.blockLibStorage;
+};
+
+/**
+ * Get selected blocks from block selector, pulls info from the Export
+ * Settings form in Block Exporter, and downloads code accordingly.
+ */
+BlockExporterController.prototype.export = function() {
+ // Get selected blocks' information.
+ var blockTypes = this.view.getSelectedBlockTypes();
+ var blockXmlMap = this.blockLibStorage.getBlockXmlMap(blockTypes);
+
+ // Pull block definition(s) settings from the Export Settings form.
+ var wantBlockDef = document.getElementById('blockDefCheck').checked;
+ var definitionFormat = document.getElementById('exportFormat').value;
+ var blockDef_filename = document.getElementById('blockDef_filename').value;
+
+ // Pull block generator stub(s) settings from the Export Settings form.
+ var wantGenStub = document.getElementById('genStubCheck').checked;
+ var language = document.getElementById('exportLanguage').value;
+ var generatorStub_filename = document.getElementById(
+ 'generatorStub_filename').value;
+
+ if (wantBlockDef) {
+ // User wants to export selected blocks' definitions.
+ if (!blockDef_filename) {
+ // User needs to enter filename.
+ alert('Please enter a filename for your block definition(s) download.');
+ } else {
+ // Get block definition code in the selected format for the blocks.
+ var blockDefs = this.tools.getBlockDefinitions(blockXmlMap,
+ definitionFormat);
+ // Download the file, using .js file ending for JSON or Javascript.
+ FactoryUtils.createAndDownloadFile(
+ blockDefs, blockDef_filename, 'javascript');
+ }
+ }
+
+ if (wantGenStub) {
+ // User wants to export selected blocks' generator stubs.
+ if (!generatorStub_filename) {
+ // User needs to enter filename.
+ alert('Please enter a filename for your generator stub(s) download.');
+ } else {
+ // Get generator stub code in the selected language for the blocks.
+ var genStubs = this.tools.getGeneratorCode(blockXmlMap,
+ language);
+ // Get the correct file extension.
+ if (language == 'JavaScript') {
+ var fileType = 'javascript';
+ } else {
+ var fileType = 'plain';
+ }
+ // Download the file.
+ FactoryUtils.createAndDownloadFile(
+ genStubs, generatorStub_filename, fileType);
+ }
+ }
+
+};
+
+/**
+ * Update the Exporter's block selector with block options generated from blocks
+ * stored in block library.
+ */
+BlockExporterController.prototype.updateSelector = function() {
+ // Get previously selected block types.
+ var oldSelectedTypes = this.view.getSelectedBlockTypes();
+
+ // Generate options from block library and assign to view.
+ this.blockOptions = this.tools.createBlockSelectorFromLib(
+ this.blockLibStorage, this.selectorID);
+ this.addBlockOptionSelectHandlers();
+ this.view.setBlockOptions(this.blockOptions);
+
+ // Select all previously selected blocks.
+ for (var i = 0, blockType; blockType = oldSelectedTypes[i]; i++) {
+ if (this.blockOptions[blockType]) {
+ this.view.select(blockType);
+ }
+ }
+
+ this.view.listSelectedBlocks();
+};
+
+/**
+ * Tied to the 'Clear Selected Blocks' button in the Block Exporter.
+ * Deselects all blocks in the selector and updates text accordingly.
+ */
+BlockExporterController.prototype.clearSelectedBlocks = function() {
+ this.view.deselectAllBlocks();
+ this.view.listSelectedBlocks();
+};
+
+/**
+ * Tied to the 'All Stored' button in the Block Exporter 'Select' dropdown.
+ * Selects all blocks stored in block library for export.
+ */
+BlockExporterController.prototype.selectAllBlocks = function() {
+ var allBlockTypes = this.blockLibStorage.getBlockTypes();
+ for (var i = 0, blockType; blockType = allBlockTypes[i]; i++) {
+ this.view.select(blockType);
+ }
+ this.view.listSelectedBlocks();
+};
+
+/**
+ * Returns the category xml containing all blocks in the block library.
+ *
+ * @return {Element} Xml for a category to be used in toolbox.
+ */
+BlockExporterController.prototype.getBlockLibraryCategory = function() {
+ return this.tools.generateCategoryFromBlockLib(this.blockLibStorage);
+};
+
+/**
+ * Add select handlers to each block option to update the view and the selected
+ * blocks accordingly.
+ */
+BlockExporterController.prototype.addBlockOptionSelectHandlers = function() {
+ var self = this;
+
+ // Click handler for a block option. Toggles whether or not it's selected and
+ // updates helper text accordingly.
+ var updateSelectedBlockTypes_ = function(blockOption) {
+ // Toggle selected.
+ blockOption.setSelected(!blockOption.isSelected());
+
+ // Show currently selected blocks in helper text.
+ self.view.listSelectedBlocks();
+ };
+
+ // Returns a block option select handler.
+ var makeBlockOptionSelectHandler_ = function(blockOption) {
+ return function() {
+ updateSelectedBlockTypes_(blockOption);
+ self.updatePreview();
+ };
+ };
+
+ // Assign a click handler to each block option.
+ for (var blockType in this.blockOptions) {
+ var blockOption = this.blockOptions[blockType];
+ // Use an additional closure to correctly assign the tab callback.
+ blockOption.dom.addEventListener(
+ 'click', makeBlockOptionSelectHandler_(blockOption));
+ }
+};
+
+/**
+ * Tied to the 'All Used' button in the Block Exporter's 'Select' button.
+ * Selects all blocks stored in block library and used in workspace factory.
+ */
+BlockExporterController.prototype.selectUsedBlocks = function() {
+ // Deselect all blocks.
+ this.view.deselectAllBlocks();
+
+ // Get list of block types that are in block library and used in workspace
+ // factory.
+ var storedBlockTypes = this.blockLibStorage.getBlockTypes();
+ var sharedBlockTypes = [];
+ // Keep list of custom block types used but not in library.
+ var unstoredCustomBlockTypes = [];
+
+ for (var i = 0, blockType; blockType = this.usedBlockTypes[i]; i++) {
+ if (storedBlockTypes.indexOf(blockType) != -1) {
+ sharedBlockTypes.push(blockType);
+ } else if (StandardCategories.coreBlockTypes.indexOf(blockType) == -1) {
+ unstoredCustomBlockTypes.push(blockType);
+ }
+ }
+
+ // Select each shared block type.
+ for (var i = 0, blockType; blockType = sharedBlockTypes[i]; i++) {
+ this.view.select(blockType);
+ }
+ this.view.listSelectedBlocks();
+
+ if (unstoredCustomBlockTypes.length > 0){
+ // Warn user to import block defifnitions and generator code for blocks
+ // not in their Block Library nor Blockly's standard library.
+ var blockTypesText = unstoredCustomBlockTypes.join(', ');
+ var customWarning = 'Custom blocks used in workspace factory but not ' +
+ 'stored in block library:\n ' + blockTypesText +
+ '\n\nDon\'t forget to include block definitions and generator code ' +
+ 'for these blocks.';
+ alert(customWarning);
+ }
+};
+
+/**
+ * Set the array that holds the block types used in workspace factory.
+ *
+ * @param {!Array.} usedBlockTypes - Block types used in
+ */
+BlockExporterController.prototype.setUsedBlockTypes =
+ function(usedBlockTypes) {
+ this.usedBlockTypes = usedBlockTypes;
+};
+
+/**
+ * Updates preview code (block definitions and generator stubs) in the exporter
+ * preview to reflect selected blocks.
+ */
+BlockExporterController.prototype.updatePreview = function() {
+ // Generate preview code for selected blocks.
+ var blockDefs = this.getBlockDefinitionsOfSelected();
+ var genStubs = this.getGeneratorStubsOfSelected();
+
+ // Update the text areas containing the code.
+ FactoryUtils.injectCode(blockDefs, 'blockDefs_textArea');
+ FactoryUtils.injectCode(genStubs, 'genStubs_textArea');
+};
+
+/**
+ * Returns a map of each selected block's type to its corresponding xml.
+ *
+ * @return {!Object} a map of each selected block's type (a string) to its
+ * corresponding xml element.
+ */
+BlockExporterController.prototype.getSelectedBlockXmlMap = function() {
+ var blockTypes = this.view.getSelectedBlockTypes();
+ return this.blockLibStorage.getBlockXmlMap(blockTypes);
+};
+
+/**
+ * Get block definition code in the selected format for selected blocks.
+ *
+ * @return {!string} The concatenation of each selected block's language code
+ * in the format specified in export settings.
+ */
+BlockExporterController.prototype.getBlockDefinitionsOfSelected = function() {
+ // Get selected blocks' information.
+ var blockXmlMap = this.getSelectedBlockXmlMap();
+
+ // Get block definition code in the selected format for the blocks.
+ var definitionFormat = document.getElementById('exportFormat').value;
+ return this.tools.getBlockDefinitions(blockXmlMap, definitionFormat);
+};
+
+/**
+ * Get generator stubs in the selected language for selected blocks.
+ *
+ * @return {!string} The concatenation of each selected block's generator stub
+ * in the language specified in export settings.
+ */
+BlockExporterController.prototype.getGeneratorStubsOfSelected = function() {
+ // Get selected blocks' information.
+ var blockXmlMap = this.getSelectedBlockXmlMap();
+
+ // Get generator stub code in the selected language for the blocks.
+ var language = document.getElementById('exportLanguage').value;
+ return this.tools.getGeneratorCode(blockXmlMap, language);
+};
+
diff --git a/demos/blocklyfactory/block_exporter_tools.js b/demos/blocklyfactory/block_exporter_tools.js
new file mode 100644
index 00000000..1396800a
--- /dev/null
+++ b/demos/blocklyfactory/block_exporter_tools.js
@@ -0,0 +1,276 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 the BlockExporter Tools class, which generates
+ * block definitions and generator stubs for given block types. Also generates
+ * toolbox xml for the exporter's workspace. Depends on the FactoryUtils for
+ * its code generation functions.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+'use strict';
+
+goog.provide('BlockExporterTools');
+
+goog.require('FactoryUtils');
+goog.require('BlockOption');
+goog.require('goog.dom');
+goog.require('goog.dom.xml');
+
+/**
+* Block Exporter Tools Class
+* @constructor
+*/
+BlockExporterTools = function() {
+ // Create container for hidden workspace.
+ this.container = goog.dom.createDom('div', {
+ 'id': 'blockExporterTools_hiddenWorkspace'
+ }, ''); // Empty quotes for empty div.
+ // Hide hidden workspace.
+ this.container.style.display = 'none';
+ goog.dom.appendChild(document.body, this.container);
+ /**
+ * Hidden workspace for the Block Exporter that holds pieces that make
+ * up the block
+ * @type {Blockly.Workspace}
+ */
+ this.hiddenWorkspace = Blockly.inject(this.container.id,
+ {collapse: false,
+ media: '../../media/'});
+};
+
+/**
+ * Get Blockly Block object from xml that encodes the blocks used to design
+ * the block.
+ * @private
+ *
+ * @param {!Element} xml - Xml element that encodes the blocks used to design
+ * the block. For example, the block xmls saved in block library.
+ * @return {!Blockly.Block} - Root block (factory_base block) which contains
+ * all information needed to generate block definition or null.
+ */
+BlockExporterTools.prototype.getRootBlockFromXml_ = function(xml) {
+ // Render xml in hidden workspace.
+ this.hiddenWorkspace.clear();
+ Blockly.Xml.domToWorkspace(xml, this.hiddenWorkspace);
+ // Get root block.
+ var rootBlock = this.hiddenWorkspace.getTopBlocks()[0] || null;
+ return rootBlock;
+};
+
+/**
+ * Return the given language code of each block type in an array.
+ *
+ * @param {!Object} blockXmlMap - Map of block type to xml.
+ * @param {string} definitionFormat - 'JSON' or 'JavaScript'
+ * @return {string} The concatenation of each block's language code in the
+ * desired format.
+ */
+BlockExporterTools.prototype.getBlockDefinitions =
+ function(blockXmlMap, definitionFormat) {
+ var blockCode = [];
+ for (var blockType in blockXmlMap) {
+ var xml = blockXmlMap[blockType];
+ if (xml) {
+ // Render and get block from hidden workspace.
+ var rootBlock = this.getRootBlockFromXml_(xml);
+ if (rootBlock) {
+ // Generate the block's definition.
+ var code = FactoryUtils.getBlockDefinition(blockType, rootBlock,
+ definitionFormat, this.hiddenWorkspace);
+ // Add block's definition to the definitions to return.
+ } else {
+ // Append warning comment and write to console.
+ var code = '// No block definition generated for ' + blockType +
+ '. Could not find root block in xml stored for this block.';
+ console.log('No block definition generated for ' + blockType +
+ '. Could not find root block in xml stored for this block.');
+ }
+ } else {
+ // Append warning comment and write to console.
+ var code = '// No block definition generated for ' + blockType +
+ '. Block was not found in Block Library Storage.';
+ console.log('No block definition generated for ' + blockType +
+ '. Block was not found in Block Library Storage.');
+ }
+ blockCode.push(code);
+ }
+ return blockCode.join("\n\n");
+};
+
+/**
+ * Return the generator code of each block type in an array in a given language.
+ *
+ * @param {!Object} blockXmlMap - Map of block type to xml.
+ * @param {string} generatorLanguage - e.g.'JavaScript', 'Python', 'PHP', 'Lua',
+ * 'Dart'
+ * @return {string} The concatenation of each block's generator code in the
+ * desired format.
+ */
+BlockExporterTools.prototype.getGeneratorCode =
+ function(blockXmlMap, generatorLanguage) {
+ var multiblockCode = [];
+ // Define the custom blocks in order to be able to create instances of
+ // them in the exporter workspace.
+ this.addBlockDefinitions(blockXmlMap);
+
+ for (var blockType in blockXmlMap) {
+ var xml = blockXmlMap[blockType];
+ if (xml) {
+ // Render the preview block in the hidden workspace.
+ var tempBlock =
+ FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+ // Get generator stub for the given block and add to generator code.
+ var blockGenCode =
+ FactoryUtils.getGeneratorStub(tempBlock, generatorLanguage);
+ } else {
+ // Append warning comment and write to console.
+ var blockGenCode = '// No generator stub generated for ' + blockType +
+ '. Block was not found in Block Library Storage.';
+ console.log('No block generator stub generated for ' + blockType +
+ '. Block was not found in Block Library Storage.');
+ }
+ multiblockCode.push(blockGenCode);
+ }
+ return multiblockCode.join("\n\n");
+};
+
+/**
+ * Evaluates block definition code of each block in given object mapping
+ * block type to xml. Called in order to be able to create instances of the
+ * blocks in the exporter workspace.
+ *
+ * @param {!Object} blockXmlMap - Map of block type to xml.
+ */
+BlockExporterTools.prototype.addBlockDefinitions = function(blockXmlMap) {
+ var blockDefs = this.getBlockDefinitions(blockXmlMap, 'JavaScript');
+ eval(blockDefs);
+};
+
+/**
+ * Pulls information about all blocks in the block library to generate xml
+ * for the selector workpace's toolbox.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
+ * @return {!Element} Xml representation of the toolbox.
+ */
+BlockExporterTools.prototype.generateToolboxFromLibrary
+ = function(blockLibStorage) {
+ // Create DOM for XML.
+ var xmlDom = goog.dom.createDom('xml', {
+ 'id' : 'blockExporterTools_toolbox',
+ 'style' : 'display:none'
+ });
+
+ var allBlockTypes = blockLibStorage.getBlockTypes();
+ // Object mapping block type to XML.
+ var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
+
+ // Define the custom blocks in order to be able to create instances of
+ // them in the exporter workspace.
+ this.addBlockDefinitions(blockXmlMap);
+
+ for (var blockType in blockXmlMap) {
+ // Get block.
+ var block = FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+ var category = FactoryUtils.generateCategoryXml([block], blockType);
+ xmlDom.appendChild(category);
+ }
+
+ // If there are no blocks in library and the map is empty, append dummy
+ // category.
+ if (Object.keys(blockXmlMap).length == 0) {
+ var category = goog.dom.createDom('category');
+ category.setAttribute('name','Next Saved Block');
+ xmlDom.appendChild(category);
+ }
+ return xmlDom;
+};
+
+/**
+ * Generate xml for the workspace factory's category from imported block
+ * definitions.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
+ * @return {!Element} Xml representation of a category.
+ */
+BlockExporterTools.prototype.generateCategoryFromBlockLib =
+ function(blockLibStorage) {
+ var allBlockTypes = blockLibStorage.getBlockTypes();
+ // Object mapping block type to XML.
+ var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
+
+ // Define the custom blocks in order to be able to create instances of
+ // them in the exporter workspace.
+ this.addBlockDefinitions(blockXmlMap);
+
+ // Get array of defined blocks.
+ var blocks = [];
+ for (var blockType in blockXmlMap) {
+ var block = FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+ blocks.push(block);
+ }
+
+ return FactoryUtils.generateCategoryXml(blocks,'Block Library');
+};
+
+/**
+ * Generate selector dom from block library storage. For each block in the
+ * library, it has a block option, which consists of a checkbox, a label,
+ * and a fixed size preview workspace.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
+ * @param {!string} blockSelectorID - ID of the div element that will contain
+ * the block options.
+ * @return {!Object} Map of block type to Block Option object.
+ */
+BlockExporterTools.prototype.createBlockSelectorFromLib =
+ function(blockLibStorage, blockSelectorID) {
+ // Object mapping each stored block type to XML.
+ var allBlockTypes = blockLibStorage.getBlockTypes();
+ var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
+
+ // Define the custom blocks in order to be able to create instances of
+ // them in the exporter workspace.
+ this.addBlockDefinitions(blockXmlMap);
+
+ var blockSelector = goog.dom.getElement(blockSelectorID);
+ // Clear the block selector.
+ goog.dom.removeChildren(blockSelector);
+
+ // Append each block option's dom to the selector.
+ var blockOptions = Object.create(null);
+ for (var blockType in blockXmlMap) {
+ // Get preview block's xml.
+ var block = FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+ var previewBlockXml = Blockly.Xml.workspaceToDom(this.hiddenWorkspace);
+
+ // Create block option, inject block into preview workspace, and append
+ // option to block selector.
+ var blockOpt = new BlockOption(blockSelector, blockType, previewBlockXml);
+ blockOpt.createDom();
+ goog.dom.appendChild(blockSelector, blockOpt.dom);
+ blockOpt.showPreviewBlock();
+ blockOptions[blockType] = blockOpt;
+ }
+ return blockOptions;
+};
+
diff --git a/demos/blocklyfactory/block_exporter_view.js b/demos/blocklyfactory/block_exporter_view.js
new file mode 100644
index 00000000..5b703f38
--- /dev/null
+++ b/demos/blocklyfactory/block_exporter_view.js
@@ -0,0 +1,145 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 the Block Exporter View class. Reads from and
+ * manages a block selector through which users select blocks to export.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockExporterView');
+
+goog.require('BlockExporterTools');
+goog.require('BlockOption');
+goog.require('goog.dom');
+
+/**
+ * BlockExporter View Class
+ * @constructor
+ *
+ * @param {!Object} blockOptions - Map of block types to BlockOption objects.
+ */
+BlockExporterView = function(blockOptions) {
+ // Map of block types to BlockOption objects to select from.
+ this.blockOptions = blockOptions;
+};
+
+/**
+ * Set the block options in the selector of this instance of
+ * BlockExporterView.
+ *
+ * @param {!Object} blockOptions - Map of block types to BlockOption objects.
+ */
+BlockExporterView.prototype.setBlockOptions = function(blockOptions) {
+ this.blockOptions = blockOptions;
+};
+
+/**
+ * Updates the helper text.
+ *
+ * @param {string} newText - New helper text.
+ * @param {boolean} opt_append - True if appending to helper Text, false if
+ * replacing.
+ */
+BlockExporterView.prototype.updateHelperText = function(newText, opt_append) {
+ if (opt_append) {
+ goog.dom.getElement('helperText').textContent =
+ goog.dom.getElement('helperText').textContent + newText;
+ } else {
+ goog.dom.getElement('helperText').textContent = newText;
+ }
+};
+
+/**
+ * Updates the helper text to show list of currently selected blocks.
+ */
+BlockExporterView.prototype.listSelectedBlocks = function() {
+
+ var selectedBlocksText = this.getSelectedBlockTypes().join(",\n ");
+ goog.dom.getElement('selectedBlocksText').textContent = selectedBlocksText;
+};
+
+/**
+ * Selects a given block type in the selector.
+ *
+ * @param {string} blockType - Type of block to selector.
+ */
+BlockExporterView.prototype.select = function(blockType) {
+ this.blockOptions[blockType].setSelected(true);
+};
+
+/**
+ * Deselects a block in the selector.
+ *
+ * @param {!Blockly.Block} block - Type of block to add to selector workspce.
+ */
+BlockExporterView.prototype.deselect = function(blockType) {
+ this.blockOptions[blockType].setSelected(false);
+};
+
+
+/**
+ * Deselects all blocks.
+ */
+BlockExporterView.prototype.deselectAllBlocks = function() {
+ for (var blockType in this.blockOptions) {
+ this.deselect(blockType);
+ }
+};
+
+/**
+ * Given an array of selected blocks, selects these blocks in the view, marking
+ * the checkboxes accordingly.
+ *
+ * @param {Array.} blockTypes - Array of block types to select.
+ */
+BlockExporterView.prototype.setSelectedBlockTypes = function(blockTypes) {
+ for (var i = 0, blockType; blockType = blockTypes[i]; i++) {
+ this.select(blockType);
+ }
+};
+
+/**
+ * Returns array of selected blocks.
+ *
+ * @return {!Array.} Array of all selected block types.
+ */
+BlockExporterView.prototype.getSelectedBlockTypes = function() {
+ var selectedTypes = [];
+ for (var blockType in this.blockOptions) {
+ var blockOption = this.blockOptions[blockType];
+ if (blockOption.isSelected()) {
+ selectedTypes.push(blockType);
+ }
+ }
+ return selectedTypes;
+};
+
+/**
+ * Centers the preview block of each block option in the exporter selector.
+ */
+BlockExporterView.prototype.centerPreviewBlocks = function() {
+ for (var blockType in this.blockOptions) {
+ this.blockOptions[blockType].centerBlock();
+ }
+};
diff --git a/demos/blocklyfactory/block_library_controller.js b/demos/blocklyfactory/block_library_controller.js
new file mode 100644
index 00000000..1df8121a
--- /dev/null
+++ b/demos/blocklyfactory/block_library_controller.js
@@ -0,0 +1,239 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 code for Block Library Controller, which
+ * depends on Block Library Storage and Block Library UI. Provides the
+ * interfaces for the user to
+ * - save their blocks to the browser
+ * - re-open and edit saved blocks
+ * - delete blocks
+ * - clear their block library
+ * Depends on BlockFactory functions defined in factory.js.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+'use strict';
+
+goog.provide('BlockLibraryController');
+
+goog.require('BlockLibraryStorage');
+goog.require('BlockLibraryView');
+goog.require('BlockFactory');
+
+/**
+ * Block Library Controller Class
+ * @constructor
+ *
+ * @param {string} blockLibraryName - Desired name of Block Library, also used
+ * to create the key for where it's stored in local storage.
+ * @param {!BlockLibraryStorage} opt_blockLibraryStorage - optional storage
+ * object that allows user to import a block library.
+ */
+BlockLibraryController = function(blockLibraryName, opt_blockLibraryStorage) {
+ this.name = blockLibraryName;
+ // Create a new, empty Block Library Storage object, or load existing one.
+ this.storage = opt_blockLibraryStorage || new BlockLibraryStorage(this.name);
+};
+
+/**
+ * Returns the block type of the block the user is building.
+ * @private
+ *
+ * @return {string} The current block's type.
+ */
+BlockLibraryController.prototype.getCurrentBlockType_ = function() {
+ var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+ var blockType = rootBlock.getFieldValue('NAME').trim().toLowerCase();
+ // Replace white space with underscores
+ return blockType.replace(/\W/g, '_').replace(/^(\d)/, '_\\1');
+};
+
+/**
+ * Removes current block from Block Library
+ *
+ * @param {string} blockType - Type of block.
+ */
+BlockLibraryController.prototype.removeFromBlockLibrary = function() {
+ var blockType = this.getCurrentBlockType_();
+ this.storage.removeBlock(blockType);
+ this.storage.saveToLocalStorage();
+ this.populateBlockLibrary();
+ // Show default block.
+ BlockFactory.showStarterBlock();
+};
+
+/**
+ * Updates the workspace to show the block user selected from library
+ *
+ * @param {string} blockType - Block to edit on block factory.
+ */
+BlockLibraryController.prototype.openBlock = function(blockType) {
+ var xml = this.storage.getBlockXml(blockType);
+ BlockFactory.mainWorkspace.clear();
+ Blockly.Xml.domToWorkspace(xml, BlockFactory.mainWorkspace);
+};
+
+/**
+ * Returns type of block selected from library.
+ *
+ * @param {Element} blockLibraryDropdown - The block library dropdown.
+ * @return {string} Type of block selected.
+ */
+BlockLibraryController.prototype.getSelectedBlockType =
+ function(blockLibraryDropdown) {
+ return BlockLibraryView.getSelected(blockLibraryDropdown);
+};
+
+/**
+ * Confirms with user before clearing the block library in local storage and
+ * updating the dropdown and displaying the starter block (factory_base).
+ */
+BlockLibraryController.prototype.clearBlockLibrary = function() {
+ var check = confirm(
+ 'Click OK to clear your block library.');
+ if (check) {
+ // Clear Block Library Storage.
+ this.storage.clear();
+ this.storage.saveToLocalStorage();
+ // Update dropdown.
+ BlockLibraryView.clearOptions('blockLibraryDropdown');
+ // Add a default, blank option to dropdown for when no block from library is
+ // selected.
+ BlockLibraryView.addDefaultOption('blockLibraryDropdown');
+ // Show default block.
+ BlockFactory.showStarterBlock();
+ }
+};
+
+/**
+ * Saves current block to local storage and updates dropdown.
+ */
+BlockLibraryController.prototype.saveToBlockLibrary = function() {
+ var blockType = this.getCurrentBlockType_();
+ // If block under that name already exists, confirm that user wants to replace
+ // saved block.
+ if (this.isInBlockLibrary(blockType)) {
+ var replace = confirm('You already have a block called ' + blockType +
+ ' in your library. Click OK to replace.');
+ if (!replace) {
+ // Do not save if user doesn't want to replace the saved block.
+ return;
+ }
+ }
+
+ // Create block xml.
+ var xmlElement = goog.dom.createDom('xml');
+ var block = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+ xmlElement.appendChild(Blockly.Xml.blockToDomWithXY(block));
+
+ // Save block.
+ this.storage.addBlock(blockType, xmlElement);
+ this.storage.saveToLocalStorage();
+
+ // Show saved block without other stray blocks sitting in Block Factory's
+ // main workspace.
+ this.openBlock(blockType);
+
+ // Do not add another option to dropdown if replacing.
+ if (replace) {
+ return;
+ }
+ BlockLibraryView.addOption(
+ blockType, blockType, 'blockLibraryDropdown', true, true);
+};
+
+/**
+ * Checks to see if the given blockType is already in Block Library
+ *
+ * @param {string} blockType - Type of block.
+ * @return {boolean} Boolean indicating whether or not block is in the library.
+ */
+BlockLibraryController.prototype.isInBlockLibrary = function(blockType) {
+ var blockLibrary = this.storage.blocks;
+ return (blockType in blockLibrary && blockLibrary[blockType] != null);
+};
+
+/**
+ * Populates the dropdown menu.
+ */
+BlockLibraryController.prototype.populateBlockLibrary = function() {
+ BlockLibraryView.clearOptions('blockLibraryDropdown');
+ // Add a default, blank option to dropdown for when no block from library is
+ // selected.
+ BlockLibraryView.addDefaultOption('blockLibraryDropdown');
+ // Add option for each saved block.
+ var blockLibrary = this.storage.blocks;
+ for (var block in blockLibrary) {
+ // Make sure the block wasn't deleted.
+ if (blockLibrary[block] != null) {
+ BlockLibraryView.addOption(
+ block, block, 'blockLibraryDropdown', false, true);
+ }
+ }
+};
+
+/**
+ * Return block library mapping block type to xml.
+ *
+ * @return {Object} Object mapping block type to xml text.
+ */
+BlockLibraryController.prototype.getBlockLibrary = function() {
+ return this.storage.getBlockXmlTextMap();
+};
+
+/**
+ * Set the block library storage object from which exporter exports.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage
+ * object.
+ */
+BlockLibraryController.prototype.setBlockLibraryStorage
+ = function(blockLibStorage) {
+ this.storage = blockLibStorage;
+};
+
+/**
+ * Get the block library storage object from which exporter exports.
+ *
+ * @return {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ * that stores the blocks.
+ */
+BlockLibraryController.prototype.getBlockLibraryStorage = function() {
+ return this.blockLibStorage;
+};
+
+/**
+ * Get the block library storage object from which exporter exports.
+ *
+ * @return {boolean} True if the Block Library is empty, false otherwise.
+ */
+BlockLibraryController.prototype.hasEmptyBlockLibrary = function() {
+ return this.storage.isEmpty();
+};
+
+/**
+ * Get all block types stored in block library.
+ *
+ * @return {!Array} Array of block types.
+ */
+BlockLibraryController.prototype.getStoredBlockTypes = function() {
+ return this.storage.getBlockTypes();
+};
diff --git a/demos/blocklyfactory/block_library_storage.js b/demos/blocklyfactory/block_library_storage.js
new file mode 100644
index 00000000..c4361959
--- /dev/null
+++ b/demos/blocklyfactory/block_library_storage.js
@@ -0,0 +1,178 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 Block Library's Storage Class.
+ * Depends on Block Library for its namespace.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockLibraryStorage');
+
+/**
+ * Represents a block library's storage.
+ * @constructor
+ *
+ * @param {string} blockLibraryName - Desired name of Block Library, also used
+ * to create the key for where it's stored in local storage.
+ * @param {Object} opt_blocks - Object mapping block type to xml.
+ */
+BlockLibraryStorage = function(blockLibraryName, opt_blocks) {
+ // Add prefix to this.name to avoid collisions in local storage.
+ this.name = 'BlockLibraryStorage.' + blockLibraryName;
+ if (!opt_blocks) {
+ // Initialize this.blocks by loading from local storage.
+ this.loadFromLocalStorage();
+ if (this.blocks == null) {
+ this.blocks = Object.create(null);
+ // The line above is equivalent of {} except that this object is TRULY
+ // empty. It doesn't have built-in attributes/functions such as length or
+ // toString.
+ this.saveToLocalStorage();
+ }
+ } else {
+ this.blocks = opt_blocks;
+ this.saveToLocalStorage();
+ }
+};
+
+/**
+ * Reads the named block library from local storage and saves it in this.blocks.
+ */
+BlockLibraryStorage.prototype.loadFromLocalStorage = function() {
+ // goog.global is synonymous to window, and allows for flexibility
+ // between browsers.
+ var object = goog.global.localStorage[this.name];
+ this.blocks = object ? JSON.parse(object) : null;
+};
+
+/**
+ * Writes the current block library (this.blocks) to local storage.
+ */
+BlockLibraryStorage.prototype.saveToLocalStorage = function() {
+ goog.global.localStorage[this.name] = JSON.stringify(this.blocks);
+};
+
+/**
+ * Clears the current block library.
+ */
+BlockLibraryStorage.prototype.clear = function() {
+ this.blocks = Object.create(null);
+ // The line above is equivalent of {} except that this object is TRULY
+ // empty. It doesn't have built-in attributes/functions such as length or
+ // toString.
+};
+
+/**
+ * Saves block to block library.
+ *
+ * @param {string} blockType - Type of block.
+ * @param {Element} blockXML - The block's XML pulled from workspace.
+ */
+BlockLibraryStorage.prototype.addBlock = function(blockType, blockXML) {
+ var prettyXml = Blockly.Xml.domToPrettyText(blockXML);
+ this.blocks[blockType] = prettyXml;
+};
+
+/**
+ * Removes block from current block library (this.blocks).
+ *
+ * @param {string} blockType - Type of block.
+ */
+BlockLibraryStorage.prototype.removeBlock = function(blockType) {
+ delete this.blocks[blockType];
+};
+
+/**
+ * Returns the xml of given block type stored in current block library
+ * (this.blocks).
+ *
+ * @param {string} blockType - Type of block.
+ * @return {Element} The xml that represents the block type or null.
+ */
+BlockLibraryStorage.prototype.getBlockXml = function(blockType) {
+ var xml = this.blocks[blockType] || null;
+ if (xml) {
+ var xml = Blockly.Xml.textToDom(xml);
+ }
+ return xml;
+};
+
+
+/**
+ * Returns map of each block type to its corresponding xml stored in current
+ * block library (this.blocks).
+ *
+ * @param {Array.} blockTypes - Types of blocks.
+ * @return {!Object} Map of block type to corresponding xml.
+ */
+BlockLibraryStorage.prototype.getBlockXmlMap = function(blockTypes) {
+ var blockXmlMap = {};
+ for (var i = 0; i < blockTypes.length; i++) {
+ var blockType = blockTypes[i];
+ var xml = this.getBlockXml(blockType);
+ blockXmlMap[blockType] = xml;
+ }
+ return blockXmlMap;
+};
+
+/**
+ * Returns array of all block types stored in current block library.
+ *
+ * @return {!Array.} Array of block types stored in library.
+ */
+BlockLibraryStorage.prototype.getBlockTypes = function() {
+ return Object.keys(this.blocks);
+};
+
+/**
+ * Checks to see if block library is empty.
+ *
+ * @return {boolean} True if empty, false otherwise.
+ */
+BlockLibraryStorage.prototype.isEmpty = function() {
+ for (var blockType in this.blocks) {
+ return false;
+ }
+ return true;
+};
+
+/**
+ * Returns array of all block types stored in current block library.
+ *
+ * @return {!Array.} Map of block type to corresponding xml text.
+ */
+BlockLibraryStorage.prototype.getBlockXmlTextMap = function() {
+ return this.blocks;
+};
+
+/**
+ * Returns boolean of whether or not a given blockType is stored in block
+ * library.
+ *
+ * @param {string} blockType - Type of block.
+ * @return {boolean} Whether or not blockType is stored in block library.
+ */
+BlockLibraryStorage.prototype.has = function(blockType) {
+ return this.blocks[blockType] ? true : false;
+};
diff --git a/demos/blocklyfactory/block_library_view.js b/demos/blocklyfactory/block_library_view.js
new file mode 100644
index 00000000..151055a4
--- /dev/null
+++ b/demos/blocklyfactory/block_library_view.js
@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 Block Library's UI for pulling blocks from the
+ * Block Library's storage to edit in Block Factory.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockLibraryView');
+
+/**
+ * Creates a node of a given element type and appends to the node with given id.
+ *
+ * @param {string} optionIdentifier - String used to identify option.
+ * @param {string} optionText - Text to display in the dropdown for the option.
+ * @param {string} dropdownID - ID for HTML select element.
+ * @param {boolean} selected - Whether or not the option should be selected on
+ * the dropdown.
+ * @param {boolean} enabled - Whether or not the option should be enabled.
+ */
+BlockLibraryView.addOption
+ = function(optionIdentifier, optionText, dropdownID, selected, enabled) {
+ var dropdown = document.getElementById(dropdownID);
+ var option = document.createElement('option');
+ // The value attribute of a dropdown's option is not visible in the UI, but is
+ // useful for identifying different options that may have the same text.
+ option.value = optionIdentifier;
+ // The text attribute is what the user sees in the dropdown for the option.
+ option.text = optionText;
+ option.selected = selected;
+ option.disabled = !enabled;
+ dropdown.add(option);
+};
+
+/**
+ * Adds a default, blank option to dropdown for when no block from library is
+ * selected.
+ *
+ * @param {string} dropdownID - ID of HTML select element
+ */
+BlockLibraryView.addDefaultOption = function(dropdownID) {
+ BlockLibraryView.addOption(
+ 'BLOCK_LIBRARY_DEFAULT_BLANK', '', dropdownID, true, false);
+};
+
+/**
+ * Selects the default, blank option in dropdown identified by given ID.
+ *
+ * @param {string} dropdownID - ID of HTML select element
+ */
+BlockLibraryView.selectDefaultOption = function(dropdownID) {
+ var dropdown = document.getElementById(dropdownID);
+ // Deselect currently selected option.
+ var index = dropdown.selectedIndex;
+ dropdown.options[index].selected = false;
+ // Select default option, always the first in the dropdown.
+ var defaultOption = dropdown.options[0];
+ defaultOption.selected = true;
+};
+
+/**
+ * Returns block type of selected block.
+ *
+ * @param {Element} dropdown - HTML select element.
+ * @return {string} Type of block selected.
+ */
+BlockLibraryView.getSelected = function(dropdown) {
+ var index = dropdown.selectedIndex;
+ return dropdown.options[index].value;
+};
+
+/**
+ * Removes option currently selected in dropdown from dropdown menu.
+ *
+ * @param {string} dropdownID - ID of HTML select element within which to find
+ * the selected option.
+ */
+BlockLibraryView.removeSelectedOption = function(dropdownID) {
+ var dropdown = document.getElementById(dropdownID);
+ if (dropdown) {
+ dropdown.remove(dropdown.selectedIndex);
+ }
+};
+
+/**
+ * Removes all options from dropdown.
+ *
+ * @param {string} dropdownID - ID of HTML select element to clear options of.
+ */
+BlockLibraryView.clearOptions = function(dropdownID) {
+ var dropdown = document.getElementById(dropdownID);
+ while (dropdown.length > 0) {
+ dropdown.remove(dropdown.length - 1);
+ }
+};
+
diff --git a/demos/blocklyfactory/block_option.js b/demos/blocklyfactory/block_option.js
new file mode 100644
index 00000000..265de70c
--- /dev/null
+++ b/demos/blocklyfactory/block_option.js
@@ -0,0 +1,181 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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 the BlockOption class, used to represent each of
+ * the various blocks that you may select. Each block option has a checkbox,
+ * a label, and a preview workspace through which to view the block.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+'use strict';
+
+goog.provide('BlockOption');
+goog.require('goog.dom');
+
+ /**
+ * BlockOption Class
+ * A block option includes checkbox, label, and div element that shows a preview
+ * of the block.
+ * @constructor
+ *
+ * @param {!Element} blockSelector - Scrollable div that will contain the
+ * block options for the selector.
+ * @param {!string} blockType - Type of block for which to create an option.
+ * @param {!Element} previewBlockXml - Xml element containing the preview block.
+ */
+var BlockOption = function(blockSelector, blockType, previewBlockXml) {
+ // The div to contain the block option.
+ this.blockSelector = blockSelector;
+ // The type of block represented by the option.
+ this.blockType = blockType;
+ // The checkbox for the option. Set in createDom.
+ this.checkbox = null;
+ // The dom for the option. Set in createDom.
+ this.dom = null;
+ // Xml element containing the preview block.
+ this.previewBlockXml = previewBlockXml;
+ // Workspace containing preview of block. Set upon injection of workspace in
+ // showPreviewBlock.
+ this.previewWorkspace = null;
+ // Whether or not block the option is selected.
+ this.selected = false;
+ // Using this.selected rather than this.checkbox.checked allows for proper
+ // handling of click events on the block option; Without this, clicking
+ // directly on the checkbox does not toggle selection.
+};
+
+/**
+ * Creates the dom for a single block option. Includes checkbox, label, and div
+ * in which to inject the preview block.
+ *
+ * @return {!Element} Root node of the selector dom which consists of a
+ * checkbox, a label, and a fixed size preview workspace per block.
+ */
+BlockOption.prototype.createDom = function() {
+ // Create the div for the block option.
+ var blockOptContainer = goog.dom.createDom('div', {
+ 'id': this.blockType,
+ 'class': 'blockOption'
+ }, ''); // Empty quotes for empty div.
+
+ // Create and append div in which to inject the workspace for viewing the
+ // block option.
+ var blockOptionPreview = goog.dom.createDom('div', {
+ 'id' : this.blockType + '_workspace',
+ 'class': 'blockOption_preview'
+ }, '');
+ goog.dom.appendChild(blockOptContainer,blockOptionPreview);
+
+ // Create and append container to hold checkbox and label.
+ var checkLabelContainer = goog.dom.createDom('div', {
+ 'class': 'blockOption_checkLabel'
+ }, '');
+ goog.dom.appendChild(blockOptContainer,checkLabelContainer);
+
+ // Create and append container for checkbox.
+ var checkContainer = goog.dom.createDom('div', {
+ 'class': 'blockOption_check'
+ }, '');
+ goog.dom.appendChild(checkLabelContainer, checkContainer);
+
+ // Create and append checkbox.
+ this.checkbox = goog.dom.createDom('input', {
+ 'type': 'checkbox',
+ 'id': this.blockType + '_check'
+ }, '');
+ goog.dom.appendChild(checkContainer, this.checkbox);
+
+ // Create and append container for block label.
+ var labelContainer = goog.dom.createDom('div', {
+ 'class': 'blockOption_label'
+ }, '');
+ goog.dom.appendChild(checkLabelContainer, labelContainer);
+
+ // Create and append text node for the label.
+ var labelText = goog.dom.createDom('p', {
+ 'id': this.blockType + '_text'
+ }, this.blockType);
+ goog.dom.appendChild(labelContainer, labelText);
+
+ this.dom = blockOptContainer;
+ return this.dom;
+};
+
+/**
+ * Injects a workspace containing the block into the block option's preview div.
+ */
+BlockOption.prototype.showPreviewBlock = function() {
+ // Get ID of preview workspace.
+ var blockOptPreviewID = this.dom.id + '_workspace';
+
+ // Inject preview block.
+ var workspace = Blockly.inject(blockOptPreviewID, {readOnly:true});
+ Blockly.Xml.domToWorkspace(this.previewBlockXml, workspace);
+ this.previewWorkspace = workspace;
+
+ // Center the preview block in the workspace.
+ this.centerBlock();
+};
+
+/**
+ * Centers the preview block in the workspace.
+ */
+BlockOption.prototype.centerBlock = function() {
+ // Get metrics.
+ var block = this.previewWorkspace.getTopBlocks()[0];
+ var blockMetrics = block.getHeightWidth();
+ var blockCoordinates = block.getRelativeToSurfaceXY();
+ var workspaceMetrics = this.previewWorkspace.getMetrics();
+
+ // Calculate new coordinates.
+ var x = workspaceMetrics.viewWidth/2 - blockMetrics['width']/2 -
+ blockCoordinates.x;
+ var y = workspaceMetrics.viewHeight/2 - blockMetrics['height']/2 -
+ blockCoordinates.y;
+
+ // Move block.
+ block.moveBy(x, y);
+};
+
+/**
+ * Selects or deselects the block option.
+ *
+ * @param {!boolean} selected - True if selecting option, false if deselecting
+ * option.
+ */
+BlockOption.prototype.setSelected = function(selected) {
+ this.selected = selected;
+ if (this.checkbox) {
+ this.checkbox.checked = selected;
+ }
+};
+
+/**
+ * Returns boolean telling whether or not block is selected.
+ *
+ * @return {!boolean} True if selecting option, false if deselecting
+ * option.
+ */
+BlockOption.prototype.isSelected = function() {
+ return this.selected;
+};
+
+
diff --git a/demos/blocklyfactory/factory.css b/demos/blocklyfactory/factory.css
new file mode 100644
index 00000000..810b4741
--- /dev/null
+++ b/demos/blocklyfactory/factory.css
@@ -0,0 +1,518 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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: 0em;
+ -webkit-margin-after: 0em;
+ -webkit-margin-start: 0px;
+ -webkit-margin-end: 0px;
+ padding: 5px 0px;
+}
+
+#blockly {
+ position: fixed;
+}
+
+#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;
+}
+
+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: 87%;
+ width: 100%;
+}
+
+#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 {
+ height: 95%;
+ padding: 2px;
+ width: 50%;
+}
+
+#workspaceFactoryContent {
+ clear: both;
+ display: none;
+ height: 100%;
+}
+
+/* Exporter */
+
+#blockLibraryExporter {
+ clear: both;
+ display: none;
+ height: 100%;
+}
+
+#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: 0px 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: 15px 20px;
+ width: 95%;
+}
+
+.blockOption_check_label {
+ position: relative;
+}
+
+.blockOption_check {
+ float: left;
+ padding: 4px;
+}
+
+.blockOption_label {
+ float: left;
+ max-width: inherit;
+ overflow-y: scroll;
+ word-wrap: break-word;
+}
+
+.blockOption_preview {
+ height: 100px;
+ padding-top: 10px;
+ width: 90%;
+}
+
+/* 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;
+}
+
+td {
+ padding: 0;
+ vertical-align: top;
+}
+
+.inputfile {
+ height: 0;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ width: 0;
+ z-index: -1;
+}
+
+#workspaceTabs {
+ background-color: #f8f8f8;
+ border: 1px solid #ccc;
+ display: table;
+}
+
+#toolbox_section {
+ height: 405px;
+ width: 60%;
+ position: relative;
+}
+
+#toolbox_blocks {
+ height: 100%;
+ width: 100%;
+}
+
+#preview_blocks {
+ height: 395px;
+ width: 100%;
+}
+
+#createDiv {
+ padding: 0.5%;
+ width: 60%;
+}
+
+#previewDiv {
+ border: 10px solid #eee;
+ margin-right: 0.5%;
+ width: 35%;
+}
+
+#previewBorder {
+ border: 5px solid #ddd;
+ padding: 2%;
+}
+
+#toolbox_div, #preload_div {
+ margin-right: 5%;
+ width: 35%;
+}
+
+#workspace_options {
+ max-height: 250px;
+ overflow-y: scroll;
+}
+
+#disable_div {
+ background-color: white;
+ height: 100%;
+ left: 0;
+ opacity: .5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: -1; /* Start behind workspace */
+}
+
+/* Rules for Closure popup color picker */
+.goog-palette {
+ outline: none;
+ cursor: default;
+}
+
+.goog-palette-cell {
+ height: 13px;
+ width: 15px;
+ margin: 0;
+ border: 0;
+ text-align: center;
+ vertical-align: middle;
+ border-right: 1px solid #000000;
+ font-size: 1px;
+}
+
+.goog-palette-colorswatch {
+ border: 1px solid #000000;
+ height: 13px;
+ position: relative;
+ width: 15px;
+}
+
+.goog-palette-cell-hover .goog-palette-colorswatch {
+ border: 1px solid #FFF;
+}
+
+.goog-palette-cell-selected .goog-palette-colorswatch {
+ border: 1px solid #000;
+ color: #fff;
+}
+
+.goog-palette-table {
+ border: 1px solid #000;
+ border-collapse: collapse;
+}
+
+.goog-popupcolorpicker {
+ position: absolute;
+}
+
+/* The container
- needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ background-color: #f9f9f9;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
+ display: none;
+ min-width: 170px;
+ opacity: 1;
+ position: absolute;
+ z-index: 1;
+}
+
+/* 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: #f1f1f1
+}
+
+/* Show the dropdown menu */
+.show {
+ display: block;
+}
+
+.shadowBlock>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.shadowBlock>.blocklyPathLight,
+.shadowBlock>.blocklyPathDark {
+ display: none;
+}
diff --git a/demos/blocklyfactory/factory.js b/demos/blocklyfactory/factory.js
new file mode 100644
index 00000000..be096f8f
--- /dev/null
+++ b/demos/blocklyfactory/factory.js
@@ -0,0 +1,252 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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.
+ */
+goog.provide('BlockFactory');
+
+goog.require('FactoryUtils');
+goog.require('StandardCategories');
+
+
+/**
+ * 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.
+ */
+BlockFactory.UNNAMED = 'unnamed';
+
+/**
+ * Existing direction ('ltr' vs 'rtl') of preview.
+ */
+BlockFactory.oldDir = null;
+
+/**
+ * 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
element to inject into.
+ */
+FactoryUtils.injectCode = function(code, id) {
+ var pre = document.getElementById(id);
+ pre.textContent = code;
+ code = pre.innerHTML;
+ code = prettyPrintOne(code, 'js');
+ pre.innerHTML = code;
+};
+
+/**
+ * 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') {
+ 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';
+ 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;
+ }
+ var format = document.getElementById('format').value;
+ var code = FactoryUtils.getBlockDefinition(blockType, rootBlock, format,
+ BlockFactory.mainWorkspace);
+ FactoryUtils.injectCode(code, 'languagePre');
+ 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();
+
+ // 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 = 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') {
+ 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 = 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 standard Blockly.Block already exists ' +
+ 'under this name.');
+ } else {
+ rootBlock.setWarningText(null);
+ }
+ } finally {
+ Blockly.Blocks = backupBlocks;
+ }
+};
+
+/**
+ * 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 == '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.domToWorkspace(
+ Blockly.Xml.textToDom(xml), BlockFactory.mainWorkspace);
+};
+
diff --git a/demos/blocklyfactory/factory_utils.js b/demos/blocklyfactory/factory_utils.js
new file mode 100644
index 00000000..1dabc018
--- /dev/null
+++ b/demos/blocklyfactory/factory_utils.js
@@ -0,0 +1,888 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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)
+ */
+ 'use strict';
+
+/**
+ * Namespace for FactoryUtils.
+ */
+goog.provide('FactoryUtils');
+
+goog.require('goog.dom.classes');
+
+/**
+ * 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 = blockType.replace(/\W/g, '_').replace(/^(\d)/, '_\\1');
+ switch (format) {
+ case 'JSON':
+ var code = FactoryUtils.formatJson_(blockType, rootBlock);
+ break;
+ case 'JavaScript':
+ var code = FactoryUtils.formatJavaScript_(blockType, rootBlock, workspace);
+ break;
+ }
+ return code;
+};
+
+/**
+ * Get the generator code for a given block.
+ *
+ * @param {!Blockly.Block} block - Rendered block in preview workspace.
+ * @param {string} generatorLanguage - 'JavaScript', 'Python', 'PHP', 'Lua',
+ * 'Dart'.
+ * @return {string} Generator code for multiple blocks.
+ */
+FactoryUtils.getGeneratorStub = function(block, generatorLanguage) {
+ 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 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("};");
+
+ 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 = '';
+ 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.
+ * @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 =
+ FactoryUtils.escapeString(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 + ');');
+ }
+ }
+ 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.
+ * @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(FactoryUtils.escapeString(block.getFieldValue('TEXT')));
+ break;
+ case 'field_input':
+ // Result: new Blockly.FieldTextInput('Hello'), 'GREET'
+ fields.push('new Blockly.FieldTextInput(' +
+ FactoryUtils.escapeString(block.getFieldValue('TEXT')) + '), ' +
+ FactoryUtils.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(', ') + '), ' +
+ FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_angle':
+ // Result: new Blockly.FieldAngle(90), 'ANGLE'
+ fields.push('new Blockly.FieldAngle(' +
+ parseFloat(block.getFieldValue('ANGLE')) + '), ' +
+ FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_checkbox':
+ // Result: new Blockly.FieldCheckbox('TRUE'), 'CHECK'
+ fields.push('new Blockly.FieldCheckbox(' +
+ FactoryUtils.escapeString(block.getFieldValue('CHECKED')) +
+ '), ' +
+ FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_colour':
+ // Result: new Blockly.FieldColour('#ff0000'), 'COLOUR'
+ fields.push('new Blockly.FieldColour(' +
+ FactoryUtils.escapeString(block.getFieldValue('COLOUR')) +
+ '), ' +
+ FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_date':
+ // Result: new Blockly.FieldDate('2015-02-04'), 'DATE'
+ fields.push('new Blockly.FieldDate(' +
+ FactoryUtils.escapeString(block.getFieldValue('DATE')) + '), ' +
+ FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+ break;
+ case 'field_variable':
+ // Result: new Blockly.FieldVariable('item'), 'VAR'
+ var varname
+ = FactoryUtils.escapeString(block.getFieldValue('TEXT') || null);
+ fields.push('new Blockly.FieldVariable(' + varname + '), ' +
+ FactoryUtils.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] = '[' +
+ FactoryUtils.escapeString(block.getFieldValue('USER' + i)) +
+ ', ' +
+ FactoryUtils.escapeString(block.getFieldValue('CPU' + i)) + ']';
+ }
+ if (options.length) {
+ fields.push('new Blockly.FieldDropdown([' +
+ options.join(', ') + ']), ' +
+ FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+ }
+ break;
+ case 'field_image':
+ // Result: new Blockly.FieldImage('http://...', 80, 60)
+ var src = FactoryUtils.escapeString(block.getFieldValue('SRC'));
+ var width = Number(block.getFieldValue('WIDTH'));
+ var height = Number(block.getFieldValue('HEIGHT'));
+ var alt = FactoryUtils.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
+ */
+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_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: parseFloat(block.getFieldValue('VALUE'))
+ };
+ var min = parseFloat(block.getFieldValue('MIN'));
+ if (min > -Infinity) {
+ obj.min = min;
+ }
+ var max = parseFloat(block.getFieldValue('MAX'));
+ if (max < Infinity) {
+ obj.max = max;
+ }
+ var precision = parseFloat(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;
+};
+
+/**
+ * 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 = [FactoryUtils.escapeString(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 = [FactoryUtils.escapeString(typeBlock.valueType)];
+ }
+ return types;
+};
+
+/**
+ * Escape a string.
+ * @param {string} string String to escape.
+ * @return {string} Escaped string surrouned by quotes.
+ */
+FactoryUtils.escapeString = function(string) {
+ return JSON.stringify(string);
+};
+
+/**
+ * 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 new 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 = goog.dom.createDom('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
First, select blocks from your block library by dragging them into your workspace. Then, use the Export Settings form to download starter code for selected blocks.
+
- needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ background-color: #f9f9f9;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
+ display: none;
+ min-width: 170px;
+ opacity: 1;
+ position: absolute;
+ z-index: 1;
+}
+
+/* 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: #f1f1f1
+}
+
+/* Show the dropdown menu */
+.show {
+ display: block;
+}
+
+.shadowBlock>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.shadowBlock>.blocklyPathLight,
+.shadowBlock>.blocklyPathDark {
+ display: none;
+}
diff --git a/demos/blocklyfactory/workspacefactory/wfactory_controller.js b/demos/blocklyfactory/workspacefactory/wfactory_controller.js
new file mode 100644
index 00000000..d3fb168b
--- /dev/null
+++ b/demos/blocklyfactory/workspacefactory/wfactory_controller.js
@@ -0,0 +1,1233 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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)
+ */
+
+ goog.require('FactoryUtils');
+ goog.require('StandardCategories');
+
+/**
+ * Class for a WorkspaceFactoryController
+ * @constructor
+ *
+ * @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.
+ */
+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: '',
+ zoom:
+ {controls: true,
+ wheel: true}
+ });
+
+ // Model to keep track of categories and blocks.
+ this.model = new WorkspaceFactoryModel();
+ // Updates the category tabs.
+ this.view = new WorkspaceFactoryView();
+ // Generates XML for categories.
+ this.generator = new WorkspaceFactoryGenerator(this.model);
+ // Tracks which editing mode the user is in. Toolbox mode on start.
+ this.selectedMode = WorkspaceFactoryController.MODE_TOOLBOX;
+ // True if key events are enabled, false otherwise.
+ this.keyEventsEnabled = true;
+};
+
+// Toolbox editing mode. Changes the user makes to the workspace updates the
+// toolbox.
+WorkspaceFactoryController.MODE_TOOLBOX = 'toolbox';
+// Pre-loaded workspace editing mode. Changes the user makes to the workspace
+// udpates the pre-loaded blocks.
+WorkspaceFactoryController.MODE_PRELOAD = 'preload';
+
+/**
+ * Currently prompts the user for a name, checking that it's valid (not used
+ * before), and then creates a tab and switches to it.
+ */
+WorkspaceFactoryController.prototype.addCategory = function() {
+ // Check if it's the first category added.
+ var isFirstCategory = !this.model.hasElements();
+ // Give the option to save blocks if their workspace is not empty and they
+ // are creating their first category.
+ if (isFirstCategory && this.toolboxWorkspace.getAllBlocks().length > 0) {
+ var confirmCreate = confirm('Do you want to save your work in another '
+ + 'category? If you don\'t, the blocks in your workspace will be ' +
+ 'deleted.');
+
+ // Create a new category for current blocks.
+ if (confirmCreate) {
+ var name = prompt('Enter the name of the category for your ' +
+ 'current blocks: ');
+ if (!name) { // Exit if cancelled.
+ return;
+ }
+
+ // Create the new category.
+ this.createCategory(name, true);
+ // Set the new category as selected.
+ var id = this.model.getCategoryIdByName(name);
+ this.model.setSelectedById(id);
+ this.view.setCategoryTabSelection(id, true);
+ // Allow user to use the default options for injecting with categories.
+ this.allowToSetDefaultOptions();
+ // Update preview here in case exit early.
+ this.updatePreview();
+ }
+ }
+
+ // After possibly creating a category, check again if it's the first category.
+ isFirstCategory = !this.model.hasElements();
+ // Get name from user.
+ name = this.promptForNewCategoryName('Enter the name of your new category: ');
+ if (!name) { //Exit if cancelled.
+ return;
+ }
+ // Create category.
+ this.createCategory(name, isFirstCategory);
+ // Switch to category.
+ this.switchElement(this.model.getCategoryIdByName(name));
+
+ // Allow the user to use the default options for injecting the workspace
+ // when there are categories if adding the first category.
+ if (isFirstCategory) {
+ this.allowToSetDefaultOptions();
+ }
+ // Update preview.
+ this.updatePreview();
+};
+
+/**
+ * Helper method for addCategory. Adds a category to the view given a name, ID,
+ * and a boolean for if it's the first category created. Assumes the category
+ * has already been created in the model. Does not switch to category.
+ *
+ * @param {!string} name Name of category being added.
+ * @param {!string} id The ID of the category being added.
+ * @param {boolean} isFirstCategory True if it's the first category created,
+ * false otherwise.
+ */
+WorkspaceFactoryController.prototype.createCategory = function(name,
+ isFirstCategory) {
+ // Create empty category
+ var category = new ListElement(ListElement.TYPE_CATEGORY, name);
+ this.model.addElementToList(category);
+ // Create new category.
+ var tab = this.view.addCategoryRow(name, category.id, isFirstCategory);
+ this.addClickToSwitch(tab, category.id);
+};
+
+/**
+ * Given a tab and a ID to be associated to that tab, adds a listener to
+ * that tab so that when the user clicks on the tab, it switches to the
+ * element associated with that ID.
+ *
+ * @param {!Element} tab The DOM element to add the listener to.
+ * @param {!string} id The ID of the element to switch to when tab is clicked.
+ */
+WorkspaceFactoryController.prototype.addClickToSwitch = function(tab, id) {
+ var self = this;
+ var clickFunction = function(id) { // Keep this in scope for switchElement
+ return function() {
+ self.switchElement(id);
+ };
+ };
+ this.view.bindClick(tab, clickFunction(id));
+};
+
+/**
+ * Attached to "-" button. Checks if the user wants to delete
+ * the current element. Removes the element and switches to another element.
+ * When the last element is removed, it switches to a single flyout mode.
+ *
+ */
+WorkspaceFactoryController.prototype.removeElement = function() {
+ // Check that there is a currently selected category to remove.
+ if (!this.model.getSelected()) {
+ return;
+ }
+
+ // Check if user wants to remove current category.
+ var check = confirm('Are you sure you want to delete the currently selected '
+ + this.model.getSelected().type + '?');
+ if (!check) { // If cancelled, exit.
+ return;
+ }
+
+ var selectedId = this.model.getSelectedId();
+ var selectedIndex = this.model.getIndexByElementId(selectedId);
+ // Delete element visually.
+ this.view.deleteElementRow(selectedId, selectedIndex);
+ // Delete element in model.
+ this.model.deleteElementFromList(selectedIndex);
+
+ // Find next logical element to switch to.
+ var next = this.model.getElementByIndex(selectedIndex);
+ if (!next && this.model.hasElements()) {
+ next = this.model.getElementByIndex(selectedIndex - 1);
+ }
+ var nextId = next ? next.id : null;
+
+ // Open next element.
+ this.clearAndLoadElement(nextId);
+
+ // If no element to switch to, display message, clear the workspace, and
+ // set a default selected element not in toolbox list in the model.
+ if (!nextId) {
+ alert('You currently have no categories or separators. All your blocks' +
+ ' will be displayed in a single flyout.');
+ this.toolboxWorkspace.clear();
+ this.toolboxWorkspace.clearUndo();
+ this.model.createDefaultSelectedIfEmpty();
+ // Allow the user to use the default options for injecting the workspace
+ // when there are no categories.
+ this.allowToSetDefaultOptions();
+ }
+ // Update preview.
+ this.updatePreview();
+};
+
+/**
+ * Gets a valid name for a new category from the user.
+ *
+ * @param {!string} promptString Prompt for the user to enter a name.
+ * @return {string} Valid name for a new category, or null if cancelled.
+ */
+WorkspaceFactoryController.prototype.promptForNewCategoryName =
+ function(promptString) {
+ do {
+ var name = prompt(promptString);
+ if (!name) { // If cancelled.
+ return null;
+ }
+ } while (this.model.hasCategoryByName(name));
+ return name;
+}
+
+/**
+ * Switches to a new tab for the element given by ID. Stores XML and blocks
+ * to reload later, updates selected accordingly, and clears the workspace
+ * and clears undo, then loads the new element.
+ *
+ * @param {!string} id ID of tab to be opened, must be valid element ID.
+ */
+WorkspaceFactoryController.prototype.switchElement = function(id) {
+ // Disables events while switching so that Blockly delete and create events
+ // don't update the preview repeatedly.
+ Blockly.Events.disable();
+ // Caches information to reload or generate xml if switching to/from element.
+ // Only saves if a category is selected.
+ if (this.model.getSelectedId() != null && id != null) {
+ this.model.getSelected().saveFromWorkspace(this.toolboxWorkspace);
+ }
+ // Load element.
+ this.clearAndLoadElement(id);
+ // Enable Blockly events again.
+ Blockly.Events.enable();
+};
+
+/**
+ * Switches to a new tab for the element by ID. Helper for switchElement.
+ * Updates selected, clears the workspace and clears undo, loads a new element.
+ *
+ * @param {!string} id ID of category to load
+ */
+WorkspaceFactoryController.prototype.clearAndLoadElement = function(id) {
+ // Unselect current tab if switching to and from an element.
+ if (this.model.getSelectedId() != null && id != null) {
+ this.view.setCategoryTabSelection(this.model.getSelectedId(), false);
+ }
+
+ // If switching to another category, set category selection in the model and
+ // view.
+ if (id != null) {
+ // Set next category.
+ this.model.setSelectedById(id);
+
+ // Clears workspace and loads next category.
+ this.clearAndLoadXml_(this.model.getSelectedXml());
+
+ // Selects the next tab.
+ this.view.setCategoryTabSelection(id, true);
+
+ // Order blocks as shown in flyout.
+ this.toolboxWorkspace.cleanUp();
+
+ // Update category editing buttons.
+ this.view.updateState(this.model.getIndexByElementId
+ (this.model.getSelectedId()), this.model.getSelected());
+ } else {
+ // Update category editing buttons for no categories.
+ this.view.updateState(-1, null);
+ }
+};
+
+/**
+ * Tied to "Export" button. Gets a file name from the user and downloads
+ * the corresponding configuration xml to that file.
+ *
+ * @param {!string} exportMode The type of file to export
+ * (WorkspaceFactoryController.MODE_TOOLBOX for the toolbox configuration,
+ * and WorkspaceFactoryController.MODE_PRELOAD for the pre-loaded workspace
+ * configuration)
+ */
+WorkspaceFactoryController.prototype.exportXmlFile = function(exportMode) {
+ // Generate XML.
+ if (exportMode == WorkspaceFactoryController.MODE_TOOLBOX) {
+ // Export the toolbox XML.
+
+ var configXml = Blockly.Xml.domToPrettyText
+ (this.generator.generateToolboxXml());
+ } else if (exportMode == WorkspaceFactoryController.MODE_PRELOAD) {
+ // Export the pre-loaded block XML.
+
+ var configXml = Blockly.Xml.domToPrettyText
+ (this.generator.generateWorkspaceXml());
+ } else {
+ // Unknown mode. Throw error.
+ throw new Error ("Unknown export mode: " + exportMode);
+ }
+
+ // Get file name.
+ var fileName = prompt('File Name for ' + (exportMode ==
+ WorkspaceFactoryController.MODE_TOOLBOX ? 'toolbox XML: ' :
+ 'pre-loaded workspace XML: '));
+ if (!fileName) { // If cancelled
+ return;
+ }
+ // Download file.
+ var data = new Blob([configXml], {type: 'text/xml'});
+ this.view.createAndDownloadFile(fileName, data);
+ };
+
+/**
+ * Export the options object to be used for the Blockly inject call. Gets a
+ * file name from the user and downloads the options object to that file.
+ */
+WorkspaceFactoryController.prototype.exportOptionsFile = function() {
+ var fileName = prompt('File Name for options object for injecting: ');
+ if (!fileName) { // If cancelled.
+ return;
+ }
+ // Generate new options to remove toolbox XML from options object (if
+ // necessary).
+ this.generateNewOptions();
+ // TODO(evd2014): Use Regex to prettify JSON generated.
+ var data = new Blob([JSON.stringify(this.model.options)],
+ {type: 'text/javascript'});
+ this.view.createAndDownloadFile(fileName, data);
+};
+
+/**
+ * Tied to "Print" button. Mainly used for debugging purposes. Prints
+ * the configuration XML to the console.
+ */
+WorkspaceFactoryController.prototype.printConfig = function() {
+ // Capture any changes made by user before generating XML.
+ this.saveStateFromWorkspace();
+ // Print XML.
+ window.console.log(Blockly.Xml.domToPrettyText
+ (this.generator.generateToolboxXml()));
+};
+
+/**
+ * Updates the preview workspace based on the toolbox workspace. If switching
+ * from no categories to categories or categories to no categories, reinjects
+ * Blockly with reinjectPreview, otherwise just updates without reinjecting.
+ * Called whenever a list element is created, removed, or modified and when
+ * Blockly move and delete events are fired. Do not call on create events
+ * or disabling will cause the user to "drop" their current blocks. Make sure
+ * that no changes have been made to the workspace since updating the model
+ * (if this might be the case, call saveStateFromWorkspace).
+ */
+WorkspaceFactoryController.prototype.updatePreview = function() {
+ // Disable events to stop updatePreview from recursively calling itself
+ // through event handlers.
+ Blockly.Events.disable();
+
+ // Only update the toolbox if not in read only mode.
+ if (!this.model.options['readOnly']) {
+ // Get toolbox XML.
+ var tree = Blockly.Options.parseToolboxTree
+ (this.generator.generateToolboxXml());
+
+ // No categories, creates a simple flyout.
+ if (tree.getElementsByTagName('category').length == 0) {
+ // No categories, creates a simple flyout.
+ if (this.previewWorkspace.toolbox_) {
+ this.reinjectPreview(tree); // Switch to simple flyout, expensive.
+ } else {
+ this.previewWorkspace.updateToolbox(tree);
+ }
+ } else {
+ // Uses categories, creates a toolbox.
+ if (!this.previewWorkspace.toolbox_) {
+ this.reinjectPreview(tree); // Create a toolbox, expensive.
+ } else {
+ this.previewWorkspace.updateToolbox(tree);
+ }
+ }
+ }
+
+ // Update pre-loaded blocks in the preview workspace.
+ this.previewWorkspace.clear();
+ Blockly.Xml.domToWorkspace(this.generator.generateWorkspaceXml(),
+ this.previewWorkspace);
+
+ // Reenable events.
+ Blockly.Events.enable();
+};
+
+/**
+ * Saves the state from the workspace depending on the current mode. Should
+ * be called after making changes to the workspace.
+ */
+WorkspaceFactoryController.prototype.saveStateFromWorkspace = function() {
+ if (this.selectedMode == WorkspaceFactoryController.MODE_TOOLBOX) {
+ // If currently editing the toolbox.
+ this.model.getSelected().saveFromWorkspace(this.toolboxWorkspace);
+ } else if (this.selectedMode == WorkspaceFactoryController.MODE_PRELOAD) {
+ // If currently editing the pre-loaded workspace.
+ this.model.savePreloadXml
+ (Blockly.Xml.workspaceToDom(this.toolboxWorkspace));
+ }
+};
+
+/**
+ * Used to completely reinject the preview workspace. This should be used only
+ * when switching from simple flyout to categories, or categories to simple
+ * flyout. More expensive than simply updating the flyout or toolbox.
+ *
+ * @param {!Element} tree of xml elements
+ * @package
+ */
+WorkspaceFactoryController.prototype.reinjectPreview = function(tree) {
+ this.previewWorkspace.dispose();
+ this.model.setOptionsAttribute('toolbox', Blockly.Xml.domToPrettyText(tree));
+ this.previewWorkspace = Blockly.inject('preview_blocks', this.model.options);
+ Blockly.Xml.domToWorkspace(this.generator.generateWorkspaceXml(),
+ this.previewWorkspace);
+};
+
+/**
+ * Tied to "change name" button. Changes the name of the selected category.
+ * Continues prompting the user until they input a category name that is not
+ * currently in use, exits if user presses cancel.
+ */
+WorkspaceFactoryController.prototype.changeCategoryName = function() {
+ // Return if a category is not selected.
+ if (this.model.getSelected().type != ListElement.TYPE_CATEGORY) {
+ return;
+ }
+ // Get new name from user.
+ var newName = this.promptForNewCategoryName('What do you want to change this'
+ + ' category\'s name to?');
+ if (!newName) { // If cancelled.
+ return;
+ }
+ // Change category name.
+ this.model.getSelected().changeName(newName);
+ this.view.updateCategoryName(newName, this.model.getSelectedId());
+ // Update preview.
+ this.updatePreview();
+};
+
+/**
+ * Tied to arrow up and arrow down buttons. Swaps with the element above or
+ * below the currently selected element (offset categories away from the
+ * current element). Updates state to enable the correct element editing
+ * buttons.
+ *
+ * @param {int} offset The index offset from the currently selected element
+ * to swap with. Positive if the element to be swapped with is below, negative
+ * if the element to be swapped with is above.
+ */
+WorkspaceFactoryController.prototype.moveElement = function(offset) {
+ var curr = this.model.getSelected();
+ if (!curr) { // Return if no selected element.
+ return;
+ }
+ var currIndex = this.model.getIndexByElementId(curr.id);
+ var swapIndex = this.model.getIndexByElementId(curr.id) + offset;
+ var swap = this.model.getElementByIndex(swapIndex);
+ if (!swap) { // Return if cannot swap in that direction.
+ return;
+ }
+ // Move currently selected element to index of other element.
+ // Indexes must be valid because confirmed that curr and swap exist.
+ this.moveElementToIndex(curr, swapIndex, currIndex);
+ // Update element editing buttons.
+ this.view.updateState(swapIndex, this.model.getSelected());
+ // Update preview.
+ this.updatePreview();
+};
+
+/**
+ * Moves a element to a specified index and updates the model and view
+ * accordingly. Helper functions throw an error if indexes are out of bounds.
+ *
+ * @param {!Element} element The element to move.
+ * @param {int} newIndex The index to insert the element at.
+ * @param {int} oldIndex The index the element is currently at.
+ */
+WorkspaceFactoryController.prototype.moveElementToIndex = function(element,
+ newIndex, oldIndex) {
+ this.model.moveElementToIndex(element, newIndex, oldIndex);
+ this.view.moveTabToIndex(element.id, newIndex, oldIndex);
+};
+
+/**
+ * Changes the color of the selected category. Return if selected element is
+ * a separator.
+ *
+ * @param {!string} color The color to change the selected category. Must be
+ * a valid CSS string.
+ */
+WorkspaceFactoryController.prototype.changeSelectedCategoryColor =
+ function(color) {
+ // Return if category is not selected.
+ if (this.model.getSelected().type != ListElement.TYPE_CATEGORY) {
+ return;
+ }
+ // Change color of selected category.
+ this.model.getSelected().changeColor(color);
+ this.view.setBorderColor(this.model.getSelectedId(), color);
+ this.updatePreview();
+};
+
+/**
+ * Tied to the "Standard Category" dropdown option, this function prompts
+ * the user for a name of a standard Blockly category (case insensitive) and
+ * loads it as a new category and switches to it. Leverages StandardCategories.
+ */
+WorkspaceFactoryController.prototype.loadCategory = function() {
+ // Prompt user for the name of the standard category to load.
+ do {
+ var name = prompt('Enter the name of the category you would like to import '
+ + '(Logic, Loops, Math, Text, Lists, Colour, Variables, or Functions)');
+ if (!name) {
+ return; // Exit if cancelled.
+ }
+ } while (!this.isStandardCategoryName(name));
+
+ // Check if the user can create that standard category.
+ if (this.model.hasVariables() && name.toLowerCase() == 'variables') {
+ alert('A Variables category already exists. You cannot create multiple' +
+ ' variables categories.');
+ return;
+ }
+ if (this.model.hasProcedures() && name.toLowerCase() == 'functions') {
+ alert('A Functions category already exists. You cannot create multiple' +
+ ' functions categories.');
+ return;
+ }
+ // Check if the user can create a category with that name.
+ var standardCategory = StandardCategories.categoryMap[name.toLowerCase()]
+ if (this.model.hasCategoryByName(standardCategory.name)) {
+ alert('You already have a category with the name ' + standardCategory.name
+ + '. Rename your category and try again.');
+ return;
+ }
+
+ var isFirstCategory = !this.model.hasElements();
+ // Copy the standard category in the model.
+ var copy = standardCategory.copy();
+
+ // Add it to the model.
+ this.model.addElementToList(copy);
+
+ // Update the copy in the view.
+ var tab = this.view.addCategoryRow(copy.name, copy.id, isFirstCategory);
+ this.addClickToSwitch(tab, copy.id);
+ // Color the category tab in the view.
+ if (copy.color) {
+ this.view.setBorderColor(copy.id, copy.color);
+ }
+ // Switch to loaded category.
+ this.switchElement(copy.id);
+ // Convert actual shadow blocks to user-generated shadow blocks.
+ this.convertShadowBlocks();
+ // Save state from workspace before updating preview.
+ this.saveStateFromWorkspace();
+ if (isFirstCategory) {
+ // Allow the user to use the default options for injecting the workspace
+ // when there are categories.
+ this.allowToSetDefaultOptions();
+ }
+ // Update preview.
+ this.updatePreview();
+};
+
+/**
+ * Given the name of a category, determines if it's the name of a standard
+ * category (case insensitive).
+ *
+ * @param {string} name The name of the category that should be checked if it's
+ * in StandardCategories categoryMap
+ * @return {boolean} True if name is a standard category name, false otherwise.
+ */
+WorkspaceFactoryController.prototype.isStandardCategoryName = function(name) {
+ for (var category in StandardCategories.categoryMap) {
+ if (name.toLowerCase() == category) {
+ return true;
+ }
+ }
+ return false;
+};
+
+/**
+ * Connected to the "add separator" dropdown option. If categories already
+ * exist, adds a separator to the model and view. Does not switch to select
+ * the separator, and updates the preview.
+ */
+WorkspaceFactoryController.prototype.addSeparator = function() {
+ // Don't allow the user to add a separator if a category has not been created.
+ if (!this.model.hasElements()) {
+ alert('Add a category before adding a separator.');
+ return;
+ }
+ // Create the separator in the model.
+ var separator = new ListElement(ListElement.TYPE_SEPARATOR);
+ this.model.addElementToList(separator);
+ // Create the separator in the view.
+ var tab = this.view.addSeparatorTab(separator.id);
+ this.addClickToSwitch(tab, separator.id);
+ // Switch to the separator and update the preview.
+ this.switchElement(separator.id);
+ this.updatePreview();
+};
+
+/**
+ * Connected to the import button. Given the file path inputted by the user
+ * from file input, if the import mode is for the toolbox, this function loads
+ * that toolbox XML to the workspace, creating category and separator tabs as
+ * necessary. If the import mode is for pre-loaded blocks in the workspace,
+ * this function loads that XML to the workspace to be edited further. This
+ * function switches mode to whatever the import mode is. Catches errors from
+ * file reading and prints an error message alerting the user.
+ *
+ * @param {string} file The path for the file to be imported into the workspace.
+ * Should contain valid toolbox XML.
+ * @param {!string} importMode The mode corresponding to the type of file the
+ * user is importing (WorkspaceFactoryController.MODE_TOOLBOX or
+ * WorkspaceFactoryController.MODE_PRELOAD).
+ */
+WorkspaceFactoryController.prototype.importFile = function(file, importMode) {
+ // Exit if cancelled.
+ if (!file) {
+ return;
+ }
+
+ Blockly.Events.disable();
+ var controller = this;
+ var reader = new FileReader();
+
+ // To be executed when the reader has read the file.
+ reader.onload = function() {
+ // Try to parse XML from file and load it into toolbox editing area.
+ // Print error message if fail.
+ try {
+ var tree = Blockly.Xml.textToDom(reader.result);
+ if (importMode == WorkspaceFactoryController.MODE_TOOLBOX) {
+ // Switch mode and import toolbox XML.
+ controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+ controller.importToolboxFromTree_(tree);
+ } else if (importMode == WorkspaceFactoryController.MODE_PRELOAD) {
+ // Switch mode and import pre-loaded workspace XML.
+ controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
+ controller.importPreloadFromTree_(tree);
+ } else {
+ // Throw error if invalid mode.
+ throw new Error("Unknown import mode: " + importMode);
+ }
+ } catch(e) {
+ alert('Cannot load XML from file.');
+ console.log(e);
+ } finally {
+ Blockly.Events.enable();
+ }
+ }
+
+ // Read the file asynchronously.
+ reader.readAsText(file);
+};
+
+/**
+ * Given a XML DOM tree, loads it into the toolbox editing area so that the
+ * user can continue editing their work. Assumes that tree is in valid toolbox
+ * XML format. Assumes that the mode is MODE_TOOLBOX.
+ * @private
+ *
+ * @param {!Element} tree XML tree to be loaded to toolbox editing area.
+ */
+WorkspaceFactoryController.prototype.importToolboxFromTree_ = function(tree) {
+ // Clear current editing area.
+ this.model.clearToolboxList();
+ this.view.clearToolboxTabs();
+
+ if (tree.getElementsByTagName('category').length == 0) {
+ // No categories present.
+ // Load all the blocks into a single category evenly spaced.
+ Blockly.Xml.domToWorkspace(tree, this.toolboxWorkspace);
+ this.toolboxWorkspace.cleanUp();
+
+ // Convert actual shadow blocks to user-generated shadow blocks.
+ this.convertShadowBlocks();
+
+ // Add message to denote empty category.
+ this.view.addEmptyCategoryMessage();
+
+ } else {
+ // Categories/separators present.
+ for (var i = 0, item; item = tree.children[i]; i++) {
+
+ if (item.tagName == 'category') {
+ // If the element is a category, create a new category and switch to it.
+ this.createCategory(item.getAttribute('name'), false);
+ var category = this.model.getElementByIndex(i);
+ this.switchElement(category.id);
+
+ // Load all blocks in that category to the workspace to be evenly
+ // spaced and saved to that category.
+ for (var j = 0, blockXml; blockXml = item.children[j]; j++) {
+ Blockly.Xml.domToBlock(blockXml, this.toolboxWorkspace);
+ }
+
+ // Evenly space the blocks.
+ this.toolboxWorkspace.cleanUp();
+
+ // Convert actual shadow blocks to user-generated shadow blocks.
+ this.convertShadowBlocks();
+
+ // Set category color.
+ if (item.getAttribute('colour')) {
+ category.changeColor(item.getAttribute('colour'));
+ this.view.setBorderColor(category.id, category.color);
+ }
+ // Set any custom tags.
+ if (item.getAttribute('custom')) {
+ this.model.addCustomTag(category, item.getAttribute('custom'));
+ }
+ } else {
+ // If the element is a separator, add the separator and switch to it.
+ this.addSeparator();
+ this.switchElement(this.model.getElementByIndex(i).id);
+ }
+ }
+ }
+ this.view.updateState(this.model.getIndexByElementId
+ (this.model.getSelectedId()), this.model.getSelected());
+
+ this.saveStateFromWorkspace();
+ // Allow the user to set default configuration options for a single flyout
+ // or multiple categories.
+ this.allowToSetDefaultOptions();
+
+ this.updatePreview();
+};
+
+/**
+ * Given a XML DOM tree, loads it into the pre-loaded workspace editing area.
+ * Assumes that tree is in valid XML format and that the selected mode is
+ * MODE_PRELOAD.
+ *
+ * @param {!Element} tree XML tree to be loaded to pre-loaded block editing
+ * area.
+ */
+WorkspaceFactoryController.prototype.importPreloadFromTree_ = function(tree) {
+ this.clearAndLoadXml_(tree);
+ this.model.savePreloadXml(tree);
+ this.updatePreview();
+}
+
+/**
+ * Given a XML DOM tree, loads it into the pre-loaded workspace editing area.
+ * Assumes that tree is in valid XML format and that the selected mode is
+ * MODE_PRELOAD.
+ *
+ * @param {!Element} tree XML tree to be loaded to pre-loaded block editing
+ * area.
+ */
+WorkspaceFactoryController.prototype.importPreloadFromTree_ = function(tree) {
+ this.clearAndLoadXml_(tree);
+ this.model.savePreloadXml(tree);
+ this.saveStateFromWorkspace();
+ this.updatePreview();
+}
+
+/**
+ * Given a XML DOM tree, loads it into the pre-loaded workspace editing area.
+ * Assumes that tree is in valid XML format and that the selected mode is
+ * MODE_PRELOAD.
+ *
+ * @param {!Element} tree XML tree to be loaded to pre-loaded block editing
+ * area.
+ */
+WorkspaceFactoryController.prototype.importPreloadFromTree_ = function(tree) {
+ this.clearAndLoadXml_(tree);
+ this.model.savePreloadXml(tree);
+ this.saveStateFromWorkspace();
+ this.updatePreview();
+}
+
+/**
+ * Clears the editing area completely, deleting all categories and all
+ * blocks in the model and view and all pre-loaded blocks. Tied to the
+ * "Clear" button.
+ */
+WorkspaceFactoryController.prototype.clearAll = function() {
+ var hasCategories = this.model.hasElements();
+ this.model.clearToolboxList();
+ this.view.clearToolboxTabs();
+ this.model.savePreloadXml(Blockly.Xml.textToDom(''));
+ this.view.addEmptyCategoryMessage();
+ this.view.updateState(-1, null);
+ this.toolboxWorkspace.clear();
+ this.toolboxWorkspace.clearUndo();
+ this.saveStateFromWorkspace();
+ if (hasCategories) {
+ this.allowToSetDefaultOptions();
+ }
+ this.updatePreview();
+};
+
+/*
+ * Makes the currently selected block a user-generated shadow block. These
+ * blocks are not made into real shadow blocks, but recorded in the model
+ * and visually marked as shadow blocks, allowing the user to move and edit
+ * them (which would be impossible with actual shadow blocks). Updates the
+ * preview when done.
+ *
+ */
+WorkspaceFactoryController.prototype.addShadow = function() {
+ // No block selected to make a shadow block.
+ if (!Blockly.selected) {
+ return;
+ }
+ // Clear any previous warnings on the block (would only have warnings on
+ // a non-shadow block if it was nested inside another shadow block).
+ Blockly.selected.setWarningText(null);
+ // Set selected block and all children as shadow blocks.
+ this.addShadowForBlockAndChildren_(Blockly.selected);
+
+ // Save and update the preview.
+ this.saveStateFromWorkspace();
+ this.updatePreview();
+};
+
+/**
+ * Sets a block and all of its children to be user-generated shadow blocks,
+ * both in the model and view.
+ * @private
+ *
+ * @param {!Blockly.Block} block The block to be converted to a user-generated
+ * shadow block.
+ */
+WorkspaceFactoryController.prototype.addShadowForBlockAndChildren_ =
+ function(block) {
+ // Convert to shadow block.
+ this.view.markShadowBlock(block);
+ this.model.addShadowBlock(block.id);
+
+ if (this.hasVariableField(block)) {
+ block.setWarningText('Cannot make variable blocks shadow blocks.');
+ }
+
+ // Convert all children to shadow blocks recursively.
+ var children = block.getChildren();
+ for (var i = 0; i < children.length; i++) {
+ this.addShadowForBlockAndChildren_(children[i]);
+ }
+};
+
+/**
+ * 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.
+ */
+WorkspaceFactoryController.prototype.hasVariableField = function(block) {
+ if (!block) {
+ return false;
+ }
+ for (var i = 0; i < block.inputList.length; i++) {
+ if (block.inputList[i].fieldRow.length > 0 &&
+ block.inputList[i].fieldRow[0].name == 'VAR') {
+ return true;
+ }
+ }
+ return false;
+};
+
+/**
+ * If the currently selected block is a user-generated shadow block, this
+ * function makes it a normal block again, removing it from the list of
+ * shadow blocks and loading the workspace again. Updates the preview again.
+ *
+ */
+WorkspaceFactoryController.prototype.removeShadow = function() {
+ // No block selected to modify.
+ if (!Blockly.selected) {
+ return;
+ }
+ this.model.removeShadowBlock(Blockly.selected.id);
+ this.view.unmarkShadowBlock(Blockly.selected);
+
+ // If turning invalid shadow block back to normal block, remove warning.
+ Blockly.selected.setWarningText(null);
+
+ this.saveStateFromWorkspace();
+ this.updatePreview();
+};
+
+/**
+ * Given a unique block ID, uses the model to determine if a block is a
+ * user-generated shadow block.
+ *
+ * @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.
+ */
+WorkspaceFactoryController.prototype.isUserGenShadowBlock = function(blockId) {
+ return this.model.isShadowBlock(blockId);
+}
+
+/**
+ * Call when importing XML containing real shadow blocks. This function turns
+ * all real shadow blocks loaded in the workspace into user-generated shadow
+ * blocks, meaning they are marked as shadow blocks by the model and appear as
+ * shadow blocks in the view but are still editable and movable.
+ */
+WorkspaceFactoryController.prototype.convertShadowBlocks = function() {
+ var blocks = this.toolboxWorkspace.getAllBlocks();
+ for (var i = 0, block; block = blocks[i]; i++) {
+ if (block.isShadow()) {
+ block.setShadow(false);
+ this.model.addShadowBlock(block.id);
+ this.view.markShadowBlock(block);
+ }
+ }
+};
+
+/**
+ * Sets the currently selected mode that determines what the toolbox workspace
+ * is being used to edit. Updates the view and then saves and loads XML
+ * to and from the toolbox and updates the help text.
+ *
+ * @param {!string} tab The type of tab being switched to
+ * (WorkspaceFactoryController.MODE_TOOLBOX or
+ * WorkspaceFactoryController.MODE_PRELOAD).
+ */
+WorkspaceFactoryController.prototype.setMode = function(mode) {
+ // No work to change mode that's currently set.
+ if (this.selectedMode == mode) {
+ return;
+ }
+
+ // No work to change mode that's currently set.
+ if (this.selectedMode == mode) {
+ return;
+ }
+
+ // Set tab selection and display appropriate tab.
+ this.view.setModeSelection(mode);
+
+ // Update selected tab.
+ this.selectedMode = mode;
+
+ // Update help text above workspace.
+ this.view.updateHelpText(mode);
+
+ if (mode == WorkspaceFactoryController.MODE_TOOLBOX) {
+ // Open the toolbox editing space.
+ this.model.savePreloadXml
+ (Blockly.Xml.workspaceToDom(this.toolboxWorkspace));
+ this.clearAndLoadXml_(this.model.getSelectedXml());
+ this.view.disableWorkspace(this.view.shouldDisableWorkspace
+ (this.model.getSelected()));
+ } else {
+ // Open the pre-loaded workspace editing space.
+ if (this.model.getSelected()) {
+ this.model.getSelected().saveFromWorkspace(this.toolboxWorkspace);
+ }
+ this.clearAndLoadXml_(this.model.getPreloadXml());
+ this.view.disableWorkspace(false);
+ }
+};
+
+/**
+ * Clears the toolbox workspace and loads XML to it, marking shadow blocks
+ * as necessary.
+ * @private
+ *
+ * @param {!Element} xml The XML to be loaded to the workspace.
+ */
+WorkspaceFactoryController.prototype.clearAndLoadXml_ = function(xml) {
+ this.toolboxWorkspace.clear();
+ this.toolboxWorkspace.clearUndo();
+ Blockly.Xml.domToWorkspace(xml, this.toolboxWorkspace);
+ this.view.markShadowBlocks(this.model.getShadowBlocksInWorkspace
+ (this.toolboxWorkspace.getAllBlocks()));
+ this.warnForUndefinedBlocks_();
+};
+
+/**
+ * Sets the standard default options for the options object and updates
+ * the preview workspace. The default values depends on if categories are
+ * present.
+ */
+WorkspaceFactoryController.prototype.setStandardOptionsAndUpdate = function() {
+ this.view.setBaseOptions();
+ this.view.setCategoryOptions(this.model.hasElements());
+ this.generateNewOptions();
+ };
+
+/**
+ * Asks the user if they want to use default configuration options specific
+ * to categories or a single flyout of blocks. If desired, makes the necessary
+ * changes to the options object depending on if there are categories and then
+ * updates the preview workspace. Only updates category/flyout specific
+ * options, not the base default options that are set regardless of if
+ * categories or a single flyout are used.
+ */
+WorkspaceFactoryController.prototype.allowToSetDefaultOptions = function() {
+ if (!this.model.hasElements() && !confirm('Do you want to use the default ' +
+ 'workspace configuration options for injecting a workspace without ' +
+ 'categories?')) {
+ return;
+ } else if (this.model.hasElements() && !confirm('Do you want to use the ' +
+ 'default workspace configuration options for injecting a workspace ' +
+ 'with categories?')) {
+ return;
+ }
+ this.view.setCategoryOptions(this.model.hasElements());
+ this.generateNewOptions();
+};
+
+/**
+ * Generates a new options object for injecting a Blockly workspace based
+ * on user input. Should be called every time a change has been made to
+ * an input field. Updates the model and reinjects the preview workspace.
+ */
+WorkspaceFactoryController.prototype.generateNewOptions = function() {
+ var optionsObj = new Object(null);
+
+ // Add all standard options to the options object.
+ // Use parse int to get numbers from value inputs.
+ optionsObj['collapse'] =
+ document.getElementById('option_collapse_checkbox').checked;
+ optionsObj['comments'] =
+ document.getElementById('option_comments_checkbox').checked;
+ optionsObj['css'] = document.getElementById('option_css_checkbox').checked;
+ optionsObj['disable'] =
+ document.getElementById('option_disable_checkbox').checked;
+ optionsObj['maxBlocks'] =
+ parseInt(document.getElementById('option_maxBlocks_text').value);
+ optionsObj['media'] = document.getElementById('option_media_text').value;
+ optionsObj['readOnly'] =
+ document.getElementById('option_readOnly_checkbox').checked;
+ optionsObj['rtl'] = document.getElementById('option_rtl_checkbox').checked;
+ optionsObj['scrollbars'] =
+ document.getElementById('option_scrollbars_checkbox').checked;
+ optionsObj['sounds'] =
+ document.getElementById('option_sounds_checkbox').checked;
+ optionsObj['trashcan'] =
+ document.getElementById('option_trashcan_checkbox').checked;
+
+ // If using a grid, add all grid options.
+ if (document.getElementById('option_grid_checkbox').checked) {
+ var grid = new Object(null);
+ grid['spacing'] =
+ parseInt(document.getElementById('gridOption_spacing_text').value);
+ grid['length'] =
+ parseInt(document.getElementById('gridOption_length_text').value);
+ grid['colour'] = document.getElementById('gridOption_colour_text').value;
+ grid['snap'] = document.getElementById('gridOption_snap_checkbox').checked;
+ optionsObj['grid'] = grid;
+ }
+
+ // If using zoom, add all zoom options.
+ if (document.getElementById('option_zoom_checkbox').checked) {
+ var zoom = new Object(null);
+ zoom['controls'] =
+ document.getElementById('zoomOption_controls_checkbox').checked;
+ zoom['wheel'] =
+ document.getElementById('zoomOption_wheel_checkbox').checked;
+ zoom['startScale'] =
+ parseInt(document.getElementById('zoomOption_startScale_text').value);
+ zoom['maxScale'] =
+ parseInt(document.getElementById('zoomOption_maxScale_text').value);
+ zoom['minScale'] =
+ parseInt(document.getElementById('zoomOption_minScale_text').value);
+ zoom['scaleSpeed'] =
+ parseInt(document.getElementById('zoomOption_scaleSpeed_text').value);
+ optionsObj['zoom'] = zoom;
+ }
+
+ this.model.setOptions(optionsObj);
+
+ this.reinjectPreview(Blockly.Options.parseToolboxTree
+ (this.generator.generateToolboxXml()));
+};
+
+/**
+ * Imports blocks from a file, generating a category in the toolbox workspace
+ * to allow the user to use imported blocks in the toolbox and in pre-loaded
+ * blocks.
+ *
+ * @param {!File} file File object for the blocks to import.
+ * @param {!string} format The format of the file to import, either 'JSON' or
+ * 'JavaScript'.
+ */
+WorkspaceFactoryController.prototype.importBlocks =
+ function(file, format) {
+ // Generate category name from file name.
+ var categoryName = file.name + ' blocks';
+
+ var controller = this;
+ var reader = new FileReader();
+
+ // To be executed when the reader has read the file.
+ reader.onload = function() {
+ try {
+ // Define blocks using block types from file.
+ var blockTypes = FactoryUtils.defineAndGetBlockTypes(reader.result, format);
+ var blocks = controller.generator.getDefinedBlocks(blockTypes);
+
+ // Generate category XML and append to toolbox.
+ var categoryXml = FactoryUtils.generateCategoryXml(blocks, categoryName);
+ // Get random color for category between 0 and 360. Gives each imported
+ // category a different color.
+ var randomColor = Math.floor(Math.random() * 360);
+ categoryXml.setAttribute('colour', randomColor);
+ controller.toolbox.appendChild(categoryXml);
+ controller.toolboxWorkspace.updateToolbox(controller.toolbox);
+ // Update imported block types.
+ this.model.addImportedBlocks(blockTypes);
+ // Reload current category to possibly reflect any newly defined blocks.
+ this.clearAndLoadXml_(Blockly.Xml.workspaceToDom(this.toolboxWorkspace));
+ } catch (e) {
+ alert('Cannot read blocks from file.');
+ window.console.log(e);
+ }
+ }
+
+ // Read the file asynchronously.
+ reader.readAsText(file);
+};
+
+/*
+ * Updates the block library category in the toolbox workspace toolbox.
+ *
+ * @param {!Element} categoryXml XML for the block library category.
+ * @param {!Array} 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.setAttribute('id', 'blockLibCategory');
+ categoryXml.setAttribute('colour', 260);
+
+ // Update the toolbox and toolboxWorkspace.
+ this.toolbox.replaceChild(categoryXml, blockLibCategory);
+ 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();
+ 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)');
+ }
+ }
+};
diff --git a/demos/blocklyfactory/workspacefactory/wfactory_generator.js b/demos/blocklyfactory/workspacefactory/wfactory_generator.js
new file mode 100644
index 00000000..37725b0c
--- /dev/null
+++ b/demos/blocklyfactory/workspacefactory/wfactory_generator.js
@@ -0,0 +1,200 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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)
+ */
+
+goog.require('FactoryUtils');
+
+/**
+ * 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.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 = goog.dom.createDom('xml',
+ {
+ 'id' : 'toolbox',
+ '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 new 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 = goog.dom.createDom('sep');
+ } else if (element.type == ListElement.TYPE_CATEGORY) {
+ // If the next element is a category.
+ var nextElement = goog.dom.createDom('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.
+ *
+ */
+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 generatedXml = Blockly.Xml.workspaceToDom(this.hiddenWorkspace);
+ generatedXml.setAttribute('id', 'preload_blocks');
+ generatedXml.setAttribute('style', 'display:none');
+ return generatedXml;
+ };
+
+/**
+ * Loads the given XML to the hidden workspace and sets any user-generated
+ * shadow blocks to be actual shadow blocks.
+ * @private
+ *
+ * @param {!Element} xml The XML to be loaded to the hidden workspace.
+ */
+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);
+ blockChild.removeAttribute('id');
+ 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();
+ 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/demos/blocklyfactory/workspacefactory/wfactory_init.js b/demos/blocklyfactory/workspacefactory/wfactory_init.js
new file mode 100644
index 00000000..4e286da8
--- /dev/null
+++ b/demos/blocklyfactory/workspacefactory/wfactory_init.js
@@ -0,0 +1,535 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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;
+ document.getElementById('button_editShadow').disabled = true;
+
+ this.initColorPicker_(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 color picker in workspace factory.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ */
+WorkspaceFactoryInit.initColorPicker_ = function(controller) {
+ // Array of Blockly category colors, variety of hues with saturation 45%
+ // and value 65% as specified in Blockly Developer documentation:
+ // https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks
+ var colors = ['#A65C5C',
+ '#A6635C',
+ '#A66A5C',
+ '#A6725C',
+ '#A6795C',
+ '#A6815C',
+ '#A6885C',
+ '#A6905C',
+ '#A6975C',
+ '#A69F5C',
+ '#A6A65C',
+ '#9FA65C',
+ '#97A65C',
+ '#90A65C',
+ '#88A65C',
+ '#81A65C',
+ '#79A65C',
+ '#6FA65C',
+ '#66A65C',
+ '#5EA65C',
+ '#5CA661',
+ '#5CA668',
+ '#5CA66F',
+ '#5CA677',
+ '#5CA67E',
+ '#5CA686',
+ '#5CA68D',
+ '#5CA695',
+ '#5CA69C',
+ '#5CA6A4',
+ '#5CA1A6',
+ '#5C9AA6',
+ '#5C92A6',
+ '#5C8BA6',
+ '#5C83A6',
+ '#5C7CA6',
+ '#5C74A6',
+ '#5C6AA6',
+ '#5C61A6',
+ '#5E5CA6',
+ '#665CA6',
+ '#6D5CA6',
+ '#745CA6',
+ '#7C5CA6',
+ '#835CA6',
+ '#8B5CA6',
+ '#925CA6',
+ '#9A5CA6',
+ '#A15CA6',
+ '#A65CA4',
+ '#A65C9C',
+ '#A65C95',
+ '#A65C8D',
+ '#A65C86',
+ '#A65C7E',
+ '#A65C77',
+ '#A65C6F',
+ '#A65C66',
+ '#A65C61',
+ '#A65C5E'];
+
+ // Create color picker with specific set of Blockly colors.
+ var colorPicker = new goog.ui.ColorPicker();
+ colorPicker.setColors(colors);
+
+ // Create and render the popup color picker and attach to button.
+ var popupPicker = new goog.ui.PopupColorPicker(null, colorPicker);
+ popupPicker.render();
+ popupPicker.attach(document.getElementById('dropdown_color'));
+ popupPicker.setFocusable(true);
+ goog.events.listen(popupPicker, 'change', function(e) {
+ controller.changeSelectedCategoryColor(popupPicker.getSelectedColor());
+ document.getElementById('dropdownDiv_editCategory').classList.remove
+ ("show");
+ });
+};
+
+/**
+ * Assign click handlers for workspace factory.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ */
+WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
+ function(controller) {
+ document.getElementById('tab_toolbox').addEventListener
+ ('click',
+ function() {
+ controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+ });
+
+ document.getElementById('tab_preload').addEventListener
+ ('click',
+ function() {
+ controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
+ });
+
+ document.getElementById('button_add').addEventListener
+ ('click',
+ function() {
+ document.getElementById('dropdownDiv_add').classList.toggle("show");
+ });
+
+ document.getElementById('dropdown_newCategory').addEventListener
+ ('click',
+ function() {
+ controller.addCategory();
+ document.getElementById('dropdownDiv_add').classList.remove("show");
+ });
+
+ document.getElementById('dropdown_loadCategory').addEventListener
+ ('click',
+ function() {
+ controller.loadCategory();
+ document.getElementById('dropdownDiv_add').classList.remove("show");
+ });
+
+ document.getElementById('dropdown_separator').addEventListener
+ ('click',
+ function() {
+ controller.addSeparator();
+ document.getElementById('dropdownDiv_add').classList.remove("show");
+ });
+
+ document.getElementById('button_remove').addEventListener
+ ('click',
+ function() {
+ controller.removeElement();
+ });
+
+ document.getElementById('dropdown_exportToolbox').addEventListener
+ ('click',
+ function() {
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
+ document.getElementById('dropdownDiv_export').classList.remove("show");
+ });
+
+ document.getElementById('dropdown_exportPreload').addEventListener
+ ('click',
+ function() {
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
+ document.getElementById('dropdownDiv_export').classList.remove("show");
+ });
+
+ document.getElementById('dropdown_exportOptions').addEventListener
+ ('click',
+ function() {
+ controller.exportOptionsFile();
+ document.getElementById('dropdownDiv_export').classList.remove("show");
+ });
+
+ document.getElementById('dropdown_exportAll').addEventListener
+ ('click',
+ function() {
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
+ controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
+ controller.exportOptionsFile();
+ document.getElementById('dropdownDiv_export').classList.remove("show");
+ });
+
+ document.getElementById('button_export').addEventListener
+ ('click',
+ function() {
+ document.getElementById('dropdownDiv_export').classList.toggle("show");
+ document.getElementById('dropdownDiv_load').classList.remove("show");
+ document.getElementById('dropdownDiv_importBlocks').classList.
+ remove("show");
+ });
+
+ document.getElementById('button_up').addEventListener
+ ('click',
+ function() {
+ controller.moveElement(-1);
+ });
+
+ document.getElementById('button_down').addEventListener
+ ('click',
+ function() {
+ controller.moveElement(1);
+ });
+
+ document.getElementById('button_editCategory').addEventListener
+ ('click',
+ function() {
+ document.getElementById('dropdownDiv_editCategory').classList.
+ toggle("show");
+ });
+
+ document.getElementById('button_editShadow').addEventListener
+ ('click',
+ function() {
+ if (Blockly.selected) {
+ // Can only edit blocks when a block is selected.
+
+ if (!controller.isUserGenShadowBlock(Blockly.selected.id) &&
+ Blockly.selected.getSurroundParent() != null) {
+ // If a block is selected that could be a valid shadow block (not a
+ // shadow block, has a surrounding parent), let the user make it a
+ // shadow block. Use toggle instead of add so that the user can
+ // click the button again to make the dropdown disappear without
+ // clicking one of the options.
+ document.getElementById('dropdownDiv_editShadowRemove').classList.
+ remove("show");
+ document.getElementById('dropdownDiv_editShadowAdd').classList.
+ toggle("show");
+ } else {
+ // If the block is a shadow block, let the user make it a normal
+ // block.
+ document.getElementById('dropdownDiv_editShadowAdd').classList.
+ remove("show");
+ document.getElementById('dropdownDiv_editShadowRemove').classList.
+ toggle("show");
+ }
+ }
+ });
+
+ document.getElementById('dropdown_name').addEventListener
+ ('click',
+ function() {
+ controller.changeCategoryName();
+ document.getElementById('dropdownDiv_editCategory').classList.
+ remove("show");
+ });
+
+document.getElementById('button_importBlocks').addEventListener
+ ('click',
+ function() {
+ document.getElementById('dropdownDiv_importBlocks').classList.
+ toggle("show");
+ document.getElementById('dropdownDiv_export').classList.remove("show");
+ document.getElementById('dropdownDiv_load').classList.remove("show");
+ });
+
+ document.getElementById('button_load').addEventListener
+ ('click',
+ function() {
+ document.getElementById('dropdownDiv_load').classList.toggle("show");
+ document.getElementById('dropdownDiv_export').classList.remove("show");
+ document.getElementById('dropdownDiv_importBlocks').classList.
+ remove("show");
+ });
+
+ document.getElementById('input_loadToolbox').addEventListener
+ ('change',
+ function() {
+ controller.importFile(event.target.files[0],
+ WorkspaceFactoryController.MODE_TOOLBOX);
+ document.getElementById('dropdownDiv_load').classList.remove("show");
+ });
+
+ document.getElementById('input_loadPreload').addEventListener
+ ('change',
+ function() {
+ controller.importFile(event.target.files[0],
+ WorkspaceFactoryController.MODE_PRELOAD);
+ document.getElementById('dropdownDiv_load').classList.remove("show");
+ });
+
+ document.getElementById('input_importBlocksJson').addEventListener
+ ('change',
+ function() {
+ controller.importBlocks(event.target.files[0],'JSON');
+ document.getElementById('dropdownDiv_importBlocks').classList.
+ remove("show");
+ });
+
+ document.getElementById('input_importBlocksJs').addEventListener
+ ('change',
+ function() {
+ controller.importBlocks(event.target.files[0],'JavaScript');
+ document.getElementById('dropdownDiv_importBlocks').classList.
+ remove("show");
+ });
+
+ document.getElementById('button_clear').addEventListener
+ ('click',
+ function() {
+ document.getElementById('dropdownDiv_importBlocks').classList.
+ remove("show");
+ document.getElementById('dropdownDiv_export').classList.remove("show");
+ document.getElementById('dropdownDiv_load').classList.remove("show");
+ controller.clearAll();
+ });
+
+ document.getElementById('dropdown_addShadow').addEventListener
+ ('click',
+ function() {
+ controller.addShadow();
+ document.getElementById('dropdownDiv_editShadowAdd').classList.
+ remove("show");
+ });
+
+ document.getElementById('dropdown_removeShadow').addEventListener
+ ('click',
+ function() {
+ controller.removeShadow();
+ document.getElementById('dropdownDiv_editShadowRemove').classList.
+ remove("show");
+ // Disable shadow editing button if turning invalid shadow block back
+ // to normal block.
+ if (!Blockly.selected.getSurroundParent()) {
+ document.getElementById('button_editShadow').disabled = true;
+ }
+ });
+
+ document.getElementById('button_standardOptions').addEventListener
+ ('click', function() {
+ controller.setStandardOptionsAndUpdate();
+ });
+};
+
+/**
+ * Add event listeners for workspace factory.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ */
+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.MOVE || e.type == Blockly.Events.DELETE ||
+ e.type == Blockly.Events.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.MOVE || (e.type == Blockly.Events.UI &&
+ e.element == 'selected')) {
+ var selected = Blockly.selected;
+
+ 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_editShadow').disabled = false;
+ if (!controller.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 '
+ + 'other shadow blocks.');
+ } else if (!controller.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_editShadow').disabled = false;
+ } 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) &&
+ (!controller.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_editShadow').disabled = true;
+ document.getElementById('dropdownDiv_editShadowRemove').classList.
+ remove("show");
+ document.getElementById('dropdownDiv_editShadowAdd').classList.
+ remove("show");
+ }
+ }
+ }
+
+ // Convert actual shadow blocks added from the toolbox to user-generated
+ // shadow blocks.
+ if (e.type == Blockly.Events.CREATE) {
+ controller.convertShadowBlocks();
+ }
+ });
+};
+
+/**
+ * Add listeners for workspace factory options input elements.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ * factory tab.
+ */
+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 grid 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';
+ });
+
+ // Generate new options every time an options input is updated.
+ var optionsElements = document.getElementsByClassName('optionsInput');
+ for (var i = 0; i < optionsElements.length; i++) {
+ optionsElements[i].addEventListener('change', function() {
+ controller.generateNewOptions();
+ });
+ }
+};
diff --git a/demos/blocklyfactory/workspacefactory/wfactory_model.js b/demos/blocklyfactory/workspacefactory/wfactory_model.js
new file mode 100644
index 00000000..8e552d83
--- /dev/null
+++ b/demos/blocklyfactory/workspacefactory/wfactory_model.js
@@ -0,0 +1,593 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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.Xml.textToDom('');
+ // 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.hasFunctionCategory;
+};
+
+/**
+ * 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 {int} 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 {int} newIndex The index to insert the element at.
+ * @param {int} 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 new 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 {int} 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 {int} 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 {int} 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.Xml.textToDom('');
+};
+
+/**
+ * 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;
+};
+
+/**
+ * Sets an attribute of the options object.
+ *
+ * @param {!string} name Name of the attribute to add.
+ * @param {Object} value The value of the attribute to add.
+ */
+WorkspaceFactoryModel.prototype.setOptionsAttribute = function(name, value) {
+ this.options[name] = value;
+};
+
+/*
+ * 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);
+}
+
+/**
+ * Class for a ListElement.
+ * @constructor
+ */
+ListElement = function(type, opt_name) {
+ this.type = type;
+ // XML DOM element to load the element.
+ this.xml = Blockly.Xml.textToDom('');
+ // 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.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.
+ */
+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.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/demos/blocklyfactory/workspacefactory/wfactory_view.js b/demos/blocklyfactory/workspacefactory/wfactory_view.js
new file mode 100644
index 00000000..5f713960
--- /dev/null
+++ b/demos/blocklyfactory/workspacefactory/wfactory_view.js
@@ -0,0 +1,435 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * 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
+ * @param {boolean} firstCategory true if it's the first category, false
+ * otherwise
+ * @return {!Element} DOM element created for tab
+ */
+WorkspaceFactoryView.prototype.addCategoryRow =
+ function(name, id, firstCategory) {
+ var table = document.getElementById('categoryTable');
+ // Delete help label and enable category buttons if it's the first category.
+ if (firstCategory) {
+ document.getElementById('categoryHeader').textContent = 'Your Categories:';
+ }
+ // Create tab.
+ var count = table.rows.length;
+ 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 == 0) {
+ document.getElementById('categoryHeader').textContent =
+ 'Your categories will appear here';
+ }
+}
+
+/**
+ * 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 {int} 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 ? true : false;
+ var table = document.getElementById('categoryTable');
+ document.getElementById('button_down').disabled = selectedIndex >=
+ table.rows.length - 1 || selectedIndex < 0 ? true : false;
+ // 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 {int} newIndex The index to move the category to.
+ * @param {int} 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 new 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} color The color for to be used for the border of the tab.
+ * Must be a valid CSS string.
+ */
+WorkspaceFactoryView.prototype.setBorderColor = function(id, color) {
+ var tab = this.tabMap[id];
+ tab.style.borderLeftWidth = "8px";
+ tab.style.borderLeftStyle = "solid";
+ tab.style.borderColor = color;
+};
+
+/**
+ * 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) {
+ // Create separator.
+ var table = document.getElementById('categoryTable');
+ var count = table.rows.length;
+ 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) {
+ document.getElementById('disable_div').style.zIndex = disable ? 1 : -1;
+};
+
+/**
+ * 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 {!} 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.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.');
+ }
+};
+
+/**
+ * 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.
+ if (Blockly.hasClass_(block.svgGroup_, 'shadowBlock')) {
+ Blockly.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() {
+ // Set basic options.
+ document.getElementById('option_css_checkbox').checked = true;
+ document.getElementById('option_maxBlocks_text').value = Infinity;
+ document.getElementById('option_media_text').value =
+ 'https://blockly-demo.appspot.com/static/media/';
+ document.getElementById('option_readOnly_checkbox').checked = false;
+ document.getElementById('option_rtl_checkbox').checked = false;
+ document.getElementById('option_sounds_checkbox').checked = true;
+
+ // 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_text').value = 0;
+ document.getElementById('gridOption_length_text').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 = false;
+ document.getElementById('zoomOption_wheel_checkbox').checked = false;
+ document.getElementById('zoomOption_startScale_text').value = 1.0;
+ document.getElementById('zoomOption_maxScale_text').value = 3;
+ document.getElementById('zoomOption_minScale_text').value = 0.3;
+ document.getElementById('zoomOption_scaleSpeed_text').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/demos/code/code.js b/demos/code/code.js
index 2dfebbbf..65a2621f 100644
--- a/demos/code/code.js
+++ b/demos/code/code.js
@@ -42,6 +42,7 @@ Code.LANGUAGE_NAME = {
'el': 'Ελληνικά',
'en': 'English',
'es': 'Español',
+ 'et': 'Eesti',
'fa': 'فارسی',
'fr': 'Français',
'he': 'עברית',
diff --git a/demos/code/index.html b/demos/code/index.html
index 54a59acd..3878ec07 100644
--- a/demos/code/index.html
+++ b/demos/code/index.html
@@ -148,13 +148,6 @@
-
-
-
- 1
-
-
-
diff --git a/demos/code/msg/et.js b/demos/code/msg/et.js
new file mode 100644
index 00000000..320c3917
--- /dev/null
+++ b/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/demos/plane/generated/et.js b/demos/plane/generated/et.js
new file mode 100644
index 00000000..069c7cb2
--- /dev/null
+++ b/demos/plane/generated/et.js
@@ -0,0 +1,37 @@
+// This file was automatically generated from template.soy.
+// Please don't edit this file by hand.
+
+if (typeof planepage == 'undefined') { var planepage = {}; }
+
+
+planepage.messages = function(opt_data, opt_ignored, opt_ijData) {
+ return '
Ridu: %1rows (%1)1. klassi ridu: %11. klassi ridu (%1)2. klassi ridu: %12. klassi ridu (%1)Istmeid: %1?istmete arv =