Required field fix

fixes #56 fixes #32 Added support for gradient previews
craftpulse · Nov 26, 2020 · 1813ad2 · 1813ad2
1 parent ae057d3
commit 1813ad2
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 107 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,12 +14,12 @@ Fixes issues (#44, #45, #46, #47)
 
 ## 1.3.2 - 2020-8-13 Bugfix
 ElementInterface updated to allow colour preview for custom arrays. Fixes issue #42
-fieldValue conditions for standard colour strings udpated to reflect null update in version 1.3.1. Fixes issue #43
+fieldValue conditions for standard colour strings updated to reflect null update in version 1.3.1. Fixes issue #43
 
 
 ## 1.3.1 - 2020-8-03 Bugfix
 Updated save function to ensure custom array fields remain selected on resave / edit
-Allowed swtch between config or palette option in field settings
+Allowed switch between config or palette option in field settings
 
 ## 1.3.0.1 - 2020-7-31 HOTFIX
 temp fixed broken settings page, expect more robust repair next week :)

diff --git a/README.md b/README.md
@@ -116,7 +116,7 @@ return [
                     [
                         'color'     => '#4299E1',   // the colour shown in the fieldtype (required)
                         'class'     => 'blue-500',  // custom attribute
-                        'btnClass' => 'teal-500',  // custom attribute
+                        'btnClass' => 'teal-500',   // custom attribute
                     ],
                 ]
             ],
@@ -127,12 +127,12 @@ return [
                     [
                         'color'     => '#ED64A6',   // the colour shown in the fieldtype (required)
                         'class'     => 'pink-500',  // custom attribute
-                        'btnClass' => 'blue-500',  // custom attribute
+                        'btnClass' => 'blue-500',   // custom attribute
                     ],
                 ]
             ],
         ],
