fix: Refactor MarkdownPreview widget to be able to use multiple on on…

…e page
Amsterdam-Music-Lab · May 6, 2024 · 6e40aa1 · 6e40aa1
1 parent 36412aa
commit 6e40aa1
Showing 1 changed file with 26 additions and 25 deletions.
diff --git a/backend/experiment/templates/widgets/markdown_preview_text_input.html b/backend/experiment/templates/widgets/markdown_preview_text_input.html
@@ -227,7 +227,6 @@
         }
 
         set markdown(html) {
-            console.log('knalvis!', html);
             this.shadowRoot.getElementById('markdownContent').innerHTML = html;
         }
     }
@@ -236,11 +235,7 @@
 
     const csrf = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
 
-    function renderMarkdown() {
-        // get value
-        const textarea = document.querySelector('.markdown-preview-text-input textarea');
-        const markdownPreview = document.getElementById('markdownPreview');
-
+    function renderMarkdown(textarea, markdownPreview) {
         // render markdown through http post request to /experiment/render_markdown
         return fetch('/experiment/render_markdown/', {
             method: 'POST',
@@ -259,33 +254,39 @@
     }
 
     document.addEventListener('DOMContentLoaded', function() {
-        const tabs = document.querySelectorAll('.markdown-preview-text-input .tab');
-        const tabContents = document.querySelectorAll('.markdown-preview-text-input .tab-content');
 
-        tabs.forEach(function(tab, index) {
-            tab.addEventListener('click', function() {
-                tabs.forEach(function(tab) {
-                    tab.classList.remove('active');
-                });
+        const markdownWidgets = document.querySelectorAll('.markdown-preview-text-input');
 
-                tab.classList.add('active');
+        markdownWidgets.forEach(function(widget) {
+            const tabs = widget.querySelectorAll('.tab');
+            const tabContents = widget.querySelectorAll('.tab-content');
 
-                tabContents.forEach(function(tabContent) {
-                    tabContent.classList.remove('active');
-                });
+            tabs.forEach(function(tab, index) {
+                tab.addEventListener('click', function() {
+                    tabs.forEach(function(tab) {
+                        tab.classList.remove('active');
+                    });
+
+                    tab.classList.add('active');
+
+                    tabContents.forEach(function(tabContent) {
+                        tabContent.classList.remove('active');
+                    });
 
-                tabContents[index].classList.add('active');
+                    tabContents[index].classList.add('active');
+                });
             });
-        });
 
-        const textarea = document.querySelector('.markdown-preview-text-input textarea');
-        const markdownPreview = document.querySelector('.markdown-preview-text-input .markdown-preview');
+            const textarea = widget.querySelector('textarea');
+            const markdownPreview = widget.querySelector('#markdownPreview');
 
-        textarea.addEventListener('blur', function() {
-            renderMarkdown();
-        });
+            textarea.addEventListener('blur', function() {
+                renderMarkdown(textarea, markdownPreview);
+            });
 
-        renderMarkdown();
+            renderMarkdown(textarea, markdownPreview);
+        });
+
     });
 
 </script>