README

Современная ES6 версия библиотеки Switchery без внешних зависимостей. Превращает стандартные HTML чекбоксы в красивые iOS-style переключатели.

✨ Особенности

• 🚀 Без зависимостей — чистый ES6, никаких внешних библиотек
• 📦 Легковесный — ~4KB минифицированный
• ♿ Доступность — поддержка клавиатуры и ARIA-атрибуты
• 📱 Мобильные устройства — оптимизировано для тач-интерфейсов
• 🎨 Кастомизация — гибкая настройка цветов, размеров и анимаций
• 🔄 Совместимость — полностью совместим с API оригинального Switchery
• 🌐 UMD модуль — работает с CommonJS, AMD и как глобальный объект

📥 Установка

Вариант 1: Прямое подключение

<link rel="stylesheet" href="switchery.css">
<script src="switchery.js"></script>

Вариант 2: ES6 модуль

import Switchery from './switchery.js';

Вариант 3: CommonJS

const Switchery = require('./switchery.js');

🚀 Быстрый старт

HTML

<input type="checkbox" class="js-switch">
<input type="checkbox" class="js-switch" checked>

JavaScript

// Один элемент
const elem = document.querySelector('.js-switch');
const switchery = new Switchery(elem);

// Несколько элементов
document.querySelectorAll('.js-switch').forEach(el => {
  new Switchery(el);
});

Готово! Чекбокс превратится в красивый переключатель 🎉

⚙️ Настройки

При создании экземпляра можно передать объект с настройками:

const switchery = new Switchery(elem, {
  color: '#64bd63',           // Цвет включенного состояния
  secondaryColor: '#dfdfdf',  // Цвет выключенного состояния
  jackColor: '#fff',          // Цвет ручки (вкл)
  jackSecondaryColor: null,   // Цвет ручки (выкл), null = jackColor
  className: 'switchery',     // CSS класс контейнера
  disabled: false,            // Отключить переключатель
  disabledOpacity: 0.5,       // Прозрачность в disabled состоянии
  speed: '0.4s',              // Скорость анимации
  size: 'default'             // Размер: 'small', 'default', 'large'
});

Таблица настроек

Параметр	Тип	По умолчанию	Описание
color	string	'#64bd63'	Цвет фона во включенном состоянии (HEX или RGB)
secondaryColor	string	'#dfdfdf'	Цвет фона и границы в выключенном состоянии
jackColor	string	'#fff'	Цвет ручки во включенном состоянии
jackSecondaryColor	string	null	Цвет ручки в выключенном состоянии
className	string	'switchery'	CSS класс для контейнера
disabled	boolean	false	Отключить взаимодействие
disabledOpacity	number	0.5	Прозрачность (0-1) в отключенном состоянии
speed	string	'0.4s'	Длительность анимации
size	string	'default'	Размер: 'small', 'default', 'large'

📐 Размеры

// Маленький
new Switchery(elem, { size: 'small' });

// Стандартный (по умолчанию)
new Switchery(elem, { size: 'default' });

// Большой
new Switchery(elem, { size: 'large' });

Размер	Ширина	Высота
small	33px	20px
default	50px	30px
large	66px	40px

🎨 Кастомизация цветов

Базовые цвета

// Синий переключатель
new Switchery(elem, { color: '#3498db' });

// Красный переключатель
new Switchery(elem, { color: '#e74c3c' });

// С кастомным цветом выключенного состояния
new Switchery(elem, { 
  color: '#9b59b6',
  secondaryColor: '#ecf0f1'
});

Цвета ручки

// Кастомный цвет ручки
new Switchery(elem, { 
  color: '#7c8bc7', 
  jackColor: '#9decff' 
});

// Разные цвета для вкл/выкл состояний
new Switchery(elem, { 
  color: '#faab43', 
  secondaryColor: '#fc73d0', 
  jackColor: '#fcf45e', 
  jackSecondaryColor: '#c8ff77' 
});

🔌 API

Методы экземпляра

isChecked()

Проверяет, включен ли переключатель.

const switchery = new Switchery(elem);

if (switchery.isChecked()) {
  console.log('Переключатель включен');
}

isDisabled()

Проверяет, отключен ли переключатель.

if (switchery.isDisabled()) {
  console.log('Переключатель недоступен');
}

enable()

Включает отключенный переключатель.

switchery.enable();

disable()

Отключает переключатель (делает недоступным для взаимодействия).

switchery.disable();

destroy()

Удаляет все обработчики событий. Используйте перед удалением элемента из DOM.

switchery.destroy();

📡 События

Переключатель работает с нативным событием change на оригинальном чекбоксе:

const checkbox = document.querySelector('.js-switch');
const switchery = new Switchery(checkbox);

// Отслеживание изменений
checkbox.addEventListener('change', function() {
  console.log('Новое состояние:', this.checked);
});

Пример: реакция на изменение

