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

Merge pull request #8 from ellisgl/issue-7

Browse Source 
#7  Convert to vanilla JS (ES6+). No more jQuery.
This commit is contained in:
Vinicius Reif Biavatti
2020-12-27 23:11:28 +00:00
committed by GitHub
parent d15e6415a8 de578dd6d4
commit 64b94b4f2c
18 changed files with 670 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
src/js/tuicss.js
View File

@@ -1,78 +1,167 @@
/**
* Init
* Replacement for jQuery's $(document).ready() function.
* This is handy in making sure stuff fires after the DOM is ready to be touched.
* 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();
// Get all the tab elements (typically li tags).
const tabs = document.getElementsByClassName('tui-tab');
if (!tabs.length) {
// No tabs found, return early and save a couple CPU cycles.
return;
}
for (const tab of tabs) {
// Add click listeners to them.
tab.addEventListener('click', function (e) {
// Remove the 'active' class from any and all tabs.
for (const otherTab of tabs) {
otherTab.classList.remove('active');
}
// Get the content element.
const tabContents = document.getElementsByClassName('tui-tab-content');
if (tabContents) {
for (const tabContent of tabContents) {
// Hide all tab contents.
tabContent.style.display = 'none';
}
} else {
throw 'No tab content elements found.'
}
// Get the id of the tab contents we want to show.
const tabContentId = e.target.getAttribute('data-tab-content');
if (tabContentId) {
const tabContent = document.getElementById(tabContentId);
if (tabContent) {
// Show the tab contents.
tabContent.style.display = 'block';
} else {
throw 'No tab content element with id "' + tabContentId + '" found.';
}
}
// We are not going to throw an error here, since we could make the tab do something else that a tab
// normally wouldn't do.
// Set the clicked tab to have the 'active' class so we can use it in the next part.
e.target.classList.add('active');
});
}
// Grab the first tab with the active class.
const activeTab = document.querySelector('.tui-tab.active');
if (activeTab) {
// Now click it 'click' it.
activeTab.click();
} else {
// Nothing found, just click the first tab foud.
tabs[0].click()
}
}
/**
* Date field controller
* Date/time field controller
*/
function datetimeController() {
// Get date/time elements.
const clocks = document.getElementsByClassName('tui-datetime');
if(!$(".tui-datetime").length) return;
if (!clocks.length) {
// No date time elements found, return early and save a couple CPU cycles.
return;
}
// Kick off our clock interval stuff.
datetimeInterval();
setInterval(datetimeInterval, 1000);
function datetimeInterval() {
let today = new Date();
for (const clock of clocks) {
// Set the interval.
const interval = setInterval(() => {
// Technically we should have already returned earlier in the code, but to be on the safe side.
if (clock === null) {
clearInterval(interval);
return;
}
$(".tui-datetime").each(function() {
let clock = $(this);
let format = clock.attr("data-format");
// Get the format we want to display in the element.
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";
// parse out the date and time into constants.
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);
// Replace based on the format.
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);
});
// Show it in the element.
clock.innerHTML = format;
});
}
}
}
/**
* Sidenav Controller
* There should only side navigation element at the moment.
*/
function sidenavController() {
$(".tui-sidenav-button").click(function() {
let sidenav = $(".tui-sidenav");
if(sidenav.hasClass("active")) {
$(".tui-sidenav").removeClass("active");
// Get the side navigation button (there should be only one, but if not, we are getting the first one).
const sideNavButton = document.querySelector('.tui-sidenav-button');
if (!sideNavButton) {
// No side navigation button found, return early and save a couple CPU cycles.
return;
}
// Add the click event listener to the buttons.
sideNavButton.addEventListener('click', () => {
// Get the side navigation element (there should be only one, but if not, we are getting the first one).
const sideNav = document.querySelector('.tui-sidenav');
if (sideNav) {
if (sideNav.classList.contains('active')) {
sideNav.classList.remove('active');
} else {
sideNav.classList.add('active');
}
} else {
$(".tui-sidenav").addClass("active");
throw 'No sidenav element found.'
}
});
}
@@ -81,14 +170,80 @@ function sidenavController() {
* 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");
});
}
// Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
const tuiOverlap = document.querySelector('.tui-overlap');
if (!tuiOverlap) {
// No overlap found element, return early and save a couple CPU cycles.
return;
}
// Find modal buttons.
const modalButtons = document.getElementsByClassName('tui-modal-button');
for (const modalButton of modalButtons) {
// Add the click event listener to the buttons.
modalButton.addEventListener('click', (e) => {
// Show the overlap.
tuiOverlap.classList.add('active');
// Get the display element for the modal.
const modalId = e.target.getAttribute('data-modal');
if (modalId) {
const modal = document.getElementById(modalId);
if (modal) {
// Show it.
modal.classList.add('active');
} else {
throw 'No modal element with id of "' + modalId + '" found.';
}
} else {
throw 'Modal close button data-modal attribute is empty or not set.'
}
});
}
// Find the close modal buttons.
const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
if (modalButtons.length > 0 && !modalCloseButtons.length) {
// A modal without a close button, is a bad modal.
throw 'No modal close buttons found.'
}
for (const modalCloseButton of modalCloseButtons) {
// Add the click event listener to the buttons.
modalCloseButton.addEventListener('click', (e) => {
// Hide the the overlap.
tuiOverlap.classList.remove('active');
// Get the display element id for the modal.
const modalId = e.target.getAttribute('data-modal');
if (modalId) {
// Get the modal element.
const modal = document.getElementById(modalId);
if (modal) {
// Hide it.
modal.classList.remove('active');
} else {
throw 'No modal element with id of "' + modalId + '" found.';
}
} else {
throw 'Modal close button data-modal attribute is empty or not set.'
}
});
}
}
/**
* Init: This is at the bottom to make sure it is fired correctly.
*/
domReady(function () {
tabsController();
datetimeController();
sidenavController();
modalController();
});