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

Fixed the datetime controller; Some other changes...

Browse Source
This commit is contained in:
vinicius.reif 2019-09-09 13:18:14 -03:00
parent 6909da3c2a
commit 58417a711e
10 changed files with 90 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/tuicss.css vendored
View File

@ -701,6 +701,9 @@ input[type=button] {
display: block !important;
margin: 6px; }
.tui-dropdown-content ul li a:hover {
background-color: #00a800; }
.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
display: block; }
@ -1097,7 +1100,7 @@ input[type=button] {
.tui-screen-1024-768.bordered {
border: 2px solid black; }
.tui-date {
.tui-datetime {
padding: 1px 0px 1px 0px;
margin-right: 10px;
float: right; }

56
dist/tuicss.js vendored
View File

@ -3,7 +3,7 @@
*/
$(document).ready(function() {
tabsController();
dateController();
datetimeController();
sidenavController();
modalController();
});
@ -25,32 +25,42 @@ function tabsController() {
/**
* Date field controller
*/
function dateController() {
let interval = setInterval(function () {
function datetimeController() {
if(!$(".tui-datetime").length) return;
datetimeInterval();
setInterval(datetimeInterval, 1000);
function datetimeInterval() {
let today = new Date();
let clock = $(".tui-date");
if(!clock.length) {
clearInterval(interval);
return;
}
let format = clock.attr("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 minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
$(".tui-datetime").each(function() {
let clock = $(this);
let format = clock.attr("data-format");
format = format.replace("M", month);
format = format.replace("d", day);
format = format.replace("y", year);
format = format.replace("h", hour);
format = format.replace("m", minute);
format = format.replace("s", second);
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";
clock.html(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);
});
}
}
/**

2
dist/tuicss.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/tuicss.min.js vendored
View File

@ -1 +1 @@
function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function dateController(){let t=setInterval(function(){let e=new Date,a=$(".tui-date");if(!a.length)return void clearInterval(t);let l=a.attr("data-format"),n=2==(e.getMonth()+"").length?e.getMonth()+1:"0"+(e.getMonth()+1),o=2==(e.getDay()+"").length?e.getDay()+1:"0"+(e.getDay()+1),i=e.getFullYear(),c=2==(e.getHours()+"").length?e.getHours():"0"+e.getHours(),s=2==(e.getMinutes()+"").length?e.getMinutes():"0"+e.getMinutes(),r=2==(e.getSeconds()+"").length?e.getSeconds():"0"+e.getSeconds();l=(l=(l=(l=(l=(l=l.replace("M",n)).replace("d",o)).replace("y",i)).replace("h",c)).replace("m",s)).replace("s",r),a.html(l)})}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}function modalController(){$(".tui-modal-button").click(function(){$(".tui-overlap").addClass("active");let t=$(this).attr("data-modal");$(`#${t}`).addClass("active")}),$(".tui-modal-close-button").click(function(){$(".tui-overlap").removeClass("active");let t=$(this).attr("data-modal");$(`#${t}`).removeClass("active")})}$(document).ready(function(){tabsController(),dateController(),sidenavController(),modalController()});
function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function datetimeController(){function t(){let t=new Date;$(".tui-datetime").each(function(){let e=$(this),a=e.attr("data-format"),n=2==(t.getMonth()+"").length?t.getMonth()+1:"0"+(t.getMonth()+1),l=2==(t.getDay()+"").length?t.getDay()+1:"0"+(t.getDay()+1),i=t.getFullYear(),o=2==(t.getHours()+"").length?t.getHours():"0"+t.getHours(),c=(parseInt(o)+24)%12||12,s=2==(t.getMinutes()+"").length?t.getMinutes():"0"+t.getMinutes(),r=2==(t.getSeconds()+"").length?t.getSeconds():"0"+t.getSeconds(),u=parseInt(o)>=12?"PM":"AM";a=(a=(a=(a=(a=(a=(a=(a=a.replace("M",n)).replace("d",l)).replace("y",i)).replace("H",o)).replace("h",c)).replace("m",s)).replace("s",r)).replace("a",u),e.html(a)})}$(".tui-datetime").length&&(t(),setInterval(t,1e3))}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}function modalController(){$(".tui-modal-button").click(function(){$(".tui-overlap").addClass("active");let t=$(this).attr("data-modal");$(`#${t}`).addClass("active")}),$(".tui-modal-close-button").click(function(){$(".tui-overlap").removeClass("active");let t=$(this).attr("data-modal");$(`#${t}`).removeClass("active")})}$(document).ready(function(){tabsController(),datetimeController(),sidenavController(),modalController()});

33
examples/general.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="tui-bg-blue-black">
<head>
<meta charset="UTF-8">
@ -13,26 +13,17 @@
<body style="padding: 50px;">
<div style="width: 100px; height: 100px;" class="tui-bg-blue-black inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-blue-white inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-green-black inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-green-white inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-cyan-black inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-cyan-white inline-block"></div>
<br>
<div style="width: 100px; height: 100px;" class="tui-bg-red-black inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-red-white inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-purple-black inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-purple-white inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-yellow-black inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-yellow-white inline-block"></div>
<br>
<div style="width: 100px; height: 100px;" class="tui-bg-orange-black inline-block"></div>
<div style="width: 100px; height: 100px;" class="tui-bg-orange-white inline-block"></div>
<nav class="tui-nav">
<span class="tui-datetime" data-format="h:m:s a"></span>
<ul>
<li class="tui-dropdown">
<span>Menu</span>
<div class="tui-dropdown-content">
...
</div>
</li>
</ul>
</nav>
</body>

2
examples/turbo-vision.html
View File

@ -14,7 +14,7 @@
<!-- Navbar -->
<nav class="tui-nav absolute">
<span class="tui-date" data-format="h:m:s"></span>
<span class="tui-datetime" data-format="h:m:s a"></span>
<ul>
<li class="tui-dropdown"><a class="red-168-text">≡</a></li>
<li class="tui-dropdown">

2
src/components/date.scss → src/components/datetime.scss
View File

@ -1,4 +1,4 @@
.tui-date {
.tui-datetime {
padding: 1px 0px 1px 0px;
margin-right: 10px;
float:right;

3
src/components/dropdown.scss
View File

@ -21,6 +21,9 @@
display: block!important;
margin: 6px;
}
.tui-dropdown-content ul li a:hover {
background-color: rgb(0, 168, 0);
}
.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
display: block;
}

56
src/js/tuicss.js
View File

@ -3,7 +3,7 @@
*/
$(document).ready(function() {
tabsController();
dateController();
datetimeController();
sidenavController();
modalController();
});
@ -25,32 +25,42 @@ function tabsController() {
/**
* Date field controller
*/
function dateController() {
let interval = setInterval(function () {
function datetimeController() {
if(!$(".tui-datetime").length) return;
datetimeInterval();
setInterval(datetimeInterval, 1000);
function datetimeInterval() {
let today = new Date();
let clock = $(".tui-date");
if(!clock.length) {
clearInterval(interval);
return;
}
let format = clock.attr("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 minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
$(".tui-datetime").each(function() {
let clock = $(this);
let format = clock.attr("data-format");
format = format.replace("M", month);
format = format.replace("d", day);
format = format.replace("y", year);
format = format.replace("h", hour);
format = format.replace("m", minute);
format = format.replace("s", second);
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";
clock.html(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);
});
}
}
/**

2
src/tuicss.scss
View File

@ -23,7 +23,7 @@
@import './components/textarea.scss';
@import './components/window.scss';
@import './components/screen.scss';
@import './components/date.scss';
@import './components/datetime.scss';
@import './components/shortcut.scss';
@import './components/shadow.scss';
@import './components/background.scss';