Phase 5b and Phase 6: TypeScript restructure, jsdom tests, regex filters and per-playlist buffer in the UI
continuous-integration/drone/push Build is passing
continuous-integration/drone/push Build is passing
TypeScript:
- menu_ts.ts split into menu.ts, content.ts, popup.ts and xmltv.ts; the
other files drop their _ts suffix. Bundle order fixed in ts/tsconfig.json.
- All 94 string event handlers (setAttribute("onclick", "javascript: ..."))
replaced with addEventListener closures. changeButtonAction, which
rewrote an onclick attribute from select values, is gone.
- Settings rows are generated from one SETTINGS_FIELDS table instead of
~20 copy-pasted blocks; rendered HTML is byte-identical to before.
saveSettings now serialises password inputs, so a changed Plex token is
actually sent (the server treats the mask as unchanged).
- createLayout rebuilds the menu list only when the set of visible items
changes, so focus in the menu survives a refresh.
- announce()/alertUser(): alerts are mirrored into an aria-live region.
- Filter popup offers a third type, Regular Expression (regex-filter), and
the filter table labels it. Playlist popups get a Buffer select
(default / none / xTeVe / FFmpeg / VLC) saved as the playlist's
"buffer" parameter; the tuner field stays editable when the
playlist's own buffer is active.
Tests: tests/ holds 27 jsdom tests (Node's built-in runner, jsdom pinned)
that load the built bundle with a fixture server payload: menu visibility
rules, mapping table renders names as text, settings panel fields, popup
flows, sorting, bulk select, layout refresh keeps nodes, live region,
regex option, buffer select. npm test runs in the Drone webui-check step.
README-DEV documents the layout and the test workflow.
This commit is contained in:
+44
-7
@@ -60,6 +60,35 @@ function showElement(elmID, type) {
|
||||
element.className = cssClass;
|
||||
}
|
||||
|
||||
// announce writes a message into the ARIA live region so assistive
|
||||
// technology hears it; the region is created when the page has none.
|
||||
function announce(message:string) {
|
||||
if (document.body == null) {
|
||||
return
|
||||
}
|
||||
|
||||
var region = document.getElementById("announcer")
|
||||
if (region == null) {
|
||||
region = document.getElementById("sr-announcer")
|
||||
}
|
||||
if (region == null) {
|
||||
region = document.createElement("DIV")
|
||||
region.id = "announcer"
|
||||
region.className = "sr-only"
|
||||
region.setAttribute("aria-live", "polite")
|
||||
region.setAttribute("aria-atomic", "true")
|
||||
document.body.appendChild(region)
|
||||
}
|
||||
|
||||
region.textContent = message
|
||||
}
|
||||
|
||||
// alertUser shows the browser alert and mirrors it into the live region.
|
||||
function alertUser(message:string) {
|
||||
announce(message)
|
||||
alert(message)
|
||||
}
|
||||
|
||||
function setConnectionState(state:string, text:string = "") {
|
||||
|
||||
var label:string = text
|
||||
@@ -92,9 +121,17 @@ function setConnectionState(state:string, text:string = "") {
|
||||
indicator.innerText = label
|
||||
}
|
||||
|
||||
function changeButtonAction(element, buttonID, attribute) {
|
||||
var value = element.options[element.selectedIndex].value;
|
||||
document.getElementById(buttonID).setAttribute(attribute, value)
|
||||
// markChangedOnChange flags a control as edited on "change" so that
|
||||
// saveSettings / donePopupData pick it up, then runs an optional follow-up.
|
||||
// Callers build many controls through one reused `var`, so the listener must
|
||||
// close over this parameter and not over the caller's variable.
|
||||
function markChangedOnChange(element:HTMLElement, then?:(element:HTMLElement) => void) {
|
||||
element.addEventListener("change", function() {
|
||||
element.className = "changed"
|
||||
if (then != undefined) {
|
||||
then(element)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getLocalData(dataType, id):object {
|
||||
@@ -501,7 +538,7 @@ function changeChannelNumber(element) {
|
||||
var channels = getObjKeys(data)
|
||||
|
||||
if (isNaN(newNumber)) {
|
||||
alert("Invalid channel number")
|
||||
alertUser("Invalid channel number")
|
||||
return
|
||||
}
|
||||
|
||||
@@ -584,7 +621,7 @@ function toggleChannelStatus(id:string) {
|
||||
if (channel["x-xmltv-file"] == "-" || channel["x-mapping"] == "-") {
|
||||
|
||||
if (BULK_EDIT == false) {
|
||||
alert(channel["x-name"] + ": Missing XMLTV file / channel")
|
||||
alertUser(channel["x-name"] + ": Missing XMLTV file / channel")
|
||||
checkbox.checked = false
|
||||
}
|
||||
|
||||
@@ -649,7 +686,7 @@ function restore() {
|
||||
};
|
||||
|
||||
} else {
|
||||
alert("File could not be loaded")
|
||||
alertUser("File could not be loaded")
|
||||
}
|
||||
|
||||
restore.remove()
|
||||
@@ -707,7 +744,7 @@ function uploadLogo() {
|
||||
};
|
||||
|
||||
} else {
|
||||
alert("File could not be loaded")
|
||||
alertUser("File could not be loaded")
|
||||
}
|
||||
|
||||
upload.remove()
|
||||
|
||||
Reference in New Issue
Block a user