all repos — h3 @ ff6cfbd8b53bff65a137f23d2cf0168c19053365

A tiny, extremely minimalist JavaScript microframework. 

Updates, scrolling to top on navigation.
h3rald h3rald@h3rald.com
Thu, 23 Apr 2020 09:44:12 +0200
commit

ff6cfbd8b53bff65a137f23d2cf0168c19053365

parent

aa5946a61bdde9e9be6060033f69a88d95e0450a

7 files changed, 14 insertions(+), 16 deletions(-)

jump to
M docs/example/assets/js/app.js → docs/example/assets/js/app.js 
@@ -4,7 +4,6 @@ import SettingsView from "./components/SettingsView.js";
 import MainView from "./components/MainView.js";
 
 h3.init({
-  element: document.getElementById("app"),
   modules,
   preStart: () => {
     h3.dispatch("app/load");
M docs/example/assets/js/components/NavigationBar.js → docs/example/assets/js/components/NavigationBar.js 
@@ -3,12 +3,9 @@ import Paginator from "./Paginator.js";
 
 export default function NavigationBar() {
   // Set the todo filter.
-  const setFilter = () => {
-    let f = document.getElementById("filter-text");
-    h3.dispatch("todos/filter", f.value);
-    h3.redraw()
-    f = document.getElementById("filter-text");
-    f.focus();
+  const setFilter = (e) => {
+    h3.dispatch("todos/filter", e.target.value);
+    h3.redraw();
   };
   // Filtering function for todo items
   return h3("div.navigation-bar", [

@@ -23,7 +20,7 @@ ),
     h3("input", {
       id: "filter-text",
       placeholder: "Type to filter todo items...",
-      onkeyup: setFilter,
+      oninput: setFilter,
     }),
     Paginator,
   ]);
M docs/example/assets/js/components/SettingsView.js → docs/example/assets/js/components/SettingsView.js 
@@ -1,15 +1,15 @@ 
 import h3 from "../h3.js";
 
 export default function () {
-  const toggleLogging = () => {
-    const value = document.getElementById("options-logging").checked;
+  const toggleLogging = (e) => {
+    const value = e.target.checked;
     h3.dispatch("settings/set", { logging: value });
     h3.dispatch("app/save");
   };
   return h3("div.settings.container", [
     h3("h1", "Settings"),
     h3("div.options", [
-      h3("input#options-logging", {
+      h3("input", {
         type: "checkbox",
         onclick: toggleLogging,
         checked: h3.state.settings.logging,
M docs/example/assets/js/h3.js → docs/example/assets/js/h3.js 
@@ -307,7 +307,7 @@ return;
     }
     // ID
     if (oldvnode.id !== newvnode.id) {
-      node.id = newvnode.id;
+      node.id = newvnode.id || "";
       oldvnode.id = newvnode.id;
     }
     // Value

@@ -331,7 +331,7 @@ oldvnode.classList = newvnode.classList;
     }
     // Style
     if (oldvnode.style !== newvnode.style) {
-      node.style.cssText = newvnode.style;
+      node.style.cssText = newvnode.style || "";
       oldvnode.style = newvnode.style;
     }
     // Data

@@ -588,6 +588,7 @@ }
       const vnode = this.routes[this.route.def]();
       this.element.appendChild(vnode.render());
       this.setRedraw(vnode);
+      window.scrollTo(0, 0);
       this.store.dispatch("$redraw", this.route);
       this.store.dispatch("$navigation", this.route);
     };
M docs/example/index.html → docs/example/index.html 
@@ -9,7 +9,6 @@ <link rel="shortcut icon" href="/favicon.png" type="image/png">
     <link rel="stylesheet" href="assets/css/style.css" />
   </head>
   <body>
-    <div id="app"></div>
     <script type="module" src="assets/js/app.js"></script>
   </body>
 </html>
M docs/js/h3.js → docs/js/h3.js 
@@ -307,7 +307,7 @@ return;
     }
     // ID
     if (oldvnode.id !== newvnode.id) {
-      node.id = newvnode.id;
+      node.id = newvnode.id || "";
       oldvnode.id = newvnode.id;
     }
     // Value

@@ -331,7 +331,7 @@ oldvnode.classList = newvnode.classList;
     }
     // Style
     if (oldvnode.style !== newvnode.style) {
-      node.style.cssText = newvnode.style;
+      node.style.cssText = newvnode.style || "";
       oldvnode.style = newvnode.style;
     }
     // Data

@@ -588,6 +588,7 @@ }
       const vnode = this.routes[this.route.def]();
       this.element.appendChild(vnode.render());
       this.setRedraw(vnode);
+      window.scrollTo(0, 0);
       this.store.dispatch("$redraw", this.route);
       this.store.dispatch("$navigation", this.route);
     };
M h3.js → h3.js 
@@ -588,6 +588,7 @@ }
       const vnode = this.routes[this.route.def]();
       this.element.appendChild(vnode.render());
       this.setRedraw(vnode);
+      window.scrollTo(0, 0);
       this.store.dispatch("$redraw", this.route);
       this.store.dispatch("$navigation", this.route);
     };