mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-13 03:12:41 +02:00
Begun improving placeholders on single selects
This commit is contained in:
parent
c12c74da2d
commit
ca6ab7da81
|
@ -54,6 +54,7 @@ class Choices {
|
||||||
removeItemButton: false,
|
removeItemButton: false,
|
||||||
editItems: false,
|
editItems: false,
|
||||||
duplicateItems: true,
|
duplicateItems: true,
|
||||||
|
preselectItem: true,
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
paste: true,
|
paste: true,
|
||||||
search: true,
|
search: true,
|
||||||
|
@ -385,8 +386,7 @@ class Choices {
|
||||||
// Choices
|
// Choices
|
||||||
if (this.currentState.choices !== this.prevState.choices ||
|
if (this.currentState.choices !== this.prevState.choices ||
|
||||||
this.currentState.groups !== this.prevState.groups) {
|
this.currentState.groups !== this.prevState.groups) {
|
||||||
if (this.passedElement.type === 'select-multiple' ||
|
if (this.isSelectElement) {
|
||||||
this.passedElement.type === 'select-one') {
|
|
||||||
// Get active groups/choices
|
// Get active groups/choices
|
||||||
const activeGroups = this.store.getGroupsFilteredByActive();
|
const activeGroups = this.store.getGroupsFilteredByActive();
|
||||||
const activeChoices = this.store.getChoicesFilteredByActive();
|
const activeChoices = this.store.getChoicesFilteredByActive();
|
||||||
|
@ -422,20 +422,29 @@ class Choices {
|
||||||
|
|
||||||
// Items
|
// Items
|
||||||
if (this.currentState.items !== this.prevState.items) {
|
if (this.currentState.items !== this.prevState.items) {
|
||||||
|
// Get active items (items that can be selected)
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
if (activeItems) {
|
|
||||||
|
// Clear list
|
||||||
|
this.itemList.innerHTML = '';
|
||||||
|
|
||||||
|
if (activeItems.length) {
|
||||||
// Create a fragment to store our list items
|
// Create a fragment to store our list items
|
||||||
// (so we don't have to update the DOM for each item)
|
// (so we don't have to update the DOM for each item)
|
||||||
const itemListFragment = this.renderItems(activeItems);
|
const itemListFragment = this.renderItems(activeItems);
|
||||||
|
|
||||||
// Clear list
|
|
||||||
this.itemList.innerHTML = '';
|
|
||||||
|
|
||||||
// If we have items to add
|
// If we have items to add
|
||||||
if (itemListFragment.childNodes) {
|
if (itemListFragment.childNodes) {
|
||||||
// Update list
|
// Update list
|
||||||
this.itemList.appendChild(itemListFragment);
|
this.itemList.appendChild(itemListFragment);
|
||||||
}
|
}
|
||||||
|
} else if (this.passedElement.type === 'select-one') {
|
||||||
|
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
|
||||||
|
false;
|
||||||
|
if (placeholder) {
|
||||||
|
const placeholderItem = this._getTemplate('placeholder', placeholder);
|
||||||
|
this.itemList.appendChild(placeholderItem);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -739,7 +748,7 @@ class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
setValueByChoice(value) {
|
setValueByChoice(value) {
|
||||||
if (this.passedElement.type !== 'text') {
|
if (this.isSelectElement) {
|
||||||
const choices = this.store.getChoices();
|
const choices = this.store.getChoices();
|
||||||
// If only one value has been passed, convert to array
|
// If only one value has been passed, convert to array
|
||||||
const choiceValue = isType('Array', value) ? value : [value];
|
const choiceValue = isType('Array', value) ? value : [value];
|
||||||
|
@ -925,15 +934,6 @@ class Choices {
|
||||||
// Remove item associated with button
|
// Remove item associated with button
|
||||||
this._removeItem(itemToRemove);
|
this._removeItem(itemToRemove);
|
||||||
this._triggerChange(itemToRemove.value);
|
this._triggerChange(itemToRemove.value);
|
||||||
|
|
||||||
if (this.passedElement.type === 'select-one') {
|
|
||||||
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
|
|
||||||
false;
|
|
||||||
if (placeholder) {
|
|
||||||
const placeholderItem = this._getTemplate('placeholder', placeholder);
|
|
||||||
this.itemList.appendChild(placeholderItem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1938,7 +1938,7 @@ class Choices {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_addChoice(isSelected, isDisabled, value, label, groupId = -1) {
|
_addChoice(isSelected, isDisabled, value, label, groupId = -1) {
|
||||||
if (!value) return;
|
if (typeof value === 'undefined' || value === null) return;
|
||||||
|
|
||||||
// Generate unique id
|
// Generate unique id
|
||||||
const choices = this.store.getChoices();
|
const choices = this.store.getChoices();
|
||||||
|
@ -2138,19 +2138,24 @@ class Choices {
|
||||||
|
|
||||||
// If placeholder has been enabled and we have a value
|
// If placeholder has been enabled and we have a value
|
||||||
if (placeholder) {
|
if (placeholder) {
|
||||||
input.placeholder = placeholder;
|
|
||||||
if (this.passedElement.type !== 'select-one') {
|
if (this.passedElement.type !== 'select-one') {
|
||||||
|
input.placeholder = placeholder;
|
||||||
input.style.width = getWidthOfInput(input);
|
input.style.width = getWidthOfInput(input);
|
||||||
|
} else {
|
||||||
|
const placeholderItem = this._getTemplate('placeholder', placeholder);
|
||||||
|
this.itemList.appendChild(placeholderItem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.config.addItems) this.disable();
|
if (!this.config.addItems) {
|
||||||
|
this.disable();
|
||||||
|
}
|
||||||
|
|
||||||
containerOuter.appendChild(containerInner);
|
containerOuter.appendChild(containerInner);
|
||||||
containerOuter.appendChild(dropdown);
|
containerOuter.appendChild(dropdown);
|
||||||
containerInner.appendChild(itemList);
|
containerInner.appendChild(itemList);
|
||||||
|
|
||||||
if (this.passedElement.type !== 'text') {
|
if (this.isSelectElement) {
|
||||||
dropdown.appendChild(choiceList);
|
dropdown.appendChild(choiceList);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2160,7 +2165,7 @@ class Choices {
|
||||||
dropdown.insertBefore(input, dropdown.firstChild);
|
dropdown.insertBefore(input, dropdown.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
|
if (this.isSelectElement) {
|
||||||
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
||||||
|
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
|
@ -2201,7 +2206,7 @@ class Choices {
|
||||||
const isSelected = choice.selected ? choice.selected : false;
|
const isSelected = choice.selected ? choice.selected : false;
|
||||||
// Pre-select first choice if it's a single select
|
// Pre-select first choice if it's a single select
|
||||||
if (this.passedElement.type === 'select-one') {
|
if (this.passedElement.type === 'select-one') {
|
||||||
if (hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
|
if (this.config.preselectItem === false || hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
|
||||||
// If there is a selected choice already or the choice is not
|
// If there is a selected choice already or the choice is not
|
||||||
// the first in the array, add each choice normally
|
// the first in the array, add each choice normally
|
||||||
this._addChoice(isSelected, isDisabled, choice.value, choice.label);
|
this._addChoice(isSelected, isDisabled, choice.value, choice.label);
|
||||||
|
|
39
index.html
39
index.html
|
@ -239,8 +239,8 @@
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'</p>
|
<p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'</p>
|
||||||
<label for="states">States</label>
|
<label for="choices-states">States</label>
|
||||||
<select class="form-control" name="states" id="states" placeholder="Choose a state">
|
<select class="form-control" name="choices-states" id="choices-states" placeholder="Choose a state">
|
||||||
<option value="Michigan">Michigan</option>
|
<option value="Michigan">Michigan</option>
|
||||||
<option value="Texas">Texas</option>
|
<option value="Texas">Texas</option>
|
||||||
<option value="Chicago">Chicago</option>
|
<option value="Chicago">Chicago</option>
|
||||||
|
@ -248,14 +248,22 @@
|
||||||
<option value="Washington">Washington</option>
|
<option value="Washington">Washington</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="boroughs">Boroughs</label>
|
<label for="choices-boroughs">Boroughs</label>
|
||||||
<select class="form-control" name="boroughs" id="boroughs" placeholder="Choose a borough">
|
<select class="form-control" name="choices-boroughs" id="choices-boroughs" placeholder="Choose a borough">
|
||||||
<option value="The Bronx">The Bronx</option>
|
<option value="The Bronx">The Bronx</option>
|
||||||
<option value="Brooklyn">Brooklyn</option>
|
<option value="Brooklyn">Brooklyn</option>
|
||||||
<option value="Manhattan">Manhattan</option>
|
<option value="Manhattan">Manhattan</option>
|
||||||
<option value="Queens">Queens</option>
|
<option value="Queens">Queens</option>
|
||||||
<option value="Staten Island">Staten Island</option>
|
<option value="Staten Island">Staten Island</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
<label for="choices-placeholder-option">Placeholder option</label>
|
||||||
|
<select class="form-control" name="choices-placeholder-option" id="choices-placeholder-option">
|
||||||
|
<option selected>Press here</option>
|
||||||
|
<option value="one">One</option>
|
||||||
|
<option value="two">Two</option>
|
||||||
|
<option value="three">Three</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -434,17 +442,20 @@
|
||||||
shouldSort: false,
|
shouldSort: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
var states = new Choices(document.getElementById('states'), {
|
var singleStates = new Choices(document.getElementById('choices-states'), {
|
||||||
callbackOnChange: function(value) {
|
callbackOnChange: function(value) {
|
||||||
if(value === 'New York') {
|
if(value === 'New York') {
|
||||||
boroughs.enable();
|
singleBoroughs.enable();
|
||||||
} else {
|
} else {
|
||||||
boroughs.disable();
|
singleBoroughs.disable();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
|
var singleBoroughs = new Choices(document.getElementById('choices-boroughs')).disable();
|
||||||
|
|
||||||
|
var singleCustomTemplates = new Choices(
|
||||||
|
document.getElementById('choices-custom-templates'), {
|
||||||
callbackOnCreateTemplates: function (strToEl) {
|
callbackOnCreateTemplates: function (strToEl) {
|
||||||
var classNames = this.config.classNames;
|
var classNames = this.config.classNames;
|
||||||
return {
|
return {
|
||||||
|
@ -453,20 +464,26 @@
|
||||||
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
|
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
|
||||||
<span style="margin-right:10px;">🎉</span> ${data.label}
|
<span style="margin-right:10px;">🎉</span> ${data.label}
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
choice: (data) => {
|
choice: (data) => {
|
||||||
return strToEl(`
|
return strToEl(`
|
||||||
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
||||||
<span style="margin-right:10px;">👉🏽</span> ${data.label}
|
<span style="margin-right:10px;">👉🏽</span> ${data.label}
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var boroughs = new Choices(document.getElementById('boroughs')).disable();
|
var singlePlaceholderOption = new Choices('#choices-placeholder-option', {
|
||||||
|
placeholder: true,
|
||||||
|
placeholderValue: 'Please Choose…',
|
||||||
|
removeItemButton: true,
|
||||||
|
preselectItem: false,
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -431,6 +431,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
this.choices = new Choices(this.input, {
|
this.choices = new Choices(this.input, {
|
||||||
placeholderValue: 'Placeholder text',
|
placeholderValue: 'Placeholder text',
|
||||||
|
preselectItem: true,
|
||||||
choices: [{
|
choices: [{
|
||||||
value: 'One',
|
value: 'One',
|
||||||
label: 'Label One',
|
label: 'Label One',
|
||||||
|
|
Loading…
Reference in a new issue