Telepítés és beállítás

Előre konfigurált verziók

• Drupal telepítő
• WordPress telepítő
• Kirby telepítő (közösségi)
• CraftCMS telepítő (közösségi)

Egyéni telepítés

Saját implementáció létrehozásához töltsön le egy helyi másolatot (vagy hivatkozzon egy CDN verzióra) a nyelvi csomagból, a JS min fájlból és a CSS min fájlból, majd hozzon létre egy új „Ed11y” példányt.

ESM/JS modul importáláshoz:

Használja a .umd JavaScript fájlokat régebbi böngészőkhöz és rendszerekhez:

Paraméterek

Egy teljes implementáció csak bejelentkezett szerkesztők számára lesz meghívva (nem szeretné, ha a webhely látogatói látnák az ellenőrzőt!), és felülírhatja az alapértelmezett paraméterek bármelyikét.

Vegye figyelembe, hogy minden paraméterhez alapértelmezett érték tartozik; csak azokat adja meg, amelyeket felül szeretne írni.

Egy erősen testreszabott implementáció így nézhet ki:

A kulcsrakész integrációk gyakran menet közben állítják be ezeket a változókat – például „assertive” módban töltik be az oldalakat, ha nemrég szerkesztették őket, majd néhány perc múlva visszaváltanak „polite” módra.

Témázás

Számos paraméter lehetővé teszi a téma kiválasztását, a színek felülírását és CSS beillesztését.

Csak azokat a paramétereket adja meg, amelyeket felül kell írnia, hogy a jövőbeli frissítések könnyebbek legyenek.

Hasznos JS események

A témafejlesztők ezekhez az eseményekhez kapcsolódhatnak, hogy szükség szerint reagáljanak és módosítsák az oldalt.

Jellemző megjelenési sorrendben…

• ed11yRunCustomTests: akkor váltódik ki, amikor a Results objektum készen áll az egyéni eredmények beillesztésére. Vegye figyelembe, hogy a customTests paramétert az egyéni tesztfüggvények számára kell beállítani (…valószínűleg egyre…), hogy ez az esemény kiváltódjon. Részletek a következő szakaszban.
• ed11yResults: akkor váltódik ki, amikor az összes ellenőrzés befejeződött. Az API integrációk ekkor nyerhetik ki az adatokat az Ed11y.results objektumból.
• ed11yPanelOpened: akkor váltódik ki, ha a panel megnyílik, automatikusan vagy manuálisan.
• ed11yShowHidden: egy data-ed11y-result számot és egy viaJump logikai értéket ad meg. Csak akkor váltódik ki, ha az „ed11yShowHidden” paraméter be van állítva, és az elem egyik szülőeleme megfelel egy szelektornak. Arra szolgál, hogy figyelmeztetéseket jelenítsen meg még nem megnyitott tárolókban, például harmonikaelemeknél, füleknél és körhintáknál. Használati példák a következő szakaszban.
• ed11yPop: megadja a data-ed11y-result azonosítót, valamint hivatkozásokat a result és tip objektumokra. Akkor váltódik ki, amikor megjelenik egy buboréksúgó, lehetővé téve a tippek futásidejű módosítását.
• ed11yShut: megadja a data-ed11y-result azonosítót. Akkor váltódik ki, amikor egy buboréksúgó bezáródik.
• ed11yDismissalUpdate: bővített információt nyújt, amikor a felhasználó elvet vagy visszaállít egy figyelmeztetést. API integrációkhoz használatos. Az eseményobjektum tartalma:
  • dismissPage
  • dismissTest
  • dismissKey
  • dismissAction

Példákat a következő szakaszokban találhat.

Tippek módosítása

Ha csak egy tipp szövegét szeretné módosítani, az ed11yLang.en globális objektumban (a könyvtár meghívása előtt) vagy az Ed11y.M objektumban (a könyvtár meghívása után) lévő elemek közvetlenül felülírhatók. Például a Drupal modulban, ahol a nyelvi csomagot a Drupal.ed11yLang aliashoz rendeltük:

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

Ez igaz a lokalizációs fájl bármely alapértelmezett kulcsára vagy az aktív nyelvspecifikus fordításra.

A Drupal modul egyéni szerkesztési hivatkozásokat is hozzáad a tippekhez az editLinks paraméter segítségével. Figyelje meg a „Page editor” és a „Layout editor” hivatkozásokat:

