Move strings from js to data attributes so they become translatable. (#4813)

Fixes #4752

Author: frjo

hypha/apply/templates/forms/includes/field.html

@@ -8,13 +8,17 @@
             data-toggle-on="{{ field.field.choices.0.0 }}"
             data-toggle-off="{{ field.field.choices.1.0 }}"
         {% endif %}
-        {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' or widget_type == 'single_file_field_widget' or widget_type == 'multi_file_field_widget' %}data-js-file-upload{% endif %}
+        {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' or widget_type == 'single_file_field_widget' or widget_type == 'multi_file_field_widget' %}data-js-file-upload data-required-text="{% trans 'This field is required.' %}"{% endif %}
         {% if field.field.group_number > 1 %}
             data-hidden="{% if not show_all_group_fields and not field.field.visible %}true{% else %}false{% endif %}"
             data-required="{{ field.field.required_when_visible }}"
         {% endif %}
         {% if field.field.word_limit %}
             data-word-limit="{{ field.field.word_limit }}"
+            data-word-count-characters="{% trans 'characters' %}"
+            data-word-count-out-of="{% trans 'out of' %}"
+            data-word-count-close="{% trans '(Close to the limit)' %}"
+            data-word-count-over="{% trans '(Over the limit)' %}"
         {% endif %}
         {# fmt:off #}
         {% if widget_type == 'text_input' and field.field.max_length %}

hypha/static_src/javascript/file-uploads.js

@@ -39,7 +39,10 @@ htmx.onLoad(function () {
     input.addEventListener("invalid", function (event) {
       event.preventDefault(); // Prevent default browser behavior
 
-      let errorMessage = "This field is required.";
+      const fileUploadEl = input.closest("[data-js-file-upload]");
+      const errorMessage = fileUploadEl
+        ? fileUploadEl.dataset.requiredText
+        : "This field is required.";
       // Find the closest dff-uploader wrapper and display an error
       let container = input.closest(".form__item");
 

hypha/static_src/javascript/tinymce-word-count.js

@@ -9,11 +9,13 @@
    */
   function updateWordCount(element) {
     const currentCount = parseInt(element.innerText.match(/\d+/)?.[0], 10) || 0;
-    const limit = parseInt(
-      element.closest("[data-word-limit]").dataset.wordLimit,
-      10
-    );
+    const fieldset = element.closest("[data-word-limit]");
+    const limit = parseInt(fieldset.dataset.wordLimit, 10);
     const warningThreshold = limit * WARNING_THRESHOLD;
+    const textCharacters = fieldset.dataset.wordCountCharacters || "characters";
+    const textOutOf = fieldset.dataset.wordCountOutOf || "out of";
+    const textClose = fieldset.dataset.wordCountClose || "(Close to the limit)";
+    const textOver = fieldset.dataset.wordCountOver || "(Over the limit)";
 
     /**
      * Clear warning states and classes
@@ -23,21 +25,21 @@
       element.classList.remove("word-count-warning", "word-count-warning-2");
     }
 
-    if (element.textContent.includes("characters")) {
+    if (element.textContent.includes(textCharacters)) {
       clearWarnings();
       return;
     }
 
-    element.dataset.afterWordCount = ` out of ${limit}`;
+    element.dataset.afterWordCount = ` ${textOutOf} ${limit}`;
 
     if (currentCount <= warningThreshold) {
       clearWarnings();
     } else if (currentCount <= limit) {
-      element.dataset.afterWordCount += " (Close to the limit)";
+      element.dataset.afterWordCount += ` ${textClose}`;
       element.classList.remove("word-count-warning-2");
       element.classList.add("word-count-warning");
     } else {
-      element.dataset.afterWordCount += " (Over the limit)";
+      element.dataset.afterWordCount += ` ${textOver}`;
       element.classList.add("word-count-warning-2");
     }
   }