SelectBox.js
112 lines
| 4.3 KiB
| application/javascript
|
JavascriptLexer
Renato-TUF
|
r367 | 'use strict'; | ||
| { | ||||
| const SelectBox = { | ||||
| r338 | cache: {}, | |||
| init: function(id) { | ||||
|
Renato-TUF
|
r367 | const box = document.getElementById(id); | ||
| r338 | SelectBox.cache[id] = []; | |||
|
Renato-TUF
|
r367 | const cache = SelectBox.cache[id]; | ||
| for (const node of box.options) { | ||||
| r338 | cache.push({value: node.value, text: node.text, displayed: 1}); | |||
| } | ||||
| }, | ||||
| redisplay: function(id) { | ||||
| // Repopulate HTML select box from cache | ||||
|
Renato-TUF
|
r367 | const box = document.getElementById(id); | ||
| const scroll_value_from_top = box.scrollTop; | ||||
| box.innerHTML = ''; | ||||
| for (const node of SelectBox.cache[id]) { | ||||
| r338 | if (node.displayed) { | |||
|
Renato-TUF
|
r367 | const new_option = new Option(node.text, node.value, false, false); | ||
| r338 | // Shows a tooltip when hovering over the option | |||
|
Renato-TUF
|
r367 | new_option.title = node.text; | ||
| box.appendChild(new_option); | ||||
| r338 | } | |||
| } | ||||
|
Renato-TUF
|
r367 | box.scrollTop = scroll_value_from_top; | ||
| r338 | }, | |||
| filter: function(id, text) { | ||||
| // Redisplay the HTML select box, displaying only the choices containing ALL | ||||
| // the words in text. (It's an AND search.) | ||||
|
Renato-TUF
|
r367 | const tokens = text.toLowerCase().split(/\s+/); | ||
| for (const node of SelectBox.cache[id]) { | ||||
| r338 | node.displayed = 1; | |||
|
Renato-TUF
|
r367 | const node_text = node.text.toLowerCase(); | ||
| for (const token of tokens) { | ||||
| if (!node_text.includes(token)) { | ||||
| r338 | node.displayed = 0; | |||
|
Renato-TUF
|
r367 | break; // Once the first token isn't found we're done | ||
| r338 | } | |||
| } | ||||
| } | ||||
| SelectBox.redisplay(id); | ||||
| }, | ||||
| delete_from_cache: function(id, value) { | ||||
|
Renato-TUF
|
r367 | let delete_index = null; | ||
| const cache = SelectBox.cache[id]; | ||||
| for (const [i, node] of cache.entries()) { | ||||
| r338 | if (node.value === value) { | |||
| delete_index = i; | ||||
| break; | ||||
| } | ||||
| } | ||||
| cache.splice(delete_index, 1); | ||||
| }, | ||||
| add_to_cache: function(id, option) { | ||||
| SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1}); | ||||
| }, | ||||
| cache_contains: function(id, value) { | ||||
| // Check if an item is contained in the cache | ||||
|
Renato-TUF
|
r367 | for (const node of SelectBox.cache[id]) { | ||
| r338 | if (node.value === value) { | |||
| return true; | ||||
| } | ||||
| } | ||||
| return false; | ||||
| }, | ||||
| move: function(from, to) { | ||||
|
Renato-TUF
|
r367 | const from_box = document.getElementById(from); | ||
| for (const option of from_box.options) { | ||||
| const option_value = option.value; | ||||
| r338 | if (option.selected && SelectBox.cache_contains(from, option_value)) { | |||
| SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1}); | ||||
| SelectBox.delete_from_cache(from, option_value); | ||||
| } | ||||
| } | ||||
| SelectBox.redisplay(from); | ||||
| SelectBox.redisplay(to); | ||||
| }, | ||||
| move_all: function(from, to) { | ||||
|
Renato-TUF
|
r367 | const from_box = document.getElementById(from); | ||
| for (const option of from_box.options) { | ||||
| const option_value = option.value; | ||||
| r338 | if (SelectBox.cache_contains(from, option_value)) { | |||
| SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1}); | ||||
| SelectBox.delete_from_cache(from, option_value); | ||||
| } | ||||
| } | ||||
| SelectBox.redisplay(from); | ||||
| SelectBox.redisplay(to); | ||||
| }, | ||||
| sort: function(id) { | ||||
| SelectBox.cache[id].sort(function(a, b) { | ||||
| a = a.text.toLowerCase(); | ||||
| b = b.text.toLowerCase(); | ||||
|
Renato-TUF
|
r367 | if (a > b) { | ||
| return 1; | ||||
| r338 | } | |||
|
Renato-TUF
|
r367 | if (a < b) { | ||
| return -1; | ||||
| r338 | } | |||
| return 0; | ||||
| } ); | ||||
| }, | ||||
| select_all: function(id) { | ||||
|
Renato-TUF
|
r367 | const box = document.getElementById(id); | ||
| for (const option of box.options) { | ||||
| option.selected = true; | ||||
| r338 | } | |||
| } | ||||
| }; | ||||
| window.SelectBox = SelectBox; | ||||
|
Renato-TUF
|
r367 | } | ||
