🛠 TLD - tld_maintenance - Composant de Maintenance

📖 Introduction

tld_maintenance est un Web Component destiné à afficher un écran ou une bannière de maintenance afin d’informer les utilisateurs qu’une page ou certaines fonctionnalités sont temporairement indisponibles.

Il peut être utilisé pour :

• Bloquer totalement l’accès à une page.
• Informer d’une opération de maintenance en cours.
• Afficher un message clair et rassurant à l’utilisateur final.

📦 Installation / Prérequis / Dépendances

tld_maintenance repose sur les dépendances suivantes :

Dépendances internes

• tld_custom_elements Classe de base commune aux Web Components TLD.

📄 Proprietes

Etat

public _etat : boolean = true

Définit l’état du composant :

• true → maintenance active (composant visible)
• false → maintenance désactivée (composant masqué)

Cette propriété est utilisée par les méthodes open(), close() et toggle()

⚙️ Methodes

Render

render() {}

Construit dynamiquement l’interface de maintenance et attache les événements nécessaires.

render() {

    this.innerHTML = /*html*/ `
        <div>
            
            <img class='tld-maintenance-close-button' src="/img/icon/x.svg">
            
            <div>
                <div>
                    <p>Page en maintenance</p>

                    <p>Cette page est actuellement en maintenance par un développeur. Il est possible que certaines fonctionnalités ne fonctionnent pas ou que la page entière soit inaccessible.</p>
                    <p>Ne vous inquiétez pas, elle sera de retour très bientôt.</p>
                    <p>Si vous constatez des bugs après la maintenance, n'hésitez pas à nous contacter afin que nous puissions résoudre le problème au plus vite.</p>
                </div>
                <img class="tld-maintenance-img" src="/img/image_maintenance.png">
            </div>
            

        <div>`
    
    this.querySelector(".tld-maintenance-close-button")!.addEventListener("click" , (e)=>{ this.close() })
}

Fonctionnement :

• Génère un overlay plein écran.
• Affiche un message clair et informatif.
• Permet la fermeture manuelle via un bouton.

Close

close() {}

Masque le composant de maintenance.

close() {
    this._etat = false
    this.style.display="none"
}

Open

open(): void {}

Affiche le composant de maintenance.

open(): void {
    this._etat = false
    this.style.display="flex"
}

Toggle

toggle(): void {}

Inverse automatiquement l’état du composant.

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

Etat

etat(): boolean  {}

Retourne l’état actuel de la maintenance.

etat(): boolean {
    return this._etat
}

🚀 Utilisation

Exemple d’intégration simple :

<tld-maintenance></tld-maintenance>

Contrôle via JavaScript :

const maintenance = document.querySelector("tld-maintenance");

// Activer la maintenance
maintenance.open();

// Désactiver la maintenance
maintenance.close();

// Basculer l’état
maintenance.toggle();

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_maintenance est un Web Component simple, robuste et immédiatement opérationnel pour gérer les périodes de maintenance ou d’indisponibilité.

Il offre :

• Une intégration rapide.
• Un contrôle total via JavaScript.
• Une expérience utilisateur claire et rassurante.

📜 Code

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

import "./index.css"

export class tld_maintenance extends tld_custom_elements implements InteractionBasique {

    public _etat : boolean = true

    constructor(Attributes : {[name:string] : any} | null = null) {
        super(Attributes);   
    } 
   
    render() {

        this.innerHTML = /*html*/ `
            <div>
                
                <img class='tld-maintenance-close-button' src="/img/icon/x.svg">
                
                <div>
                    <div>
                        <p>Page en maintenance</p>

                        <p>Cette page est actuellement en maintenance par un développeur. Il est possible que certaines fonctionnalités ne fonctionnent pas ou que la page entière soit inaccessible.</p>
                        <p>Ne vous inquiétez pas, elle sera de retour très bientôt.</p>
                        <p>Si vous constatez des bugs après la maintenance, n'hésitez pas à nous contacter afin que nous puissions résoudre le problème au plus vite.</p>
                    </div>
                    <img class="tld-maintenance-img" src="/img/image_maintenance.png">
                </div>
                

            <div>
        `
        this.querySelector(".tld-maintenance-close-button")!.addEventListener("click" , (e)=>{ this.close() })
    }
    

    close() {
        this._etat = false
        this.style.display="none"
    }

    open(): void {
        this._etat = false
        this.style.display="flex"
    }
    toggle(): void {
        this._etat ? this.close() : this.open()
    }
    etat(): boolean {
       return this._etat
    }

}

tld-maintenance {
    background-color: rgba(60, 35, 64, 0.6);
    position:fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    z-index: 1;
    display: flex;
}

tld-maintenance > div {
    padding: 10px;
    position: relative;
    min-height: 100px;
    width: auto;
    border-radius: 8px;
    background-color: white;
    font-family: 'Albert Sans';
    margin: 20px;
    max-width: 700px;
}

tld-maintenance > div > div {
    display: flex;
    align-items: center;
}

tld-maintenance > div > div > div {
    margin: 20px;
}

tld-maintenance > div > div > div p {
    margin-bottom: 25px;
}

tld-maintenance > div > div > div p:first-child {
   font-size: 25pt;

}

tld-maintenance  > div .tld-maintenance-close-button {
    position:absolute;
    top: 5px;
    right: 5px;
    height: 15px;
    width: 15px;
    margin-left: 5px;
    cursor: pointer;
}

tld-maintenance  > div .tld-maintenance-img {
   
    max-width: 300px;
    max-height: 300px;
    width: 100%;

}

@media screen and (max-width: 600px) {
    tld-maintenance > div > div {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
 
   
}