Ajout d'une page de démonstation pour le nouveau moteur de rendu.
This commit is contained in:
parent
2f3f5df255
commit
367bbadcfb
2
public/JS/exampleWithMixedFields.app.js
Normal file
2
public/JS/exampleWithMixedFields.app.js
Normal file
File diff suppressed because one or more lines are too long
6
public/JS/exampleWithMixedFields.app.js.LICENSE.txt
Normal file
6
public/JS/exampleWithMixedFields.app.js.LICENSE.txt
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/* @license
|
||||||
|
Papa Parse
|
||||||
|
v5.3.1
|
||||||
|
https://github.com/mholt/PapaParse
|
||||||
|
License: MIT
|
||||||
|
*/
|
||||||
41
public/datas/links.json
Normal file
41
public/datas/links.json
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"url": "https://developer.mozilla.org/fr/",
|
||||||
|
"anchor": "MDN Web Docs",
|
||||||
|
"keywords":"Mozilla, JavaScript, HTML, CSS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://git-scm.com/book/fr/v2",
|
||||||
|
"anchor": "Pro Git book",
|
||||||
|
"keywords":"Git"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://jasmine.github.io/pages/docs_home.html",
|
||||||
|
"anchor": "Jasmine Documentation",
|
||||||
|
"keywords":"JavaScript, Test"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://www.typescriptlang.org/",
|
||||||
|
"anchor": "TypeScript Documentation",
|
||||||
|
"keywords":"TypeScript, JavaScript"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://karma-runner.github.io",
|
||||||
|
"anchor": "Karma.js",
|
||||||
|
"keywords":"Javascript, Test"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://www.papaparse.com/",
|
||||||
|
"anchor": "Papa Parse",
|
||||||
|
"keywords":"JavaScript, CSV"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://www.npmjs.com/package/natural-orderby",
|
||||||
|
"anchor": "natural-orderby",
|
||||||
|
"keywords":"TypeScript, JavaScript"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"anchor": "Lien sans URL fournie",
|
||||||
|
"keywords":"Test"
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -32,6 +32,7 @@
|
|||||||
<li><a href="/withJSON.html">Parser et afficher des données JSON</a>, avec ajout d'un filtre, d'un moteur de recherche, pagination et compteur de résultats.</li>
|
<li><a href="/withJSON.html">Parser et afficher des données JSON</a>, avec ajout d'un filtre, d'un moteur de recherche, pagination et compteur de résultats.</li>
|
||||||
<li><a href="/withHTML.html">Parser et réafficher les données situées dans le code HTML</a> de la page, avec filtre, pagination et adaptation à la taille de l'écran.</li>
|
<li><a href="/withHTML.html">Parser et réafficher les données situées dans le code HTML</a> de la page, avec filtre, pagination et adaptation à la taille de l'écran.</li>
|
||||||
<li><a href="/withUL.html">Utilisation d'une extension créant des liens de classement</a>, dans le cas où les données ne sont pas listées dans un tableau.</li>
|
<li><a href="/withUL.html">Utilisation d'une extension créant des liens de classement</a>, dans le cas où les données ne sont pas listées dans un tableau.</li>
|
||||||
|
<li><a href="/withMixedFields.html">Utilisation d'une extension permettant un affichage plus complexe</a> par exemple en mixant le contenu de certains champs, ici en créant des liens hypertextes.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Un lien vers le code source TypeScript est fourni pour chaque exemple, de manière à ce que vous puissiez lire le code, tout en observant le résultat.</p>
|
<p>Un lien vers le code source TypeScript est fourni pour chaque exemple, de manière à ce que vous puissiez lire le code, tout en observant le résultat.</p>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
51
public/withMixedFields.html
Normal file
51
public/withMixedFields.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Exemple d’utilisation de FreeDatas2HTML pour parser et afficher des données en mixant leur contenu.">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||||
|
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||||
|
<script src="JS/exampleWithMixedFields.app.js" defer></script>
|
||||||
|
<script src="JS/matomo.js" defer></script>
|
||||||
|
<title>Afficher des données en TypeScript/JavaScript en mixant le contenu de différents champs</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="paper container">
|
||||||
|
|
||||||
|
<header id="header" class="text-center">
|
||||||
|
<h1><a href="/">FreeDatas2HTML</a></h1>
|
||||||
|
<nav id="menu-principal">
|
||||||
|
<ul class="inline row flex-center">
|
||||||
|
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
|
||||||
|
<li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
|
||||||
|
<li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="badge success sm-12 col">Git</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<h2>Mixer les données de différents champs</h2>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="datas">
|
||||||
|
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier JSON.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article id="content">
|
||||||
|
<p>Cet exemple utilise un <b>moteur de rendu alternatif</b> à celui par défaut.</p>
|
||||||
|
<p>Il vous donne plus de souplesse sur la façon d’afficher les données extraites de la source (ici <a href="/datas/links.json" title="fichier de données" target="_blank" rel="nofollow">un fichier JSON</a>), notamment en permettant d’<b>utiliser le contenu de plusieurs champs pour créer le rendu d’un seul</b>.</p>
|
||||||
|
<p>Dans le cas ci-dessus, le champ « url » est ainsi utilisé pour rendre cliquable le nom du lien (champ « anchor ») et inversement le champ « anchor » sert à l’attribut « title » lors de l’affichage du champ « url ».</p>
|
||||||
|
<p>La contre-partie est de <b>nécessiter d’être plus vigilant lors de votre intégration</b>, là où le moteur de rendu par défaut se contente d’afficher les données telles que présentes dans la source.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithMixedFields.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
86
src/build/demo/exampleWithMixedFields.js
Normal file
86
src/build/demo/exampleWithMixedFields.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||||
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||||
|
return new (P || (P = Promise))(function (resolve, reject) {
|
||||||
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||||
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||||
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||||
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||||
|
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||||
|
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||||
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||||
|
function step(op) {
|
||||||
|
if (f) throw new TypeError("Generator is already executing.");
|
||||||
|
while (_) try {
|
||||||
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||||
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||||
|
switch (op[0]) {
|
||||||
|
case 0: case 1: t = op; break;
|
||||||
|
case 4: _.label++; return { value: op[1], done: false };
|
||||||
|
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||||
|
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||||
|
default:
|
||||||
|
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||||
|
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||||
|
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||||
|
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||||
|
if (t[2]) _.ops.pop();
|
||||||
|
_.trys.pop(); continue;
|
||||||
|
}
|
||||||
|
op = body.call(thisArg, _);
|
||||||
|
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||||
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
import { FreeDatas2HTML, Selector } from "../FreeDatas2HTML";
|
||||||
|
import { MixedFieldsRender } from "../extensions/MixedFieldsRender";
|
||||||
|
var initialise = function () { return __awaiter(void 0, void 0, void 0, function () {
|
||||||
|
var converter, renderSettings, rendAnchor2HTML, rendUrl2HTML, myRender, filtre1, e_1;
|
||||||
|
return __generator(this, function (_a) {
|
||||||
|
switch (_a.label) {
|
||||||
|
case 0:
|
||||||
|
_a.trys.push([0, 2, , 3]);
|
||||||
|
converter = new FreeDatas2HTML("JSON");
|
||||||
|
converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/links.json" });
|
||||||
|
return [4, converter.run()];
|
||||||
|
case 1:
|
||||||
|
_a.sent();
|
||||||
|
renderSettings = {
|
||||||
|
allBegining: "<ul>",
|
||||||
|
allEnding: "</ul>",
|
||||||
|
datasLinesDisplaying: "<li><ul><li>##1##</li><li>Mots-cl\u00E9s : ##2##.</li>##0##</ul></li>"
|
||||||
|
};
|
||||||
|
rendAnchor2HTML = function (values) {
|
||||||
|
if (values["url"] !== undefined && values["url"] !== "")
|
||||||
|
return "<a href=\"" + values['url'] + "\" target=\"_blank\">" + values["anchor"] + "</a>";
|
||||||
|
else
|
||||||
|
return "<b>" + values["anchor"] + "</b>";
|
||||||
|
};
|
||||||
|
rendUrl2HTML = function (values) {
|
||||||
|
if (values["url"] !== "")
|
||||||
|
return "<li><a href=\"" + values['url'] + "\" target=\"_blank\" title=\"Visiter " + values['anchor'] + "\">" + values["url"] + "</a></li>";
|
||||||
|
else
|
||||||
|
return "";
|
||||||
|
};
|
||||||
|
myRender = new MixedFieldsRender(renderSettings);
|
||||||
|
myRender.fieldRenders = [{ name: "anchor", rend2HTML: rendAnchor2HTML }, { name: "url", rend2HTML: rendUrl2HTML }];
|
||||||
|
converter.datasRender = myRender;
|
||||||
|
filtre1 = new Selector(converter, 2, { id: "filtre1" }, ",");
|
||||||
|
filtre1.filter2HTML("Mots-clés");
|
||||||
|
converter.datasFilters = [filtre1];
|
||||||
|
converter.datasViewElt = { id: "datas" };
|
||||||
|
converter.refreshView();
|
||||||
|
return [3, 3];
|
||||||
|
case 2:
|
||||||
|
e_1 = _a.sent();
|
||||||
|
console.error(e_1);
|
||||||
|
document.getElementById("datas").innerHTML = "<div class=\"alert alert-warning\">D\u00E9sol\u00E9, mais un probl\u00E8me technique emp\u00EAche l'affichage des donn\u00E9es.</div>";
|
||||||
|
return [3, 3];
|
||||||
|
case 3: return [2];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}); };
|
||||||
|
console.log("Hello, ami développeur :-)\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithMixedFields.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
|
||||||
|
initialise();
|
||||||
57
src/demo/exampleWithMixedFields.ts
Normal file
57
src/demo/exampleWithMixedFields.ts
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { FreeDatas2HTML, Selector } from "../FreeDatas2HTML";
|
||||||
|
import { MixedFieldsRender } from "../extensions/MixedFieldsRender";
|
||||||
|
|
||||||
|
const initialise=async () =>
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
// Création d'un convertisseur parsant des données transmises en JSON :
|
||||||
|
const converter=new FreeDatas2HTML("JSON");
|
||||||
|
converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/links.json"});
|
||||||
|
// Parsage des données, qui ne sont pas encore affichées :
|
||||||
|
await converter.run();
|
||||||
|
|
||||||
|
// Chaînes à utiliser par le moteur de rendu :
|
||||||
|
const renderSettings=
|
||||||
|
{
|
||||||
|
allBegining: `<ul>`,
|
||||||
|
allEnding: `</ul>`,
|
||||||
|
datasLinesDisplaying: `<li><ul><li>##1##</li><li>Mots-clés : ##2##.</li>##0##</ul></li>`
|
||||||
|
};
|
||||||
|
// Fonctions spécifiques pour créer les liens hypertextes :
|
||||||
|
const rendAnchor2HTML=(values: {[index: string]:string} ) : string =>
|
||||||
|
{
|
||||||
|
if(values["url"] !== undefined && values["url"] !== "") // je considère que anchor est toujours renseigné, mais on pourrait tester.
|
||||||
|
return `<a href="${values['url']}" target="_blank">${values["anchor"]}</a>`;
|
||||||
|
else
|
||||||
|
return `<b>${values["anchor"]}</b>`;
|
||||||
|
};
|
||||||
|
const rendUrl2HTML=(values: {[index: string]:string} ) : string =>
|
||||||
|
{
|
||||||
|
if(values["url"] !== "") // si values["url"] = undefined, la fonction rendUrl2HTML() n'est pas appelée.
|
||||||
|
return `<li><a href="${values['url']}" target="_blank" title="Visiter ${values['anchor']}">${values["url"]}</a></li>`;
|
||||||
|
else
|
||||||
|
return "";
|
||||||
|
};
|
||||||
|
const myRender=new MixedFieldsRender(renderSettings);
|
||||||
|
myRender.fieldRenders=[{ name:"anchor", rend2HTML: rendAnchor2HTML}, { name:"url", rend2HTML: rendUrl2HTML}];
|
||||||
|
converter.datasRender=myRender;
|
||||||
|
|
||||||
|
// Création d'un filtre sur le troisième champ :
|
||||||
|
let filtre1=new Selector(converter, 2, { id:"filtre1"}, "," );
|
||||||
|
filtre1.filter2HTML("Mots-clés");
|
||||||
|
converter.datasFilters=[filtre1];
|
||||||
|
|
||||||
|
// Affichage initial avec l'id de l'élément HTML devant afficher le compteur :
|
||||||
|
converter.datasViewElt={ id:"datas" };
|
||||||
|
converter.refreshView();
|
||||||
|
}
|
||||||
|
catch(e)
|
||||||
|
{
|
||||||
|
console.error(e);
|
||||||
|
document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Hello, ami développeur :-)\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithMixedFields.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
|
||||||
|
initialise();
|
||||||
Loading…
Reference in New Issue
Block a user