a better tab switching visual effect

This commit is contained in:
wixette
2020-03-08 17:35:58 +08:00
parent badbe39466
commit 692295ba8e
2 changed files with 35 additions and 5 deletions

View File

@@ -883,6 +883,19 @@ panel.playSwitch = function() {
panel.playSound('sound-switch');
};
/**
* Highlights a nav tab or removes the effect.
* @param {Element} elem The DOM element of the nav tab.
* @param {boolean} highlight Whether highlight the tab.
*/
panel.highlightNavTab = function(elem, highlight) {
if (highlight) {
elem.classList.add('selected');
} else {
elem.classList.remove('selected');
}
};
/**
* Shows the simulator tab, and hides the other two.
*/
@@ -890,6 +903,9 @@ panel.showTabSim = function() {
document.getElementById('tab-sim').style.display = 'block';
document.getElementById('tab-debug').style.display = 'none';
document.getElementById('tab-ref').style.display = 'none';
panel.highlightNavTab(document.getElementById('nav-sim'), true);
panel.highlightNavTab(document.getElementById('nav-debug'), false);
panel.highlightNavTab(document.getElementById('nav-ref'), false);
};
/**
@@ -899,6 +915,9 @@ panel.showTabDebug = function() {
document.getElementById('tab-sim').style.display = 'none';
document.getElementById('tab-debug').style.display = 'block';
document.getElementById('tab-ref').style.display = 'none';
panel.highlightNavTab(document.getElementById('nav-sim'), false);
panel.highlightNavTab(document.getElementById('nav-debug'), true);
panel.highlightNavTab(document.getElementById('nav-ref'), false);
};
/**
@@ -908,4 +927,7 @@ panel.showTabRes = function() {
document.getElementById('tab-sim').style.display = 'none';
document.getElementById('tab-debug').style.display = 'none';
document.getElementById('tab-ref').style.display = 'block';
panel.highlightNavTab(document.getElementById('nav-sim'), false);
panel.highlightNavTab(document.getElementById('nav-debug'), false);
panel.highlightNavTab(document.getElementById('nav-ref'), true);
};