You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
3.1 KiB
JavaScript
77 lines
3.1 KiB
JavaScript
// data-tabs-group = The group
|
|
// data-tabs-id = The item number (id) of the tab within the group
|
|
// data-tabs-tab = If the element is a tab object (to be toggled)
|
|
// data-tabs-button = An element that will toggle the tabs of its group/id
|
|
|
|
// Make each 'tab' have a click event.
|
|
let tabButtons = document.querySelectorAll('[data-tabs-button]');
|
|
// document.querySelectorAll('[data-foo="1"]');
|
|
// let tabs = document.getElementsByClassName('tab');
|
|
for (let i = 0; i < tabButtons.length; i++) {
|
|
tabButtons[i].addEventListener('click', function (event) {
|
|
|
|
let tabGroup = this.dataset.tabsGroup;
|
|
let tabId = this.dataset.tabsId;
|
|
let tabToShow = document.querySelector('[data-tabs-tab][data-tabs-group="'+tabGroup+'"][data-tabs-id="'+tabId+'"]');
|
|
|
|
hideTabs(this.dataset.tabsId, this.dataset.tabsGroup); /* Hide all other tabs in the group */
|
|
tabToShow.classList.remove("hide"); /* Show the tab that's been selected */
|
|
otherTabTasks(tabToShow, tabGroup, tabId); /* Do anything else that's needed, as to keep the main loop clean(ish) */
|
|
|
|
});
|
|
}
|
|
|
|
// When id=0 it's the default, so tab=1, OR tabs-active
|
|
// group=0 also default to ALL the tabgroups, not just one specified
|
|
function hideTabs(id=0, group=0){
|
|
// Hide all tabs but those I don't wanna
|
|
let query = '[data-tabs-tab][data-tabs-id]';
|
|
if(group == 0){
|
|
// Tabs that aren't default
|
|
query +=':not([data-tabs-default])';
|
|
}else{
|
|
// Tabs in group (filtered in loop via their id)
|
|
query +='[data-tabs-group="'+group+'"]';
|
|
}
|
|
let tabs = document.querySelectorAll(query);
|
|
for (let i = 0; i < tabs.length; i++) {
|
|
if(id == 0){
|
|
tabs[i].classList.add("hide");
|
|
}
|
|
if(id != 0 && tabs[i].dataset.tabsId != id){
|
|
tabs[i].classList.add("hide");
|
|
}
|
|
}
|
|
}
|
|
|
|
// On page load, display:none all the tabs that shouldn't be shown
|
|
// Done in JS, so if it's disabled, etc. users will see all the data (despite how ugly)
|
|
hideTabs();
|
|
|
|
function otherTabTasks(tabToShow, tabGroup, tabId){
|
|
// This should be streamlined I reckon
|
|
if(tabGroup == 'servers'){
|
|
|
|
document.getElementById('servers').classList.remove('servers-bg--mc', 'servers-bg--factorio');
|
|
|
|
if(tabId == 'minecraft'){
|
|
document.getElementById('servers').classList.add('servers-bg--mc');
|
|
}
|
|
else if(tabId == 'factorio'){
|
|
document.getElementById('servers').classList.add('servers-bg--factorio');
|
|
}
|
|
|
|
// Uh oh, loop each 'button' in the ul and have only the current one be 'selected'
|
|
// Will need to unjank this, but it works on the design in HTML. Will likely want to do some changes
|
|
let query = '.button[data-tabs-button][data-tabs-group="'+tabGroup+'"]';
|
|
let buttons = document.querySelectorAll(query);
|
|
for (let i = 0; i < buttons.length; i++) {
|
|
if(buttons[i].dataset.tabsId == tabId){
|
|
buttons[i].classList.add("button--blue");
|
|
}else{
|
|
buttons[i].classList.remove("button--blue");
|
|
}
|
|
}
|
|
}
|
|
}
|