feat: add support for custom CSS + HTML

Author: BernhardBaumrock

.github/workflows/releases.yml

@@ -0,0 +1,27 @@
+name: Releases
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  changelog:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: conventional Changelog Action
+        id: changelog
+        uses: TriPSs/[email protected]
+        with:
+          github-token: ${{ secrets.github_token }}
+
+      - name: create release
+        uses: actions/create-release@v1
+        if: ${{ steps.changelog.outputs.skipped == 'false' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.github_token }}
+        with:
+          tag_name: ${{ steps.changelog.outputs.tag }}
+          release_name: ${{ steps.changelog.outputs.tag }}
+          body: ${{ steps.changelog.outputs.clean_changelog }}

InputfieldMarkup.php

@@ -2,10 +2,25 @@
   <?php
   foreach ($f->colors() as $col) {
     $selected = ($value == $col->name) ? "selected" : "";
-    echo "<svg class='rcp-color $selected' data-col='{$col->name}'>
-      <rect style='fill:{$col->css}' title='{$col->tooltip}' uk-tooltip />
-    </svg>";
+
+    // prepare html and style tag
+    // If provided a color like #ff0000 or rgba(0,0,0) we prepend the
+    // background-color property. Otherwise we use it as is.
+    $style = $col->css;
+    if (strpos($style, "<") === 0) {
+      $html = $style;
+    } else {
+      if (!strpos($style, ":")) $style = "background-color:$style";
+      $html = "<div style='$style'></div>";
+    }
+
+    // output wrapper + html
+    echo "<div
+      class='rcp-color $selected'
+      data-color='{$col->name}'
+      title='{$col->label}' uk-tooltip
+      >$html</div>";
   }
   ?>
-  <input type="text" id="<?= $f->id ?>" class="uk-input" name="<?= $f->name ?>" value="<?= $f->value ?>">
+  <input type="text" id="<?= $f->id ?>" class="uk-input" name="<?= $f->name ?>" value="<?= $value ?>">
 </div>

README.md

@@ -1,8 +1,8 @@
 # RockColorPicker
 
-Super simple color picker for ProcessWire:
+Super simple color (and custom HTML) picker for ProcessWire:
 
-<img src=https://i.imgur.com/VYv3Mbz.png height=150>
+<img src=https://i.imgur.com/701Jj9C.png height=150>
 
 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).
 
@@ -30,6 +30,22 @@ $wire->addHookBefore(
       'green' => ['#00ff00', 'This is green'],
       'blue' => ['#0000ff', 'This is blue'],
     ]);
+
+    // custom CSS + HTML example
+    $event->object->setColors('site_bgcolor', [
+      // custom css
+      'custom' => [
+        'background: rgb(34,0,255); background: linear-gradient(90deg, rgba(34,0,255,1) 0%, rgba(0,0,0,1) 100%);',
+        'Blue to black gradient'
+      ],
+      // custom html
+      'custom2' => [
+        '<div style="width:200px;">
+          custom html demo 😍
+        </div>',
+        'Custom HTML demo :)'
+      ],
+    ]);
   }
 );
 ```
@@ -38,11 +54,11 @@ $wire->addHookBefore(
 
 Formatted value:
 
-<img src=https://i.imgur.com/sOBc18h.png width=280>
+<img src=https://imgur.com/E07skYE.png height=130>
 
 Unformatted value:
 
-<img src=https://i.imgur.com/StnDbWm.png width=400>
+<img src=https://i.imgur.com/whrWc67.png height=280>
 
 ## Why is there no GUI for setup?
 

RockColorPicker.css

@@ -6,16 +6,21 @@
 .InputfieldRockColorPicker input {
   display: none;
 }
-svg.rcp-color {
-  width: 40px;
-  height: 40px;
+div.rcp-color {
   outline: 1px solid #afafaf;
   cursor: pointer;
 }
-svg.rcp-color.selected {
+.rcp-color.selected {
   outline: 5px solid #afafaf;
 }
-svg.rcp-color rect {
-  width: 100%;
-  height: 100%;
+/* set the size of the inner element */
+.rcp-color > * {
+  width: 40px;
+  height: 40px;
+}
+/* make text content centered by default */
+.rcp-color > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

RockColorPicker.js

@@ -1,27 +1,33 @@
-$(document).on("click", ".InputfieldRockColorPicker svg", function () {
-  // using UIkit JS because jquery fails with addclass on svg
-  // see https://stackoverflow.com/a/10257755/6370411
-  let util = UIkit.util;
-  let el = util.$(this);
-  let parent = el.parentNode;
-  let $li = $(this).closest(".Inputfield");
-  let input = util.$("input", parent);
-  let remove = util.hasClass(el, "selected");
-  util.each(util.$$("svg", parent), function (el) {
-    util.removeClass(el, "selected");
+$(document).on("click", ".InputfieldRockColorPicker .rcp-color", function () {
+  let $color = $(this).closest(".rcp-color");
+  let $colors = $color.closest(".rcp-colors");
+  let $li = $color.closest(".Inputfield");
+  let $input = $li.find("input");
+
+  // set flag that defines wether we can remove selected state or not
+  let remove =
+    $color.hasClass("selected") && !$li.hasClass("InputfieldStateRequired");
+
+  // unselect all items
+  $.each($colors.find(".rcp-color"), function (i, el) {
+    $(el).removeClass("selected");
   });
-  $(this).closest(".Inputfield").addClass("InputfieldStateChanged");
-  if (remove && !$li.hasClass("InputfieldStateRequired")) {
-    util.attr(input, "value", "");
+
+  // set the new selected item
+  if (remove) {
+    $input.val("");
   } else {
-    util.addClass(el, "selected");
-    util.attr(input, "value", util.data(el, "col"));
+    $color.addClass("selected");
+    $input.val($color.data("color"));
   }
-  $(input).change(); // trigger change event (important for rockpagebuilder)
+
+  // trigger change on the inputfield
+  $li.addClass("InputfieldStateChanged");
+  $input.change(); // for rockpagebuilder
 });
 $(document).bind("keypress", function (e) {
   // support space+enter to change color
   if (e.which == 32 || e.which == 13) {
-    $(":focus").closest("svg.rcp-color").click();
+    $(":focus").closest(".rcp-color").click();
   }
 });

RockColorPicker.module.php

@@ -18,7 +18,7 @@ public static function getModuleInfo()
   {
     return [
       'title' => 'RockColorPicker',
-      'version' => '1.0.0',
+      'version' => '1.1.0',
       'summary' => 'Main RockColorPicker Module',
       'autoload' => false,
       'singular' => true, // sic
@@ -74,9 +74,6 @@ public function setColors($field, $colors, $force = false)
       $item->name = $name;
       $item->css = $data[0];
       $item->label = count($data) > 1 ? $data[1] : '';
-      $item->tooltip = $item->label
-        . ($item->label ? " - " : "")
-        . $item->css;
       $arr->set($name, $item);
     }
     $this->colors->set($field, $arr);

package.json

@@ -0,0 +1,3 @@
+{
+  "version": "1.0.0"
+}