Merge branch 'master' into master

craftpulse · Feb 22, 2019 · 4454a02 · chasegiunta · Feb 22, 2019 · 4454a02
2 parents 55d04bb + 9e0f478
commit 4454a02
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 71 deletions.
diff --git a/CHANGELOG.md b/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.1 - 2019-02-22
+### Added
+- Added the possibility to define palettes in the config file. Thanks @chasegiunta for the great PR!
+
 ## 1.2.0 - 2019-02-01
 ### Added
 - Added the possibility to define the colours in a config file and have the field use them.

diff --git a/README.md b/README.md
@@ -51,7 +51,8 @@ Multiple colours are possible by seperating them with a comma
 
 ## 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.
+You can create a `config/colour-swatches.php` file to predefine the possible colours or define different palettes.
+Take a look at the [config file](https://github.com/Rias500/craft-colour-swatches/blob/master/src/config.php) in this repo for an example.
 
 ```php
 return [
@@ -79,6 +80,33 @@ return [
             'default' => false,
         ]
     ],
+
+    'palettes' => [
+        'Red Green' => [
+            [
+                'label'   => 'red',
+                'color'   => '#ff0000',
+                'default' => false,
+            ],
+            [
+                'label'   => 'green',
+                'color'   => '#00ff00',
+                'default' => false,
+            ],
+        ],
+        'Buttons' => [
+            [
+                'label'   => 'blue-white',
+                'color'   => '#0000ff,#ffffff',
+                'default' => false,
+            ],
+            [
+                'label'   => 'red-white',
+                'color'   => '#ff0000, #ffffff',
+                'default' => false,
+            ],
+        ],
+    ],
 ];
 ```
 

diff --git a/resources/img/config.png b/resources/img/config.png
diff --git a/src/config.php b/src/config.php
@@ -50,7 +50,7 @@
     ],
 
     'palettes' => [
-        'allSolids' => [
+        'Red Green' => [
             [
                 'label'   => 'red',
                 'color'   => '#ff0000',
@@ -61,19 +61,8 @@
                 'color'   => '#00ff00',
                 'default' => false,
             ],
-            [
-                'label'   => 'blue',
-                'color'   => '#0000ff',
-                'default' => false,
-            ],
-            [
-                'label'   => 'pink',
-                'color'   => '#ff00ff',
-                'default' => false,
-            ],
-
         ],
-        'buttons' => [
+        'Buttons' => [
             [
                 'label'   => 'blue-white',
                 'color'   => '#0000ff,#ffffff',
@@ -84,11 +73,6 @@
                 'color'   => '#ff0000, #ffffff',
                 'default' => false,
             ],
-            [
-                'label'   => 'green-white',
-                'color'   => '#00ff00, #ffffff',
-                'default' => false,
-            ],
         ],
     ],
 ];
diff --git a/src/fields/ColourSwatches.php b/src/fields/ColourSwatches.php
@@ -153,6 +153,18 @@ public function getSettingsHtml()
 
         $currentPalette = $this->palette;
 
+        $paletteOptions = [];
+        $paletteOptions[] = [
+            'label' => 'Colour config',
+            'value' => null,
+        ];
+        foreach (array_keys((array) Plugin::$plugin->settings->palettes) as $palette) {
+            $paletteOptions[] = [
+                'label' => $palette,
+                'value' => $palette,
+            ];
+        }
+
         // Render the settings template
         return Craft::$app->getView()->renderTemplate(
             'colour-swatches/settings',

diff --git a/src/templates/colourOption.twig b/src/templates/colourOption.twig
@@ -0,0 +1,25 @@
+{% 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 and (not fieldValue is defined or (fieldValue is defined and not fieldValue.color))) or (fieldValue is defined and fieldValue.color == option.color) %} 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>
diff --git a/src/templates/input.twig b/src/templates/input.twig
@@ -19,34 +19,11 @@
 {% set options = field.useConfigFile ? field.palette ? palettes[field.palette] : configOptions : field.options %}
 <div id="{{ id }}" class="color-swatches">
     {% for option in options %}
-        {% set optionId = namespacedId ~ '-option-' ~ loop.index %}
-        {% set value = {
-            label: option.label,
-            color: option.color,
+        {% include 'colour-swatches/colourOption' with {
+            optionId: namespacedId ~ '-option-' ~ loop.index,
+            option: option,
         } %}
-        {% if ';' in value.color %}
-            {% set colours = value.color | split(';') %}
-        {% else %}
-            {% set colours = value.color | split(',') %}
-        {% endif %}
-
-        {# Set the default value #}
-        {% if option.default and not fieldValue.color %}
-            {% set defaultValue = value|json_encode %}
-        {% endif %}
-
-        <button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (option.default and not fieldValue.color) or (fieldValue.color == option.color) %} 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>
 
 <input id="{{ namespacedId }}" type="hidden" name="{{ name }}" value="{{ defaultValue ?? fieldValue|json_encode }}">
diff --git a/src/templates/settings.twig b/src/templates/settings.twig
@@ -17,7 +17,7 @@
 
 {{ 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'),
+    instructions: 'Whether to use the config options or palettes defined in `colour-swatches.php` or a custom config.'|t('colour-swatches'),
     name: 'useConfigFile',
     on: field.useConfigFile,
     toggle: 'preview',
@@ -45,6 +45,17 @@
         {% set palettes = [configOptions] %}
     {% endif %}
 
+    {# Default config options #}
+    <div id="palette-" class="color-swatches {{ field.useConfigFile and not field.palette ? '' : 'hidden' }}">
+        {% for option in configOptions %}
+            {% include 'colour-swatches/colourOption' with {
+                optionId: '1-option-' ~ loop.index,
+                option: option,
+            } %}
+        {% endfor %}
+    </div>
+
+    {# Palette options #}
     {% for key, palette in palettes %}
         {% if palettes|length > 1 %}
             {% set condition = field.palette == key %}
@@ -55,32 +66,10 @@
         {% set defaultValue = null %}
         <div id="palette-{{ key }}" class="color-swatches {{ condition ? '' : 'hidden' }}">
             {% for option in palette %}
-                {% set optionId = '1-option-' ~ loop.index %}
-                {% set value = {
-                    label: option.label,
-                    color: option.color,
+                {% include 'colour-swatches/colourOption' with {
+                    optionId: '1-option-' ~ loop.index,
+                    option: option,
                 } %}
-                {% 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>
     {% endfor %}