Merge pull request #8 from ellisgl/issue-7

#7  Convert to vanilla JS (ES6+). No more jQuery.

.gitignore

@@ -1 +1,2 @@
 node_modules
+.idea

dist/tuicss.js

@@ -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() {
+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
  */
 function tabsController() {
-    $(".tui-tab").click(function(event) {
+    // Get all the tab elements (typically li tags).
-        $(".tui-tab-content").hide();
+    const tabs = document.getElementsByClassName('tui-tab');
-        let tabContentid = $(this).attr('data-tab-content');
+
-        $(`#${tabContentid}`).show();
+    if (!tabs.length) {
-        $(".tui-tab").removeClass("active");
+        // No tabs found, return early and save a couple CPU cycles.
-        $(this).addClass("active");
+        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');
+
         });
-    $('.tui-tab.active').click();
+    }
+
+    // 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() {
+                // Get the format we want to display in the element.
-            let clock = $(this);
+                let format = clock.getAttribute('data-format');
 
-            let format = clock.attr("data-format");
+                // 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';
 
-            let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
+                // Replace based on the format.
-            let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+                format = format.replace('M', month);
-            let year = today.getFullYear();
+                format = format.replace('d', day);
-            let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+                format = format.replace('y', year);
-            let hour12 = (parseInt(hour) + 24) % 12 || 12;
+                format = format.replace('H', hour);
-            let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
+                format = format.replace('h', hour12);
-            let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
+                format = format.replace('m', minute);
-            let ampm = parseInt(hour) >= 12 ? "PM" : "AM"; 
+                format = format.replace('s', second);
+                format = format.replace('a', ampm);
 
-            format = format.replace("M", month);
+                // Show it in the element.
-            format = format.replace("d", day);
+                clock.innerHTML = format;
-            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
+ * There should only side navigation element at the moment.
  */
 function sidenavController() {
-    $(".tui-sidenav-button").click(function() {
+    // Get the side navigation button (there should be only one, but if not, we are getting the first one).
-        let sidenav = $(".tui-sidenav");
+    const sideNavButton = document.querySelector('.tui-sidenav-button');
-        if(sidenav.hasClass("active")) {
+
-            $(".tui-sidenav").removeClass("active");
+    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 {
-            $(".tui-sidenav").addClass("active");
+                sideNav.classList.add('active');
+            }
+        } else {
+            throw 'No sidenav element found.'
         }
     });
 }
@@ -81,14 +170,80 @@ function sidenavController() {
  * Modal controller
  */
 function modalController() {
-    $(".tui-modal-button").click(function() {
+    // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
-        $(".tui-overlap").addClass("active");
+    const tuiOverlap = document.querySelector('.tui-overlap');
-        let modalId = $(this).attr("data-modal");
+
-        $(`#${modalId}`).addClass("active");
+    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.'
+            }
         });
-    $(".tui-modal-close-button").click(function() {
+    }
-        $(".tui-overlap").removeClass("active");
+
-        let modalId = $(this).attr("data-modal");
+    // Find the close modal buttons.
-        $(`#${modalId}`).removeClass("active");
+    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();
+});

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 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()});
+function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});

examples/bios.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>BIOS Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
 </head>
@@ -52,6 +51,8 @@
                 </tbody>
             </table>
         </div>
+        <div class="tui-tab-content tui-content" id="tab-2-content">
+        </div>
         <div class="tui-statusbar absolute cyan-168">
             <ul>
                 <li><a href="#!"><span class="white-255-text">F1</span> Help</a></li>

examples/inputs.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Inputs Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
     <style>

examples/modal.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Modal Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
 </head>

examples/pc-startup.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>PC Startup Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
 </head>

examples/pocket-calculator.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Pocket Calculator Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
 </head>

examples/progress-bar.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Progress Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
 </head>

examples/register.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Register Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
     <style>

examples/scandisk.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Scandisk Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
     <style>

examples/table.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Table Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
     <style>

examples/turbo-vision.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Turbo Vision Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
 </head>

examples/window-and-panels.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Window and Panels Example</title>
-    <script src="plugins/jquery-3.4.1.min.js"></script>
     <script src="../dist/tuicss.min.js"></script>
     <link rel="stylesheet" href="../dist/tuicss.min.css">
     <style>

package-lock.json

