Fixed the datetime controller; Some other changes...

dist/tuicss.css

@@ -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; }

dist/tuicss.js

@@ -3,7 +3,7 @@
  */
 $(document).ready(function() {
     tabsController();
-    dateController();
+    datetimeController();
     sidenavController();
     modalController();
 });
@@ -25,32 +25,42 @@ function tabsController() {
 /**
  * Date field controller
  */
-function dateController() {
+function datetimeController() {
-    let interval = setInterval(function () {
+
+    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);
+        $(".tui-datetime").each(function() {
-        let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+            let clock = $(this);
-        let year = today.getFullYear();
+            
-        let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+            let format = clock.attr("data-format");
-        let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
-        let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
 
-        format = format.replace("M", month);
+            let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
-        format = format.replace("d", day);
+            let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
-        format = format.replace("y", year);
+            let year = today.getFullYear();
-        format = format.replace("h", hour);
+            let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
-        format = format.replace("m", minute);
+            let hour12 = (parseInt(hour) + 24) % 12 || 12;
-        format = format.replace("s", second);
+            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);
+        });
+    }
 }
 
 /**

dist/tuicss.min.js

@@ -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()});

examples/general.html

@@ -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>
+    <nav class="tui-nav">
-    <div style="width: 100px; height: 100px;" class="tui-bg-blue-white inline-block"></div>
+    <span class="tui-datetime" data-format="h:m:s a"></span>
-
+    <ul>
-    <div style="width: 100px; height: 100px;" class="tui-bg-green-black inline-block"></div>
+        <li class="tui-dropdown">
-    <div style="width: 100px; height: 100px;" class="tui-bg-green-white inline-block"></div>
+            <span>Menu</span>
-
+			<div class="tui-dropdown-content">
-    <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>
+			</div>
-    <br>
+		</li>
-    <div style="width: 100px; height: 100px;" class="tui-bg-red-black inline-block"></div>
+	</ul>
-    <div style="width: 100px; height: 100px;" class="tui-bg-red-white inline-block"></div>
+</nav>
-
-    <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>
 
 </body>
 

examples/turbo-vision.html

@@ -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">

src/components/datetime.scss

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

src/components/dropdown.scss

@@ -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;
 }

src/js/tuicss.js

@@ -3,7 +3,7 @@
  */
 $(document).ready(function() {
     tabsController();
-    dateController();
+    datetimeController();
     sidenavController();
     modalController();
 });
@@ -25,32 +25,42 @@ function tabsController() {
 /**
  * Date field controller
  */
-function dateController() {
+function datetimeController() {
-    let interval = setInterval(function () {
+
+    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);
+        $(".tui-datetime").each(function() {
-        let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+            let clock = $(this);
-        let year = today.getFullYear();
+            
-        let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+            let format = clock.attr("data-format");
-        let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
-        let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
 
-        format = format.replace("M", month);
+            let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
-        format = format.replace("d", day);
+            let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
-        format = format.replace("y", year);
+            let year = today.getFullYear();
-        format = format.replace("h", hour);
+            let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
-        format = format.replace("m", minute);
+            let hour12 = (parseInt(hour) + 24) % 12 || 12;
-        format = format.replace("s", second);
+            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);
+        });
+    }
 }
 
 /**

src/tuicss.scss

@@ -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';