const checkbox = document.getElementById('notifications');
new Switchery(checkbox);

checkbox.addEventListener('change', function() {
  if (this.checked) {
    enableNotifications();
  } else {
    disableNotifications();
  }
});

💡 Примеры использования

Включенный по умолчанию

<input type="checkbox" class="js-switch" checked>

Отключенный переключатель

<!-- Через атрибут -->
<input type="checkbox" class="js-switch" disabled>

<!-- Через опции -->
<script>
new Switchery(elem, { disabled: true });
</script>

Внутри label

Переключатель корректно работает внутри <label>:

<label>
  <input type="checkbox" class="js-switch">
  Включить уведомления
</label>

Множественные переключатели

// Получаем все чекбоксы
const checkboxes = document.querySelectorAll('.js-switch');

// Создаём переключатели
checkboxes.forEach(checkbox => {
  new Switchery(checkbox);
});

Предотвращение повторной инициализации

const checkboxes = document.querySelectorAll('.js-switch');

checkboxes.forEach(checkbox => {
  // Проверяем, не был ли уже инициализирован
  if (!checkbox.getAttribute('data-switchery')) {
    new Switchery(checkbox);
  }
});

Программное изменение состояния

const checkbox = document.querySelector('.js-switch');
const switchery = new Switchery(checkbox);

// Изменяем состояние программно
function turnOn() {
  checkbox.checked = true;
  // Триггерим событие change для обновления UI
  checkbox.dispatchEvent(new Event('change'));
}

function turnOff() {
  checkbox.checked = false;
  checkbox.dispatchEvent(new Event('change'));
}

function toggle() {
  checkbox.checked = !checkbox.checked;
  checkbox.dispatchEvent(new Event('change'));
}

Динамическое создание

function createSwitch(container, options = {}) {
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  container.appendChild(checkbox);
  
  return new Switchery(checkbox, options);
}

// Использование
const container = document.getElementById('switches');
const sw1 = createSwitch(container, { color: '#e74c3c' });
const sw2 = createSwitch(container, { size: 'large' });

Сохранение состояния в localStorage

const checkbox = document.getElementById('dark-mode');
const switchery = new Switchery(checkbox);

// Восстанавливаем сохранённое состояние
const saved = localStorage.getItem('darkMode');
if (saved !== null) {
  checkbox.checked = saved === 'true';
  checkbox.dispatchEvent(new Event('change'));
}

// Сохраняем при изменении
checkbox.addEventListener('change', function() {
  localStorage.setItem('darkMode', this.checked);
  
  // Применяем тему
  document.body.classList.toggle('dark-theme', this.checked);
});

♿ Доступность (Accessibility)

Switchery Modern поддерживает:

• Клавиатурная навигация — Tab для фокуса, Space/Enter для переключения
• ARIA-атрибуты — role="switch", aria-checked
• Фокус — видимый индикатор фокуса для клавиатурных пользователей

<!-- Для лучшей доступности используйте label -->
<label for="my-switch">Включить функцию</label>
<input type="checkbox" id="my-switch" class="js-switch">

🌐 Поддержка браузеров

Браузер	Поддержка
Chrome	✅ 60+
Firefox	✅ 55+
Safari	✅ 12+
Edge	✅ 79+
Opera	✅ 47+
IE	❌ Не поддерживается

Для поддержки старых браузеров используйте оригинальный Switchery или добавьте полифиллы для ES6.

🔧 Кастомизация CSS

Переопределение стилей

/* Кастомная тень для ручки */
.switchery > small {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Кастомный размер */
.switchery-custom {
  width: 80px;
  height: 40px;
  border-radius: 25px;
}

.switchery-custom > small {
  width: 36px;
  height: 36px;
  top: 2px;
}

Использование кастомного класса

new Switchery(elem, { className: 'switchery switchery-custom' });

📝 Миграция с оригинального Switchery

Switchery Modern полностью совместим с оригинальной библиотекой. Просто замените файлы:

- <link rel="stylesheet" href="switchery/dist/switchery.css">
- <script src="switchery/dist/switchery.js"></script>
+ <link rel="stylesheet" href="switchery-modern/switchery.css">
+ <script src="switchery-modern/switchery.js"></script>

Весь существующий код будет работать без изменений.

🐛 Известные особенности

1. Размеры вычисляются после рендеринга — если переключатель создаётся в скрытом контейнере, позиция ручки может быть некорректной. Решение: инициализируйте после показа контейнера или вызовите dispatchEvent(new Event('change')).

2. Внутри label — переключатель корректно обрабатывает клики на родительский <label>, предотвращая двойное срабатывание.

📄 Лицензия

MIT License

Оригинальный Switchery создан Alexander Petkov.

ES6 версия без зависимостей.

🤝 Благодарности

• Alexander Petkov — автор оригинального Switchery
• Veselin Todorov — вклад в оригинальный проект