Skip to content

Commit 84b1ee4

Browse files
janhenckensjanhenckens
committed
Merge branch 'develop' of github.com:statikbe/craft-config-values into develop
2 parents f7605c4 + c649c66 commit 84b1ee4

File tree

7 files changed

+365
-28
lines changed

7 files changed

+365
-28
lines changed

‎README.md‎

Lines changed: 99 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,112 @@
1-
# Config Values Field plugin for Craft CMS 3.x
1+
# Config Values Field plugin for Craft CMS
22

3-
Populate a field with values from the plugin's config
3+
Populate field options from a centralized configuration file, providing consistent predefined values across multiple fields without hardcoding them into individual field settings.
44

55
## Requirements
6-
This plugin requires Craft CMS 3.0.0 or later.
6+
This plugin requires Craft CMS 5.0.0 or later.
77

88
## Installation
99

10-
To install the plugin, follow these instructions.
11-
1210
1. Open your terminal and go to your Craft project:
11+
```bash
12+
cd /path/to/project
13+
```
14+
15+
2. Install via Composer:
16+
```bash
17+
composer require statikbe/craft-config-values
18+
```
19+
20+
3. Install the plugin via Craft CLI:
21+
```bash
22+
./craft plugin/install config-values-field
23+
```
24+
25+
## Configuration
26+
27+
Create a configuration file at `config/config-values-field.php`:
28+
29+
```php
30+
<?php
31+
32+
return [
33+
'data' => [
34+
// Basic dropdown/radio/checkbox options
35+
'ctaStyles' => [
36+
'primary' => 'Primary Button',
37+
'secondary' => 'Secondary Button',
38+
'outline' => 'Outline Button',
39+
'link' => 'Text Link',
40+
],
41+
42+
// Color options (supports hex values)
43+
'brandColors' => [
44+
'' => 'none', // Special: shows striped pattern
45+
'random' => 'random', // Special: shows rainbow gradient
46+
'primary' => '#3B82F6',
47+
'secondary' => '#10B981',
48+
'accent' => '#F59E0B',
49+
'danger' => '#EF4444',
50+
],
51+
52+
// Gradient colors (2-3 colors)
53+
'headerColors' => [
54+
'' => 'none', // Special: shows striped pattern
55+
'random' => 'random', // Special: shows rainbow gradient
56+
'sunset' => ['#FF6B6B', '#FFE66D'],
57+
'ocean' => ['#667eea', '#764ba2', '#f093fb'],
58+
'forest' => ['#134e5e', '#71b280'],
59+
],
60+
61+
// Shape options (requires SVG files)
62+
'icons' => [
63+
'path' => '@webroot/assets/icons/',
64+
'shapes' => [
65+
'' => 'none',
66+
'random' => 'random',
67+
'arrow' => 'Arrow',
68+
'star' => 'Star',
69+
'heart' => 'Heart',
70+
'check' => 'Checkmark',
71+
],
72+
],
73+
],
74+
];
75+
```
76+
77+
## Field Types
78+
79+
The plugin supports 5 different field display types:
80+
81+
### 1. Dropdown
82+
Standard select dropdown for single selection.
83+
84+
### 2. Radio Buttons
85+
Radio button group for single selection with visual options.
86+
87+
### 3. Checkboxes
88+
Multiple selection checkboxes for choosing multiple values.
89+
90+
### 4. Color
91+
Visual color picker with special features:
92+
- Hex colors: Display as color swatches
93+
- Gradients: Support 2-3 color arrays for gradient backgrounds
94+
- Special values:
95+
- `'random'`: Shows rainbow gradient indicator
96+
- `'none'`: Shows striped "no color" pattern
1397

14-
cd /path/to/project
98+
### 5. Shape
99+
SVG shape selector for icon/graphic selection:
100+
- Requires `path` configuration pointing to SVG directory
101+
- Uses `shapes` array to map filenames to labels
102+
- Validates file existence
103+
- Special values
104+
- `'random'`
105+
- `'none'`
15106

16-
2. Then tell Composer to load the plugin:
17107

