Делаем простой переключатель стилей

[GE_Pass]

Делаем простой переключатель стилей

Одним из способов улучшить взаимодействие пользователей с вашим сайтом - разрешить им персонализировать некоторые его аспекты. Это может быть чем угодно - от простого изменения размера шрифта, до выбора соответствующего языка или локали. Как разработчик я вижу в этом двойной вызов. Вам необходимо как дать пользователю возможность что-то персонализировать, так и необходимо где-то хранить результат настроек пользователя, чтобы при следующем заходе он не потерял результаты своего труда. В данном уроке я покажу, как создать простой переключатель стилей, а также хранить настройки пользователя в локальном хранилище.

Основы
Первым делом нам нужна страница HTML с небольшим количеством контента и стилями. Также я добавил выпадающий список, в котором пользователь будет выбирать нужный ему стиль. Пример того, как может выглядеть такая страница, приведен ниже:


Реакция на события
Так как выпадающее меню будет использоваться для переключения стилей, необходимо добавить слушатель события на элемент select, который будет реагировать соответствующим образом каждый раз, как пользователь будет выбирать новый стиль из списка. Согласно Модели событий второго уровня DOM от W3C, стандартным способом зарегистрировать обработчик события является следующая запись:

element.addEventListener(<event-name>, <callback>, <use-capture>);

Значение каждого аргумента:

• event-name - строка, представляющая собой имя или тип события, для которого вы хотите добавить слушателя
• callback - функция обратного вызова (колбэк), который будет вызван, когда сработает событие
• use-capture - булево значение, которое определяет, должен ли колбэк быть вызван, когда событие находится в фазе перехвата, то есть, когда событие просачивается от корня документа к цели.

К сожалению, IE8 и его предшественники не следуют данной модели. Вместо этого IE предоставляет для этих же целей альтернативный методattachEvent(). В независимости от того, решите ли вы поддерживать или не поддерживать старые версии IE, это зависит от вас, или от той аудитории, которой вы предоставляете свой ресурс. Необходимо взвесить затраты на поддержку старых версий браузеров, и те преимущества, которые может дать эта поддержка. В нашем случае это вопрос использования простой функции-обертки, так что поддержка IE8 не составляет большого труда. Данный пример показывает, как событие change на элементе select обрабатывается кроссбраузерно.


В случае с функцией switchStyles() следует обратить внимание, что переменная this ссылается на элемент, который вызвал событие (в этом случае - элемент select). Следовательно, this.options дает нам доступ к опциям из элемента select, а this.options[this.selectedIndex] дает оступ к текущему выбранному элементу. Из него просто получить значение атрибута value выбранного элемента списка.

Также заметьте, что код использует console.log() вместо alert(). Это сделано потому, что alert() блокирует работу страницы, и для продолжения работы JavaScript окно с сообщением необходимо закрыть. В данном случае это не страшно, но в более сложных случаях (например, обход большого массива) такой подход станет сильно раздражать.


Меняем стили
Теперь добавим некоторые стили, которые впоследствии сможет переключать пользователь. Создайте следующий CSS-файл в вашем проекте:

/* Высокая контрастность */

body.high-contrast{
    background-color: DarkBlue;
    color: yellow
}

body.high-contrast h1{
    text-shadow: none;
}

/* Печать*/
body.print h1{
    text-shadow: none;
}

body.print img{
    display: none;
}

Когда пользователь выбирает другой стиль из выпадающего списка, мы применим к элементу body соответствующий класс, а остальные уберем:

function switchStyles() {
  var selectedOption = this.options[this.selectedIndex],
      className = selectedOption.value;

  document.body.className = className;
}

На этом этапе у нас есть полнофункциональный переключатель стилей, это показано в следующем примере:


Работаем на уровне файла стилей
Переключение классов хорошо сработало для нашего демонстрационного примера. Но если вы работаете с большим набором стилей, было бы гораздо удобнее хранить их в разных файлах. Позже можно переключать соответствующие файлы стилей, вместо того, чтобы переключать классы. Данный код подключает файл стилей на страницу:

