Unified the phrases for the color picker

diff --git a/com.woltlab.wcf/templates/__colorFormField.tpl b/com.woltlab.wcf/templates/__colorFormField.tpl
index f0ba0159c589ff2bf8e9648a95634049d82e2b90..e5aede80ba042bf8d66c19cf4a4493c0b9c9fb20 100644 (file)
--- a/com.woltlab.wcf/templates/__colorFormField.tpl
+++ b/com.woltlab.wcf/templates/__colorFormField.tpl
@@ -12,19 +12,10 @@
         *}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}',
-            });
+    {include file='colorPickerJavaScript'}
 
+    <script data-relocate="true">
+        require(['WoltLabSuite/Core/Ui/Color/Picker'], (UiColorPicker) => {
             UiColorPicker.fromSelector("#{@$field->getPrefixedId()}_colorPickerButton");
         });
     </script>

diff --git a/com.woltlab.wcf/templates/colorPickerJavaScript.tpl b/com.woltlab.wcf/templates/colorPickerJavaScript.tpl
new file mode 100644 (file)
index 0000000..12532bc
--- /dev/null
+++ b/com.woltlab.wcf/templates/colorPickerJavaScript.tpl
@@ -0,0 +1,16 @@
+<script data-relocate="true">
+require(["WoltLabSuite/Core/Language"], (Language) => {
+       Language.addObject({
+               'wcf.style.colorPicker': '{jslang}wcf.style.colorPicker{/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.hue': '{jslang}wcf.style.colorPicker.hue{/jslang}',
+               'wcf.style.colorPicker.lightness': '{jslang}wcf.style.colorPicker.lightness{/jslang}',
+               'wcf.style.colorPicker.new': '{jslang}wcf.style.colorPicker.new{/jslang}',
+               'wcf.style.colorPicker.saturation': '{jslang}wcf.style.colorPicker.saturation{/jslang}',
+       });
+});
+</script>

diff --git a/syncTemplates.json b/syncTemplates.json
index f0ea6f7429125652e9bc43402a8a127fccec12c3..08b9892fe3995d5eec307c384cb467cf9736796f 100644 (file)
--- a/syncTemplates.json
+++ b/syncTemplates.json
@@ -73,6 +73,7 @@
     "checkboxesOptionType",
     "checkboxesSearchableOptionType",
     "codeMetaCode",
+    "colorPickerJavaScript",
     "fontAwesomeJavaScript",
     "formError",
     "formNotice",

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts b/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts
index abdf14676a6f661e4e58fb786679c6c3aa6cbf0f..d7381f5cf97e1788e53e1f3f216d9d788b0631c4 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts
@@ -11,6 +11,7 @@ import * as Language from "../../../Language";
 import UiDialog from "../../../Ui/Dialog";
 import * as UiStyleFontAwesome from "../../../Ui/Style/FontAwesome";
 import { DialogCallbackObject, DialogCallbackSetup } from "../../../Ui/Dialog/Data";
+import * as ColorPicker from "../../../Ui/Color/Picker";
 
 interface Rgba {
   r: number;
@@ -173,8 +174,9 @@ class AcpUiTrophyBadge implements DialogCallbackObject {
             picker.click();
           });
 
-          const colorPicker = new window.WCF.ColorPicker(".jsColorPicker");
-          colorPicker.setCallbackSubmit(() => this.renderIcon());
+          document.querySelectorAll(".jsColorPicker").forEach((element: HTMLElement) => {
+            new ColorPicker(element, { callbackSubmit: () => this.renderIcon() });
+          });
 
           const submitButton = context.querySelector(".formSubmit > .buttonPrimary") as HTMLElement;
           submitButton.addEventListener("click", (ev) => this.save(ev));

diff --git a/wcfsetup/install/files/acp/templates/__colorFormField.tpl b/wcfsetup/install/files/acp/templates/__colorFormField.tpl
index f0ba0159c589ff2bf8e9648a95634049d82e2b90..e5aede80ba042bf8d66c19cf4a4493c0b9c9fb20 100644 (file)
--- a/wcfsetup/install/files/acp/templates/__colorFormField.tpl
+++ b/wcfsetup/install/files/acp/templates/__colorFormField.tpl
@@ -12,19 +12,10 @@
         *}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}',
-            });
+    {include file='colorPickerJavaScript'}
 
+    <script data-relocate="true">
+        require(['WoltLabSuite/Core/Ui/Color/Picker'], (UiColorPicker) => {
             UiColorPicker.fromSelector("#{@$field->getPrefixedId()}_colorPickerButton");
         });
     </script>

