Refonte de l'ensemble du script pour une meilleure prise en compte des possibilités du module XPath

This commit is contained in:
Fabrice PENHOËT 2023-12-10 11:07:16 +01:00
parent ab7688c6d5
commit 26f3967729
8 changed files with 57 additions and 269 deletions

View File

@ -14,4 +14,9 @@ Le gros du travail est réalisé par le module [xpath](https://www.npmjs.com/pac
Le script dXpath Trainer se contentant de récupérer le contenu du fichier sélectionné pour lafficher dans une iframe dune part et dautre part le fournir à [xpath](https://www.npmjs.com/package/xpath) pour y tester les chemins saisis par lutilisateur. Le script dXpath Trainer se contentant de récupérer le contenu du fichier sélectionné pour lafficher dans une iframe dune part et dautre part le fournir à [xpath](https://www.npmjs.com/package/xpath) pour y tester les chemins saisis par lutilisateur.
Le résultat est ensuite affiché dans la même page web. Le résultat est ensuite affiché dans la même page web.
La simplicité du script fait quil ny a pas de tests unitaires. La simplicité du script fait quil ny a pas de tests unitaires.
## Limites
L'affichage de manière lisible d'un fichier XML sans feuille de style dans l'iframe ne fonctionne que dans Firefox.
La gestion des attributs et des espaces de nom reste à améliorer.

View File

@ -1,4 +0,0 @@
/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}

View File

@ -1,31 +0,0 @@
body
{
text-align:center;
background-color:#C0D6D2;
}
#videos
{
border:1px solid;
width:800px;
margin:auto;
padding:1em;
text-align:center;
}
#video figure
{
padding-top:2em;
}
#videos video
{
width:600px;
}
nav ul
{
margin-left:0;
padding-left:0;
}
nav li
{
list-style:none;
margin-bottom:0.5em;
}

View File

@ -1,211 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Stax Records</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1968</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>

View File

@ -5,21 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="XPathTrainer."> <meta name="description" content="XPathTrainer.">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<!--<link rel="stylesheet" href="CSS/vcarousel.css" media="screen">--> <link rel="stylesheet" href="CSS/style.css" media="screen">
<script src="JS/xpathTrainer.app.js" defer></script> <script src="JS/xpathTrainer.app.js" defer></script>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<title>XPath Trainer</title> <title>XPath Trainer</title>
</head> </head>
<body> <body>
<header><h1>XPath Trainer</h1></header> <header><h1>XPath Trainer</h1></header>
<main> <main>
<form id="trainerForm" with="90%"> <form id="trainerForm">
<fieldset> <fieldset>
<label for="myFile">Sélectionnez votre fichier XML : </label><input type="file" id="myFile" name="myFile" accept=".xml"><br> <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" size="150px"> <input type="submit" 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> </fieldset>
<iframe id="display" src="" style="width:65%;float:left; margin:2em;" height="800px"></iframe>
<div id="result" style="width:30%: float::right"></div>
</form> </form>
<div id="frame"><iframe id="display" src="" height="800px"></iframe></div>
<div id="results"></div>
</main> </main>
</body> </body>
</html> </html>

View File

@ -1,9 +1,12 @@
module.exports = module.exports =
{ {
emptyXPathError: "<p>Votre XPath est vide !</p>", emptyXPathError: "<p class='error'>Votre XPath est vide !</p>",
exceptionError: "<p>Bug imprévu.</p>", exceptionError: "<p class='error'>Il vient d'arriver une exception de nature exceptionnelle !</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", 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", needXMLFile : "Commencer pour sélectionner un fichier",
needXPath: "Saisissez votre XPath", needXPath: "Saisissez votre XPath",
notXMLError: "<p>Le fichier que vous avez sélectionné ne semble pas être un fichier XML.</p>" noResultForXPath: "<p>Aucun résultat pour votre recherche.</p>",
notXMLError: "<p class='error'>Le fichier que vous avez sélectionné ne semble pas être un fichier XML.</p>",
resultsTitle: "<h4>Résultats</h4>",
xpathError: "<p class='error'>La syntaxe du XPath saisi ne semble pas correcte.</p>"
}; };

View File

@ -7,7 +7,7 @@ const initialise = () =>
const myXPath=document.getElementById("myXPath") as HTMLInputElement; const myXPath=document.getElementById("myXPath") as HTMLInputElement;
const testButton=document.getElementById("runTest") as HTMLButtonElement; const testButton=document.getElementById("runTest") as HTMLButtonElement;
const myIframe=document.getElementById("display") as HTMLIFrameElement; const myIframe=document.getElementById("display") as HTMLIFrameElement;
const divResult=document.getElementById("result") as HTMLDivElement; const divResult=document.getElementById("results") as HTMLDivElement;
const xpath=require('xpath'); const xpath=require('xpath');
try try
@ -17,6 +17,7 @@ const initialise = () =>
testButton.disabled=true; testButton.disabled=true;
myXPath.placeholder=messages.needXMLFile; myXPath.placeholder=messages.needXMLFile;
myIframe.style.display="none"; myIframe.style.display="none";
divResult.style.display="none";
const dom=require('@xmldom/xmldom').DOMParser; const dom=require('@xmldom/xmldom').DOMParser;
myFile.addEventListener("change", function(e) myFile.addEventListener("change", function(e)
@ -29,7 +30,7 @@ const initialise = () =>
// selectedFiles[0].type ne fonctionne pas avec certains navigateurs (Fennec), donc... : // selectedFiles[0].type ne fonctionne pas avec certains navigateurs (Fennec), donc... :
const extension=selectedFiles[0].name.substring(selectedFiles[0].name.lastIndexOf(".")+1); const extension=selectedFiles[0].name.substring(selectedFiles[0].name.lastIndexOf(".")+1);
if(extension !== "xml") if(extension !== "xml")
divResult.innerHTML=messages.notXMLError; divResult.innerHTML=messages.resultsTitle+messages.notXMLError;
else else
{ {
// Création d'un fichier XML temporaire que l'on va charger dans l'iframe : // Création d'un fichier XML temporaire que l'on va charger dans l'iframe :
@ -53,18 +54,35 @@ const initialise = () =>
const doc=new dom().parseFromString(xmlDatas, 'text/xml'); const doc=new dom().parseFromString(xmlDatas, 'text/xml');
myForm.addEventListener("submit", (e) => myForm.addEventListener("submit", (e) =>
{ {
e.preventDefault(); try
let xPathTested=myXPath.value.trim();
if(xPathTested == "")
divResult.innerHTML=messages.emptyXPathError;
else
{ {
const nodes=xpath.select(xPathTested , doc); e.preventDefault();
let resultTxt="<ul>"; divResult.innerHTML="";
for(let i = 0; i < nodes.length; i++) divResult.style.display="block";
resultTxt+="<li>"+nodes[i].toString()+"</li>"; let xPathTested=myXPath.value.trim();
resultTxt+="</ul>"; if(xPathTested == "")
divResult.innerHTML=resultTxt; divResult.innerHTML+=messages.resultsTitle+messages.emptyXPathError;
else
{
let resultTxt=messages.resultsTitle;
const nodes=xpath.select(xPathTested , doc);
if(nodes.length === 0)
resultTxt+=messages.noResultForXPath;
else
{
for(let i = 0; i < nodes.length; i++)
resultTxt+=`<li>${nodes[i].toString().replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\n","<br>")}</li>`;
resultTxt=`<ul>${resultTxt}</ul>`;
}
divResult.innerHTML=resultTxt;
}
}
catch(e: unknown)
{
if (e instanceof Error && e.message=="XPath parse error" )
divResult.innerHTML=messages.resultsTitle+messages.xpathError;
else
divResult.innerHTML=messages.resultsTitle+messages.exceptionError;
} }
}); });
}; };
@ -75,7 +93,7 @@ const initialise = () =>
} }
catch(e) catch(e)
{ {
divResult.innerHTML=messages.exceptionError; divResult.innerHTML=messages.resultsTitle.messages.exceptionError;
console.error(e); console.error(e);
} }
} }

View File

@ -25,6 +25,13 @@ module.exports =
], ],
}, },
devServer: { devServer: {
static: path.join(__dirname, "public") static: path.join(__dirname, "public"),
client: {
overlay: {
errors: true,
warnings: false,
runtimeErrors: false,
},
},
}, },
}; };