Breadcrumb

        
            Container uikit pour breadcrumb, l'injection du fil d'ariane est traité par JS 
            
        
    

Uikit

    /**
 * Cette boucle est utile pour déterminer la hiérarchie actuelle de la page en fonction de l'URL et des mappings définis dans urlMappings.
 * Elle permet de construire le fil d'Ariane en identifiant où se trouve actuellement l'utilisateur dans la structure de navigation de la page.
 * @param {*} currentUrl url où l'on se trouve
 * @param {*} urlMappings l'objet maps contenant les url à vérifier et les Label à utilisés
 * @returns 
 */
function getCurrentHierarchy(currentUrl, urlMappings) {
    let hierarchy = [];
    // on parcours l'objet js à la recherche de l'url (currentUrl)
    // parmis les clés de l'objet
    for (let url in urlMappings) {
        // la méthode startsWith de l'objet String permet de vérifier 
        // si une chaîne de caractères commence par une sous-chaîne donnée
        // ex: string.startsWith(searchString)
        if (currentUrl.startsWith(url)) {
            // Si c'est le cas une nouvelle entrée est ajoutée à la hiérarchie 
            // avec le libellé correspondant extrait du tableau urlMappings 
            hierarchy.push({
                label: urlMappings[url],
                url: url
            });
        }
    }
    // on retourne la hiérarchie
    return hierarchy;
}
/**
 * 
 * @param {*} currentUrl  L'URL actuelle de la page
 * @param {*} urlMappings Un objet contenant les correspondances entre les URL et les libellés des pages dans la hiérarchie du fil d'Ariane
 * @returns le fil d'ariane
 */
function generateBreadcrumb(currentUrl, urlMappings) {
    // breadcrumb stockera les éléments du fil d'Ariane sous forme de chaînes HTML.
    let breadcrumb = [];
    // pour obtenir la hiérarchie actuelle basée sur l'URL actuelle et les correspondances URL dans urlMappings
    let currentHierarchy = getCurrentHierarchy(currentUrl, urlMappings);
    // Un lien vers la page d'accueil est ajouté en premier dans le fil d'Ariane.
    breadcrumb.push('Accueil');

    // Vérifier si "Breadcrumb" est présent dans la hiérarchie
    let breadcrumbFound = false;
    for (let i = 0; i < currentHierarchy.length; i++) {
        if (currentHierarchy[i].label === 'Breadcrumb') {
            breadcrumbFound = true;
            breadcrumb.push('Breadcrumb');
            break;
        }
    }

    // Ajouter chaque niveau de la hiérarchie au fil d'Ariane
    for (let i = 0; i < currentHierarchy.length; i++) {
        let item = currentHierarchy[i];
        // Exclure "Breadcrumb" de la deuxième itération
        if (breadcrumbFound && item.label === 'Breadcrumb') {
            continue;
        }
        breadcrumb.push('' + item.label + '');
    }

    return breadcrumb.join(' > '); // Utilisez ">" pour le symbole ">"
}



document.addEventListener("DOMContentLoaded", function () {
    // Définition des URL et de leurs libellés correspondants

    // objet javascript
    let urlMappings = {
        './': 'Accueil',
        '/index.php?ctrl=home&action=breadcrumb&anchor=html': 'Breadcrumb HTML',
        '/index.php?ctrl=home&action=breadcrumb&anchor=css': 'Breadcrumb CSS',
        '/index.php?ctrl=home&action=breadcrumb&anchor=js': 'Breadcrumb JS',
        '/index.php?ctrl=home&action=breadcrumb': 'Breadcrumb',
        '/index.php?ctrl=home&action=navbar&anchor=html': 'Navbar HTML',
        '/index.php?ctrl=home&action=navbar&anchor=css': 'Navbar CSS',
        '/index.php?ctrl=home&action=navbar&anchor=js': 'Navbar JS',
        '/index.php?ctrl=home&action=navbar': 'Navbar',
        '/index.php?ctrl=home&action=sitemap&anchor=html': 'Sitemap HTML',
        '/index.php?ctrl=home&action=sitemap&anchor=css': 'Sitemap CSS',
        '/index.php?ctrl=home&action=sitemap&anchor=js': 'Sitemap JS',
        '/index.php?ctrl=home&action=sitemap': 'Sitemap',
    };

    let currentUrl = window.location.href; // Utilisation de window.location.href pour obtenir l'URL complète
    let pathAfterIndex = currentUrl.substr(currentUrl.indexOf('/index.php')); // Récupérer le chemin après "index.php"

    // Générer le fil d'Ariane
    let breadcrumb = generateBreadcrumb(pathAfterIndex, urlMappings);
    console.log('Breadcrumb:', breadcrumb);

    let navBreadcrumb = document.getElementById('nav-breadcrumb');

    // Insérer le fil d'Ariane généré dans l'élément avec l'ID 'nav-breadcrumb'
    if (navBreadcrumb) {
        navBreadcrumb.innerHTML = breadcrumb;
    }
});