From 4bb44a68b6f8e57744e4fa16e39e44c84be162a7 Mon Sep 17 00:00:00 2001
From: "francois.grand" <francois.grand@irstea.fr>
Date: Fri, 4 May 2018 11:29:35 +0200
Subject: [PATCH] =?UTF-8?q?=20#34=20utilisation=20de=20MathJax=20pour=20af?=
 =?UTF-8?q?ficher=20des=20formules=20math=C3=A9matiques=20dans=20l'aide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calculators/cond_distri/cond_distri.fr.md | 15 ++++++++++++
 src/app/components/help/help.component.html   |  3 +--
 src/app/components/help/help.component.ts     | 23 +++++++++++++++++--
 src/index.html                                | 15 ++++++++++++
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/app/calculators/cond_distri/cond_distri.fr.md b/src/app/calculators/cond_distri/cond_distri.fr.md
index 2db456c41..39988284a 100644
--- a/src/app/calculators/cond_distri/cond_distri.fr.md
+++ b/src/app/calculators/cond_distri/cond_distri.fr.md
@@ -6,3 +6,18 @@ Conduite distributrice
 "_Il vaut mieux pomper même s'il ne se passe rien que risquer qu'il se passe quelque chose de pire en ne pompant pas._"
 
 Devise Shadok
+
+tests MathJax :
+---
+
+inline `$`a \ne 0`$` : $a \ne 0$
+
+display `$$`a \ne 0`$$` : $$a \ne 0$$
+
+inline `$`ax^2 + bx + c = 0`$` : $ax^2 + bx + c = 0$
+
+display `$$`ax^2 + bx + c = 0`$$` : $$ax^2 + bx + c = 0$$
+
+inline `$`x = {-b \pm \sqrt{b^2-4ac} \over 2a}`$` : $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
+
+display `$$`x = {-b \pm \sqrt{b^2-4ac} \over 2a}`$$` : $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
\ No newline at end of file
diff --git a/src/app/components/help/help.component.html b/src/app/components/help/help.component.html
index 7c45a2504..797719a05 100644
--- a/src/app/components/help/help.component.html
+++ b/src/app/components/help/help.component.html
@@ -1,8 +1,7 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col">
-            <markdown [data]="textData">
-            </markdown>
+            <markdown> {{textData}} </markdown>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/help/help.component.ts b/src/app/components/help/help.component.ts
index 8b0160f87..81e968eb8 100644
--- a/src/app/components/help/help.component.ts
+++ b/src/app/components/help/help.component.ts
@@ -1,4 +1,11 @@
-import { Component } from "@angular/core";
+import { Component, AfterViewInit } from "@angular/core";
+
+/*
+  tient lieu d'import quand on n'installe pas de paquet npm pour MathJax et qu'on le récupère
+  par l'index.html :
+   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
+*/
+declare var MathJax: any;
 
 import { FormulaireDefinition } from "../../formulaire/definition/form-definition";
 
@@ -6,7 +13,7 @@ import { FormulaireDefinition } from "../../formulaire/definition/form-definitio
     selector: 'help',
     templateUrl: "./help.component.html",
 })
-export class HelpComponent {
+export class HelpComponent implements AfterViewInit {
     /**
      * texte de l'aide
      */
@@ -18,4 +25,16 @@ export class HelpComponent {
     public set formHelp(f: FormulaireDefinition) {
         this.textData = f.helpText;
     }
+
+    /**
+     * MAJ des expressions LateX présentes dans le composant par MathJax
+     */
+    private updateMathjax() {
+        //     MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+        MathJax.Hub.Typeset();
+    }
+
+    public ngAfterViewInit() {
+        this.updateMathjax();
+    }
 }
diff --git a/src/index.html b/src/index.html
index 27c8202c3..afcc5e9ed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -34,6 +34,21 @@
     }
   </style>
 -->
+
+  <!-- MathJax-->
+  <!-- config locale qui s'ajoute à la config par défaut (ajoute les expressions LateX inline avec $....$) -->
+  <script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+    tex2jax: {
+      inlineMath: [['$','$'], ['\\(','\\)']],
+      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+    }
+  });
+  </script>
+
+  <!-- récupération du code + configuration par défaut -->
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
+  <!-- /MathJax-->
 </head>
 
 <body>
-- 
GitLab