AccesSight Pro

AccesSight

Suite d'accessibilité complète avec loupe et synthèse vocale améliorée
当前为 2025-03-09 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         AccesSight 
// @namespace    http://tampermonkey.net/
// @version      3.1
// @description  Suite d'accessibilité complète avec loupe et synthèse vocale améliorée
// @author       Yglsan
// @include      *
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @license      GPL-3.0
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Configuration par défaut
    const configurationParDefaut = {
        tailleTexte: 16,
        modeContraste: 'normal',
        vitesseLecture: 1,
        surbrillanceLiens: true,
        modeSombre: false,
        loupe: {
            activee: false,
            zoom: 2,
            suivreCurseur: true,
            tailleLoupe: 200
        },
        syntheseVocale: {
            lireLiens: true,
            ignorerContenuCache: true,
            navigationStructurelle: true
        }
    };
 
    // État courant
    let configurationActuelle = {
        ...configurationParDefaut,
        ...GM_getValue('configurationAccesSight', {})
    };
 
    // Création de l'interface utilisateur principale
    function creerPanneauControle() {
        const panneau = document.createElement('div');
        panneau.id = 'panneau-accesight';
        panneau.style.cssText = `
            position: fixed;
            top: ${configurationActuelle.positionSauvegardee.y}px;
            left: ${configurationActuelle.positionSauvegardee.x}px;
            background: ${configurationActuelle.modeSombre ? '#333' : '#FFF'};
            color: ${configurationActuelle.modeSombre ? '#FFF' : '#000'};
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 10000;
            font-family: Arial, sans-serif;
            min-width: 300px;
            cursor: move;
            user-select: none;
        `;
 
        // En-tête du panneau
        const enTete = document.createElement('div');
        enTete.innerHTML = `
            <h2 style="margin: 0 0 1rem 0; font-size: 1.2rem;">AccesSight Pro+</h2>
            <button aria-label="Fermer le panneau" 
                    style="position: absolute; top: 5px; right: 5px; 
                    background: none; border: none; cursor: pointer; color: inherit;">
                ×
            </button>
        `;
        panneau.appendChild(enTete);
 
        // Contrôles principaux
        const controles = [
            {
                type: 'curseur',
                libelle: 'Taille du texte',
                min: 12,
                max: 36,
                valeur: configurationActuelle.tailleTexte,
                propriete: 'tailleTexte',
                pas: 1
            },
            {
                type: 'selection',
                libelle: 'Mode de contraste',
                options: ['Normal', 'Élevé', 'Inversé'],
                valeur: configurationActuelle.modeContraste,
                propriete: 'modeContraste'
            },
            {
                type: 'bouton',
                libelle: 'Lire le contenu',
                action: 'demarrerLectureVocale'
            },
            {
                type: 'interrupteur',
                libelle: 'Mode sombre',
                valeur: configurationActuelle.modeSombre,
                propriete: 'modeSombre'
            },
            {
                type: 'interrupteur',
                libelle: 'Activer la loupe',
                valeur: configurationActuelle.loupe.activee,
                propriete: 'loupe.activee'
            }
        ];
 
        controles.forEach(controle => {
            const groupeControle = document.createElement('div');
            groupeControle.style.marginBottom = '1rem';
 
            switch(controle.type) {
                case 'curseur':
                    groupeControle.innerHTML = `
                        <label style="display: block; margin-bottom: 0.5rem;">
                            ${controle.libelle}: 
                            <output style="display: inline-block; width: 3em;">${controle.valeur}px</output>
                        </label>
                        <input type="range"
                               min="${controle.min}"
                               max="${controle.max}"
                               step="${controle.pas}"
                               value="${controle.valeur}"
                               style="width: 100%;"
                               data-propriete="${controle.propriete}">
                    `;
                    break;
 
                case 'selection':
                    groupeControle.innerHTML = `
                        <label style="display: block; margin-bottom: 0.5rem;">${controle.libelle}</label>
                        <select style="width: 100%; padding: 0.25rem;" data-propriete="${controle.propriete}">
                            ${controle.options.map(option => `
                                <option value="${option.toLowerCase()}" ${option.toLowerCase() === controle.valeur ? 'selected' : ''}>
                                    ${option}
                                </option>
                            `).join('')}
                        </select>
                    `;
                    break;
 
                case 'interrupteur':
                    groupeControle.innerHTML = `
                        <label style="display: flex; align-items: center; gap: 0.75rem;">
                            <input type="checkbox" 
                                   ${controle.valeur ? 'checked' : ''} 
                                   data-propriete="${controle.propriete}"
                                   style="margin: 0;">
                            ${controle.libelle}
                        </label>
                    `;
                    break;
 
                case 'bouton':
                    groupeControle.innerHTML = `
                        <button style="width: 100%; padding: 0.75rem; background: #007bff; color: white; border: none; border-radius: 4px;"
                                data-action="${controle.action}">
                            ${controle.libelle}
                        </button>
                    `;
                    break;
            }
 
            panneau.appendChild(groupeControle);
        });
 
        // Gestion des événements
        panneau.querySelectorAll('input, select').forEach(element => {
            element.addEventListener('input', gererChangementConfiguration);
            element.addEventListener('mousedown', arreterPropagationEvenement);
            element.addEventListener('touchstart', arreterPropagationEvenement);
        });
 
        panneau.querySelector('[data-action="demarrerLectureVocale"]').addEventListener('click', basculerLectureVocale);
 
        // Gestion du déplacement du panneau
        let deplacementActif = false;
        let positionInitialeX = 0;
        let positionInitialeY = 0;
 
        panneau.addEventListener('mousedown', commencerDeplacement);
        document.addEventListener('mousemove', deplacerPanneau);
        document.addEventListener('mouseup', arreterDeplacement);
 
        function commencerDeplacement(evenement) {
            if (evenement.target.tagName === 'INPUT' || evenement.target.tagName === 'SELECT') return;
            deplacementActif = true;
            positionInitialeX = evenement.clientX - panneau.offsetLeft;
            positionInitialeY = evenement.clientY - panneau.offsetTop;
        }
 
        function deplacerPanneau(evenement) {
            if (deplacementActif) {
                evenement.preventDefault();
                panneau.style.left = `${evenement.clientX - positionInitialeX}px`;
                panneau.style.top = `${evenement.clientY - positionInitialeY}px`;
            }
        }
 
        function arreterDeplacement() {
            deplacementActif = false;
            configurationActuelle.positionSauvegardee = {
                x: parseInt(panneau.style.left),
                y: parseInt(panneau.style.top)
            };
            GM_setValue('configurationAccesSight', configurationActuelle);
        }
 
        document.body.appendChild(panneau);
        appliquerParametresAccessibilite();
    }
 
    // Application des paramètres d'accessibilité
    function appliquerParametresAccessibilite() {
        // Taille du texte
        document.documentElement.style.fontSize = `${configurationActuelle.tailleTexte}px`;
 
        // Contraste
        GM_addStyle(`
            body {
                filter: ${configurationActuelle.modeContraste === 'élevé' ? 'contrast(150%)' :
                         configurationActuelle.modeContraste === 'inversé' ? 'invert(1) hue-rotate(180deg)' : 'none'};
            }
        `);
 
        // Mode sombre
        if (configurationActuelle.modeSombre) {
            GM_addStyle(`
                body {
                    background-color: #1a1a1a !important;
                    color: #ffffff !important;
                }
            `);
        }
 
        // Surbrillance des liens
        if (configurationActuelle.surbrillanceLiens) {
            GM_addStyle(`
                a {
                    outline: 2px solid #ff0000 !important;
                    padding: 2px !important;
                }
            `);
        }
 
        // Gestion de la loupe
        if (configurationActuelle.loupe.activee && !document.getElementById('loupe-accesight')) {
            creerLoupe();
        }
    }
 
    // Création de la loupe
    function creerLoupe() {
        const loupe = document.createElement('div');
        loupe.id = 'loupe-accesight';
        loupe.style.cssText = `
            position: absolute;
            width: ${configurationActuelle.loupe.tailleLoupe}px;
            height: ${configurationActuelle.loupe.tailleLoupe}px;
            border: 2px solid #ff0000;
            border-radius: 50%;
            overflow: hidden;
            pointer-events: none;
            display: none;
            z-index: 100000;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        `;
 
        const contenuLoupe = document.createElement('div');
        contenuLoupe.style.cssText = `
            transform-origin: 0 0;
            will-change: transform;
            width: ${document.documentElement.offsetWidth}px;
            height: ${document.documentElement.offsetHeight}px;
        `;
 
        loupe.appendChild(contenuLoupe);
        document.body.appendChild(loupe);
 
        document.addEventListener('mousemove', evenement => {
            if (!configurationActuelle.loupe.activee) return;
 
            const positionX = evenement.clientX;
            const positionY = evenement.clientY;
            
            loupe.style.display = 'block';
            loupe.style.left = `${positionX + 20}px`;
            loupe.style.top = `${positionY + 20}px`;
 
            const zoom = configurationActuelle.loupe.zoom;
            contenuLoupe.style.transform = `
                translate(${-positionX * zoom + configurationActuelle.loupe.tailleLoupe/2}px,
                          ${-positionY * zoom + configurationActuelle.loupe.tailleLoupe/2}px)
                scale(${zoom})
            `;
            contenuLoupe.innerHTML = document.documentElement.cloneNode(true);
        });
    }
 
    // Gestion de la synthèse vocale
    let instanceLectureVocale = null;
    function basculerLectureVocale() {
        if (!instanceLectureVocale) {
            demarrerLectureVocale();
        } else {
            arreterLectureVocale();
        }
    }
 
    function demarrerLectureVocale() {
        const contenuStructure = extraireContenuStructure();
        instanceLectureVocale = new SpeechSynthesisUtterance(contenuStructure);
        
        instanceLectureVocale.rate = configurationActuelle.vitesseLecture;
        instanceLectureVocale.onboundary = evenement => surlignerMotCourant(evenement);
        instanceLectureVocale.onend = () => reinitialiserSurlignage();
        
        window.speechSynthesis.speak(instanceLectureVocale);
    }
 
    function extraireContenuStructure() {
        const elementsVisibles = Array.from(document.body.querySelectorAll(
            'h1, h2, h3, h4, h5, h6, p, li, caption, figcaption, blockquote'
        )).filter(element => {
            return configurationActuelle.syntheseVocale.ignorerContenuCache ?
                element.offsetParent !== null : true;
        });
 
        return elementsVisibles.map(element => {
            const typeElement = element.tagName.toLowerCase();
            return `${typeElement} : ${element.textContent}`;
        }).join('. ');
    }
 
    function surlignerMotCourant(evenement) {
        const indexCaractere = evenement.charIndex;
        const texteComplet = instanceLectureVocale.text;
        const mots = texteComplet.split(/\s+/);
        
        let indexAccumule = 0;
        let motCourant = '';
        for (const mot of mots) {
            indexAccumule += mot.length + 1;
            if (indexAccumule > indexCaractere) {
                motCourant = mot;
                break;
            }
        }
 
        const elements = document.querySelectorAll('*:not(script):not(style)');
        elements.forEach(element => {
            element.childNodes.forEach(node => {
                if (node.nodeType === Node.TEXT_NODE && node.textContent.includes(motCourant)) {
                    const span = document.createElement('span');
                    span.style.backgroundColor = 'yellow';
                    span.style.color = 'black';
                    span.textContent = motCourant;
                    
                    const nouveauContenu = node.textContent.replace(
                        new RegExp(motCourant, 'g'), 
                        span.outerHTML
                    );
                    const nouveauNoeud = document.createRange().createContextualFragment(nouveauContenu);
                    node.replaceWith(...nouveauNoeud.childNodes);
                }
            });
        });
    }
 
    function reinitialiserSurlignage() {
        document.querySelectorAll('span[style*="yellow"]').forEach(span => {
            const parent = span.parentNode;
            parent.replaceChild(document.createTextNode(span.textContent), span);
        });
        instanceLectureVocale = null;
    }
 
    // Gestion des changements de configuration
    function gererChangementConfiguration(evenement) {
        const propriete = evenement.target.dataset.propriete;
        let valeur = evenement.target.type === 'checkbox' ? 
            evenement.target.checked : 
            evenement.target.value;
 
        if (propriete === 'tailleTexte') valeur = parseInt(valeur);
        
        if (propriete.includes('.')) {
            const [parent, enfant] = propriete.split('.');
            configurationActuelle[parent][enfant] = valeur;
        } else {
            configurationActuelle[propriete] = valeur;
        }
 
        GM_setValue('configurationAccesSight', configurationActuelle);
        appliquerParametresAccessibilite();
 
        if (propriete === 'tailleTexte') {
            evenement.target.parentNode.querySelector('output').textContent = `${valeur}px`;
        }
    }
 
    // Fonctions utilitaires
    function arreterPropagationEvenement(evenement) {
        evenement.stopPropagation();
    }
 
    // Initialisation
    function initialiser() {
        if (!document.getElementById('panneau-accesight')) {
            creerPanneauControle();
        }
    }
 
    // Démarrage
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initialiser);
    } else {
        initialiser();
    }
})();