function switchStyles() {

  var linkTag = document.getElementsByTagName('link')[0],
      currentStylesheet = linkTag.href.replace(/^.*[\\\/]/, ''),
      newStylesheet = this.options[this.selectedIndex].value + '.css';

  linkTag.href = linkTag.href.replace(currentStylesheet, newStylesheet);
}

Запоминаем выбор пользователя
На текущем шаге у нас уже есть переключатель стилей. К сожалению, при перезагрузке страницы пользователю опять будет предоставлен вид по-умолчанию. Для того, чтобы решить эту проблему, будем использовать клиентское хранилище для сохранения его настроек. При каждой перезагрузку страницы мы будем эти настройки восстанавливать из хранилища.

Есть некоторое количество технологий хранения данных на стороне клиента. Для данного случая мы будем использовать локальное хранилище. Локальное хранилище уже вовсю поддерживается современными браузерами, а также предоставляет до 5Мб доступного пространства для хранения данных. И, в отличие от cookies, информация из локального хранилища никогда не передается на сервер. Если вам необходима поддержка древних браузеров (как мне вас жаль), то для этих целей существуют обходные решения. Также отмечу, что некоторые браузеры, как, например, IE8, не поддерживают локальные хранилища по протоколу file://.

Базовый синтаксис работы с локальным хранилищем:

// Доступно ли локальное хранилище?
if (typeof window.localStorage != 'undefined') {
    // сохраняем
    localStorage.setItem('hello', 'Hello World!');

    // получаем
    console.log(localStorage.getItem('hello'));

    // удаляем
    localStorage.removeItem('hello');
}

Чтобы применить это к нашей странице необходимо сохранять значение выбранного пользователем элемента списка каждый раз при изменении элемента select:

localStorage.setItem('bodyClassName', className);

Также необходимо проверять наличие значения данного ключа при загрузке странице, и, если таковое найдено - устанавливать соответствующий класс элемента body. Это можно сделать, если сперва попробовать получить пару “ключ/значение” из хранилища:

// если значения с таким ключом нет - будет возвращен null
var storedClassName = localStorage.getItem('bodyClassName');

Если такой элемент есть в хранилище, то можно перебрать элементы списка, и сравнить их значения с тем, что мы вытащили из локального хранилища. Если найдено совпадение - можно отметить элемент списка как выбранный:

if (storedClassName) {
for(var i = 0; i < styleSwitcher.options.length; i++){
if (styleSwitcher.options[i].value === storedClassName){
styleSwitcher.selectedIndex = i;
}
}
}

Следующий пример включает в себя наши изменения:


Теперь можем менять стили из выпадающего списка. В дополнение, когда мы обновляем страницу, выпадающий список восстанавливает свое предыдущее состояние. Но все равно, при перезагрузке не восстанавливаются наши стили, выбранные в прошлый раз. Почему так?

В общем, если мы программно изменяем элементы списка, то событие change не выбрасывается. Давайте исправим это своей собственной функцией триггера:

function trigger(action, el) {
  if (document.createEvent) {
    var event = document.createEvent('HTMLEvents');

    event.initEvent(action, true, false);
    el.dispatchEvent(event);
  } else {
    el.fireEvent('on' + action);
  }
}

Этой функции мы можем передать название события, которое хотим вызвать, а также элемент, на котором будет вызвано событие. Далее функция проверяет, если браузер отвечает на document.createEvent() (все современные браузеры, следующие стандартам, поддерживают его). Если так, тогда функция использует dispatchEvent() для того, чтобы вызвать событие. Иначе функция использует метод fireEvent().

Последним штрихом нашего скрипта будет добавление следующей строчки кода:

trigger('change', styleSwitcher);

После того, как мы добавили эту строчку, наш финальный код выглядит так:


Заключение
В данном уроке я показал вам, как можно предоставить пользователю возможность изменять внешний вид частей вашего сайта. Также вы научились сохранять пользовательские настройки, что улучшает взаимодействие пользователя с вашим сайтом. При правильном использовании эта техника дает вам в руки мощный инструмент, с помощью которого вы можете выделить свой сайт из ряда ему подобных.

Источник урока: http://www.sitepoint.com/creating-simple-style-switcher/