From 65bffcd92b974cfacae8534eda282c2240713fc5 Mon Sep 17 00:00:00 2001 From: AricMonary Date: Thu, 14 Dec 2023 21:24:39 -0600 Subject: [PATCH 1/6] Add option to set max number of rows --- tools/key-event-viewer.js | 18 ++++++++++++++++++ tools/options.js | 37 +++++++++++++++++++++++++++++++++++++ tools/output-table.js | 15 +++++++++++++-- 3 files changed, 68 insertions(+), 2 deletions(-) diff --git a/tools/key-event-viewer.js b/tools/key-event-viewer.js index 020238d7..09f4e22e 100644 --- a/tools/key-event-viewer.js +++ b/tools/key-event-viewer.js @@ -145,6 +145,10 @@ function init() { 'onclick': "toggleReadonly()", 'checked': false, }], + ["input","numberOfRows", "Number of rows", { + 'onfocusout': "validateNumOfRowsInput()", + 'defaultvalue': 100, + }], ["text", "Note: Options apply to new events only."], ]; @@ -427,3 +431,17 @@ function toggleReadonly() { } setInputFocus(false); } + +function validateNumOfRowsInput() { + var input = document.getElementById("numberOfRows"); + var roundedInputValue = parseInt(input.value); + + // Default 100 if undefined, NaN, or less than zero + if (roundedInputValue === undefined || isNaN(roundedInputValue) || roundedInputValue <= 0) { + input.value = 100; + } + // Round number if a decimal + else { + input.value = roundedInputValue; + } +} \ No newline at end of file diff --git a/tools/options.js b/tools/options.js index c4f1c506..b971b081 100644 --- a/tools/options.js +++ b/tools/options.js @@ -69,6 +69,11 @@ function createOptions(options_div, event_info, table_info, extra) { } else if (type == "text") { var text = opt[1]; cell.appendChild(document.createTextNode(text)); + } else if (type == "input") { + var name = opt[1]; + var label = opt[2]; + var options = opt[3]; + addOptionInput(cell, name, label, options); } row.appendChild(cell); @@ -118,6 +123,38 @@ function addOptionCheckbox(cell, id, text, options) { cell.appendChild(document.createElement("br")); } +function addOptionInput(cell, id, text, options) { + var label = document.createElement("label"); + label.setAttribute("for", id); + var span = document.createElement('span'); + if (options.class !== undefined) { + for (var c of options.class.split(' ')) { + span.classList.add(c); + } + } + + span.appendChild(document.createTextNode(text)); + label.appendChild(span); + cell.appendChild(label); + + cell.appendChild(document.createElement("br")); + + if (options.enabled === undefined) + options.enabled = true; + if (options.defaultvalue === undefined) + options.defaultvalue = ""; + + var input = document.createElement("input"); + input.type = "text"; + input.id = id; + input.value = options.defaultvalue; + input.disabled = !options.enabled; + if (options.onfocusout !== undefined && options.onfocusout != "") { + input.setAttribute("onfocusout", options.onfocusout); + } + cell.appendChild(input); +} + function addOptionText(cell, prefix, id, text) { var span1 = document.createElement('span'); span1.classList.add("opttext"); diff --git a/tools/output-table.js b/tools/output-table.js index 2a963a41..b0e44d8c 100644 --- a/tools/output-table.js +++ b/tools/output-table.js @@ -11,7 +11,7 @@ // * There is a 'subheader' CSS class for the 2nd header row. var NUM_HEADER_ROWS = 2; -var MAX_OUTPUT_ROWS = 100 + NUM_HEADER_ROWS; +var DEFAULT_MAX_OUTPUT_ROWS = 100; // Sequence ID for numbering events. var _seqId = 1; @@ -119,7 +119,7 @@ function deleteLastOutputRow() { function addOutputRow(extra_class) { var table = document.getElementById("output"); - while (table.rows.length >= MAX_OUTPUT_ROWS) { + while (table.rows.length >= maxNumberOfRows()) { table.deleteRow(-1); } // Insert after the header rows. @@ -273,3 +273,14 @@ function calcString(data) { } return "'" + data + "'"; } + +function maxNumberOfRows() { + var input = document.getElementById("numberOfRows"); + var numberOfRows = DEFAULT_MAX_OUTPUT_ROWS; + if (input !== undefined) { + numberOfRows = parseInt(input.value); + } + + var maxRows = numberOfRows + NUM_HEADER_ROWS; + return maxRows; +} \ No newline at end of file From 57ab580451bf76a362e09ffc21587a3958d0d555 Mon Sep 17 00:00:00 2001 From: AricMonary Date: Thu, 14 Dec 2023 21:31:31 -0600 Subject: [PATCH 2/6] Switch spaces to tab for easier diffing --- tools/key-event-viewer.js | 4 +- tools/options.js | 90 +++++++++++++++++++-------------------- tools/output-table.js | 2 +- 3 files changed, 48 insertions(+), 48 deletions(-) diff --git a/tools/key-event-viewer.js b/tools/key-event-viewer.js index 09f4e22e..f253a09f 100644 --- a/tools/key-event-viewer.js +++ b/tools/key-event-viewer.js @@ -179,9 +179,9 @@ function init() { // ===== function onKeyDown(e) { - _isKeydown = true; + _isKeydown = true; handleKeyEvent("keydown", e); - _isKeydown = false; + _isKeydown = false; } function onKeyPress(e) { diff --git a/tools/options.js b/tools/options.js index b971b081..77f6cea2 100644 --- a/tools/options.js +++ b/tools/options.js @@ -85,11 +85,11 @@ function createOptions(options_div, event_info, table_info, extra) { } function addOptionTitle(cell, title) { - var span = document.createElement('span'); - span.classList.add("opttitle"); - span.textContent = title; - cell.appendChild(span); - cell.appendChild(document.createElement("br")); + var span = document.createElement('span'); + span.classList.add("opttitle"); + span.textContent = title; + cell.appendChild(span); + cell.appendChild(document.createElement("br")); } function addOptionCheckbox(cell, id, text, options) { @@ -98,46 +98,46 @@ function addOptionCheckbox(cell, id, text, options) { if (options.checked === undefined) options.checked = true; - var input = document.createElement("input"); - input.type = "checkbox"; - input.id = id; - input.checked = options.checked; - input.disabled = !options.enabled; - if (options.onclick != undefined && options.onclick != "") { - input.setAttribute("onclick", options.onclick); - } - cell.appendChild(input); - - var label = document.createElement("label"); - label.setAttribute("for", id); - var span = document.createElement('span'); - if (options.class !== undefined) { - for (var c of options.class.split(' ')) { - span.classList.add(c); + var input = document.createElement("input"); + input.type = "checkbox"; + input.id = id; + input.checked = options.checked; + input.disabled = !options.enabled; + if (options.onclick != undefined && options.onclick != "") { + input.setAttribute("onclick", options.onclick); + } + cell.appendChild(input); + + var label = document.createElement("label"); + label.setAttribute("for", id); + var span = document.createElement('span'); + if (options.class !== undefined) { + for (var c of options.class.split(' ')) { + span.classList.add(c); } } - span.appendChild(document.createTextNode(text)); - label.appendChild(span); - cell.appendChild(label); + span.appendChild(document.createTextNode(text)); + label.appendChild(span); + cell.appendChild(label); - cell.appendChild(document.createElement("br")); + cell.appendChild(document.createElement("br")); } function addOptionInput(cell, id, text, options) { var label = document.createElement("label"); - label.setAttribute("for", id); - var span = document.createElement('span'); - if (options.class !== undefined) { - for (var c of options.class.split(' ')) { - span.classList.add(c); + label.setAttribute("for", id); + var span = document.createElement('span'); + if (options.class !== undefined) { + for (var c of options.class.split(' ')) { + span.classList.add(c); } } span.appendChild(document.createTextNode(text)); - label.appendChild(span); - cell.appendChild(label); + label.appendChild(span); + cell.appendChild(label); - cell.appendChild(document.createElement("br")); + cell.appendChild(document.createElement("br")); if (options.enabled === undefined) options.enabled = true; @@ -156,18 +156,18 @@ function addOptionInput(cell, id, text, options) { } function addOptionText(cell, prefix, id, text) { - var span1 = document.createElement('span'); - span1.classList.add("opttext"); - span1.appendChild(document.createTextNode(prefix)); - - var span2 = document.createElement('span'); - span2.id = id; - span2.textContent = 0; - span1.appendChild(span2); - span1.appendChild(document.createTextNode(text)); - - cell.appendChild(span1); - cell.appendChild(document.createElement("br")); + var span1 = document.createElement('span'); + span1.classList.add("opttext"); + span1.appendChild(document.createTextNode(prefix)); + + var span2 = document.createElement('span'); + span2.id = id; + span2.textContent = 0; + span1.appendChild(span2); + span1.appendChild(document.createTextNode(text)); + + cell.appendChild(span1); + cell.appendChild(document.createElement("br")); } function toggleOptions() { diff --git a/tools/output-table.js b/tools/output-table.js index b0e44d8c..8c178d37 100644 --- a/tools/output-table.js +++ b/tools/output-table.js @@ -125,7 +125,7 @@ function addOutputRow(extra_class) { // Insert after the header rows. var row = table.insertRow(NUM_HEADER_ROWS); if (extra_class) { - row.classList.add(extra_class); + row.classList.add(extra_class); } return row; } From 2d6d30e1d521a864413a9311ad2f8da1aa8d9626 Mon Sep 17 00:00:00 2001 From: AricMonary Date: Thu, 14 Dec 2023 21:44:51 -0600 Subject: [PATCH 3/6] Add style to text input --- tools/key-event-viewer.css | 8 ++++++++ tools/key-event-viewer.js | 2 +- tools/options.js | 4 ++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/tools/key-event-viewer.css b/tools/key-event-viewer.css index 22063944..8060e26a 100644 --- a/tools/key-event-viewer.css +++ b/tools/key-event-viewer.css @@ -12,6 +12,10 @@ font-size: 10pt; } +#maxNumberOfRows { + width: 40px; +} + .opttable { border: 1px solid black; } @@ -95,6 +99,10 @@ input[type=checkbox]:disabled+label { color: #a0a0a0; } +input[type=text] { + margin: 0 3px 0 3px; +} + .keyevent_hilight { border: 1px solid #404040; border-radius: 4px; diff --git a/tools/key-event-viewer.js b/tools/key-event-viewer.js index f253a09f..93ae10f1 100644 --- a/tools/key-event-viewer.js +++ b/tools/key-event-viewer.js @@ -145,7 +145,7 @@ function init() { 'onclick': "toggleReadonly()", 'checked': false, }], - ["input","numberOfRows", "Number of rows", { + ["input","maxNumberOfRows", "Max number of rows:", { 'onfocusout': "validateNumOfRowsInput()", 'defaultvalue': 100, }], diff --git a/tools/options.js b/tools/options.js index 77f6cea2..6aab2a21 100644 --- a/tools/options.js +++ b/tools/options.js @@ -137,8 +137,6 @@ function addOptionInput(cell, id, text, options) { label.appendChild(span); cell.appendChild(label); - cell.appendChild(document.createElement("br")); - if (options.enabled === undefined) options.enabled = true; if (options.defaultvalue === undefined) @@ -153,6 +151,8 @@ function addOptionInput(cell, id, text, options) { input.setAttribute("onfocusout", options.onfocusout); } cell.appendChild(input); + + cell.appendChild(document.createElement("br")); } function addOptionText(cell, prefix, id, text) { From 13ee55f746efd97e75a5f1b080ed62e6bdbb3278 Mon Sep 17 00:00:00 2001 From: AricMonary Date: Thu, 14 Dec 2023 22:00:15 -0600 Subject: [PATCH 4/6] Fix changed element ID --- tools/output-table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/output-table.js b/tools/output-table.js index 8c178d37..fbbc3833 100644 --- a/tools/output-table.js +++ b/tools/output-table.js @@ -275,7 +275,7 @@ function calcString(data) { } function maxNumberOfRows() { - var input = document.getElementById("numberOfRows"); + var input = document.getElementById("maxNumberOfRows"); var numberOfRows = DEFAULT_MAX_OUTPUT_ROWS; if (input !== undefined) { numberOfRows = parseInt(input.value); From fb9a8968f086da5ef3d479429eee52d50392154a Mon Sep 17 00:00:00 2001 From: AricMonary Date: Thu, 14 Dec 2023 22:01:42 -0600 Subject: [PATCH 5/6] Fix changed element ID --- tools/key-event-viewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/key-event-viewer.js b/tools/key-event-viewer.js index 93ae10f1..0bdd09e6 100644 --- a/tools/key-event-viewer.js +++ b/tools/key-event-viewer.js @@ -433,7 +433,7 @@ function toggleReadonly() { } function validateNumOfRowsInput() { - var input = document.getElementById("numberOfRows"); + var input = document.getElementById("maxNumberOfRows"); var roundedInputValue = parseInt(input.value); // Default 100 if undefined, NaN, or less than zero From 6d6d4ecc32f8e020c6ea5dd6a2039c5940f5f7eb Mon Sep 17 00:00:00 2001 From: AricMonary Date: Thu, 14 Dec 2023 22:03:27 -0600 Subject: [PATCH 6/6] Add max number of rows options --- tools/key-event-viewer.css | 8 +++ tools/key-event-viewer.js | 22 +++++++- tools/options.js | 111 ++++++++++++++++++++++++------------- tools/output-table.js | 17 +++++- 4 files changed, 116 insertions(+), 42 deletions(-) diff --git a/tools/key-event-viewer.css b/tools/key-event-viewer.css index 22063944..8060e26a 100644 --- a/tools/key-event-viewer.css +++ b/tools/key-event-viewer.css @@ -12,6 +12,10 @@ font-size: 10pt; } +#maxNumberOfRows { + width: 40px; +} + .opttable { border: 1px solid black; } @@ -95,6 +99,10 @@ input[type=checkbox]:disabled+label { color: #a0a0a0; } +input[type=text] { + margin: 0 3px 0 3px; +} + .keyevent_hilight { border: 1px solid #404040; border-radius: 4px; diff --git a/tools/key-event-viewer.js b/tools/key-event-viewer.js index 020238d7..0bdd09e6 100644 --- a/tools/key-event-viewer.js +++ b/tools/key-event-viewer.js @@ -145,6 +145,10 @@ function init() { 'onclick': "toggleReadonly()", 'checked': false, }], + ["input","maxNumberOfRows", "Max number of rows:", { + 'onfocusout': "validateNumOfRowsInput()", + 'defaultvalue': 100, + }], ["text", "Note: Options apply to new events only."], ]; @@ -175,9 +179,9 @@ function init() { // ===== function onKeyDown(e) { - _isKeydown = true; + _isKeydown = true; handleKeyEvent("keydown", e); - _isKeydown = false; + _isKeydown = false; } function onKeyPress(e) { @@ -427,3 +431,17 @@ function toggleReadonly() { } setInputFocus(false); } + +function validateNumOfRowsInput() { + var input = document.getElementById("maxNumberOfRows"); + var roundedInputValue = parseInt(input.value); + + // Default 100 if undefined, NaN, or less than zero + if (roundedInputValue === undefined || isNaN(roundedInputValue) || roundedInputValue <= 0) { + input.value = 100; + } + // Round number if a decimal + else { + input.value = roundedInputValue; + } +} \ No newline at end of file diff --git a/tools/options.js b/tools/options.js index c4f1c506..6aab2a21 100644 --- a/tools/options.js +++ b/tools/options.js @@ -69,6 +69,11 @@ function createOptions(options_div, event_info, table_info, extra) { } else if (type == "text") { var text = opt[1]; cell.appendChild(document.createTextNode(text)); + } else if (type == "input") { + var name = opt[1]; + var label = opt[2]; + var options = opt[3]; + addOptionInput(cell, name, label, options); } row.appendChild(cell); @@ -80,11 +85,11 @@ function createOptions(options_div, event_info, table_info, extra) { } function addOptionTitle(cell, title) { - var span = document.createElement('span'); - span.classList.add("opttitle"); - span.textContent = title; - cell.appendChild(span); - cell.appendChild(document.createElement("br")); + var span = document.createElement('span'); + span.classList.add("opttitle"); + span.textContent = title; + cell.appendChild(span); + cell.appendChild(document.createElement("br")); } function addOptionCheckbox(cell, id, text, options) { @@ -93,44 +98,76 @@ function addOptionCheckbox(cell, id, text, options) { if (options.checked === undefined) options.checked = true; - var input = document.createElement("input"); - input.type = "checkbox"; - input.id = id; - input.checked = options.checked; - input.disabled = !options.enabled; - if (options.onclick != undefined && options.onclick != "") { - input.setAttribute("onclick", options.onclick); - } - cell.appendChild(input); - - var label = document.createElement("label"); - label.setAttribute("for", id); - var span = document.createElement('span'); - if (options.class !== undefined) { - for (var c of options.class.split(' ')) { - span.classList.add(c); + var input = document.createElement("input"); + input.type = "checkbox"; + input.id = id; + input.checked = options.checked; + input.disabled = !options.enabled; + if (options.onclick != undefined && options.onclick != "") { + input.setAttribute("onclick", options.onclick); + } + cell.appendChild(input); + + var label = document.createElement("label"); + label.setAttribute("for", id); + var span = document.createElement('span'); + if (options.class !== undefined) { + for (var c of options.class.split(' ')) { + span.classList.add(c); } } - span.appendChild(document.createTextNode(text)); - label.appendChild(span); - cell.appendChild(label); + span.appendChild(document.createTextNode(text)); + label.appendChild(span); + cell.appendChild(label); + + cell.appendChild(document.createElement("br")); +} + +function addOptionInput(cell, id, text, options) { + var label = document.createElement("label"); + label.setAttribute("for", id); + var span = document.createElement('span'); + if (options.class !== undefined) { + for (var c of options.class.split(' ')) { + span.classList.add(c); + } + } + + span.appendChild(document.createTextNode(text)); + label.appendChild(span); + cell.appendChild(label); + + if (options.enabled === undefined) + options.enabled = true; + if (options.defaultvalue === undefined) + options.defaultvalue = ""; + + var input = document.createElement("input"); + input.type = "text"; + input.id = id; + input.value = options.defaultvalue; + input.disabled = !options.enabled; + if (options.onfocusout !== undefined && options.onfocusout != "") { + input.setAttribute("onfocusout", options.onfocusout); + } + cell.appendChild(input); - cell.appendChild(document.createElement("br")); + cell.appendChild(document.createElement("br")); } function addOptionText(cell, prefix, id, text) { - var span1 = document.createElement('span'); - span1.classList.add("opttext"); - span1.appendChild(document.createTextNode(prefix)); - - var span2 = document.createElement('span'); - span2.id = id; - span2.textContent = 0; - span1.appendChild(span2); - span1.appendChild(document.createTextNode(text)); - - cell.appendChild(span1); - cell.appendChild(document.createElement("br")); + var span1 = document.createElement('span'); + span1.classList.add("opttext"); + span1.appendChild(document.createTextNode(prefix)); + + var span2 = document.createElement('span'); + span2.id = id; + span2.textContent = 0; + span1.appendChild(span2); + span1.appendChild(document.createTextNode(text)); + + cell.appendChild(span1); + cell.appendChild(document.createElement("br")); } function toggleOptions() { diff --git a/tools/output-table.js b/tools/output-table.js index 2a963a41..fbbc3833 100644 --- a/tools/output-table.js +++ b/tools/output-table.js @@ -11,7 +11,7 @@ // * There is a 'subheader' CSS class for the 2nd header row. var NUM_HEADER_ROWS = 2; -var MAX_OUTPUT_ROWS = 100 + NUM_HEADER_ROWS; +var DEFAULT_MAX_OUTPUT_ROWS = 100; // Sequence ID for numbering events. var _seqId = 1; @@ -119,13 +119,13 @@ function deleteLastOutputRow() { function addOutputRow(extra_class) { var table = document.getElementById("output"); - while (table.rows.length >= MAX_OUTPUT_ROWS) { + while (table.rows.length >= maxNumberOfRows()) { table.deleteRow(-1); } // Insert after the header rows. var row = table.insertRow(NUM_HEADER_ROWS); if (extra_class) { - row.classList.add(extra_class); + row.classList.add(extra_class); } return row; } @@ -273,3 +273,14 @@ function calcString(data) { } return "'" + data + "'"; } + +function maxNumberOfRows() { + var input = document.getElementById("maxNumberOfRows"); + var numberOfRows = DEFAULT_MAX_OUTPUT_ROWS; + if (input !== undefined) { + numberOfRows = parseInt(input.value); + } + + var maxRows = numberOfRows + NUM_HEADER_ROWS; + return maxRows; +} \ No newline at end of file