Usage plus large de data-od-hidden
This commit is contained in:
parent
8f7fc3b9ec
commit
895376f521
24
README.md
24
README.md
|
|
@ -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.
|
||||
|
||||
## 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
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
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
|
||||
|
||||
|
|
@ -79,7 +70,9 @@ Ce format doit est une chaine où les lettres suivantes sont remplacées par les
|
|||
- Y : année à deux 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
|
||||
|
||||
|
|
@ -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`.
|
||||
|
||||
|
||||
## À 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*
|
||||
|
|
|
|||
|
|
@ -3,32 +3,81 @@ body {
|
|||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-left: 40px;
|
||||
border-collapse: collapse;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
td {
|
||||
border-width: 1px;
|
||||
border-color: #2e3436;
|
||||
border-style: solid;
|
||||
font-size: small;
|
||||
border-width: 1px;
|
||||
border-color: #2e3436;
|
||||
border-style: solid;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 3px;
|
||||
border-width: 1px;
|
||||
border-color: #2e3436;
|
||||
border-style: solid;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: smaller;
|
||||
}
|
||||
.check {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colonnemontant {
|
||||
min-width: 125px;
|
||||
}
|
||||
|
||||
.count {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.text {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
/***************************
|
||||
* Styles ODS
|
||||
* *************************/
|
||||
|
||||
column.Date {
|
||||
width: 2cm;
|
||||
cell.Absent + cell.AR {
|
||||
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
129
demos/build.html
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<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-Script-Type" content="text/javascript">
|
||||
<link href="build.css" rel="stylesheet" type="text/css">
|
||||
|
|
@ -11,55 +11,130 @@
|
|||
function fodsLink() {
|
||||
let link = document.getElementById("link");
|
||||
link.href = URL.createObjectURL(
|
||||
Html2Ods.blob("table")
|
||||
Html2Ods.blob("table", {
|
||||
currency: "EUR",
|
||||
datePattern: "DD/MM/YYYY"
|
||||
})
|
||||
);
|
||||
setTimeout(function () {
|
||||
URL.revokeObjectURL(link.href);
|
||||
}, 4E4); // 40s
|
||||
return true;
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<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>
|
||||
<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"
|
||||
data-od-sheetname="Tableau des clients"
|
||||
data-od-currency="EUR"
|
||||
data-od-sheetname="Tableau des projets"
|
||||
data-od-fixed-rows="2"
|
||||
data-od-fixed-columns="1">
|
||||
<colgroup>
|
||||
<col data-od-width="4cm">
|
||||
<col span="2" data-od-style="Date">
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup span="2" class="moyennecolonne">
|
||||
<col data-od-width="7cm" class="text">
|
||||
<col data-od-width="2cm">
|
||||
<col span="2" data-od-style="Date">
|
||||
<colgroup span="4" class="colonnemontant"></colgroup>
|
||||
<col class="count">
|
||||
<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>
|
||||
<col data-od-style="Date">
|
||||
<col class="colonnemontant">
|
||||
<col data-od-style="AR">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr data-od-style="Entete">
|
||||
<th rowspan="2">Client</th>
|
||||
<th colspan="2">Dates</th>
|
||||
<th rowspan="2">Nuitées</th>
|
||||
<th rowspan="2">Facture</th>
|
||||
<tr>
|
||||
<th rowspan="2">Projet</th>
|
||||
<th rowspan="2">Nomenclature</th>
|
||||
<th colspan="2">Dates</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>
|
||||
<th class="small">Départ</th>
|
||||
<th class="small">Arrivée</th>
|
||||
<th class="small">Décision du financement</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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Victor Hugo</td>
|
||||
<td data-od-type="date" data-od-text="2020-12-01">01/12/2020</td>
|
||||
<td>Jardins partagés</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="number" class="number">40</td>
|
||||
<td data-od-type="currency" data-od-text="1250" class="number">1 250 €</td>
|
||||
</tr>
|
||||
<td data-od-type="currency" data-od-text="16175" class="number">16 175 €</td>
|
||||
<td class="check">✓</td>
|
||||
</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>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -103,6 +103,15 @@ function fodsContent() {
|
|||
<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 <tr> parent</p></td>
|
||||
</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>
|
||||
</table>
|
||||
<pre id="text"></pre>
|
||||
|
|
|
|||
|
|
@ -85,6 +85,11 @@ OpenDocument.OdsConverter.prototype.convert = function (table) {
|
|||
.addTableColumn(tableColumn);
|
||||
}
|
||||
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
|
||||
.openTableRow(_getRowStyleName(row, styleManager));
|
||||
for(let cell of row.cells) {
|
||||
|
|
@ -150,18 +155,18 @@ OpenDocument.OdsConverter.prototype.convert = function (table) {
|
|||
for(let node of cellElement.childNodes) {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
let display = window.getComputedStyle(node).display;
|
||||
let odHidden = node.dataset["odHidden"];
|
||||
let odHidden = OpenDocument.checkHiddenValue(node);
|
||||
switch(display) {
|
||||
case "none":
|
||||
break;
|
||||
case "block":
|
||||
if (!odHidden) {
|
||||
if (odHidden !== 1) {
|
||||
__addText(node.innerText, true);
|
||||
}
|
||||
previousBlock = true;
|
||||
break;
|
||||
default:
|
||||
if (!odHidden) {
|
||||
if (odHidden !== 1) {
|
||||
__addText(node.innerText, false);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,26 @@ OpenDocument.checkSheetName = function (name) {
|
|||
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) {
|
||||
return (columnNumber + 64);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue