blob: b4abeb9c1ed4f5ddf14e89a5bddc386771aa9288 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import { $gettext } from './gettext.js';
/**
* Turns a select-box into an easy to use multiple select-box
*/
const MultiSelect = {
create: function (id, itemName, options = {}) {
const count = $(id).find('option:selected').length;
const count_template = _.template(_('<%= count %> ausgewählt'));
const update_counter = function () {
const count = $(id).find('option:selected').length;
$(id).next().find('.counter').text(count_template({count: count}));
};
if (!$(id).attr('multiple')) {
$(id).attr('multiple', 'multiple').css('height', '6em');
}
$(id).multiSelect({
selectableHeader:
`<div class="header">
<a href="#" class="button select-all">${$gettext('Alle hinzufügen')}</a>
</div>`,
selectionHeader:
`<div class="header">
<div class="counter">${count_template({count: count})}.</div>
<a href="#" class="button deselect-all">${$gettext('Alle entfernen')}</a>
</div>`,
keepOrder: true,
cssClass: ['studip-multi-select', options.cssClass || ''].join(' ').trim(),
afterInit: function () {
$(id).next().find('.ms-elem-selectable,.ms-elem-selection').find('br').remove();
},
afterSelect: update_counter,
afterDeselect: update_counter
});
$(id).next().find('.select-all').click(function () {
$(id).multiSelect('select_all');
});
$(id).next().find('.deselect-all').click(function () {
$(id).multiSelect('deselect_all');
});
}
};
export default MultiSelect;
|
