Gebruik je Tolkie Leeshulp binnen een single page application (spa), zoals React, Vue of Angular? Dan verandert de inhoud van de pagina vaak zonder dat de browser echt naar een nieuwe pagina navigeert. In dat geval moet Tolkie weten wanneer het opnieuw moet worden geladen.
Daarvoor zijn er twee mogelijkheden.
Hoe werkt dit standaard?
Standaard initialiseert Tolkie automatisch zodra het script wordt geladen.
Bij spa’s kunnen we aan onze kant detecteren of de url verandert. Zodra dat gebeurt, wordt de leeshulp automatisch opnieuw geladen met de nieuwe inhoud.
Dit werkt goed voor veel toepassingen, maar geeft webontwikkelaars minder controle over het exacte moment van herinitialisatie.
Zelf controle houden met tolkie.init()
Wil je als webontwikkelaar zelf bepalen wanneer Tolkie initialiseert of herstart, dan kun je gebruikmaken van uitgestelde initialisatie.
Hiermee stel je het initialiseren van de leeshulp uit totdat jij expliciet tolkie.init() aanroept.
Dit is ideaal bij spa’s waarbij content pas later wordt ingeladen of vervangen.
Deferred initialization gebruiken
Voeg bij het laden van het Tolkie-script het attribuut data-tolkie-wait-init toe.
Daardoor wacht Tolkie met initialiseren totdat jij dat aangeeft.
Voorbeeld
const script = document.createElement("script"); script.id = "tolkie-script"; script.src = "https://your-host/tolkie-client.js"; script.setAttribute("data-tolkie-token", "your-token"); script.setAttribute("data-tolkie-state", "separateButtons"); script.setAttribute("data-tolkie-wait-init", ""); // Initialisatie uitstellen document.head.appendChild(script); // Later, wanneer de pagina-inhoud klaar is: window.tolkie.init();Pas na het aanroepen van tolkie.init() wordt de leeshulp actief.
Tolkie opnieuw initialiseren bij paginawissels
In een spa kun je tolkie.init() opnieuw aanroepen nadat de inhoud van de pagina is gewijzigd.
Zo zorg je ervoor dat de leeshulp altijd werkt met de actuele content, zonder afhankelijk te zijn van URL-detectie.
Functies uitschakelen bij initialisatie
Bij het aanroepen van tolkie.init() kun je ook een configuratie meegeven om specifieke functies uit te schakelen.
Voorbeeld
window.tolkie.init({
disabled: ["dictionary", "tts", "summary"],
});Beschikbare opties
Functie | Beschrijving |
| Uitleg woorden |
| Voorlezen (text-to-speech) |
| Simpele tekst |
| Pagina vertalen |
| Tekstgrootte aanpassen |
| Dyslexie-vriendelijk lettertype |
| Zwevende knop |
Dit is handig als je bepaalde functies alleen op specifieke pagina’s wilt aanbieden, of tijdelijk wilt uitschakelen.
Wanneer gebruik je deze aanpak?
Gebruik deferred initialization en tolkie.init() wanneer:
je een spa gebruikt (React, Vue, Angular, etc.)
content dynamisch wordt geladen of vervangen
je volledige controle wilt over wanneer Tolkie initialiseert
URL-detectie alleen niet voldoende is
Let op: de functie blijft uitgeschakeld, ook als je opnieuw tolkie.init() aanroept. Wil je het uitschakelen ongedaan maken, gebruik dan de volgende code:
window.tolkie.init({
disabled: [],
});
Kort samengevat
Standaard initialiseert Tolkie automatisch.
Voor spa’s kun je zelf controle nemen met
data-tolkie-wait-init.Roep
tolkie.init()aan zodra de pagina-inhoud klaar is.Je kunt functies per initialisatie in- of uitschakelen.