issue-7 Update main JS be to be vanilla ES6+. No jQuery.
This commit is contained in:
ellisgl
parent
5ae67e05c9
commit
2cfcb82555
189
src/js/tuicss.js
189
src/js/tuicss.js
@ -1,65 +1,103 @@
|
||||
/**
|
||||
* Init
|
||||
* Replacement for jQuery's $(document).ready() function.
|
||||
* Stolen from:https://stackoverflow.com/a/53601942/344028
|
||||
*
|
||||
* @param fn Callback.
|
||||
*/
|
||||
$(document).ready(function() {
|
||||
tabsController();
|
||||
datetimeController();
|
||||
sidenavController();
|
||||
modalController();
|
||||
});
|
||||
function domReady(fn) {
|
||||
// If we're early to the party
|
||||
document.addEventListener('DOMContentLoaded', fn);
|
||||
|
||||
// If late; I mean on time.
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
fn();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TuiTabs controller
|
||||
*/
|
||||
function tabsController() {
|
||||
$(".tui-tab").click(function(event) {
|
||||
$(".tui-tab-content").hide();
|
||||
let tabContentid = $(this).attr('data-tab-content');
|
||||
$(`#${tabContentid}`).show();
|
||||
$(".tui-tab").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
$('.tui-tab.active').click();
|
||||
const tabs = document.getElementsByClassName('tui-tab');
|
||||
|
||||
for (const tab of tabs) {
|
||||
tab.addEventListener('click', function () {
|
||||
const tabContents = document.getElementsByClassName('tui-tab-content');
|
||||
|
||||
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');
|
||||
});
|
||||
}
|
||||
|
||||
const activeTab = document.querySelector('.tui-tab.active');
|
||||
|
||||
if (activeTab !== null) {
|
||||
activeTab[0].click();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Date field controller
|
||||
* Date/time field controller
|
||||
*/
|
||||
function datetimeController() {
|
||||
const clocks = document.getElementsByClassName('tui-datetime');
|
||||
|
||||
if(!$(".tui-datetime").length) return;
|
||||
// No elements found, return early.
|
||||
if (!clocks.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
datetimeInterval();
|
||||
setInterval(datetimeInterval, 1000);
|
||||
|
||||
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 clock = $(this);
|
||||
|
||||
let format = clock.attr("data-format");
|
||||
let format = clock.getAttribute('data-format');
|
||||
|
||||
let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
|
||||
let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
|
||||
let year = today.getFullYear();
|
||||
let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
|
||||
let hour12 = (parseInt(hour) + 24) % 12 || 12;
|
||||
let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
|
||||
let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
|
||||
let ampm = parseInt(hour) >= 12 ? "PM" : "AM";
|
||||
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';
|
||||
|
||||
format = format.replace("M", month);
|
||||
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);
|
||||
format = format.replace('M', month);
|
||||
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);
|
||||
});
|
||||
clock.innerHTML = format;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,28 +105,61 @@ function datetimeController() {
|
||||
* Sidenav Controller
|
||||
*/
|
||||
function sidenavController() {
|
||||
$(".tui-sidenav-button").click(function() {
|
||||
let sidenav = $(".tui-sidenav");
|
||||
if(sidenav.hasClass("active")) {
|
||||
$(".tui-sidenav").removeClass("active");
|
||||
} else {
|
||||
$(".tui-sidenav").addClass("active");
|
||||
}
|
||||
});
|
||||
const sideNavButtons = document.getElementsByClassName('tui-sidenav-button');
|
||||
|
||||
for (const sideNavButton of sideNavButtons) {
|
||||
sideNavButton.addEventListener('click', () => {
|
||||
const sideNavs = document.getElementsByClassName('tui-sidenav');
|
||||
for (const sideNav of sideNavs) {
|
||||
if (sideNav.classList.contains('active')) {
|
||||
sideNav.classList.remove('active');
|
||||
} else {
|
||||
sideNav.classList.add('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal controller
|
||||
*/
|
||||
function modalController() {
|
||||
$(".tui-modal-button").click(function() {
|
||||
$(".tui-overlap").addClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).addClass("active");
|
||||
});
|
||||
$(".tui-modal-close-button").click(function() {
|
||||
$(".tui-overlap").removeClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).removeClass("active");
|
||||
});
|
||||
}
|
||||
const modalButtons = document.getElementsByClassName('tui-modal-button');
|
||||
for (const modalButton of modalButtons) {
|
||||
modalButton.addEventListener('click', (e) => {
|
||||
const tuiOverlaps = document.getElementsByClassName('tui-overlap');
|
||||
for (const tuiOverlap of tuiOverlaps) {
|
||||
tuiOverlap.classList.add('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();
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user