🏗 TLD - tld_builder_page - Système de Construction de Pages

📖 Introduction

tld_builder_page est une classe abstraite permettant de créer des blocs interactifs dans un constructeur de pages.
Elle gère l'affichage, l'organisation et la manipulation des éléments via Drag & Drop.

Elle s'appuie sur plusieurs interfaces définissant les stratégies de rendu et de manipulation des blocs.

---

⚡️ Installation / Prérequis

📦 Dépendances

Le système repose sur tld_custom_elements et la bibliothèque Sortable.js pour la gestion des blocs.

npm install sortablejs

---

🚀 Utilisation

🔹 Création d'un Bloc Personnalisé

Comme tld_builder_page est une classe abstraite, il faut la dériver et implémenter les méthodes requises :

class MyBuilderBlock extends tld_builder_page {
    DefaultDropButtonBox() {
        const button = document.createElement("button");
        button.innerText = "Ajouter un élément";
        return button;
    }

    DefaultOverlayBox(buttons: BuilderPageCustombutton[]) {
        const overlay = document.createElement("div");
        overlay.classList.add("overlay");
        buttons.forEach(btn => overlay.appendChild(btn.Element));
        return overlay;
    }

    DefaultGhostBox() {
        const ghost = document.createElement("div");
        ghost.innerText = "Fantôme de l'élément";
        return ghost;
    }

    DefaultMenuButtonRemove(): BuilderPageCustombutton {
        return {
            Option: { Name: "remove", Post: "right" },
            Element: document.createElement("button")
        };
    }

    DefaultMenuButtonMove(): BuilderPageCustombutton {
        return {
            Option: { Name: "move", Post: "left" },
            Element: document.createElement("button")
        };
    }

    TypeStrategie(type: string): BuilderPageStrategy | null {
        return {
            ContextElement: this,
            Element: document.createElement("div"),
            ElementName: "Bloc personnalisé",
            LocalOption: {},
            Render: () => document.createElement("div"),
            toHTML: () => "<div>Mon élément</div>"
        };
    }
}

// Enregistrement du composant
customElements.define("my-builder-block", MyBuilderBlock);

---

📌 Détails du Code

🏗️ Définition de tld_builder_page

tld_builder_page permet d'afficher un élément sous forme de bloc dans un Page Builder.
Il propose plusieurs stratégies de personnalisation et d'intégration.

🏗 Propriétés Principales

Propriété	Type	Description
_strategie	BuilderPageStrategy	Stratégie de rendu de l'élément
_type	string	Type d'élément
_button	boolean	Indique si c'est un bouton de création
_listMenubutton	Array<BuilderPageCustombutton>	Liste des boutons du menu contextuel
_SortableOption	Sortable.Options	Options de gestion du Drag & Drop

🎨 Méthodes Importantes

• render() : Affiche l'élément et gère son rendu selon _button.
• postRender() : Met à jour l'affichage après le rendu principal.
• renderButton() : Affiche l'élément sous forme de bouton pour permettre l'ajout d'autres blocs.
• renderDisplay(innerHTML: string) : Affiche le bloc en tenant compte de la stratégie _strategie.Render().
• TypeStrategie(type: string, options?) : Retourne la stratégie associée à un type d'élément.
• clone() : Retourne une copie du bloc.
• load(data: BuilderPageData) : Charge un état sauvegardé dans un bloc.
• save() : Retourne la configuration actuelle du bloc.
• toHTML() : Génère le HTML de l'élément pour exportation.

---

📌 Interfaces Associées

🎭 BuilderPageStrategy

interface BuilderPageStrategy {
    ContextElement: tld_builder_page;
    Element: Element;
    ElementName: string;
    LocalOption: { [key: string]: any };
    Render(innerHTML: string): Element | Element[];
    toHTML(): string;
    SortableElement?: tld_sortable;
    CustomDropButton?(): Element;
    CustomOverlay?(buttons: BuilderPageCustombutton[]): Element;
    CustomMenubutton?(): BuilderPageCustombutton[];
    CustomGhost?(): Element;
}

📂 BuilderPageData

interface BuilderPageData {
    TypeStrategie: string;
    LocalOption: { [key: string]: any };
    Childrens: BuilderPageData[] | null;
}

🔘 BuilderPageCustombutton

interface BuilderPageCustombutton {
    Option: {
        Name: string;
        Post: "left" | "right";
        [option: string]: any;
    };
    Element: Element;
}

---

🎨 Style CSS

.tld-builder-page-overlayBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tld-builder-page-buttonBox {
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

---

📚 Exemples et Cas Pratiques

📌 Ajout Dynamique d'un Élément

const newBlock = new MyBuilderBlock();
newBlock.setAttribute("type", "text-block");
document.body.appendChild(newBlock);

📌 Sauvegarde et Restauration

const savedData = myBlock.save();
console.log(savedData);

// Recharger l'élément
const restoredBlock = new MyBuilderBlock();
restoredBlock.load(savedData);
document.body.appendChild(restoredBlock);

---

🎯 Conclusion

tld_builder_page est une base solide pour un Page Builder modulaire en TypeScript.
Il permet de structurer facilement des éléments et d'ajouter des interactions avancées grâce à Sortable.js.