Remove last Closure from Block Factory.

Improves UI, but is still pretty clunky.  For example there’s still not way to choose “no colour”.
Closes #668.

demos/blockfactory/app_controller.js

@@ -26,8 +26,6 @@
  * @author quachtina96 (Tina Quach)
  */
 
-goog.require('goog.dom.xml');  // Used to detect Closure
-
 /**
  * Controller for the Blockly Factory
  * @constructor
@@ -678,20 +676,6 @@ AppController.prototype.modalName_ = null;
  * Initialize Blockly and layout.  Called on page load.
  */
 AppController.prototype.init = function() {
-  // Block Factory has a dependency on bits of Closure that core Blockly
-  // doesn't have. When you run this from file:// without a copy of Closure,
-  // it breaks it non-obvious ways.  Warning about this for now until the
-  // dependency is broken.
-  // TODO: #668.
-  if (!window.goog.dom.xml) {
-    alert('Sorry: Closure dependency not found. We are working on removing ' +
-      'this dependency.  In the meantime, you can use our hosted demo\n ' +
-      'https://blockly-demo.appspot.com/static/demos/blockfactory/index.html' +
-      '\nor use these instructions to continue running locally:\n' +
-      'https://developers.google.com/blockly/guides/modify/web/closure');
-    return;
-  }
-
   var self = this;
   // Handle Blockly Storage with App Engine.
   if ('BlocklyStorage' in window) {

demos/blockfactory/cp.js

@@ -0,0 +1,197 @@
+/**
+ * Colour Picker v1.1
+ *
+ * Copyright 2006 Neil Fraser
+ * https://neil.fraser.name/software/colourpicker/
+ *
+ * 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.
+ */
+
+// Include at the top of your page:
+//   <script src="cp.js"></script>
+// Call with:
+//   <input name="mycolour" id="mycolour" value="ff00ff">
+//   <script>
+//     cp_init('mycolour')
+//   </script>
+
+var cp_grid = [
+  ['ffffff', 'ffcccc', 'ffcc99', 'ffff99', 'ffffcc', '99ff99', '99ffff', 'ccffff', 'ccccff', 'ffccff'],
+  ['cccccc', 'ff6666', 'ff9966', 'ffff66', 'ffff33', '66ff99', '33ffff', '66ffff', '9999ff', 'ff99ff'],
+  ['c0c0c0', 'ff0000', 'ff9900', 'ffcc66', 'ffff00', '33ff33', '66cccc', '33ccff', '6666cc', 'cc66cc'],
+  ['999999', 'cc0000', 'ff6600', 'ffcc33', 'ffcc00', '33cc00', '00cccc', '3366ff', '6633ff', 'cc33cc'],
+  ['666666', '990000', 'cc6600', 'cc9933', '999900', '009900', '339999', '3333ff', '6600cc', '993399'],
+  ['333333', '660000', '993300', '996633', '666600', '006600', '336666', '000099', '333399', '663366'],
+  ['000000', '330000', '663300', '663333', '333300', '003300', '003333', '000066', '330099', '330033']];
+
+var cp_dom = null;
+var cp_caller = null;
+var cp_defaultcolour = 'ffffff';
+var cp_closePID = null;
+
+function cp_init(id) {
+  // Hide the form element, and replace it with a colour box.
+  var obj = document.getElementById(id);
+  if (!obj) {
+    alert('Colour picker can\'t find "' + id + '"');
+    return;
+  }
+  if (!cp_hex2rgb(obj.value)) {
+    alert('Colour picker can\'t parse colour code in "' + id + '"');
+    return;
+  }
+  if (!obj.cp_box) {
+    obj.type = 'hidden';
+    // <img style="background-color: #ff0000; border: outset 3px #888;"
+    // src="1x1.gif" height=20 width=30>
+    var box = document.createElement('img');
+    box.style.border = 'outset 3px #888';
+    box.src = '1x1.gif';
+    box.height = 20;
+    box.width = 30;
+    box.label = id;
+    box.onclick = new Function('cp_open(this)');
+    box.onmouseover = cp_cancelclose;
+    box.onmouseout = cp_closesoon;
+    obj.parentNode.insertBefore(box, obj);
+    obj.cp_box = box;
+  }
+  obj.cp_box.style.backgroundColor = '#' + obj.value;
+}
+
+function cp_open(caller) {
+  // Create a table of colours.
+  if (cp_dom) {
+    cp_close();
+    return;
+  }
+  cp_caller = caller;
+  // alert(document.getElementById(caller.label));
+  cp_defaultcolour = document.getElementById(caller.label).value;
+  var posX = 0;
+  var posY = caller.offsetHeight;
+  while (caller) {
+    posX += caller.offsetLeft;
+    posY += caller.offsetTop;
+    caller = caller.offsetParent;
+  }
+  cp_dom = document.createElement('div');
+  cp_dom.id = 'colourpicker';
+  var table = document.createElement('table');
+  table.setAttribute('border', '1');
+  table.style.backgroundColor = '#808080';
+  table.onmouseover = cp_cancelclose;
+  table.onmouseout = cp_closesoon;
+  var tbody = document.createElement('tbody');  // IE 6 needs this.
+  var row, cell;
+  for (var y = 0; y < cp_grid.length; y++) {
+    row = document.createElement('tr');
+    tbody.appendChild(row);
+    for (var x = 0; x < cp_grid[y].length; x++) {
+      cell = document.createElement('td');
+      row.appendChild(cell);
+      cell.style.backgroundColor = '#' + cp_grid[y][x];
+      cell.label = cp_grid[y][x];
+      cell.style.border = 'solid 2px #' + cell.label;
+      cell.onmouseover = cp_onmouseover;
+      cell.onmouseout = cp_onmouseout;
+      cell.onclick = cp_onclick;
+      cell.innerHTML = '<img src="1x1.gif" height=16 width=16>';
+      if (cp_defaultcolour.toLowerCase() == cp_grid[y][x].toLowerCase()) {
+        cell.onmouseover();
+        cell.onmouseout();
+      }
+    }
+  }
+  table.appendChild(tbody);
+  cp_dom.appendChild(table);
+
+  cp_dom.style.position = 'absolute';
+  cp_dom.style.left = '0';
+  cp_dom.style.top = '0';
+  cp_dom.style.visibility = 'hidden';
+  document.body.appendChild(cp_dom);
+  // Don't widen the screen.
+  if (posX + cp_dom.offsetWidth > document.body.offsetWidth) {
+    posX = document.body.offsetWidth - cp_dom.offsetWidth;
+  }
+  cp_dom.style.left = posX + 'px';
+  cp_dom.style.top = posY + 'px';
+  cp_dom.style.visibility = 'visible';
+}
+
+function cp_close() {
+  // Close the table now.
+  cp_cancelclose();
+  if (cp_dom)
+    document.body.removeChild(cp_dom)
+  cp_dom = null;
+  cp_caller = null;
+}
+
+function cp_closesoon() {
+  // Close the table a split-second from now.
+  cp_closePID = window.setTimeout('cp_close()', 250);
+}
+
+function cp_cancelclose() {
+  // Don't close the colour table after all.
+  if (cp_closePID)
+    window.clearTimeout(cp_closePID);
+}
+
+function cp_onclick() {
+  // Clicked on a colour.
+  // Close the table, set the colour, fire an onchange event.
+  cp_caller.style.backgroundColor = '#' + this.label;
+  var input = document.getElementById(cp_caller.label)
+  input.value = this.label;
+  cp_close();
+  if (input.onchange) {
+    input.onchange();
+  }
+}
+
+function cp_onmouseover() {
+  // Place a black border on the cell if the contents are light,
+  // a white border if the contents are dark.
+  this.style.borderStyle = 'dotted';
+  var rgb = cp_hex2rgb(this.label);
+  if (rgb[0] + rgb[1] + rgb[2] > 255 * 3 / 2)
+    this.style.borderColor = 'black';
+  else
+    this.style.borderColor = 'white';
+}
+
+function cp_onmouseout() {
+  // Remove the border.
+  if (this.label == cp_defaultcolour) {
+    this.style.borderStyle = 'outset';
+  } else {
+    this.style.border = 'solid 2px #' + this.label;
+  }
+}
+
+function cp_hex2rgb(hexcode) {
+  // Parse '0088ff' and return the [r, g, b] ints.
+  var m =
+      hexcode.match(/^([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])$/);
+  if (m) {
+    var r = parseInt(m[1], 16);
+    var g = parseInt(m[2], 16);
+    var b = parseInt(m[3], 16);
+    return [r, g, b];
+  } else {
+    return null;
+  }
+}

demos/blockfactory/factory.css

@@ -56,11 +56,11 @@ td {
 
 p {
   display: block;
-  -webkit-margin-before: 0em;
-  -webkit-margin-after: 0em;
-  -webkit-margin-start: 0px;
-  -webkit-margin-end: 0px;
-  padding: 5px 0px;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  padding: 5px 0;
 }
 
 #factoryHeader {
@@ -233,7 +233,7 @@ button, .buttonStyle {
 }
 
 .subsettings {
-  margin: 0px 25px;
+  margin: 0 25px;
 }
 
 #exporterHiddenWorkspace {
@@ -511,53 +511,10 @@ td.taboff:hover {
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(0, 0, 0, 0.1);
   z-index: 100;
 }
 
-/* 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 #000;
-  font-size: 1px;
-}
-
-.goog-palette-colorswatch {
-  border: 1px solid #000;
-  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;
-  z-index: 101;  /* On top of the modal Shadow. */
-}
-
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
   display: inline-block;
@@ -566,7 +523,7 @@ td.taboff:hover {
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
   background-color: #fff;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
   display: none;
   min-width: 170px;
   opacity: 1;
@@ -598,6 +555,23 @@ td.taboff:hover {
   display: block;
 }
 
+#dropdownDiv_editCategory {
+  padding: 0 1ex;
+}
+
+#dropdownDiv_editCategory>img {
+  vertical-align: middle;
+}
+
+#colourpicker {
+  z-index: 999;
+}
+
+#colourpicker>table {
+  border-collapse: separate;
+  z-index: 999;
+}
+
 .shadowBlock>.blocklyPath {
   fill-opacity: .5;
   stroke-opacity: .5;

demos/blockfactory/index.html

@@ -8,12 +8,12 @@
   <script src="../../javascript_compressed.js"></script>
   <script src="../../msg/js/en.js"></script>
   <script src="../../blocks_compressed.js"></script>
-  <script src="../../../closure-library/closure/goog/base.js"></script>
   <script src="analytics.js"></script>
   <script src="block_definition_extractor.js"></script>
   <script src="factory_utils.js"></script>
   <script src="workspacefactory/wfactory_model.js"></script>
   <script src="standard_categories.js"></script>
+  <script src="cp.js"></script>
   <script src="workspacefactory/wfactory_controller.js"></script>
   <script src="workspacefactory/wfactory_view.js"></script>
   <script src="workspacefactory/wfactory_generator.js"></script>
@@ -208,10 +208,11 @@
 
         <br>
         <div class="dropdown">
-          <button id="button_editCategory">Edit Category</button>
+          <button id="button_editCategory">Edit Category...</button>
           <div id="dropdownDiv_editCategory" class="dropdown-content">
-            <a id='dropdown_name'>Name</a>
-            <a id='dropdown_color'>Colour</a>
+            <input id="categoryName">
+            <input id="categoryColour" value="000000">
+            <button id="categorySave">Save</button>
           </div>
         </div>
 

demos/blockfactory/workspacefactory/wfactory_controller.js

@@ -491,26 +491,25 @@ WorkspaceFactoryController.prototype.reinjectPreview = function(tree) {
 };
 
 /**
- * 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.
+ * Changes the name and colour of the selected category.
+ * Return if selected element is a separator.
+ * @param {string} name New name for selected category.
+ * @param {string} colour New colour for selected category.
+ * Must be a valid CSS string.
  */
-WorkspaceFactoryController.prototype.changeCategoryName = function() {
+WorkspaceFactoryController.prototype.changeSelectedCategory =
+    function(name, colour) {
   var selected = this.model.getSelected();
   // Return if a category is not selected.
   if (selected.type != ListElement.TYPE_CATEGORY) {
     return;
   }
-  // Get new name from user.
-  window.foo = selected;
-  var newName = this.promptForNewCategoryName('What do you want to change this'
-    + ' category\'s name to?', selected.name);
-  if (!newName) {  // If cancelled.
-    return;
-  }
+  // Change colour of selected category.
+  selected.changeColor(colour);
+  this.view.setBorderColor(this.model.getSelectedId(), colour);
   // Change category name.
-  selected.changeName(newName);
-  this.view.updateCategoryName(newName, this.model.getSelectedId());
+  selected.changeName(name);
+  this.view.updateCategoryName(name, this.model.getSelectedId());
   // Update preview.
   this.updatePreview();
 };
@@ -557,24 +556,6 @@ WorkspaceFactoryController.prototype.moveElementToIndex = function(element,
   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

demos/blockfactory/workspacefactory/wfactory_init.js

@@ -27,9 +27,6 @@
  * @author Emma Dauterman (evd2014)
  */
 
-goog.require('goog.ui.PopupColorPicker');
-goog.require('goog.ui.ColorPicker');
-
 /**
  * Namespace for workspace factory initialization methods.
  * @namespace
@@ -48,7 +45,7 @@ WorkspaceFactoryInit.initWorkspaceFactory = function(controller) {
   document.getElementById('button_down').disabled = true;
   document.getElementById('button_editCategory').disabled = true;
 
-  this.initColorPicker_(controller);
+  this.initColourPicker_(controller);
   this.addWorkspaceFactoryEventListeners_(controller);
   this.assignWorkspaceFactoryClickHandlers_(controller);
   this.addWorkspaceFactoryOptionsListeners_(controller);
@@ -58,98 +55,25 @@ WorkspaceFactoryInit.initWorkspaceFactory = function(controller) {
 };
 
 /**
- * Initialize the color picker in workspace factory.
+ * Initialize the colour picker in workspace factory.
  * @param {!FactoryController} controller The controller for the workspace
  *    factory tab.
  * @private
  */
-WorkspaceFactoryInit.initColorPicker_ = function(controller) {
-  // Array of Blockly category colours, consitent with the 15 degree default
+WorkspaceFactoryInit.initColourPicker_ = function(controller) {
+  // Array of Blockly category colours, consistent with the 15 degree default
   // of the block factory's colour wheel.
   var colours = [];
+  var row = [];
   for (var hue = 0; hue < 360; hue += 15) {
-    colours.push(WorkspaceFactoryInit.hsvToHex_(hue,
-        Blockly.HSV_SATURATION, Blockly.HSV_VALUE));
-  }
-
-  // Create color picker with specific set of Blockly colours.
-  var colourPicker = new goog.ui.ColorPicker();
-  colourPicker.setSize(6);
-  colourPicker.setColors(colours);
-
-  // Create and render the popup colour picker and attach to button.
-  var popupPicker = new goog.ui.PopupColorPicker(null, colourPicker);
-  popupPicker.render();
-  popupPicker.attach(document.getElementById('dropdown_color'));
-  popupPicker.setFocusable(true);
-  goog.events.listen(popupPicker, 'change', function(e) {
-    controller.changeSelectedCategoryColor(popupPicker.getSelectedColor());
-    blocklyFactory.closeModal();
-  });
-};
-
-/**
- * Converts from h,s,v values to a hex string
- * @param {number} h Hue, in [0, 360].
- * @param {number} s Saturation, in [0, 1].
- * @param {number} v Value, in [0, 1].
- * @return {string} hex representation of the color.
- * @private
- */
-WorkspaceFactoryInit.hsvToHex_ = function(h, s, v) {
-  var brightness = v * 255;
-  var red = 0;
-  var green = 0;
-  var blue = 0;
-  if (s == 0) {
-    red = brightness;
-    green = brightness;
-    blue = brightness;
-  } else {
-    var sextant = Math.floor(h / 60);
-    var remainder = (h / 60) - sextant;
-    var val1 = brightness * (1 - s);
-    var val2 = brightness * (1 - (s * remainder));
-    var val3 = brightness * (1 - (s * (1 - remainder)));
-    switch (sextant) {
-      case 1:
-        red = val2;
-        green = brightness;
-        blue = val1;
-        break;
-      case 2:
-        red = val1;
-        green = brightness;
-        blue = val3;
-        break;
-      case 3:
-        red = val1;
-        green = val2;
-        blue = brightness;
-        break;
-      case 4:
-        red = val3;
-        green = val1;
-        blue = brightness;
-        break;
-      case 5:
-        red = brightness;
-        green = val1;
-        blue = val2;
-        break;
-      case 6:
-      case 0:
-        red = brightness;
-        green = val3;
-        blue = val1;
-        break;
+    row.push(Blockly.hueToHex(hue).substring(1));
+    if (row.length == 6) {
+      colours.push(row);
+      row = [];
     }
   }
-
-  var hexR = ('0' + Math.floor(red).toString(16)).slice(-2);
-  var hexG = ('0' + Math.floor(green).toString(16)).slice(-2);
-  var hexB = ('0' + Math.floor(blue).toString(16)).slice(-2);
-  return '#' + hexR + hexG + hexB;
+  // Override the default colours.
+  cp_grid = colours;
 };
 
 /**
@@ -311,12 +235,25 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
   document.getElementById('button_editCategory').addEventListener
       ('click',
       function() {
+        var selected = controller.model.getSelected();
+        // Return if a category is not selected.
+        if (selected.type != ListElement.TYPE_CATEGORY) {
+          return;
+        }
+        document.getElementById('categoryName').value = selected.name;
+        document.getElementById('categoryColour').value = selected.color ?
+            selected.color.substring(1).toLowerCase() : '000000';
+        // Link the colour picker to the field.
+        cp_init('categoryColour');
         blocklyFactory.openModal('dropdownDiv_editCategory');
       });
-  document.getElementById('dropdown_name').addEventListener
+
+  document.getElementById('categorySave').addEventListener
       ('click',
       function() {
-        controller.changeCategoryName();
+        var name = document.getElementById('categoryName').value.trim();
+        var colour = '#' + document.getElementById('categoryColour').value;
+        controller.changeSelectedCategory(name, colour);
         blocklyFactory.closeModal();
       });
 

demos/blockfactory/workspacefactory/wfactory_view.js

@@ -320,7 +320,7 @@ WorkspaceFactoryView.prototype.markShadowBlocks = function(blocks) {
  */
 WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
   // Add Blockly CSS for user-generated shadow blocks.
-  Blockly.utils.addClass(block.svgGroup_, 'shadowBlock');
+  Blockly.utils.dom.addClass(block.svgGroup_, 'shadowBlock');
   // If not a valid shadow block, add a warning message.
   if (!block.getSurroundParent()) {
       block.setWarningText('Shadow blocks must be nested inside' +
@@ -338,7 +338,7 @@ WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
  */
 WorkspaceFactoryView.prototype.unmarkShadowBlock = function(block) {
   // Remove Blockly CSS for user-generated shadow blocks.
-  Blockly.utils.removeClass(block.svgGroup_, 'shadowBlock');
+  Blockly.utils.dom.removeClass(block.svgGroup_, 'shadowBlock');
 };
 
 /**