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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
function _setting_panel(div, params, callback) { var setting_changed = callback; var panel = document.createElement("div"); panel.className = "setting-panel"; var pain = document.createElement("div"); var sasite = document.createElement("span"); pain.appendChild(sasite); var table = document.createElement("table"); var tr, td; var label, select; var sel_hanten = null; var selects = new Array(); var item; for (var param of params) { tr = document.createElement("tr"); td = document.createElement("td"); label = document.createElement("label"); _util.set_text(label, param[0]); td.appendChild(label); tr.appendChild(td); td = document.createElement("td"); select = document.createElement("select"); if (param[0] == _label.HANTEN) sel_hanten = select; for (var i = 2; i < param.length; i+= 2) { item = _util.create_element("option", param[i]); item.value = param[i + 1]; select.appendChild(item); } select.selectedIndex = param[1]; select.addEventListener("change", function(e) { var target = e.target; setting_changed(selects.indexOf(target), target.value); }); selects.push(select); td.appendChild(select); tr.appendChild(td); table.appendChild(tr); } pain.appendChild(table); panel.appendChild(pain); var button = document.createElement("button"); _util.set_text(button, _label.SETTING); var self = this; button.addEventListener("mousedown", function() { self.toggle(); }); panel.appendChild(button); div.appendChild(panel); this.show = function() { panel.style.display = "block"; } this.hide = function() { panel.style.display = "none"; } this.set_sasite = function(s) { sasite.textContent = s; } this.init = function() { var select_list = table.getElementsByTagName("select"); [].forEach.call(select_list, function(select) { select.dispatchEvent(new Event("change")); }); } this.set_hanten = function(b) { if (sel_hanten == null) return; sel_hanten.selectedIndex = (b) ? 0 : 1; sel_hanten.dispatchEvent(new Event("change")); } this.toggle_hanten = function() { if (sel_hanten == null) return; sel_hanten.selectedIndex ^= 1; sel_hanten.dispatchEvent(new Event("change")); } this.open = function() { sasite.style.display = "none"; table.style.display = "inline"; button.textContent = _label.END_SETTING; } this.close = function() { sasite.style.display = "inline"; table.style.display = "none"; button.textContent = _label.SETTING; } this.toggle = function() { if (_util.get_text(button) == _label.SETTING) this.open(); else this.close(); } this.show = function() { panel.style.display = "block"; } this.hide = function() { panel.style.display = "none"; } }