Merge branch 'feature/hex'

client/src/js/App.vue

@@ -12,32 +12,41 @@
       v-if="rgbValuesAvailable && visible"
       class="level51-verte level51-verte-horizontal"
       picker="square"
-      model="rgb"
-      v-model="rgb"
+      :model="payload.mode"
+      v-model="inRgbMode ? rgb : simpleValue"
       :show-history="false"
       :draggable="false"
       :enable-alpha="false"
       :rgb-sliders="true"
       display="widget" />
 
-    <input
-      type="hidden"
-      :name="`${payload.name}[R]`"
-      min="0"
-      max="255"
-      :value="colorObject.r">
-    <input
-      type="hidden"
-      :name="`${payload.name}[G]`"
-      min="0"
-      max="255"
-      :value="colorObject.g">
-    <input
-      type="hidden"
-      :name="`${payload.name}[B]`"
-      min="0"
-      max="255"
-      :value="colorObject.b">
+    <template v-if="inRgbMode">
+      <input
+        type="hidden"
+        :name="`${payload.name}[R]`"
+        min="0"
+        max="255"
+        :value="colorObject.r">
+      <input
+        type="hidden"
+        :name="`${payload.name}[G]`"
+        min="0"
+        max="255"
+        :value="colorObject.g">
+      <input
+        type="hidden"
+        :name="`${payload.name}[B]`"
+        min="0"
+        max="255"
+        :value="colorObject.b">
+    </template>
+
+    <template v-if="inHexMode">
+      <input
+        type="hidden"
+        :name="payload.name"
+        :value="rgbValuesAvailable ? simpleValue : null">
+    </template>
   </div>
 </template>
 
@@ -69,9 +78,13 @@ export default {
       rgbValuesAvailable: false,
 
       /**
-       * The color selected by the picker, in the format "rgb(r,g,b)"
+       * The color selected by the picker, in the format "rgb(r,g,b)".
+       * Only used if in rgb mode.
        */
-      rgb: null
+      rgb: null,
+
+      /** Simple value used e.g. in the hex mode */
+      simpleValue: null
     };
   },
   components: { Verte },
