Fab_Blab/FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Ajout d'une page de démonstation pour le nouveau moteur de rendu.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2022-02-02 15:47:21 +01:00
parent 2f3f5df255
commit 367bbadcfb
7 changed files with 244 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/JS/exampleWithMixedFields.app.js Normal file
View File

File diff suppressed because one or more lines are too long

6
public/JS/exampleWithMixedFields.app.js.LICENSE.txt Normal file
View 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
View 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"
}
]

1
public/examples.html
View File

@ -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="/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="/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>
<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>

51
public/withMixedFields.html Normal file
View 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
View 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
View 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();