Кастомизируемый независимый плагин для JQuery, реализующий функционал "бегунка" (также называемого слайдером) - специальный контрол, который позволяет перетягиванием задавать какое-то числовое значение.
Демонстрацию слайдера можно увидеть здесь
Команды для установки и работы плагина:
npm install(установка пакета из файлаpackage.json);npm run test(выполнение тестирования с покрытием кода);npm run dev(запуск пакета в режиме разработки с сервером);npm run build(сборка для продакшена);
Плагин подключается на любом div-элементе. Примеры инициализации слайдера:
- со стандартными параметрами:
$('selector').adslider({});- с заданными параметрами:
$('selector').adslider({
limits: { min: 0, max: 100 },
hasValueNote: true,
step: 15,
isDouble: true,
from: 40,
to: 90,
isVertical: true,
});- с заданными параметрами, используя только data-атрибуты элемента-контейнера:
<div data-step="5" data-has-Value-Note="false" data-limits={ min: 6, max: 105 }></div>| Параметр | Тип | Описание |
|---|---|---|
| limits | object | Данный объект устанавливает 2 значения: min и max, в которых указываются соответственно минимальное и максимальное значения бегунка слайдера |
| curValue | number | Устанавливает текущее значение бегунка для одиночного слайдера |
| hasValueNote | boolean | Включает/отключает элемент над бегунком, который показывает текущее значение бегунка |
| step | number | Устанавливает шаг бегунка |
| isDouble | boolean | Включает/отключает диапазонный вид слайдера |
| from | number | Устанавливает значение "от" в диапазонном слайдере |
| to | number | Устанавливает значение "до" в диапазонном слайдере |
| isVertical | boolean | Включает/отключает вертикальный вид слайдера |
$('selector').adslider('update', {
limits: { min: 10, max: 90 },
hasValueNote: true,
step: 10,
isDouble: true,
from: 30,
to: 80,
isVertical: true,
});$('selector').adslider('getOptions');- упаковщик веб-приложений Parcel
- шаблонизатор и HTML-препроцессор Pug
- препроцессор SCSS
- язык программирования Typescript
- библиотека Java-script для тестирования Jest
В качестве концепции принята модель MVP-архитектуры с Passive View. Приложение поделено на 3 слоя: Model, View и Presenter.
Model - это слой, в котором представлена бизнес-логика приложения без отображения каких-либо элементов на странице.
View - слой для управления отображением, содержит логику отображения элементов на странице. Данный слой декомпозирован на отдельные компоненты (SubViews) для более удобного развития и поддержки кода.
Presenter - отдельный слой для для обновления модели и отображения. Это - единственный слой среди трех, который может иметь зависимость от других слоев. Он будет:
- реагировать на сообщения от отображения о действиях пользователей и обновлять модель;
- реагировать на сообщения об обновлении модели и обновлять отображение.
Для сведения к минимуму зависимости слоев между собой применяется паттерн проектирования Observer (Наблюдатель), реализующий у слоя механизм, который позволяет объекту этого слоя получать оповещения об изменении состояния других объектов в других слоях и тем самым наблюдать за ними.
