|
afe42d0…
|
ragelink
|
1 |
'use strict'; |
|
afe42d0…
|
ragelink
|
2 |
{ |
|
afe42d0…
|
ragelink
|
3 |
const SelectBox = { |
|
afe42d0…
|
ragelink
|
4 |
cache: {}, |
|
afe42d0…
|
ragelink
|
5 |
init: function(id) { |
|
afe42d0…
|
ragelink
|
6 |
const box = document.getElementById(id); |
|
afe42d0…
|
ragelink
|
7 |
SelectBox.cache[id] = []; |
|
afe42d0…
|
ragelink
|
8 |
const cache = SelectBox.cache[id]; |
|
afe42d0…
|
ragelink
|
9 |
for (const node of box.options) { |
|
afe42d0…
|
ragelink
|
10 |
cache.push({value: node.value, text: node.text, displayed: 1}); |
|
afe42d0…
|
ragelink
|
11 |
} |
|
afe42d0…
|
ragelink
|
12 |
}, |
|
afe42d0…
|
ragelink
|
13 |
redisplay: function(id) { |
|
afe42d0…
|
ragelink
|
14 |
// Repopulate HTML select box from cache |
|
afe42d0…
|
ragelink
|
15 |
const box = document.getElementById(id); |
|
afe42d0…
|
ragelink
|
16 |
const scroll_value_from_top = box.scrollTop; |
|
afe42d0…
|
ragelink
|
17 |
box.innerHTML = ''; |
|
afe42d0…
|
ragelink
|
18 |
for (const node of SelectBox.cache[id]) { |
|
afe42d0…
|
ragelink
|
19 |
if (node.displayed) { |
|
afe42d0…
|
ragelink
|
20 |
const new_option = new Option(node.text, node.value, false, false); |
|
afe42d0…
|
ragelink
|
21 |
// Shows a tooltip when hovering over the option |
|
afe42d0…
|
ragelink
|
22 |
new_option.title = node.text; |
|
afe42d0…
|
ragelink
|
23 |
box.appendChild(new_option); |
|
afe42d0…
|
ragelink
|
24 |
} |
|
afe42d0…
|
ragelink
|
25 |
} |
|
afe42d0…
|
ragelink
|
26 |
box.scrollTop = scroll_value_from_top; |
|
afe42d0…
|
ragelink
|
27 |
}, |
|
afe42d0…
|
ragelink
|
28 |
filter: function(id, text) { |
|
afe42d0…
|
ragelink
|
29 |
// Redisplay the HTML select box, displaying only the choices containing ALL |
|
afe42d0…
|
ragelink
|
30 |
// the words in text. (It's an AND search.) |
|
afe42d0…
|
ragelink
|
31 |
const tokens = text.toLowerCase().split(/\s+/); |
|
afe42d0…
|
ragelink
|
32 |
for (const node of SelectBox.cache[id]) { |
|
afe42d0…
|
ragelink
|
33 |
node.displayed = 1; |
|
afe42d0…
|
ragelink
|
34 |
const node_text = node.text.toLowerCase(); |
|
afe42d0…
|
ragelink
|
35 |
for (const token of tokens) { |
|
afe42d0…
|
ragelink
|
36 |
if (!node_text.includes(token)) { |
|
afe42d0…
|
ragelink
|
37 |
node.displayed = 0; |
|
afe42d0…
|
ragelink
|
38 |
break; // Once the first token isn't found we're done |
|
afe42d0…
|
ragelink
|
39 |
} |
|
afe42d0…
|
ragelink
|
40 |
} |
|
afe42d0…
|
ragelink
|
41 |
} |
|
afe42d0…
|
ragelink
|
42 |
SelectBox.redisplay(id); |
|
afe42d0…
|
ragelink
|
43 |
}, |
|
afe42d0…
|
ragelink
|
44 |
get_hidden_node_count(id) { |
|
afe42d0…
|
ragelink
|
45 |
const cache = SelectBox.cache[id] || []; |
|
afe42d0…
|
ragelink
|
46 |
return cache.filter(node => node.displayed === 0).length; |
|
afe42d0…
|
ragelink
|
47 |
}, |
|
afe42d0…
|
ragelink
|
48 |
delete_from_cache: function(id, value) { |
|
afe42d0…
|
ragelink
|
49 |
let delete_index = null; |
|
afe42d0…
|
ragelink
|
50 |
const cache = SelectBox.cache[id]; |
|
afe42d0…
|
ragelink
|
51 |
for (const [i, node] of cache.entries()) { |
|
afe42d0…
|
ragelink
|
52 |
if (node.value === value) { |
|
afe42d0…
|
ragelink
|
53 |
delete_index = i; |
|
afe42d0…
|
ragelink
|
54 |
break; |
|
afe42d0…
|
ragelink
|
55 |
} |
|
afe42d0…
|
ragelink
|
56 |
} |
|
afe42d0…
|
ragelink
|
57 |
cache.splice(delete_index, 1); |
|
afe42d0…
|
ragelink
|
58 |
}, |
|
afe42d0…
|
ragelink
|
59 |
add_to_cache: function(id, option) { |
|
afe42d0…
|
ragelink
|
60 |
SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1}); |
|
afe42d0…
|
ragelink
|
61 |
}, |
|
afe42d0…
|
ragelink
|
62 |
cache_contains: function(id, value) { |
|
afe42d0…
|
ragelink
|
63 |
// Check if an item is contained in the cache |
|
afe42d0…
|
ragelink
|
64 |
for (const node of SelectBox.cache[id]) { |
|
afe42d0…
|
ragelink
|
65 |
if (node.value === value) { |
|
afe42d0…
|
ragelink
|
66 |
return true; |
|
afe42d0…
|
ragelink
|
67 |
} |
|
afe42d0…
|
ragelink
|
68 |
} |
|
afe42d0…
|
ragelink
|
69 |
return false; |
|
afe42d0…
|
ragelink
|
70 |
}, |
|
afe42d0…
|
ragelink
|
71 |
move: function(from, to) { |
|
afe42d0…
|
ragelink
|
72 |
const from_box = document.getElementById(from); |
|
afe42d0…
|
ragelink
|
73 |
for (const option of from_box.options) { |
|
afe42d0…
|
ragelink
|
74 |
const option_value = option.value; |
|
afe42d0…
|
ragelink
|
75 |
if (option.selected && SelectBox.cache_contains(from, option_value)) { |
|
afe42d0…
|
ragelink
|
76 |
SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1}); |
|
afe42d0…
|
ragelink
|
77 |
SelectBox.delete_from_cache(from, option_value); |
|
afe42d0…
|
ragelink
|
78 |
} |
|
afe42d0…
|
ragelink
|
79 |
} |
|
afe42d0…
|
ragelink
|
80 |
SelectBox.redisplay(from); |
|
afe42d0…
|
ragelink
|
81 |
SelectBox.redisplay(to); |
|
afe42d0…
|
ragelink
|
82 |
}, |
|
afe42d0…
|
ragelink
|
83 |
move_all: function(from, to) { |
|
afe42d0…
|
ragelink
|
84 |
const from_box = document.getElementById(from); |
|
afe42d0…
|
ragelink
|
85 |
for (const option of from_box.options) { |
|
afe42d0…
|
ragelink
|
86 |
const option_value = option.value; |
|
afe42d0…
|
ragelink
|
87 |
if (SelectBox.cache_contains(from, option_value)) { |
|
afe42d0…
|
ragelink
|
88 |
SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1}); |
|
afe42d0…
|
ragelink
|
89 |
SelectBox.delete_from_cache(from, option_value); |
|
afe42d0…
|
ragelink
|
90 |
} |
|
afe42d0…
|
ragelink
|
91 |
} |
|
afe42d0…
|
ragelink
|
92 |
SelectBox.redisplay(from); |
|
afe42d0…
|
ragelink
|
93 |
SelectBox.redisplay(to); |
|
afe42d0…
|
ragelink
|
94 |
}, |
|
afe42d0…
|
ragelink
|
95 |
sort: function(id) { |
|
afe42d0…
|
ragelink
|
96 |
SelectBox.cache[id].sort(function(a, b) { |
|
afe42d0…
|
ragelink
|
97 |
a = a.text.toLowerCase(); |
|
afe42d0…
|
ragelink
|
98 |
b = b.text.toLowerCase(); |
|
afe42d0…
|
ragelink
|
99 |
if (a > b) { |
|
afe42d0…
|
ragelink
|
100 |
return 1; |
|
afe42d0…
|
ragelink
|
101 |
} |
|
afe42d0…
|
ragelink
|
102 |
if (a < b) { |
|
afe42d0…
|
ragelink
|
103 |
return -1; |
|
afe42d0…
|
ragelink
|
104 |
} |
|
afe42d0…
|
ragelink
|
105 |
return 0; |
|
afe42d0…
|
ragelink
|
106 |
} ); |
|
afe42d0…
|
ragelink
|
107 |
}, |
|
afe42d0…
|
ragelink
|
108 |
select_all: function(id) { |
|
afe42d0…
|
ragelink
|
109 |
const box = document.getElementById(id); |
|
afe42d0…
|
ragelink
|
110 |
for (const option of box.options) { |
|
afe42d0…
|
ragelink
|
111 |
option.selected = true; |
|
afe42d0…
|
ragelink
|
112 |
} |
|
afe42d0…
|
ragelink
|
113 |
} |
|
afe42d0…
|
ragelink
|
114 |
}; |
|
afe42d0…
|
ragelink
|
115 |
window.SelectBox = SelectBox; |
|
afe42d0…
|
ragelink
|
116 |
} |