v 0.9.8

Вступление #

Кастомизация поля "выбор количества", можно использовать по умолчанию класс .js-quantity-selector.

Установка #

Пример разметки и инициализации поля.

<input class="js-quantity-selector" type="number" min="0" max="100" step="25" />

// настройки элемента, все они описаны в разделе "Конфигурация".
const options = {
	decInner: 'Minus',
	incInner: 'Plus',
	addClass: ['quantity-selector-A', 'quantity-selector-B'],
}

BasicQuantitySelector.init('.my-quantity-selector', options)
BasicQuantitySelector.init(document.querySelector('.my-quantity-selector'), options)
BasicQuantitySelector.init(document.querySelectorAll('.my-quantity-selector'), options)

// или

BasicQuantitySelector.init() // по умолчанию инициaлизирует элементы с классом .js-quantity-selector

Конфигурация #

Стандартные параметры, которые задаются с помощью обычных атрибутов.

Название Тип Описание
min number Минимальное число для выбора.
max number Максимальное число для выбора.
step number Шаговый интервал для изменения значения, принимает так же числа с плавающей запятой.

data-selector-options #

В значении указываются параметры для гибкой настройки кастомизированного "выбор количества".

<input
	class="js-quantity-selector"
	data-selector-options='{
			"decInner": "Minus",
			"incInner": "Plus",
			"addClass": ["quantity-selector-A", "quantity-selector-B"]
		}'
	type="number"
	min="0"
	max="100"
	step="25"
/>

Параметры:

Название Тип Описание
decInner string Контент триггера "уменьшения"(decrement).
incInner string Контент триггера "увеличения"(increment).
addClass string/object Дополнительные классы для родительской обёртки(.quantity-selector).

Методы #

value() #

Добавить новое значение в селектор.

BasicQuantitySelector.value({
	el: document.querySelector('.my-quantity-selector'), // так же принимает строковое значение
	value: 100,
})

Где в конфигурациях указывается:

Название Тип Описание
selector string/object Селектор, которому необходимо добавить значение, по умолчанию .js-quantity-selector.
value number Принимает значение в виде числа и которое необходимо добавить в селектор.

clear() #

Очистить селектор от значения.

// так же принимает строковое значение
BasicQuantitySelector.clear(document.querySelector('.my-quantity-selector'))

Прослушивание событий #

Можно прослушать события элемента и получить необходимые параметры.

quantitySelector:change #

Срабатывает при изменении значения поля.

Параметры:

Название Тип Описание
event.detail.element object Элемент, на котором сработало событие.
event.detail.value number Эначение элемента.
event.detail.step number Шаговый интервал для изменения значения.
event.detail.min number Минимальное число для выбора.
event.detail.max number Максимальное число для выбора. 
document.querySelector('.my-quantity-selector').addEventListener(
	'quantitySelector:change',
	function () {
		console.log(event.detail) // параметры
	},
	false,
)