mikl/hollow-knight-completion-check
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial event listeners to buttons

Browse source
This commit is contained in:
ReznoRMichael 2021-07-28 11:07:11 +02:00
commit 645c49a4ef
3 changed files with 71 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/js/page-functions.js
View file

@ -198,39 +198,39 @@ function GenerateInnerHTML(db) {
textFill += [
`<div class="tab-switch-buttons">`,
`<button id="button-switch-main" name="main" class="button" type="button">Main</button>`,
`<button id="button-switch-essential" name="essential" class="button" type="button">Essential</button>`,
`<button id="button-switch-journal" name="journal" class="button" type="button">Journal</button>`,
`<button id="button-switch-statistics" name="statistics" class="button" type="button">Stats</button>`,
`<button id="button-switch-godhome" name="godhome" class="button" type="button">Godhome</button>`,
`<button id="button-switch-main" name="main" class="button tab-switch" type="button">Main</button>`,
`<button id="button-switch-essential" name="essential" class="button tab-switch" type="button">Essential</button>`,
`<button id="button-switch-journal" name="journal" class="button tab-switch" type="button">Journal</button>`,
`<button id="button-switch-statistics" name="statistics" class="button tab-switch" type="button">Stats</button>`,
`<button id="button-switch-godhome" name="godhome" class="button tab-switch" type="button">Godhome</button>`,
`</div>`,
].join("\n");
textFill += `<div id="tab-main">`;
textFill += `<div id="tab-main" class="large-section">`;
break;
case "essential":
textFill += `<div id="tab-essential">`;
textFill += `<div id="tab-essential" class="large-section">`;
break;
case "huntersJournal":
textFill += `<div id="tab-journal">`;
textFill += `<div id="tab-journal" class="large-section">`;
break;
case "statistics":
textFill += `<div id="tab-statistics">`;
textFill += `<div id="tab-statistics" class="large-section">`;
break;
case "godhomeStatistics":
textFill += `<div id="tab-godhome">`;
textFill += `<div id="tab-godhome" class="large-section">`;
break;
}
@ -577,10 +577,39 @@ function GenerateInnerHTML(db) {
/* Final single HTML access and fill here */
document.getElementById("generated").innerHTML = finalHTMLFill;
/* make tab switch buttons working (on click) */
document.querySelectorAll(".tab-switch").forEach( (button) => {
button.addEventListener("click", (e) => {
PageSwitchTab(e.target);
});
});
// finish benchmarking
benchmarkTimes.GenerateInnerHTML.timeEnd = performance.now();
}
function PageSwitchTab(clickedButton) {
let sectionList = document.querySelectorAll(".large-section");
console.log(sectionList);
for (let i = 0, length = sectionList.length; i < length; i++) {
if (sectionList[i].id !== `tab-${clickedButton.name}`) {
if (sectionList[i].classList.contains(".hidden")) {
sectionList[i].classList.add(".hidden");
}
} else {
if (sectionList[i].classList.contains(".hidden")) {
sectionList[i].classList.remove(".hidden");
}
}
}
}
function SectionDescription(section) {
return `<p class="section-description">${section.description}</p>`;