Плагин для jQuery, который реализовывает функционал «бегунка» (также называемого слайдером) — специальный контрол, который позволяет перетягиванием задавать какое-то числовое значение.
https://wzdorowa.github.io/jQuery-slider/
git clone https://github.com/wzdorowa/jQuery-slider
npm install
Сборка проекта: npm run dev
Запуск тестов: npm run test
Для подключения слайдера на страницу необходимо вызвать функцию slider() на html-элементе:
$('.js-slider-test').slider();
Слайдер инициализируется со значениями изъятыми из data-атрибутов элемента для отрисовки слайдера.
Установить data-атрибуты можно при разметке элемента на странице, например:
<div class='slider-test js-slider-test' data-min='20' data-step='5' data-thumbs-values='[25, 45, 65]'>
Изменение параметров слайдера извне или получение данных об актуальном состоянии слайдера достигается путем вызова определенных методов на элементе слайдера для передачи данных.
Под element в примере ниже подразумевается html-блок на котором отрисовывается слайдер.
const slider = element.data();
slider.getState() - получить актуальное состояние слайдера;
slider.update(state) - передать данные для установки нового состояния слайдера;
slider.subscribeToStateChanges((state) => { // здесь обрабатать полученное состояние }); - подписаться на изменение состояния слайдера;
slider.subscribeToThumbsChanges((thumbsValues: number[]) => { // здесь обработать полученный массив значений }); - подписаться на изменение значений бегунков;
Использует экземпляр класса Controller для обеспечения возможности изменения параметров слайдера извне или получения данных об актуальном состоянии слайдера.
Создает экземпляры View, Model и EventEmitter. Использует EventEmitter для корректного реагирования на изменения состояния слайдера и для отслеживания необходимости запроса на изменение значения бегунка. При изменении состояния слайдера, регулирует работу вида.
Предоставляет доступ к методам:
getState(): IModelState - возвращает текущее состояние слайдера;
updateState(state: unknown): void - принимает новое состоняние, валидирует его и вызывает метод модели для обновления текущего состояния слайдера;
Управляет событиями и реализует возможность любым элементам "подписаться" на них и быть вкурсе происходящего.
Предоставляет доступ к методам:
makeSubscribe(eventName: string, fn: CallbackFunctionVariadic): void - принимает в качестве аргументов название события в строковом виде (например, 'event:name-changed') и функцию, которая будет вызываться, когда будет инициироваться транслируемое событие;
emit(eventName: string, data: object): void - принимает имя события в строковом виде, которое мы хотим всем транслировать, и данные, которые будут отправляться в момент этого события. Если в экземпляре класса сохранены какие-то подписанные на него события, мы проходимся по каждому из них и вызываем каждое, передавая ему данные, которые хотим транслировать;
Реализует интерфейс IModelState, который описывает стуктуру данных, находящихся в публичном поле модели state. Хранит в себе текущее состояние слайдера и логику для изменения этого состояния. Использует EventEmitter для для извещения других модулей об изменении текущего состояния слайдера. Предоставляет доступ к данным:
- min - минимальное значение слайдера
- max - максимальное значение слайдера
- thumbsValues - массив значений бегунков слайдера
- orientation - ориентация слайдера
- step - размер шага слайдера
- hasTooltips - наличие тултипов над бегунками
- hasScaleValues - наличие шкалы значений прогресс бара
Предоставляет доступ к методам:
updateState(state: IModelState): void - принимает новое состоняние, нормализует его и перезаписывает текущее состояние, затем оповещает об изменении текущего состояния;
requestThumbValueChange(value: number, index: number): void - принимает значение бегунка и его индекс для определения необходимости изменения текущего состояния;
setNewThumbValue(thumbValue: number, index: number): void принимает значение бегунка и его индекс, перезаписывет по переданному индексу свойство thumbsValues текущего состояния, проверяет значения бегунков на пересечения и оповещает об изменении значений бегунков;
Создает экземпляры ProgressBar и Thumb. Использует EventEmitter для создания экземпляров классов ProgressBar и Thumb. Использует интерфейс IModelState для передачи текущего состояния в методы созданных экзкмпляров prograssBar и thumb по необходимости. Реализует интерфейс IAdapter для корректной отрисовки ориентации вида.
Предоставляет доступ к методам:
initialize(state: IModelState): void - принимает состояние слайдера и создает экземляры классов ProgressBar и Thumb;
render(state: IModelState): void - принимает состояние слайдера и вызывает методы экземляров классов ProgressBar и Thumb для отрисовки компонентов слайдера;
update(thumbsValues: number[]): void - принимает массив значений бегунков для перерисовки их позиций;
Отвечает за отрисовку прогрессбара слайдера. При необходимости создает экземпляр класса Scale. Использует EventEmitter для оповещения о необходимости изменения позиции бегунка. Так же использует интерфейсы IModelState и IAdapter.
Предоставляет доступ к методам:
renderProgressBar(state: IModelState, adapter: IAdapter): void - принимает состояние и адаптер, и отрисовывает прогрессбар слайдера. При необходимости создает экземпляр класса Scale и вызывает его метод для отрисовки шкалы значений;
updateActiveRange(thumbsValues: number[]): void - принимает массив значений бегунков для отрисовки активного диапазона прогрессбара;
getPointSize(min: number, max: number): number | null - принимает минимальное и максимальное значениия слайдера для вычисления коэффициента деления прогрессбара;
Отвечает за отрисовку шкалы значений слайдера. Использует EventEmitter для оповещения о необходимости изменения позиции бегунка. Так же использует интерфейсы IModelState и IAdapter.
Предоставляет доступ к методам:
renderDivisions(state: IModelState): void - принимает состояние и отрисовывает шкалу значений слайдера;
Отвечает за отрисовку бегунка слайдера его корректную установку на прогрессбаре и перемещение. Использует EventEmitter для оповещения об изменении позиции перемещаемого бегунка. Использует интерфейсы IModelState и IAdapter. При необходимости создает экземпляр класса Tooltip.
Предоставляет доступ к методам:
renderThumb(state: IModelState, adapter: IAdapter, getPointSize: ((min: number, max: number) => number | null) | null): void - принимает состояние слайдера, адаптер и метод для вычисления коэффициента деления прогрессбара, и отрисовывает бегунок. При необходимости создает экземпляр класса Tooltip и вызывает его метод для отрисовки подсказки.
setValueThumb(thumbValue: number): void - устанавливает в стили бегунка значение в пикселях для отрисовки в соответствии с заданным значением.
Отвечает за отрисовку подсказки с выводом значения бегунка.
Предоставляет доступ к методам:
createTooltip(thumb: HTMLElement, orientation: string): void - принимает элемент бегунка и ориентацию вида, и отрисовывает подсказку;
Описывает интерфейс сосояния сладера;
Описывает интерфейс необходимый для определения ориентации вида.
Обмен данными между слоями в большей степени осуществляется при помощи ивент эмиттера:
-
Контроллер подписывается на изменения в состоянии модели и на изменение позиции бегунка.
-
Как только в состоянии произошли изменения, контроллер по подписке получает новые данные и вызывая методы вида отрисовывает/перерисовывает слайдер.
-
Как только положение бегунка изменяется, контроллер получает данные об изменении позиции бегунка и делает запрос на изменение состояния слайдера посредством метода модели, после чего модель определенным образом обрабатывает полученные данные и оповещает об изменении своего состояния. Затем повторяется шаг 2.