diff --git a/demos/blocklyfactory/app_controller.js b/demos/blocklyfactory/app_controller.js
index 052007e28..1cfe61a88 100644
--- a/demos/blocklyfactory/app_controller.js
+++ b/demos/blocklyfactory/app_controller.js
@@ -33,6 +33,8 @@ 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
@@ -45,6 +47,10 @@ AppController = function() {
new BlockLibraryController(this.blockLibraryName);
this.blockLibraryController.populateBlockLibrary();
+ // Construct Workspace Factory Controller.
+ this.workspaceFactoryController = new FactoryController
+ ('workspacefactory_toolbox', 'toolbox_blocks', 'preview_blocks');
+
// Initialize Block Exporter
this.exporter =
new BlockExporterController(this.blockLibraryController.storage);
@@ -361,18 +367,20 @@ AppController.prototype.assignLibraryClickHandlers = function() {
/**
* Assign button click handlers for the block factory.
*/
-AppController.prototype.assignFactoryClickHandlers = function() {
+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.
@@ -386,6 +394,7 @@ AppController.prototype.assignFactoryClickHandlers = function() {
this.value = null;
}
});
+
document.getElementById('createNewBlockButton')
.addEventListener('click', function() {
BlockFactory.showStarterBlock();
@@ -396,7 +405,7 @@ AppController.prototype.assignFactoryClickHandlers = function() {
/**
* Add event listeners for the block factory.
*/
-AppController.prototype.addFactoryEventListeners = function() {
+AppController.prototype.addBlockFactoryEventListeners = function() {
BlockFactory.mainWorkspace.addChangeListener(BlockFactory.updateLanguage);
document.getElementById('direction')
.addEventListener('change', BlockFactory.updatePreview);
@@ -429,6 +438,7 @@ AppController.prototype.initializeBlocklyStorage = function() {
BlocklyStorage.link(BlockFactory.mainWorkspace);});
BlockFactory.disableEnableLink();
};
+
/**
* Initialize Blockly and layout. Called on page load.
*/
@@ -441,7 +451,7 @@ AppController.prototype.init = function() {
// Assign click handlers.
this.assignExporterClickHandlers();
this.assignLibraryClickHandlers();
- this.assignFactoryClickHandlers();
+ this.assignBlockFactoryClickHandlers();
// Handle resizing of Block Factory elements.
var expandList = [
@@ -463,7 +473,7 @@ AppController.prototype.init = function() {
window.addEventListener('resize', onresize);
// Inject Block Factory Main Workspace.
- var toolbox = document.getElementById('toolbox');
+ var toolbox = document.getElementById('blockfactory_toolbox');
BlockFactory.mainWorkspace = Blockly.inject('blockly',
{collapse: false,
toolbox: toolbox,
@@ -484,5 +494,10 @@ AppController.prototype.init = function() {
BlockFactory.mainWorkspace.clearUndo();
// Add Block Factory event listeners.
- this.addFactoryEventListeners();
+ this.addBlockFactoryEventListeners();
+
+ // Workspace Factory init.
+ FactoryInit.initWorkspaceFactory(this.workspaceFactoryController);
};
+
+
diff --git a/demos/blocklyfactory/block_exporter_view.js b/demos/blocklyfactory/block_exporter_view.js
index 413c60fd3..7c3366d10 100644
--- a/demos/blocklyfactory/block_exporter_view.js
+++ b/demos/blocklyfactory/block_exporter_view.js
@@ -38,17 +38,17 @@ goog.require('goog.dom');
*
* @param {Element} toolbox - Xml for the toolbox of the selector workspace.
*/
-BlockExporterView = function(toolbox) {
+BlockExporterView = function(selectorToolbox) {
// Xml representation of the toolbox
- if (toolbox.hasChildNodes) {
- this.toolbox = toolbox;
+ if (selectorToolbox.hasChildNodes) {
+ this.toolbox = selectorToolbox;
} else {
// Toolbox is empty. Append dummy category to toolbox because toolbox
// cannot switch between category and flyout-only mode after injection.
var categoryElement = goog.dom.createDom('category');
categoryElement.setAttribute('name', 'Next Saved Block');
- toolbox.appendChild(categoryElement);
- this.toolbox = toolbox;
+ selectorToolbox.appendChild(categoryElement);
+ this.toolbox = selectorToolbox;
}
// Workspace users use to select blocks for export
this.selectorWorkspace =
@@ -142,4 +142,3 @@ BlockExporterView.prototype.getSelectedBlocks = function() {
return this.selectorWorkspace.getAllBlocks();
};
-
diff --git a/demos/blocklyfactory/factory.css b/demos/blocklyfactory/factory.css
index bddc7cd33..e74383966 100644
--- a/demos/blocklyfactory/factory.css
+++ b/demos/blocklyfactory/factory.css
@@ -40,7 +40,11 @@ h3 {
}
table {
+ border: none;
+ border-collapse: collapse;
height: 100%;
+ margin: 0;
+ padding: 0;
width: 100%;
}
@@ -58,7 +62,6 @@ p {
padding: 5px 0px;
}
-
#blockly {
position: fixed;
}
@@ -130,6 +133,12 @@ button, .buttonStyle {
#blockFactoryContent {
height: 87%;
+ width: 100%;
+}
+
+#blockFactoryPreview {
+ height: 100%;
+ width: 100%;
}
#blockLibraryContainer {
@@ -230,3 +239,180 @@ button, .buttonStyle {
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 {
+ border-bottom-color: #ddd !important;
+ background-color: #ddd;
+ 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;
+}
+
+#toolbox_section {
+ height: 480px;
+ width: 80%;
+ position: relative;
+}
+
+#toolbox_blocks {
+ height: 100%;
+ width: 100%;
+}
+
+#preview_blocks {
+ height: 300px;
+ width: 100%;
+}
+
+#createDiv {
+ width: 70%;
+}
+
+#previewDiv {
+ width: 30%;
+}
+
+#category_section {
+ width: 20%;
+}
+
+#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 {
+ color: black;
+ display: block;
+ padding: 12px 16px;
+ text-decoration: none;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a: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;
+}
+
+>>>>>>> Starting to integrate workspacefactory
diff --git a/demos/blocklyfactory/index.html b/demos/blocklyfactory/index.html
index b24e899e8..ec740f22e 100644
--- a/demos/blocklyfactory/index.html
+++ b/demos/blocklyfactory/index.html
@@ -6,9 +6,17 @@
Blockly Demo: Blockly Factory
+
+
+
+
+
+
+
+
+
+
-
-
@@ -106,11 +114,77 @@
+
+
Preview Workspace:
+
+
+
+
+
+
+
+
+
+
+
+
+ Workspace Editor:
+ Drag blocks into your toolbox.
+
+
+
+
+
-
+
Preview:
@@ -225,7 +299,7 @@
|
-
+
@@ -276,5 +350,310 @@
330
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 10
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 1
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 45
+
+
+
+
+
+
+
+ 0
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 3.1
+
+
+
+
+
+
+
+ 64
+
+
+
+
+ 10
+
+
+
+
+
+
+ 50
+
+
+
+
+ 1
+
+
+
+
+ 100
+
+
+
+
+
+
+ 1
+
+
+
+
+ 100
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+
+
+
+
+
+
+
+ text
+
+
+
+
+ abc
+
+
+
+
+
+
+ text
+
+
+
+
+
+
+ text
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+ abc
+
+
+
+
+
+
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+
+
+
+ 100
+
+
+
+
+ 50
+
+
+
+
+ 0
+
+
+
+
+
+
+ #ff0000
+
+
+
+
+ #3333ff
+
+
+
+
+ 0.5
+
+
+
+
+
+
+
+
+
|