From 0d482c6488c4e938aae8229e568e1265e97899c8 Mon Sep 17 00:00:00 2001 From: Beka Westberg Date: Thu, 8 Aug 2019 10:45:01 -0700 Subject: [PATCH] Changed colour field to new configuration paradigm. --- core/field_colour.js | 25 ++++--- tests/mocha/field_colour_test.js | 115 +++++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 10 deletions(-) diff --git a/core/field_colour.js b/core/field_colour.js index 72d010e55..4388b212e 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -45,16 +45,28 @@ goog.require('Blockly.utils.Size'); * @param {Function=} opt_validator A function that is called to validate * changes to the field's value. Takes in a colour string & returns a * validated colour string ('#rrggbb' format), or null to abort the change. + * @param {Object=} opt_config A map of options used to configure the field. + * See the documentation for a list of properties this parameter supports. + * https://developers.google.com/blockly/guides/create-custom-blocks/fields/built-in-fields/colour * @extends {Blockly.Field} * @constructor */ -Blockly.FieldColour = function(opt_value, opt_validator) { +Blockly.FieldColour = function(opt_value, opt_validator, opt_config) { + if (opt_config) { + if (opt_config['colourOptions']) { + this.setColours(opt_config['colourOptions'], opt_config['colourTitles']); + } + if (opt_config['columns']) { + this.setColumns(opt_config['columns']); + } + } + opt_value = this.doClassValidation_(opt_value); if (opt_value === null) { opt_value = Blockly.FieldColour.COLOURS[0]; } Blockly.FieldColour.superClass_.constructor.call( - this, opt_value, opt_validator); + this, opt_value, opt_validator, opt_config); }; goog.inherits(Blockly.FieldColour, Blockly.Field); @@ -66,14 +78,7 @@ goog.inherits(Blockly.FieldColour, Blockly.Field); * @nocollapse */ Blockly.FieldColour.fromJson = function(options) { - var field = new Blockly.FieldColour(options['colour']); - if (options['colourOptions']) { - field.setColours(options['colourOptions'], options['colourTitles']); - } - if (options['columns']) { - field.setColumns(options['columns']); - } - return field; + return new Blockly.FieldColour(options['colour'], null, options); }; /** diff --git a/tests/mocha/field_colour_test.js b/tests/mocha/field_colour_test.js index 28d5cc43f..8d48da0d3 100644 --- a/tests/mocha/field_colour_test.js +++ b/tests/mocha/field_colour_test.js @@ -269,4 +269,119 @@ suite('Colour Fields', function() { }); }); }); + suite('Customizations', function() { + suite('Colours and Titles', function() { + function assertColoursAndTitles(field, colours, titles) { + var editor = field.dropdownCreate_(); + var index = 0; + var node = editor.firstChild.firstChild; + while (node) { + chai.assert.equal(node.getAttribute('title'), titles[index]); + chai.assert.equal( + Blockly.utils.colour.parse( + node.style.backgroundColor), + colours[index]); + + var nextNode = node.nextSibling; + if (!nextNode) { + nextNode = node.parentElement.nextSibling; + if (!nextNode) { + break; + } + nextNode = nextNode.firstChild; + } + node = nextNode; + + index++; + } + } + test('Constants', function() { + var colours = Blockly.FieldColour.COLOURS; + var titles = Blockly.FieldColour.TITLES; + // Note: Developers shouldn't actually do this. IMO they should + // change the file and then recompile. But this is fine for testing. + Blockly.FieldColour.COLOURS = ['#aaaaaa']; + Blockly.FieldColour.TITLES = ['grey']; + var field = new Blockly.FieldColour(); + + assertColoursAndTitles(field, ['#aaaaaa'], ['grey']); + + Blockly.FieldColour.COLOURS = colours; + Blockly.FieldColour.TITLES = titles; + }); + test('JS Constructor', function() { + var field = new Blockly.FieldColour('#aaaaaa', null, { + colourOptions: ['#aaaaaa'], + colourTitles: ['grey'] + }); + assertColoursAndTitles(field, ['#aaaaaa'], ['grey']); + }); + test('JSON Definition', function() { + var field = Blockly.FieldColour.fromJson({ + colour: '#aaaaaa', + colourOptions: ['#aaaaaa'], + colourTitles: ['grey'] + }); + assertColoursAndTitles(field, ['#aaaaaa'], ['grey']); + }); + test('setColours', function() { + var field = new Blockly.FieldColour(); + field.setColours(['#aaaaaa'], ['grey']); + assertColoursAndTitles(field, ['#aaaaaa'], ['grey']); + }); + test('Titles Undefined', function() { + var field = new Blockly.FieldColour(); + field.setColours(['#aaaaaa']); + assertColoursAndTitles(field, ['#aaaaaa'], ['#aaaaaa']); + }); + test('Some Titles Undefined', function() { + var field = new Blockly.FieldColour(); + field.setColours(['#aaaaaa', '#ff0000'], ['grey']); + assertColoursAndTitles(field, + ['#aaaaaa', '#ff0000'], ['grey', '#ff0000']); + }); + // This is kinda derpy behavior, but I wanted to document it. + test('Overwriting Colours While Leaving Titles', function() { + var field = new Blockly.FieldColour(); + field.setColours(['#aaaaaa'], ['grey']); + field.setColours(['#ff0000']); + assertColoursAndTitles(field, ['#ff0000'], ['grey']); + }); + }); + suite('Columns', function() { + function assertColumns(field, columns) { + var editor = field.dropdownCreate_(); + chai.assert.equal(editor.firstChild.children.length, columns); + } + test('Constants', function() { + var columns = Blockly.FieldColour.COLUMNS; + // Note: Developers shouldn't actually do this. IMO they should edit + // the file and tehn recompile. But this is fine for testing. + Blockly.FieldColour.COLUMNS = 3; + var field = new Blockly.FieldColour(); + + assertColumns(field, 3); + + Blockly.FieldColour.COLUMNS = columns; + }); + test('JS Constructor', function() { + var field = new Blockly.FieldColour('#ffffff', null, { + columns: 3 + }); + assertColumns(field, 3); + }); + test('JSON Definition', function() { + var field = Blockly.FieldColour.fromJson({ + 'colour': '#ffffff', + 'columns': 3 + }); + assertColumns(field, 3); + }); + test('setColumns', function() { + var field = new Blockly.FieldColour(); + field.setColumns(3); + assertColumns(field, 3); + }); + }); + }); });