FD-Step4

Отзывчивый JQuery-слайдер имеющий следующую функциональность:

Позволяет устанавливать рамер шага
Позволяет устанавливать максимальное и минимальное значение
Поддерживает два режима: промежуток и одно значение
Поддерживает два вида: горизонтальный и вертикальный
Позволяет отключать и включать элемент над бегунком, который показывает значение
Предоставляет возможность изменять значение кликом на значение шкалы или на дорожку слайдера
Создает шкалу, кол-во делений в которой зависит от размера шкалы

Инициализация проекта

Установка зависимостей: npm install.
Сборка проекта: npm run build.
Запуск проекта на локальном сервере: npm run dev.
Развертывание проекта на gh-pages: npm run deploy.
Прогон тестов и отображение покрытия кода тестами: test:coverage.

Подключение слайдера к странице

Для подключения слайдера к странице необходимо подключить JQuery и подключить к странице файлы slider.js и slider.css, который лежат в папке public.

Создание слайдера

$('#my-slider').slider(options);

Options:

isRange

Определяет режим работы слайдера: промежуток или одно значение
тип: boolean
по умолчанию: false

isTipsExists

Если true, то подсказки с значениями включены
тип: boolean
по умолчанию: false

maxValue

Минимальное значение слайдера
тип: number
по умолчанию: 100

minValue

Максимальное значение слайдера
тип: number
по умолчанию: 0

orientation

Определяет вид слайдера. Может принимать два значения: 'horizontal'(горизонтальный) и 'vertical'(вертикальный)
тип: string
по умолчанию: 'horizontal'

highValue

Значение большего бегунка
тип: number
по умолчанию: 100

lowValue

Значение меньшего бегунка( или единственного, если isRange: false)
тип: number
по умолчанию: 0

step

Шаг слайдера
тип: number
по умолчанию: 1

В случае передачи невалидных параметров, будут использоваться параметры по умолчанию.

Использованные библиотеки и плагины:

API Слайдера

Также Слайдер имеет API для изменения и получения значений на лету

Получение значений:

Имя	Возвращаемое значение	Описание
isRange	boolean	Если возвращаемое значение true, то слайдер в режиме промежутка, если false - то в режиме одного значение
getMinValue	number	Возвращает минимальное значение слайдера
getMaxValue	number	Возвращает максимальное значение слайдера
getHighValue	number	Возвращает значение большего бегунка
getLowValue	number	Возвращает значение меньшего бегунка(или единственного, если isRange: false)
getStep	number	Возвращает шаг слайдера
getOrientation	string	Возвращает вид слайдера(горизонтальный или вертикальный)
getTipsExistStatus	boolean	Если возвращаемое значение true, то подсказки включены

Изменение значений:

Имя	Принимаемые аргументы	Возвращаемое значение	Описание
setRangeMode	isRange: boolean		Если принимаемое значение true, то переводит слайдер в режим промежутка, если false - то в режим одного значение
setMinValue	minValue: number		Изменяет минимальное значение слайдера
setMaxValue	maxValue: number	boolean	Изменяет максимальное значение слайдера. Возвращает true, если изменение прошло успешно
setHighValue	highValue: number	boolean	Изменяет значение большего бегунка. Возвращает true, если изменение прошло успешно
setLowValue	lowValue: number		Изменяет значение меньшего бегунка(или единственного, если isRange: false)
setStep	step: number	number	Изменяет шаг слайдера. Возвращает true, если изменение прошло успешно
setOrientation	orientation: string		Изменяет вид слайдера(горизонтальный или вертикальный). Принимает только 'horizontal' и 'vertical'
hideTips			Отключает подсказки
showTips			Включает подсказки

Событие

При изменении значений настроек слайдера, генерируется событие 'slider-change' на корневом DOM-элементе слайдера.

Хранит бизнес-данные слайдера: значения, граничные значения, шаг и режим слайдера(промежуток или одиночное значение). Является одновременно и фасадом(т.е. предоставляет методы для чтения и изменения данных и валидирует приходящие данные) и издателем(т.е. оповещает подписчиков об изменениях). Не имеет зависимостей с другими модулями.

Вид

Является графическим отображением Модели и через него пользователь может изменять Модель. Вид имеет главный класс View, который является одновременно и фасадом для всего Вида и издателем(оповещает подписчиков об определенных действиях пользователя). Сам по себе View являет оберткой корневого DOM-элемента слайдера. Также есть классы Range, Strip, Tip, Scale, ScaleSubElement и Runner. Все эти классы являются частями слайдера, т.е. обертками DOM-элементов слайдера и предоставляют методы для работы с ними. Также все они являются наследниками абстрактного класса ViewComponent.

Общение между компонентами Вида происходит следующим образом. View создает нужные экземпляры классов и имеет ссылки на них, но сами экземпляры, т.е. остальные компоненты Вида не знают и View. При действиях пользователя на DOM-элементе компонента(Runner, Stripe, Scale) генерируется кастомное событие, которое хранит нужные данные, а View уже посредством всплытия этих событий их отлавливает и обрабатывает. Обработка в свою очередь подразумевает оповещение подписчиков о произошедшем событии.

Для поддержки горизонтального и вертикального вида имеется класс OrientationBehavior. Он хранит методы, которые используют компоненты для изменения позиций своих DOM-элементов нужным образом. Он хранит приватное свойство Orientation, по которому он и выбирает каким образом изменять позиции элементов: вертикально или горизонтально. Компоненты хранят экземпляр OrientationBehavior. При создании слайдера, Вью создает экземпляр OrientationBehavior c нужной ориентацией и передает этот экземпляр остальным подэлементам Вью. В случае изменения ориентации слайдера Вью изменяет свойство Orientation этого объекта через сеттер.

Вид не знает ни о Контроллере, ни о Модели.

Контроллер

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

Класс Controller является основным классом Контроллера и обрабатывает оповещения от Модели и Вида.

UML-диаграма

RuefulMage/FD-Step4