И вот я, как порядочный халявщик полез искать в сеть интернет какой-либо модуль, плагин, а может даже и компонент, которые бы соответствовали требуемым параметрам. Меня интересует что-либо для Joomla 3, сказать, что «я ничего не нашёл», это будет далековато от истины. На момент писания этой заметки, было найдено 7 приложений (модулей/плагинов) из них бесплатный всего один. Больше всего расстроило, когда попал на сайт какой-то «общины», чья позиция «ребята платите нам бабло, будем для Вас модули выкупать и с Вами, как участникам нашей общины делиться». И столько радужных отзывов у этой самой складчины. Правда с реальным лицом, а не крашенной аватаркой всего один человек, но кого это волнует, правда ведь?
Итак эта самая складчина просила минимальный взнос 40$ (это на полгода) в переводе на рубли это около 1200(на самом деле больше, я беру по самым скромным меркам). Далее я перехожу на сайты «производителей» тех самых модулей, вновь расценки «радуют глаз», там цены от 30 евро. На самом деле надо признать, если проект складчина действительно делает, что обещает, то они действительно помогают сэкономить, но здесь возникает другой вопрос:
А действительно ли Вам нужен этот модуль/плагин?
Поясню. По требованиям ГОСТа – версия для «слабовидящих» это сайт без графических элементов и с увеличенным шрифтом, используемая цветовая гамма = монохром (черно-белая).
– Какой-нибудь из плагинов, что я нашёл, делает это?
– Нет. Они только увеличивают/уменьшают размер текста у некоторых элементов и всё.
Я уж было собирался отчаяться. Выпить цианистый калий, назвать весь мир продажными про… прости Господи. Как вдруг меня осенило. Всё то, что требуется изменить, прописано в таблицах стилей CSS, и единственное, что мне нужно, это написать кнопку, которая будет заменять одну таблицу на другую.
И здесь мне на помощь пришёл JavaScript. Однако сначала мы всё же вернёмся к вопросу стилей.
В папке шаблонов Templates, найдите Ваш шаблон и подключённый к нему файл стилей css, и в строку подключённого шаблона добавьте ID.
Пример:
<link id="st" rel="stylesheet" href="/Путь к CSS Вашего шаблона-оригинальный" type="text/css">Далее создаётся аналоговый CSS, с версией для слабовидящих. Без использования рисунков и т.д.
И где-нибудь создаётся блок:
<span onclick="look();">Версия для слабовидящих</span>Теперь осталось добавить JavaScript-код, который будет указывать функции look(), переход на другую версию стилей:
Здесь два варианта, либо прописывать в интегрируемый файл *.js, либо прописать прямо в коде шаблона:
<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
}
</script>В интегрируемый файл *.js код пишем так:
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
}Но это ещё не всё, не время расслабляться. Этот механизм позволит изменять режим только на текущей странице, если Ваш сайт состоит из одной страницы, это может быть и удобно, но что делать тем, у кого страниц несколько. И каждый раз, переходя на новую страницу кликать на кнопку? Абсурд.
Не будем изобретать велосипед, а прибегнем к уже известным технологиям. Я говорю о COOKIE.
Но прежде чем мы начнём, добавьте в файл шаблона этот скрипт:
Для чего это нужно, до этого я написал код на JavaScript, теперь мы переходим к серверному языку PHP и язык JavaScript, без специального плагина не способен передать переменные в глобальный массив $_COOKIE.
Открываем файл, где подключается CSS, и изменяем значение с:
<link id="st" rel="stylesheet" href="/Путь к CSS Вашего шаблона-оригинальный" type="text/css">на:
<link id="st" rel="stylesheet" href="/<?php if(isset($_COOKIE["look"])){print($_COOKIE["look"]);}else{print("Путь к CSS Вашего шаблона-оригинальный");} ?>" type="text/css">Для чего это делается, COOKIES появляются только после первой страницы, на первой странице их нет и быть не может, а потому приходится хитрить.
Соответственно,
<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
}
</script>Изменяется на:
<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
$.cookie("look","Путь к CSS Вашего шаблона-аналоговый", {expires: 3600});
}
</script>На всякий случай обращу внимание на то, что Вам скорей всего будет нужна и кнопка возврата в прежнее состояние. В этом случае добавляются только строки в JavaScript:
<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
$.cookie("look","Путь к CSS Вашего шаблона-аналоговый", {expires: 3600});
}
function look2(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-оригинальный";
$.cookie("look","Путь к CSS Вашего шаблона-оригинальный", {expires: 3600});
}
</script>Пожалуйста не забудьте, что в *.js файле теги <script> и </script> не пишутся.
А так же соответствующий span:
<span onclick="look2();">Оригинальная версия</span>Вот и вся «магия»: две таблицы стилей, пара функций и cookie, и кнопка для слабовидящих работает на всех страницах сайта, причём без единого платного модуля. Главное – аккуратно составить «аналоговый» CSS: по требованиям ГОСТа в нём нужно убрать графику (например, img { display: none; }), увеличить шрифт и оставить только чёрно-белую гамму. После подключения пройдитесь по нескольким страницам и убедитесь, что выбранная версия сохраняется при переходах. И не забудьте, что cookie.js должен подключаться после jQuery, иначе $.cookie работать не будет.
Обратите внимание на параметр expires: в плагине jQuery Cookie он задаётся в днях, а не в секундах, поэтому 3600 означает очень долгий срок хранения. Если хотите, чтобы выбор версии запоминался, например, на месяц, укажите 30.
