Skip to content
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

whiteGloom Nyc coverage update #31
Список изменений:
• добавлен плагин показывающий покрытие тестами;
• добавлена некоторая спека;

#31
Latest commit 7d1ef33 Jan 19, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
spec 1.2.13 patch Oct 16, 2019
src Nyc coverage update #31 Jan 19, 2020
webpackConfigs Webpack config update #20 Dec 10, 2019
.babelrc v1.8.6 patch Dec 3, 2019
.eslintrc.js Eslint update #14 Jan 19, 2020
.gitattributes Initial commit Jul 5, 2019
.gitignore Nyc coverage update #31 Jan 19, 2020
LICENSE 1.2.12 patch Oct 16, 2019
README.md Readme update. Jan 11, 2020
package-lock.json Nyc coverage update #31 Jan 19, 2020
package.json Nyc coverage update #31 Jan 19, 2020
updateBranches.js Webpack config update #20 Dec 10, 2019
webpack.config.js

README.md

Alert:

The README is outdated! It will be updated in a short time.

Languages

Шо ита? [RU]

↓ К навигации | ↑ To languages

wRunner — плагин, добавляющий слайдер (бегунок) для выбора значения. В плагине есть возможность устанавливать темы, шаг, минимальное и максимальное значение и т.д. Имеет два вида — одиночное и диапазон, а так же вертикальное и горизонтальное положение. Имеет две реализации — на "чистом" JS и на основе jQuery.

Строение плагина — MVP с пассивным view. Три части программы, две из которых (view и модель) независимы от других. Presenter является связующим слоем, которому известно о двух других слоях. Он передаёт, в случае необходимости, данные в другие слои (через обсервер), хранит методы для добавления внешних обработчиков событий. Над всем стоит надстройка, которая оберегает пользователя от нежелательных изменений в плагине — собирает все три части в один слайдер, связует их, собирает пакет методов для работы с плагином.

Демо-страница плагина

Диаграмма структуры плагина

В проекте используются:

Внимание! jQuery версия слайдера требует jQuery, версией не ниже 3.4.1.

Навигация

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

Создание экземпляра

Для JS Native версии:

  1. Подключить на странице файл wrunner-native.js
  2. Выполнить команду: var slider = wRunner(options);

Для jQuery версии:

  1. Подключить на странице jquery, версией не меньше 3.4.1
  2. Подключить на странице файл wrunner-jquery.js
  3. Выполнить команду: $(DOM element).wRunner([options]);

Arguments:

↑ К навигации

Инструкция для работы с исходным кодом

Развёртывание проекта Для установки зависимостей использовать:

npm install

Команды npm

  • npm run build - разовая сборка проекта;
  • npm run build-watch - запуск автоматической пересборки;
  • npm run build-live - запуск сервера;
  • npm run test - запуск тестов;

Aliases (сокращения): Алиасы прописываются в файле package.json (находится в корневом каталоге), в параметре _moduleAliases, и должны начинаться с символа @. Webpack и Jasmine автоматически подгрузят сокращения.

Пример:

// Создание сокращения.
// Файл "package.json":
{
	...
	"scripts": { ... },
	"_moduleAliases": {
		"@ИмяСокращения": "./путьДоСокращения",
		"@test": "./test.js"
	},
	...
}

↑ К навигации

Методы

setType method

Меняет тип слайдера.

.setType(type)

Arguments:

  • type - type: string. Avaible values: перечислены в typeConstants (см. getTypes method).

Returns: Object. Properties:

  • value - type: string. Тип слайдера.
  • typeConstants - type: object. Список зарезервированных значений.

Triggering: onTypeUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setLimits method

Меняет минимально и максимально возможные значения слайдера.

.setLimits([options])

Arguments:

  • options - type: object. Properties:
    • minLimit - type: number. Default - минимальное значение.
    • maxLimit - type: number. Default - максимальное значение.

Note: Если минимальное значение бальше максимального, то они будут поменяны местами.

Returns: Object. Properties:

  • minLimit - type: number. Минимальное значение слайдера.
  • maxLimit - type: number. Максимальное значение слайдера.
  • valuesCount - type: number. Количество допустимых занчений. (максимальное - минимальное)

Triggering: onLimitsUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setStep method

Меняет шаг слайдера.

.setStep(step)

Arguments:

  • step - type: number. Avaible values: 1 - infinity.

Returns: Number - шаг слайдера

Triggering: onStepUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setSingleValue method