-        'Gradients' => [
+        'Gradients' => [  // custom label
             [
                 'label'   => 'primary',
                 'default' => false,

diff --git a/src/ColourSwatches.php b/src/ColourSwatches.php
@@ -14,6 +14,7 @@
 use craft\base\Plugin;
 use craft\events\RegisterComponentTypesEvent;
 use craft\services\Fields;
+use craft\services\Plugins;
 use percipioglobal\colourswatches\fields\ColourSwatches as ColourSwatchesField;
 use percipioglobal\colourswatches\models\Settings;
 use yii\base\Event;

diff --git a/src/assetbundles/colourswatchesfield/dist/css/ColourSwatches.css b/src/assetbundles/colourswatchesfield/dist/css/ColourSwatches.css
@@ -57,4 +57,9 @@
 
 .color-swatches button.active {
     box-shadow: 0 0 0 3px #F2842D;
+}
+
+.color-swatches pre {
+    font-size: 0.75rem;
+    font-family: courier;
 }
diff --git a/src/assetbundles/colourswatchesfield/dist/js/ColourSwatches.js b/src/assetbundles/colourswatchesfield/dist/js/ColourSwatches.js
@@ -19,6 +19,7 @@ ColourSelectInput = Garnish.Base.extend({
     {
         var $option = $(ev.currentTarget);
 
+        // enables toggle on/off function of color buttons
         if ($option.hasClass('active'))
         {
             $option.removeClass('active');

diff --git a/src/config.php b/src/config.php
@@ -90,9 +90,9 @@
                 'default' => true,
                 'color'   =>  [
                     [
-                        'color'     => '#38B2AC',  // the color shown in the fieldtype (required)
-                        'class'     => 'teal-500', // custom attribute
-                        'btnClass' => 'blue-500', // custom attribute,
+                        'color'     => '#38B2AC',   // the color shown in the fieldtype (required)
+                        'class'     => 'teal-500',  // custom attribute
+                        'btnClass' => 'blue-500',   // custom attribute,
                     ],
                 ]
             ],
@@ -103,7 +103,7 @@
                     [
                         'color'     => '#4299E1',   // the color shown in the fieldtype (required)
                         'class'     => 'blue-500',  // custom attribute
-                        'btnClass' => 'teal-500',  // custom attribute
+                        'btnClass' => 'teal-500',   // custom attribute
                     ],
                 ]
             ],
@@ -114,12 +114,12 @@
                     [
                         'color'     => '#ED64A6',   // the color shown in the fieldtype (required)
                         'class'     => 'pink-500',  // custom attribute
-                        'btnClass' => 'blue-500',  // custom attribute
+                        'btnClass' => 'blue-500',   // custom attribute
                     ],
                 ]
             ],
         ],
-        'Gradients' => [
+        'Gradients' => [  // custom label
             [
                 'label'   => 'primary',
                 'default' => true,

diff --git a/src/fields/ColourSwatches.php b/src/fields/ColourSwatches.php
@@ -51,7 +51,7 @@ class ColourSwatches extends Field implements PreviewableFieldInterface
      */
     public static function displayName(): string
     {
-        return Craft::t('colour-swatches', 'Colour Swatches');
+        return Craft::t('colour-swatches', 'Color Swatches');
     }
 
     // Public Methods
@@ -83,23 +83,24 @@ public function getContentColumnType(): string
      */
     public function normalizeValue($value, ElementInterface $element = null)
     {
+
         if ($value instanceof ColourSwatchesModel) {
             return $value;
         }
-
-        return new ColourSwatchesModel($value);
+        // quick array transform so that we can ensure and `required fields` fire an error
+        $valueData = (array)json_decode($value);
+        // if we have actual data return model
+        if(count($valueData) > 0) {
+             return new ColourSwatchesModel($value);
+        }
     }
 
     /**
      * {@inheritdoc}
      */
     public function serializeValue($value, ElementInterface $element = null)
     {
-        if ($value instanceof ColourSwatchesModel) {
-            return $value;
-        }
-
-        return new ColourSwatchesModel($value);
+        return $value;
     }
 
     /**
@@ -185,6 +186,7 @@ public function getSettingsHtml()
     public function getInputHtml($value, ElementInterface $element = null): string
     {
         // Register our asset bundle
+      //  print_r($value);
         Craft::$app->getView()->registerAssetBundle(ColourSwatchesFieldAsset::class);
 
         // Get our id and namespace
@@ -212,19 +214,32 @@ public function getInputHtml($value, ElementInterface $element = null): string
      * {@inheritdoc}
      */
     public function getTableAttributeHtml($value, ElementInterface $element): string
-    {
-        /** @var ColorData|null $value */
-        $fieldValue;
-        if (!$value) {
-            return '<div class="color small static"><div class="color-preview"></div></div>';
+        {
+        // our preview no data value
+        $color = null;
+        $style="background-color: transparent";
+        // if we have data
+        if(!empty($value)){
+            $fieldValue = get_object_vars($value);
+            $gradients = array();
+            // if we have a custom color config
+            if (is_array($value->color)) {
+                foreach ($value->color as $color){
+                    $gradients[] = $color->color;
+                }
+                // set a fallback if we only have one colour
+                $style="background-color:$gradients[0]";
+                // else build the gradient
+                  if(count($gradients) > 1){
+                      $gradients = implode(",", $gradients);
+                      $style="background: linear-gradient(to bottom right, $gradients);";
+                  }
+              // if we're using the CP values
+              } else {
+                   $color = $value->color;
+                   $style="background-color:$color";
+              }
         }
-        if (is_array($value->color)) {
-            $fieldValue = $value->color[0]->color;
-        } else {
-            $fieldValue = $value->color;
-        }
-        return "<div class='color small static'><div class='color-preview' style='background-color: {$fieldValue};'></div></div>";
-        // . "<div class='colorhex code'>{$value->label}</div>";
-
+        return '<div class="color small static"><div class="color-preview" style="'.$style.'"></div></div>';
     }
 }
diff --git a/src/models/ColourSwatches.php b/src/models/ColourSwatches.php
@@ -7,69 +7,35 @@ class ColourSwatches
     /**
      * @var string
      */
-    public $label = '';
-
-    /**
-     * @var string
-     */
-    public $color = '';
-    public $colour = '';
 
     public function __construct($value)
     {
-        if (!empty($value)) {
-            if (is_array($value)) {
-                $this->label = $value['label'];
-                $this->color = $value['color'] ? $value['color'] : $value['colour'];
-                $this->colour = $this->color;
-            } else {
-                $value = json_decode($value);
-                $this->label = $value->label;
-                $this->color = $this->fetchColorOrColour($value);
-                $this->colour = $this->color;
-            }
+        if($this->validateJson($value)){
+            // typecast our object to an array
+            $colorData = (array)json_decode($value);
+            $value = null;
+            $color = array_filter($colorData);
+                // if our array has usable data
+                if (!empty($colorData['label']))
+                  {
+                    $this->label = $colorData['label'];
+                    $this->color = $colorData['color'];
+                  }
+                // else ensure we return a null value (only really needed for old data stores)
+                else {
+                    $value = null;
+                }
+         // else ensure we return a null value
+        } else {
+            $value = null;
         }
     }
 
-    public function __toString()
-    {
-        return $this->label;
-    }
-
-    public function colours()
-    {
-        return $this->colorsToArray();
-    }
-
-    public function colors()
+    // making sure we have json data, returns boolean(true) if this is the case
+    public function validateJson($value)
     {
-       return $this->colorsToArray();
+        $json = json_decode($value);
+        return $json && $value != $json;
     }
 
-    public function labels()
-    {
-        return explode(',', $this->label);
-    }
-
-    protected function fetchColorOrColour($value){
-        if(property_exists($value, "colour") && "" === $value->color ){
-            return $value->colour;
-        }
-
-        return $value->color;
-    }
-
-    protected function colorsToArray()
-    {
-        if(is_array($this->color))
-        {
-            return $this->color;
-        }
-
-        if (strstr($this->color, ';') !== false) {
-            return explode(';', $this->color);
-        }
-
-        return explode(',', $this->color);
-    }
 }
diff --git a/src/models/Settings.php b/src/models/Settings.php
@@ -6,7 +6,6 @@
 
 class Settings extends Model
 {
-    public $colours = [];
     public $colors = [];
     public $palettes = [];
 }
diff --git a/src/templates/colourOption.twig b/src/templates/colourOption.twig
@@ -1,14 +1,19 @@
 {% set colours = option.color is defined ? option.color : option.colour %}
 {% set isDefault = option.default %}
+{% set active = null %}
 {% set fieldValue = fieldValue ?? null %}
 
+{% if fieldValue|length %}
+	{% set active = fieldValue.label ?? null %}
+{% endif %}
+
 {% if colours is iterable %}
 	{# option.color is an array #}
 	{% set value = {
         label: option.label,
         color: colours,
     } %}
-	<button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and fieldValue is empty) or (fieldValue is not empty and (value.label == fieldValue)) %} active{% endif %}" style="
+	<button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and active is null) or (active is not empty and (value.label == active)) %} active{% endif %}" style="
 	{% switch colours | length %}
 		{% case 1 %}
             --color: {{ value.color[0].color is defined ? value.color[0].color : value.color[0].colour |parseRefs|raw }};
@@ -29,7 +34,7 @@
 	{% else %}
 		{% set colours = value.color | split(',') %}
 	{% endif %}
-	<button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and fieldValue is empty) or (fieldValue is not empty and (value.label == fieldValue)) %} active{% endif %}" style="
+	<button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and active is null) or (active is not empty and (value.label == active)) %} active{% endif %}" style="
 		{% switch colours | length %}
 		{% case 1 %}
             --color: {{ value.color|parseRefs|raw }};

diff --git a/src/templates/input.twig b/src/templates/input.twig
@@ -17,23 +17,37 @@
 
 {% set defaultValue = null %}
 {% set options = field.useConfigFile ? field.palette ? palettes[field.palette] : configOptions : field.options %}
+{% spaceless %}
 <div id="{{ id }}" class="color-swatches">
-    {% for option in options %}
-        {% include 'colour-swatches/colourOption' with {
-            optionId: namespacedId ~ '-option-' ~ loop.index,
-            option: option,
-        } %}
+        {# fetch our color options #}
+        {% for option in options %}
+                {% include 'colour-swatches/colourOption' with {
+                    optionId: namespacedId ~ '-option-' ~ loop.index,
+                    option: option,
+                } %}
 
-        {# Set the default value #}
-        {% if option.default %}
-            {% set value = {
-                label: option.label,
-                color: option.color is defined ? option.color : option.colour,
-            } %}
+                {# Set the default value #}
+                {% if option.default %}
+                    {% set value = {
+                        label: option.label,
+                        color: option.color is defined ? option.color : option.colour,
+                    } %}
+                    {% set defaultValue = value|json_encode %}
+                {% endif %}
+        {% endfor %}
 
-            {% set defaultValue = value|json_encode %}
-        {% endif %}
-    {% endfor %}
-</div>
+        {% if fieldValue.color is defined %}
+                {% set fieldValue = fieldValue|json_encode %}
+        {%  else %}
+                {% set fieldValue = '' %}
+        {%  endif %}
+        {% set fieldValue = fieldValue ? fieldValue : defaultValue %}
 
-<input id="{{ namespacedId }}" type="hidden" name="{{ name }}" value="{% if fieldValue != '' %}{{ fieldValue|json_encode }}{% else %}{{ defaultValue }}{% endif %}">
+</div>
+{% endspaceless -%}
+        {{ forms.hidden({
+            id: id ~ namespacedId,
+            name: name,
+            value: fieldValue,
+            class: 'color-swatches-input'})
+        }}