111 lines
3.4 KiB
JavaScript
111 lines
3.4 KiB
JavaScript
var Tabs = {
|
|
create: function () {
|
|
// We search all the div with "tab" class
|
|
var tabs = document.querySelectorAll('.tabelem');
|
|
|
|
if (tabs.length == 0) return;
|
|
|
|
// We keep the current state
|
|
var current = document.querySelector('#navtabs .active')
|
|
? document.querySelector('#navtabs .active').classList[0]
|
|
: null;
|
|
|
|
document.querySelector('#navtabs').innerHTML = '';
|
|
|
|
// We create the list
|
|
for (var i = 0; i < tabs.length; i++) {
|
|
if (window.location.hash == '#' + tabs[i].id) {
|
|
current = tabs[i].id;
|
|
}
|
|
|
|
var li = document.createElement('li');
|
|
li.setAttribute('class', tabs[i].id);
|
|
li.onclick = function () { Tabs.change(this) };
|
|
li.setAttribute('title', tabs[i].title);
|
|
|
|
var a = document.createElement('a');
|
|
a.href = '#';
|
|
a.onclick = function (e) {
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
|
|
if (tabs[i].dataset.mobileicon) {
|
|
aMobile = a.cloneNode(true);
|
|
a.classList.add('on_desktop');
|
|
aMobile.classList.add('on_mobile');
|
|
|
|
var icon = document.createElement('i');
|
|
icon.classList.add('material-symbols');
|
|
icon.innerText = tabs[i].dataset.mobileicon;
|
|
aMobile.appendChild(icon);
|
|
|
|
li.appendChild(aMobile);
|
|
}
|
|
|
|
a.appendChild(document.createTextNode(tabs[i].title));
|
|
li.appendChild(a);
|
|
|
|
document.querySelector('#navtabs').appendChild(li);
|
|
}
|
|
|
|
// We show the first tab
|
|
tabs[0].classList.remove('hide');
|
|
|
|
if (tabs.length == 3) {
|
|
document.querySelector('#navtabs').classList.add('wide');
|
|
}
|
|
|
|
if (current != null) {
|
|
tab = current;
|
|
menuTab = document.querySelector('li.' + current);
|
|
}
|
|
|
|
//if no tab is active, activate the first one
|
|
else {
|
|
tab = document.querySelector('.tabelem').id;
|
|
menuTab = document.querySelector('li.' + tab);
|
|
}
|
|
|
|
Tabs.change(menuTab);
|
|
},
|
|
|
|
change: function (current) {
|
|
// We grab the tabs list
|
|
var navtabs = document.querySelectorAll('#navtabs li');
|
|
// We clean the class of the li
|
|
for (var j = 0; j < navtabs.length; j++) {
|
|
navtabs[j].classList.remove('active');
|
|
}
|
|
|
|
// We add the "on" class to the selected li
|
|
var selected = current.className;
|
|
current.classList.add('active');
|
|
|
|
// We hide all the div
|
|
var tabs = document.querySelectorAll('.tabelem');
|
|
for (var i = 0; i < tabs.length; i++) {
|
|
tabs[i].classList.add('hide');
|
|
}
|
|
|
|
// We show the selected div
|
|
var tabOn = document.getElementById(selected);
|
|
tabOn.classList.remove('hide');
|
|
|
|
// Only push state for tabs not in drawers
|
|
/*if (!Drawer.hasTabs()) {
|
|
window.history.pushState(null, null, '#' + selected + '_tab');
|
|
}*/
|
|
|
|
// We try to call ajaxDisplay
|
|
if (typeof window[tabOn.title + '_ajaxDisplay'] == 'function') {
|
|
window[tabOn.title + '_ajaxDisplay'].apply();
|
|
}
|
|
|
|
// We reset the scroll
|
|
document.querySelector('#navtabs').parentNode.scrollTop = 0;
|
|
}
|
|
};
|
|
|
|
MovimWebsocket.initiate(() => Tabs.create());
|