Инсталиране & конфигуриране

Предварително конфигурирани версии

• Инсталатор за Drupal
• Инсталатор за WordPress
• Инсталатор за Kirby (contrib)
• Инсталатор за CraftCMS (contrib)

Персонализирана инсталация

За да създадете своя собствена реализация, изтеглете локално копие (или използвайте CDN версия) на езиков пакет, минифицирания JS файл и минифицирания CSS файл, след което създайте нов екземпляр на „Ed11y".

За ESM/JS модулни импорти:

Използвайте .umd JavaScript файловете за по-стари браузъри и системи:

Параметри

Пълната реализация трябва да се извиква само за влезли редактори (не искате посетителите на сайта да виждат проверката!), и може да замени всеки от параметрите по подразбиране.

Обърнете внимание, че за всички параметри са предоставени стойности по подразбиране; включвайте само тези, които искате да замените.

Реализация с разширена персонализация може да изглежда така:

Готовите интеграции често задават тези променливи динамично — напр. зареждат страниците в режим „assertive", когато са редактирани наскоро, и превключват обратно в „polite" след няколко минути.

Теми

Няколко параметъра позволяват избор на тема, замяна на цветове и инжектиране на CSS.

Включвайте само параметрите, които трябва да замените, за да улесните бъдещите актуализации.

Полезни JS събития

Разработчиците на теми могат да се абонират за тези събития, за да реагират и да модифицират страницата при необходимост.

В типичен ред на появяване…

• ed11yRunCustomTests: изпраща се, когато обектът Results е готов за инжектиране на потребителски резултати. Обърнете внимание, че параметърът customTests трябва да бъде зададен на броя на персонализираните тестови функции, които ще изпълнявате (…вероятно една…), за да се изпрати това събитие. Подробности в следващия раздел.
• ed11yResults: изпраща се, когато всички проверки приключат. API интеграциите вече могат да извличат данни от обекта Ed11y.results.
• ed11yPanelOpened: изпраща се, ако панелът се отвори — автоматично или ръчно.
• ed11yShowHidden: предоставя число data-ed11y-result и булева стойност viaJump. Изпраща се само ако параметърът „ed11yShowHidden" е зададен и родителят на елемента отговаря на селектор. Използва се за разкриване на сигнали в все още затворени контейнери, напр. акордеони, табове и въртележки. Примери за употреба в следващия раздел.
• ed11yPop: предоставя ID data-ed11y-result, както и референции към обектите result и tip. Изпраща се при появата на подсказка, позволявайки модифицирането им по време на изпълнение.
• ed11yShut: предоставя ID data-ed11y-result. Изпраща се при затваряне на подсказка.
• ed11yDismissalUpdate: предоставя разширена информация, когато потребител отхвърли или възстанови предупреждение. Използва се за API интеграции. Обектът на събитието съдържа:
  • dismissPage
  • dismissTest
  • dismissKey
  • dismissAction

Примери можете да намерите в следващите раздели.

Модифициране на подсказки

За промяна само на текста на подсказка, елементите в глобалния обект ed11yLang.en (преди инициализиране на библиотеката) или Ed11y.M (след инициализирането) могат да бъдат директно заменени. Напр. в Drupal модула, където сме задали псевдоним на езиковия пакет като Drupal.ed11yLang:

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

Това важи за всеки от ключовете по подразбиране в файла за локализация или активния езиково-специфичен превод.

Drupal модулът добавя и персонализирани връзки за редактиране към подсказките, използвайки параметъра editLinks. Обърнете внимание на „Page editor" и „Layout editor:"

Опростена версия на кода, задаващ този параметър:

Drupal модулът след това използва събитието ed11yPop, за да показва и скрива динамично връзката за редактиране въз основа на контекста при показване на подсказки.

Това събитие предоставя референции към обектите result и tip:

Персонализирани тестове

Ако параметърът customTests е число, Editoria11y ще изпрати събитие „ed11yRunCustomTests" по време на проверката и след това ще изчака до 500 мс, очаквайки толкова „ed11yResume" събития.

Това може да се използва за извикване на толкова скриптове с персонализирани тестове, колкото желаете, като могат да добавят резултатите си в масива с резултати преди изчертаването на подсказките.

Например, ако искате да създадете тази подсказка за маркиране на връзки, поставени от имейли с обфускирани URL адреси:

Трябва да:

1. Добавите слушател за събитието ed11yRunCustomTests
2. Намерите съответстващи елементи
3. Дефинирате съобщението на подсказката
4. Изпратите събитието „resume", за да накарате Editoria11y да покаже подсказката:

Работа със сигнали за скрито или ограничено по размер съдържание

Много интерактивни компоненти (табове, плъзгачи, акордеони) скриват съдържание. Информационният панел на Editoria11y включва бутони „напред/назад" за прескачане директно до проблемите. Ако Editoria11y прецени, че подсказката за проблема в момента е невидима, ще предупреди потребителя, че нещо не е наред, и след това ще маркира първия видим предшественик — напр. div около акордеон.

В идеалния случай вашата тема ще направи тези елементи видими преди изпълнението на проверката за видимост на Editoria11y, така че всичко да работи магически за вашите потребители — въртележките се превъртат автоматично, а акордеоните се отварят автоматично, за да покажат проблема.

За да направите това при първото отваряне на панела (напр. разгъване на всички секции на акордеон с проблеми), добавете JS слушател за събитието ed11yPanelOpened, след това извършете querySelectorAll за съответните елементи ed11y-element-result и задействайте функцията, която вашата тема използва, за да разкрие тази част от страницата.

Ето пример, базиран на jQuery. При отваряне на панела той деактивира залепващо меню (за да не покрива елементи), след което търси елементи ed11y-element-result вътре в затворени секции на акордеон и симулира щракване върху бутона им за превключване:

За разкриване на съдържание само при прескачане към конкретна подсказка чрез бутона „напред" на панела (напр. в затворен таб или следващия слайд на въртележка), трябва да зададете и hiddenHandlers към съответните CSS селектори, и checkVisible на TRUE в параметрите. След това добавете слушател за събитието ed11yShowHidden. То се задейства, ако Editoria11y установи, че подсказка е вътре в контейнер с един от изброените селектори hiddenHandlers в списъка с опции. Това JS събитие ще включва ID на подсказката, която предстои да се отвори. Editoria11y ще направи кратка пауза след изпращането на това събитие, за да даде на вашия JS время да направи елемента видим.

Ето пример от реализация в Penn State. Той търси елемента, съответстващ на предоставения ID, след това намира неговия родителски интерактивен контейнер и задейства събитието му за активиране на превключвателя:

Последна бележка: някои теми просто не са съвместими с проверката за видимост — напр. контейнерът <main> има височина 0px. Такива сайтове трябва да деактивират цялата проверка за видимост, задавайки checkVisible на false.