Inštalácia & konfigurácia

Predkonfigurované verzie

Vlastná inštalácia

Ak chcete vytvoriť vlastnú implementáciu, stiahnite si lokálnu kópiu (alebo použite verziu z CDN) jazykového balíka, minifikovaného JS súboru a minifikovaného CSS súboru a potom vytvorte novú inštanciu „Ed11y".

Pre importy ESM/JS modulov:

Pre staršie prehliadače a systémy použite súbory .umd JavaScript:

Parametre

Kompletná implementácia sa bude volať len pre prihlásených editorov (nechcete, aby váš nástroj na kontrolu videli návštevníci webu!) a môže prekonať akýkoľvek z predvolených parametrov.

Majte na pamäti, že predvolené hodnoty sú poskytované pre všetky parametre; uvádzajte len tie, ktoré chcete zmeniť.

Silne prispôsobená implementácia môže vyzerať takto:

Implementácie na kľúč často nastavujú tieto premenné za behu — napr. načítavajú stránky v „assertive" režime, keď boli nedávno upravené, a po niekoľkých minútach sa prepínajú späť na „polite".

Témy

Niekoľko parametrov umožňuje vybrať tému, prepísať farby a vkladať CSS.

Zahrňte len parametre, ktoré potrebujete zmeniť, aby boli budúce aktualizácie jednoduchšie.

Užitočné JS udalosti

Tvorcovia tém môžu tieto udalosti zachytávať a reagovať na ne, prípadne upravovať stránku podľa potreby.

V typickom poradí výskytu…

  • ed11yRunCustomTests: odoslaná, keď je objekt Results pripravený na vloženie vlastných výsledkov. Majte na pamäti, že parameter customTests musí byť nastavený na počet vlastných testovacích funkcií, ktoré budete spúšťať (…pravdepodobne jedna…), aby sa táto udalosť odoslala. Podrobnosti v nasledujúcej časti.
  • ed11yResults: odoslaná, keď sú všetky kontroly dokončené. Integrácie API môžu teraz extrahovať dáta z objektu Ed11y.results.
  • ed11yPanelOpened: odoslaná, keď sa panel otvorí, automaticky alebo manuálne.
  • ed11yShowHidden: poskytuje číslo data-ed11y-result a boolean viaJump. Odoslaná iba vtedy, ak je nastavený parameter „ed11yShowHidden" a rodičovský prvok zodpovedá selektoru. Slúži na zobrazenie upozornení v doposiaľ neotvorených kontajneroch, napr. akordeónoch, kartách a karuseloch. Príklady použitia v nasledujúcej časti.
  • ed11yPop: poskytuje ID data-ed11y-result a referencie na objekty result a tip. Odoslaná pri zobrazení tooltipu, čo umožňuje upravovať tipy za behu.
  • ed11yShut: poskytuje ID data-ed11y-result. Odoslaná pri zatvorení tooltipu.
  • ed11yDismissalUpdate: poskytuje rozšírené informácie, keď používateľ odmietne alebo obnoví upozornenie. Používa sa pre API integrácie. Objekt udalosti obsahuje:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Príklady nájdete v nasledujúcich častiach.

Úprava tipov

Ak chcete iba upraviť text tipu, položky v globálnom objekte ed11yLang.en (pred volaním knižnice) alebo Ed11y.M (po volaní knižnice) možno priamo prepísať. Napr. v module Drupal, kde sme alias jazykového balíka nastavili na Drupal.ed11yLang:

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

Platí to pre ľubovoľné z predvolených kľúčov v lokalizačnom súbore alebo aktívneho jazykovo-špecifického prekladu.

Modul Drupal tiež pridáva vlastné editačné odkazy do tipov pomocou parametra editLinks. Všimnite si „Page editor" a „Layout editor:"

Tooltip s vloženými odkazmi „Page editor" a „Layout editor".

Zjednodušená verzia kódu, ktorá nastavuje tento parameter:

Modul Drupal potom používa udalosť ed11yPop na dynamické zobrazovanie a skrývanie odkazu na úpravu na základe kontextu pri zobrazení tipov.

Táto udalosť poskytuje referencie na objekty result a tip:

Vlastné testy

Ak je parameter customTests číslom, Editoria11y odošle udalosť „ed11yRunCustomTests" počas kontroly a potom bude počúvať až 500 ms na príslušný počet udalostí „ed11yResume".

To možno využiť na volanie ľubovoľného počtu skriptov obsahujúcich vlastné testy, ktoré môžu vkladať výsledky do poľa výsledkov pred vykreslením tipov.

Napríklad, ak by ste chceli vytvoriť tento tip na označenie odkazov vložených z e-mailov s obfuskovanými URL adresami:

Tip s textom „URL is Safe Link Encoded"

Postup:

  1. Pridajte poslucháča pre udalosť ed11yRunCustomTests
  2. Nájdite zodpovedajúce prvky
  3. Definujte správu tipu
  4. Odošlite udalosť „resume", aby Editoria11y vykreslil tip:

Práca s upozorneniami na skrytom alebo obmedzenom obsahu

Mnohé interaktívne komponenty (karty, posuvníky, akordeóny) skrývajú obsah. Informačný panel Editoria11y obsahuje tlačidlá ďalší/predchádzajúci na priamy preskok na problémy. Ak si Editoria11y myslí, že tooltip daného problému je momentálne neviditeľný, upozorní používateľa, že niečo nie je v poriadku, a zvýrazní prvého viditeľného predka — napr. div okolo akordeóna.

Ideálne je, keď vaša téma tieto prvky zobrazí pred tým, ako Editoria11y spustí kontrolu viditeľnosti, aby všetko fungovalo ako kúzlo pre vašich používateľov — karusely sa automaticky posunú a akordeóny sa automaticky otvoria na zobrazenie problému.

Ak to chcete urobiť pri prvom otvorení panela (napr. rozvinutie všetkých panelov akordeóna s problémami), pridajte poslucháča JS udalosti pre ed11yPanelOpened, potom vykonajte querySelectorAll pre príslušné prvky ed11y-element-result a spustite funkciu, ktorú vaša téma používa na zobrazenie príslušnej časti stránky.

Tu je príklad založený na jQuery. Keď sa panel otvorí, deaktivuje fixné menu (aby prvky neboli zakryté), potom hľadá ľubovoľné prvky ed11y-element-result vnútri zatvorených položiek akordeóna a simuluje kliknutie na ich prepínacie tlačidlo:

Ak chcete zobraziť obsah iba pri skoku na konkrétny tip cez tlačidlo „ďalší" v paneli (napr. v zatvorenom paneli kariet alebo na ďalšom slide karuselu), musíte nastaviť hiddenHandlers na príslušné CSS selektory a checkVisible na TRUE v parametroch. Potom pridajte poslucháča udalostí pre udalosť ed11yShowHidden. Táto udalosť je vyhodená, ak Editoria11y rozozná, že tip je vnútri kontajnera s jedným z uvedených selektorov hiddenHandlers v zozname možností. Táto JS udalosť bude obsahovať ID tipu, ktorý sa chystá otvoriť. Editoria11y potom krátko pozastaví po odoslaní tejto udalosti, aby dal vášmu JS čas na zobrazenie prvku.

Tu je príklad z implementácie Penn State. Hľadá prvok zodpovedajúci poskytnutému ID, potom nájde jeho rodičovský kontajner interaktívneho komponentu a spustí jeho udalosť na aktiváciu prepínania:

Posledná poznámka: niektoré témy nie sú kompatibilné s kontrolou viditeľnosti — napr. kontajner <main> má výšku 0px. Takéto weby by mali zakázať všetku kontrolu viditeľnosti nastavením checkVisible na false.