Installation & konfiguration

Forkonfigurerede versioner

Brugerdefineret installation

For at bygge din egen implementering skal du downloade en lokal kopi (eller referere til en CDN-version) af en sprogpakke, JS min-filen og CSS min-filen, og derefter oprette en ny "Ed11y"-instans.

For ESM/JS-modulimport:

Brug .umd JavaScript-filerne til ældre browsere og systemer:

Parametre

En komplet implementering vil kun blive kaldt for indloggede redaktører (du vil ikke have, at dine besøgende ser din tjekker!), og kan tilsidesætte alle standardparametrene.

Bemærk, at der er angivet standardværdier for alle parametre; medtag kun dem, du vil tilsidesætte.

En stærkt tilpasset implementering kunne se sådan ud:

Nøglefærdige integrationer sætter ofte disse variable dynamisk -- f.eks. indlæser sider i "assertive"-tilstand, når de for nylig er blevet redigeret, og skifter tilbage til "polite" efter nogle minutter.

Temaer

Flere parametre gør det muligt at vælge et tema, tilsidesætte farver og injicere CSS.

Medtag kun de parametre, du skal tilsidesætte, for at gøre fremtidige opdateringer nemmere.

Nyttige JS-hændelser

Temaudviklere kan lytte på disse hændelser for at reagere og ændre siden efter behov.

I typisk rækkefølge...

  • ed11yRunCustomTests: udsendes, når Results-objektet er klar til at modtage brugerdefinerede resultater. Bemærk, at parameteren customTests skal være sat til antallet af brugerdefinerede testfunktioner, du vil køre (...sandsynligvis en...), for at denne hændelse udsendes. Detaljer i næste afsnit.
  • ed11yResults: udsendes, når alle tjek er færdige. API-integrationer kan nu hente data fra Ed11y.results-objektet.
  • ed11yPanelOpened: udsendes, hvis panelet åbnes, automatisk eller manuelt.
  • ed11yShowHidden: giver et data-ed11y-result-nummer og en viaJump-boolean. Udsendes kun, hvis parameteren "ed11yShowHidden" er sat, og et overordnet element matcher en selektor. Bruges til at vise advarsler i endnu ikke åbne containere, f.eks. harmonikaelementer, faner og karruseller. Brugseksempler i næste afsnit.
  • ed11yPop: giver data-ed11y-result-ID samt referencer til result- og tip-objekterne. Udsendes, når et tooltip vises, så du kan ændre tipsene under kørsel.
  • ed11yShut: giver data-ed11y-result-ID. Udsendes, når et tooltip lukkes.
  • ed11yDismissalUpdate: giver udvidede oplysninger, når en bruger afviser eller gendanner en advarsel. Bruges til API-integrationer. Hændelsesobjektet indeholder:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Eksempler kan findes i de følgende afsnit.

Tilpasning af tips

Hvis du kun vil ændre teksten i et tip, kan elementer i det globale ed11yLang.en-objekt (før biblioteket kaldes) eller Ed11y.M (efter biblioteket er kaldt) tilsidesættes direkte. F.eks. i Drupal-modulet, hvor vi har oprettet et alias for sprogpakken til Drupal.ed11yLang:

Drupal.ed11yLang.lang.testNames.title = "Please write shorter headings."

Dette gælder for alle standardnøgler i lokaliseringsfilen eller den aktive sprogspecifikke oversættelse.

Drupal-modulet tilføjer også brugerdefinerede redigeringslinks til tipsene ved hjælp af parameteren editLinks. Bemærk "Page editor" og "Layout editor:"

Tooltip med indsatte links til "Page editor" og "Layout editor".

En forenklet version af koden, der sætter denne parameter:

Drupal-modulet bruger derefter ed11yPop-hændelse til dynamisk at vise og skjule redigeringslinket baseret på kontekst, når tips vises.

Denne hændelse giver referencer til result- og tip-objekterne:

Brugerdefinerede tests

Hvis parameteren customTests er et tal, vil Editoria11y udsende en "ed11yRunCustomTests"-hændelse under tjekket og derefter vente i op til 500 ms, mens den lytter efter det angivne antal "ed11yResume"-hændelser.

Dette kan bruges til at kalde så mange scripts med brugerdefinerede tests, som du ønsker, og de kan tilføje deres resultater til resultatarrayet, før tipsene tegnes.

Hvis du f.eks. ville oprette dette tip for at markere links, der er indsat fra e-mails med maskerede URL'er:

Tip med teksten "URL is Safe Link Encoded"

Du skal:

  1. Tilføje en lytter til ed11yRunCustomTests-hændelse
  2. Finde matchende elementer
  3. Definere tip-beskeden
  4. Udsende "resume"-hændelse for at lade Editoria11y tegne tippet:

Håndtering af advarsler på skjult eller størrelsesbegrænset indhold

Mange interaktive komponenter (faner, slidere, harmonikaelementer) skjuler indhold. Editoria11y-infopanelet indeholder forrige/næste-knapper til at springe direkte til problemer. Hvis Editoria11y mener, at problemets tooltip i øjeblikket er usynligt, vil det advare brugeren om, at noget er galt, og derefter fremhæve det første synlige overordnede element -- f.eks. div'en omkring et harmonikaelement.

Ideelt set vil dit tema gøre disse elementer synlige, før Editoria11ys synlighedstjek kører, så alt bare virker som magi for dine brugere -- karruseller spoler automatisk frem, og harmonikaelementer åbner sig automatisk for at vise problemet.

For at gøre dette, når panelet først åbnes (f.eks. at folde alle harmonikapaneler med problemer ud), skal du tilføje en JS-hændelseslytter til ed11yPanelOpened, derefter køre en querySelectorAll for relevante ed11y-element-result-elementer og derefter udløse den funktion, dit tema bruger til at afsløre den del af siden.

Her er et jQuery-baseret eksempel. Når panelet åbnes, deaktiverer det en sticky menu (så elementer ikke dækkes), og søger derefter efter ed11y-element-result-elementer inde i lukkede harmonikaelementer og simulerer et klik på deres skifteknap:

For kun at afsløre indhold, når man springer til et specifikt tip via panelets "næste"-knap (f.eks. i en lukket fane eller næste karruselslide), skal du sætte både hiddenHandlers til relevante CSS-selektorer og checkVisible til TRUE i dine parametre. Tilføj derefter en hændelseslytter til ed11yShowHidden-hændelse. Denne udsendes, hvis Editoria11y genkender, at et tip er inde i en container med en af de angivne hiddenHandlers-selektorer i indstillingslisten. Denne JS-hændelse vil indeholde ID'et på det tip, der er ved at blive åbnet. Editoria11y vil derefter holde en kort pause efter udsendelsen af hændelse for at give din JavaScript tid til at gøre elementet synligt.

Her er et eksempel fra en Penn State-implementering. Det finder elementet, der matcher det angivne ID, finder derefter dets overordnede interaktive komponentcontainer og udløser dens hændelse for at aktivere dens skiftefunktion:

Sidste bemærkning: nogle temaer er simpelthen ikke kompatible med synlighedstjek -- f.eks. har <main>-containeren en højde på 0px. Sådanne sider bør deaktivere al synlighedskontrol ved at sætte checkVisible til false.