deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-09 17:16:36 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'alexb974-feature/label_within_event_add-remove_item'

Browse source
This commit is contained in:
Josh Johnson 2017-03-01 19:07:39 +00:00
parent 4f61ac5e7a eec8a667ad
commit 7de4be283a
6 changed files with 55 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -466,6 +466,7 @@ element.addEventListener('addItem', function(event) {
// do something creative here...
console.log(event.detail.id);
console.log(event.detail.value);
console.log(event.detail.label);
console.log(event.detail.groupValue);
}, false);
@ -476,34 +477,35 @@ example.passedElement.addEventListener('addItem', function(event) {
// do something creative here...
console.log(event.detail.id);
console.log(event.detail.value);
console.log(event.detail.label);
console.log(event.detail.groupValue);
}, false);
```
### addItem
**Arguments:** `id, value, groupValue`
**Arguments:** `id, value, label, groupValue`
**Input types affected:** `text`, `select-one`, `select-multiple`
**Usage:** Triggered each time an item is added (programmatically or by the user).
### removeItem
**Arguments:** `id, value, groupValue`
**Arguments:** `id, value, label, groupValue`
**Input types affected:** `text`, `select-one`, `select-multiple`
**Usage:** Triggered each time an item is removed (programmatically or by the user).
### highlightItem
**Arguments:** `id, value, groupValue`
**Arguments:** `id, value, label, groupValue`
**Input types affected:** `text`, `select-multiple`
**Usage:** Triggered each time an item is highlighted.
### unhighlightItem
**Arguments:** `id, value, groupValue`
**Arguments:** `id, value, label, groupValue`
**Input types affected:** `text`, `select-multiple`

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

@ -2191,12 +2191,14 @@ return /******/ (function(modules) { // webpackBootstrap
(0, _utils.triggerEvent)(this.passedElement, 'addItem', {
id: id,
value: passedValue,
label: passedLabel,
groupValue: group.value
});
} else {
(0, _utils.triggerEvent)(this.passedElement, 'addItem', {
id: id,
value: passedValue
value: passedValue,
label: passedLabel
});
}
@ -2221,6 +2223,7 @@ return /******/ (function(modules) { // webpackBootstrap
var id = item.id;
var value = item.value;
var label = item.label;
var choiceId = item.choiceId;
var groupId = item.groupId;
var group = groupId >= 0 ? this.store.getGroupById(groupId) : null;
@ -2231,12 +2234,14 @@ return /******/ (function(modules) { // webpackBootstrap
(0, _utils.triggerEvent)(this.passedElement, 'removeItem', {
id: id,
value: value,
label: label,
groupValue: group.value
});
} else {
(0, _utils.triggerEvent)(this.passedElement, 'removeItem', {
id: id,
value: value
value: value,
label: label
});
}
@ -2657,10 +2662,7 @@ return /******/ (function(modules) { // webpackBootstrap
* @param {!Object<string, *>} options
*/
function Fuse (list, options) {
var i
var len
var key
var keys
this.list = list
this.options = options = options || {}
@ -2679,7 +2681,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
Fuse.VERSION = '2.6.0'
Fuse.VERSION = '2.6.2'
/**
* Sets a new list for Fuse to match against.

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

@ -471,12 +471,14 @@ class Choices {
triggerEvent(this.passedElement, 'highlightItem', {
id,
value: item.value,
label: item.label,
groupValue: group.value
});
} else {
triggerEvent(this.passedElement, 'highlightItem', {
id,
value: item.value,
label: item.label,
});
}
}
@ -502,12 +504,14 @@ class Choices {
triggerEvent(this.passedElement, 'unhighlightItem', {
id,
value: item.value,
label: item.label,
groupValue: group.value
});
} else {
triggerEvent(this.passedElement, 'unhighlightItem', {
id,
value: item.value,
label: item.label,
});
}
@ -1915,12 +1919,14 @@ class Choices {
triggerEvent(this.passedElement, 'addItem', {
id,
value: passedValue,
label: passedLabel,
groupValue: group.value,
});
} else {
triggerEvent(this.passedElement, 'addItem', {
id,
value: passedValue,
label: passedLabel,
});
}
@ -1942,6 +1948,7 @@ class Choices {
const id = item.id;
const value = item.value;
const label = item.label;
const choiceId = item.choiceId;
const groupId = item.groupId;
const group = groupId >= 0 ? this.store.getGroupById(groupId) : null;
@ -1952,12 +1959,14 @@ class Choices {
triggerEvent(this.passedElement, 'removeItem', {
id,
value,
label,
groupValue: group.value,
});
} else {
triggerEvent(this.passedElement, 'removeItem', {
id,
value,
label,
});
}

29
index.html
View file

@ -256,6 +256,11 @@
<option value="Queens">Queens</option>
<option value="Staten Island">Staten Island</option>
</select>
<label for="label-event">Use label in event (add/remove)</label>
<select id="choices-select" multiple></select>
<p id="message"></p>
</div>
</div>
<script>
@ -451,6 +456,30 @@
});
var boroughs = new Choices(document.getElementById('boroughs')).disable();
/* Use label on event */
var choicesSelect = new Choices('#choices-select', {
search: false,
removeItemButton: true,
choices: [
{value: 'One', label: 'Label One'},
{value: 'Two', label: 'Label Two', disabled: true},
{value: 'Three', label: 'Label Three'},
],
}).setChoices([
{value: 'Four', label: 'Label Four', disabled: true},
{value: 'Five', label: 'Label Five'},
{value: 'Six', label: 'Label Six', selected: true},
], 'value', 'label', false);
function useLabelOnAddItem (event) {
document.getElementById('message').innerHTML = 'You just added ' + event.detail.label;
};
function useLabelOnRemoveItem (event) {
document.getElementById('message').innerHTML = 'You just removed ' + event.detail.label;
};
choicesSelect.passedElement.addEventListener('addItem',useLabelOnAddItem);
choicesSelect.passedElement.addEventListener('removeItem',useLabelOnRemoveItem);
/* End of use label on event*/
});
</script>