Split extra javascript to new file

To ensure it's only applied to "full page" editor widgets
comic · Oct 11, 2024 · 631f99f · 631f99f
1 parent 5b6c244
commit 631f99f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/app/grandchallenge/core/static/js/markdownx.js b/app/grandchallenge/core/static/js/markdownx.js
@@ -126,10 +126,6 @@
             if (editor.scrollTop) editor.style.height = editor.scrollTop + getHeight(editor) + "px";
             return editor;
         }
-        function syncPreviewHeight(preview, editor) {
-            preview.style.height = editor.clientHeight + "px";
-            return preview;
-        }
         var MarkdownX = function(parent, editor, preview) {
             var _this = this;
             var properties = {
@@ -200,15 +196,6 @@
                 properties._editorIsResizable = (properties.editor.getAttribute(RESIZABILITY_ATTRIBUTE).match(/true/i) || []).length > 0 && properties.editor.offsetHeight > 0 && properties.editor.offsetWidth > 0;
                 getMarkdown();
                 utils_1.triggerCustomEvent("markdownx.init");
-                properties.preview = syncPreviewHeight(properties.preview, properties.editor);
-                const resizeObserver = new ResizeObserver((entries) => {
-                  for (const entry of entries) {
-                    if (entry.contentBoxSize) {
-                      properties.preview = syncPreviewHeight(properties.preview, properties.editor);
-                    }
-                  }
-                });
-                resizeObserver.observe(properties.editor);
             };
             var _markdownify = function() {
                 clearTimeout(_this.timeout);

diff --git a/app/grandchallenge/core/static/js/markdownx_full_page.js b/app/grandchallenge/core/static/js/markdownx_full_page.js
@@ -0,0 +1,16 @@
+$('document').ready(function(){
+    // Sync the height of the preview element to the height of the editor element.
+    let ELEMENTS = document.getElementsByClassName('markdownx');
+    Object.values(ELEMENTS).map(function (element) {
+        let editor = element.querySelector('.markdownx-editor'), preview = element.querySelector('.markdownx-preview');
+        preview.style.height = editor.clientHeight + "px";
+        const resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            if (entry.contentBoxSize) {
+              preview.style.height = editor.clientHeight + "px";
+            }
+          }
+        });
+        resizeObserver.observe(editor);
+    });
+});
diff --git a/app/grandchallenge/core/widgets.py b/app/grandchallenge/core/widgets.py
@@ -98,3 +98,8 @@ def media(self):
 
 class MarkdownEditorFullPageWidget(MarkdownEditorInlineWidget):
     template_name = "markdownx/full_page_widget.html"
+
+    class Media:
+        js = [
+            "js/markdownx_full_page.js",
+        ]