all repos — h3 @ 9be48a7e0f62afde109af560909ba9895c8cedf9

A tiny, extremely minimalist JavaScript microframework. 

Improvements.
h3rald h3rald@h3rald.com
Sat, 18 Apr 2020 18:01:00 +0200
commit

9be48a7e0f62afde109af560909ba9895c8cedf9

parent

56a6ad8b0ffac6a74a0f4624bb5ae08230b29f59

6 files changed, 21 insertions(+), 9 deletions(-)

jump to
M docs/css/style.css → docs/css/style.css 
@@ -12,6 +12,11 @@ border: none;
   border-left: 1px solid #ccc;
 }
 
-[type=checkbox].drawer:checked+* {
+[type="checkbox"].drawer:checked + * {
   padding-top: 60px;
-}+}
+
+.spinner-container {
+  text-align: center;
+  margin: auto;
+}
M docs/index.html → docs/index.html 
@@ -11,7 +11,6 @@ <link rel="stylesheet" href="css/mini-default.css" />
     <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
-    <div id="app"></div>
     <script type="module" src="js/app.js"></script>
   </body>
 </html>
M docs/js/app.js → docs/js/app.js 
@@ -35,7 +35,9 @@ })();
   }
   const menu = ids.map((p) => h3("a", { href: `#/${p}` }, labels[p]));
   const html = h3.state.pages[id];
-  const content = html ? h3("div.content", { $html:  html}) : h3("div.empty", {style: "text-align: center; margin: auto;"}, h3("span.spinner"));
+  const content = html
+    ? h3("div.content", { $html: html })
+    : h3("div.spinner-container", h3("span.spinner"));
   return h3("div.page", [
     h3("header.row", [
       h3("a.logo.col-sm", { href: "#/" }, "H3"),

@@ -48,7 +50,7 @@ h3("label.drawer-close", { for: "drawer-control" }),
         ...menu,
       ]),
       h3("main.col-sm-12.col-md-9", [
-        h3("div.card.fluid", h3("div.section", content))
+        h3("div.card.fluid", h3("div.section", content)),
       ]),
       h3("footer", h3("div", "© 2020 Fabio Cevasco")),
     ]),

@@ -56,7 +58,7 @@ ]);
 };
 
 h3.init({
-  element: document.getElementById("app"),
+  element: document.body,
   modules: [pages],
   routes: {
     "/": Page,
M docs/js/h3.js → docs/js/h3.js 
@@ -458,7 +458,9 @@ }
     }
     // innerHTML
     if (oldvnode.$html !== newvnode.$html) {
-      node.innerHTML = newvnode.$html;
+      if (newvnode.children.length === 0 && newvnode.$html) {
+        node.innerHTML = newvnode.$html;
+      }
       oldvnode.$html = newvnode.$html;
     }
   }
M example/assets/js/h3.js → example/assets/js/h3.js 
@@ -458,7 +458,9 @@ }
     }
     // innerHTML
     if (oldvnode.$html !== newvnode.$html) {
-      node.innerHTML = newvnode.$html;
+      if (newvnode.children.length === 0 && newvnode.$html) {
+        node.innerHTML = newvnode.$html;
+      }
       oldvnode.$html = newvnode.$html;
     }
   }
M h3.js → h3.js 
@@ -458,7 +458,9 @@ }
     }
     // innerHTML
     if (oldvnode.$html !== newvnode.$html) {
-      node.innerHTML = newvnode.$html;
+      if (newvnode.children.length === 0 && newvnode.$html) {
+        node.innerHTML = newvnode.$html;
+      }
       oldvnode.$html = newvnode.$html;
     }
   }