Make tab layout on hero section more accessible

This commit is contained in:
Dorian Niemiec 2024-04-30 14:17:25 +02:00
parent 6b4c86efb4
commit d809220f10

View file

@ -22,13 +22,13 @@ if (tabs.length > 0) {
var tabsHTML = ""; var tabsHTML = "";
var tabToClick = tabs.length; var tabToClick = tabs.length;
for (var i = 0; i <= tabs.length; i++) { for (var i = 0; i <= tabs.length; i++) {
tabsHTML += "<span class=\"command-tab\" id=\"command-tab-" + i + "\">"; tabsHTML += "<a href=\"#\" class=\"command-tab\" id=\"command-tab-" + i + "\">";
if (i == tabs.length) { if (i == tabs.length) {
tabsHTML += "Manually"; tabsHTML += "Manually";
} else { } else {
tabsHTML += escapeHTML(tabs[i].name); tabsHTML += escapeHTML(tabs[i].name);
} }
tabsHTML += "</span>"; tabsHTML += "</a>";
if (tabToClick == tabs.length && i != tabs.length && navigator.userAgent.match(tabs[i].uaRegex)) tabToClick = i; if (tabToClick == tabs.length && i != tabs.length && navigator.userAgent.match(tabs[i].uaRegex)) tabToClick = i;
} }
otherTab.outerHTML = "<div id=\"command-tab-tabcontainer\">" + tabsHTML + "</div><div id=\"command-tab-container\"></div>"; otherTab.outerHTML = "<div id=\"command-tab-tabcontainer\">" + tabsHTML + "</div><div id=\"command-tab-container\"></div>";
@ -37,7 +37,8 @@ if (tabs.length > 0) {
document.getElementById("command-tab-" + i).onclick = createTabClickHandler(i); document.getElementById("command-tab-" + i).onclick = createTabClickHandler(i);
} }
function copyHandler() { function copyHandler(e) {
e.preventDefault();
if (navigator.clipboard) { if (navigator.clipboard) {
navigator.clipboard.writeText(decodeHTML(document.getElementById("command-tab-command").innerHTML)); navigator.clipboard.writeText(decodeHTML(document.getElementById("command-tab-command").innerHTML));
} else { } else {
@ -64,7 +65,8 @@ if (tabs.length > 0) {
} }
function createTabClickHandler(i) { function createTabClickHandler(i) {
return function () { return function (e) {
e.preventDefault();
for (var j = 0; j <= tabs.length; j++) { for (var j = 0; j <= tabs.length; j++) {
document.getElementById("command-tab-" + j).className = "command-tab"; document.getElementById("command-tab-" + j).className = "command-tab";
} }
@ -73,7 +75,7 @@ if (tabs.length > 0) {
if (i == tabs.length) { if (i == tabs.length) {
container.innerHTML = otherTabOuterHTML; container.innerHTML = otherTabOuterHTML;
} else { } else {
container.innerHTML = "<div id=\"command-tab-h\">Install SVR.JS</div><div id=\"command-tab-copy\">Copy</div><code id=\"command-tab-command\" translate=\"no\">" + escapeHTML(tabs[i].command) + "</code><div class=\"command-tab-clearfix\"></div>"; container.innerHTML = "<div id=\"command-tab-h\">Install SVR.JS</div><a href=\"#\" id=\"command-tab-copy\">Copy</a><code id=\"command-tab-command\" translate=\"no\">" + escapeHTML(tabs[i].command) + "</code><div class=\"command-tab-clearfix\"></div>";
document.getElementById("command-tab-copy").onclick = copyHandler; document.getElementById("command-tab-copy").onclick = copyHandler;
} }
} }