Relecture code

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+divers/

package-lock.json

@@ -118,9 +118,9 @@
       }
     },
     "node_modules/@types/eslint": {
-      "version": "8.44.7",
+      "version": "8.44.8",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.7.tgz",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.8.tgz",
-      "integrity": "sha512-f5ORu2hcBbKei97U73mf+l9t4zTGl74IqZ0GQk4oVea/VS8tQZYkUveSYojk+frraAVYId0V2WC9O4PTNru2FQ==",
+      "integrity": "sha512-4K8GavROwhrYl2QXDXm0Rv9epkA8GBFu0EI+XrrnnuCl7u8CWBRusX7fXJfanhZTDWSAL24gDI/UqXyUM0Injw==",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -186,9 +186,9 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
     },
     "node_modules/@types/node": {
-      "version": "20.10.0",
+      "version": "20.10.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
-      "integrity": "sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==",
+      "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -662,9 +662,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.22.1",
+      "version": "4.22.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
-      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
       "funding": [
         {
           "type": "opencollective",
@@ -680,9 +680,9 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001541",
+        "caniuse-lite": "^1.0.30001565",
-        "electron-to-chromium": "^1.4.535",
+        "electron-to-chromium": "^1.4.601",
-        "node-releases": "^2.0.13",
+        "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
       "bin": {
@@ -719,9 +719,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001564",
+      "version": "1.0.30001566",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz",
-      "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+      "integrity": "sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==",
       "funding": [
         {
           "type": "opencollective",
@@ -752,17 +752,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1016,9 +1005,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.594",
+      "version": "1.4.609",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz",
-      "integrity": "sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ=="
+      "integrity": "sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw=="
     },
     "node_modules/encodeurl": {
       "version": "1.0.2",
@@ -1792,6 +1781,20 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -1991,9 +1994,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.13",
+      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -2653,11 +2656,11 @@
       }
     },
     "node_modules/source-map": {
-      "version": "0.6.1",
+      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 8"
       }
     },
     "node_modules/source-map-support": {
@@ -2669,6 +2672,14 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/spdy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -2764,17 +2775,14 @@
       }
     },
     "node_modules/supports-color": {
-      "version": "8.1.1",
+      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dependencies": {
         "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
     "node_modules/supports-preserve-symlinks-flag": {
@@ -2797,9 +2805,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.24.0",
+      "version": "5.26.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz",
-      "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
+      "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -2889,14 +2897,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/ts-loader/node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -2910,9 +2910,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.2",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

public/index.html

@@ -12,15 +12,13 @@
 <body>
     <header><h1>XPath Trainer</h1></header>
     <main>
-
         <form id="trainerForm" with="90%">
             <fieldset>
                 <label for="myFile">Sélectionnez votre fichier XML : </label><input type="file" id="myFile" name="myFile" accept=".xml"><br>
-                <label>XPath à tester : </label><input type="text" id="myXPath" name="myXPath" width="1000px"> <input type="button" id="runTest" name="runTest" value="Lancez le test"><br>
+                <label>XPath à tester : </label><input type="text" id="myXPath" name="myXPath" size="150px"> <input type="submit" id="runTest" name="runTest" value="Lancez le test"><br>
             </fieldset>
-            <div id="result"></div>
+            <iframe id="display" src="" style="width:65%;float:left; margin:2em;" height="800px"></iframe>
-            <iframe id="display" src="" width="1000px" height="600px">
+            <div id="result" style="width:30%: float::right"></div>
-            </iframe>
         </form>
     </main>
 </body>

src/messages.js

@@ -0,0 +1,9 @@
+module.exports =
+{
+    emptyXPathError: "<p>Votre XPath est vide !</p>",
+    exceptionError: "<p>Bug imprévu.</p>",
+    gitSources: "Hello, les dev !\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/xPathTrainer/src/branch/master/src/xpathTrainer.ts",
+    needXMLFile : "Commencer pour sélectionner un fichier",
+    needXPath: "Saisissez votre XPath",
+    notXMLError: "<p>Le fichier que vous avez sélectionné ne semble pas être un fichier XML.</p>"
+};

src/xpathTrainer.ts

@@ -1,19 +1,22 @@
+const messages=require("./messages.js");
+
 const initialise = () =>
 {
+    const myForm=document.getElementById("trainerForm") as HTMLInputElement;
+    const myFile=document.getElementById("myFile") as HTMLInputElement;
+    const myXPath=document.getElementById("myXPath") as HTMLInputElement;
+    const testButton=document.getElementById("runTest") as HTMLButtonElement;
+    const myIframe=document.getElementById("display") as HTMLIFrameElement;
+    const divResult=document.getElementById("result") as HTMLDivElement;
+    const xpath=require('xpath');
+    
     try
     {
-        const myFile=document.getElementById("myFile") as HTMLInputElement;
+        // Accueil : doit choisir un fichier avant de pouvoir tester un XPath
-        const myXPath=document.getElementById("myXPath") as HTMLInputElement;
-        const testButton=document.getElementById("runTest") as HTMLButtonElement;
-        const myIframe=document.getElementById("display") as HTMLIFrameElement;
-        const divResult=document.getElementById("result") as HTMLDivElement;
-
         myXPath.disabled=true;
         testButton.disabled=true;
-        myXPath.placeholder="Commencer pour sélectionner un fichier";
+        myXPath.placeholder=messages.needXMLFile;
         myIframe.style.display="none";
-
-        const xpath=require('xpath');
         const dom=require('@xmldom/xmldom').DOMParser;
 
         myFile.addEventListener("change", function(e)
@@ -26,7 +29,7 @@ const initialise = () =>
                 // selectedFiles[0].type ne fonctionne pas avec certains navigateurs (Fennec), donc... :
                 const extension=selectedFiles[0].name.substring(selectedFiles[0].name.lastIndexOf(".")+1);
                 if(extension !== "xml")
-                    divResult.innerHTML=`<p>Le fichier que vous avez sélectionné ne semble pas être un fichier XML.</p>`;
+                    divResult.innerHTML=messages.notXMLError;
                 else
                 {
                     // Création d'un fichier XML temporaire que l'on va charger dans l'iframe :
@@ -41,16 +44,19 @@ const initialise = () =>
                         myIframe.src=iframeURL;
                         myIframe.style.display="block";
                         myXPath.disabled=false;
+                        myXPath.placeholder=messages.needXPath;
                         testButton.disabled=false;
-                        myXPath.placeholder="Saisir l'XPath à tester";
+                        myXPath.value="";
+                        myXPath.placeholder=messages.needXPath;
                         
                         // Et on peut commencer à jouer  avec !
                         const doc=new dom().parseFromString(xmlDatas, 'text/xml');
-                        testButton.addEventListener("click", (e) =>
+                        myForm.addEventListener("submit", (e) =>
                         {
+                            e.preventDefault();
                             let xPathTested=myXPath.value.trim();
                             if(xPathTested == "")
-                                divResult.innerHTML=`<p>XPath vide !</p>`;
+                                divResult.innerHTML=messages.emptyXPathError;
                             else
                             {
                                 const nodes=xpath.select(xPathTested , doc);
@@ -69,9 +75,9 @@ const initialise = () =>
     }
     catch(e)
     {
+        divResult.innerHTML=messages.exceptionError;
         console.error(e);
-        document.getElementById("result")!.innerHTML=`<p>Désolé, mais un problème technique empêche le fonctionnement normal de cette page.</p>`;
     }
 }
-console.log("Hello, les dev !\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/xPathTrainer/src/branch/master/src/xpathTrainer.ts");
+console.log(messages.gitSources);
 initialise();