@@ -11,12 +11,12 @@
       "dev": true
     },
     "ajv": {
-      "version": "6.10.2",
+      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "requires": {
-        "fast-deep-equal": "^2.0.1",
+        "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
         "json-schema-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
@@ -313,9 +313,9 @@
       "dev": true
     },
     "aws4": {
-      "version": "1.8.0",
+      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
     "bach": {
@@ -581,9 +581,9 @@
       }
     },
     "clean-css": {
-      "version": "4.2.1",
+      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
-      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
       "dev": true,
       "requires": {
         "source-map": "~0.6.0"
@@ -1172,15 +1172,15 @@
       }
     },
     "fast-deep-equal": {
-      "version": "2.0.1",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
     "fast-json-stable-stringify": {
-      "version": "2.0.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
     "fill-range": {
@@ -2018,9 +2018,9 @@
       }
     },
     "globule": {
-      "version": "1.2.1",
+      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
       "dev": true,
       "requires": {
         "glob": "~7.1.1",
@@ -2149,12 +2149,12 @@
       }
     },
     "gulp-clean-css": {
-      "version": "4.2.0",
+      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.3.0.tgz",
-      "integrity": "sha512-r4zQsSOAK2UYUL/ipkAVCTRg/2CLZ2A+oPVORopBximRksJ6qy3EX1KGrIWT4ZrHxz3Hlobb1yyJtqiut7DNjA==",
+      "integrity": "sha512-mGyeT3qqFXTy61j0zOIciS4MkYziF2U594t2Vs9rUnpkEHqfu6aDITMp8xOvZcvdX61Uz3y1mVERRYmjzQF5fg==",
       "dev": true,
       "requires": {
-        "clean-css": "4.2.1",
+        "clean-css": "4.2.3",
         "plugin-error": "1.0.1",
         "through2": "3.0.1",
         "vinyl-sourcemaps-apply": "0.2.1"
@@ -2307,13 +2307,13 @@
       "dev": true
     },
     "gulp-sass": {
-      "version": "4.0.2",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",
-      "integrity": "sha512-q8psj4+aDrblJMMtRxihNBdovfzGrXJp1l4JU0Sz4b/Mhsi2DPrKFYCGDwjIWRENs04ELVHxdOJQ7Vs98OFohg==",
+      "integrity": "sha512-xIiwp9nkBLcJDpmYHbEHdoWZv+j+WtYaKD6Zil/67F3nrAaZtWYN5mDwerdo7EvcdBenSAj7Xb2hx2DqURLGdA==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.0",
-        "lodash.clonedeep": "^4.3.2",
+        "lodash": "^4.17.11",
         "node-sass": "^4.8.3",
         "plugin-error": "^1.0.1",
         "replace-ext": "^1.0.0",
@@ -2355,12 +2355,12 @@
       "dev": true
     },
     "har-validator": {
-      "version": "5.1.3",
+      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "dev": true,
       "requires": {
-        "ajv": "^6.5.5",
+        "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
       }
     },
@@ -2450,9 +2450,9 @@
       }
     },
     "in-publish": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
       "dev": true
     },
     "indent-string": {
@@ -2601,13 +2601,10 @@
       "dev": true
     },
     "is-finite": {
-      "version": "1.0.2",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
-      "dev": true,
+      "dev": true
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
     },
     "is-fullwidth-code-point": {
       "version": "1.0.0",
@@ -2729,9 +2726,9 @@
       "dev": true
     },
     "js-base64": {
-      "version": "2.5.1",
+      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
     "jsbn": {
@@ -2783,9 +2780,9 @@
       "dev": true
     },
     "kind-of": {
-      "version": "6.0.2",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
     "last-run": {
@@ -2873,15 +2870,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.19",
+      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
-      "dev": true
-    },
-    "lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
     "loud-rejection": {
@@ -3009,18 +3000,18 @@
       }
     },
     "mime-db": {
-      "version": "1.40.0",
+      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.24",
+      "version": "2.1.27",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
-      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
       "dev": true,
       "requires": {
-        "mime-db": "1.40.0"
+        "mime-db": "1.44.0"
       }
     },
     "minimatch": {
@@ -3033,9 +3024,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.0",
+      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
     "mixin-deep": {
@@ -3060,20 +3051,12 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.1",
+      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "dev": true,
       "requires": {
-        "minimist": "0.0.8"
+        "minimist": "^1.2.5"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
       }
     },
     "ms": {
@@ -3172,24 +3155,12 @@
         "true-case-path": "^1.0.2"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
         "ansi-styles": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
           "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
           "dev": true
         },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
         "chalk": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -3203,165 +3174,11 @@
             "supports-color": "^2.0.0"
           }
         },
-        "cliui": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-          "dev": true,
-          "requires": {
-            "string-width": "^3.1.0",
-            "strip-ansi": "^5.2.0",
-            "wrap-ansi": "^5.1.0"
-          },
-          "dependencies": {
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "get-caller-file": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "require-main-filename": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-          "dev": true
-        },
-        "sass-graph": {
-          "version": "2.2.5",
-          "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
-          "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.0.0",
-            "lodash": "^4.0.0",
-            "scss-tokenizer": "^0.2.3",
-            "yargs": "^13.3.2"
-          }
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          },
-          "dependencies": {
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
           "dev": true
-        },
-        "which-module": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-          "dev": true
-        },
-        "wrap-ansi": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "string-width": "^3.0.0",
-            "strip-ansi": "^5.0.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "3.2.1",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-              "dev": true,
-              "requires": {
-                "color-convert": "^1.9.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-          "dev": true
-        },
-        "yargs": {
-          "version": "13.3.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^5.0.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^2.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^3.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^13.1.2"
-          }
-        },
-        "yargs-parser": {
-          "version": "13.1.2",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
         }
       }
     },