diff --git a/wcfsetup/install/files/acp/templates/colorPickerJavaScript.tpl b/wcfsetup/install/files/acp/templates/colorPickerJavaScript.tpl
new file mode 100644 (file)
index 0000000..12532bc
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/colorPickerJavaScript.tpl
@@ -0,0 +1,16 @@
+<script data-relocate="true">
+require(["WoltLabSuite/Core/Language"], (Language) => {
+       Language.addObject({
+               'wcf.style.colorPicker': '{jslang}wcf.style.colorPicker{/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.hue': '{jslang}wcf.style.colorPicker.hue{/jslang}',
+               'wcf.style.colorPicker.lightness': '{jslang}wcf.style.colorPicker.lightness{/jslang}',
+               'wcf.style.colorPicker.new': '{jslang}wcf.style.colorPicker.new{/jslang}',
+               'wcf.style.colorPicker.saturation': '{jslang}wcf.style.colorPicker.saturation{/jslang}',
+       });
+});
+</script>

diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index c1df23fe14d67b7ef33b56e2a4a799bc160e9319..e0e1bde53e87d60e9bf157afd53fa8d38218c428 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -3,30 +3,20 @@
 <link href="{@$__wcf->getPath()}acp/style/acpStyleEditor.css" type="text/css" rel="stylesheet">
 
 {js application='wcf' acp='true' file='WCF.ACP.Style'}
-{js application='wcf' file='WCF.ColorPicker' bundle='WCF.Combined'}
+{include file='colorPickerJavaScript'}
+
 <script data-relocate="true">
-       require(['WoltLabSuite/Core/Acp/Ui/Style/Editor'], function(AcpUiStyleEditor) {
+       require(["WoltLabSuite/Core/Acp/Ui/Style/Editor", "WoltLabSuite/Core/Ui/Color/Picker"], (AcpUiStyleEditor, ColorPicker) => {
                AcpUiStyleEditor.setup({
                        isTainted: {if $isTainted}true{else}false{/if},
                        styleId: {if $action === 'edit'}{@$style->styleID}{else}0{/if},
                        styleRuleMap: styleRuleMap
                });
+
+               ColorPicker.fromSelector(".jsColorPicker");
        });
        
        $(function() {
-               new WCF.ColorPicker('.jsColorPicker');
-               
-               WCF.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}',
-               });
-               
                {if $action == 'edit'}
                        new WCF.ACP.Style.CopyStyle({@$style->styleID});
                        

diff --git a/wcfsetup/install/files/acp/templates/trophyAdd.tpl b/wcfsetup/install/files/acp/templates/trophyAdd.tpl
index 4846ed12160edf0ba3dc25d3389bd440406439a2..485f5230cf5db26476846e31aacc359592058ed8 100644 (file)
--- a/wcfsetup/install/files/acp/templates/trophyAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/trophyAdd.tpl
@@ -1,19 +1,11 @@
 {include file='header' pageTitle='wcf.acp.menu.link.trophy.'|concat:$action}
 
-{js application='wcf' file='WCF.ColorPicker' bundle='WCF.Combined'}
+{include file='colorPickerJavaScript'}
 {include file='fontAwesomeJavaScript'}
 
 <script data-relocate="true">
        require(['Language', 'WoltLabSuite/Core/Acp/Ui/Trophy/Badge'], function (Language, BadgeHandler) {
                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}',
                        'wcf.acp.style.image.error.invalidExtension': '{jslang}wcf.acp.style.image.error.invalidExtension{/jslang}',
                        'wcf.acp.trophy.badge.edit': '{jslang}wcf.acp.trophy.badge.edit{/jslang}',
                        'wcf.acp.trophy.imageUpload.error.notSquared': '{jslang}wcf.acp.trophy.imageUpload.error.notSquared{/jslang}',

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js
index 802ae531d565af821420728f78fe87ba2f167b78..857ad208d7a786283ad22f15dafb408005d11035 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js
@@ -6,13 +6,14 @@
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module  WoltLabSuite/Core/Acp/Ui/Trophy/Badge
  */
-define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog", "../../../Ui/Style/FontAwesome"], function (require, exports, tslib_1, Language, Dialog_1, UiStyleFontAwesome) {
+define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog", "../../../Ui/Style/FontAwesome", "../../../Ui/Color/Picker"], function (require, exports, tslib_1, Language, Dialog_1, UiStyleFontAwesome, ColorPicker) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.init = void 0;
     Language = tslib_1.__importStar(Language);
     Dialog_1 = tslib_1.__importDefault(Dialog_1);
     UiStyleFontAwesome = tslib_1.__importStar(UiStyleFontAwesome);
+    ColorPicker = tslib_1.__importStar(ColorPicker);
     /**
      * @exports     WoltLabSuite/Core/Acp/Ui/Trophy/Badge
      */
@@ -131,8 +132,9 @@ define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog"
                             const picker = badgeColorContainer.querySelector(".jsColorPicker");
                             picker.click();
                         });
-                        const colorPicker = new window.WCF.ColorPicker(".jsColorPicker");
-                        colorPicker.setCallbackSubmit(() => this.renderIcon());
+                        document.querySelectorAll(".jsColorPicker").forEach((element) => {
+                            new ColorPicker(element, { callbackSubmit: () => this.renderIcon() });
+                        });
                         const submitButton = context.querySelector(".formSubmit > .buttonPrimary");
                         submitButton.addEventListener("click", (ev) => this.save(ev));
                     },