Diegimas ir konfigūravimas

Iš anksto sukonfigūruotos versijos

Pasirinktinis diegimas

Norėdami sukurti savo diegimą, atsisiųskite vietinę kopiją (arba nurodykite CDN versiją) kalbos paketo, JS min failo ir CSS min failo, tada sukurkite naują „Ed11y" egzempliorių.

ESM/JS modulių importui:

Naudokite .umd JavaScript failus senesniems naršyklėms ir sistemoms:

Parametrai

Pilnas diegimas bus vykdomas tik prisijungusiems redaktoriams (nenorite, kad Jūsų svetainės lankytojai matytų tikrintuvą!), ir gali nepaisyti bet kurių numatytųjų parametrų.

Atkreipkite dėmesį, kad visiems parametrams pateiktos numatytosios reikšmės – įtraukite tik tai, ką norite nepaisyti.

Labai pritaikytas diegimas gali atrodyti taip:

Integruoti papildiniai dažnai nustato šiuos kintamuosius dinamiškai – pvz., puslapiai įkeliami „assertive" režimu, kai jie buvo neseniai redaguoti, ir perjungiami atgal į „polite" po kelių minučių.

Temavimas

Keli parametrai leidžia pasirinkti temą, perrašyti spalvas ir įterpti CSS.

Nurodykite tik tuos parametrus, kuriuos norite nepaisyti, – tai palengvins būsimus atnaujinimus.

Naudingi JS įvykiai

Temų kūrėjai gali prisijungti prie šių įvykių, kad reaguotų ir modifikuotų puslapį pagal poreikį.

Tipine atsiradimo tvarka…

  • ed11yRunCustomTests: išsiunčiamas, kai objektas Results paruoštas pasirinktiniams rezultatams įterpti. Atkreipkite dėmesį, kad parametras customTests turi būti nustatytas į pasirinktinių testų funkcijų skaičių, kurį vykdysite (…tikriausiai vieną…), kad šis įvykis būtų išsiųstas. Išsamiau – kitame skyriuje.
  • ed11yResults: išsiunčiamas, kai visi patikrinimai baigti. API integracijos dabar gali išgauti duomenis iš objekto Ed11y.results.
  • ed11yPanelOpened: išsiunčiamas, jei skydelis atsidaro automatiškai arba rankiniu būdu.
  • ed11yShowHidden: pateikia data-ed11y-result numerį ir viaJump loginę (boolean) reikšmę. Išsiunčiama tik tada, jei nustatytas parametras „ed11yShowHidden" ir elemento tėvinis elementas atitinka selektorių. Naudojamas įspėjimams atskleisti dar neatidarytose talpyklose, pvz., akordeonuose, skirtukuose ir karuselėse. Naudojimo pavyzdžiai kitame skyriuje.
  • ed11yPop: pateikia data-ed11y-result ID, taip pat nuorodas į objektus result ir tip. Išsiunčiamas, kai pasirodo įrankio patarimas, leidžiantis modifikuoti patarimus vykdymo metu.
  • ed11yShut: pateikia data-ed11y-result ID. Išsiunčiamas, kai užsidaro įrankio patarimas.
  • ed11yDismissalUpdate: pateikia išplėstinę informaciją, kai naudotojas atmeta arba atkuria įspėjimą. Naudojamas API integracijoms. Įvykio objektas apima:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Pavyzdžių rasite tolesniuose skyriuose.

Patarimų modifikavimas

Jei norite tik pakeisti patarimo tekstą, elementus objekte ed11yLang.en (prieš iškviečiant biblioteką) arba Ed11y.M (po iškvietimo) galima tiesiogiai perrašyti. Pvz., Drupal modulyje, kur kalbos paketą priskyrėme Drupal.ed11yLang:

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

Tai taikoma bet kuriam iš numatytųjų lokalizacijos failo raktų ar aktyvaus kalbai skirto vertimo.

Drupal modulis taip pat įtraukia pasirinktines redagavimo nuorodas į patarimus naudodamas parametrą editLinks. Atkreipkite dėmesį į „Puslapio redaktorius" ir „Maketo redaktorius":

Patarimas su įterptomis nuorodomis „Puslapio redaktorius" ir „Maketo redaktorius".