18-
composer require statikbe/craft-config-values
19108

20109

21-
## Usage
110+
---
22111

23-
Brought to you by [Statik.be](https://www.statik.be)
112+
Brought to you by [Statik.be](https://www.statik.be)

‎src/assetbundles/configvalues/ConfigValuesAsset.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?php
2+
3+
namespace statikbe\configvaluesfield\assetbundles\configvalues;
4+
5+
use craft\web\AssetBundle;
6+
7+
class ConfigValuesAsset extends AssetBundle
8+
{
9+
public function init()
10+
{
11+
$this->sourcePath = "@statikbe/configvaluesfield/assetbundles/configvalues/dist";
12+
13+
$this->css = [
14+
'css/configvalues.css'
15+
];
16+
parent::init();
17+
}
18+
}

‎src/assetbundles/configvalues/dist/css/configvalues.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
2+
.radio-group:has(.custom-color-label) {
3+
display: flex;
4+
flex-wrap: wrap;
5+
flex-direction: row;
6+
}
7+
8+
.radio-group:has(.custom-color-label) label::before,
9+
.radio-group:has(.custom-color-label) label::after {
10+
display: none;
11+
}
12+
13+
body.ltr .radio-group:has(.custom-color-label) label {
14+
padding: 0;
15+
}
16+
17+
.radio-group:has(.custom-color-label) input:checked + label .custom-color-label {
18+
border: 2px solid #ffffff;
19+
outline: 2px solid #555555;
20+
}
21+
22+
.custom-color-label {
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
width: 32px;
27+
height: 32px;
28+
margin: 3px 3px 0 3px;
29+
border-radius: 100%;
30+
border: 1px solid #cccccc;
31+
}
32+
33+
.sr-only {
34+
position: absolute;
35+
width: 1px;
36+
height: 1px;
37+
padding: 0;
38+
margin: -1px;
39+
overflow: hidden;
40+
clip: rect(0, 0, 0, 0);
41+
white-space: nowrap;
42+
border-width: 0;
43+
}
44+
45+
.btn.cutout-btn {
46+
padding: 0;
47+
width: 50px;
48+
height: 50px;
49+
}
50+
51+
.cutout-btn svg {
52+
width: 100%;
53+
height: auto;
54+
margin: 0 auto;
55+
color: #616c77;
56+
}
57+
58+
.cutout-row {
59+
display: flex;
60+
flex-direction: column;
61+
}
62+
63+
.cutout-btngroup {
64+
display: flex;
65+
flex-direction: row;
66+
flex-wrap: wrap;
67+
height: auto;
68+
gap: 4px;
69+
}
70+
71+
.cutout-btngroup input[type='radio'] + label {
72+
display: flex;
73+
}
74+
75+
.cutout-btngroup input[type='radio'] + label .btn.cutout-btn {
76+
background: #e6ecf5;
77+
border-radius: 0;
78+
border: 1px solid #f4f7fc;
79+
}
80+
81+
.cutout-btngroup > div:first-of-type input[type='radio'] + label .btn.cutout-btn {
82+
border-bottom-left-radius: 0px;
83+
border-top-left-radius: 0px;
84+
}
85+
86+
.cutout-btngroup > div:last-of-type input[type='radio'] + label .btn.cutout-btn {
87+
border-bottom-right-radius: 0px;
88+
border-top-right-radius: 0px;
89+
}
90+
91+
/* Hover */
92+
.cutout-btngroup input[type='radio'] + label .btn.cutout-btn:focus,
93+
.cutout-btngroup input[type='radio'] + label .btn.cutout-btn:hover {
94+
background: #d2dae5 !important;
95+
}
96+
97+
/* Active */
98+
.cutout-btngroup input[type='radio']:checked + label .btn.cutout-btn {
99+
background: #bcc8d9;
100+
}

‎src/fields/ConfigValuesFieldField.php‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111

1212
namespace statikbe\configvaluesfield\fields;
1313

14+
use craft\helpers\App;
15+
use statikbe\configvaluesfield\assetbundles\configvalues\ConfigValuesAsset;
1416
use statikbe\configvaluesfield\ConfigValuesField;
1517
use Craft;
1618
use craft\base\ElementInterface;
@@ -30,6 +32,12 @@ class ConfigValuesFieldField extends Field implements InlineEditableFieldInterfa
3032
public string $dataSet = '';
3133
public string $type = 'dropdown';
3234

35+
const TYPE_DROPDOWN = 'dropdown';
36+
const TYPE_RADIO = 'radios';
37+
const TYPE_CHECKBOX = 'checkboxes';
38+
const TYPE_COLOR = 'color';
39+
const TYPE_SHAPE = 'shape';
40+
3341
// Static Methods
3442
// =========================================================================
3543

@@ -63,10 +71,74 @@ public function defineRules(): array
6371
['dataSet', 'required'],
6472
['type', 'string'],
6573
['type', 'required'],
74+
['type', 'dataShouldMatchType']
6675
]);
6776
return $rules;
6877
}
6978

