| ssh | https |
|---|---|
[email protected]:alagunoff/slider.git |
https://github.com/alagunoff/slider.git |
| Сборка dev | Сборка prod | Тест |
|---|---|---|
npm run start |
npm run build |
npm run test |
Подключаем следующие файлы:
- Стили плагина
- Скрипт плагина
И инициализируем плагин на странице посредством вызова метода rangeSlider на элементе.
$('#example').rangeSlider();| Option | Default | Type | Description |
|---|---|---|---|
| min | 0 | number | Минимальное значение слайдера |
| max | 100 | number | Максимальное значение слайдера |
| step | 1 | number | Шаг передвижения ползунка. Не может быть меньше 1 |
| firstValue | 0 | number | Текущее значение слайдера. При hasInterval: true - значение "от" |
| secondValue | null | number or null | Если hasInterval: true - значение "до" |
| hasInterval | false | boolean | Тип слайдера. При false - одиночное значение, при true - диапазон |
| hasTip | false | boolean | Подсказка над бегунком |
| isVertical | false | boolean | Вид слайдера. При false - горизонтальный, при true - вертикальный |
| theme | "aqua" | string | Тема слайдера. Имеется две темы - aqua и red |
| onChange | null | function | Функция которая вызывается при инициализации слайдера на странице и при изменении слайдера. Параметром передается состояние слайдера |
Чтобы использовать публичные методы, необходимо сохранить экземпляр плагина в переменную
// Идентифицировать плагин
const $example = $('#example').rangeSlider();
// Сохранить экземпляр плагина
const exampleData = $example.data('rangeSlider');
// Использовать метод
exampleData.update();Имеется один публичный метод
// Метод update - обновляет слайдер с новыми параметрами
exampleData.update({
min: 10,
firstValue: 40,
hasTip: true,
});Приложение поделено на 3 слоя, реализованные с помощью классов, в соответствии с паттерном проектирования MVP (Model-View-Presenter), где:
- Model (модель) - данные приложения
- Slider (представление) - внешний вид приложения. Этот слой в свою очередь поделен на подслои
- Presenter (презентер) - слой-посредник между Model и Slider
Взаимодействие слоев друг с другом осуществляется с помощью паттерна Observer. Который реализован с помощью вспомогательного класса Observer
Зоны ответственности в приложении поделены между:
- Model - взаимодействует напрямую с данными в приложении. Хранит и перезаписывает, отдает по запросу презентера и уведомляет подписчиков о своем обновлении.
- Slider - единственный видный пользователю слой, с которым тот взаимодействует тем самым передавая команды презентеру и получая через него же новые данные из модели для отображения. Поделен на подслои:
- ProgressBar
- Scale
- Runner
- Tip
- Presenter - создает Model, Slider, Presenter. Получает данные из представления, на основе которых обновляет модель и затем обновляет представление на основе обновленных данных в моделе
