mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-21 23:16:38 +02:00
Housekeeping
This commit is contained in:
parent
da18bbbf8f
commit
56e3465ac0
34
README.md
34
README.md
|
@ -92,6 +92,7 @@ A vanilla, lightweight (~15kb gzipped 🎉), configurable select box/text input
|
|||
callbackOnRemoveItem: null,
|
||||
callbackOnHighlightItem: null,
|
||||
callbackOnUnhighlightItem: null,
|
||||
callbackOnCreateTemplates: null,
|
||||
callbackOnChange: null,
|
||||
callbackOnSearch: null,
|
||||
});
|
||||
|
@ -413,6 +414,39 @@ const example = new Choices(element, {
|
|||
|
||||
**Usage:** Function to run each time an item is unhighlighted.
|
||||
|
||||
### callbackOnCreateTemplates
|
||||
**Type:** `Function` **Default:** `null` **Arguments:** `instance, template`
|
||||
|
||||
**Input types affected:** `text`, `select-one`, `select-multiple`
|
||||
|
||||
**Usage:** Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see glossary). For Choices to work with custom templates, it is important you maintain the various attributes defined [here](https://github.com/jshjohnson/Choices/blob/master/assets/scripts/src/choices.js#L1946-L2030).
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
const example = new Choices(element, {
|
||||
callbackOnCreateTemplates: function (instance, template) {
|
||||
var classNames = instance.config.classNames;
|
||||
return {
|
||||
item: (data) => {
|
||||
return template(`
|
||||
<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>★</span> ${data.label}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
choice: (data) => {
|
||||
return template(`
|
||||
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${instance.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>★</span> ${data.label}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### callbackOnChange
|
||||
**Type:** `Function` **Default:** `null` **Arguments:** `value, passedInput`
|
||||
|
||||
|
|
|
@ -2030,10 +2030,8 @@ export default class Choices {
|
|||
// User's custom templates
|
||||
const callbackTemplate = this.config.callbackOnCreateTemplates;
|
||||
let userTemplates = {};
|
||||
if (callbackTemplate) {
|
||||
if (isType('Function', callbackTemplate)) {
|
||||
userTemplates = callbackTemplate(this, strToEl);
|
||||
}
|
||||
if (callbackTemplate && isType('Function', callbackTemplate)) {
|
||||
userTemplates = callbackTemplate(this, strToEl);
|
||||
}
|
||||
this.config.templates = extend(templates, userTemplates);
|
||||
}
|
||||
|
|
18
index.html
18
index.html
|
@ -219,6 +219,14 @@
|
|||
<option value="Michigan">Michigan</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-custom-templates">Custom templates</label>
|
||||
<select class="form-control" name="choices-custom-templates" id="choices-custom-templates" placeholder="This is a placeholder">
|
||||
<option value="React">React</option>
|
||||
<option value="React">Angular</option>
|
||||
<option value="React">Ember</option>
|
||||
<option value="React">Vue</option>
|
||||
</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>
|
||||
<label for="states">States</label>
|
||||
<select class="form-control" name="states" id="states" placeholder="Choose a state">
|
||||
|
@ -237,14 +245,6 @@
|
|||
<option value="Queens">Queens</option>
|
||||
<option value="Staten Island">Staten Island</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-custom-templates">Custom templates</label>
|
||||
<select class="form-control" name="choices-custom-templates" id="choices-custom-templates" placeholder="This is a placeholder">
|
||||
<option value="React">React</option>
|
||||
<option value="React">Angular</option>
|
||||
<option value="React">Ember</option>
|
||||
<option value="React">Vue</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
@ -413,7 +413,7 @@
|
|||
item: (data) => {
|
||||
return strToEl(`
|
||||
<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>★</span> ${data.label}
|
||||
<span style="margin-right:10px;">🎉</span> ${data.label}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue