vcalame/jsHtml2Ods
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Usage plus large de data-od-hidden

Browse Source
This commit is contained in:
Vincent Calame 2022-08-08 21:45:16 +02:00
parent 8f7fc3b9ec
commit 895376f521
6 changed files with 213 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -6,15 +6,6 @@ Le principe de cette bibliothèque est de pouvoir écrire un lien proposant une
Cette bibliothèque est testée sous Firefox ou Chromium pour des tableaux de petite taille. Cette bibliothèque est testée sous Firefox ou Chromium pour des tableaux de petite taille.
## Développement et compilation
Le code Javascript est décomposé en plusieurs fichiers contenus dans *src/js/*, l'exemple *dev.html* du répertoire *demos/* charge ces fichiers séparément.
Ces fichiers sont compilés dans un fichier unique via l'outil *jake* et le fichier *JakeFile.js* via la commande `jake build[version]`. Par défaut, ce fichier nommé *html2ods.js* est placé dans *build/* et est utilisé par l'exemple *build.html* du répertoire *demos/*.
Le répertoire *dist/* contient la dernière compilation avec numéro de version.
En mode développement, les fichiers de *src/js/currency*, *src/js/xmlwriter* et *src/js/opendocument* sont des bibliothèques séparées avec leur propre « espace de nom ». À la compilation, ils sont placés dans `Html2Ods` pour n'avoir qu'un seul « espace de nom », c'est pourquoi il ne faut pas supprimer la ligne `//compile target` dans le fichier *src/js/Html2Ods.js*
## Options disponible ## Options disponible
@ -64,7 +55,7 @@ Par défaut, le texte de la cellule dans le fichier résultant est le texte brut
Au lieu de l'attribut `data-od-text`, la valeur peut être définie dans l'attribut `data-text`, ce qui permet la comptabilité avec l'extension JQuery TableSorter. Si les deux attributs sont présents, `data-od-text` a la préséance. Au lieu de l'attribut `data-od-text`, la valeur peut être définie dans l'attribut `data-text`, ce qui permet la comptabilité avec l'extension JQuery TableSorter. Si les deux attributs sont présents, `data-od-text` a la préséance.
Lorsque le texte de la cellule est le texte brut de l'élément, il est possible d'ignorer un élément enfant **direct** de l'élément `<td>` ou `<th>` en lui donnant l'attribut `data-od-hidden` avec n'importe quelle valeur non nulle (1 ou true sont conseillés). Lorsque le texte de la cellule est le texte brut de l'élément, il est possible d'ignorer un élément enfant **direct** de l'élément `<td>` ou `<th>` en lui donnant l'attribut `data-od-hidden` avec la valeur 1 ou true.
#### Formatage des dates #### Formatage des dates
@ -79,7 +70,9 @@ Ce format doit est une chaine où les lettres suivantes sont remplacées par les
- Y : année à deux chiffres - Y : année à deux chiffres
- YY : année à quatre chiffres - YY : année à quatre chiffres
Par exemple, le code ISO correspond au format `YYYY-MM-DD` ; `DD\MM\YY` affiche le trois novembre 2021 sous la forme 03/11/21). Par exemple, le code ISO correspond au format `YYYY-MM-DD` ; `DD/MM/YY` affiche le trois novembre 2021 sous la forme 03/11/21).
**Point important** : ce formatage concerne l'affichage dans le fichier résultant mais pas la date telle qu'elle est représentée dans le tableau HTML ; dans ce dernier cas, la date doit impérativement être fournie au format ISO.
#### Code des monnaies #### Code des monnaies
@ -151,3 +144,12 @@ Il est fort probable que certaines éléments du tableau disposent déjà de cla
L'opérateur `~` doit être placé à la fin (notamment après l'indication d'une éventuelle parenté avec `+`) car le style peut correspondre à plusieurs classes différentes : `cell.NomDuStyle ~ .Classe1 .Classe2`. L'opérateur `~` doit être placé à la fin (notamment après l'indication d'une éventuelle parenté avec `+`) car le style peut correspondre à plusieurs classes différentes : `cell.NomDuStyle ~ .Classe1 .Classe2`.
## À propos du code et de sa compilation
Le code Javascript est décomposé en plusieurs fichiers contenus dans *src/js/*, l'exemple *dev.html* du répertoire *demos/* charge ces fichiers séparément.
Ces fichiers sont compilés dans un fichier unique via l'outil *jake* et le fichier *JakeFile.js* via la commande `jake build[version]`. Par défaut, ce fichier nommé *html2ods.js* est placé dans *build/* et est utilisé par l'exemple *build.html* du répertoire *demos/*.
Le répertoire *dist/* contient la dernière compilation avec numéro de version.
En mode développement, les fichiers de *src/js/currency*, *src/js/xmlwriter* et *src/js/opendocument* sont des bibliothèques séparées avec leur propre « espace de nom ». À la compilation, ils sont placés dans `Html2Ods` pour n'avoir qu'un seul « espace de nom », c'est pourquoi il ne faut pas supprimer la ligne `//compile target` dans le fichier *src/js/Html2Ods.js*

73
demos/build.css
View File

@ -3,32 +3,81 @@ body {
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
margin-left: 40px; margin-left: 40px;
} }
td { td {
border-width: 1px; border-width: 1px;
border-color: #2e3436; border-color: #2e3436;
border-style: solid; border-style: solid;
font-size: small; font-size: small;
} }
th { th {
padding: 3px; border-width: 1px;
border-color: #2e3436;
border-style: solid;
padding: 3px;
} }
.small { .check {
font-size: smaller; text-align: center;
} }
.colonnemontant {
min-width: 125px;
}
.count {
width: 75px;
}
.number { .number {
text-align: right; text-align: right;
} }
.small {
font-size: smaller;
}
.text {
min-width: 300px;
}
/*************************** /***************************
* Styles ODS * Styles ODS
* *************************/ * *************************/
column.Date { cell.Absent + cell.AR {
width: 2cm; background-color: #ff0000;
} }
cell.AR ~ .check {
text-align: center;
}
cell.Dollar {
font-style: italic;
}
cell.NonSolde {
background-color: #ffcc00;
}
column.AR {
width: 1cm;
}
column.Date {
width: 4cm;
}
column.Montant ~ .colonnemontant {
width: 3cm;
}
column.NbreTranches ~ .count {
width: 1.5cm;
}

