diff --git a/core/css.js b/core/css.js index 4a2eca012..3a1958f5f 100644 --- 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 */ diff --git a/core/field_colour.js b/core/field_colour.js index 19d0ac96b..14dd449f5 100644 --- 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.} * @private */ Blockly.FieldColour.prototype.colours_ = null; /** + * Array of colour tooltips used by this field. If null, use the global list. + * @type {Array.} + * @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.} */ -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.} + */ +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.} colours Array of colours for this block, * or null to use default (Blockly.FieldColour.COLOURS). + * @param {Array.} 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); }; diff --git a/core/touch.js b/core/touch.js index 46b7b4850..8655211dd 100644 --- 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;