Installer & konfigurer

Forhåndskonfigurerte versjoner

Egendefinert installasjon

For å bygge din egen implementasjon, last ned en lokal kopi (eller bruk en CDN-versjon) av en språkpakke, JS-minfilen og CSS-minfilen, og opprett deretter en ny «Ed11y»-instans.

For ESM/JS-modulimport:

Bruk .umd JavaScript-filene for eldre nettlesere og systemer:

Parametere

En fullstendig implementasjon vil kun kalles for innloggede redaktører (du vil ikke at besøkende skal se verktøyet!), og kan overstyre alle standardparameterne.

Merk at standardverdier er satt for alle parametere; ta kun med det du ønsker å overstyre.

En kraftig tilpasset implementasjon kan se slik ut:

Ferdige integrasjoner setter ofte disse variablene dynamisk – f.eks. ved å laste inn sider i «assertive»-modus når de nylig er redigert, og deretter bytte tilbake til «polite» etter noen minutter.

Temaer

Flere parametere gjør det mulig å velge tema, overstyre farger og injisere CSS.

Ta kun med parameterne du trenger å overstyre for å gjøre fremtidige oppdateringer enklere.

Nyttige JS-hendelser

Temadesignere kan koble seg til disse hendelsene for å reagere på og endre siden etter behov.

I typisk rekkefølge…

  • ed11yRunCustomTests: utsendes når Results-objektet er klart for at egendefinerte resultater kan injiseres. Merk at parameteren customTests må settes til antallet egendefinerte testfunksjoner du skal kjøre (…sannsynligvis én…) for at denne hendelsen skal utsendes. Detaljer i neste avsnitt.
  • ed11yResults: utsendes når alle kontroller er ferdige. API-integrasjoner kan nå hente data fra Ed11y.results-objektet.
  • ed11yPanelOpened: utsendes hvis panelet åpnes, automatisk eller manuelt.
  • ed11yShowHidden: gir et data-ed11y-result-nummer og en viaJump-boolsk verdi. Utsendes kun hvis parameteren «ed11yShowHidden» er satt og en forelder til elementet samsvarer med en selektor. Brukes til å vise varsler i beholdere som ikke er åpne ennå, f.eks. trekkspill, faner og karuseller. Brukseksempler i neste avsnitt.
  • ed11yPop: gir data-ed11y-result-ID samt referanser til result- og tip-objektene. Utsendes når et verktøytips vises, slik at du kan endre tipsene under kjøring.
  • ed11yShut: gir data-ed11y-result-ID. Utsendes når et verktøytips lukkes.
  • ed11yDismissalUpdate: gir utvidet informasjon når en bruker avviser eller gjenoppretter et varsel. Brukes til API-integrasjoner. Hendelsesobjektet inneholder:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Eksempler finnes i de følgende avsnittene.

Endre tips

Hvis alt du vil gjøre er å endre teksten i et tips, kan elementer i det globale ed11yLang.en-objektet (før biblioteket kalles) eller Ed11y.M-objektet (etter at biblioteket er kalt) overstyres direkte. F.eks. i Drupal-modulen der vi ga språkpakken aliaset Drupal.ed11yLang:

Drupal.ed11yLang.lang.testNames.title = “Please write shorter headings.”

Dette gjelder for alle standardnøklene i lokaliseringsfilen eller den aktive språkspesifikke oversettelsen.

Drupal-modulen legger også til egendefinerte redigeringslenker i tipsene ved hjelp av parameteren editLinks. Legg merke til «Page editor» og «Layout editor:»

Verktøytips med innsatte lenker for «Page editor» og «Layout editor».

En forenklet versjon av koden som setter den parameteren:

Drupal-modulen bruker deretter hendelsen ed11yPop til dynamisk å vise og skjule redigeringslenken basert på kontekst når tips vises.

Denne hendelsen gir referanser til result- og tip-objektene:

Egendefinerte tester

Hvis parameteren customTests er et tall, vil Editoria11y sende ut en «ed11yRunCustomTests»-hendelse under kontroll, og deretter sette på pause i opptil 500 ms mens den lytter etter det antallet «ed11yResume»-hendelser.

Dette kan utnyttes til å kalle så mange skript med egendefinerte tester du vil, som kan skyve resultatene sine inn i resultatmatrisen før tipsene tegnes.

For eksempel, hvis du ønsket å opprette dette tipset for å flagge lenker som er limt inn fra e-poster med skjulte URL-er:

Tips med teksten «URL is Safe Link Encoded»

Du ville:

  1. Legge til en lytter for hendelsen ed11yRunCustomTests
  2. Finne samsvarende elementer
  3. Definere tipsmeldingen
  4. Sende ut «resume»-hendelsen for å la Editoria11y tegne tipset:

Håndtere varsler på skjult eller størrelsesbegrenset innhold

Mange interaktive komponenter (faner, glidebrytere, trekkspill) skjuler innhold. Editoria11y-infopanelet inkluderer neste/forrige-knapper for å hoppe direkte til problemer. Hvis Editoria11y mener at problemets verktøytips er usynlig for øyeblikket, vil det varsle brukeren om at noe er galt, og deretter markere den første synlige forfederen – f.eks. diven rundt et trekkspill.

Ideelt sett vil temaet ditt gjøre disse elementene synlige før Editoria11y kjører sin synlighetskontroll, slik at alt bare fungerer magisk for brukerne dine — karuseller avanserer automatisk og trekkspill åpnes automatisk for å vise problemet.

For å gjøre dette når panelet først åpnes (f.eks. for å brette ut alle trekkspillpaneler med problemer) legger du til en JS-hendelseslytter for ed11yPanelOpened, gjør deretter en querySelectorAll etter relevante ed11y-element-result-elementer, og utløser deretter hvilken funksjon temaet ditt bruker for å vise den delen av siden.

Her er et jQuery-basert eksempel. Når panelet åpnes, deaktiverer det en sticky-meny (slik at elementer ikke dekkes til), og leter deretter etter eventuelle ed11y-element-result-elementer inne i lukkede trekkspillelementer og simulerer et klikk på veksleknappen deres:

For å vise innhold kun ved hopp til et spesifikt tips via panelets «neste»-knapp (f.eks. i en lukket fane eller neste karuselside), må du sette både hiddenHandlers til relevante CSS-selektorer og checkVisible til TRUE i parameterne dine. Legg deretter til en hendelseslytter for hendelsen ed11yShowHidden. Denne utløses hvis Editoria11y gjenkjenner at et tips er inne i en beholder med én av de opplistede hiddenHandlers-selektorene i alternativlisten. Denne JS-hendelsen vil inneholde ID-en til tipset det er i ferd med å åpne. Editoria11y vil deretter kort tid etter å ha sendt ut denne hendelsen sette på pause, for å gi JavaScript-en din tid til å gjøre elementet synlig.

Her er et eksempel fra en Penn State-implementasjon. Den ser etter elementet som samsvarer med den oppgitte ID-en, finner deretter sin overordnede interaktive komponentbeholder og utløser hendelsen for å aktivere vekslingen:

Siste merknad: noen temaer er rett og slett ikke kompatible med synlighetskontroll — f.eks. der <main>-beholderen har en høyde på 0px. Slike nettsteder bør deaktivere all synlighetskontroll ved å sette checkVisible til false.