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

@ -15,3 +15,8 @@ Le script dXpath Trainer se contentant de récupérer le contenu du fichier s
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 :
@ -52,20 +53,37 @@ const initialise = () =>
// Et on peut commencer à jouer avec ! // Et on peut commencer à jouer avec !
const doc=new dom().parseFromString(xmlDatas, 'text/xml'); const doc=new dom().parseFromString(xmlDatas, 'text/xml');
myForm.addEventListener("submit", (e) => myForm.addEventListener("submit", (e) =>
{
try
{ {
e.preventDefault(); e.preventDefault();
divResult.innerHTML="";
divResult.style.display="block";
let xPathTested=myXPath.value.trim(); let xPathTested=myXPath.value.trim();
if(xPathTested == "") if(xPathTested == "")
divResult.innerHTML=messages.emptyXPathError; divResult.innerHTML+=messages.resultsTitle+messages.emptyXPathError;
else else
{ {
let resultTxt=messages.resultsTitle;
const nodes=xpath.select(xPathTested , doc); const nodes=xpath.select(xPathTested , doc);
let resultTxt="<ul>"; if(nodes.length === 0)
resultTxt+=messages.noResultForXPath;
else
{
for(let i = 0; i < nodes.length; i++) for(let i = 0; i < nodes.length; i++)
resultTxt+="<li>"+nodes[i].toString()+"</li>"; resultTxt+=`<li>${nodes[i].toString().replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\n","<br>")}</li>`;
resultTxt+="</ul>"; resultTxt=`<ul>${resultTxt}</ul>`;
}
divResult.innerHTML=resultTxt; 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;
}
}); });
}; };
reader.readAsText(selectedFiles[0]); reader.readAsText(selectedFiles[0]);
@ -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,
},
},
}, },
}; };