fix: mathjax resize on sindow resize (openedx#32606)

* fix: mathjax resize on sindow resize * fix: add resize for mathjax in wiki and cms
eduNEXT · Jul 5, 2023 · a68fd49 · a68fd49
1 parent 810bf97
commit a68fd49
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/cms/templates/content_libraries/xblock_iframe.html b/cms/templates/content_libraries/xblock_iframe.html
@@ -81,6 +81,12 @@
   <!-- Configure and load MathJax -->
   <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
+      styles: {
+        '.MathJax_SVG>svg': { 'max-width': '100%' },
+      },
+      CommonHTML: { linebreaks: { automatic: true } },
+      SVG: { linebreaks: { automatic: true } },
+      "HTML-CSS": { linebreaks: { automatic: true } },
       tex2jax: {
         inlineMath: [
           ["\\(","\\)"],
@@ -92,6 +98,18 @@
         ]
       }
     });
+    window.addEventListener('resize', MJrenderer);
+    let 1 = -1;
+    let delay = 1000;
+    function MJrenderer() {
+      if (t >= 0) {
+        window.clearTimeout(t);
+      }
+      t = window.setTimeout(function() {
+        MathJax.Hub.Queue(["Rerenderer", MathJax.Hub]);
+        t = -1;
+      }, delay);
+    };
   </script>
   <script type="text/x-mathjax-config">
     MathJax.Hub.signal.Interest(function(message) {

diff --git a/common/templates/mathjax_include.html b/common/templates/mathjax_include.html
@@ -29,14 +29,26 @@
 %if mathjax_mode is not Undefined and mathjax_mode == 'wiki':
 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
+    styles: {
+      '.MathJax_SVG>svg': { 'max-width': '100%', },
+    },
+    CommonHTML: { linebreaks: { automatic: true } },
+    SVG: { linebreaks: { automatic: true } },
+    "HTML-CSS": { linebreaks: { automatic: true } },
     tex2jax: {inlineMath: [ ['$','$'], ["\\(","\\)"]],
               displayMath: [ ['$$','$$'], ["\\[","\\]"]]}
   });
 </script>
 %else:
 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
+    styles: {
+      '.MathJax_SVG>svg': { 'max-width': '100%', },
+    },
     messageStyle: "none",
+    CommonHTML: { linebreaks: { automatic: true } },
+    SVG: { linebreaks: { automatic: true } },
+    "HTML-CSS": { linebreaks: { automatic: true } },
     tex2jax: {
       inlineMath: [
         ["\\(","\\)"],
@@ -85,6 +97,21 @@
             explorer: true
         }
     };
+    window.addEventListener('resize', MJrerender);
+
+    let t = -1;
+    let delay = 1000;
+    function MJrerender() {
+      if (t >= 0) {
+        // If we are still waiting, then the user is still resizing =>
+        // postpone the action further!
+        window.clearTimeout(t);
+      }
+      t = window.setTimeout(function() {
+        MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
+        t = -1; // Reset the handle
+      }, delay);
+    };
 </script>
 
 <!-- This must appear after all mathjax-config blocks, so it is after the imports from the other templates.