🎭 TLD - tld_slide_overs - Composant de Panneau Coulissant

📖 Introduction

tld_slide_overs est un Web Component permettant d’afficher un panneau latéral coulissant, idéal pour implémenter des menus secondaires, des panneaux de configuration ou des overlays contextuels.

Le composant propose :

• Une ouverture depuis la gauche ou la droite.
• Une transition fluide avec opacity et cubic-bezier.
• Une API JavaScript simple et explicite (open(), close(), toggle()).

📦 Installation / Prérequis / Dépendances

tld_slide_overs repose sur les dépendances suivantes :

Dépendances internes

• tld_custom_elements Classe de base commune aux Web Components TLD.

📄 Proprietes

open

private _open: boolean   = false;

Indique si le panneau doit être ouvert automatiquement lors du rendu initial (via l’attribut HTML open).

Right

private _right: boolean  = false;

Détermine la direction d’ouverture du panneau :

• false → ouverture depuis la gauche (par défaut)
• true → ouverture depuis la droite

Etat

private _etat: boolean  = false;

Représente l’état courant du panneau :

• true → panneau ouvert
• false → panneau fermé

Cette propriété est utilisée par la méthode toggle()

⚙️ Methodes

Render

render () {}

Initialise la position du panneau en fonction de son orientation et de son état initial.

render () {
        if (this._right) { 
            this.style.right = -this.scrollWidth +"px"
            if (this.parentElement) {this.parentElement.style.overflowX = "hidden"}
            if (this._open) {this.open()} 
        }
        else {
            this.style.left = -this.scrollWidth +"px"
            if (this._open) {this.open()} 
        }
    }

Fonctionnement :

• Le panneau est positionné hors de l’écran au chargement.
• La largeur réelle (scrollWidth) est utilisée pour garantir un masquage complet.
• Si l’attribut open est présent, le panneau est immédiatement affiché.

Close

close () {}

Masque le panneau en le repositionnant hors de l’écran.

close () {
    this._etat = false
    this.style.opacity = "0"
    this._right ? this.style.right = -this.scrollWidth +"px" : this.style.left = -this.scrollWidth +"px" 
    
}

Open

open () {}

Affiche le panneau avec animation.

open () {
    this._etat = true
    this.style.opacity = "1"
    this._right ? this.style.right = "0px" : this.style.left = "0px"
}

Toggle

toggle() {}

Inverse automatiquement l’état du panneau.

toggle() {
    this._etat ? this.close() : this.open()
}

Cette méthode est idéale pour être appelée depuis un bouton ou un événement utilisateur.

Etat

etat(): boolean {}

Retourne l’état actuel du panneau.

etat(): boolean {
    return this._etat = true
}

🏷️ Attributs HTML

Attributes	Description
right	Ouvre le panneau depuis la droite
open	Ouvre automatiquement le panneau au chargement

🚀 Utilisation

<tld-slide-overs>
    <p>Contenu du panneau</p>
</tld-slide-overs>

<button onclick="document.querySelector('tld-slide-overs').toggle()">Toggle</button>

Le panneau peut être contrôlé intégralement en JavaScript sans configuration supplémentaire.

Stylisation (CSS)

Le composant ne repose pas sur le Shadow DOM, ce qui permet une personnalisation CSS complète depuis l’extérieur.

🎯 Conclusion

tld_slide_overs est un Web Component simple, efficace et flexible pour intégrer des panneaux coulissants interactifs.

📜 Code

import { InteractionBasique } from "@/types";
import { tld_custom_elements } from "../tld_custom_elements";

import "./index.css"

export class tld_slide_overs extends tld_custom_elements implements InteractionBasique  {
    private _open: boolean   = false;
    private _right: boolean  = false;
    private _etat: boolean  = false;

    constructor(Attributes : {[name:string] : any} | null = null) {
        super(Attributes);
    }
   
    render () {
        if (this._right) { 
            this.style.right = -this.scrollWidth +"px"
            if (this.parentElement) {this.parentElement.style.overflowX = "hidden"}
            if (this._open) {this.open()} 
        }
        else {
            this.style.left = -this.scrollWidth +"px"
            if (this._open) {this.open()} 
        }
    }


    close () {
        this._etat = false
        this.style.opacity = "0"
        this._right ? this.style.right = -this.scrollWidth +"px" : this.style.left = -this.scrollWidth +"px" 
      
    }

    open () {
        this._etat = true
        this.style.opacity = "1"
        this._right ? this.style.right = "0px" : this.style.left = "0px"
    }

    toggle() {
        this._etat ? this.close() : this.open()
    }

    etat(): boolean {
        return this._etat = true
    }

    

    static get observedAttributes() { return ["right","open"];}
}

tld-slide-overs {
    position: absolute;
    
    height: 100vh;
    opacity: 0;
    z-index: 1;
    transition: left 1s cubic-bezier(.075, .82, .165, 1), right 1s cubic-bezier(.075, .82, .165, 1), opacity 1s ease-in-out;
    box-sizing: border-box;
}