Première version classe permettant de créer des liens de classement, séparément de l'affichage des données.

This commit is contained in:
Fabrice PENHOËT 2021-12-08 17:12:12 +01:00
parent dc86d1be44
commit ad7575bf8b

View File

@ -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();
});
}
}
}