Externalize i18n Strings, Replace jQuery.

* Externalize and translate some more strings (#267) * Replace some more jQuery (#201)
thsmi · May 16, 2020 · 1c862a2 · 1c862a2
1 parent a669596
commit 1c862a2
Show file tree

Hide file tree

Showing 45 changed files with 1,181 additions and 561 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Gulp app:package-win32",
+      "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
+      "args": [
+        "app:package-win32"
+      ],
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    }
+  ]
+}
diff --git a/src/app/libs/managesieve.ui/tabs/SieveTabsUI.js b/src/app/libs/managesieve.ui/tabs/SieveTabsUI.js
@@ -201,15 +201,15 @@
     }
 
     /**
-     * Checks if a tab for the given script exits.
+     * Checks if a tab for the given script exists.
      *
      * @param {string} account
      *   the accounts unique id.
      * @param {string} name
      *   the script name.
      *
      * @returns {boolean}
-     *   true in case the tab exits otherwise false.
+     *   true in case the tab exists otherwise false.
      */
     has(account, name) {
       return (this.getTab(account, name) !== null);

diff --git a/src/common/libSieve/RFC5228/templates/SieveAddressPartDomain.html b/src/common/libSieve/RFC5228/templates/SieveAddressPartDomain.html
@@ -1,6 +1,6 @@
 <div>
   <div class="dropdown-item" href="#" data-value=":domain">
-    <h5 data-i18n="addresspart.domain.text"></h5>
+    <h5 data-i18n="addresspart.domain.title"></h5>
     <small data-i18n="addresspart.domain.text" class="form-text text-muted" style="white-space: pre-line"></small>
   </div>
 </div>
diff --git a/src/common/libSieve/RFC5228/templates/SieveDiscardActionUI.html b/src/common/libSieve/RFC5228/templates/SieveDiscardActionUI.html
@@ -0,0 +1,14 @@
+<div>
+    <ul id="template-tabs">
+        <li class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#sieve-widget-help" data-i18n="discard.tab.help" role="tab"></a>
+        </li>
+    </ul>
+
+    <div id="template-content">
+        <div class="tab-content m-2">
+            <div data-i18n="fileinto.help" style="white-space: pre-line" class="tab-pane fade" id="sieve-widget-help" role="tabpanel">
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/common/libSieve/RFC5228/templates/SieveKeepActionUI.html b/src/common/libSieve/RFC5228/templates/SieveKeepActionUI.html
@@ -0,0 +1,14 @@
+<div>
+    <ul id="template-tabs">
+        <li class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#sieve-widget-help" data-i18n="keep.tab.help" role="tab"></a>
+        </li>
+    </ul>
+
+    <div id="template-content">
+        <div class="tab-content m-2">
+            <div data-i18n="keep.help" style="white-space: pre-line" class="tab-pane fade" id="sieve-widget-help" role="tabpanel">
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/common/libSieve/RFC5228/templates/SieveStopActionUI.html b/src/common/libSieve/RFC5228/templates/SieveStopActionUI.html
@@ -0,0 +1,15 @@
+<div>
+  <ul id="template-tabs">
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="tab" href="#sieve-widget-help" data-i18n="stop.tab.help" role="tab"></a>
+    </li>
+  </ul>
+
+  <div id="template-content">
+    <div class="tab-content m-2">
+      <div data-i18n="stop.help" style="white-space: pre-line" class="tab-pane fade" id="sieve-widget-help"
+        role="tabpanel">
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/common/libSieve/RFC5228/widgets/SieveActionsUI.js b/src/common/libSieve/RFC5228/widgets/SieveActionsUI.js
@@ -14,52 +14,77 @@
 
   "use strict";
 
-  /* global $: false */
-
-  /* global SieveActionBoxUI */
   /* global SieveDesigner */
   /* global SieveActionDialogBoxUI */
   /* global SieveOverlayWidget */
+  /* global SieveTemplate */
 
   /**
    * Provides a UI for the stop action
    */
-  class SieveStopUI extends SieveActionBoxUI {
+  class SieveStopUI extends SieveActionDialogBoxUI {
+
+    /**
+     * @inheritdoc
+     */
+    getTemplate() {
+      return "./RFC5228/templates/SieveStopActionUI.html";
+    }
 
     /**
      * @inheritdoc
      */
     getSummary() {
-      return $("<div/>")
-        .text("End Script (Stop processing)");
+      const FRAGMENT =
+        `<div><span data-i18n="stop.summary"></span></div>`;
+
+      return (new SieveTemplate()).convert(FRAGMENT);
     }
   }
 
   /**
    * Provides a UI for the discard action
    */
-  class SieveDiscardUI extends SieveActionBoxUI {
+  class SieveDiscardUI extends SieveActionDialogBoxUI {
+
+    /**
+     * @inheritdoc
+     */
+    getTemplate() {
+      return "./RFC5228/templates/SieveDiscardActionUI.html";
+    }
 
     /**
      * @inheritdoc
      */
     getSummary() {
-      return $("<div/>")
-        .text("Discard message silently");
+      const FRAGMENT =
+        `<div><span data-i18n="discard.summary"></span></div>`;
+
+      return (new SieveTemplate()).convert(FRAGMENT);
     }
   }
 
   /**
    * Provides a UI for the keep action
    */
-  class SieveKeepUI extends SieveActionBoxUI {
+  class SieveKeepUI extends SieveActionDialogBoxUI {
+
+    /**
+     * @inheritdoc
+     */
+    getTemplate() {
+      return "./RFC5228/templates/SieveKeepActionUI.html";
+    }
 
     /**
      * @inheritdoc
      */
     getSummary() {
-      return $("<div/>")
-        .text("Keep a copy in the main inbox");
+      const FRAGMENT =
+        `<div><span data-i18n="keep.summary"></span></div>`;
+
+      return (new SieveTemplate()).convert(FRAGMENT);
     }
   }
 
@@ -119,9 +144,15 @@
      * @inheritdoc
      */
     getSummary() {
-      return $("<div/>")
-        .html("Redirect message to " +
-          "<em>" + $('<div/>').text(this.address()).html() + "</em>");
+      const FRAGMENT =
+        `<div>
+          <span data-i18n="redirect.summary"></span>
+          <em class="sivRedirectAddress"></em>
+         </div>`;
+
+      const elm = (new SieveTemplate()).convert(FRAGMENT);
+      elm.querySelector(".sivRedirectAddress").textContent = this.address();
+      return elm;
     }
   }
 
@@ -154,11 +185,11 @@
      */
     onSave() {
 
-      const path = $("#sivFileIntoPath");
+      const path = document.querySelector("#sivFileIntoPath");
 
-      const value = path.val();
+      const value = path.value;
       if (value.trim() === "") {
-        path.addClass("is-invalid");
+        path.classList.add("is-invalid");
         return false;
       }
 
@@ -183,13 +214,19 @@
      * @inheritdoc
      */
     getSummary() {
-      return $("<div/>")
-        .html("Save message into:" +
-          "<div><em>" + $('<div/>').text(this.path()).html() + "</em></div>");
+
+      const FRAGMENT =
+        `<div>
+          <div data-i18n="fileinto.summary"></div>
+          <div><em class="sivFileintoPath"></em></div>
+         </div>`;
+
+      const elm = (new SieveTemplate()).convert(FRAGMENT);
+      elm.querySelector(".sivFileintoPath").textContent = this.path();
+      return elm;
     }
   }
 
-
   if (!SieveDesigner)
     throw new Error("Could not register Action Widgets");
 

diff --git a/src/common/libSieve/RFC5228/widgets/SieveBlocksUI.js b/src/common/libSieve/RFC5228/widgets/SieveBlocksUI.js
@@ -32,7 +32,10 @@
      * @inheritdoc
      */
     createHtml(parent) {
-      return parent.append(this.getSieve().elms[FIRST_ELEMENT].html());
+      parent.appendChild(
+        this.getSieve().elms[FIRST_ELEMENT].html());
+
+      return parent;
     }
   }
 
@@ -43,44 +46,49 @@
    */
   class SieveBlockUI extends SieveAbstractBoxUI {
 
+    // TODO is this really needed to wrap the item?
     /**
-     * Initializes the Block element.
-     * @returns {jQuery}
-     *   the newly create Element
+     * Wraps the given child item in to a block.
+     * @private
+     *
+     * @param {HTMLElement} item
+     *   the item to be wrapped
+     * @returns {HTMLElement}
+     *   the ui element
+     */
+    createBlockChild(item) {
+      const child = document.createElement('div');
+      child.appendChild(item);
+      child.classList.add("sivBlockChild");
+
+      return child;
+    }
+
+    /**
+     * @inheritdoc
      */
-    init() {
-      const elm = $("<div/>")
-        .addClass("sivBlock");
+    createHtml(parent) {
+      const elm = document.createElement("div");
+      elm.classList.add("sivBlock");
 
       for (const sivElm of this.getSieve().elms) {
         const item = sivElm.html();
 
         if (!item)
           continue;
 
-        elm
-          .append((new SieveDropBoxUI(this))
-            .drop(new SieveBlockDropHandler(), sivElm)
-            .html()
-            .addClass("sivBlockSpacer"))
-          .append(
-            $("<div/>").append(item)
-              .addClass("sivBlockChild"));
+        elm.appendChild((new SieveDropBoxUI(this, "sivBlockSpacer"))
+          .drop(new SieveBlockDropHandler(), sivElm)
+          .html());
+        elm.appendChild(this.createBlockChild(item));
       }
 
-      elm.append((new SieveDropBoxUI(this))
+      elm.appendChild((new SieveDropBoxUI(this, "sivBlockSpacer"))
         .drop(new SieveBlockDropHandler())
-        .html()
-        .addClass("sivBlockSpacer"));
-
-      return elm;
-    }
+        .html());
 
-    /**
-     * @inheritdoc
-     */
-    createHtml(parent) {
-      return parent.append(this.init());
+      parent.appendChild(elm);
+      return parent;
     }
   }