Remove goog.ui.ColorPicker (#2020)

Adds the ability to set the tooltip titles for each colour. Note that Closure’s colour picker in Blockly used to have keyboard controls (as of > 3 years ago); but no longer seems to. This replacement does not currently have keyboard controls either.
2026-01-07 00:50:27 +01:00 · 2018-08-24 12:14:42 -07:00
parent 9eacd7d3b9
commit cb3ea2f56e
3 changed files with 123 additions and 81 deletions
--- a/core/css.js
+++ b/core/css.js
@@ -689,55 +689,28 @@ Blockly.Css.CONTENT = [
    'color: #fff;',
  '}',

-  /* Copied from: goog/css/colorpicker-simplegrid.css */
-  /*
-   * Copyright 2007 The Closure Library Authors. All Rights Reserved.
-   *
-   * Use of this source code is governed by the Apache License, Version 2.0.
-   * See the COPYING file for details.
-   */
-
-  /* Author: pupius@google.com (Daniel Pupius) */
-
-  /*
-    Styles to make the colorpicker look like the old gmail color picker
-    NOTE: without CSS scoping this will override styles defined in palette.css
-  */
-  '.blocklyWidgetDiv .goog-palette {',
-    'outline: none;',
-    'cursor: default;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-palette-table {',
-    'border: 1px solid #666;',
+  /* Colour Picker Field */
+  '.blocklyColourTable {',
    'border-collapse: collapse;',
  '}',

-  '.blocklyWidgetDiv .goog-palette-cell {',
-    'height: 13px;',
-    'width: 15px;',
-    'margin: 0;',
-    'border: 0;',
-    'text-align: center;',
-    'vertical-align: middle;',
-    'border-right: 1px solid #666;',
-    'font-size: 1px;',
-  '}',
-
-  '.blocklyWidgetDiv .goog-palette-colorswatch {',
-    'position: relative;',
-    'height: 13px;',
-    'width: 15px;',
+  '.blocklyColourTable>tr>td {',
    'border: 1px solid #666;',
+    'padding: 0;',
  '}',

-  '.blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {',
-    'border: 1px solid #FFF;',
+  '.blocklyColourTable>tr>td>div {',
+    'border: 1px solid #666;',
+    'height: 13px;',
+    'width: 15px;',
  '}',

-  '.blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {',
-    'border: 1px solid #000;',
-    'color: #fff;',
+  '.blocklyColourTable>tr>td>div:hover {',
+    'border: 1px solid #fff;',
+  '}',
+
+  '.blocklyColourSelected, .blocklyColourSelected:hover {',
+    'border: 1px solid #000 !important;',
  '}',

  /* Copied from: goog/css/menu.css */
--- a/core/field_colour.js
+++ b/core/field_colour.js
@@ -29,9 +29,7 @@ goog.provide('Blockly.FieldColour');
 goog.require('Blockly.Field');
 goog.require('Blockly.utils');

-goog.require('goog.events');
 goog.require('goog.style');
-goog.require('goog.ui.ColorPicker');


 /**
@@ -63,13 +61,21 @@ Blockly.FieldColour.fromJson = function(options) {
 };

 /**
- * By default use the global constants for colours.
+ * Array of colours used by this field.  If null, use the global list.
 * @type {Array.<string>}
 * @private
 */
 Blockly.FieldColour.prototype.colours_ = null;

 /**
+ * Array of colour tooltips used by this field.  If null, use the global list.
+ * @type {Array.<string>}
+ * @private
+ */
+Blockly.FieldColour.prototype.titles_ = null;
+
+/**
+ * Number of colour columns used by this field.  If 0, use the global setting.
 * By default use the global constants for columns.
 * @type {number}
 * @private
@@ -138,14 +144,44 @@ Blockly.FieldColour.prototype.getText = function() {

 /**
 * An array of colour strings for the palette.
- * See bottom of this page for the default:
- * http://docs.closure-library.googlecode.com/git/closure_goog_ui_colorpicker.js.source.html
+ * Copied from goog.ui.ColorPicker.SIMPLE_GRID_COLORS
+ * All colour pickers use this unless overridden with setColours.
 * @type {!Array.<string>}
 */
-Blockly.FieldColour.COLOURS = goog.ui.ColorPicker.SIMPLE_GRID_COLORS;
+Blockly.FieldColour.COLOURS = [
+  // grays
+  '#ffffff', '#cccccc', '#c0c0c0', '#999999', '#666666', '#333333', '#000000',
+  // reds
+  '#ffcccc', '#ff6666', '#ff0000', '#cc0000', '#990000', '#660000', '#330000',
+  // oranges
+  '#ffcc99', '#ff9966', '#ff9900', '#ff6600', '#cc6600', '#993300', '#663300',
+  // yellows
+  '#ffff99', '#ffff66', '#ffcc66', '#ffcc33', '#cc9933', '#996633', '#663333',
+  // olives
+  '#ffffcc', '#ffff33', '#ffff00', '#ffcc00', '#999900', '#666600', '#333300',
+  // greens
+  '#99ff99', '#66ff99', '#33ff33', '#33cc00', '#009900', '#006600', '#003300',
+  // turquoises
+  '#99ffff', '#33ffff', '#66cccc', '#00cccc', '#339999', '#336666', '#003333',
+  // blues
+  '#ccffff', '#66ffff', '#33ccff', '#3366ff', '#3333ff', '#000099', '#000066',
+  // purples
+  '#ccccff', '#9999ff', '#6666cc', '#6633ff', '#6600cc', '#333399', '#330099',
+  // violets
+  '#ffccff', '#ff99ff', '#cc66cc', '#cc33cc', '#993399', '#663366', '#330033'
+];
+
+/**
+ * An array of tooltip strings for the palette.  If not the same length as
+ * COLOURS, the colour's hex code will be used for any missing titles.
+ * All colour pickers use this unless overridden with setColours.
+ * @type {!Array.<string>}
+ */
+Blockly.FieldColour.TITLES = [];

 /**
 * Number of columns in the palette.
+ * All colour pickers use this unless overridden with setColumns.
 */
 Blockly.FieldColour.COLUMNS = 7;

@@ -153,10 +189,15 @@ Blockly.FieldColour.COLUMNS = 7;
 * Set a custom colour grid for this field.
 * @param {Array.<string>} colours Array of colours for this block,
 *     or null to use default (Blockly.FieldColour.COLOURS).
+ * @param {Array.<string>} opt_titles Optional array of colour tooltips,
+ *     or null to use default (Blockly.FieldColour.TITLES).
 * @return {!Blockly.FieldColour} Returns itself (for method chaining).
 */
-Blockly.FieldColour.prototype.setColours = function(colours) {
+Blockly.FieldColour.prototype.setColours = function(colours, opt_titles) {
  this.colours_ = colours;
+  if (opt_titles !== undefined) {
+    this.titles_ = opt_titles;
+  }
  return this;
 };

@@ -185,52 +226,80 @@ Blockly.FieldColour.prototype.showEditor_ = function() {

  // Create and add the colour picker, then record the size.
  var picker = this.createWidget_();
-  var paletteSize = goog.style.getSize(picker.getElement());
+  Blockly.WidgetDiv.DIV.appendChild(picker);
+  var paletteSize = goog.style.getSize(picker);

  // Position the picker to line up with the field.
  Blockly.WidgetDiv.positionWithAnchor(viewportBBox, anchorBBox, paletteSize,
      this.sourceBlock_.RTL);

-  // Configure event handler.
-  var thisField = this;
-  Blockly.FieldColour.changeEventKey_ = goog.events.listen(picker,
-      goog.ui.ColorPicker.EventType.CHANGE,
-      function(event) {
-        var colour = event.target.getSelectedColor() || '#000000';
-        Blockly.WidgetDiv.hide();
-        if (thisField.sourceBlock_) {
-          // Call any validation function, and allow it to override.
-          colour = thisField.callValidator(colour);
-        }
-        if (colour !== null) {
-          thisField.setValue(colour);
-        }
-      });
+  // Configure event handler on the table to listen for any event in a cell.
+  Blockly.FieldColour.onUpWrapper_ = Blockly.bindEvent_(picker,
+      'mouseup', this, this.onClick_);
 };

 /**
- * Create a color picker widget and render it inside the widget div.
- * @return {!goog.ui.ColorPicker} The newly created color picker.
+ * Handle a click on a colour cell.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.FieldColour.prototype.onClick_ = function(e) {
+  var cell = e.target;
+  if (cell && !cell.label) {
+    // The target element is the 'div', back out to the 'td'.
+    cell = cell.parentNode;
+  }
+  var colour = cell && cell.label;
+  Blockly.WidgetDiv.hide();
+  if (this.sourceBlock_) {
+    // Call any validation function, and allow it to override.
+    colour = this.callValidator(colour);
+  }
+  if (colour !== null) {
+    this.setValue(colour);
+  }
+};
+
+/**
+ * Create a colour picker widget.
+ * @return {!Element} The newly created colour picker.
 * @private
 */
 Blockly.FieldColour.prototype.createWidget_ = function() {
-  // Create the palette using Closure.
-  var picker = new goog.ui.ColorPicker();
-  picker.setSize(this.columns_ || Blockly.FieldColour.COLUMNS);
-  picker.setColors(this.colours_ || Blockly.FieldColour.COLOURS);
-  var div = Blockly.WidgetDiv.DIV;
-  picker.render(div);
-  picker.setSelectedColor(this.getValue());
-  return picker;
+  var columns = this.columns_ || Blockly.FieldColour.COLUMNS;
+  var colours = this.colours_ || Blockly.FieldColour.COLOURS;
+  var titles = this.titles_ || Blockly.FieldColour.TITLES;
+  var selectedColour = this.getValue();
+  // Create the palette.
+  var table = document.createElement('table');
+  table.className = 'blocklyColourTable';
+  var row;
+  for (var i = 0; i < colours.length; i++) {
+    if (i % columns == 0) {
+      row = document.createElement('tr');
+      table.appendChild(row);
+    }
+    var cell = document.createElement('td');
+    row.appendChild(cell);
+    var div = document.createElement('div');
+    cell.appendChild(div);
+    cell.label = colours[i];  // This becomes the value, if clicked.
+    cell.title = titles[i] || colours[i];
+    div.style.backgroundColor = colours[i];
+    if (colours[i] == selectedColour) {
+      div.className = 'blocklyColourSelected';
+    }
+  }
+  return table;
 };

 /**
- * Hide the colour palette.
+ * Hide the colour picker widget.
 * @private
 */
 Blockly.FieldColour.widgetDispose_ = function() {
-  if (Blockly.FieldColour.changeEventKey_) {
-    goog.events.unlistenByKey(Blockly.FieldColour.changeEventKey_);
+  if (Blockly.FieldColour.onUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.FieldColour.onUpWrapper_);
  }
  Blockly.Events.setGroup(false);
 };
--- a/core/touch.js
+++ b/core/touch.js
@@ -152,8 +152,8 @@ Blockly.Touch.shouldHandleEvent = function(e) {
 Blockly.Touch.getTouchIdentifierFromEvent = function(e) {
  return e.pointerId != undefined ? e.pointerId :
      (e.changedTouches && e.changedTouches[0] &&
-      e.changedTouches[0].identifier != undefined &&
-      e.changedTouches[0].identifier != null) ?
+      e.changedTouches[0].identifier !== undefined &&
+      e.changedTouches[0].identifier !== null) ?
      e.changedTouches[0].identifier : 'mouse';
 };

@@ -174,8 +174,8 @@ Blockly.Touch.checkTouchIdentifier = function(e) {

  // if (Blockly.touchIdentifier_ )is insufficient because Android touch
  // identifiers may be zero.
-  if (Blockly.Touch.touchIdentifier_ != undefined &&
-      Blockly.Touch.touchIdentifier_ != null) {
+  if (Blockly.Touch.touchIdentifier_ !== undefined &&
+      Blockly.Touch.touchIdentifier_ !== null) {
    // We're already tracking some touch/mouse event.  Is this from the same
    // source?
    return Blockly.Touch.touchIdentifier_ == identifier;