Для реализации этой задачи сформулирую базовую концепцию, того, что нужно сделать:

  1. Создайте 1-2 варианта стилей (CSS) для разных версий для слабовидящих.
  2. Реализовать функцию увеличения\уменьшения размера шрифта в заданных пределах.
  3. Установить cookie в котрую будет записан стиль выбраный пользователем.
  4. Реализуем триггер для сброса стилей.

Подробнее

1. Стили

Пример схем

Темный фон, светлый текст:

#vi-1 {
    background-color: #333;
    color: #EEE !important;
    padding: 3px;
}

.vi-1-style {
    background-color: #333;
    background-image: none;
}

.vi-1-style * {
    color: #EEE !important;
}

Синий фон и темный текст:

#vi-2 {
    background-color: #00b0e4;
    color: #333 !important;
    padding: 3px;
}

.vi-2-style {
    background-color: #00b0e4;
    background-image: none;
}

.vi-2-style * {
    color: #333 !important;
}

...

2. Увеличиваем\уменьшаем размер шрифта 

/**
 * Increase font size
 */
$('.font-plus').click(function() {
    var fontSize = parseInt($('body').css('font-size'));
    if (fontSize < 18) {
        fontSize = fontSize + 1;
    }
    $('body').css({'font-size': fontSize + "px"});
});

/**
 * Decrease font size
 */
$('.font-minus').click(function() {
    var fontSize = parseInt($('body').css('font-size'));
    if (fontSize > 14) {
        fontSize = fontSize - 1;
    }
    $('body').css({'font-size': fontSize + "px"});
});

3. Для работы с cookies подойдет https://github.com/js-cookie/js-cookie
Обратите внимание, что этот плагин работает только на сервере.

/**
 * Set styles
 */
$('#vi-1').click(function() {
    Cookies.remove('vi_style');
    $('body').removeClass('vi-2-style').addClass('vi-1-style');
    Cookies.set('vi_style', 'vi-1-style', { expires: 7 });
});

$('#vi-2').click(function() {
    Cookies.remove('vi_style');
    $('body').removeClass('vi-1-style').addClass('vi-2-style');
    Cookies.set('vi_style', 'vi-2-style', { expires: 7 });
});

4. Style reset

/**
 * Reset styles to default state
 */
$('#vi-default').click(function() {
    Cookies.remove('vi_style');
    Cookies.remove('font_size');
    $('body').removeClass('vi-1-style vi-2-style').prop('style', null);
});

Всё в сборе:

/**
 * Increase font size
 */
$('.font-plus').click(function() {
    var fontSize = parseInt($('body').css('font-size'));
    Cookies.remove('font_size');
    if (fontSize < 18) {
        fontSize = fontSize + 1;
    }
    $('body').css({'font-size': fontSize + "px"});
    Cookies.set('font_size', fontSize + "px", { expires: 7 });
});

/**
 * Decrease font size
 */
$('.font-minus').click(function() {
    var fontSize = parseInt($('body').css('font-size'));
    Cookies.remove('font_size');
    if (fontSize > 14) {
        fontSize = fontSize - 1;
    }
    $('body').css({'font-size': fontSize + "px"});
    Cookies.set('font_size', fontSize + "px", { expires: 7 });
});

/**
 * Set styles
 */
$('#vi-1').click(function() {
    Cookies.remove('vi_style');
    $('body').removeClass('vi-2-style').addClass('vi-1-style');
    Cookies.set('vi_style', 'vi-1-style', { expires: 7 });
});

$('#vi-2').click(function() {
    Cookies.remove('vi_style');
    $('body').removeClass('vi-1-style').addClass('vi-2-style');
    Cookies.set('vi_style', 'vi-2-style', { expires: 7 });
});

/**
 * Reset styles to default state
 */
$('#vi-default').click(function() {
    Cookies.remove('vi_style');
    Cookies.remove('font_size');
    $('body').removeClass('vi-1-style vi-2-style').prop('style', null);
});

if ( Cookies.get('vi_style') ) {
    $('body').addClass( Cookies.get('vi_style') );
}

if ( Cookies.get('font_size') ) {
    $('body').css({'font-size': Cookies.get('font_size') });
}
Теги: JavaScriptjQuery

Выразить благодарность

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

Так же, Вы можете перевести любую сумму, которую посчитаете нужной на наш счёт, что сильно мотивирует к написанию новых полезных статей.

Комментарии: