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

Государственным и муниципальным образовательным учреждениям обязательно иметь помимо основной версии сайта ещё и версию для слабовидящих (соответствующий закон вступил в силу с начала 2016 года). В связи с этим я решил написать этот туториал о том, как создать версию сайта для слабовидящих, используя MODX Revolution.

Пример

Как это работает и устроено изнутри можно посмотреть на демонстрационном сайте: vision.quasi-art.ru.

Что понадобится

Терпение.
MODX Revolution, хотя подход легко адаптируется и для Evolution.
Сниппет Switch — это полезный сниппет, и работает он так же, как и оператор switch в популярных языках программирования.

Принцип работы

Когда человек заходит на сайт, он может переключиться на версию для слабовидящих, перейдя по ссылке (например, site.ru/set-theme/vision). По этому адресу находится ресурс, на котором вызывается сниппет, записывающий в cookies название версии сайта (у меня это — vision).
Затем происходит перенаправление на эту же страницу, чтобы пользователь сразу увидел эффект. Страница загрузится уже с другим значением темы, записанным в cookies. На странице вызывается сниппет, который в зависимости от значения, записанного нами ранее в cookies, отдаёт те или иные файлы стилей.

Если человек хочет вернуться на основную версию сайта, он опять может перейти по специальной ссылке (например, site.ru/set-theme/reset). После этого произойдёт обновление страницы, где наш сниппет вернёт необходимые файлы стилей для темы по умолчанию.

CSS-файл

При разработке сайта для слабовидящих необходимо придерживаться ГОСТ 52872-2012 , но для начала можно просто скопировать текущий файл стилей. В моём случае я взял файл стилей основной версии (например, default.css) и скопировал его в новый файл (и назвал vision.css).

Чанк Head

Обычно чанк для вывода head-раздела я называю Head. Подключаю файлы стилей я следующим образом:

<link rel="stylesheet" media="all" href="[[!switch?
    &get=`[[!quasiTheme]]`
    &c1=`vision`
    &do1=`vision.css`
    &default=`default.css`
]]" />

Если в cookies браузера установлена тема vision, то подключается vision.css, в любом другом случае — default.css.

Сниппеты

quasiTheme

Данный незамысловатый сниппет выводит название темы (в моём случае я использовал vision для версии для слабовидящих и любое другое (default или пустое значение) — для основной версии).

<?php
return $modx->getOption('theme', $_SESSION, 'default');

quasiThemeControl

Данный сниппет вызывается на ресурсах для смены оформления и записывает в cookies название темы оформления.

<?php
$theme = $modx->getOption('set', $scriptProperties, false);
$referer = $modx->getOption('HTTP_REFERER', $_SERVER, '');
if ($theme) {
    $_SESSION['theme'] = $theme;
    $modx->sendRedirect($referer);
}

Ресурсы

Есть два ресурса, при переходе на любой из которых происходит запись в cookies названия темы и последующее перенаправление на страницу, с которой пришёл посетитель.

Vision

Здесь вызывается сниппет quasiThemeControl для установки темы для слабовидящих. Псевдоним данного ресурса ([[*alias]]) в моём случае — vision.

[[!quasiThemeControl? &set=`[[*alias]]`]]

Default

Здесь вызывается сниппет quasiThemeControl для установки основной темы. Псевдоним данного ресурса ([[*alias]]) в моём случае — default.

[[!quasiThemeControl? &set=`[[*alias]]`]]