Supaprastinta kodo, nustatančio šį parametrą, versija:

Drupal modulis tada naudoja įvykį ed11yPop, kad dinamiškai rodytų ir slėptų redagavimo nuorodą pagal kontekstą, kai rodomi patarimai.

Šis įvykis pateikia nuorodas į objektus result ir tip:

Pasirinktiniai testai

Jei parametras customTests yra skaičius, Editoria11y išsiųs įvykį „ed11yRunCustomTests" tikrinimo metu ir lauks iki 500 ms, klausydamas to skaičiaus „ed11yResume" įvykių.

Tai galima išnaudoti norint iškviesti tiek scenarijų su pasirinktiniais testais, kiek reikia – jie gali įterpti savo rezultatus į rezultatų masyvą prieš piešiant patarimus.

Pavyzdžiui, jei norėtumėte sukurti šį patarimą, kad pažymėtumėte nuorodas, įklijuotas iš el. laiškų su užšifruotais URL:

Patarimas „URL yra „Safe Link" užkoduotas"

Jūs turėtumėte:

  1. Pridėti klausytoją ed11yRunCustomTests įvykiui
  2. Rasti atitinkančius elementus
  3. Apibrėžti patarimo žinutę
  4. Išsiųsti „resume" įvykį, kad Editoria11y nupiešti patarimą:

Darbas su įspėjimais paslėptame turinyje

Daugelis interaktyvių komponentų (skirtukai, slankikliai, akordeonai) slepia turinį. Editoria11y informacijos skydelyje yra mygtukai „kitas/ankstesnis", skirti tiesiai pereiti prie problemų. Jei Editoria11y mano, kad problemos patarimas šiuo metu nematomas, informuos naudotoją, kad kažkas negerai, ir tada paryškins pirmą matomą protėvį – pvz., div aplink akordeoną.

Idealiu atveju jūsų tema padarys tuos elementus matomais prieš Editoria11y matomumo patikrinimą, kad viskas tiesiog veiktų tarsi magija jūsų naudotojams – karuselės automatiškai perslinks, o akordeonai automatiškai atsidaro, kad parodytų problemą.

Norėdami tai padaryti, kai skydelis pirmą kartą atsidaro (pvz., atskleisti visus akordeonų skydelius su problemomis), pridėkite JS įvykių klausytoją ed11yPanelOpened, tada atlikite querySelectorAll atitinkamų ed11y-element-result elementų ir suaktyvinkite bet kokią funkciją, kurią jūsų tema naudoja tai puslapio daliai atskleisti.

Čia pateikiamas jQuery pagrįstas pavyzdys. Kai skydelis atsidaro, jis išjungia klijuojamą meniu (kad elementai nebūtų uždengti), tada ieško bet kokių ed11y-element-result elementų uždarose akordeonų dalyse ir imituoja paspaudimą jų perjungimo mygtuke:

Norėdami atskleisti turinį tik pereinant prie konkretaus patarimo per skydelio mygtuką „kitas" (pvz., uždarame skirtuke ar kitame karuselės skaidrėje), reikia nustatyti ir hiddenHandlers atitinkamiems CSS selektoriams, ir checkVisible TRUE jūsų parametruose. Tada pridėkite įvykių klausytoją ed11yShowHidden įvykiui. Jis išmetamas, jei Editoria11y atpažįsta, kad patarimas yra talpykloje su vienu iš pateiktų hiddenHandlers selektorių parametrų sąraše. Šis JS įvykis apims patarimo, kurį ketinama atidaryti, ID. Editoria11y tada trumpam pristabdys po šio įvykio išsiuntimo, kad jūsų JS turėtų laiko padaryti elementą matomą.

Čia pateikiamas Penn State diegties pavyzdys. Jis ieško elemento, atitinkančio pateiktą ID, tada randa jo tėvinį interaktyvų komponento konteinerį ir suaktyvina jo įvykį, kad suaktyvintų jo perjungimą:

Paskutinė pastaba: kai kurios temos tiesiog nesuderinamos su matomumo tikrinimu – pvz., konteineris <main> turi 0px aukštį. Tokiose svetainėse reikėtų išjungti visą matomumo tikrinimą nustatant checkVisible į false.