From 1374da4ca90ab1f8a0f539a2a95a45a1a2d1de14 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 22 Nov 2017 18:22:15 +0000 Subject: Fixed import of render mermaid & render math methods --- app/assets/javascripts/main.js | 2 -- app/assets/javascripts/render_gfm.js | 19 +++++++++---------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index d908452399c..08e326cba9c 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -69,8 +69,6 @@ import './project_import'; import './projects_dropdown'; import './projects_list'; import './syntax_highlight'; -import './render_math'; -import './render_mermaid'; import './render_gfm'; import './right_sidebar'; import './search'; diff --git a/app/assets/javascripts/render_gfm.js b/app/assets/javascripts/render_gfm.js index bf6fc0ec305..cb935a6bea8 100644 --- a/app/assets/javascripts/render_gfm.js +++ b/app/assets/javascripts/render_gfm.js @@ -1,16 +1,15 @@ -/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len */ +import './render_math'; +import './render_mermaid'; // Render Gitlab flavoured Markdown // // Delegates to syntax highlight and render math & mermaid diagrams. // -(function() { - $.fn.renderGFM = function() { - this.find('.js-syntax-highlight').syntaxHighlight(); - this.find('.js-render-math').renderMath(); - this.find('.js-render-mermaid').renderMermaid(); - return this; - }; +$.fn.renderGFM = function renderGFM() { + this.find('.js-syntax-highlight').syntaxHighlight(); + this.find('.js-render-math').renderMath(); + this.find('.js-render-mermaid').renderMermaid(); + return this; +}; - $(() => $('body').renderGFM()); -}).call(window); +$(() => $('body').renderGFM()); -- cgit v1.2.1 From ffd7fbf53b25462809d3d38dca7f4523ebcc679e Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 22 Nov 2017 18:40:11 +0000 Subject: moved to es6 modules --- app/assets/javascripts/render_gfm.js | 8 ++-- app/assets/javascripts/render_math.js | 75 +++++++++++++++----------------- app/assets/javascripts/render_mermaid.js | 10 +++-- spec/javascripts/notes_spec.js | 2 - 4 files changed, 45 insertions(+), 50 deletions(-) diff --git a/app/assets/javascripts/render_gfm.js b/app/assets/javascripts/render_gfm.js index cb935a6bea8..c91a0d9ba41 100644 --- a/app/assets/javascripts/render_gfm.js +++ b/app/assets/javascripts/render_gfm.js @@ -1,5 +1,5 @@ -import './render_math'; -import './render_mermaid'; +import renderMath from './render_math'; +import renderMermaid from './render_mermaid'; // Render Gitlab flavoured Markdown // @@ -7,8 +7,8 @@ import './render_mermaid'; // $.fn.renderGFM = function renderGFM() { this.find('.js-syntax-highlight').syntaxHighlight(); - this.find('.js-render-math').renderMath(); - this.find('.js-render-mermaid').renderMermaid(); + renderMath(this.find('.js-render-math')); + renderMermaid(this.find('.js-render-mermaid')); return this; }; diff --git a/app/assets/javascripts/render_math.js b/app/assets/javascripts/render_math.js index 8b3fee49cb9..a759992cd54 100644 --- a/app/assets/javascripts/render_math.js +++ b/app/assets/javascripts/render_math.js @@ -1,4 +1,3 @@ -/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len, no-console */ /* global katex */ // Renders math using KaTeX in any element with the @@ -8,49 +7,45 @@ // // // -(function() { // Only load once - var katexLoaded = false; +let katexLoaded = false; - // Loop over all math elements and render math - var renderWithKaTeX = function (elements) { - elements.each(function () { - var mathNode = $(''); - var $this = $(this); +// Loop over all math elements and render math +function renderWithKaTeX(elements) { + elements.each(function katexElementsLoop() { + const mathNode = $(''); + const $this = $(this); - var display = $this.attr('data-math-style') === 'display'; - try { - katex.render($this.text(), mathNode.get(0), { displayMode: display }); - mathNode.insertAfter($this); - $this.remove(); - } catch (err) { - // What can we do?? - console.log(err.message); - } - }); - }; + const display = $this.attr('data-math-style') === 'display'; + try { + katex.render($this.text(), mathNode.get(0), { displayMode: display }); + mathNode.insertAfter($this); + $this.remove(); + } catch (err) { + throw err; + } + }); +} - $.fn.renderMath = function() { - var $this = this; - if ($this.length === 0) return; +export default function renderMath($els) { + if (!$els.length) return; - if (katexLoaded) renderWithKaTeX($this); - else { - // Request CSS file so it is in the cache - $.get(gon.katex_css_url, function() { - var css = $('', - { rel: 'stylesheet', - type: 'text/css', - href: gon.katex_css_url, - }); - css.appendTo('head'); + if (katexLoaded) { + renderWithKaTeX($els); + } else { + $.get(gon.katex_css_url, () => { + const css = $('', { + rel: 'stylesheet', + type: 'text/css', + href: gon.katex_css_url, + }); + css.appendTo('head'); - // Load KaTeX js - $.getScript(gon.katex_js_url, function() { - katexLoaded = true; - renderWithKaTeX($this); // Run KaTeX - }); + // Load KaTeX js + $.getScript(gon.katex_js_url, () => { + katexLoaded = true; + renderWithKaTeX($els); // Run KaTeX }); - } - }; -}).call(window); + }); + } +} diff --git a/app/assets/javascripts/render_mermaid.js b/app/assets/javascripts/render_mermaid.js index a253601f8e8..41942c04a4e 100644 --- a/app/assets/javascripts/render_mermaid.js +++ b/app/assets/javascripts/render_mermaid.js @@ -14,8 +14,8 @@ import Flash from './flash'; -$.fn.renderMermaid = function renderMermaid() { - if (this.length === 0) return; +export default function renderMermaid($els) { + if (!$els.length) return; import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid').then((mermaid) => { mermaid.initialize({ @@ -23,8 +23,10 @@ $.fn.renderMermaid = function renderMermaid() { theme: 'neutral', }); - mermaid.init(undefined, this); + $els.each((i, el) => { + mermaid.init(undefined, el); + }); }).catch((err) => { Flash(`Can't load mermaid module: ${err}`); }); -}; +} diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js index 63abac222c4..677a389b88f 100644 --- a/spec/javascripts/notes_spec.js +++ b/spec/javascripts/notes_spec.js @@ -4,8 +4,6 @@ import 'autosize'; import '~/gl_form'; import '~/lib/utils/text_utility'; -import '~/render_math'; -import '~/render_mermaid'; import '~/render_gfm'; import '~/notes'; -- cgit v1.2.1