Add possibility for predefined colours

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.2.0 - 2019-02-01
+### Added
+- Added the possibility to define the colours in a config file and have the field use them.
+
 ## 1.1.4 - 2018-07-30
 ### Fixed
 - Fix a JS error when deselecting the colour

README.md

@@ -49,6 +49,43 @@ Multiple colours are possible by seperating them with a comma
 
 ![Screenshot](./resources/img/multiple.png)
 
+## Using the config file
+
+You can create a `config/colour-swatches.php` file to predefine the possible colours. Take a look at the [config file]() in this repo for an example.
+
+```php
+return [
+
+    // Predefined colours
+    'colours' => [
+        [
+            'label' => 'red',
+            'color' => '#ff0000',
+            'default' => false,
+        ],
+        [
+            'label' => 'green',
+            'color' => '#00ff00',
+            'default' => false,
+        ],
+        [
+            'label' => 'blue',
+            'color' => '#0000ff',
+            'default' => false,
+        ],
+        [
+            'label' => 'pink',
+            'color' => '#ff00ff',
+            'default' => false,
+        ]
+    ],
+];
+```
+
+In your field settings you can then have the possibility to have it use the predefined colours.
+
+![Screenshot](./resources/img/config.png)
+
 ## Using Colour Swatches
 
 You can access both the label and color in your template. By default, the label will display:

composer.json

@@ -2,7 +2,6 @@
     "name": "rias/craft-colour-swatches",
     "description": "Let clients choose from a predefined set of colours.",
     "type": "craft-plugin",
-    "version": "1.1.4",
     "keywords": [
         "craft",
         "cms",

src/ColourSwatches.php

@@ -16,6 +16,7 @@
 use craft\events\RegisterComponentTypesEvent;
 use craft\services\Fields;
 use rias\colourswatches\fields\ColourSwatches as ColourSwatchesField;
+use rias\colourswatches\models\Settings;
 use yii\base\Event;
 
 /**
@@ -54,4 +55,9 @@ function (RegisterComponentTypesEvent $event) {
             }
         );
     }
+
+    protected function createSettingsModel()
+    {
+        return new Settings();
+    }
 }

src/config.php

@@ -25,7 +25,27 @@
 
 return [
 
-    // This controls blah blah blah
-    'someAttribute' => true,
-
+    // Predefined colours
+    'colours' => [
+        [
+            'label' => 'red',
+            'color' => '#ff0000',
+            'default' => false,
+        ],
+        [
+            'label' => 'green',
+            'color' => '#00ff00',
+            'default' => false,
+        ],
+        [
+            'label' => 'blue',
+            'color' => '#0000ff',
+            'default' => false,
+        ],
+        [
+            'label' => 'pink',
+            'color' => '#ff00ff',
+            'default' => false,
+        ]
+    ],
 ];

src/fields/ColourSwatches.php

@@ -15,6 +15,7 @@
 use craft\base\ElementInterface;
 use craft\base\Field;
 use rias\colourswatches\assetbundles\colourswatchesfield\ColourSwatchesFieldAsset;
+use rias\colourswatches\ColourSwatches as Plugin;
 use rias\colourswatches\models\ColourSwatches as ColourSwatchesModel;
 use yii\db\Schema;
 
@@ -31,9 +32,12 @@ class ColourSwatches extends Field
     /**
      * Available options.
      *
-     * @var string
+     * @var array
      */
-    public $options = [['color' => '']];
+    public $options = [];
+
+    /** @var bool */
+    public $useConfigFile = false;
 
     // Static Methods
     // =========================================================================
@@ -99,6 +103,8 @@ public function serializeValue($value, ElementInterface $element = null)
      */
     public function getSettingsHtml()
     {
+        Craft::$app->getView()->registerAssetBundle(ColourSwatchesFieldAsset::class);
+
         $config = [
             'instructions' => Craft::t('colour-swatches', 'Define the available colors.'),
             'id'           => 'options',
@@ -119,7 +125,7 @@ public function getSettingsHtml()
                     'class'        => 'thin',
                 ],
             ],
-            'rows' => $this->options,
+            'rows' => count($this->options) ? $this->options : Plugin::$plugin->settings->colours,
         ];
 
         // Render the settings template
@@ -128,6 +134,7 @@ public function getSettingsHtml()
             [
                 'field'  => $this,
                 'config' => $config,
+                'configOptions' => Plugin::$plugin->settings->colours,
             ]
         );
     }
@@ -155,6 +162,7 @@ public function getInputHtml($value, ElementInterface $element = null): string
                 'field'        => $this,
                 'id'           => $id,
                 'namespacedId' => $namespacedId,
+                'configOptions'=> Plugin::$plugin->settings->colours,
             ]
         );
     }

src/models/Settings.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace rias\colourswatches\models;
+
+use craft\base\Model;
+
+class Settings extends Model
+{
+    public $colours = [];
+}

src/templates/input.twig

@@ -16,9 +16,9 @@
 {% import "_includes/forms" as forms %}
 
 {% set defaultValue = null %}
-
+{% set options = field.useConfigFile ? configOptions : field.options %}
 <div id="{{ id }}" class="color-swatches">
-    {% for option in field.options %}
+    {% for option in options %}
         {% set optionId = namespacedId ~ '-option-' ~ loop.index %}
         {% set value = {
             label: option.label,

src/templates/settings.twig

@@ -15,6 +15,49 @@
 
 {% import "_includes/forms" as forms %}
 
-<div class="color-swatches-options">
+{{ forms.lightswitchField({
+    label: 'Use config options'|t('colour-swatches'),
+    instructions: 'Whether to use the config options defined in `colour-swatches.php` or a custom config.'|t('colour-swatches'),
+    name: 'useConfigFile',
+    on: field.useConfigFile,
+    toggle: 'preview',
+    reverseToggle: 'settings',
+}) }}
+
+<div id="settings" class="color-swatches-options {{ field.useConfigFile ? 'hidden' : '' }}">
     {{ forms.editableTable(config) }}
 </div>
+
+<div id="preview" class="{{ field.useConfigFile ? '' : 'hidden' }}">
+    {% set defaultValue = null %}
+    <div class="color-swatches">
+        {% for option in configOptions %}
+            {% set optionId = '1-option-' ~ loop.index %}
+            {% set value = {
+                label: option.label,
+                color: option.color,
+            } %}
+            {% if ';' in value.color %}
+                {% set colours = value.color | split(';') %}
+            {% else %}
+                {% set colours = value.color | split(',') %}
+            {% endif %}
+
+            {# Set the default value #}
+            {% if option.default %}
+                {% set defaultValue = value|json_encode %}
+            {% endif %}
+
+            <button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if option.default %} active{% endif %}"
+                    style="
+                    {% switch colours | length %}
+                            {% case 1 %}
+                                background: {{ value.color|parseRefs|raw }};
+                            {% default %}
+                                {% set percentage = 100 / colours | length %}
+                                background: linear-gradient(to bottom right, {% for colour in colours %}{{ colour|parseRefs|raw }} {{ percentage * loop.index0 }}%, {{ colour|parseRefs|raw }} {{ percentage * loop.index }}%{% if not loop.last %},{% endif %}{% endfor %});
+                    {% endswitch %}
+                            "></button>
+        {% endfor %}
+    </div>
+</div>