Merge pull request #2877 from BeksOmega/feature/ColourFieldConfig

Changed Colour field to New Configuration Paradigm

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);
 };
 
 /**

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);
+      });
+    });
+  });
 });