Меняет значение слайдера для типа "single". Если сменить тип слайдера, значение сохраниется. Можно использовать и тогда, когда тип слайдера иной.

.setSingleValue([value])

Arguments:

  • value - type: number. Defalut: значение слайдера.

Note: Если значение слайдера выходит за границы, то оно приравнивается ближайшей границе.

Returns:

  • Object. Properties:
    • value - type: number. Значение слайдера.
    • selected - type: number. Количество "выделенных" значений (значение - минимальное значение слайдера)

Triggering: onValueUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setRangeValue method

Меняет значение слайдера для типа "range". Если сменить тип слайдера, значение сохраняется. Можно использовать и тогда, когда тип слайдера иной.

.setRangeValue([values])

Argumetns:

  • values - type: object. Properties:
    • minValue - type: number. Defaults: текущее меньшее значение. Меньшее значение слайдера
    • maxValue - type: number. Defaults: текущее большее значение. Большее значение слайдера

Notes:

  • Если значение слайдера выходит за границы, то оно приравнивается ближайшей границе.
  • Если меньшее значение становится больше, чем большее, то они меняются местами.

Returns:

  • Object. Properties:
    • minValue - type: number. Меньшее значение слайдера.
    • maxValue - type: number. Большее значение слайдера.
    • selected - type: number. Количество "выделенных" значений (большее значение - меньшее значение)

Triggering: onValueUpdate, передаёт тоже, что и возвращает.

setValueNoteDisplay method

Меняет отображение показателя значения над бегунком.

.setValueNoteDisplay(value)

Arguments:

  • value - type: boolean.

Returns: Boolean - отображение показателя надбегунком.

Triggering: onValueNoteDisplayUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setNearestValue method

Меняет ближайшее к передаваемому аргументу значение слайдера.

.setNearestValue(value, viaPercents)

Arguments:

  • value - type: number. Новое начение.
  • viaPercents - type: number. Процентное значение.

Notes:

  • Если тип слайдера - "single", то просто изменит его значение.
  • Новое значение, при аргументе viaPercents равном true, расчитывается путём умножения количества допустимых значений на передаваемое значение.
  • Ближайшее значение определяется путём сложения меньшего и большего значений и деления результата на 2. Если передаваемое значение меньше этого результата, то меняется меньшее значение, иначе - большее.

Examples:

.setLimits({minLimit: 0, maxLimit: 100}); // Минимальное значение: 0, максимальное: 100
.setType("single") // Тип слайдера: "single"
.setSingleValue(50); // Значение слайдера: 50

.setNearestValue(75) // Принимая 75, изменит единичное значение слайдера на 75
.setNearestValue(75, true) // Принимая 75%, изменит единичное значение слайдера на 75

.setLimits({minLimit: 0, maxLimit: 100}); // Минимальное значение: 0, максимальное: 100
.setType("single") // Тип слайдера: "range"
.setRangeValue({minValue: 20, maxValue: 80}); // Меньшее значение 20, большее 80

.setNearestValue(75) // Принимая 75, ближайшим будет большее значение слайдера, изменит его на 75
.setNearestValue(75, true) // Принимая 75%, ближайшим будет большее значение слайдера, изменит его на 75

Returns: Передаёт управление функциям setSingleValue или setRangeValue (В зависимости от текущего типа слайдера), возвращает результат их работы.

↑ К навигации


setDivisionsCount method

Меняет количество делений под слайдером.

.setDivisionsCount(count)

Arguments:

  • count - type: number. Avaible values: 0 - infinity.

Note: Если попытаться установить количество равным 1, то оно будет увеличено до 2.

Returns: Number - количество делений под слайдером

Triggering: onDivisionsCountUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setRoots method

Менеят корневой элемент слайдера.

.setRoots(roots)

Arguments:

  • roots - type: DOM element.

Returns DOM element - корневой элемент слайдера

Triggering: onRootsUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setTheme method

Меняет тему слайдера.

.setTheme(theme)

Arguments:

  • theme - type: string

Returns: String - тема

Triggering: onThemeUpdate, передаёт тоже, что и возвращает.

↑ К навигации


setDirection method

Меняет положение слайдера.

.setDirection(direction)

Arguments:

  • direction - type: string. Avaible values: перечислены в directionConstants (см. getDirection method)

Returns: Object. Properties:

  • value - type: string. Значение положения.
  • constants - type: object. Список зарезервированных значений в формате {horizontalValue: "horizontal"}.

Triggering: onDirectionUpdate, передаёт тоже, что и возвращает.

↑ К навигации


getType method

Возвращает типы слайдера

.getType()

Returns:

Object. Properties:

  • value - type: string. Текущий тип слайдера.
  • typeConstants - object. Properties:
    • singleValue / rangeValue - type: string. Список зарезервированных значений в формате {horizontalValue: "horizontal"}.

↑ К навигации


getStep method

Возвращает текущий шаг слайдера

.getStep()

Returns: Number

↑ К навигации


getLimits method

Возвращает текущие минимально и максимально возможные значения слайдера

.getLimits()

Returns: Object. Properties:

  • minLimit - type: number. Минимальное значение слайдера.
  • maxLimit - type: number. Максимальное значение слайдера.
  • valuesCount - type: number. Количество допустимых занчений. (максимальное - минимальное)

↑ К навигации


getValue method

Возвращает значение слайдера.

.getValue()

Returns:

  • Если тип слайдера - "single":
    • Object. Properties:
      • value - type: number. Значение слайдера.
      • selected - type: number. Количество "выделенных" значений (значение - минимальное значение слайдера)
  • **Если тип слайдера - "range":
    • Object. Properties:
      • minValue - type: number. Меньшее значение слайдера.
      • maxValue - type: number. Большее значение слайдера.
      • selected - type: number. Количество "выделенных" значений (большее значение - меньшее значение)

↑ К навигации


getRoots method

Возвращает текущий корневой элемент слайдера.

.getRoots()

Returns DOM element

↑ К навигации


getValueNoteDisplay method

Возвращает отображение показателя значения над бегунком.

getValueNoteDisplay()

Returns: Boolean

↑ К навигации


getDivisionsCount method

Возвращает количество делений под слайдером.

.getDivisionCount method

Returns: Number

↑ К навигации


getTheme method

Возвращает тему слайдера.

.getTheme()

Returns: String

↑ К навигации


getDirection method

Возвращает положение слайдера.

.getDirection()

Returns: Object - Properties:

  • value - type: string. Значение положения.
  • constants - type: object. Список зарезервированных значений в формате {horizontalValue: "horizontal"}.

↑ К навигации


События

onStepUpdate method

Устанавливает функцию-обработчик, вызываемую при обновлении шага слайдера

.onStepUpdate(function(step){
	...
})

Передаваемые значения: Смотреть setStep method

↑ К навигации


onTypeUpdate method

Устанавливает функцию-обработчик, вызываемую при обновлении типа слайдера

.onTypeUpdate(function(type){
	...
})

Передаваемые значения: Смотреть setType method

↑ К навигации


onLimitsUpdate method

Устанавливает функцию-обработчик, вызываемую при обновлении крайних значений слайдера

.onLimitsUpdate(function(limits){
	...
})

Передаваемые значения: Смотреть setLimits method

↑ К навигации


onValueUpdate method

Устанавливает функцию-обработчик, вызываемую при обновлении значений слайдера

.onValueUpdate(function(values){
	...
})

Передаваемые значения: Смотреть setValue method

↑ К навигации


onRootsUpdate method

Устанавливает функцию-обработчик, вызываемую при обновлении корневого элемента слайдера

.onRootsUpdate(function(roots){
	...
})

Передаваемые значения: Смотреть setRoots method

↑ К навигации


onDivisionsCountUpdate method

Устанавливает функцию-обработчик, вызываемую при изменении количества делений внизу слайдера

.onDivisionsCountUpdate(function(count){
	...
})

Передаваемые значения: Смотреть setDivisionsCount method

↑ К навигации


onValueNoteDisplayUpdate method

Устанавливает функцию-обработчик, вызываемую при изменении отображения показателя значения над бегунком

.onValueNoteDisplayUpdate(function(value){
	...
})

Передаваемые значения: Смотреть setValueNoteDisplay method

↑ К навигации


onThemeUpdate method

Устанавливает функцию-обработчик, вызываемую при обновлении темы слайдера

.onThemeUpdate(function(styles){
	...
})

Передаваемые значения: Смотреть setTheme method

↑ К навигации


onDirectionUpdate method

Устанавливает функцию-обработчик, вызываемую при обновлении положения слайдера

.onDirectionUpdate(function(styles){
	...
})

Передаваемые значения: Смотреть setDirection method

↑ К навигации


Всё.

-whiteGloom

You can’t perform that action at this time.