fix: add correct css and call back for mathjax

openedx · Jul 24, 2023 · 6261005 · 6261005
1 parent 6bdeb34
commit 6261005
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/cms/djangoapps/pipeline_js/js/xmodule.js b/cms/djangoapps/pipeline_js/js/xmodule.js
@@ -23,6 +23,11 @@ define(
             'mathjax',
             function() {
                 window.MathJax.Hub.Config({
+                    styles: {
+                        '.MathJax_SVG>svg': { 'max-width': '100%' },
+                        // This is to resolve for people who use center mathjax with tables
+                        'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
+                    },
                     tex2jax: {
                         inlineMath: [
                             ['\\(', '\\)'],
@@ -57,19 +62,19 @@ define(
                       window.clearTimeout(t);
                     }
                     if (oldWidth !== document.documentElement.scrollWidth) {
-                      t = window.setTimeout(function() {
-                        oldWidth = document.documentElement.scrollWidth;
-                        MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
-                        t = -1;
-                      }, delay);
+                        t = window.setTimeout(function() {
+                          oldWidth = document.documentElement.scrollWidth;
+                          MathJax.Hub.Queue(
+                            ["Rerender", MathJax.Hub],
+                            [() => $('.MathJax_SVG>svg').toArray().forEach(el => {
+                              if ($(el).width() === 0) {
+                                $(el).css('max-width', 'inherit');
+                              }
+                            })]
+                          );
+                          t = -1;
+                        }, delay);
                     }
-
-                    // this is added to compensate for custom css that accidentally hide mathjax
-                    $('.MathJax_SVG>svg').toArray().forEach(el => {
-                        if ($(el).width() === 0) {
-                        $(el).css('max-width', 'inherit');
-                        }
-                    });
                 };
             }
         );

diff --git a/cms/templates/content_libraries/xblock_iframe.html b/cms/templates/content_libraries/xblock_iframe.html
@@ -83,6 +83,8 @@
     MathJax.Hub.Config({
       styles: {
         '.MathJax_SVG>svg': { 'max-width': '100%' },
+        // This is to resolve for people who use center mathjax with tables
+        'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
       },
       CommonHTML: { linebreaks: { automatic: true } },
       SVG: { linebreaks: { automatic: true } },
@@ -111,17 +113,17 @@
       if (oldWidth !== document.documentElement.scrollWidth) {
         t = window.setTimeout(function() {
           oldWidth = document.documentElement.scrollWidth;
-          MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
+          MathJax.Hub.Queue(
+            ["Rerender", MathJax.Hub],
+            [() => $('.MathJax_SVG>svg').toArray().forEach(el => {
+              if ($(el).width() === 0) {
+                $(el).css('max-width', 'inherit');
+              }
+            })]
+          );
           t = -1;
         }, delay);
       }
-
-      // this is added to compensate for custom css that accidentally hide mathjax
-      $('.MathJax_SVG>svg').toArray().forEach(el => {
-        if ($(el).width() === 0) {
-          $(el).css('max-width', 'inherit');
-        }
-      });
     };
   </script>
   <script type="text/x-mathjax-config">

diff --git a/common/templates/mathjax_include.html b/common/templates/mathjax_include.html
@@ -31,6 +31,8 @@
   MathJax.Hub.Config({
     styles: {
       '.MathJax_SVG>svg': { 'max-width': '100%', },
+      // This is to resolve for people who use center mathjax with tables
+      'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
     },
     CommonHTML: { linebreaks: { automatic: true } },
     SVG: { linebreaks: { automatic: true } },
@@ -44,6 +46,8 @@
   MathJax.Hub.Config({
     styles: {
       '.MathJax_SVG>svg': { 'max-width': '100%', },
+      // This is to resolve for people who use center mathjax with tables
+      'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
     },
     messageStyle: "none",
     CommonHTML: { linebreaks: { automatic: true } },
@@ -110,17 +114,17 @@
       if (oldWidth !== document.documentElement.scrollWidth) {
         t = window.setTimeout(function() {
           oldWidth = document.documentElement.scrollWidth;
-          MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
+          MathJax.Hub.Queue(
+            ["Rerender", MathJax.Hub],
+            [() => $('.MathJax_SVG>svg').toArray().forEach(el => {
+              if ($(el).width() === 0) {
+                $(el).css('max-width', 'inherit');
+              }
+            })]
+          );
           t = -1;
         }, delay);
       }
-
-      // this is added to compensate for custom css that accidentally hide mathjax
-      $('.MathJax_SVG>svg').toArray().forEach(el => {
-        if ($(el).width() === 0) {
-          $(el).css('max-width', 'inherit');
-        }
-      });
     };
 </script>