redfin-color_field.patch

diff --git a/css/color_field_widget_box.css b/css/color_field_widget_box.css
index d224c0d..1ef10c2 100644
--- a/css/color_field_widget_box.css
+++ b/css/color_field_widget_box.css
@@ -8,6 +8,7 @@
   font-size: 1.2em;
   margin: 0 3px;
   padding: 1px 8px;
+  box-shadow: 0 0 1px #000;
 }

 .color_field_widget_box__square.active,
diff --git a/js/color_field_widget_box.jquery.js b/js/color_field_widget_box.jquery.js
index 23bef75..2ec4c45 100644
--- a/js/color_field_widget_box.jquery.js
+++ b/js/color_field_widget_box.jquery.js
@@ -20,16 +20,17 @@

             var $context = $(context);

-            var default_colors = settings.color_field.color_field_widget_box.settings.default_colors;
-
             $context.find('.color-field-widget-box-form').each(function (index, element) {
                 var $element = $(element);
                 var $input = $element.prev().find('input');
+                var props = settings.color_field.color_field_widget_box.settings[$element.prop('id')];
+
                 $element.empty().addColorPicker({
                     currentColor: $input.val(),
-                    colors: default_colors,
+                    colors: props.palette,
                     blotchClass:'color_field_widget_box__square',
                     blotchTransparentClass:'color_field_widget_box__square--transparent',
+                    addTransparentBlotch: !props.required,
                     clickCallback: function(color) {
                         $input.val(color).trigger('change');
                     }
diff --git a/js/color_field_widget_box.js b/js/color_field_widget_box.js
index 5839993..7bf17e1 100644
--- a/js/color_field_widget_box.js
+++ b/js/color_field_widget_box.js
@@ -1,74 +1,68 @@
 /**
  * Color Field jQuery
  */
-(function ($) {
-jQuery.fn.addColorPicker = function (props) {
-  if (!props) { props = []; }
+(function ($, Drupal) {

-  props = jQuery.extend({
-    currentColor:'',
-    blotchElemType: 'span',
-    blotchClass:'colorBox',
-    blotchTransparentClass:'transparentBox',
-    clickCallback: function(ignoredColor) {},
-    iterationCallback: null,
-    fillString: ' ',
-    fillStringX: '?',
-    colors: [
-      '#AC725E','#D06B64','#F83A22', '#FA573C', '#FF7537', '#FFAD46',
-      '#42D692','#16A765', '#7BD148','#B3DC6C','#FBE983',
-      '#92E1C0', '#9FE1E7', '#9FC6E7', '#4986E7','#9A9CFF',
-      '#B99AFF','#C2C2C2','#CABDBF','#CCA6AC','#F691B2',
-      '#CD74E6','#A47AE2',
-    ]
-  }, props);
+  Drupal.behaviors.color_field_box = {
+    attach: function (context, settings) {

-  var count = props.colors.length;
-  for (var i = 0; i < count; ++i) {
-    var color = props.colors[i];
-    var elem = jQuery('<' + props.blotchElemType + '/>')
-      .addClass(props.blotchClass)
-      .attr('color',color)
-      .css('background-color',color);
-    // jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))!
-    if (props.currentColor == color) {
-      elem.addClass('active');
-    }
-    if (props.clickCallback) {
-      elem.click(function() {
-        jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
-        jQuery(this).addClass('active');
-        props.clickCallback(jQuery(this).attr('color'));
-      });
-    }
-    this.append(elem);
-    if (props.iterationCallback) {
-      props.iterationCallback(this, elem, color, i);
-    }
-  }
+      jQuery.fn.addColorPicker = function (props) {
+
+        'use strict';
+
+        if (!props) { props = []; }

-  var elem = jQuery('<' + props.blotchElemType + '/>')
-    .addClass(props.blotchTransparentClass)
-    .attr('color', '')
-    .css('background-color', '');
+        props = jQuery.extend({
+          currentColor:'',
+          blotchElemType: 'span',
+          blotchClass:'colorBox',
+          blotchTransparentClass:'transparentBox',
+          addTransparentBlotch: true,
+          clickCallback: function(ignoredColor) {},
+          iterationCallback: null,
+          fillString: '&nbsp;',
+          fillStringX: '?',
+          colors: settings.color_field.color_field_widget_box.settings.palette
+        }, props);

-  if (props.currentColor == '') {
-    elem.addClass('active');
-  }

-  if (props.clickCallback) {
-    elem.click(function() {
-      jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
-      jQuery(this).addClass('active');
-      props.clickCallback(jQuery(this).attr('color'));
-    });
-  }
-  this.append(elem);
-  if (props.iterationCallback) {
-    props.iterationCallback(this, elem, color, i);
-  }

-  return this;
-};
+        this.addBlotchElement = function(color, blotchClass) {
+          var elem = jQuery('<' + props.blotchElemType + '/>')
+            .addClass(blotchClass)
+            .attr('color',color)
+            .css('background-color',color);
+          // jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))!
+          if (props.currentColor == color) {
+            elem.addClass('active');
+          }
+          if (props.clickCallback) {
+            elem.click(function() {
+              jQuery(this).parent().children('span').removeClass('active');
+              jQuery(this).addClass('active');
+              props.clickCallback(jQuery(this).attr('color'));
+            });
+          }
+          this.append(elem);
+          if (props.iterationCallback) {
+            props.iterationCallback(this, elem, color, i);
+          }
+        }
+
+        // add all the colors to the picker
+        for( var i = 0; i < props.colors.length; ++i) {
+          var color = props.colors[i];
+          this.addBlotchElement(color, props.blotchClass);
+        }
+
+        // add the transparent blotch if requested (not required field)
+        if (props.addTransparentBlotch) {
+          this.addBlotchElement('', props.blotchTransparentClass);
+        }
+
+        return this;
+      };
+    }
+  };

-})(jQuery);
+})(jQuery, Drupal);
diff --git a/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php b/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
index 8268704..0da9424 100644
--- a/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
+++ b/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
@@ -86,17 +86,20 @@ class ColorFieldWidgetBox extends WidgetBase {
     // title because the actual title display is handled at a higher level by
     // the Field module.

+    $box_id = 'color-box-' . $this->fieldDefinition->getName();
     $element['#theme_wrappers'] = array('color_field_widget_box');
     $element['#attributes']['class'][] = 'container-inline';

     $element['#attached']['library'][] = 'color_field/color-field-widget-box';

     // Set Drupal settings.
-    $settings = [];
+    $settings[$box_id] = [
+      'required' => $this->fieldDefinition->isRequired()
+    ];
     $default_colors = $this->getSetting('default_colors');
     preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
     foreach ($default_colors as $color) {
-      $settings['palette'][] = $color[0];
+      $settings[$box_id]['palette'][] = $color[0];
     }
     $element['#attached']['drupalSettings']['color_field']['color_field_widget_box']['settings'] = $settings;

@@ -120,7 +123,7 @@ class ColorFieldWidgetBox extends WidgetBase {
       '#default_value' => $color,
       '#attributes' => array('class' => array('visually-hidden')),
    );
-    $element['color']['#suffix'] = "<div class='color-field-widget-box-form'></div>";
+    $element['color']['#suffix'] = "<div class='color-field-widget-box-form' id='$box_id'></div>";

     if ($this->getFieldSetting('opacity')) {
       $element['opacity'] = array(