Add `ColorFormField`

diff --git a/com.woltlab.wcf/templates/__colorFormField.tpl b/com.woltlab.wcf/templates/__colorFormField.tpl
new file mode 100644 (file)
index 0000000..f0ba015
--- /dev/null
+++ b/com.woltlab.wcf/templates/__colorFormField.tpl
@@ -0,0 +1,31 @@
+{if $field->isImmutable()}
+    <span class="colorPickerButton">
+        <span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
+    </span>
+{else}
+    <a href="#" class="colorPickerButton jsTooltip" id="{@$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{@$field->getPrefixedId()}">
+        <span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
+    </a>
+    <input type="hidden" {*
+        *}id="{@$field->getPrefixedId()}" {*
+        *}name="{@$field->getPrefixedId()}" {*
+        *}value="{$field->getValue()}"{*
+    *}>
+
+    <script data-relocate="true">
+        require(['WoltLabSuite/Core/Language', 'WoltLabSuite/Core/Ui/Color/Picker'], (Language, UiColorPicker) => {
+            Language.addObject({
+                'wcf.style.colorPicker': '{jslang}wcf.style.colorPicker{/jslang}',
+                'wcf.style.colorPicker.alpha': '{jslang}wcf.style.colorPicker.alpha{/jslang}',
+                'wcf.style.colorPicker.button.apply': '{jslang}wcf.style.colorPicker.button.apply{/jslang}',
+                'wcf.style.colorPicker.color': '{jslang}wcf.style.colorPicker.color{/jslang}',
+                'wcf.style.colorPicker.current': '{jslang}wcf.style.colorPicker.current{/jslang}',
+                'wcf.style.colorPicker.error.invalidColor': '{jslang}wcf.style.colorPicker.error.invalidColor{/jslang}',
+                'wcf.style.colorPicker.hexAlpha': '{jslang}wcf.style.colorPicker.hexAlpha{/jslang}',
+                'wcf.style.colorPicker.new': '{jslang}wcf.style.colorPicker.new{/jslang}',
+            });
+
+            UiColorPicker.fromSelector("#{@$field->getPrefixedId()}_colorPickerButton");
+        });
+    </script>
+{/if}

diff --git a/wcfsetup/install/files/acp/templates/__colorFormField.tpl b/wcfsetup/install/files/acp/templates/__colorFormField.tpl
new file mode 100644 (file)
index 0000000..f0ba015
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/__colorFormField.tpl
@@ -0,0 +1,31 @@
+{if $field->isImmutable()}
+    <span class="colorPickerButton">
+        <span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
+    </span>
+{else}
+    <a href="#" class="colorPickerButton jsTooltip" id="{@$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{@$field->getPrefixedId()}">
+        <span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
+    </a>
+    <input type="hidden" {*
+        *}id="{@$field->getPrefixedId()}" {*
+        *}name="{@$field->getPrefixedId()}" {*
+        *}value="{$field->getValue()}"{*
+    *}>
+
+    <script data-relocate="true">
+        require(['WoltLabSuite/Core/Language', 'WoltLabSuite/Core/Ui/Color/Picker'], (Language, UiColorPicker) => {
+            Language.addObject({
+                'wcf.style.colorPicker': '{jslang}wcf.style.colorPicker{/jslang}',
+                'wcf.style.colorPicker.alpha': '{jslang}wcf.style.colorPicker.alpha{/jslang}',
+                'wcf.style.colorPicker.button.apply': '{jslang}wcf.style.colorPicker.button.apply{/jslang}',
+                'wcf.style.colorPicker.color': '{jslang}wcf.style.colorPicker.color{/jslang}',
+                'wcf.style.colorPicker.current': '{jslang}wcf.style.colorPicker.current{/jslang}',
+                'wcf.style.colorPicker.error.invalidColor': '{jslang}wcf.style.colorPicker.error.invalidColor{/jslang}',
+                'wcf.style.colorPicker.hexAlpha': '{jslang}wcf.style.colorPicker.hexAlpha{/jslang}',
+                'wcf.style.colorPicker.new': '{jslang}wcf.style.colorPicker.new{/jslang}',
+            });
+
+            UiColorPicker.fromSelector("#{@$field->getPrefixedId()}_colorPickerButton");
+        });
+    </script>
+{/if}

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
new file mode 100644 (file)
index 0000000..80eb310
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace wcf\system\form\builder\field;
+
+use wcf\system\form\builder\field\validation\FormFieldValidationError;
+
+/**
+ * Implementation of a form field for a RGBA color.
+ *
+ * @author  Matthias Schmidt
+ * @copyright   2001-2021 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package WoltLabSuite\Core\System\Form\Builder\Field
+ * @since   5.5
+ */
+class ColorFormField extends AbstractFormField implements IImmutableFormField
+{
+    use TImmutableFormField;
+
+    /**
+     * @inheritDoc
+     */
+    protected $javaScriptDataHandlerModule = 'WoltLabSuite/Core/Form/Builder/Field/Value';
+
+    /**
+     * @inheritDoc
+     */
+    protected $templateName = '__colorFormField';
+
+    /**
+     * @inheritDoc
+     */
+    public function readValue()
+    {
+        if (
+            $this->getDocument()->hasRequestData($this->getPrefixedId())
+            && \is_string($this->getDocument()->getRequestData($this->getPrefixedId()))
+        ) {
+            $this->value = $this->getDocument()->getRequestData($this->getPrefixedId());
+
+            if ($this->value === '') {
+                $this->value = null;
+            }
+        }
+
+        return $this;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function validate()
+    {
+        parent::validate();
+
+        if ($this->getValue() === null) {
+            if ($this->isRequired()) {
+                $this->addValidationError(new FormFieldValidationError('empty'));
+            }
+        } else {
+            // @see StyleAddForm::readFormParameters()
+            if (!\preg_match('~rgba\(\d{1,3}, ?\d{1,3}, ?\d{1,3}, ?(1|1\.00?|0|0?\.[0-9]{1,2})\)~', $this->getValue())) {
+                $this->addValidationError(new FormFieldValidationError(
+                    'invalid',
+                    'wcf.style.colorPicker.error.invalidColor'
+                ));
+            }
+        }
+    }
+}