A paramétert beállító kód egyszerűsített változata:

A Drupal modul ezután az ed11yPop eseményt használja a szerkesztési hivatkozás dinamikus megjelenítéséhez és elrejtéséhez a kontextus alapján, amikor a tippek megjelennek.

Ez az esemény hivatkozásokat biztosít a result és tip objektumokra:

Egyéni tesztek

Ha a customTests paraméter egy szám, az Editoria11y egy „ed11yRunCustomTests” eseményt küld az ellenőrzés során, majd legfeljebb 500 ms-ig várakozik, miközben a megadott számú „ed11yResume” eseményre figyel.

Ez lehetővé teszi tetszőleges számú egyéni teszteket tartalmazó szkript meghívását, amelyek az eredményeiket az eredménytömbbe helyezhetik, mielőtt a tippek megjelennek.

Például, ha létre szeretné hozni ezt a tippet az e-mailekből beillesztett, elfedett URL-ekkel rendelkező hivatkozások megjelöléséhez:

A következőket kell tennie:

1. Adjon hozzá egy figyelőt az ed11yRunCustomTests eseményhez
2. Keresse meg az egyező elemeket
3. Határozza meg a tipp üzenetét
4. Küldje el a „resume” eseményt, hogy az Editoria11y megrajzolhassa a tippet:

Rejtett vagy méretkorlátozott tartalom figyelmeztetéseinek kezelése

Számos interaktív komponens (fülek, csúszkák, harmonikaelemek) elrejti a tartalmat. Az Editoria11y információs panel előző/következő gombokat tartalmaz a problémákhoz való közvetlen ugráshoz. Ha az Editoria11y úgy véli, hogy a probléma buboréksúgója jelenleg láthatatlan, figyelmezteti a felhasználót, hogy valami nincs rendben, majd kiemeli az első látható szülőelemet – például a harmonikát körülvevő div-et.

Ideális esetben a témája láthatóvá teszi ezeket az elemeket, mielőtt az Editoria11y láthatósági ellenőrzése lefutna, így minden varázslatos módon működik a felhasználók számára – a körhintaelemek automatikusan léptetnek, és a harmonikaelemek automatikusan kinyílnak a probléma megjelenítéséhez.

Ehhez, amikor a panel először megnyílik (például a problémákkal rendelkező összes harmonikapanel kinyitása), adjon hozzá egy JS eseményfigyelőt az ed11yPanelOpened eseményhez, majd végezzen querySelectorAll-t a releváns ed11y-element-result elemekre, és hívja meg azt a függvényt, amelyet a témája használ az oldal adott részének megjelenítéséhez.

Íme egy jQuery alapú példa. Amikor a panel megnyílik, letiltja a rögzített menüt (hogy az elemek ne legyenek eltakarva), majd megkeresi a zárt harmonikaelemeken belüli ed11y-element-result elemeket, és szimulál egy kattintást a váltógombjukon:

Ha csak egy adott tippre ugráskor szeretné felfedni a tartalmat a panel „következő” gombján keresztül (például egy zárt fülön vagy a következő körhintadiában), akkor a hiddenHandlers paramétert a megfelelő CSS szelektorokra, a checkVisible paramétert pedig TRUE értékre kell állítania. Ezután adjon hozzá egy eseményfigyelőt az ed11yShowHidden eseményhez. Ez akkor váltódik ki, ha az Editoria11y felismeri, hogy egy tipp egy olyan tárolóban van, amely megfelel a beállításlistában megadott hiddenHandlers szelektorok egyikének. Ez a JS esemény tartalmazza a megnyitandó tipp azonosítóját. Az Editoria11y ezután rövid szünetet tart az esemény kiváltása után, hogy a JavaScript-nek legyen ideje láthatóvá tenni az elemet.

Íme egy példa a Penn State implementációjából. Megkeresi a megadott azonosítónak megfelelő elemet, majd megtalálja annak szülő interaktív komponens tárolóját, és kiváltja az eseményét a váltó aktiválásához:

Utolsó megjegyzés: egyes témák egyszerűen nem kompatibilisek a láthatósági ellenőrzéssel – például a <main> tároló magassága 0px. Az ilyen oldalaknak le kell tiltaniuk az összes láthatósági ellenőrzést a checkVisible false értékre állításával.