@@ -3761,9 +3578,9 @@
       "dev": true
     },
     "psl": {
-      "version": "1.3.1",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-2KLd5fKOdAfShtY2d/8XDWVRnmp3zp40Qt6ge2zBPFARLXOGUf2fHD5eg+TV/5oxBtQKVhjUaKFsAaE4HnwfSA==",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
       "dev": true
     },
     "pump": {
@@ -3941,9 +3758,9 @@
       }
     },
     "request": {
-      "version": "2.88.0",
+      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
@@ -3953,7 +3770,7 @@
         "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
         "form-data": "~2.3.2",
-        "har-validator": "~5.1.0",
+        "har-validator": "~5.1.3",
         "http-signature": "~1.2.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
@@ -3963,7 +3780,7 @@
         "performance-now": "^2.1.0",
         "qs": "~6.5.2",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.4.3",
+        "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
       }
@@ -4050,6 +3867,141 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass-graph": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^13.3.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "which-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+          "dev": true
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+          "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -4116,9 +4068,9 @@
       }
     },
     "signal-exit": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
       "dev": true
     },
     "snapdragon": {
@@ -4567,21 +4519,13 @@
       }
     },
     "tough-cookie": {
-      "version": "2.4.3",
+      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
       "dev": true,
       "requires": {
-        "psl": "^1.1.24",
+        "psl": "^1.1.28",
-        "punycode": "^1.4.1"
+        "punycode": "^2.1.1"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
-        }
       }
     },
     "trim-newlines": {
@@ -4724,9 +4668,9 @@
       "dev": true
     },
     "uri-js": {
-      "version": "4.2.2",
+      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",
-      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==",
       "dev": true,
       "requires": {
         "punycode": "^2.1.0"
@@ -4751,9 +4695,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.3.3",
+      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
     "v8flags": {

package.json

@@ -25,10 +25,10 @@
   "devDependencies": {
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
-    "gulp-clean-css": "^4.2.0",
+    "gulp-clean-css": "^4.3.0",
     "gulp-copy": "^4.0.1",
     "gulp-minify": "^3.1.0",
     "gulp-rename": "^1.4.0",
-    "gulp-sass": "^4.0.2"
+    "gulp-sass": "^4.1.0"
   }
 }

src/js/tuicss.js

@@ -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() {
+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
  */
 function tabsController() {
-    $(".tui-tab").click(function(event) {
+    // Get all the tab elements (typically li tags).
-        $(".tui-tab-content").hide();
+    const tabs = document.getElementsByClassName('tui-tab');
-        let tabContentid = $(this).attr('data-tab-content');
+
-        $(`#${tabContentid}`).show();
+    if (!tabs.length) {
-        $(".tui-tab").removeClass("active");
+        // No tabs found, return early and save a couple CPU cycles.
-        $(this).addClass("active");
+        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');
+
         });
-    $('.tui-tab.active').click();
+    }
+
+    // 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() {
+                // Get the format we want to display in the element.
-            let clock = $(this);
+                let format = clock.getAttribute('data-format');
 
-            let format = clock.attr("data-format");
+                // 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';
 
-            let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
+                // Replace based on the format.
-            let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+                format = format.replace('M', month);
-            let year = today.getFullYear();
+                format = format.replace('d', day);
-            let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+                format = format.replace('y', year);
-            let hour12 = (parseInt(hour) + 24) % 12 || 12;
+                format = format.replace('H', hour);
-            let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
+                format = format.replace('h', hour12);
-            let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
+                format = format.replace('m', minute);
-            let ampm = parseInt(hour) >= 12 ? "PM" : "AM"; 
+                format = format.replace('s', second);
+                format = format.replace('a', ampm);
 
-            format = format.replace("M", month);
+                // Show it in the element.
-            format = format.replace("d", day);
+                clock.innerHTML = format;
-            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
+ * There should only side navigation element at the moment.
  */
 function sidenavController() {
-    $(".tui-sidenav-button").click(function() {
+    // Get the side navigation button (there should be only one, but if not, we are getting the first one).
-        let sidenav = $(".tui-sidenav");
+    const sideNavButton = document.querySelector('.tui-sidenav-button');
-        if(sidenav.hasClass("active")) {
+
-            $(".tui-sidenav").removeClass("active");
+    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 {
-            $(".tui-sidenav").addClass("active");
+                sideNav.classList.add('active');
+            }
+        } else {
+            throw 'No sidenav element found.'
         }
     });
 }
@@ -81,14 +170,80 @@ function sidenavController() {
  * Modal controller
  */
 function modalController() {
-    $(".tui-modal-button").click(function() {
+    // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
-        $(".tui-overlap").addClass("active");
+    const tuiOverlap = document.querySelector('.tui-overlap');
-        let modalId = $(this).attr("data-modal");
+
-        $(`#${modalId}`).addClass("active");
+    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.'
+            }
         });
-    $(".tui-modal-close-button").click(function() {
+    }
-        $(".tui-overlap").removeClass("active");
+
-        let modalId = $(this).attr("data-modal");
+    // Find the close modal buttons.
-        $(`#${modalId}`).removeClass("active");
+    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();
+});