Информация о проекте.

Название проекта: slider_ui.

Описание: Slider_ui, это многофукциональный слайдер, созданный в качестве учебного проекта для компании FSD. Он является плагином для популярной библиотеки jQuery, поэтому для его корректной работы вам предварительно потребуется установить ее.

Установка.

1. Скопируйте файлы находящиеся в репозитории в папку вашего проекта.
2. Выполните команду npm install для установки зависимостей.
3. Выполните команду npm run start/npm run build для запуска слайдера в режиме разработки/сборки проекта.

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

Для создания слайдера выполните команду $().slider(configuration). configuration выступает параметром слайдера и является объектом.

Для создания слайдера с натройками по умолчанию, вам потребуется передать объект с одним свойством - id, в формате #id.

Данная команда приведет к созданию слайдера в качестве дочернего элемента узла с идентификатором id.

Конфигурационный файл

Для инициализации слайдера с настройками по умолчанию, вам достаточно передать в качестве аргумента объект со свойством id. Также, в объекте вы можете указать дополнительные настройки. Это позволит вам переопределить настройки заданные по умолчанию.

В конфигурационном файле вы можете определить следующие свойства:

1. Минимальное значение minValue: number. По умолчанию 0: minValue: 0.
2. Максимальное значение maxValue: number. По умолчанию 100: maxValue: 100.
3. Количество шагов steps: number. По умолчанию 0: steps: 0.
4. Количество бегунков и их позиция в процентах от нуля до ста runners: []. По умолчанию один, процент 0: runners: [0].
5. Включить/Выключить шаги stepsOn: boolean,. По умолчанию выключены: stepsOn: false.
6. Вертикальное отображение vertical?: boolean. По умолчанию горизонтальное отображение: vertical: false.
7. Включить/Выключить линейку scaleOn: boolean. По умолчанию показывается: scaleOn: true.
8. Идентификатор родительского элемента id: string. По умолчанию неизвестно: id: undefined.
9. Показать/Скрыть панель управления panel: boolean. По умолчанию скрыта: panel: false.
10. Показать/Скрыть подсказки над бегунков tooltips: boolean. По умолчанию показываются: tooltips: true.

Примеры создания слайдера

