JS: Rewrite Zen initialization

- properly init CodeMirror in vertical mode - remove some no longer needed jQuery usage
WeblateOrg · Nov 20, 2020 · 017d7a8 · 017d7a8
1 parent b11fa56
commit 017d7a8
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 43 deletions.
diff --git a/weblate/static/editor/base.js b/weblate/static/editor/base.js
@@ -77,7 +77,7 @@ WLT.Editor = (function () {
   }
 
   EditorBase.prototype.init = function () {
-    $(".translation-editor").each((idx, textarea) => {
+    document.querySelectorAll(".translation-editor").forEach((textarea) => {
       if (textarea.CodeMirror) {
         return;
       }

diff --git a/weblate/static/editor/zen.js b/weblate/static/editor/zen.js
@@ -89,54 +89,68 @@
   ZenEditor.prototype.init = function () {
     EditorBase.prototype.init.call(this);
 
-    /* Minimal height for side-by-side editor */
-    $(".zen-horizontal .translator").each(function () {
-      if (this.ZenInitDone) {
+    var editors = document.querySelectorAll(".translation-editor");
+
+    /* Initialize zen mode events */
+    editors.forEach((textarea) => {
+      if (textarea.zenInitDone) {
         return;
       }
-      var $this = $(this);
-      var tdHeight = $this.height();
-      var editorHeight = 0;
-      var contentHeight = $this.find("form").height();
-      var $editors = $this.find(".translation-editor");
-      $editors.each(function (idx, textarea) {
-        var codemirror = textarea.CodeMirror;
-        var $editor = $(codemirror.getWrapperElement());
+      var $tbody = $(textarea.closest("tbody"));
+
+      /*
+       * Ensure current editor is reasonably located in the window
+       * - show whole element if moving back
+       * - scroll down if in bottom half of the window
+       */
+      textarea.CodeMirror.on("focus", function () {
+        var current = $window.scrollTop();
+        var rowOffset = $tbody.offset().top;
+        if (rowOffset < current || rowOffset - current > $window.height() / 2) {
+          $([document.documentElement, document.body]).animate(
+            {
+              scrollTop: rowOffset,
+            },
+            100
+          );
+        }
+      });
+
+      textarea.CodeMirror.on("blur", handleTranslationChange);
+      textarea.zenInitDone = true;
+    });
+
+    /* Minimal height for side-by-side editor */
+    document
+      .querySelectorAll(".zen-horizontal .translator")
+      .forEach((translator) => {
+        if (translator.zenHorizontalInitDone) {
+          return;
+        }
+        var $translator = $(translator);
+        var tdHeight = $translator.height();
+        var editorHeight = 0;
+        var contentHeight = $translator.find("form").height();
+        var editors = translator.querySelectorAll(".translation-editor");
+
         /* Calculate editor height */
-        editorHeight += $editor.height();
-
-        /*
-         * Ensure current editor is reasonably located in the window
-         * - show whole element if moving back
-         * - scroll down if in bottom half of the window
-         */
-        codemirror.on("focus", function () {
-          var current = $window.scrollTop();
-          var rowOffset = $editor.closest("tbody").offset().top;
-          if (
-            rowOffset < current ||
-            rowOffset - current > $window.height() / 2
-          ) {
-            $([document.documentElement, document.body]).animate(
-              {
-                scrollTop: rowOffset,
-              },
-              100
-            );
-          }
+        editors.forEach((textarea) => {
+          editorHeight += parseInt(
+            window.getComputedStyle(textarea.CodeMirror.getWrapperElement())
+              .height
+          );
         });
 
-        codemirror.on("blur", handleTranslationChange);
-      });
-
-      $editors.each(function (idx, textarea) {
-        let height =
-          (tdHeight - (contentHeight - editorHeight)) / $editors.length;
-        textarea.CodeMirror.getScrollerElement().style.minHeight =
-          height + "px";
+        /* Adjust hight to fill in content */
+        editors.forEach((textarea) => {
+          var codemirror = textarea.CodeMirror;
+          let height =
+            (tdHeight - (contentHeight - editorHeight)) / editors.length;
+          textarea.CodeMirror.getScrollerElement().style.minHeight =
+            height + "px";
+        });
+        translator.zenHorizontalInitDone = true;
       });
-      this.ZenInitDone = true;
-    });
   };
 
   /* Handlers */