Версия для слабовидящих

Установка модуля и генерация шаблонов

1. Загрузите модуль
2. Нажмите кнопку Установить
3. Включите модуль в настройках: Рабочий стол / Настройки / Настройки продукта / Настройки модулей / Версия для слабовидящих

Открытие панели В шаблонах вашего сайта необходимо в нужноv место добавить кнопку с атрибутом data-js-vipanel-toggle для перехода в версию для слабовидящих, например,[CODE]Версия для слабовидящих[/CODE]Таких кнопок на странице может быть несколько. Повторное нажатие на кнопку закрывает панель. Описание возможностей модуля Для модуля можно задавать начальный конфиг. Для этого на body следует добавить атрибут data-js-vipanel-cfg, у которого в конфиге в виде JSON можно указать параметры, перечисленные ниже: Компонент принимает следующие параметры:

• visibleUntil: "(max-width: 300px)" - указывает разрешение, на котором будет скрыта панель. По умолчанию стоит в "(max-width: 350px)". Значение для поля указывается в том же формате, как ожидается в matchMedia. Значение по умолчанию "(max-width: 350px)".

• brailleFontPath: "/bitrix/fonts/delement.visuallyimpaired/Braille.woff2" - путь до файла со шрифтом Брайля. Значение по умолчанию "/bitrix/fonts/delement.visuallyimpaired/Braille.woff2", в пакете уже присутствует файл шрифтов.

• pageUtterSelectors: [ "#viPanelUtterContent", ".viPanelUtterContent", "[data-js-some-selector]" ] - принимает массив селекторов для элементов на странице, которые будут зачитаны после нажатия на кнопку "Озвучить всё" на панели. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [ "#viPanelUtterContent" ].

• hiddenElementsSelectors: [ ".myAwesomeList", "#myAwesomeQuote" ] - принимает массив селекторов для элементов на странице, которые будут скрыты после того, как будет открыта панель. Элементы отобразятся, как только панель будет закрыта. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [].

• ignoreElementsSelectors: [ "#viPanelUtterContent", ".viPanelUtterContent", "[data-js-some-selector]" ] - принимает массив селекторов для элементов на странице, которые будут игнорировать стили панели, когда панель будет открыта. Тем не менее часть свойств может наследоваться от родителей. Для исправления этого можно использовать класс isDeViPanelIgnored, он будет добавлен на элементы, найденные по указанному селектору. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [].

• captchaElementsSelectors: [ "[class*='captcha']" ] - принимает массив селекторов для элементов капчи на странице. Найденные элементы будут обработаны так же, как элементы из массива ignoreElementsSelectors. Элементов может быть несколько, поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [ "[class*='captcha']" ].

• fontSizeSettings: { fontSizeSmall: "14px", fontSizeStandard: "default", fontSizeLarge: "20px" } - позволяет передавать собственные настройки размера шрифта для кнопок, изменяющих размер шрифта. Указаны значения по умолчанию.

• isShouldUtterControls: true - boolean-флаг, который указывает, будет ли по умолчанию включена опция "Синтез речи" (см. п. 4). Флаг будет учитываться при первом открытии панели. Если пользователь включит/выключит опцию, при следующем открытии панели опция будет в том состоянии, в которой её выставил пользователь. Значение по умолчанию true.

• isFixed: true - boolean-флаг, который указывает, будет ли панель зафиксирована в верхней части страницы при прокрутке (иметь position: fixed). Значение по умолчанию true.

• targetSelectors: [ ".panelScope", "#panelScope" ] - принимает массив селекторов для элементов, на которые будут распространены стили панели в открытом виде. Поддерживаются любые валидные селекторы, как если бы они указывались в document.querySelectorAll(). Значение по умолчанию [ "body" ], то есть стили открытой панели будут применены ко всей странице целиком.

• defaultSettings: { deViImagesDisplay: "none" } - дефолтные настройки, в которых указывается начальное состояние панели при первом открытии. Если пользователь уже открывал панель и перевыбирал опции отображения страницы, значения из дефолтных настроек будут заменены опциями, которых сохранены в локальном хранилище пользователя. Пример: в дефолтных настройках указано, что при открытой панели скрываются картинки. Пользователь открывает панель в первых раз - картинки скрыты. Пользователь меняет размер текста, обновляет страницу - картинки всё так же скрыты, размер текста соответствует тому, что ранее выбрал пользователь. Пользователь нажимает на кнопку "показать картинки" - картинки появляются. Пользователь обновляет страницу - картинки будут отображаться.

В конфиге defaultSettings можно указывать следующие поля:[TABLE][TR][TH]Ключ[/TH][TH]Возможные значения[/TH][/TR][TR][TD]deViBaseFontSize[/TD][TD]

• "14px"
• "default"
• "20px"

[/TD][/TR][TR][TD]deViBaseFontFamily[/TD][TD]

• "sans-serif"
• "serif"
• "Braille"

[/TD][/TR][TR][TD]deViBaseLetterSpacing[/TD][TD]

• "default"
• "5px"

[/TD][/TR][TR][TD]deViBaseBgColor[/TD][TD]

• "default"
• "#000"
• "#9dd1ff"
• "#f7f3d6"
• "#3b2716"

[/TD][/TR][TR][TD]deViBaseFontColor[/TD][TD]

• "default"
• "#fff"
• "#063462"
• "#4d4b43"
• "#a9e44d"

[/TD][/TR][TR][TD]deViFilter[/TD][TD]

• "default"
• "grayscale(100%)"

[/TD][/TR][TR][TD]deViImagesDisplay[/TD][TD]

• "default"
• "none"

[/TD][/TR][/TABLE]

Настройки по умолчанию:

[CODE]{ "deViBaseFontSize": "default", "deViBaseFontFamily": "sans-serif", "deViBaseLetterSpacing": "default", "deViBaseLineHeight": "1.5", "deViBaseBgColor": "default", "deViBaseFontColor": "default", "deViFilter": "default", "deViImagesDisplay": "default" } [/CODE]Панель имеет адаптивные стили. Минимальная ширина, пока видна панель, задаётся в конфиге в параметре visibleUntil (см. п. 1) У панели есть голосовое управление, включает в себя команды:

• увеличить/уменьшить шрифт/стандартный шрифт
• увеличить/уменьшить интервал/стандартный интервал
• включить/отключить изображения
• шрифт/гарнитура с засечками, шрифт/гарнитура без засечек
• изменить цвет сайта чёрным по белому/белым по чёрному/синим по голубому/коричневым по бежевому/зелёным по коричневому
• включить шрифт брайля
распечатать

Присутствует возможность включить/выключить функцию "Синтез речи", по умолчанию включено. При включённой функции после каждого нажатии на клавиши панели будет озвучиваться назначение клавиши. При открытой панели на документ дополнительно навешивается класс .isDeViPanelActive для возможности дополнительной стилизации страниц при открытой панели. Для стилизации следует использовать каскад html.isDeViPanelActive body <ваш(и) класс(ы)> В панели присутствует локализация, поддерживаемые языки: русский, английский. Язык будет определяться по значению переменной lang (по умолчанию document.documentElement.lang). Голосовое управление доступно только для страниц на русском языке. В панели присутствует кнопка сброса установленных настроек. При нажатии на кнопку настройки будут сброшены до настроек по умолчанию (см. пункт 1, ключ defaultSettings), а функция "Синтез речи" будет включена. В панели присутствует кнопка "Дополнительные настройки" - при нажатии на неё будут показаны дополнительные опции панели. При повторном нажатии они будут скрыты. При закрытии панели блок с дополнительными настройками также будет скрыт.