From 017d7a85d42ed8a5479362514782a99a7351cefc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20=C4=8Ciha=C5=99?= <michal@cihar.com>
Date: Fri, 20 Nov 2020 10:33:44 +0100
Subject: [PATCH] JS: Rewrite Zen initialization

- properly init CodeMirror in vertical mode
- remove some no longer needed jQuery usage
---
 weblate/static/editor/base.js |  2 +-
 weblate/static/editor/zen.js  | 98 ++++++++++++++++++++---------------
 2 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/weblate/static/editor/base.js b/weblate/static/editor/base.js
index 6b55aca70243..5ce41f67f5d5 100644
--- 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
index fb9f2edb497d..99e4f302fd9f 100644
--- 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 */