/// <summary>
/// Initialize the color picker in workspace factory.
/// </summary>
/// <param name="controller">The controller for the workspace
/// factory tab.</param>
private static void initColorPicker_(WorkspaceFactoryController controller)
{
// Array of Blockly category colors, variety of hues with saturation 45%
// and value 65% as specified in Blockly Developer documentation:
// developers.google.com/blockly/guides/create-custom-blocks/define-blocks
var colors = new JsArray <string> {
"#A6795C", "#A69F5C", "#88A65C", "#5EA65C", "#5CA67E", "#5CA6A4", "#5C83A6",
"#5E5CA6", "#835CA6", "#A65CA4", "#A65C7E", "#A65C5E",
"#A6725C", "#A6975C", "#90A65C", "#66A65C", "#5CA677", "#5CA69C", "#5C8BA6",
"#5C61A6", "#7C5CA6", "#A15CA6", "#A65C86", "#A65C61",
"#A66A5C", "#A6905C", "#97A65C", "#6FA65C", "#5CA66F", "#5CA695", "#5C92A6",
"#5C6AA6", "#745CA6", "#9A5CA6", "#A65C8D", "#A65C66",
"#A6635C", "#A6885C", "#9FA65C", "#79A65C", "#5CA668", "#5CA68D", "#5C9AA6",
"#5C74A6", "#6D5CA6", "#925CA6", "#A65C95", "#A65C6F",
"#A65C5C", "#A6815C", "#A6A65C", "#81A65C", "#5CA661", "#5CA686", "#5CA1A6",
"#5C7CA6", "#665CA6", "#8B5CA6", "#A65C9C", "#A65C77"
};
// Create color picker with specific set of Blockly colors.
var colorPicker = new goog.ui.ColorPicker();
colorPicker.setSize(12);
colorPicker.setColors(colors);
// Create and render the popup color picker and attach to button.
var popupPicker = new goog.ui.PopupColorPicker(null, colorPicker);
popupPicker.render();
popupPicker.attach(Document.GetElementById("dropdown_color"));
popupPicker.setFocusable(true);
goog.events.listen(popupPicker, "change", new Action <Event>((e) => {
controller.changeSelectedCategoryColor(popupPicker.getSelectedColor());
BlockFactory.blocklyFactory.closeModal();
}));
}
/// <summary>
/// Returns an unrendered instance of the color picker. The colors and layout
/// are a simple color grid, the same as the old Gmail color picker.
/// </summary>
/// <param name="opt_domHelper">Optional DOM helper.</param>
/// <returns>The unrendered instance.</returns>
public static goog.ui.ColorPicker createSimpleColorGrid(goog.dom.DomHelper opt_domHelper = null)
{
var cp = new goog.ui.ColorPicker(opt_domHelper);
cp.setSize(7);
cp.setColors(new JsArray <string>(goog.ui.ColorPicker.SIMPLE_GRID_COLORS));
return(cp);
}
/// <summary>
/// Create a palette under the colour field.
/// </summary>
public override void showEditor_(bool opt_quietInput)
{
WidgetDiv.show(this, this.sourceBlock_.RTL,
new Action(FieldColour.widgetDispose_));
// Create the palette using Closure.
var picker = new goog.ui.ColorPicker();
picker.setSize(this.columns_ ?? FieldColour.COLUMNS);
picker.setColors(new JsArray <string>(this.colours_ ?? FieldColour.COLOURS));
// 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.Instance);
var xy = this.getAbsoluteXY_();
var borderBBox = this.getScaledBBox_();
var div = WidgetDiv.DIV;
picker.render(div);
picker.setSelectedColor(this.getValue());
// Record paletteSize after adding the palette.
var paletteSize = goog.style.getSize(picker.getElement());
// 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;
}
}
WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
this.sourceBlock_.RTL);
// Configure event handler.
var thisField = this;
FieldColour.changeEventKey_ = goog.events.listen(picker,
goog.ui.ColorPicker.EventType.CHANGE,
new Action <goog.events.Event>((e) => {
string colour = ((goog.ui.ColorPicker)e.target).getSelectedColor() ?? "#000000";
WidgetDiv.hide();
if (thisField.sourceBlock_ != null)
{
// Call any validation function, and allow it to override.
colour = thisField.callValidator(colour);
}
if (colour != null)
{
thisField.setValue(colour);
}
}));
}