1. С настройками по умолчанию. $().slider({id: #parent})

2. Вертикальный слайдер. $().slider({id: #parent, vertical: true})

3. С минимальным отрицательным значением. $().slider({id: #parent, minValue: -100})

4. С включенным шагом и 3 шагами. $().slider({id: #parent, steps: 3, stepsOn: true})

5. C включенной конфигурационной панелью. $().slider({id: #parent, panel: true})

API

Для получения доступа к API, вам потребуется сохранить значение возвращаемое методом slider в отдельную переменную: const SLIDER_API = $().slider(configuration).

Это позволит вам получить доступ к API и при необходимости, в любой момент изменить настройки слайдера при помощи javascript кода.

Доступное API

Ниже перечислены доступные API методы и показаны способы их применения.

1. Изменение минимального значения: SLIDER_API.minVal(number)

2. Изменение максимального значения: SLIDER_API.maxVal(number)

3. Включить/Выключить шаги: SLIDER_API.stepOn(boolean)

4. Изменить позицию бегунка: SLIDER_API.runners({position: number, index: number})

5. Включить/Выключить вертикальное отображение: SLIDER_API.vertical(boolean)

6. Включить/Выключить шаги: SLIDER_API.scaleOn(boolean)

7. Показать/Скрыть панель: SLIDER_API.panek(boolean)

8. Показать/Скрыть подсказки: SLIDER_API.tooltips(boolean)

9. Изменить родительский элемент слайдера: SLIDER_API.id(string)

Архитектура проекта

При создание проекта мы руководствовались паттерном проектированием MVP. При поверхностном взгляд, наш плагин состоит из 3 стандартных слоев - модели, контроллера и представления. Давайте рассмотрим каждый из слоев более подробно.

Модель

Модель является каркасом нашего приложения. Она реализована в виде единственного класса Model.

Ее непосредственными задачами являются:

1. Проверка корректности данных, переданных при инициализации.
2. Хранение данных переданных при инициализации.

Коммуникация модели с другими классами

В нашей программе модель не обращается к другим слоям приложения.

Контроллер

Контроллер выполняет функцию связующего звена между моделью и представлением. Его непосредственным задачами являются:

1. Получение данных от модели.
2. Изменение данных в модели.
3. Оповещеие предсталвления о необходимости отрисовки слайдера.

Коммуникация контролера с другими классами

Контроллер общается к модели в следующих случаях:

1. При необходимости получить свойство из конфигурации.
2. При необходимости изменить свойство из концигурации.
3. При необходимости получить всю конфигурацию.

Контроллер обращается к представлению в следующих случаях:

1. При инициализации слайдера.
2. При изменение состояние модели.

Функциональность контроллера

В контроллере реализована лишь необходимая функциональность. Это методы обеспечивающие:

1. Получение и отправку данных в сторону модели.
2. Вызывающие метод перерисовки слайдера.
3. Скрытие / Показ конфигурацинной панели, при изменение ее состояния модели.

Входящие классы

При помощи паттерна стратегия контроллер делегирует создание панели управления классу CreateForm, а обработки событий классу PanelChangeHandler.

При иницилизации слайдера создается экземпляр класса PanelChangeHandler, который передается классу CreateForm при запуске конструктора. Благодаря этому, создание конфигурационной панели и обработка событий инкапсулированы.

При изменение состояние конфигурационной панели обработчик событий PanelChangeHandler обращается к методу setModelProperty контроллера и вызывает метод update для перерисовки представления.

Представление

Представление отвечает за отрисовку слайдера и обработку пользовательских событий. Его основными задачи являются:

1. Отправка запросов на получение данных контроллеру.
2. Отправка данных контроллеру при взаимодействие пользователя со слайдером.
3. Отрисовка и перерисовка пользовательского интерфейса.
4. Обработка событий.

Коммуникация представления с другими классами

Представление обращается к контроллеру в следующих случаях:

1. При необходимости получения данных из модели.
2. При изменение состояния интерфейса, с которым взаимодействует пользователь.

Представление не обращается к модели, поскольку не знает о ее существование.

Функциональность представления

В базовом виде представление обладает следующей функциональностью:

1. Запрашивает данные у контроллера.
2. Отправляет данные контроллеру.
3. Отправляет контроллеру данные при изменение положение бегунков.
4. Устаналивает обработчики событий.
5. Удаляет обработчики событий.

Входящие классы

При помощи паттерна стратегия представление делегирует отрисовку классу Render. Класс Render выполняет отрисовку необходимых элементов, делегируя их создание и установку функций обработчиков другим классам.

Класс Render

Класс Render отвечает за создание слайдера. Его основными задачами являются.

1. Создание экземпляров классов, которым делегируется создание конкретных элементов слайдера.
2. Создание самого слайдера.
3. Определение контрольных точек остановки бегунка при включенном шаге.

Коммуникация с другими классами

1. Обращается к соддержащимся в нем классам, для создания элементов пользовательского интерфейса.
2. Определеяет точки остановки бегунков при включенном шаге и записывает эти данные в качестве свойства представление.

Функциональность класса Render

1. При инициализации создает экземпляры классов пользовательского интерфейса.
2. Определяет контрольные точки остановки бегунка.
3. Устанавливает обработчик событий onResize, для перерисовки слайдера в случае изменения разрешения экрана.

Входящие классы

При помощи паттерна стратегия в класс Render входят следующие классы:

1. rangeClass - отвечающий за создание тела слайдера.
2. runnerClass - отвечающий за создание бегунков.
3. tooltipClass - отвечающий за создание подсказок над бегунком.
4. progressClass - отвечающий за создание полос прогресса.
5. scaleClass - отвеающий за создание линейки.

Класс rangeClass Класс rangeClass отвечает за создание тела слайдера и обрабатывает клик по нему.

Коммуникация с другими классами Обращается к классу View для регистрации обработчика события click.

Демонстрация проекта Demonstration