Slider plugin

Навигация

• Описание
• Установка
• Подключение к странице и настройка
  • Изменение настроек на лету
• Используемые технологии
• Архитектурная документация
  • UML диаграмма классов
• Техническая документация
• Demo страница

Описание

Slider - простой и функциональный слайдер, который имеет такие возможности как:

• Принимать, как массив строк, так и численные значения в формате "от: N, до: M"
• Использование одного или двух ползунков для выбора промежуточного значения
• Работа как в горизонтальной, так и в вертикальной ориентации
• Выбор шага значений (работает как в численных значениях, так и в строковых)
• Скрытие и показ значений над бегунком/бегунками
• Изменение всего вышеперечисленного динамически
• При клике на линию слайдера к ней подтянется ближайший бегунок
• При ресайзе страницы слайдер не сломается

Установка

• npm run prod для сборки проекта
• npm run dev для запуска локального дев сервера
• npm run test для запуска тестов и проверки покрытия приложения

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

$(yourJQueryElement).slider(options);

Где options является объектом с такими свойствами, как:

options = {
  orientation: horizontal/vertical,
  isRange: true/false,
  isShowValue: true/false,
  step: number,
  values: {from: M, to: N}/string[],
};

Изменение настроек на лету

$(yourJQueryElement).sliderApp(methodName, argument);

methodName строка с именем метода

argument аргумент с которым будет вызван метод

• С этой связкой слайдер скроет/покажет значение над бегунками

  methodName = 'changeShowValues';
  argument // в этом случае можно опустить

• С этой связкой слайдер скроет/покажет второй ползунок

  methodName = 'changeRangeState';
  argument // в этом случае можно опустить

• Cлайдер изменит размер шага на 4

  methodName = 'changeStep';
  argument = '4'; // размер шага принимается в виде строки!

• Слайдер изменит значения на string[]

  methodName = 'changeValues';
  argument = string[];

Используемые технологии

• TypeScript
• Typedoc
• jQuery
• Jest
• ESLint
• Webpack

Архитектурная документация

В плагине используется MVP Архитектура.

MVP состоит из трех основных частей, а именно:

• Model - Данные, необходимые для отображения
• View - Представление данных из модели
• Presenter - Реализует взаимодействие между View и Model и содержит в себе бизнес-логику приложения

Архитектуру дополняет EventEmitter, который служит для оповещения Presenter из View. Этот подход позволяет инкапсулировать Model и View друг от друга.

С помощью MVP и EventEmitter были достигнуты такие фишки, как:

• Разделение ответственности приложения(каждый модуль отвечает за отдельную задачу)
• Читаемость кода
• Полная инкапсуляция View от Model и Model от View
• Tестировать приложение становится гораздо проще

UML диаграмма классов

Техническая документация

Техническая документация сгенерирована из комментариев в коде с помощью Typedoc. С ней можно ознакомиться здесь.

Demo страница

Demo страница предназначена для предварительного просмотра приложения.

Для просмотра перейдите по ссылке => клик ми!