-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Anton Akhmerov's workaround to mock v2 API for pages with both chtml …
…& svg outputs
- Loading branch information
Showing
5 changed files
with
174 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Plotly.js Devtools - MathJax v3 loaded with chtml output</title> | ||
| <p>MathJax $V^3$ with $chtml$ output on the page and <b>svg</b> output on the plotly graphs</p> | ||
| <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"/> | ||
| <link rel="stylesheet" type="text/css" href="./style.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <img src="http://images.plot.ly/logo/plotlyjs-logo@2x.png" onClick="Tabs.reload();" /> | ||
| <span id="reload-time"></span> | ||
|
|
||
| <input id="mocks-search" type="text" placeholder="mocks search" /> | ||
| <input id="css-transform" type="text" placeholder="css transform" /> | ||
| </header> | ||
|
|
||
| <section id="mocks-list"></section> | ||
| <div id="plots"> | ||
| <div id="graph"></div> | ||
| </div> | ||
| <div id="snapshot"></div> | ||
|
|
||
| <script> | ||
| window.MathJax = window.MathJax || { | ||
| // mocking v2 API as suggested by https://github.com/akhmerov namely to handle both chtml output on the page as well as svg outputs for plotly | ||
|
|
||
| startup: { | ||
| // | ||
| // Mapping of old extension names to new ones | ||
| // | ||
| requireMap: { | ||
| AMSmath: 'ams', | ||
| AMSsymbols: 'ams', | ||
| AMScd: 'amscd', | ||
| SVG: 'svg', | ||
| noErrors: 'noerrors', | ||
| noUndefined: 'noundefined' | ||
| }, | ||
| ready() { | ||
| // Here and later using recipe from https://github.com/mathjax/MathJax/issues/2705 | ||
| // | ||
| // Get the MathJax modules that we need. | ||
| // | ||
| const {mathjax} = MathJax._.mathjax; | ||
| const {SVG} = MathJax._.output.svg_ts; | ||
|
|
||
| // Now using https://docs.mathjax.org/en/v3.2-latest/upgrading/v2.html#version-2-compatibility-example | ||
| // | ||
| // Replace the require command map with a new one that checks for | ||
| // renamed extensions and converts them to the new names. | ||
| // | ||
| var CommandMap = MathJax._.input.tex.SymbolMap.CommandMap; | ||
| var requireMap = MathJax.config.startup.requireMap; | ||
| var RequireLoad = MathJax._.input.tex.require.RequireConfiguration.RequireLoad; | ||
| var RequireMethods = { | ||
| Require: function (parser, name) { | ||
| var required = parser.GetArgument(name); | ||
| if (required.match(/[^_a-zA-Z0-9]/) || required === '') { | ||
| throw new TexError('BadPackageName', 'Argument for %1 is not a valid package name', name); | ||
| } | ||
| if (requireMap.hasOwnProperty(required)) { | ||
| required = requireMap[required]; | ||
| } | ||
| RequireLoad(parser, required); | ||
| } | ||
| }; | ||
| new CommandMap('require', {require: 'Require'}, RequireMethods); | ||
| MathJax.Callback = function (args) { | ||
| if (Array.isArray(args)) { | ||
| if (args.length === 1 && typeof(args[0]) === 'function') { | ||
| return args[0]; | ||
| } else if (typeof(args[0]) === 'string' && args[1] instanceof Object && | ||
| typeof(args[1][args[0]]) === 'function') { | ||
| return Function.bind.apply(args[1][args[0]], args.slice(1)); | ||
| } else if (typeof(args[0]) === 'function') { | ||
| return Function.bind.apply(args[0], [window].concat(args.slice(1))); | ||
| } else if (typeof(args[1]) === 'function') { | ||
| return Function.bind.apply(args[1], [args[0]].concat(args.slice(2))); | ||
| } | ||
| } else if (typeof(args) === 'function') { | ||
| return args; | ||
| } | ||
| throw Error("Can't make callback from given data"); | ||
| }; | ||
| // | ||
| // Add a replacement for MathJax.Hub commands | ||
| // | ||
| MathJax.Hub = { | ||
| Queue: function () { | ||
| for (var i = 0, m = arguments.length; i < m; i++) { | ||
| var fn = MathJax.Callback(arguments[i]); | ||
| MathJax.startup.promise = MathJax.startup.promise.then(fn); | ||
| } | ||
| return MathJax.startup.promise; | ||
| }, | ||
| Typeset: function (element, callback) { | ||
| var promise = MathJax.typesetSVGPromise([element]).then( | ||
| () => { | ||
| element.firstElementChild.classList.add("MathJax_SVG"); | ||
| } | ||
| ); | ||
| if (callback) { | ||
| promise = promise.then(callback); | ||
| } | ||
| return promise; | ||
| }, | ||
| Config: function () {}, | ||
| Configured: function () {console.log('MathJax cannot be configured like this')}, | ||
| config: {menuSettings: {renderer: "SVG"}} | ||
| }; | ||
|
|
||
| MathJax.startup.defaultReady(); | ||
|
|
||
| // Continuing from https://github.com/mathjax/MathJax/issues/2705 | ||
| // | ||
| // Create an SVG output jax and a new MathDocument that uses it. | ||
| // | ||
| const svgOutput = new SVG(MathJax.config.svg); | ||
| const svgDocument = mathjax.document(document, { | ||
| ...MathJax.config.options, | ||
| InputJax: MathJax.startup.input, | ||
| OutputJax: svgOutput | ||
| }); | ||
| // | ||
| // Define the SVG-based conversion methods | ||
| // | ||
| MathJax.svgStylesheet = () => svgOutput.styleSheet(svgDocument); | ||
| MathJax.typesetSVGPromise = (elements) => { | ||
| svgDocument.options.elements = elements; | ||
| svgDocument.reset(); | ||
| return mathjax.handleRetriesFor(() => { | ||
| svgDocument.render(); | ||
| }); | ||
| }; | ||
| } | ||
| }, | ||
| loader: {load: ["output/svg"]}, | ||
| tex: { | ||
| inlineMath: [["\\(", "\\)"], ["$", "$"]], | ||
| displayMath: [["\\[", "\\]"], ["$$", "$$"]], | ||
| processEscapes: true, | ||
| processEnvironments: true, | ||
| autoload: { | ||
| color: [], // don't autoload the color extension | ||
| colorv2: ['color'], // do autoload the colorv2 extension | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| <script src="../../node_modules/mathjax-v3/es5/tex-mml-chtml.js"></script> | ||
| <script> | ||
| // let plotly.js know that v2 API is mocked | ||
| window.MathJax._mockedV2API = true; | ||
| </script> | ||
| <script charset="utf-8" id="source" type="module">import "../../build/plotly.js"</script> | ||
| <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters