From a12837d33742741d5c28f629258d59a306937812 Mon Sep 17 00:00:00 2001
From: Steve Jalim <stevejalim@mozilla.com>
Date: Thu, 28 Mar 2024 22:18:47 +0400
Subject: [PATCH] Add a hook to run some JS to replace the labels of the
 ThemedColorBlock select... with approriate human-friendly labels that fit the
 active theme for the site.

---
 birdbox/common/wagtail_hooks.py | 44 ++++++++++++++++++++++
 src/js/theme-color-labels.js    | 66 +++++++++++++++++++++++++++++++++
 webpack.config.js               |  1 +
 3 files changed, 111 insertions(+)
 create mode 100644 birdbox/common/wagtail_hooks.py
 create mode 100644 src/js/theme-color-labels.js

diff --git a/birdbox/common/wagtail_hooks.py b/birdbox/common/wagtail_hooks.py
new file mode 100644
index 00000000..e1dc9214
--- /dev/null
+++ b/birdbox/common/wagtail_hooks.py
@@ -0,0 +1,44 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+from django.templatetags.static import static
+from django.utils.html import format_html_join
+from django.utils.safestring import mark_safe
+
+from wagtail import hooks
+
+
+@hooks.register("insert_editor_js")
+def patch_in_dynamic_theme_color_names():
+    # Each theme has a set of custom/specific colors associated with it,
+    # sharing the same CSS classnames, but varying based on theme.
+    # microsite.blocks.ColorThemBlock has values which are the CSS classes to use
+    # and, by default, the _label_ for each option is, basically, the CSS class
+    # name. To make the editor experience better, we swap in theme-specific
+    # human-friendly labels when the editing UI is rendered, based on the
+    # theme selected for the birdbox site
+
+    from microsite.models import MicrositeSettings
+
+    try:
+        settings = MicrositeSettings.objects.first()
+        theme_name = settings.site_theme
+    except AttributeError:
+        theme_name = "mozilla"
+
+    js_files = [
+        "js/color-theme-block-labels.js",
+    ]
+    js_includes = format_html_join("\n", '<script src="{0}"></script>', ((static(filename),) for filename in js_files))
+
+    return js_includes + mark_safe(
+        """
+        <script>
+            window.addEventListener("DOMContentLoaded", () => {
+                window.Birdbox.themeColorLabelFixup("%s");
+            });
+        </script>
+        """
+        % theme_name  # noqa: F522 F524  # Old-style formatting needed to avoid breaking hook rendering
+    )
diff --git a/src/js/theme-color-labels.js b/src/js/theme-color-labels.js
new file mode 100644
index 00000000..c76b903a
--- /dev/null
+++ b/src/js/theme-color-labels.js
@@ -0,0 +1,66 @@
+/*
+* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this
+* file, You can obtain one at https://mozilla.org/MPL/2.0/.
+*/
+
+/* These mappings let us give descriptive names to CSS classes
+* when we surface them in the Wagtail editor. If you change the
+* value of the relevant class, you may need to update here, too
+*/
+
+const colorLabels = {
+    "mozilla": {
+        "mzp-t-light": "White",
+        "mzp-t-dark": "Black/Ink",
+        "bb-t-light-color-01": "Light Gray",
+        "bb-t-dark-color-01": "Dark Gray",
+        "bb-t-light-color-02": "Pink",
+        "bb-t-dark-color-02": "Red",
+        "bb-t-light-color-03": "Light Yellow",
+        "bb-t-dark-color-03": "Dark Yellow",
+        "bb-t-light-color-04": "Light Orange",
+        "bb-t-dark-color-04": "Dark Orange",
+        "bb-t-light-color-05": "Light Green",
+        "bb-t-dark-color-05": "Dark Green",
+        "bb-t-light-color-06": "Light Blue",
+        "bb-t-dark-color-06": "Dark Blue",
+        "bb-t-light-color-07": "Light Violet",
+        "bb-t-dark-color-07": "Dark Violet",
+    },
+    "firefox": {
+        "mzp-t-light": "White",
+        "mzp-t-dark": "Black/Ink",
+        "bb-t-light-color-01": "Light Gray",
+        "bb-t-dark-color-01": "Dark Gray",
+        "bb-t-light-color-02": "Pink",
+        "bb-t-dark-color-02": "Red",
+        "bb-t-light-color-03": "Light Yellow",
+        "bb-t-dark-color-03": "Dark Yellow",
+        "bb-t-light-color-04": "Light Orange",
+        "bb-t-dark-color-04": "Dark Orange",
+        "bb-t-light-color-05": "Light Green",
+        "bb-t-dark-color-05": "Dark Green",
+        "bb-t-light-color-06": "Light Blue",
+        "bb-t-dark-color-06": "Dark Blue",
+        "bb-t-light-color-07": "Light Violet",
+        "bb-t-dark-color-07": "Dark Violet",
+    },
+}
+
+var fixupHelper = function(themeName){
+    const themeColorOptionElements = document.querySelectorAll("[data-contentpath='color_theme'] option");
+    const newLabels = colorLabels[themeName];
+    Array.from(themeColorOptionElements).forEach(
+        item => {
+            if (newLabels.hasOwnProperty(item.label)){
+                item.label=newLabels[item.label]
+            }
+        }
+    )
+};
+
+
+window.Birdbox = window.Birdbox || {};
+
+window.Birdbox.themeColorLabelFixup = fixupHelper
diff --git a/webpack.config.js b/webpack.config.js
index 755d2667..9886a691 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,6 +19,7 @@ module.exports = {
         "protocol-global": "./src/js/protocol/global.js",
         "newsletter-form": "./src/js/newsletter/newsletter-init.js", // not protocol JS (yet)
         analytics: "./src/js/analytics.js",
+        "color-theme-block-labels": "./src/js/theme-color-labels.js",
 
         // CSS
         // base/core