deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-03 06:22:25 +02:00
Code Issues Projects Releases Wiki Activity

Use active/flipped classes + store input type

Browse source
This commit is contained in:
Josh Johnson 2016-04-22 09:02:42 +01:00
parent 7774e8bb0d
commit c10ac458ec
2 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

36
assets/scripts/src/choices.js
View file

@ -47,6 +47,7 @@ export class Choices {
delimiter: ',', delimiter: ',',
allowDuplicates: true, allowDuplicates: true,
allowPaste: true, allowPaste: true,
allowSearch: true,
regexFilter: false, regexFilter: false,
debug: false, debug: false,
placeholder: true, placeholder: true,
@ -92,6 +93,9 @@ export class Choices {
// Retrieve triggering element (i.e. element with 'data-choice' trigger) // Retrieve triggering element (i.e. element with 'data-choice' trigger)
this.passedElement = isType('String', element) ? document.querySelector(element) : element; this.passedElement = isType('String', element) ? document.querySelector(element) : element;
// Initial state of input type (we update this when we init)
this.inputType = null;
// Set preset items - this looks out of place // Set preset items - this looks out of place
this.presetItems = []; this.presetItems = [];
if(this.options.items.length) { if(this.options.items.length) {
@ -230,7 +234,6 @@ export class Choices {
onKeyDown(e) { onKeyDown(e) {
const activeItems = this.getItemsFilteredByActive(); const activeItems = this.getItemsFilteredByActive();
const inputIsFocussed = this.input === document.activeElement; const inputIsFocussed = this.input === document.activeElement;
const items = this.getItems();
const ctrlDownKey = e.ctrlKey || e.metaKey; const ctrlDownKey = e.ctrlKey || e.metaKey;
const deleteKey = 8 || 46; const deleteKey = 8 || 46;
const enterKey = 13; const enterKey = 13;
@ -249,7 +252,11 @@ export class Choices {
if (e.keyCode === enterKey && e.target.value) { if (e.keyCode === enterKey && e.target.value) {
const value = this.input.value; const value = this.input.value;
this.handleEnter(activeItems, value); this.handleEnter(activeItems, value);
} }
if(this.inputType === 'multipleSelect' && this.options.allowSearch) {
// Do search
}
} }
if(inputIsFocussed) { if(inputIsFocussed) {
@ -321,11 +328,11 @@ export class Choices {
} }
onFocus(e) { onFocus(e) {
this.containerOuter.classList.add('is-active'); this.containerOuter.classList.add(this.options.classNames.activeState);
} }
onBlur(e) { onBlur(e) {
this.containerOuter.classList.remove('is-active'); this.containerOuter.classList.remove(this.options.classNames.activeState);
} }
/* Methods */ /* Methods */
@ -442,7 +449,7 @@ export class Choices {
const id = this.store.getState().items.length + 1; const id = this.store.getState().items.length + 1;
// Close dropdown // Close dropdown
if(this.dropdown && this.dropdown.classList.contains('is-active')) { if(this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState)) {
this.toggleDropdown(); this.toggleDropdown();
} }
@ -524,29 +531,30 @@ export class Choices {
} }
showDropdown() { showDropdown() {
this.dropdown.classList.add('is-active'); this.dropdown.classList.add(this.options.classNames.activeState);
const dimensions = this.dropdown.getBoundingClientRect(); const dimensions = this.dropdown.getBoundingClientRect();
if(dimensions.top + dimensions.height >= document.body.offsetHeight) { if(dimensions.top + dimensions.height >= document.body.offsetHeight) {
this.dropdown.classList.add('is-flipped'); this.dropdown.classList.add(this.options.classNames.flippedState);
} else { } else {
this.dropdown.classList.remove('is-flipped'); this.dropdown.classList.remove(this.options.classNames.flippedState);
} }
} }
hideDropdown() { hideDropdown() {
const isFlipped = this.dropdown.classList.contains('is-flipped'); // A dropdown flips if it does not have space below the input
const isFlipped = this.dropdown.classList.contains(this.options.classNames.flippedState);
this.dropdown.classList.remove(this.options.classNames.activeState);
this.dropdown.classList.remove('is-active');
if(isFlipped) { if(isFlipped) {
this.dropdown.classList.remove('is-flipped'); this.dropdown.classList.remove(this.options.classNames.flippedState);
} }
} }
toggleDropdown() { toggleDropdown() {
if(!this.dropdown) return; if(!this.dropdown) return;
const isActive = this.dropdown.classList.contains('is-active'); const isActive = this.dropdown.classList.contains(this.options.classNames.activeState);
if(isActive) { if(isActive) {
this.hideDropdown(); this.hideDropdown();
@ -677,6 +685,7 @@ export class Choices {
this.containerInner = containerInner; this.containerInner = containerInner;
this.input = input; this.input = input;
this.list = list; this.list = list;
this.inputType = "text";
// Add any preset values seperated by delimiter // Add any preset values seperated by delimiter
this.presetItems.forEach((value) => { this.presetItems.forEach((value) => {
@ -728,6 +737,7 @@ export class Choices {
this.input = input; this.input = input;
this.list = list; this.list = list;
this.dropdown = dropdown; this.dropdown = dropdown;
this.inputType = "multipleSelect";
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP')); const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));