nathan/xTeVe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many updates

Browse Source
This commit is contained in:
Nathan Coad
2026-02-11 11:38:26 +11:00
parent 8cb9e43a72
commit b069d5bee8
21 changed files with 1324 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
html/js/menu_ts.js
View File

@@ -44,7 +44,13 @@ var MainMenuItem = /** @class */ (function (_super) {
item.setAttribute("onclick", "javascript: openThisMenu(this)");
item.setAttribute("id", this.id);
item.setAttribute("data-menu", this.menuKey);
item.setAttribute("role", "menuitem");
item.setAttribute("tabindex", "0");
item.setAttribute("aria-controls", "content");
item.setAttribute("aria-label", this.value);
item.setAttribute("onkeydown", "if(event.key==='Enter' || event.key===' '){event.preventDefault();openThisMenu(this);}");
var img = this.createIMG(this.imgSrc);
img.setAttribute("alt", "");
var value = this.createValue(this.value);
item.appendChild(img);
item.appendChild(value);
@@ -452,7 +458,7 @@ var Cell = /** @class */ (function () {
break;
case "INPUTCHANNEL":
element = document.createElement("INPUT");
element.setAttribute("onchange", "javscript: changeChannelNumber(this)");
element.setAttribute("onchange", "javascript: changeChannelNumber(this)");
element.value = this.value;
element.type = "text";
break;
@@ -484,10 +490,18 @@ var Cell = /** @class */ (function () {
}
if (this.onclick == true) {
td.setAttribute("onclick", this.onclickFunktion);
td.className = "pointer";
td.className = "pointer keyboard-clickable";
td.setAttribute("tabindex", "0");
td.setAttribute("role", "button");
td.setAttribute("onkeydown", "if(event.key==='Enter' || event.key===' '){event.preventDefault();this.click();}");
}
if (this.tdClassName != undefined) {
td.className = this.tdClassName;
if (td.className.length > 0) {
td.className = td.className + " " + this.tdClassName;
}
else {
td.className = this.tdClassName;
}
}
return td;
};
@@ -511,6 +525,7 @@ var ShowContent = /** @class */ (function (_super) {
COLUMN_TO_SORT = -1;
// Alten Inhalt löschen
var doc = document.getElementById(this.DocumentID);
doc.setAttribute("aria-busy", "true");
doc.innerHTML = "";
showPreview(false);
// Überschrift
@@ -557,9 +572,31 @@ var ShowContent = /** @class */ (function (_super) {
var input = this.createInput("button", menuKey, "{{.button.bulkEdit}}");
input.setAttribute("onclick", 'javascript: bulkEdit()');
interaction.appendChild(input);
var sortSelect = document.createElement("SELECT");
sortSelect.setAttribute("id", "mapping-sort-mobile");
sortSelect.className = "mobile-only-control";
sortSelect.setAttribute("aria-label", "Sort mapping");
var sortOptions = [
{ label: "{{.mapping.table.chNo}}", value: "1" },
{ label: "{{.mapping.table.channelName}}", value: "3" },
{ label: "{{.mapping.table.playlist}}", value: "4" },
{ label: "{{.mapping.table.groupTitle}}", value: "5" }
];
sortOptions.forEach(function (optionData) {
var option = document.createElement("OPTION");
option.innerText = optionData.label;
option.value = optionData.value;
sortSelect.appendChild(option);
});
sortSelect.value = "1";
sortSelect.onchange = function () {
sortTable(parseInt(this.value, 10));
};
interaction.appendChild(sortSelect);
var input = this.createInput("search", "search", "");
input.setAttribute("id", "searchMapping");
input.setAttribute("placeholder", "{{.button.search}}");
input.setAttribute("aria-label", "{{.button.search}}");
input.className = "search";
input.setAttribute("oninput", 'javascript: searchInMapping()');
interaction.appendChild(input);
@@ -581,6 +618,7 @@ var ShowContent = /** @class */ (function (_super) {
var settings = this.createDIV();
wrapper.appendChild(settings);
showSettings();
finalizeContentAccessibility(headline);
return;
break;
case "log":
@@ -594,6 +632,7 @@ var ShowContent = /** @class */ (function (_super) {
var logs = this.createDIV();
wrapper.appendChild(logs);
showLogs(true);
finalizeContentAccessibility(headline);
return;
break;
case "logout":
@@ -666,10 +705,129 @@ var ShowContent = /** @class */ (function (_super) {
break;
}
showElement("loading", false);
finalizeContentAccessibility(headline);
};
return ShowContent;
}(Content));
var SHELL_LAYOUT_READY = false;
function isKeyboardActivationKey(event) {
return event.key == "Enter" || event.key == " ";
}
function makeKeyboardClickable(element, label) {
if (element == null) {
return;
}
if (element.getAttribute("data-keyboard-ready") == "true") {
return;
}
var tagName = element.tagName.toUpperCase();
if (tagName == "INPUT" || tagName == "BUTTON" || tagName == "SELECT" || tagName == "TEXTAREA" || tagName == "A") {
return;
}
element.setAttribute("data-keyboard-ready", "true");
if (element.getAttribute("tabindex") == null) {
element.setAttribute("tabindex", "0");
}
if (element.getAttribute("role") == null) {
element.setAttribute("role", "button");
}
element.classList.add("keyboard-clickable");
if (label != undefined && label.length > 0) {
if (element.getAttribute("aria-label") == null || element.getAttribute("aria-label").length == 0) {
element.setAttribute("aria-label", label);
}
}
element.addEventListener("keydown", function (event) {
if (isKeyboardActivationKey(event) == false) {
return;
}
event.preventDefault();
this.click();
});
}
function applyTableAccessibility(table, sectionName) {
if (table == null) {
return;
}
table.setAttribute("role", "table");
var rows = table.getElementsByTagName("TR");
var headerLabels = [];
if (rows.length > 0) {
var headerCells = rows[0].getElementsByTagName("TD");
for (var h = 0; h < headerCells.length; h++) {
var headerLabel = headerCells[h].innerText;
if (headerLabel == undefined || headerLabel.length == 0) {
headerLabel = "Value";
}
if (headerLabel == "BULK") {
headerLabel = "Select";
}
headerLabels.push(headerLabel);
}
}
for (var i = 0; i < rows.length; i++) {
rows[i].setAttribute("role", "row");
if (rows[i].getAttribute("onclick") != null) {
var rowLabel = rows[i].innerText;
if (rowLabel == undefined || rowLabel.length == 0) {
rowLabel = sectionName + " row";
}
makeKeyboardClickable(rows[i], rowLabel);
}
var cells = rows[i].getElementsByTagName("TD");
for (var c = 0; c < cells.length; c++) {
if (i == 0) {
cells[c].setAttribute("role", "columnheader");
}
else {
cells[c].setAttribute("role", "cell");
}
var dataLabel = headerLabels[c];
if (dataLabel == undefined || dataLabel.length == 0) {
dataLabel = "Value";
}
cells[c].setAttribute("data-label", dataLabel);
var checkbox = cells[c].querySelector('input[type="checkbox"]');
if (checkbox != null) {
cells[c].setAttribute("data-cell-type", "checkbox");
}
else {
var image = cells[c].querySelector("img");
if (image != null) {
cells[c].setAttribute("data-cell-type", "image");
}
else {
cells[c].removeAttribute("data-cell-type");
}
}
if (cells[c].getAttribute("onclick") != null) {
var cellLabel = cells[c].innerText;
if (cellLabel == undefined || cellLabel.length == 0) {
cellLabel = sectionName + " details";
}
makeKeyboardClickable(cells[c], cellLabel);
}
}
}
}
function finalizeContentAccessibility(sectionName) {
var content = document.getElementById("content");
if (content == null) {
return;
}
content.setAttribute("aria-busy", "false");
var heading = content.getElementsByTagName("H3")[0];
if (heading != null) {
heading.setAttribute("tabindex", "-1");
setTimeout(function () {
heading.focus();
}, 20);
}
applyTableAccessibility(document.getElementById("content_table"), sectionName);
if (sectionName != undefined && sectionName.length > 0) {
announceToScreenReader(sectionName + " loaded");
}
}
function setLayoutMenuState(open) {
if (document.body == null) {
return;
@@ -680,6 +838,35 @@ function setLayoutMenuState(open) {
else {
document.body.classList.remove("menu-open");
}
var toggle = document.getElementById("menu-toggle");
if (toggle != null) {
toggle.setAttribute("aria-expanded", open == true ? "true" : "false");
toggle.setAttribute("aria-label", open == true ? "Close navigation menu" : "Open navigation menu");
}
var overlay = document.getElementById("layout-overlay");
if (overlay != null) {
overlay.setAttribute("aria-hidden", open == true ? "false" : "true");
}
var wrapper = document.getElementById("menu-wrapper");
if (wrapper != null) {
if (window.innerWidth <= 900) {
wrapper.setAttribute("aria-hidden", open == true ? "false" : "true");
}
else {
wrapper.setAttribute("aria-hidden", "false");
}
}
if (window.innerWidth <= 900 && open == false && toggle != null && wrapper != null && wrapper.contains(document.activeElement)) {
toggle.focus();
}
if (window.innerWidth <= 900 && open == true && wrapper != null) {
var firstMenuItem = wrapper.querySelector("#main-menu li");
if (firstMenuItem != null) {
setTimeout(function () {
firstMenuItem.focus();
}, 30);
}
}
}
function toggleLayoutMenu() {
if (document.body == null) {
@@ -702,10 +889,12 @@ function setActiveMenu(menuID) {
var items = menu.getElementsByTagName("LI");
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("menu-active");
items[i].removeAttribute("aria-current");
}
var activeItem = document.getElementById(ACTIVE_MENU_ID);
if (activeItem != null) {
activeItem.classList.add("menu-active");
activeItem.setAttribute("aria-current", "page");
}
}
function renderStatusCards() {
@@ -728,6 +917,7 @@ function renderStatusCards() {
cards.forEach(function (card) {
var box = document.createElement("DIV");
box.className = "status-card status-card-" + card.tone;
box.setAttribute("role", "listitem");
var label = document.createElement("P");
label.className = "status-card-label";
label.innerText = card.label;
@@ -741,6 +931,7 @@ function renderStatusCards() {
}
box.appendChild(label);
box.appendChild(value);
box.setAttribute("aria-label", card.label + ": " + value.innerText);
wrapper.appendChild(box);
});
}
@@ -768,7 +959,8 @@ function initShellLayout() {
}
if (event.key == "/") {
var target = event.target;
var onInput = target.tagName == "INPUT" || target.tagName == "TEXTAREA" || target.tagName == "SELECT";
var tagName = target != null && target.tagName != undefined ? target.tagName : "";
var onInput = tagName == "INPUT" || tagName == "TEXTAREA" || tagName == "SELECT";
if (onInput == true) {
return;
}
@@ -779,6 +971,7 @@ function initShellLayout() {
}
}
});
setLayoutMenuState(false);
setConnectionState("idle");
SHELL_LAYOUT_READY = true;
}
@@ -798,6 +991,10 @@ function PageReady() {
return;
}
function createLayout() {
var contentRegion = document.getElementById("content");
if (contentRegion != null) {
contentRegion.setAttribute("aria-busy", "true");
}
// Client Info
var obj = SERVER["clientInfo"];
var keys = getObjKeys(obj);
@@ -808,6 +1005,9 @@ function createLayout() {
}
renderStatusCards();
if (!document.getElementById("main-menu")) {
if (contentRegion != null) {
contentRegion.setAttribute("aria-busy", "false");
}
return;
}
// Menü erstellen
@@ -835,6 +1035,7 @@ function createLayout() {
if (ACTIVE_MENU_ID.length > 0 && document.getElementById(ACTIVE_MENU_ID)) {
setActiveMenu(ACTIVE_MENU_ID);
}
setLayoutMenuState(document.body.classList.contains("menu-open"));
var content = document.getElementById("content");
var menu = document.getElementById("main-menu");
if (ACTIVE_MENU_ID.length == 0 && content != null && menu != null) {
@@ -845,6 +1046,9 @@ function createLayout() {
}
}
}
if (contentRegion != null) {
contentRegion.setAttribute("aria-busy", "false");
}
return;
}
function openThisMenu(element) {
@@ -852,6 +1056,10 @@ function openThisMenu(element) {
var content = new ShowContent(id);
setActiveMenu(id);
content.show();
var contentArea = document.getElementById("content");
if (contentArea != null) {
contentArea.scrollTop = 0;
}
closeLayoutMenuIfMobile();
calculateWrapperHeight();
return;
@@ -890,9 +1098,26 @@ var PopupContent = /** @class */ (function (_super) {
}
PopupContent.prototype.createHeadline = function (headline) {
this.doc.innerHTML = "";
var titleBar = document.createElement("DIV");
titleBar.className = "popup-title";
var element = document.createElement("H3");
element.id = "popup-title-text";
element.innerHTML = headline.toUpperCase();
this.doc.appendChild(element);
titleBar.appendChild(element);
var closeButton = document.createElement("BUTTON");
closeButton.setAttribute("type", "button");
closeButton.className = "popup-close";
closeButton.setAttribute("aria-label", "Close dialog");
closeButton.innerHTML = "&times;";
closeButton.onclick = function () {
showElement("popup", false);
};
titleBar.appendChild(closeButton);
this.doc.appendChild(titleBar);
var popup = document.getElementById("popup");
if (popup != null) {
popup.setAttribute("aria-labelledby", "popup-title-text");
}
// Tabelle erstellen
this.table = document.createElement("TABLE");
this.doc.appendChild(this.table);