Skip to content

Commit 6b351d9

Browse files
BernhardBaumrockBernhardBaumrock
committed
Merge branch 'dev'
2 parents 2afe653 + 704a82f commit 6b351d9

File tree

12 files changed

+215
-89
lines changed

12 files changed

+215
-89
lines changed

.github/workflows/releases.yml renamed to .github/workflows/main.yml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@ jobs:
99
runs-on: ubuntu-latest
1010

1111
steps:
12-
- uses: actions/checkout@v2
12+
- uses: actions/checkout@v3
1313
- name: conventional Changelog Action
1414
id: changelog
15-
uses: TriPSs/conventional-changelog-action@v3.7.1
15+
uses: TriPSs/conventional-changelog-action@v5
1616
with:
17+
preset: "conventionalcommits"
1718
github-token: ${{ secrets.github_token }}
19+
git-user-email: "[email protected]"
1820

1921
- name: create release
2022
uses: actions/create-release@v1

‎FieldtypeRockColorPicker.module.php‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ public static function getModuleInfo()
1414
{
1515
return [
1616
'title' => 'RockColorPicker',
17-
'version' => '1.0.0',
17+
'version' => json_decode(file_get_contents(__DIR__ . "/package.json"))->version,
1818
'summary' => 'Module to choose a color from a palette',
1919
'icon' => 'paint-brush',
2020
'requires' => [
@@ -26,18 +26,19 @@ public static function getModuleInfo()
2626
/**
2727
* Format value for output
2828
*
29-
* @param Page $page
30-
* @param Field $field
31-
* @param string $value
32-
* @return string
33-
*
29+
* @param mixed $value
3430
*/
35-
public function ___formatValue(Page $page, Field $field, $value)
31+
public function ___formatValue(Page $page, Field $field, $value): string|false
3632
{
37-
if (!$value instanceof WireData) return false;
33+
if (!$value->name) return false;
3834
return $value->name;
3935
}
4036

37+
public function getBlankValue(Page $page, Field $field)
38+
{
39+
return new WireData();
40+
}
41+
4142
public function ___wakeupValue(Page $page, Field $field, $value)
4243
{
4344
$colors = $this->master()->colors()->get($field->name);

‎InputfieldMarkup.php‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
<div class="rcp-colors">
22
<?php
3+
4+
use function ProcessWire\wire;
5+
36
foreach ($f->colors() as $col) {
7+
// get selected state
48
$selected = ($value == $col->name) ? "selected" : "";
5-
if (strpos($col->css, "<") === 0) {
6-
$html = $col->css;
7-
} else {
9+
10+
// create html from the colors css property
11+
// if it starts with < it is html
12+
// otherwise we use the css property and put it in the style attribute
13+
$html = $col->css;
14+
if (!str_starts_with($col->css, "<")) {
815
$html = "<div style='{$col->style}'></div>";
916
}
1017

@@ -16,7 +23,9 @@ class='rcp-color $selected'
1623
>$html</div>";
1724
}
1825
if (!$f->colors()->count()) {
19-
echo "setup your field in init.php";
26+
echo wire()->files->render(__DIR__ . '/InputfieldMarkupSetup.php', [
27+
'field' => $f,
28+
]);
2029
}
2130
?>
2231
<input type="text" id="<?= $f->id ?>" class="uk-input" name="<?= $f->name ?>" value="<?= $value ?>">

‎InputfieldMarkupSetup.php‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div style='width:100%;'>
2+
<p>To setup your field, copy this code to your init.php file or into an init() method of a module:</p>
3+
<pre class='uk-margin-remove'><code>wire()->addHookBefore(
4+
"RockColorPicker::colors",
5+
function ($event) {
6+
$picker = $event->object;
7+
$picker->setColors('<?= $field->name ?>', [
8+
'blue' => ['#acefee', 'Light Blue'],
9+
'yellow' => ['#ffe36c', 'Yellow'],
10+
'rose' => ['#ffc5df', 'Rose'],
11+
]);
12+
}
13+
);</code></pre>
14+
<p class='notes uk-margin-remove-bottom'>Advanced usage: See <a href='https://www.baumrock.com/processwire/module/rockcolorpicker/docs/'>docs</a>.</p>
15+
</div>

‎InputfieldRockColorPicker.module.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ public static function getModuleInfo()
1414
{
1515
return [
1616
'title' => 'RockColorPicker Inputfield',
17-
'version' => '1.0.1',
17+
'version' => json_decode(file_get_contents(__DIR__ . "/package.json"))->version,
1818
'summary' => 'Module to choose a color from a palette',
1919
'icon' => 'paint-brush',
2020
'requires' => [

‎README.md‎

Lines changed: 5 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,12 @@ Super simple color (and custom HTML) picker for ProcessWire:
44

55
<img src=https://i.imgur.com/701Jj9C.png height=150>
66

7-
On non-required fields the selected color can be unselected by clicking the color again. The module also supports selecting colors via keyboard input (tab to focus color and then space/enter to select/unselect).
7+
Please see the docs at https://www.baumrock.com/en/processwire/modules/rockcolorpicker/docs/
88

9-
## Setup
10-
11-
The colors of your field must be defined in `/site/init.php`:
12-
13-
```php
14-
$wire->addHookBefore(
15-
"RockColorPicker::colors",
16-
function (HookEvent $event) {
17-
// set colors of field "site_bgcolor"
18-
// labels are translatable
19-
$event->object->setColors('site_bgcolor', [
20-
'blue' => ['#acefee', __('blue')],
21-
'yellow' => ['#ffe36c', __('yellow')],
22-
'rose' => ['#ffc5df', __('rose')],
23-
'green' => ['#b5ffb2', __('green')],
24-
'violet' => ['#d5bfff', __('violet')],
25-
]);
26-
27-
// set colors of field "another_field"
28-
$event->object->setColors('another_field', [
29-
'red' => ['#ff0000', 'This is red'],
30-
'green' => ['#00ff00', 'This is green'],
31-
'blue' => ['#0000ff', 'This is blue'],
32-
]);
33-
34-
// custom CSS + HTML example
35-
$event->object->setColors('site_bgcolor', [
36-
// custom css
37-
'custom' => [
38-
'background: rgb(34,0,255); background: linear-gradient(90deg, rgba(34,0,255,1) 0%, rgba(0,0,0,1) 100%);',
39-
'Blue to black gradient'
40-
],
41-
// custom html
42-
'custom2' => [
43-
'<div style="width:200px;">
44-
custom html demo 😍
45-
</div>',
46-
'Custom HTML demo :)'
47-
],
48-
]);
49-
}
50-
);
51-
```
52-
53-
## Accessing the field values
54-
55-
Formatted value:
56-
57-
<img src=https://imgur.com/E07skYE.png height=130>
58-
59-
Unformatted value:
9+
## Why is there no GUI for setup?
6010

61-
<img src=https://i.imgur.com/whrWc67.png height=280>
11+
Building a GUI for this field would be extremely hard because we need a connection between the color name, css-code and the label.
6212

63-
## Why is there no GUI for setup?
13+
The label might also be multi-language, and having a regular multilang textarea with language tabs would mean that we'd have to repeat all the colors for every language and also repeat all the css-codes. That's less than ideal so I chose to go with a code-only fieldtype so that one can setup colors once and then translate labels if need be.
6414

65-
Building a GUI for this field would be extremely hard because we need a connection between the color name, css-code and the label, but the label would need to be multi-language. Having a regular multilang textarea with language tabs would mean that we'd have to repeat all the colors for every language and also repeat all the css-codes. That's less than ideal so I chose to go with a code-only fieldtype so that one can setup colors once and then translate labels if need be.
15+
A hook-based setup also has the benefit that you can create dynamic color-selection fields, for example having a primary and secondary color based on the client's settings or such.

‎RockColorPicker.info.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?php
2+
3+
namespace ProcessWire;
4+
5+
$info = [
6+
'title' => 'RockColorPicker',
7+
'version' => json_decode(file_get_contents(__DIR__ . "/package.json"))->version,
8+
'summary' => 'Main RockColorPicker Module',
9+
'autoload' => false,
10+
'singular' => true, // sic
11+
'icon' => 'paint-brush',
12+
'requires' => [
13+
'PHP>=8.1',
14+
],
15+
'installs' => [
16+
'InputfieldRockColorPicker',
17+
'FieldtypeRockColorPicker',
18+
],
19+
];

‎RockColorPicker.module.php‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,6 @@ class RockColorPicker extends WireData implements Module
1414
/** @var WireData */
1515
private $colors;
1616

17-
public static function getModuleInfo()
18-
{
19-
return [
20-
'title' => 'RockColorPicker',
21-
'version' => '1.2.1',
22-
'summary' => 'Main RockColorPicker Module',
23-
'autoload' => false,
24-
'singular' => true, // sic
25-
'icon' => 'paint-brush',
26-
'requires' => [
27-
'PHP>=8.1',
28-
],
29-
'installs' => [
30-
'InputfieldRockColorPicker',
31-
'FieldtypeRockColorPicker',
32-
],
33-
];
34-
}
35-
3617
public function init()
3718
{
3819
$this->colors = $this->wire(new WireData());

‎docs/output/readme.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Output
2+
3+
You can access a RockColorPicker field like any other ProcessWire field: `$page->your_field_name`.
4+
5+
Like with any other field, this call can return two types of values: Formatted and Unformatted:
6+
7+
<img src=https://i.imgur.com/R0Ixd2I.png class=blur>
8+
9+
## Formatted value
10+
11+
The formatted value is a string that is equal to the array key of your defined color:
12+
13+
<img src=https://i.imgur.com/3OpIuzc.png class=blur>
14+
15+
## Unformatted value
16+
17+
The unformatted value is a WireData object that holds all defined and calculated values for the picked color:
18+
19+
<img src=https://i.imgur.com/yLSnD74.png class=blur>
20+
21+
As you can see, the "style" property is not useful in this case. This is only useful for regular color elements having a hex code or such.
22+
23+
Naming of these props could probably be improved. Feel free to open an issue or even better: Submit a PR 😉
24+
25+
## Empty value
26+
27+
If no color is picked, the field will return FALSE for the formatted value and an empty WireData object for the unformatted value:
28+
29+
<img src=https://i.imgur.com/MO8tPR1.png class=blur>

‎docs/readme.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# RockColorPicker
2+
3+
A super simple color picker for the ProcessWire backend that can not only pick colors but also custom HTML (so you can use it for picking gradients, for example).
4+
5+
<img src=https://i.imgur.com/701Jj9C.png class=blur>
6+
7+
On non-required fields the selected color can be unselected by clicking the color again. The module also supports selecting colors via keyboard input (tab to focus color and then space/enter to select/unselect).

0 commit comments

Comments
 (0)