Skip to content

Commit

Permalink
Merge pull request #39 from percipioglobal/feature/color-config-arrays
Browse files Browse the repository at this point in the history 
Feature: allow custom attributes to be created in the colour-swatches.php config file
  • Loading branch information
@michtio
michtio authored Jul 27, 2020
2 parents 4eaedbf + d3db6f9 commit 9cdebab
Show file tree
Hide file tree
Showing 12 changed files with 226 additions and 58 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@ 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.3.0 - 2020-07-27
### Added
- Custom attributes are now available via the colour-swatches.php config file for both single and multiple colours.
- Updated config.php example using updated options and examples
- Fixed issue #34


## 1.2.9 - 2020-07-25
### Added
- An element index preview based on Craft's default colour picker. Thanks @pixelmachine for the great PR!
Expand Down
119 changes: 95 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

Let clients choose from a predefined set of colours.

<img src="./resources/img/screenshot.png" width="500">
![Screenshot](./resources/img/screenshot-1.png)
![Screenshot](./resources/img/screenshot-2.png)

## Requirements

Expand Down Expand Up @@ -45,54 +46,116 @@ Take a look at the [config file](https://github.com/percipioglobal/craft-colour-

```php
return [

// Predefined colours
// Predefined colours, fixed options [label, colour, default (boolean)]
'colours' => [
[
'label' => 'red',
'color' => '#ff0000',
'label' => 'red',
'color' => '#F56565',
'default' => true,
],
[
'label' => 'orange',
'color' => '#ED8936',
'default' => false,
],
[
'label' => 'yellow',
'color' => '#ECC94B',
'default' => false,
],
[
'label' => 'green',
'color' => '#48BB78',
'default' => false,
],
[
'label' => 'teal',
'color' => '#38B2AC',
'default' => false,
],
[
'label' => 'blue',
'color' => '#4299E1',
'default' => false,
],
[
'label' => 'green',
'color' => '#00ff00',
'label' => 'indigo',
'color' => '#667EEA',
'default' => false,
],
[
'label' => 'blue',
'color' => '#0000ff',
'label' => 'purple',
'color' => '#9F7AEA',
'default' => false,
],
[
'label' => 'pink',
'color' => '#ff00ff',
'label' => 'pink',
'color' => '#ED64A6',
'default' => false,
]
],
],


// Custom palettes, fixed options [label, default (boolean), colour (array(colour, customOptions)) ]
'palettes' => [
'Red Green' => [
'Primary' => [ // custom label
[
'label' => 'red',
'color' => '#ff0000',
'label' => 'primary', // custom label
'default' => false,
'color' => [
[
'color' => '#38B2AC', // the colour shown in the fieldtype (required)
'class' => 'teal-500', // custom attribute
'btnClass' => 'blue-500', // custom attribute,
],
]
],
[
'label' => 'green',
'color' => '#00ff00',
'label' => 'secondary', // custom label
'default' => false,
'color' => [
[
'color' => '#4299E1', // the colour shown in the fieldtype (required)
'class' => 'blue-500', // custom attribute
'btnClass' => 'teal-500', // custom attribute
],
]
],
[
'label' => 'tertiary', // custom label
'default' => false,
'color' => [
[
'color' => '#ED64A6', // the colour shown in the fieldtype (required)
'class' => 'pink-500', // custom attribute
'btnClass' => 'blue-500', // custom attribute
],
]
],
],
'Buttons' => [
'Gradients' => [
[
'label' => 'blue-white',
'color' => '#0000ff,#ffffff',
'label' => 'primary',
'default' => false,
'color' => [
[
'color' => '#38B2AC', // the colour shown in the fieldtype (required)
],
[
'color' => '#434190', // the next colour in this loop
],
]
],
[
'label' => 'red-white',
'color' => '#ff0000, #ffffff',
'label' => 'secondary', // custom label
'default' => false,
'color' => [
[
'color' => '#434190', // the colour shown in the fieldtype (required)
],
[
'color' => '#ED64A6', // the next colour in this loop
],
]
],
],
],
Expand All @@ -101,7 +164,8 @@ return [

In your field settings you can then have the possibility to have it use the predefined colours.

![Screenshot](./resources/img/config.png)
![Screenshot](./resources/img/config-1.png)
![Screenshot](./resources/img/config-2.png)

## Using Colour Swatches

Expand All @@ -114,7 +178,14 @@ You can access both the label and color in your template. By default, the label
{{ fieldName.color }}
{{ fieldName.colours }} {# Returns an array of all colours #}
```
OR to access custom attributes from the config file

```twig
{% for field in fieldName.color %}
{{ field.color }}
{{ field.CUSTOM }}
{% endfor %}
```
Based on the awesome [Craft 2 plugin](https://github.com/vigetlabs/craft-color-swatches) from Vigetlabs

Brought to you by [Percipio](https://percipio.london)
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "percipioglobal/craft-colour-swatches",
"description": "Let clients choose from a predefined set of colours.",
"type": "craft-plugin",
"version": "1.2.9",
"version": "1.3.0",
"keywords": [
"craft",
"cms",
Expand Down
Binary file added resources/img/config-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/img/config-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed resources/img/config.png
View file
Binary file not shown.
Binary file added resources/img/screenshot-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/img/screenshot-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed resources/img/screenshot.png
View file
Binary file not shown.
101 changes: 86 additions & 15 deletions src/config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,50 +28,121 @@
// Predefined colours
'colours' => [
[
'label' => 'red',
'color' => '#ff0000',
'label' => 'red',
'color' => '#F56565',
'class' => 'red-500', // custom attribute
'default' => true,
],
[
'label' => 'orange',
'color' => '#ED8936',
'class' => 'orange-500', // custom attribute
'default' => false,
],
[
'label' => 'yellow',
'color' => '#ECC94B',
'class' => 'yellow-500', // custom attribute
'default' => false,
],
[
'label' => 'green',
'color' => '#00ff00',
'color' => '#48BB78',
'class' => 'green-500', // custom attribute
'default' => false,
],
[
'label' => 'teal',
'color' => '#38B2AC',
'class' => 'teal-500', // custom attribute
'default' => false,
],
[
'label' => 'blue',
'color' => '#0000ff',
'color' => '#4299E1',
'class' => 'blue-500', // custom attribute
'default' => false,
],
[
'label' => 'indigo',
'color' => '#667EEA',
'class' => 'indigo-500', // custom attribute
'default' => false,
],
[
'label' => 'purple',
'color' => '#9F7AEA',
'class' => 'purple-500', // custom attribute
'default' => false,
],
[
'label' => 'pink',
'color' => '#ff00ff',
'color' => '#ED64A6',
'class' => 'pink-500', // custom attribute
'default' => false,
],
],

'palettes' => [
'Red Green' => [
'Primary' => [ // custom label
[
'label' => 'primary', // custom label
'default' => false,
'color' => [
[
'color' => '#38B2AC', // the colour shown in the fieldtype (required)
'class' => 'teal-500', // custom attribute
'btnClass' => 'blue-500', // custom attribute,
],
]
],
[
'label' => 'red',
'color' => '#ff0000',
'label' => 'secondary', // custom label
'default' => false,
'color' => [
[
'color' => '#4299E1', // the colour shown in the fieldtype (required)
'class' => 'blue-500', // custom attribute
'btnClass' => 'teal-500', // custom attribute
],
]
],
[
'label' => 'green',
'color' => '#00ff00',
'label' => 'tertiary', // custom label
'default' => false,
'color' => [
[
'color' => '#ED64A6', // the colour shown in the fieldtype (required)
'class' => 'pink-500', // custom attribute
'btnClass' => 'blue-500', // custom attribute
],
]
],
],
'Buttons' => [
'Gradients' => [
[
'label' => 'blue-white',
'color' => '#0000ff,#ffffff',
'label' => 'primary',
'default' => false,
'color' => [
[
'color' => '#38B2AC', // the colour shown in the fieldtype (required)
],
[
'color' => '#434190', // the next colour in this loop
],
]
],
[
'label' => 'red-white',
'color' => '#ff0000, #ffffff',
'label' => 'secondary', // custom label
'default' => false,
'color' => [
[
'color' => '#434190', // the colour shown in the fieldtype (required)
],
[
'color' => '#ED64A6', // the next colour in this loop
],
]
],
],
],
Expand Down
53 changes: 36 additions & 17 deletions src/templates/colourOption.twig
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
{% set value = {
label: option.label,
color: option.color,
} %}
{% if ';' in value.color %}
{% set colours = value.color | split(';') %}
{% if option.color is iterable %}
{# option.color is an array #}
{% set value = {
label: option.label,
color: option.color,
} %}

{% set colours = option.color %}
<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 %}
--color: {{ value.color[0].color|parseRefs|raw }};
{% default %}
{% set percentage = 100 / colours | length %}
--color: linear-gradient(to bottom right, {% for color in colours %}{{ color.color|parseRefs|raw }} {{ percentage * loop.index0 }}%, {{ color.color|parseRefs|raw }} {{ percentage * loop.index }}%{% if not loop.last %},{% endif %}{% endfor %});
{% endswitch %}
"></button>
{% else %}
{% set colours = value.color | split(',') %}
{# option.color is a string #}
{% set value = {
label: option.label,
color: option.color,
} %}
{% if ';' in value.color %}
{% set colours = value.color | split(';') %}
{% else %}
{% set colours = value.color | split(',') %}
{% 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 %}
--color: {{ value.color|parseRefs|raw }};
{% default %}
{% set percentage = 100 / colours | length %}
--color: 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>
{% 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 %}
--color: {{ value.color|parseRefs|raw }};
{% default %}
{% set percentage = 100 / colours | length %}
--color: 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>
2 changes: 1 addition & 1 deletion src/translations/en/color-swatches.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@
* @since 1.0.0
*/
return [
'color-swatches plugin loaded' => 'color-swatches plugin loaded',
'color-swatches plugin loaded' => 'colour-swatches plugin loaded',
];

0 comments on commit 9cdebab

Please sign in to comment.