diff --git a/cms/static/cms/js/require-config.js b/cms/static/cms/js/require-config.js index 4e5be98dfc..8139da6206 100644 --- a/cms/static/cms/js/require-config.js +++ b/cms/static/cms/js/require-config.js @@ -1,3 +1,16 @@ +if (window) { + // MathJax Fast Preview was introduced in 2.5. However, it + // causes undesirable flashing/font size changes when + // MathJax is used for interactive preview (equation editor). + // Setting processSectionDelay to 0 (see below) fully eliminates + // fast preview, but to reduce confusion, we are also setting + // the option as displayed in the context menu to false. + // When upgrading to 2.6, check if this variable name changed. + window.MathJax = { + menuSettings: {CHTMLpreview: false} + }; +} + require.config({ // NOTE: baseUrl has been previously set in cms/static/templates/base.html waitSeconds: 60, @@ -70,7 +83,7 @@ require.config({ // end of Annotation tool files // externally hosted files - "mathjax": "//cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured", + "mathjax": "//cdn.mathjax.org/mathjax/2.5-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured", "youtube": [ // youtube URL does not end in ".js". We add "?noext" to the path so // that require.js adds the ".js" to the query component of the URL, @@ -191,6 +204,12 @@ require.config({ ] } }); + // In order to eliminate all flashing during interactive + // preview, it is necessary to set processSectionDelay to 0 + // (remove delay between input and output phases). This + // effectively disables fast preview, regardless of + // the fast preview setting as shown in the context menu. + MathJax.Hub.processSectionDelay = 0; MathJax.Hub.Configured(); } }, diff --git a/cms/static/coffee/spec/main.coffee b/cms/static/coffee/spec/main.coffee index 14315b5236..a2a5cb3083 100644 --- a/cms/static/coffee/spec/main.coffee +++ b/cms/static/coffee/spec/main.coffee @@ -51,7 +51,7 @@ requirejs.config({ "URI": "xmodule_js/common_static/js/vendor/URI.min", "mock-ajax": "xmodule_js/common_static/js/vendor/mock-ajax", - "mathjax": "//cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured", + "mathjax": "//cdn.mathjax.org/mathjax/2.5-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured", "youtube": "//www.youtube.com/player_api?noext", "coffee/src/ajax_prefix": "xmodule_js/common_static/coffee/src/ajax_prefix", diff --git a/cms/static/coffee/spec/main_squire.coffee b/cms/static/coffee/spec/main_squire.coffee index f9053e5e3b..20cb7bc7a0 100644 --- a/cms/static/coffee/spec/main_squire.coffee +++ b/cms/static/coffee/spec/main_squire.coffee @@ -42,7 +42,7 @@ requirejs.config({ "domReady": "xmodule_js/common_static/js/vendor/domReady", "URI": "xmodule_js/common_static/js/vendor/URI.min", - "mathjax": "//cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured", + "mathjax": "//cdn.mathjax.org/mathjax/2.5-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured", "youtube": "//www.youtube.com/player_api?noext", "coffee/src/ajax_prefix": "xmodule_js/common_static/coffee/src/ajax_prefix" diff --git a/common/static/js/capa/spec/formula_equation_preview_spec.js b/common/static/js/capa/spec/formula_equation_preview_spec.js index fe97d8fbc8..0bf4ffacb8 100644 --- a/common/static/js/capa/spec/formula_equation_preview_spec.js +++ b/common/static/js/capa/spec/formula_equation_preview_spec.js @@ -235,8 +235,7 @@ describe("Formula Equation Preview", function () { // Refresh the MathJax. expect(MathJax.Hub.Queue).toHaveBeenCalledWith( - ['Text', this.jax, 'THE_FORMULA'], - ['Reprocess', this.jax] + ['Text', this.jax, 'THE_FORMULA'] ); }); }); @@ -302,8 +301,7 @@ describe("Formula Equation Preview", function () { runs(function () { // Refresh the MathJax. expect(MathJax.Hub.Queue).toHaveBeenCalledWith( - ['Text', this.jax, '\\text{OOPSIE}'], - ['Reprocess', this.jax] + ['Text', this.jax, '\\text{OOPSIE}'] ); expect($img.css('visibility')).toEqual('hidden'); }); @@ -349,17 +347,15 @@ describe("Formula Equation Preview", function () { this.callbacks[0](this.responses[0]); expect(MathJax.Hub.Queue).toHaveBeenCalledWith( - ['Text', this.jax, 'THE_FORMULA_0'], - ['Reprocess', this.jax] + ['Text', this.jax, 'THE_FORMULA_0'] ); expect($img.css('visibility')).toEqual('visible'); this.callbacks[1](this.responses[1]); expect(MathJax.Hub.Queue).toHaveBeenCalledWith( - ['Text', this.jax, 'THE_FORMULA_1'], - ['Reprocess', this.jax] + ['Text', this.jax, 'THE_FORMULA_1'] ); - expect($img.css('visibility')).toEqual('hidden') + expect($img.css('visibility')).toEqual('hidden'); }); it("doesn't display outdated information", function () { @@ -370,15 +366,14 @@ describe("Formula Equation Preview", function () { // Switch the order (1 returns before 0) this.callbacks[1](this.responses[1]); expect(MathJax.Hub.Queue).toHaveBeenCalledWith( - ['Text', this.jax, 'THE_FORMULA_1'], - ['Reprocess', this.jax] + ['Text', this.jax, 'THE_FORMULA_1'] ); - expect($img.css('visibility')).toEqual('hidden') + expect($img.css('visibility')).toEqual('hidden'); MathJax.Hub.Queue.reset(); this.callbacks[0](this.responses[0]); expect(MathJax.Hub.Queue).not.toHaveBeenCalled(); - expect($img.css('visibility')).toEqual('hidden') + expect($img.css('visibility')).toEqual('hidden'); }); it("doesn't show an error if the responses are close together", @@ -392,8 +387,7 @@ describe("Formula Equation Preview", function () { this.callbacks[1](this.responses[1]); expect(MathJax.Hub.Queue).toHaveBeenCalledWith( - ['Text', this.jax, 'THE_FORMULA_1'], - ['Reprocess', this.jax] + ['Text', this.jax, 'THE_FORMULA_1'] ); // Make sure that it doesn't indeed show up later diff --git a/common/static/js/capa/src/formula_equation_preview.js b/common/static/js/capa/src/formula_equation_preview.js index 9930d99364..3c01cab909 100644 --- a/common/static/js/capa/src/formula_equation_preview.js +++ b/common/static/js/capa/src/formula_equation_preview.js @@ -139,8 +139,7 @@ formulaEquationPreview.enable = function () { if (inputData.jax) { // Set the text as the latex code, and then update the MathJax. MathJax.Hub.Queue( - ['Text', inputData.jax, latex], - ['Reprocess', inputData.jax] + ['Text', inputData.jax, latex] ); } else if (latex) { console.log("[FormulaEquationInput] Oops no mathjax for ", latex); diff --git a/common/templates/mathjax_include.html b/common/templates/mathjax_include.html index f15fc0fc67..a57ef69e13 100644 --- a/common/templates/mathjax_include.html +++ b/common/templates/mathjax_include.html @@ -1,11 +1,28 @@ ## mako ## File: templates/mathjax_include.html ## -## Advanced mathjax using 2.0-latest CDN for Dynamic Math -## -## This enables ASCIIMathJAX, and is used by js_textbox +## Note that this file is only used by LMS. +## MathJax configuration for Studio lives in +## cms/js/require-config.js. +<%page args="disable_fast_preview=True"/> + +%if disable_fast_preview: +// Fast Preview was introduced in 2.5. However, it +// causes undesirable flashing/font size changes when +// MathJax is used for interactive preview (equation editor). +// Setting processSectionDelay to 0 (see below) fully eliminates +// fast preview, but to reduce confusion, we are also setting +// the option as displayed in the context menu to false. +// When upgrading to 2.6, check if this variable name changed. + +%endif + %if mathjax_mode is not Undefined and mathjax_mode == 'wiki': %endif + diff --git a/lms/static/js/spec/main.js b/lms/static/js/spec/main.js index a7d585ad11..fef5af93a9 100644 --- a/lms/static/js/spec/main.js +++ b/lms/static/js/spec/main.js @@ -49,7 +49,7 @@ 'jasmine.async': 'xmodule_js/common_static/js/vendor/jasmine.async', 'draggabilly': 'xmodule_js/common_static/js/vendor/draggabilly.pkgd', 'domReady': 'xmodule_js/common_static/js/vendor/domReady', - 'mathjax': '//cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured', // jshint ignore:line + 'mathjax': '//cdn.mathjax.org/mathjax/2.5-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured', // jshint ignore:line 'youtube': '//www.youtube.com/player_api?noext', 'coffee/src/ajax_prefix': 'xmodule_js/common_static/coffee/src/ajax_prefix', 'coffee/src/instructor_dashboard/student_admin': 'coffee/src/instructor_dashboard/student_admin', diff --git a/lms/templates/discussion/_js_body_dependencies.html b/lms/templates/discussion/_js_body_dependencies.html index 801e275ebf..447af19652 100644 --- a/lms/templates/discussion/_js_body_dependencies.html +++ b/lms/templates/discussion/_js_body_dependencies.html @@ -1 +1,3 @@ -<%include file="/mathjax_include.html" /> +<%page args="disable_fast_preview=True"/> + +<%include file="/mathjax_include.html" args="disable_fast_preview=disable_fast_preview"/> diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html index 3363f6ac83..3be7b41ab3 100644 --- a/lms/templates/discussion/index.html +++ b/lms/templates/discussion/index.html @@ -18,7 +18,8 @@ from django.core.urlresolvers import reverse <%block name="js_extra"> -<%include file="_js_body_dependencies.html" /> +## Enable fast preview to fix discussion MathJax rendering bug when page first loads. +<%include file="_js_body_dependencies.html" args="disable_fast_preview=False"/> <%static:js group='discussion'/>