79+
public function dataShouldMatchType($attribute, $params): void
80+
{
81+
$data = ConfigValuesField::getInstance()->getSettings()->data[$this->dataSet];
82+
switch ($this->type) {
83+
case self::TYPE_DROPDOWN:
84+
case self::TYPE_RADIO:
85+
case self::TYPE_CHECKBOX:
86+
foreach ($data as $key => $value) {
87+
if (is_array($value)) {
88+
$this->addError("$attribute", 'Each option must be a string when type is "dropdown", "radio" or "checkbox". is selected');
89+
return;
90+
}
91+
}
92+
break;
93+
case self::TYPE_COLOR:
94+
foreach ($data as $key => $option) {
95+
if (is_array($option)) {
96+
foreach ($option as $value) {
97+
if (strpos($value, '#') !== 0) {
98+
$this->addError("$attribute", "Each option must contain at least hex value when type is 'color'");
99+
return;
100+
}
101+
}
102+
} else {
103+
if(!in_array($option, ['random', 'none'])) {
104+
$this->addError("$attribute", "Each option should either contain a hex value, 'random' or 'none' when type is 'color'");
105+
return;
106+
}
107+
}
108+
}
109+
break;
110+
111+
case self::TYPE_SHAPE:
112+
if(!isset($data['path'])) {
113+
$this->addError("$attribute", "A valid path must be configured when type is 'shape'");
114+
}
115+
116+
if(isset($data['path'])) {
117+
$path = App::parseEnv($data['path']);
118+
if(!is_dir($path)) {
119+
$this->addError("$attribute", "The path to the shapes must be a valid directory");
120+
}
121+
}
122+
123+
if(!isset($data['shapes'])) {
124+
$this->addError("$attribute", "A set of 'shapes' must be configured when type is 'shape'");
125+
}
126+
127+
if(isset($data['shapes']) && isset($data['path'])) {
128+
$path = App::parseEnv($data['path']);
129+
foreach($data['shapes'] as $filename => $value) {
130+
$filepath = $path . $filename . '.svg';
131+
if(!file_exists($filepath)) {
132+
$this->addError("$attribute", "The file $filename.svg does not exist in the configured path");
133+
}
134+
}
135+
}
136+
break;
137+
default:
138+
$this->addError($attribute, 'Invalid type.');
139+
}
140+
}
141+
70142
/**
71143
* @inheritdoc
72144
*/
@@ -110,6 +182,7 @@ public function getInputHtml($value, ElementInterface $element = null): string
110182
$options = ConfigValuesField::getInstance()->getSettings()->data[$this->dataSet];
111183

112184
// Render the input template
185+
Craft::$app->getView()->registerAssetBundle(ConfigValuesAsset::class);
113186
return Craft::$app->getView()->renderTemplate(
114187
'config-values-field/_components/fields/ConfigValuesFieldField_input.twig',
115188
[

‎src/models/Settings.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@ class Settings extends Model
1717
public array $data = [];
1818

1919
public string $type = "";
20+
2021
}

0 commit comments

Comments
 (0)