129
demos/build.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>Exemple après compilation dans Dist</title> <title>Exemple d’utilisation de jsHtml2Ods</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="build.css" rel="stylesheet" type="text/css"> <link href="build.css" rel="stylesheet" type="text/css">
@ -11,55 +11,130 @@
function fodsLink() { function fodsLink() {
let link = document.getElementById("link"); let link = document.getElementById("link");
link.href = URL.createObjectURL( link.href = URL.createObjectURL(
Html2Ods.blob("table") Html2Ods.blob("table", {
currency: "EUR",
datePattern: "DD/MM/YYYY"
})
); );
setTimeout(function () { setTimeout(function () {
URL.revokeObjectURL(link.href); URL.revokeObjectURL(link.href);
}, 4E4); // 40s }, 4E4); // 40s
return true; return true;
} }
</script> </script>
</head> </head>
<body> <body>
<h1>Exemple d'utilisation de jsHtml2Ods</h1> <h1>Exemple d’utilisation de jsHtml2Ods</h1>
<p>Basée sur la compilation dans le répertoire build/</p>
<div> <div>
<p><a href="blob:" download="table.fods" id="link" onclick="fodsLink()" id="link">Version ODS</a></p> <p><a href="blob:" download="table.fods" id="link" onclick="fodsLink()">Version ODS</a></p>
<table id="table" <table id="table"
data-od-sheetname="Tableau des clients" data-od-sheetname="Tableau des projets"
data-od-currency="EUR"
data-od-fixed-rows="2" data-od-fixed-rows="2"
data-od-fixed-columns="1"> data-od-fixed-columns="1">
<colgroup> <col data-od-width="7cm" class="text">
<col data-od-width="4cm"> <col data-od-width="2cm">
<col span="2" data-od-style="Date"> <col span="2" data-od-style="Date">
<col> <colgroup span="4" class="colonnemontant"></colgroup>
<col> <col class="count">
</colgroup> <colgroup>
<colgroup span="2" class="moyennecolonne"> <col data-od-style="Date">
<col class="colonnemontant">
<col data-od-style="AR">
</colgroup>
<colgroup>
<col data-od-style="Date">
<col class="colonnemontant">
<col data-od-style="AR">
</colgroup>
<colgroup>
<col data-od-style="Date">
<col class="colonnemontant">
<col data-od-style="AR">
</colgroup> </colgroup>
<thead> <thead>
<tr data-od-style="Entete"> <tr>
<th rowspan="2">Client</th> <th rowspan="2">Projet</th>
<th colspan="2">Dates</th> <th rowspan="2">Nomenclature</th>
<th rowspan="2">Nuitées</th> <th colspan="2">Dates</th>
<th rowspan="2">Facture</th> <th colspan="4">Subvention</th>
<th rowspan="2">Nbre de tranches</th>
<th colspan="3">Tranche 1</th>
<th colspan="3">Tranche 2</th>
<th colspan="3">Tranche 3</th>
</tr> </tr>
<tr> <tr>
<th class="small">Départ</th> <th class="small">Décision du financement</th>
<th class="small">Arrivée</th> <th class="small">Réception de la convention</th>
<th class="small">Décidée</th>
<th class="small">en $</th>
<th class="small">Versée</th>
<th class="small">Solde</th>
<th class="small">Date</th>
<th class="small">Montant</th>
<th class="small">AR</th>
<th class="small">Date</th>
<th class="small">Montant</th>
<th class="small">AR</th>
<th class="small">Date</th>
<th class="small">Montant</th>
<th class="small">AR</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Victor Hugo</td> <td>Jardins partagés</td>
<td data-od-type="date" data-od-text="2020-12-01">01/12/2020</td> <td>BIO</td>
<td data-od-type="date" data-od-text="2020-12-01" class="number">01/12/2020</td>
<td data-od-type="date" data-od-text="2021-01-11" class="number">11/01/2021</td>
<td data-od-type="currency" data-od-text="16175" class="number">16 175 €</td>
<td></td>
<td data-od-type="currency" data-od-text="16175" class="number">16 175 €</td>
<td data-od-type="currency" data-od-text="0" class="number">0 €</td>
<td data-od-type="number" class="number">1</td>
<td data-od-type="date" data-od-text="2021-01-11">11/01/2021</td> <td data-od-type="date" data-od-text="2021-01-11">11/01/2021</td>
<td data-od-type="number" class="number">40</td> <td data-od-type="currency" data-od-text="16175" class="number">16 175 €</td>
<td data-od-type="currency" data-od-text="1250" class="number">1 250 €</td> <td class="check">✓</td>
</tr> </tr>
<tr>
<td>Panneaux photovoltaïques</td>
<td>ERG</td>
<td data-od-type="date" data-od-text="2021-01-05" class="number">05/01/2021</td>
<td data-od-type="date" data-od-text="2021-04-25" class="number">25/04/2021</td>
<td data-od-type="currency" data-od-text="15864" class="number">15 864 €</td>
<td data-od-type="currency" data-od-currency="USD" data-od-text="15864" class="number" data-od-style="Dollar">$16 500</td>
<td data-od-type="currency" data-od-text="11898" class="number">11 898 €</td>
<td data-od-type="currency" data-od-text="3966" class="number" data-od-style="NonSolde">3 966 €</td>
<td data-od-type="number" class="number">3</td>
<td data-od-type="date" data-od-text="2021-05-01">01/05/2021</td>
<td data-od-type="currency" data-od-text="7932" class="number">7 932 €</td>
<td class="check">✓</td>
<td data-od-type="date" data-od-text="2021-09-15">15/09/2021</td>
<td data-od-type="currency" data-od-text="3966" class="number">3 966 €</td>
<td class="check" data-od-style="Absent" data-od-text="-"></td>
</tr>
<tr>
<td>Logiciels libres</td>
<td>LL</td>
<td data-od-type="date" data-od-text="2020-10-15" class="number">15/10/2020</td>
<td data-od-type="date" data-od-text="2020-11-30" class="number">30/11/2020</td>
<td data-od-type="currency" data-od-text="7070" class="number">7 070 €</td>
<td></td>
<td data-od-type="currency" data-od-text="7070" class="number">7 070 €</td>
<td data-od-type="currency" data-od-text="0" class="number">0</td>
<td data-od-type="number" class="number">3</td>
<td data-od-type="date" data-od-text="2021-05-01">01/05/2021</td>
<td data-od-type="currency" data-od-text="3256" class="number">3 256 €</td>
<td class="check">✓</td>
<td data-od-type="date" data-od-text="2021-06-07">07/06/2021</td>
<td data-od-type="currency" data-od-text="3000" class="number">3 000 €</td>
<td class="check" data-od-style="Absent" data-od-text="-"></td>
<td data-od-type="date" data-od-text="2021-12-21">21/12/2021</td>
<td data-od-type="currency" data-od-text="814" class="number">814 €</td>
<td class="check">✓</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</body> </body>
</html> </html>

9
demos/dev.html
View File

@ -103,6 +103,15 @@ function fodsContent() {
<td></td> <td></td>
<td data-od-style="LongTexte"><p>Exemple de texte long avec plusieurs paragraphes</p><p>Et qui ne déborde pas</p><p>quelque soit la longueur (la hauteur est réglée au niveau de l'élement &lt;tr&gt; parent</p></td> <td data-od-style="LongTexte"><p>Exemple de texte long avec plusieurs paragraphes</p><p>Et qui ne déborde pas</p><p>quelque soit la longueur (la hauteur est réglée au niveau de l'élement &lt;tr&gt; parent</p></td>
</tr> </tr>
<tr style="display: none">
<td>Ligne invisible</td>
</tr>
<tr style="display: none" data-od-hidden="false">
<td>Ligne invisible en HTML, visible en ODS</td>
</tr>
<tr data-od-hidden="true">
<td>Ligne visible en HTML, invisible en ODS</td>
</tr>
</tbody> </tbody>
</table> </table>
<pre id="text"></pre> <pre id="text"></pre>

11
src/js/opendocument/OpenDocument.OdsConverter.js
View File

@ -85,6 +85,11 @@ OpenDocument.OdsConverter.prototype.convert = function (table) {
.addTableColumn(tableColumn); .addTableColumn(tableColumn);
} }
for(let row of table.rows) { for(let row of table.rows) {
let display = window.getComputedStyle(row).display;
let odHidden = OpenDocument.checkHiddenValue(row);
if (((display === "none") && (odHidden !== -1)) || (odHidden === 1)) {
continue;
}
xw xw
.openTableRow(_getRowStyleName(row, styleManager)); .openTableRow(_getRowStyleName(row, styleManager));
for(let cell of row.cells) { for(let cell of row.cells) {
@ -150,18 +155,18 @@ OpenDocument.OdsConverter.prototype.convert = function (table) {
for(let node of cellElement.childNodes) { for(let node of cellElement.childNodes) {
if (node.nodeType === Node.ELEMENT_NODE) { if (node.nodeType === Node.ELEMENT_NODE) {
let display = window.getComputedStyle(node).display; let display = window.getComputedStyle(node).display;
let odHidden = node.dataset["odHidden"]; let odHidden = OpenDocument.checkHiddenValue(node);
switch(display) { switch(display) {
case "none": case "none":
break; break;
case "block": case "block":
if (!odHidden) { if (odHidden !== 1) {
__addText(node.innerText, true); __addText(node.innerText, true);
} }
previousBlock = true; previousBlock = true;
break; break;
default: default:
if (!odHidden) { if (odHidden !== 1) {
__addText(node.innerText, false); __addText(node.innerText, false);
} }
} }

20
src/js/opendocument/OpenDocument.js
View File

@ -36,6 +36,26 @@ OpenDocument.checkSheetName = function (name) {
return result; return result;
}; };
OpenDocument.checkHiddenValue = function (element) {
let odHidden = element.dataset["odHidden"];
if (!odHidden) {
return 0;
}
switch(odHidden.toLowerCase()) {
case 'true':
case '1':
case 'yes':
return 1;
case 'false':
case '0':
case '-1':
case 'no':
return -1;
default:
return 0;
}
};
OpenDocument.toChar = function (columnNumber) { OpenDocument.toChar = function (columnNumber) {
return (columnNumber + 64); return (columnNumber + 64);
}; };