Instalace a konfigurace

Předkonfigurované verze

Vlastní instalace

Chcete-li vytvořit vlastní implementaci, stáhněte si místní kopii (nebo použijte verzi z CDN) jazykového balíčku, minimalizovaného souboru JS a minimalizovaného souboru CSS a poté vytvořte novou instanci „Ed11y".

Pro importy ESM/JS modulů:

Pro starší prohlížeče a systémy použijte soubory .umd JavaScript:

Parametry

Kompletní implementace by měla být volána pouze pro přihlášené editory (návštěvníci webu by váš kontrolní nástroj vidět neměli!), a může přepsat libovolné z výchozích parametrů.

Všechny parametry mají výchozí hodnoty — uvádějte pouze ty, které chcete přepsat.

Komplikovaná vlastní implementace by mohla vypadat takto:

Předpřipravené integrace tyto proměnné často nastavují dynamicky — například načítají stránky v „asertivním" režimu, pokud byly nedávno upraveny, a po několika minutách přepínají zpět na „zdvořilý".

Přizpůsobení motivu

Několik parametrů umožňuje vybrat motiv, přepsat barvy a vložit CSS.

Zadávejte pouze parametry, které chcete přepsat — usnadní to budoucí aktualizace.

Užitečné JS události

Vývojáři motivů mohou tyto události zachytit a podle potřeby reagovat a upravovat stránku.

V typickém pořadí výskytu…

  • ed11yRunCustomTests: odesláno, když je objekt Results připraven k vložení vlastních výsledků. Upozorňujeme, že parametr customTests musí být nastaven na počet vlastních testovacích funkcí, které budete spouštět (…pravděpodobně jedna…), aby se tato událost odeslala. Podrobnosti v následující části.
  • ed11yResults: odesláno po dokončení všech kontrol. API integrace nyní mohou získávat data z objektu Ed11y.results.
  • ed11yPanelOpened: odesláno, pokud se panel otevře, automaticky nebo ručně.
  • ed11yShowHidden: poskytuje číslo data-ed11y-result a boolean viaJump. Odesláno pouze tehdy, je-li nastaven parametr „ed11yShowHidden" a rodič prvku odpovídá selektoru. Slouží k odkrytí upozornění v dosud neotevřených kontejnerech, např. v akordeonech, záložkách a karuselech. Příklady použití v další části.
  • ed11yPop: poskytuje ID data-ed11y-result a také reference na objekty result a tip. Odesláno při zobrazení tooltipu, což umožňuje úpravu tipů za běhu.
  • ed11yShut: poskytuje ID data-ed11y-result. Odesláno při zavření tooltipu.
  • ed11yDismissalUpdate: poskytuje rozšířené informace, když uživatel skryje nebo obnoví upozornění. Používá se pro API integrace. Objekt události obsahuje:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Příklady naleznete v následujících sekcích.

Úprava tipů

Pokud chcete pouze upravit text tipu, lze přímo přepsat položky v globálním objektu ed11yLang.en (před voláním knihovny) nebo Ed11y.M (po volání knihovny). Příklad pro modul Drupal, kde je jazykový balíček přiřazen jako Drupal.ed11yLang:

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

Totéž platí pro libovolný výchozí klíč v lokalizačním souboru nebo v aktivním jazykovém překladu.

Modul Drupal také přidává vlastní editační odkazy do tipů pomocí parametru editLinks. Povšimněte si odkazů „Editor stránky" a „Editor rozvržení":

Tooltip s vloženými odkazy „Editor stránky" a „Editor rozvržení".

Zjednodušená verze kódu, který nastavuje tento parametr:

Modul Drupal pak používá událost ed11yPop k dynamickému zobrazení a skrytí editačního odkazu na základě kontextu při zobrazení tipů.

Tato událost poskytuje reference na objekty result a tip:

Vlastní testy

Pokud je parametr customTests číslem, Editoria11y odešle událost „ed11yRunCustomTests" při kontrole, a poté pozastaví na dobu až 500 ms, dokud neobdrží daný počet událostí „ed11yResume".

Tímto způsobem lze volat libovolný počet skriptů s vlastními testy, které mohou vložit výsledky do pole výsledků ještě před vykreslením tipů.

Například, pokud byste chtěli vytvořit tento tip pro označení odkazů vložených z e-mailů s obfuskovanými URL adresami:

Tip s textem „URL is Safe Link Encoded"

Postup:

  1. Přidejte naslouchač pro událost ed11yRunCustomTests
  2. Najděte odpovídající prvky
  3. Definujte text tipu
  4. Odešlete událost „resume", aby Editoria11y vykreslil tip:

Upozornění na skrytém nebo výškově omezeném obsahu

Mnoho interaktivních komponent (záložky, posuvníky, akordeony) skrývá obsah. Informační panel Editoria11y obsahuje tlačítka pro přechod na předchozí/další problém. Pokud Editoria11y usoudí, že tooltip daného problému je momentálně neviditelný, upozorní uživatele, že něco nefunguje správně, a pak zvýrazní první viditelného předka — například div obklopující akordeón.

Ideálně váš motiv tyto prvky zobrazí ještě před spuštěním kontroly viditelnosti v Editoria11y, takže vše funguje pro uživatele jako kouzlo — karusely se automaticky posunou a akordeony se automaticky otevřou, aby problém zobrazily.

Chcete-li to provést při prvním otevření panelu (např. rozbalení všech panelů akordeonu s problémy), přidejte naslouchač JS události pro ed11yPanelOpened, poté proveďte querySelectorAll pro příslušné prvky ed11y-element-result a spusťte funkci, kterou váš motiv používá k zobrazení dané části stránky.

Zde je příklad s jQuery. Při otevření panelu deaktivuje přichycené menu (aby prvky nebyly zakryty), poté vyhledá všechny prvky ed11y-element-result uvnitř zavřených položek akordeonu a simuluje kliknutí na jejich přepínací tlačítko:

Chcete-li zobrazit obsah pouze při přechodu na konkrétní tip pomocí tlačítka „Další" v panelu (např. v zavřené záložce nebo dalším snímku karuselu), musíte nastavit hiddenHandlers na příslušné CSS selektory a checkVisible na TRUE v parametrech. Poté přidejte naslouchač události pro ed11yShowHidden. Tato událost je vyvolána, pokud Editoria11y rozpozná, že tip je uvnitř kontejneru s jedním z uvedených selektorů hiddenHandlers v seznamu možností. Tato JS událost bude obsahovat ID tipu, který se chystá otevřít. Editoria11y pak krátce pozastaví činnost po odeslání této události, aby měl váš JS čas zpřístupnit prvek.

Zde je příklad z implementace Penn State. Vyhledá prvek odpovídající zadanému ID, poté najde jeho nadřazenou interaktivní komponentu a vyvolá její událost pro aktivaci přepínání:

Poslední poznámka: některé motivy nejsou kompatibilní s kontrolou viditelnosti — například kontejner <main> má výšku 0px. Na takových webech je třeba zakázat veškerou kontrolu viditelnosti nastavením checkVisible na false.