Namestitev & konfiguracija

Vnaprej konfigurirane različice

Namestitev po meri

Za lastno implementacijo prenesite lokalno kopijo (ali navedite CDN različico).

Za uvoz modulov ESM/JS:

Za starejše brskalnike in sisteme uporabite datoteke .umd JavaScript:

Parametri

Popolna implementacija naj bo naložena samo za prijavljene urednike (ne želite, da vaši obiskovalci vidijo preverjevalnika!), in lahko preglasi katerega koli od privzetih parametrov.

Upoštevajte, da so privzete vrednosti podane za vse parametre; vključite le tiste, ki jih želite preglasiti.

Primer obsežno prilagojene implementacije:

Ključne integracije pogosto sproti nastavljajo te spremenljivke — npr. nalaganje strani v »assertive« načinu, ko so bile nedavno urejene, in vrnitev nazaj v »polite« po nekaj minutah.

Oblikovanje

Nekateri parametri omogočajo izbiro teme, preglasitev barv in vbrizgavanje CSS.

Vključite le parametre, ki jih morate preglasiti, da bodo prihodnje posodobitve lažje.

Koristni dogodki JS

Oblikovalci tem lahko te dogodke priključijo za odzivanje in prilagajanje strani po potrebi.

V tipičnem vrstnem redu pojavljanja…

  • ed11yRunCustomTests: razposlano, ko je objekt Results pripravljen za vbrizgavanje custom rezultatov. Upoštevajte, da mora biti parameter customTests nastavljen na število funkcij custom testov, ki jih boste izvajali (…verjetno eno…), da bo ta dogodek sploh razposlan.
  • ed11yResults: razposlano, ko so vsa preverjanja zaključena. Integracije API-ja lahko zdaj iz objekta Ed11y.results pridobijo podatke.
  • ed11yPanelOpened: razposlano, če se plošča odpre, samodejno ali ročno.
  • ed11yShowHidden: zagotavlja število data-ed11y-result in logično vrednost viaJump. Razposlano samo, če je parameter »ed11yShowHidden« nastavljen in je nadrejeni element elementa v skladu z izbirateljem.
  • ed11yPop: zagotavlja ID data-ed11y-result ter reference na objekte result in tip. Razposlano, ko se prikaže opis, kar vam omogoča prilagajanje nasvetov med izvajanjem.
  • ed11yShut: zagotavlja ID data-ed11y-result. Razposlano, ko se opis zapre.
  • ed11yDismissalUpdate: zagotavlja razširjene informacije, ko uporabnik zavrne ali obnovi opozorilo. Uporablja se za API integracije. Objekt dogodka vsebuje:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Primeri so v naslednjih razdelkih.

Prilagajanje nasvetov

Če želite le spremeniti besedilo nasveta, lahko elemente v globalnem objektu ed11yLang.en (pred klicem knjižnice) ali Ed11y.M (po klicu knjižnice) neposredno preglasite. Npr. v modulu Drupal, kjer smo paket prevoda vzdevkali kot Drupal.ed11yLang:

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

To velja za katerega koli od privzetih ključev v paketu lokalizacije.

Modul Drupal prav tako doda lastne povezave za urejanje v nasvete z uporabo parametra editLinks. Upoštevajte »Urejevalnik strani« in »Urejevalnik postavitve«:

Opis z vstavljenima povezavama »Urejevalnik strani« in »Urejevalnik postavitve«.

Poenostavljena različica kode, ki nastavi ta parameter:

Modul Drupal nato uporablja dogodek ed11yPop za dinamično prikazovanje in skrivanje povezave za urejanje glede na kontekst, ko se prikažejo nasveti.

Ta dogodek zagotavlja reference na objekte result in tip:

Testi po meri

Če je parameter customTests število, bo Editoria11y med preverjanjem razposlal dogodek »ed11yRunCustomTests« in nato za do 500 ms čakal na to število dogodkov »ed11yResume«.

To je mogoče izkoristiti za klicanje toliko skriptov s custom testi, kot je potrebno, ki lahko potisnejo svoje rezultate v niz rezultatov pred risanjem nasvetov.

Na primer, če bi radi ustvarili ta nasvet za označevanje povezav z zakritimi URL-ji iz e-pošte:

Nasvet z besedilom »URL je zakodiran z varno povezavo«

Storili bi:

  1. Dodajte poslušalnik za dogodek ed11yRunCustomTests
  2. Poiščite ujemajoče elemente
  3. Določite sporočilo nasveta
  4. Razpošljite dogodek »resume«, da Editoria11y nariše nasvet:

Ravnanje z opozorili na skriti ali z omejitvijo velikosti vsebini

Mnoge interaktivne komponente (zavihki, drsniki, akordeoni) skrivajo vsebino. Informacijska plošča Editoria11y vključuje gumbe naprej/nazaj za skok neposredno na težave. Če Editoria11y meni, da je opis na problemu trenutno neviden, bo opozoril, da gre kaj narobe, in nato počakal, da uporabnik ročno odkrije vsebino.

V idealnem primeru bo vaša tema te elemente naredila vidne, preden se izvede Editoria11yjevo preverjanje vidnosti, tako da bo vse »preprosto delovalo« kot čarovnija za vaše uporabnike — vrtiljaki se samodejno napredijo in akordeoni se samodejno odprejo za prikaz težave.

Da bi to naredili, ko se plošča prvič odpre (npr. razpiranje vseh panelov akordeonov s težavami), dodajte poslušalnik za dogodek JS ed11yPanelOpened, nato poiščite s querySelectorAll ustrezne elemente ed11y-element-result in nato sprožite ustrezne operacije.

Tukaj je primer, ki temelji na jQuery. Ko se plošča odpre, onemogoči lepljivi meni (da elementi niso pokriti), nato poišče vse elemente ed11y-element-result znotraj zaprtih elementov akordeonov in simulira klik na njihov gumb za preklop:

Za razkritje vsebine samo pri skoku na določen nasvet prek gumba »naprej« plošče (npr. v zaprtem zavihku ali naslednjem diapozitivu vrtiljaka) boste morali nastaviti tako hiddenHandlers na ustrezne CSS izbiratelje kot checkVisible na true.

Tukaj je primer iz implementacije Penn State. Poišče element, ki ustreza podanemu ID-ju, nato poišče njegovo nadrejeno interaktivno kontejnersko komponento in sproži njen dogodek za aktivacijo preklopa:

Zadnja opomba: nekatere teme preprosto niso združljive s preverjanjem vidnosti — npr. kontejner <main> ima višino 0px. Takšna mesta morajo onemogočiti vse preverjanje vidnosti z nastavitvijo checkVisible na false.