mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-26 17:31:02 +02:00
Setup template function + remove unused utils
This commit is contained in:
parent
2ccac3083d
commit
336ffc9e87
4
assets/scripts/dist/bundle.js
vendored
4
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@
|
||||||
import { createStore } from 'redux';
|
import { createStore } from 'redux';
|
||||||
import rootReducer from './reducers/index.js';
|
import rootReducer from './reducers/index.js';
|
||||||
import { addItem, removeItem, selectItem, addOption, filterOptions, activateOptions, addGroup } from './actions/index';
|
import { addItem, removeItem, selectItem, addOption, filterOptions, activateOptions, addGroup } from './actions/index';
|
||||||
import { hasClass, wrap, getSiblings, isType, strToEl, extend, getWidthOfInput, debounce } from './lib/utils.js';
|
import { wrap, isType, strToEl, extend, getWidthOfInput, debounce } from './lib/utils.js';
|
||||||
import Sifter from 'sifter';
|
import Sifter from 'sifter';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -110,49 +110,7 @@ export class Choices {
|
||||||
this.onKeyDown = this.onKeyDown.bind(this);
|
this.onKeyDown = this.onKeyDown.bind(this);
|
||||||
this.onClick = this.onClick.bind(this);
|
this.onClick = this.onClick.bind(this);
|
||||||
this.onPaste = this.onPaste.bind(this);
|
this.onPaste = this.onPaste.bind(this);
|
||||||
|
this.onMouseOver = this.onMouseOver.bind(this);
|
||||||
const classNames = this.options.classNames;
|
|
||||||
this.templates = {
|
|
||||||
containerOuter: () => {
|
|
||||||
return strToEl(`<div class="${ classNames.containerOuter }"></div>`);
|
|
||||||
},
|
|
||||||
containerInner: () => {
|
|
||||||
return strToEl(`<div class="${ classNames.containerInner }"></div>`);
|
|
||||||
},
|
|
||||||
list: () => {
|
|
||||||
return strToEl(`<ul class="${ classNames.list } ${ classNames.listItems }"></ul>`);
|
|
||||||
},
|
|
||||||
input: () => {
|
|
||||||
return strToEl(`<input type="text" class="${ classNames.input } ${ classNames.inputCloned }">`);
|
|
||||||
},
|
|
||||||
dropdown: () => {
|
|
||||||
return strToEl(`<div class="${ classNames.list } ${ classNames.listDropdown }"></div>`);
|
|
||||||
},
|
|
||||||
notice: (label) => {
|
|
||||||
return strToEl(`<div class="${ classNames.item } ${ classNames.itemOption }" data-choice-notice>${ label }</div>`);
|
|
||||||
},
|
|
||||||
option: (data) => {
|
|
||||||
return strToEl(`
|
|
||||||
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable }" data-choice-option data-choice-id="${ data.id }" data-choice-value="${ data.value }">
|
|
||||||
${ data.label }
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
},
|
|
||||||
optgroup: (data) => {
|
|
||||||
return strToEl(`
|
|
||||||
<div class="${ classNames.group } ${ data.disabled ? classNames.itemDisabled : '' }" data-choice-value="${ data.value }" data-choice-group-id="${ data.id }">
|
|
||||||
<div class="${ classNames.groupHeading }">${ data.value }</div>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
},
|
|
||||||
item: (data) => {
|
|
||||||
return strToEl(`
|
|
||||||
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.selected ? classNames.selectedState : classNames.itemSelectable }" data-choice-item data-choice-id="${ data.id }" data-choice-value="${ data.value }">
|
|
||||||
${ data.label }
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Let's have it large
|
// Let's have it large
|
||||||
this.init();
|
this.init();
|
||||||
|
@ -269,6 +227,7 @@ export class Choices {
|
||||||
|
|
||||||
const activeItems = this.getItemsFilteredByActive();
|
const activeItems = this.getItemsFilteredByActive();
|
||||||
const activeOptions = this.getOptionsFilteredByActive();
|
const activeOptions = this.getOptionsFilteredByActive();
|
||||||
|
|
||||||
const hasFocussedInput = this.input === document.activeElement;
|
const hasFocussedInput = this.input === document.activeElement;
|
||||||
const hasActiveDropdown = this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState);
|
const hasActiveDropdown = this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState);
|
||||||
const hasItems = this.list && this.list.children;
|
const hasItems = this.list && this.list.children;
|
||||||
|
@ -411,6 +370,7 @@ export class Choices {
|
||||||
|
|
||||||
// If click is affecting a child node of our element
|
// If click is affecting a child node of our element
|
||||||
if(this.containerOuter.contains(e.target)) {
|
if(this.containerOuter.contains(e.target)) {
|
||||||
|
// If input is not in focus, it ought to be
|
||||||
if(this.input !== document.activeElement) {
|
if(this.input !== document.activeElement) {
|
||||||
this.input.focus();
|
this.input.focus();
|
||||||
}
|
}
|
||||||
|
@ -461,6 +421,17 @@ export class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mouse over (hover) event
|
||||||
|
* @param {Object} e Event
|
||||||
|
* @return
|
||||||
|
*/
|
||||||
|
onMouseOver(e) {
|
||||||
|
if(this.dropdown && e.target === this.dropdown) {
|
||||||
|
console.log('hover');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Focus event
|
* Focus event
|
||||||
* @param {Object} e Event
|
* @param {Object} e Event
|
||||||
|
@ -877,10 +848,10 @@ export class Choices {
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
generateInput() {
|
generateInput() {
|
||||||
const containerOuter = this.templates['containerOuter']();
|
const containerOuter = this.createTemplate('containerOuter');
|
||||||
const containerInner = this.templates['containerInner']();
|
const containerInner = this.createTemplate('containerInner');
|
||||||
const list = this.templates['list']();
|
const list = this.createTemplate('list');
|
||||||
const input = this.templates['input']();
|
const input = this.createTemplate('input');
|
||||||
|
|
||||||
// Hide passed input
|
// Hide passed input
|
||||||
this.passedElement.classList.add(this.options.classNames.input, this.options.classNames.hiddenState);
|
this.passedElement.classList.add(this.options.classNames.input, this.options.classNames.hiddenState);
|
||||||
|
@ -911,7 +882,7 @@ export class Choices {
|
||||||
|
|
||||||
if(this.passedElement.type === 'select-multiple') {
|
if(this.passedElement.type === 'select-multiple') {
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
const dropdown = this.templates['dropdown']();
|
const dropdown = this.createTemplate('dropdown');
|
||||||
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
||||||
|
|
||||||
containerOuter.appendChild(dropdown);
|
containerOuter.appendChild(dropdown);
|
||||||
|
@ -972,10 +943,10 @@ export class Choices {
|
||||||
});
|
});
|
||||||
|
|
||||||
if(groupOptions.length >= 1) {
|
if(groupOptions.length >= 1) {
|
||||||
const dropdownGroup = this.templates['optgroup'](group);
|
const dropdownGroup = this.createTemplate('optgroup', group);
|
||||||
|
|
||||||
groupOptions.forEach((option, j) => {
|
groupOptions.forEach((option, j) => {
|
||||||
const dropdownItem = this.templates['option'](option);
|
const dropdownItem = this.createTemplate('option', option);
|
||||||
|
|
||||||
dropdownGroup.appendChild(dropdownItem);
|
dropdownGroup.appendChild(dropdownItem);
|
||||||
});
|
});
|
||||||
|
@ -985,7 +956,7 @@ export class Choices {
|
||||||
});
|
});
|
||||||
} else if(activeOptions.length >= 1) {
|
} else if(activeOptions.length >= 1) {
|
||||||
activeOptions.forEach((option, i) => {
|
activeOptions.forEach((option, i) => {
|
||||||
const dropdownItem = this.templates['option'](option);
|
const dropdownItem = this.createTemplate('option', option);
|
||||||
optionListFragment.appendChild(dropdownItem);
|
optionListFragment.appendChild(dropdownItem);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -994,7 +965,7 @@ export class Choices {
|
||||||
|
|
||||||
// If dropdown is empty, show a no content message
|
// If dropdown is empty, show a no content message
|
||||||
if(this.dropdown.innerHTML === "") {
|
if(this.dropdown.innerHTML === "") {
|
||||||
const dropdownItem = this.templates['notice']('No options to select');
|
const dropdownItem = this.createTemplate('notice', 'No options to select');
|
||||||
|
|
||||||
optionListFragment.appendChild(dropdownItem);
|
optionListFragment.appendChild(dropdownItem);
|
||||||
this.dropdown.appendChild(optionListFragment);
|
this.dropdown.appendChild(optionListFragment);
|
||||||
|
@ -1018,7 +989,7 @@ export class Choices {
|
||||||
// Add each list item to list
|
// Add each list item to list
|
||||||
activeItems.forEach((item) => {
|
activeItems.forEach((item) => {
|
||||||
// Create new list element
|
// Create new list element
|
||||||
const listItem = this.templates['item'](item);
|
const listItem = this.createTemplate('item', item);
|
||||||
|
|
||||||
// Append it to list
|
// Append it to list
|
||||||
itemListFragment.appendChild(listItem);
|
itemListFragment.appendChild(listItem);
|
||||||
|
@ -1037,6 +1008,59 @@ export class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create HTML element based on type and arguments
|
||||||
|
* @param {String} template Template to create
|
||||||
|
* @param {...} args Data
|
||||||
|
* @return {HTMLElement}
|
||||||
|
*/
|
||||||
|
createTemplate(template, ...args) {
|
||||||
|
const classNames = this.options.classNames;
|
||||||
|
const templates = {
|
||||||
|
containerOuter: () => {
|
||||||
|
return strToEl(`<div class="${ classNames.containerOuter }"></div>`);
|
||||||
|
},
|
||||||
|
containerInner: () => {
|
||||||
|
return strToEl(`<div class="${ classNames.containerInner }"></div>`);
|
||||||
|
},
|
||||||
|
list: () => {
|
||||||
|
return strToEl(`<ul class="${ classNames.list } ${ classNames.listItems }"></ul>`);
|
||||||
|
},
|
||||||
|
input: () => {
|
||||||
|
return strToEl(`<input type="text" class="${ classNames.input } ${ classNames.inputCloned }">`);
|
||||||
|
},
|
||||||
|
dropdown: () => {
|
||||||
|
return strToEl(`<div class="${ classNames.list } ${ classNames.listDropdown }"></div>`);
|
||||||
|
},
|
||||||
|
notice: (label) => {
|
||||||
|
return strToEl(`<div class="${ classNames.item } ${ classNames.itemOption }" data-choice-notice>${ label }</div>`);
|
||||||
|
},
|
||||||
|
option: (data) => {
|
||||||
|
return strToEl(`
|
||||||
|
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.selected ? classNames.selectedState + ' ' + classNames.itemDisabled : classNames.itemSelectable }" data-choice-option data-choice-id="${ data.id }" data-choice-value="${ data.value }">
|
||||||
|
${ data.label }
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
optgroup: (data) => {
|
||||||
|
return strToEl(`
|
||||||
|
<div class="${ classNames.group } ${ data.disabled ? classNames.itemDisabled : '' }" data-choice-value="${ data.value }" data-choice-group-id="${ data.id }">
|
||||||
|
<div class="${ classNames.groupHeading }">${ data.value }</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
item: (data) => {
|
||||||
|
return strToEl(`
|
||||||
|
<div class="${ classNames.item } ${ classNames.itemOption } ${ data.selected ? classNames.selectedState : classNames.itemSelectable }" data-choice-item data-choice-id="${ data.id }" data-choice-value="${ data.value }">
|
||||||
|
${ data.label }
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return templates[template](...args);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Trigger event listeners
|
* Trigger event listeners
|
||||||
* @return
|
* @return
|
||||||
|
@ -1046,6 +1070,7 @@ export class Choices {
|
||||||
document.addEventListener('keydown', this.onKeyDown);
|
document.addEventListener('keydown', this.onKeyDown);
|
||||||
document.addEventListener('click', this.onClick);
|
document.addEventListener('click', this.onClick);
|
||||||
document.addEventListener('paste', this.onPaste);
|
document.addEventListener('paste', this.onPaste);
|
||||||
|
document.addEventListener('mouseover', this.onMouseOver);
|
||||||
|
|
||||||
this.input.addEventListener('focus', this.onFocus);
|
this.input.addEventListener('focus', this.onFocus);
|
||||||
this.input.addEventListener('blur', this.onBlur);
|
this.input.addEventListener('blur', this.onBlur);
|
||||||
|
@ -1060,6 +1085,7 @@ export class Choices {
|
||||||
document.removeEventListener('keydown', this.onKeyDown);
|
document.removeEventListener('keydown', this.onKeyDown);
|
||||||
document.removeEventListener('click', this.onClick);
|
document.removeEventListener('click', this.onClick);
|
||||||
document.removeEventListener('paste', this.onPaste);
|
document.removeEventListener('paste', this.onPaste);
|
||||||
|
document.removeEventListener('mouseover', this.onMouseOver);
|
||||||
|
|
||||||
this.input.removeEventListener('focus', this.onFocus);
|
this.input.removeEventListener('focus', this.onFocus);
|
||||||
this.input.removeEventListener('blur', this.onBlur);
|
this.input.removeEventListener('blur', this.onBlur);
|
||||||
|
|
Loading…
Reference in a new issue