mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 06:22:25 +02:00
Add jQuery example to documentation
This commit is contained in:
parent
6a6988f71b
commit
677d3a5582
|
@ -22,6 +22,9 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
|
||||||
// Pass reference
|
// Pass reference
|
||||||
const choices = new Choices('[data-choice']);
|
const choices = new Choices('[data-choice']);
|
||||||
const choices = new Choices('.js-choice');
|
const choices = new Choices('.js-choice');
|
||||||
|
|
||||||
|
// Pass jQuery element
|
||||||
|
const choices = new Choices($('.js-choice')[0]);
|
||||||
|
|
||||||
// Passing options (with default options)
|
// Passing options (with default options)
|
||||||
const choices = new Choices(elements, {
|
const choices = new Choices(elements, {
|
||||||
|
|
|
@ -844,97 +844,94 @@ export class Choices {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_onMouseDown(e) {
|
_onMouseDown(e) {
|
||||||
// If not a right click
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
// if(e.button !== 2) {
|
const target = e.target || e.touches[0].target;
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
|
||||||
const target = e.target || e.touches[0].target;
|
|
||||||
|
|
||||||
// If click is affecting a child node of our element
|
// If click is affecting a child node of our element
|
||||||
if(this.containerOuter.contains(target)) {
|
if(this.containerOuter.contains(target)) {
|
||||||
|
|
||||||
// Prevent blur event triggering causing dropdown to close
|
// Prevent blur event triggering causing dropdown to close
|
||||||
// in a race condition
|
// in a race condition
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const hasShiftKey = e.shiftKey ? true : false;
|
const hasShiftKey = e.shiftKey ? true : false;
|
||||||
|
|
||||||
if(!this.dropdown.classList.contains(this.config.classNames.activeState)) {
|
if(!this.dropdown.classList.contains(this.config.classNames.activeState)) {
|
||||||
if(this.passedElement.type !== 'text') {
|
if(this.passedElement.type !== 'text') {
|
||||||
// For select inputs we always want to show the dropdown if it isn't already showing
|
// For select inputs we always want to show the dropdown if it isn't already showing
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
}
|
|
||||||
|
|
||||||
// If input is not in focus, it ought to be
|
|
||||||
if(this.input !== document.activeElement) {
|
|
||||||
this.input.focus();
|
|
||||||
}
|
|
||||||
} else if(this.passedElement.type === 'select-one' && this.dropdown.classList.contains(this.config.classNames.activeState) && e.target === this.containerInner) {
|
|
||||||
this.hideDropdown();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// If input is not in focus, it ought to be
|
||||||
|
if(this.input !== document.activeElement) {
|
||||||
|
this.input.focus();
|
||||||
|
}
|
||||||
|
} else if(this.passedElement.type === 'select-one' && this.dropdown.classList.contains(this.config.classNames.activeState) && e.target === this.containerInner) {
|
||||||
|
this.hideDropdown();
|
||||||
|
}
|
||||||
|
|
||||||
if(target.hasAttribute('data-button')) {
|
if(target.hasAttribute('data-button')) {
|
||||||
// If we are clicking on a button
|
// If we are clicking on a button
|
||||||
if(this.config.removeItems && this.config.removeItemButton) {
|
if(this.config.removeItems && this.config.removeItemButton) {
|
||||||
const itemId = target.parentNode.getAttribute('data-id');
|
const itemId = target.parentNode.getAttribute('data-id');
|
||||||
const itemToRemove = activeItems.find((item) => item.id === parseInt(itemId));
|
const itemToRemove = activeItems.find((item) => item.id === parseInt(itemId));
|
||||||
|
|
||||||
// Remove item associated with button
|
// Remove item associated with button
|
||||||
this._removeItem(itemToRemove);
|
this._removeItem(itemToRemove);
|
||||||
this._triggerChange(itemToRemove.value);
|
this._triggerChange(itemToRemove.value);
|
||||||
}
|
}
|
||||||
} else if(target.hasAttribute('data-item')) {
|
} else if(target.hasAttribute('data-item')) {
|
||||||
// If we are clicking on an item
|
// If we are clicking on an item
|
||||||
if(this.config.removeItems) {
|
if(this.config.removeItems) {
|
||||||
const passedId = target.getAttribute('data-id');
|
const passedId = target.getAttribute('data-id');
|
||||||
|
|
||||||
// We only want to select one item with a click
|
// We only want to select one item with a click
|
||||||
// so we deselect any items that aren't the target
|
// so we deselect any items that aren't the target
|
||||||
// unless shift is being pressed
|
// unless shift is being pressed
|
||||||
activeItems.forEach((item) => {
|
activeItems.forEach((item) => {
|
||||||
if(item.id === parseInt(passedId) && !item.highlighted) {
|
if(item.id === parseInt(passedId) && !item.highlighted) {
|
||||||
this.highlightItem(item);
|
this.highlightItem(item);
|
||||||
} else if(!hasShiftKey) {
|
} else if(!hasShiftKey) {
|
||||||
this.unhighlightItem(item);
|
this.unhighlightItem(item);
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else if(target.hasAttribute('data-option')) {
|
|
||||||
// If we are clicking on an option
|
|
||||||
const id = target.getAttribute('data-id');
|
|
||||||
const choices = this.store.getChoicesFilteredByActive();
|
|
||||||
const choice = choices.find((choice) => choice.id === parseInt(id));
|
|
||||||
|
|
||||||
if(!choice.selected && !choice.disabled) {
|
|
||||||
this._addItem(choice.value, choice.label, choice.id);
|
|
||||||
this._triggerChange(choice.value);
|
|
||||||
if(this.passedElement.type === 'select-one') {
|
|
||||||
this.input.value = "";
|
|
||||||
this.isSearching = false;
|
|
||||||
this.store.dispatch(activateChoices(true));
|
|
||||||
this.toggleDropdown();
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if(target.hasAttribute('data-option')) {
|
||||||
|
// If we are clicking on an option
|
||||||
|
const id = target.getAttribute('data-id');
|
||||||
|
const choices = this.store.getChoicesFilteredByActive();
|
||||||
|
const choice = choices.find((choice) => choice.id === parseInt(id));
|
||||||
|
|
||||||
|
if(!choice.selected && !choice.disabled) {
|
||||||
|
this._addItem(choice.value, choice.label, choice.id);
|
||||||
|
this._triggerChange(choice.value);
|
||||||
|
if(this.passedElement.type === 'select-one') {
|
||||||
|
this.input.value = "";
|
||||||
|
this.isSearching = false;
|
||||||
|
this.store.dispatch(activateChoices(true));
|
||||||
|
this.toggleDropdown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
|
||||||
// Click is outside of our element so close dropdown and de-select items
|
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
|
||||||
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
|
||||||
|
|
||||||
// De-select any highlighted items
|
|
||||||
if(hasHighlightedItems) {
|
|
||||||
this.unhighlightAll();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove focus state
|
|
||||||
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
|
||||||
|
|
||||||
// Close all other dropdowns
|
|
||||||
if(hasActiveDropdown) {
|
|
||||||
this.toggleDropdown();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// }
|
|
||||||
|
} else {
|
||||||
|
// Click is outside of our element so close dropdown and de-select items
|
||||||
|
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||||
|
const hasHighlightedItems = activeItems.some((item) => item.highlighted === true);
|
||||||
|
|
||||||
|
// De-select any highlighted items
|
||||||
|
if(hasHighlightedItems) {
|
||||||
|
this.unhighlightAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove focus state
|
||||||
|
this.containerOuter.classList.remove(this.config.classNames.focusState);
|
||||||
|
|
||||||
|
// Close all other dropdowns
|
||||||
|
if(hasActiveDropdown) {
|
||||||
|
this.toggleDropdown();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1603,7 +1600,6 @@ export class Choices {
|
||||||
_addEventListeners() {
|
_addEventListeners() {
|
||||||
document.addEventListener('keyup', this._onKeyUp);
|
document.addEventListener('keyup', this._onKeyUp);
|
||||||
document.addEventListener('keydown', this._onKeyDown);
|
document.addEventListener('keydown', this._onKeyDown);
|
||||||
// document.addEventListener('touchstart', this._onMouseDown);
|
|
||||||
document.addEventListener('mousedown', this._onMouseDown);
|
document.addEventListener('mousedown', this._onMouseDown);
|
||||||
document.addEventListener('mouseover', this._onMouseOver);
|
document.addEventListener('mouseover', this._onMouseOver);
|
||||||
|
|
||||||
|
@ -1625,7 +1621,6 @@ export class Choices {
|
||||||
_removeEventListeners() {
|
_removeEventListeners() {
|
||||||
document.removeEventListener('keyup', this._onKeyUp);
|
document.removeEventListener('keyup', this._onKeyUp);
|
||||||
document.removeEventListener('keydown', this._onKeyDown);
|
document.removeEventListener('keydown', this._onKeyDown);
|
||||||
// document.removeEventListener('touchstart', this._onMouseDown);
|
|
||||||
document.removeEventListener('mousedown', this._onMouseDown);
|
document.removeEventListener('mousedown', this._onMouseDown);
|
||||||
document.removeEventListener('mouseover', this._onMouseOver);
|
document.removeEventListener('mouseover', this._onMouseOver);
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||||
<title>Choices</title>
|
<title>Choices</title>
|
||||||
<meta name=description itemprop=description content="A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.">
|
<meta name=description itemprop=description content="A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.">
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue