Refonte de l'ensemble du script pour une meilleure prise en compte des possibilités du module XPath
This commit is contained in:
parent
ab7688c6d5
commit
26f3967729
@ -14,4 +14,9 @@ Le gros du travail est réalisé par le module [xpath](https://www.npmjs.com/pac
|
||||
Le script d’Xpath Trainer se contentant de récupérer le contenu du fichier sélectionné pour l’afficher dans une iframe d’une part et d’autre part le fournir à [xpath](https://www.npmjs.com/package/xpath) pour y tester les chemins saisis par l’utilisateur.
|
||||
Le résultat est ensuite affiché dans la même page web.
|
||||
|
||||
La simplicité du script fait qu’il n’y a pas de tests unitaires.
|
||||
La simplicité du script fait qu’il n’y 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.
|
||||
4
public/CSS/flickity.min.css
vendored
4
public/CSS/flickity.min.css
vendored
@ -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}
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -5,21 +5,22 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="XPathTrainer.">
|
||||
<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>
|
||||
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
||||
<title>XPath Trainer</title>
|
||||
</head>
|
||||
<body>
|
||||
<header><h1>XPath Trainer</h1></header>
|
||||
<main>
|
||||
<form id="trainerForm" with="90%">
|
||||
<form id="trainerForm">
|
||||
<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" size="150px"> <input type="submit" id="runTest" name="runTest" value="Lancez le test"><br>
|
||||
</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>
|
||||
<div id="frame"><iframe id="display" src="" height="800px"></iframe></div>
|
||||
<div id="results"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +1,12 @@
|
||||
module.exports =
|
||||
{
|
||||
emptyXPathError: "<p>Votre XPath est vide !</p>",
|
||||
exceptionError: "<p>Bug imprévu.</p>",
|
||||
emptyXPathError: "<p class='error'>Votre XPath est vide !</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",
|
||||
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>"
|
||||
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>"
|
||||
};
|
||||
@ -7,7 +7,7 @@ const initialise = () =>
|
||||
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 divResult=document.getElementById("results") as HTMLDivElement;
|
||||
const xpath=require('xpath');
|
||||
|
||||
try
|
||||
@ -17,6 +17,7 @@ const initialise = () =>
|
||||
testButton.disabled=true;
|
||||
myXPath.placeholder=messages.needXMLFile;
|
||||
myIframe.style.display="none";
|
||||
divResult.style.display="none";
|
||||
const dom=require('@xmldom/xmldom').DOMParser;
|
||||
|
||||
myFile.addEventListener("change", function(e)
|
||||
@ -29,7 +30,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=messages.notXMLError;
|
||||
divResult.innerHTML=messages.resultsTitle+messages.notXMLError;
|
||||
else
|
||||
{
|
||||
// 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');
|
||||
myForm.addEventListener("submit", (e) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
let xPathTested=myXPath.value.trim();
|
||||
if(xPathTested == "")
|
||||
divResult.innerHTML=messages.emptyXPathError;
|
||||
else
|
||||
try
|
||||
{
|
||||
const nodes=xpath.select(xPathTested , doc);
|
||||
let resultTxt="<ul>";
|
||||
for(let i = 0; i < nodes.length; i++)
|
||||
resultTxt+="<li>"+nodes[i].toString()+"</li>";
|
||||
resultTxt+="</ul>";
|
||||
divResult.innerHTML=resultTxt;
|
||||
e.preventDefault();
|
||||
divResult.innerHTML="";
|
||||
divResult.style.display="block";
|
||||
let xPathTested=myXPath.value.trim();
|
||||
if(xPathTested == "")
|
||||
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("<", "<").replaceAll(">", ">").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)
|
||||
{
|
||||
divResult.innerHTML=messages.exceptionError;
|
||||
divResult.innerHTML=messages.resultsTitle.messages.exceptionError;
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,6 +25,13 @@ module.exports =
|
||||
],
|
||||
},
|
||||
devServer: {
|
||||
static: path.join(__dirname, "public")
|
||||
static: path.join(__dirname, "public"),
|
||||
client: {
|
||||
overlay: {
|
||||
errors: true,
|
||||
warnings: false,
|
||||
runtimeErrors: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user