@@ -80,12 +93,19 @@ export default {
 
     // Check for an existing value.
     if (this.payload.value && this.payload.value !== 'null') {
-      const values = JSON.parse(this.payload.value);
+      if (this.inRgbMode) {
+        const values = JSON.parse(this.payload.value);
+
+        // Check for valid RGB values, set the picker value and rgbValuesAvailable flag
+        if (Object.values(values).filter(val => val >= 0 && val <= 255).length === 3) {
+          this.rgb = `rgb(${values.R}, ${values.G}, ${values.B})`;
+          this.rgbValuesAvailable = true;
+        }
+      }
 
-      // Check for valid RGB values, set the picker value and rgbValuesAvailable flag
-      if (Object.values(values).filter(val => val >= 0 && val <= 255).length === 3) {
-        this.rgb = `rgb(${values.R}, ${values.G}, ${values.B})`;
+      if (this.inHexMode) {
         this.rgbValuesAvailable = true;
+        this.simpleValue = this.payload.value;
       }
     }
   },
@@ -99,6 +119,12 @@ export default {
     }, 100);
   },
   computed: {
+    inRgbMode() {
+      return this.payload.mode === 'rgb';
+    },
+    inHexMode() {
+      return this.payload.mode === 'hex';
+    },
     showCheckbox() {
       if (typeof this.payload.showCheckbox === 'boolean') return this.payload.showCheckbox;
 

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "level51/silverstripe-color-picker",
-  "version": "0.1.4",
-  "time": "2020-09-10",
+  "version": "0.2.0",
+  "time": "2021-04-12",
   "description": "Color picker module for SilverStripe 4 using verte",
   "keywords": [
     "silverstripe",

lang/de.yml

@@ -1,4 +1,5 @@
 de:
   Level51\ColorPicker\ColorPickerField:
     ADD_RGB_VALUES: RGB Farbwerte angeben?
-    ERR_INVALID_VALUE: Ungültige RGB Eingabe, die Werte müssen zwischen -1 und 255 liegen.
+    ERR_INVALID_RGB_VALUE: Ungültige RGB Eingabe, die Werte müssen zwischen -1 und 255 liegen.
+    ERR_INVALID_HEX_VALUE: 'Ungültige Hex Eingabe, der Wert muss ein String mit genau 7 Zeichen sein (z.B. #ff0000).'

lang/en.yml

@@ -1,4 +1,5 @@
 en:
   Level51\ColorPicker\ColorPickerField:
     ADD_RGB_VALUES: Add RGB color values?
-    ERR_INVALID_VALUE: Invalid RGB input, values must be set and between -1 and 255
+    ERR_INVALID_RGB_VALUE: Invalid RGB input, values must be set and between -1 and 255
+    ERR_INVALID_HEX_VALUE: 'Invalid Hex input, value must be a string with exactly 7 chars (e.g. #ff0000).'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "silverstripe-color-picker",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Color picker module for SilverStripe 4 using verte",
   "authors": {
     "name": "Level51",

src/ColorPickerField.php

@@ -9,18 +9,27 @@
 /**
  * FormField showing a basic RGB color picker.
  *
- * The value will be stored in single database field as JSON string, e.g. {"R":"73","G":"128","B":"140"}.
+ * In RGB mode, the value will be stored in single database field as JSON string, e.g. {"R":"73","G":"128","B":"140"}.
+ * In Hex mode, the value will be a single string - so no manipulation needed here.
  *
  * @package Level51\ColorPicker
  */
-class ColorPickerField extends FormField {
+class ColorPickerField extends FormField
+{
+
+    public const MODE_RGB = 'rgb';
+    public const MODE_HEX = 'hex';
 
     /**
      * @var bool Whether or not a "Add RGB color values" is shown.
      */
     private $showCheckbox = true;
 
-    public function Field($properties = array()) {
+    /** @var string The color picker mode */
+    private $mode = 'rgb';
+
+    public function Field($properties = array())
+    {
         Requirements::javascript('level51/silverstripe-color-picker: client/dist/colorPickerField.js');
         Requirements::css('level51/silverstripe-color-picker: client/dist/colorPickerField.css');
 
@@ -32,22 +41,27 @@ public function Field($properties = array()) {
      *
      * @return string
      */
-    public function getPayload() {
-        return json_encode([
-            'id'           => $this->ID(),
-            'name'         => $this->getName(),
-            'value'        => $this->Value(),
-            'i18n'         => $this->getFrontendI18NPayload(),
-            'showCheckbox' => $this->showCheckbox
-        ]);
+    public function getPayload()
+    {
+        return json_encode(
+            [
+                'id'           => $this->ID(),
+                'name'         => $this->getName(),
+                'value'        => $this->Value(),
+                'i18n'         => $this->getFrontendI18NPayload(),
+                'mode'         => $this->mode,
+                'showCheckbox' => $this->showCheckbox
+            ]
+        );
     }
 
     /**
      * Get a list of all labels used within the frontend.
      *
      * @return array
      */
-    public function getFrontendI18NPayload() {
+    public function getFrontendI18NPayload()
+    {
         $payload = [];
         $keys = [
             'ADD_RGB_VALUES'
@@ -60,16 +74,28 @@ public function getFrontendI18NPayload() {
         return $payload;
     }
 
+    public function setSubmittedValue($value, $data = null)
+    {
+        if ($this->mode === self::MODE_RGB) {
+            return $this->setSubmittedRGBValue($value, $data);
+        }
+
+        return parent::setSubmittedValue($value, $data);
+    }
+
     /**
-     * Turn the submitted value (array with 3 single values) into a JSON string for storage.
+     * Turn the submitted rgb value (array with 3 single values) into a JSON string for storage.
      *
      * @param array $value
      * @param null  $data
      *
      * @return $this
      */
-    public function setSubmittedValue($value, $data = null) {
-        if (!$value) return $this;
+    public function setSubmittedRGBValue($value, $data = null)
+    {
+        if (!$value) {
+            return $this;
+        }
 
         // trim whitespaces
         foreach ($value as $key => $v) {
@@ -79,26 +105,44 @@ public function setSubmittedValue($value, $data = null) {
         return $this->setValue(json_encode($value), $data);
     }
 
+    public function validate($validator)
+    {
+        if ($this->mode === self::MODE_RGB) {
+            return $this->validateRGBMode($validator);
+        }
+
+        if ($this->mode === self::MODE_HEX) {
+            return $this->validateHexMode($validator);
+        }
+
+        return true;
+    }
+
     /**
-     * Validate the input, ensure that each value is between -1 and 255.
+     * Validate the input in RGB mode, ensure that each value is between -1 and 255.
      *
      * @param Validator $validator
      *
      * @return bool
      */
-    public function validate($validator) {
+    private function validateRGBMode($validator)
+    {
         $values = $this->Value() ? json_decode($this->Value(), true) : null;
 
-        if (!$values) return true;
+        if (!$values) {
+            return true;
+        }
 
         foreach ($values as $value) {
-            if ($value === '') continue;
+            if ($value === '') {
+                continue;
+            }
 
             $number = intval($value);
             if (($number === 0 && ($value !== "0")) || is_null($number) || $number > 255 || $number < -1) {
                 $validator->validationError(
                     $this->getName(),
-                    _t(__CLASS__ . '.ERR_INVALID_VALUE'),
+                    _t(__CLASS__ . '.ERR_INVALID_RGB_VALUE'),
                     "validation"
                 );
 
@@ -109,14 +153,53 @@ public function validate($validator) {
         return true;
     }
 
+    /**
+     * Validate the input in Hex mode, ensure that the value is a string with exactly 7 chars.
+     *
+     * @param Validator $validator
+     *
+     * @return bool
+     */
+    private function validateHexMode($validator)
+    {
+        $value = $this->Value();
+
+        if ($value && is_string($value) && strlen($value) !== 7) {
+            $validator->validationError(
+                $this->getName(),
+                _t(__CLASS__ . '.ERR_INVALID_HEX_VALUE'),
+                'validation'
+            );
+
+            return false;
+        }
+
+        return true;
+    }
+
     /**
      * Disable the "Add RGB color values" checkbox, so instantly show the color picker.
      *
      * @return $this
      */
-    public function disableCheckbox() {
+    public function disableCheckbox()
+    {
         $this->showCheckbox = false;
 
         return $this;
     }
+
+    /**
+     * Change the color picker mode, see MODE_ constants.
+     *
+     * @param string $mode
+     *
+     * @return $this
+     */
+    public function setMode($mode)
+    {
+        $this->mode = $mode;
+
+        return $this;
+    }
 }