improve loader

3 files changed, 46 insertions, 38 deletions

diff --git a/index.html b/index.html
index 513d5ec..8997249 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,8 @@
         <a href="#/tools">Инструменти</a>
         <a href="#/waiting">Пуйчи</a>
       </nav>
-      <section id="app">
-        <div class="grid center middle">
+      <section>
+        <div id="loader">
           <div>
               <div class="loadspin"></div>
               <p>
@@ -29,13 +29,18 @@
               </p>
             </div>
         </div>
+        <div id="app"></div>
       </section>
     </main>
   </div>
   <script src="ka.js"></script>
   <script>
-      const waiting = app.children[0];
       let isLoading = 0;
+      const loading = (val) => {
+        isLoading = val;
+        loader.$cls(isLoading ? "" : "hidden");
+      }
+      loader.$click(() => loading(0));
       const routes = {
         "/": () => div(
           h2("Lorem Ipsum"),
@@ -49,8 +54,7 @@
           p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "),
         ),
         "/network": () => div(
-          isLoading ? waiting
-          : table(
+          table(
             tr(
               td("IP"),
               td(input("text").$value("127.0.0.1")),
@@ -58,21 +62,24 @@
           ).$cls("network"),
         ),
         "/config": () => {
-          isLoading = 1;
+          return div();
+        },
+        "/waiting": () => {
+          loading(1);
           setTimeout(() => {
-            isLoading = 0;
+            loading(0);
             app.reload();
-          }, 10000);
-          return div();
+          }, 3000);
+          return div("Пуйчи");
         },
-        "/waiting": () => waiting,
         "": () => div(
           h1("Несъществуваща страница"),
           p("Страницата не е намерена.")
         ),
       };
       const onchange = () => {
-          doc.querySelectorAll('nav a').forEach(x => x.setAttribute('class',(location.href===x.href)?"active":""));
+        doc.querySelectorAll('nav a').forEach(x => x.$cls((location.href===x.href)?"active":""));
+        loading(isLoading);
       };
       router(app, routes, onchange);
   </script>
diff --git a/ka.js b/ka.js
index 3aeef69..fd2bac4 100644
--- a/ka.js
+++ b/ka.js
@@ -1,40 +1,35 @@
 var doc = document;
-var elAttr = (tag, name) => tag.getAttribute(name);
-function el$Attr(name, value) {
+var elproto = Element.prototype;
+elproto.attr = function(name){
+  return this.getAttribute(name);
+};
+elproto.$attr = function(name, value) {
   this.setAttribute(name, value);
   return this;
-}
-function el$Attrs(attrs) {
-  for (const [attr, value] of Object.entries(attrs||{})) {
+};
+elproto.$attrs = function(attrs) {
+  for (const [attr, value] of Object.entries(attrs)) {
     this.$attr(attr, value);
   }
   return this;
 }
-function el$Cls(cls) {
+elproto.$cls = function(cls) {
   return this.$attr("class", cls);
 }
-function el$Value(value) {
+elproto.$value = function(value) {
   this.value = value;
   return this;
 }
-function el$Click(callback) {
+elproto.$click = function(callback) {
   this.onclick = callback;
   return this;
 }
 function tag(name, attrs, ...children) {
   const el = doc.createElement(name);
-  el.attr = elAttr;
-  el.$attr = el$Attr;
-  el.$attrs = el$Attrs;
-  el.$cls = el$Cls;
-  el.$value = el$Value;
-  el.$click = el$Click;
+  el.$attrs(attrs||{});
   for (const child of children) {
     el.appendChild((typeof(child) === 'string') ? doc.createTextNode(child) : child);
   }
-  for (const [attr, value] of Object.entries(attrs||{})) {
-    el.$attr(attr, value);
-  }
   return el;
 }
 
diff --git a/style.css b/style.css
index 47f6315..0e2bb9d 100644
--- a/style.css
+++ b/style.css
@@ -26,6 +26,7 @@ main {
 }
 section {
   flex: 1;
+  position: relative;
 }
 section > div {
   height: 100%;
@@ -72,6 +73,21 @@ nav a:hover:not(.active) {
   color: white;
 }
 
+#loader {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: grid;
+  text-align: center;
+  align-content: center;
+  background: rgba(0,0,0,0.5);
+}
+#loader.hidden {
+  display: none;
+}
+
 @media (max-width: 900px) {
   .container, nav {
     width: 100%;
@@ -90,16 +106,6 @@ nav a:hover:not(.active) {
   }
 }
 
-.grid {
-  display: grid;
-}
-.center {
-  text-align: center;
-}
-.middle {
-  align-content: center;
-}
-
 .loadspin {
   display: inline-block;
   pointer-events: none;