mirror of
https://github.com/scratchfoundation/scratch-blocks.git
synced 2025-08-22 10:59:29 -04:00
Replace colour grid with sliders
This commit is contained in:
Paul Kaplan
parent
1b897b3f3a
commit
c55bc4b8c3
2 changed files with 232 additions and 151 deletions
84
core/css.js
84
core/css.js
|
|
@ -790,54 +790,52 @@ 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-collapse: collapse;',
|
||||
'}',
|
||||
|
||||
'.blocklyWidgetDiv .goog-palette-cell {',
|
||||
'height: 13px;',
|
||||
'width: 15px;',
|
||||
'margin: 0;',
|
||||
'border: 0;',
|
||||
'text-align: center;',
|
||||
'vertical-align: middle;',
|
||||
'font-size: 1px;',
|
||||
'}',
|
||||
|
||||
'.blocklyWidgetDiv .goog-palette-colorswatch {',
|
||||
'.blocklyDropDownDiv .goog-slider-horizontal {',
|
||||
'margin: 8px;',
|
||||
'height: 22px;',
|
||||
'width: 150px;',
|
||||
'position: relative;',
|
||||
'height: 13px;',
|
||||
'width: 15px;',
|
||||
'outline: none;',
|
||||
'border-radius: 11px;',
|
||||
'margin-bottom: 20px;',
|
||||
'}',
|
||||
|
||||
'.blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {',
|
||||
'border: 1px solid #FFF;',
|
||||
'box-sizing: border-box;',
|
||||
'.blocklyDropDownDiv .goog-slider-horizontal .goog-slider-thumb {',
|
||||
'width: 26px;',
|
||||
'height: 26px;',
|
||||
'margin-top: -1px;',
|
||||
'position: absolute;',
|
||||
'background-color: white;',
|
||||
'border-radius: 100%;',
|
||||
'-webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);',
|
||||
'-moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);',
|
||||
'box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);',
|
||||
'}',
|
||||
|
||||
'.blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {',
|
||||
'border: 1px solid #000;',
|
||||
'box-sizing: border-box;',
|
||||
'color: #fff;',
|
||||
'.scratchEyedropper {',
|
||||
'background: none;',
|
||||
'outline: none;',
|
||||
'border: none;',
|
||||
'width: 100%;',
|
||||
'text-align: center;',
|
||||
'border-top: 1px solid #ddd;',
|
||||
'padding-top: 5px;',
|
||||
'cursor: pointer;',
|
||||
'}',
|
||||
|
||||
'.scratchColorPickerLabel {',
|
||||
'font-family: "Helvetica Neue", Helvetica, sans-serif;',
|
||||
'font-size: 0.65rem;',
|
||||
'color: $colour_toolboxText;',
|
||||
'margin: 8px;',
|
||||
'}',
|
||||
|
||||
'.scratchColorPickerLabelText {',
|
||||
'font-weight: bold;',
|
||||
'}',
|
||||
|
||||
'.scratchColorPickerReadout {',
|
||||
'margin-left: 10px;',
|
||||
'}',
|
||||
|
||||
/* Copied from: goog/css/menu.css */
|
||||
|
|
|
|||
|
|
@ -27,10 +27,12 @@
|
|||
goog.provide('Blockly.FieldColour');
|
||||
|
||||
goog.require('Blockly.Field');
|
||||
goog.require('Blockly.DropDownDiv');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.ui.ColorPicker');
|
||||
goog.require('goog.color');
|
||||
goog.require('goog.ui.Slider');
|
||||
|
||||
/**
|
||||
* Class for a colour input field.
|
||||
|
|
@ -63,6 +65,18 @@ Blockly.FieldColour.prototype.colours_ = null;
|
|||
*/
|
||||
Blockly.FieldColour.prototype.columns_ = 0;
|
||||
|
||||
/**
|
||||
* Function to be called if eyedropper can be activated.
|
||||
* If defined, an eyedropper button will be added to the color picker.
|
||||
* The button calls this function with a callback to update the field value.
|
||||
*/
|
||||
Blockly.FieldColour.activateEyedropper = null;
|
||||
|
||||
/**
|
||||
* Path to the eyedropper svg icon.
|
||||
*/
|
||||
Blockly.FieldColour.EYEDROPPER_PATH = 'eyedropper.svg';
|
||||
|
||||
/**
|
||||
* Install this field on a block.
|
||||
* @param {!Blockly.Block} block The block containing this field.
|
||||
|
|
@ -72,19 +86,6 @@ Blockly.FieldColour.prototype.init = function(block) {
|
|||
this.setValue(this.getValue());
|
||||
};
|
||||
|
||||
/**
|
||||
* Mouse cursor style when over the hotspot that initiates the editor.
|
||||
*/
|
||||
Blockly.FieldColour.prototype.CURSOR = 'default';
|
||||
|
||||
/**
|
||||
* Close the colour picker if this input is being deleted.
|
||||
*/
|
||||
Blockly.FieldColour.prototype.dispose = function() {
|
||||
Blockly.WidgetDiv.hideIfOwner(this);
|
||||
Blockly.FieldColour.superClass_.dispose.call(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Return the current colour.
|
||||
* @return {string} Current colour in '#rrggbb' format.
|
||||
|
|
@ -94,10 +95,11 @@ Blockly.FieldColour.prototype.getValue = function() {
|
|||
};
|
||||
|
||||
/**
|
||||
* Set the colour.
|
||||
* Set the colour. If opt_fromSliders is true, do not update the sliders.
|
||||
* @param {string} colour The new colour in '#rrggbb' format.
|
||||
* @param {boolea} opt_fromSliders Flag to prevent sliders from recursing on themselves.
|
||||
*/
|
||||
Blockly.FieldColour.prototype.setValue = function(colour) {
|
||||
Blockly.FieldColour.prototype.setValue = function(colour, opt_fromSliders) {
|
||||
if (this.sourceBlock_ && Blockly.Events.isEnabled() &&
|
||||
this.colour_ != colour) {
|
||||
Blockly.Events.fire(new Blockly.Events.BlockChange(
|
||||
|
|
@ -107,7 +109,84 @@ Blockly.FieldColour.prototype.setValue = function(colour) {
|
|||
if (this.sourceBlock_) {
|
||||
// Set the primary, secondary and tertiary colour to this value.
|
||||
// The renderer expects to be able to use the secondary color as the fill for a shadow.
|
||||
this.sourceBlock_.setColour(colour, colour, colour);
|
||||
this.sourceBlock_.setColour(colour, colour, this.sourceBlock_.getColourTertiary());
|
||||
}
|
||||
if (!opt_fromSliders) {
|
||||
this.updateSliderHandles_();
|
||||
}
|
||||
this.updateDom_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the hue, saturation or value CSS gradient for the slide backgrounds.
|
||||
* @param {string} channel – Either "hue", "saturation" or "value".
|
||||
* @return {string} Array color hex color stops for the given channel
|
||||
*/
|
||||
Blockly.FieldColour.prototype.createColorStops_ = function(channel) {
|
||||
var hsv = goog.color.hexToHsv(this.getValue());
|
||||
var stops = [];
|
||||
for(var n = 0; n <= 360; n += 20) {
|
||||
switch (channel) {
|
||||
case 'hue':
|
||||
stops.push(goog.color.hsvToHex(n, hsv[1], hsv[2]));
|
||||
break;
|
||||
case 'saturation':
|
||||
stops.push(goog.color.hsvToHex(hsv[0], n / 360, hsv[2]));
|
||||
break;
|
||||
case 'brightness':
|
||||
stops.push(goog.color.hsvToHex(hsv[0], hsv[1], 255 * n / 360));
|
||||
break;
|
||||
}
|
||||
}
|
||||
return stops;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the gradient CSS properties for the given node and channel
|
||||
* @param {Node} node - The DOM node the gradient will be set on.
|
||||
* @param {string} channel – Either "hue", "saturation" or "value".
|
||||
*/
|
||||
Blockly.FieldColour.prototype.setGradient_ = function(node, channel) {
|
||||
var stops = this.createColorStops_(channel);
|
||||
goog.style.setStyle(node, 'background',
|
||||
'-moz-linear-gradient(left, ' + stops.join(',') + ')');
|
||||
goog.style.setStyle(node, 'background',
|
||||
'-webkit-linear-gradient(left, ' + stops.join(',') + ')');
|
||||
goog.style.setStyle(node, 'background',
|
||||
'-o-linear-gradient(left, ' + stops.join(',') + ')');
|
||||
goog.style.setStyle(node, 'background',
|
||||
'-ms-linear-gradient(left, ' + stops.join(',') + ')');
|
||||
goog.style.setStyle(node, 'background',
|
||||
'linear-gradient(left, ' + stops.join(',') + ')');
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the readouts and slider backgrounds after value has changed.
|
||||
*/
|
||||
Blockly.FieldColour.prototype.updateDom_ = function() {
|
||||
if (this.hueSlider_) {
|
||||
// Update the slider backgrounds
|
||||
this.setGradient_(this.hueSlider_.getElement(), 'hue');
|
||||
this.setGradient_(this.saturationSlider_.getElement(), 'saturation');
|
||||
this.setGradient_(this.brightnessSlider_.getElement(), 'brightness');
|
||||
|
||||
// Update the readouts
|
||||
var hsv = goog.color.hexToHsv(this.getValue());
|
||||
this.hueReadout_.innerHTML = Math.floor(100 * hsv[0] / 360).toFixed(0);
|
||||
this.saturationReadout_.innerHTML = Math.floor(100 * hsv[1]).toFixed(0);
|
||||
this.brightnessReadout_.innerHTML = Math.floor(100 * hsv[2] / 255).toFixed(0);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the slider handle positions
|
||||
*/
|
||||
Blockly.FieldColour.prototype.updateSliderHandles_ = function() {
|
||||
if (this.hueSlider_) {
|
||||
var hsv = goog.color.hexToHsv(this.getValue());
|
||||
this.hueSlider_.animatedSetValue(hsv[0]);
|
||||
this.saturationSlider_.animatedSetValue(hsv[1]);
|
||||
this.brightnessSlider_.animatedSetValue(hsv[2]);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -125,27 +204,6 @@ Blockly.FieldColour.prototype.getText = function() {
|
|||
return colour;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the fixed height and width.
|
||||
* @return {!goog.math.Size} Height and width.
|
||||
*/
|
||||
Blockly.FieldColour.prototype.getSize = function() {
|
||||
return new goog.math.Size(Blockly.BlockSvg.FIELD_WIDTH, Blockly.BlockSvg.FIELD_HEIGHT);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @type {!Array.<string>}
|
||||
*/
|
||||
Blockly.FieldColour.COLOURS = goog.ui.ColorPicker.SIMPLE_GRID_COLORS;
|
||||
|
||||
/**
|
||||
* Number of columns in the palette.
|
||||
*/
|
||||
Blockly.FieldColour.COLUMNS = 7;
|
||||
|
||||
/**
|
||||
* Function to be called if eyedropper can be activated.
|
||||
* If defined, an eyedropper button will be added to the color picker.
|
||||
|
|
@ -160,25 +218,54 @@ Blockly.FieldColour.activateEyedropper_ = null;
|
|||
Blockly.FieldColour.EYEDROPPER_PATH = 'eyedropper.svg';
|
||||
|
||||
/**
|
||||
* 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).
|
||||
* @return {!Blockly.FieldColour} Returns itself (for method chaining).
|
||||
* Create label and readout DOM elements, returning the readout
|
||||
* @param {string} labelText - Text for the label
|
||||
* @return {Array} The container node and the readout node.
|
||||
* @private
|
||||
*/
|
||||
Blockly.FieldColour.prototype.setColours = function(colours) {
|
||||
this.colours_ = colours;
|
||||
return this;
|
||||
Blockly.FieldColour.prototype.createLabelDom_ = function(labelText) {
|
||||
var labelContainer = document.createElement('div');
|
||||
labelContainer.setAttribute('class', 'scratchColorPickerLabel');
|
||||
var readout = document.createElement('span');
|
||||
readout.setAttribute('class', 'scratchColorPickerReadout');
|
||||
var label = document.createElement('span');
|
||||
label.setAttribute('class', 'scratchColorPickerLabelText');
|
||||
label.innerHTML = labelText;
|
||||
labelContainer.appendChild(label);
|
||||
labelContainer.appendChild(readout);
|
||||
return [labelContainer, readout];
|
||||
};
|
||||
|
||||
/**
|
||||
* Set a custom grid size for this field.
|
||||
* @param {number} columns Number of columns for this block,
|
||||
* or 0 to use default (Blockly.FieldColour.COLUMNS).
|
||||
* @return {!Blockly.FieldColour} Returns itself (for method chaining).
|
||||
* Factory for creating the different slider callbacks
|
||||
* @param {string} channel - One of "hue", "saturation" or "brightness"
|
||||
* @return {function} the callback for slider update
|
||||
*/
|
||||
Blockly.FieldColour.prototype.setColumns = function(columns) {
|
||||
this.columns_ = columns;
|
||||
return this;
|
||||
Blockly.FieldColour.prototype.sliderCallbackFactory = function(channel) {
|
||||
var thisField = this;
|
||||
return function(event) {
|
||||
var channelValue = event.target.getValue();
|
||||
var hsv = goog.color.hexToHsv(thisField.getValue());
|
||||
switch (channel) {
|
||||
case 'hue':
|
||||
hsv[0] = channelValue;
|
||||
break;
|
||||
case 'saturation':
|
||||
hsv[1] = channelValue;
|
||||
break;
|
||||
case 'brightness':
|
||||
hsv[2] = channelValue;
|
||||
break;
|
||||
}
|
||||
var colour = goog.color.hsvToHex(hsv[0], hsv[1], hsv[2]);
|
||||
if (thisField.sourceBlock_) {
|
||||
// Call any validation function, and allow it to override.
|
||||
colour = thisField.callValidator(colour);
|
||||
}
|
||||
if (colour !== null) {
|
||||
thisField.setValue(colour, true);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -197,47 +284,47 @@ Blockly.FieldColour.prototype.activateEyedropperInternal_ = function() {
|
|||
* @private
|
||||
*/
|
||||
Blockly.FieldColour.prototype.showEditor_ = function() {
|
||||
Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL,
|
||||
Blockly.FieldColour.widgetDispose_);
|
||||
// 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);
|
||||
Blockly.DropDownDiv.hideWithoutAnimation();
|
||||
Blockly.DropDownDiv.clearContent();
|
||||
var div = Blockly.DropDownDiv.getContentDiv();
|
||||
|
||||
// Position the palette to line up with the field.
|
||||
// Record windowSize and scrollOffset before adding the palette.
|
||||
var windowSize = goog.dom.getViewportSize();
|
||||
var scrollOffset = goog.style.getViewportPageOffset(document);
|
||||
var xy = this.getAbsoluteXY_();
|
||||
var borderBBox = this.getScaledBBox_();
|
||||
var div = Blockly.WidgetDiv.DIV;
|
||||
picker.render(div);
|
||||
picker.setSelectedColor(this.getValue());
|
||||
// Record paletteSize after adding the palette.
|
||||
var paletteSize = goog.style.getSize(picker.getElement());
|
||||
var hueElements = this.createLabelDom_('Hue');
|
||||
div.appendChild(hueElements[0]);
|
||||
this.hueReadout_ = hueElements[1];
|
||||
this.hueSlider_ = new goog.ui.Slider();
|
||||
this.hueSlider_.setUnitIncrement(5);
|
||||
this.hueSlider_.setMinimum(0);
|
||||
this.hueSlider_.setMaximum(359);
|
||||
this.hueSlider_.render(div);
|
||||
|
||||
// Flip the palette vertically if off the bottom.
|
||||
if (xy.y + paletteSize.height + borderBBox.height >=
|
||||
windowSize.height + scrollOffset.y) {
|
||||
xy.y -= paletteSize.height - 1;
|
||||
} else {
|
||||
xy.y += borderBBox.height - 1;
|
||||
}
|
||||
if (this.sourceBlock_.RTL) {
|
||||
xy.x += borderBBox.width;
|
||||
xy.x -= paletteSize.width;
|
||||
// Don't go offscreen left.
|
||||
if (xy.x < scrollOffset.x) {
|
||||
xy.x = scrollOffset.x;
|
||||
}
|
||||
} else {
|
||||
// Don't go offscreen right.
|
||||
if (xy.x > windowSize.width + scrollOffset.x - paletteSize.width) {
|
||||
xy.x = windowSize.width + scrollOffset.x - paletteSize.width;
|
||||
}
|
||||
}
|
||||
Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
|
||||
this.sourceBlock_.RTL);
|
||||
var saturationElements = this.createLabelDom_('Saturation');
|
||||
div.appendChild(saturationElements[0]);
|
||||
this.saturationReadout_ = saturationElements[1];
|
||||
this.saturationSlider_ = new goog.ui.Slider();
|
||||
this.saturationSlider_.setUnitIncrement(0.01);
|
||||
this.saturationSlider_.setStep(0.001);
|
||||
this.saturationSlider_.setMinimum(0.01);
|
||||
this.saturationSlider_.setMaximum(0.99);
|
||||
this.saturationSlider_.render(div);
|
||||
|
||||
var brightnessElements = this.createLabelDom_('Brightness');
|
||||
div.appendChild(brightnessElements[0]);
|
||||
this.brightnessReadout_ = brightnessElements[1];
|
||||
this.brightnessSlider_ = new goog.ui.Slider();
|
||||
this.brightnessSlider_.setUnitIncrement(2);
|
||||
this.brightnessSlider_.setMinimum(5);
|
||||
this.brightnessSlider_.setMaximum(255);
|
||||
this.brightnessSlider_.render(div);
|
||||
|
||||
Blockly.FieldColour.hueChangeEventKey_ = goog.events.listen(this.hueSlider_,
|
||||
goog.ui.Component.EventType.CHANGE,
|
||||
this.sliderCallbackFactory('hue'));
|
||||
Blockly.FieldColour.saturationChangeEventKey_ = goog.events.listen(this.saturationSlider_,
|
||||
goog.ui.Component.EventType.CHANGE,
|
||||
this.sliderCallbackFactory('saturation'));
|
||||
Blockly.FieldColour.brightnessChangeEventKey_ = goog.events.listen(this.brightnessSlider_,
|
||||
goog.ui.Component.EventType.CHANGE,
|
||||
this.sliderCallbackFactory('brightness'));
|
||||
|
||||
if (Blockly.FieldColour.activateEyedropper_) {
|
||||
var button = document.createElement('button');
|
||||
|
|
@ -252,21 +339,11 @@ Blockly.FieldColour.prototype.showEditor_ = function() {
|
|||
);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
Blockly.DropDownDiv.setColour('#ffffff', '#dddddd');
|
||||
Blockly.DropDownDiv.setCategory(this.sourceBlock_.parentBlock_.getCategory());
|
||||
Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_);
|
||||
|
||||
this.setValue(this.getValue());
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -274,8 +351,14 @@ Blockly.FieldColour.prototype.showEditor_ = function() {
|
|||
* @private
|
||||
*/
|
||||
Blockly.FieldColour.widgetDispose_ = function() {
|
||||
if (Blockly.FieldColour.changeEventKey_) {
|
||||
goog.events.unlistenByKey(Blockly.FieldColour.changeEventKey_);
|
||||
if (Blockly.FieldColour.hueChangeEventKey_) {
|
||||
goog.events.unlistenByKey(Blockly.FieldColour.hueChangeEventKey_);
|
||||
}
|
||||
if (Blockly.FieldColour.saturationChangeEventKey_) {
|
||||
goog.events.unlistenByKey(Blockly.FieldColour.saturationChangeEventKey_);
|
||||
}
|
||||
if (Blockly.FieldColour.brightnessChangeEventKey_) {
|
||||
goog.events.unlistenByKey(Blockly.FieldColour.brightnessChangeEventKey_);
|
||||
}
|
||||
if (Blockly.FieldColour.eyedropperEventData_) {
|
||||
Blockly.unbindEvent_(Blockly.FieldColour.eyedropperEventData_);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue