Yidhra/TuiCss
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

issue-7 Fixes.

Browse Source
This commit is contained in:
ellisgl 2020-12-18 11:33:29 -06:00
parent bdb456fcb5
commit 4825bed608
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/tuicss.js
View File

@ -21,34 +21,33 @@ function tabsController() {
const tabs = document.getElementsByClassName('tui-tab'); const tabs = document.getElementsByClassName('tui-tab');
for (const tab of tabs) { for (const tab of tabs) {
tab.addEventListener('click', function () { tab.addEventListener('click', function (e) {
// Deactivate the tab.
tab.classList.remove('active');
const tabContents = document.getElementsByClassName('tui-tab-content'); const tabContents = document.getElementsByClassName('tui-tab-content');
for (let tabContent of tabContents) { for (const tabContent of tabContents) {
tabContent.style.display = 'none'; tabContent.style.display = 'none';
} }
const tabContentId = this.getAttribute('data-tab-content'); const tabContentId = e.target.getAttribute('data-tab-content');
const tabContent = document.getElementById(tabContentId); const tabContent = document.getElementById(tabContentId);
if (tabContent) { if (tabContent) {
tabContent.style.display = 'block'; tabContent.style.display = 'block';
} }
const otherTabs = document.getElementsByClassName('tui-tab'); // Set the clicked tab to have the active click for the next part.
e.target.classList.add('active');
for (const otherTab of otherTabs) {
otherTab.classList.remove('active');
}
this.classList.add('active');
}); });
} }
const activeTab = document.querySelector('.tui-tab.active'); const activeTab = document.querySelector('.tui-tab.active');
if (activeTab !== null) { if (activeTab) {
activeTab[0].click(); // There can only be one active tab, so click the first found.
activeTab.click();
} }
} }
@ -125,6 +124,7 @@ function sidenavController() {
* Modal controller * Modal controller
*/ */
function modalController() { function modalController() {
// Attach to the button that shows the modal.
const modalButtons = document.getElementsByClassName('tui-modal-button'); const modalButtons = document.getElementsByClassName('tui-modal-button');
for (const modalButton of modalButtons) { for (const modalButton of modalButtons) {
modalButton.addEventListener('click', (e) => { modalButton.addEventListener('click', (e) => {
@ -133,12 +133,13 @@ function modalController() {
tuiOverlap.classList.add('active'); tuiOverlap.classList.add('active');
} }
const modalId = e.getAttribute('data-modal'); const modalId = e.target.getAttribute('data-modal');
const modal = document.getElementById(modalId); const modal = document.getElementById(modalId);
modal.classList.add('active'); modal.classList.add('active');
}); });
} }
// Attach to the button that removes the modal.
const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button'); const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
for (const modalCloseButton of modalCloseButtons) { for (const modalCloseButton of modalCloseButtons) {
modalCloseButton.addEventListener('click', (e) => { modalCloseButton.addEventListener('click', (e) => {
@ -147,7 +148,7 @@ function modalController() {
tuiOverlap.classList.remove('active'); tuiOverlap.classList.remove('active');
} }
const modalId = e.getAttribute('data-modal'); const modalId = e.target.getAttribute('data-modal');
const modal = document.getElementById(modalId); const modal = document.getElementById(modalId);
modal.classList.remove('active'); modal.classList.remove('active');
}); });