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

issue-7 Update main JS be to be vanilla ES6+. No jQuery.

Browse Source
This commit is contained in:
ellisgl 2020-12-18 10:50:23 -06:00
parent 5ae67e05c9
commit 2cfcb82555
1 changed files with 130 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
src/js/tuicss.js
View File

@ -1,94 +1,165 @@
/** /**
* Init * Replacement for jQuery's $(document).ready() function.
* Stolen from:https://stackoverflow.com/a/53601942/344028
*
* @param fn Callback.
*/ */
$(document).ready(function() { function domReady(fn) {
tabsController(); // If we're early to the party
datetimeController(); document.addEventListener('DOMContentLoaded', fn);
sidenavController();
modalController(); // If late; I mean on time.
}); if (document.readyState === 'interactive' || document.readyState === 'complete') {
fn();
}
}
/** /**
* TuiTabs controller * TuiTabs controller
*/ */
function tabsController() { function tabsController() {
$(".tui-tab").click(function(event) { const tabs = document.getElementsByClassName('tui-tab');
$(".tui-tab-content").hide();
let tabContentid = $(this).attr('data-tab-content'); for (const tab of tabs) {
$(`#${tabContentid}`).show(); tab.addEventListener('click', function () {
$(".tui-tab").removeClass("active"); const tabContents = document.getElementsByClassName('tui-tab-content');
$(this).addClass("active");
for (let tabContent of tabContents) {
tabContent.style.display = 'none';
}
const tabContentId = this.getAttribute('data-tab-content');
const tabContent = document.getElementById(tabContentId);
if (tabContent) {
tabContent.style.display = 'block';
}
const otherTabs = document.getElementsByClassName('tui-tab');
for (const otherTab of otherTabs) {
otherTab.classList.remove('active');
}
this.classList.add('active');
}); });
$('.tui-tab.active').click(); }
const activeTab = document.querySelector('.tui-tab.active');
if (activeTab !== null) {
activeTab[0].click();
}
} }
/** /**
* Date field controller * Date/time field controller
*/ */
function datetimeController() { function datetimeController() {
const clocks = document.getElementsByClassName('tui-datetime');
if(!$(".tui-datetime").length) return; // No elements found, return early.
if (!clocks.length) {
return;
}
datetimeInterval(); datetimeInterval();
setInterval(datetimeInterval, 1000); setInterval(datetimeInterval, 1000);
function datetimeInterval() { function datetimeInterval() {
let today = new Date(); for (const clock of clocks) {
const interval = setInterval(() => {
if (clock === null) {
clearInterval(interval);
return;
}
$(".tui-datetime").each(function() { let format = clock.getAttribute('data-format');
let clock = $(this);
let format = clock.attr("data-format"); const today = new Date();
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
const year = today.getFullYear() + '';
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
const hour12 = (parseInt(hour) + 24) % '12' || '12';
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1); format = format.replace('M', month);
let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1); format = format.replace('d', day);
let year = today.getFullYear(); format = format.replace('y', year);
let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours(); format = format.replace('H', hour);
let hour12 = (parseInt(hour) + 24) % 12 || 12; format = format.replace('h', hour12);
let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes(); format = format.replace('m', minute);
let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds(); format = format.replace('s', second);
let ampm = parseInt(hour) >= 12 ? "PM" : "AM"; format = format.replace('a', ampm);
format = format.replace("M", month); clock.innerHTML = format;
format = format.replace("d", day);
format = format.replace("y", year);
format = format.replace("H", hour);
format = format.replace("h", hour12);
format = format.replace("m", minute);
format = format.replace("s", second);
format = format.replace("a", ampm);
clock.html(format);
}); });
} }
} }
}
/** /**
* Sidenav Controller * Sidenav Controller
*/ */
function sidenavController() { function sidenavController() {
$(".tui-sidenav-button").click(function() { const sideNavButtons = document.getElementsByClassName('tui-sidenav-button');
let sidenav = $(".tui-sidenav");
if(sidenav.hasClass("active")) { for (const sideNavButton of sideNavButtons) {
$(".tui-sidenav").removeClass("active"); sideNavButton.addEventListener('click', () => {
const sideNavs = document.getElementsByClassName('tui-sidenav');
for (const sideNav of sideNavs) {
if (sideNav.classList.contains('active')) {
sideNav.classList.remove('active');
} else { } else {
$(".tui-sidenav").addClass("active"); sideNav.classList.add('active');
}
} }
}); });
} }
}
/** /**
* Modal controller * Modal controller
*/ */
function modalController() { function modalController() {
$(".tui-modal-button").click(function() { const modalButtons = document.getElementsByClassName('tui-modal-button');
$(".tui-overlap").addClass("active"); for (const modalButton of modalButtons) {
let modalId = $(this).attr("data-modal"); modalButton.addEventListener('click', (e) => {
$(`#${modalId}`).addClass("active"); const tuiOverlaps = document.getElementsByClassName('tui-overlap');
}); for (const tuiOverlap of tuiOverlaps) {
$(".tui-modal-close-button").click(function() { tuiOverlap.classList.add('active');
$(".tui-overlap").removeClass("active"); }
let modalId = $(this).attr("data-modal");
$(`#${modalId}`).removeClass("active"); const modalId = e.getAttribute('data-modal');
const modal = document.getElementById(modalId);
modal.classList.add('active');
}); });
} }
const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
for (const modalCloseButton of modalCloseButtons) {
modalCloseButton.addEventListener('click', (e) => {
const tuiOverlaps = document.getElementsByClassName('tui-overlap');
for (const tuiOverlap of tuiOverlaps) {
tuiOverlap.classList.remove('active');
}
const modalId = e.getAttribute('data-modal');
const modal = document.getElementById(modalId);
modal.classList.remove('active');
});
}
}
/**
* Init: This is at the bottom to make sure the functions are parsed. It's a CYA.
*/
domReady(function () {
tabsController();
datetimeController();
sidenavController();
modalController();
});