deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-29 20:12:33 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'froggiefab-pr-custom-templates'

Browse source
This commit is contained in:
Josh Johnson 2016-09-30 13:52:28 +01:00
parent bdad503ffe 56e3465ac0
commit 0ac9f29639
6 changed files with 87 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
README.md
View file

@ -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>&bigstar;</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>&bigstar;</span> ${data.label}
</div>
`);
},
};
}
});
```
### callbackOnChange
**Type:** `Function` **Default:** `null` **Arguments:** `value, passedInput`

15
assets/scripts/dist/choices.js vendored
View file

@ -163,6 +163,7 @@
callbackOnRemoveItem: null,
callbackOnHighlightItem: null,
callbackOnUnhighlightItem: null,
callbackOnCreateTemplates: null,
callbackOnChange: null,
callbackOnSearch: null
};
@ -1006,7 +1007,7 @@
if (this.initialised === true) {
if (this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') {
// Show loading text
this._handleLoadingState();
this._handleLoadingState(true);
// Run callback
fn(this._ajaxCallback());
}
@ -1563,7 +1564,7 @@
// If backspace or delete key is pressed and the input has no value
if (hasFocusedInput && !e.target.value && _this17.passedElement.type !== 'select-one') {
_this17._handleBackspace(activeItems);
_this17._handleLoadingState();
_this17._handleLoadingState(false);
e.preventDefault();
}
};
@ -2310,7 +2311,15 @@
}
};
this.config.templates = templates;
// User's custom templates
var callbackTemplate = this.config.callbackOnCreateTemplates;
var userTemplates = {};
if (callbackTemplate) {
if ((0, _utils.isType)('Function', callbackTemplate)) {
userTemplates = callbackTemplate(this, _utils.strToEl);
}
}
this.config.templates = (0, _utils.extend)(templates, userTemplates);
}
/**

2
assets/scripts/dist/choices.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -102,6 +102,7 @@ export default class Choices {
callbackOnRemoveItem: null,
callbackOnHighlightItem: null,
callbackOnUnhighlightItem: null,
callbackOnCreateTemplates: null,
callbackOnChange: null,
callbackOnSearch: null,
};
@ -2026,7 +2027,13 @@ export default class Choices {
},
};
this.config.templates = templates;
// User's custom templates
const callbackTemplate = this.config.callbackOnCreateTemplates;
let userTemplates = {};
if (callbackTemplate && isType('Function', callbackTemplate)) {
userTemplates = callbackTemplate(this, strToEl);
}
this.config.templates = extend(templates, userTemplates);
}
/**

30
index.html
View file

@ -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">
@ -398,6 +406,28 @@
}
});
var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
callbackOnCreateTemplates: function (instance, strToEl) {
var classNames = instance.config.classNames;
return {
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 style="margin-right:10px;">🎉</span> ${data.label}
</div>
`);
},
choice: (data) => {
return strToEl(`
<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>&bigstar;</span> ${data.label}
</div>
`);
},
};
}
});
var boroughs = new Choices(document.getElementById('boroughs')).disable();
});
</script>