From ad7575bf8b1dea3c916c088901b7dc888ee3cf8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= <fabrice@le-fab-lab.com>
Date: Wed, 8 Dec 2021 17:12:12 +0100
Subject: [PATCH] =?UTF-8?q?Premi=C3=A8re=20version=20classe=20permettant?=
 =?UTF-8?q?=20de=20cr=C3=A9er=20des=20liens=20de=20classement,=20s=C3=A9pa?=
 =?UTF-8?q?r=C3=A9ment=20de=20l'affichage=20des=20donn=C3=A9es.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/SortingFieldsStandAlone.ts | 70 +++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/extensions/SortingFieldsStandAlone.ts

diff --git a/src/extensions/SortingFieldsStandAlone.ts b/src/extensions/SortingFieldsStandAlone.ts
new file mode 100644
index 0000000..2a4b6b0
--- /dev/null
+++ b/src/extensions/SortingFieldsStandAlone.ts
@@ -0,0 +1,70 @@
+// Cette classe est une alternative à l'utilisation directe de SortingField.
+// Ici, les liens de classement sont créés dans un élément du DOM externe à celui affichant les données
+
+import { DOMElement } from "../interfaces";
+import { FreeDatas2HTML, SortingField } from "../FreeDatas2HTML";
+const errors=require("../errors.js");
+
+export interface SortingFieldsSettings
+{
+    allBegining: string;
+    allEnding: string;
+    fieldBegining: string;
+    fieldEnding: string;
+}
+
+export class SortingFieldsStandAlone
+{
+    private _converter: FreeDatas2HTML;
+    private _datasViewElt: DOMElement={ id: "", eltDOM: undefined };
+    public datasSortingFields: SortingField[]=[];
+    public rendSettings: SortingFieldsSettings;
+    static readonly defaultSettings= 
+    {
+        allBegining: "<ul>",
+        allEnding: "</ul>",
+        fieldBegining: "<li>",
+        fieldEnding: "</li>",
+    };
+
+    constructor(converter: FreeDatas2HTML, elt: DOMElement, settings: SortingFieldsSettings=SortingFieldsStandAlone.defaultSettings)
+    {
+        if(converter.fields.length === 0)
+            throw new Error(errors.sortingFieldNeedDatas);
+        this._converter=converter;
+        this._datasViewElt=FreeDatas2HTML.checkInDOMById(elt);
+        this.rendSettings=settings;
+    }
+
+    public rend2HTML(label:string="Classer les données suivant : ") : void
+    {
+        // Il doit y avoir au moins un champ de classement fourni :
+        if(this.datasSortingFields.length === 0)
+            throw new Error("Vous devez fournir au moins un champ de classement valide.");
+            
+        // Arrivé ici, je sais que j'ai au moins un lien de classement à injecter
+        let htmlContent="<label>"+label+"</label>"+this.rendSettings.allBegining;
+        for(let field of this.datasSortingFields)
+        {
+            htmlContent+=this.rendSettings.fieldBegining+"<a href='#freeDatas2HTMLSorting"+field.datasFieldNb+"' id='freeDatas2HTMLSorting"+field.datasFieldNb+"'>"+this._converter.fields[field.datasFieldNb]+"</a>"+this.rendSettings.fieldEnding;
+        }
+        htmlContent+=this.rendSettings.allEnding;
+        this._datasViewElt.eltDOM!.innerHTML=htmlContent;// "!" car existence de l'élement, testé via le constructeur.
+
+        // Les liens venant d'êtres injectés dans le DOM, il reste à les rendre actifs :
+        for(let field of this.datasSortingFields)
+        {
+            let sortingLink=document.getElementById("freeDatas2HTMLSorting"+field.datasFieldNb);
+            sortingLink!.addEventListener("click", function(e) // "!" car je sais que sortingLink existe, puisque je viens de le créer !
+            {
+                e.preventDefault();
+                if(field.order === undefined || field.order === "desc")
+                    field.order="asc";
+                else
+                    field.order="desc";
+                field.converter.datasSortedField=field;
+                field.converter.refreshView();
+            });
+        }
+    }
+}
\ No newline at end of file