Adding an example for the #250 issue

krasimir · Dec 29, 2020 · e3c91a4 · e3c91a4
1 parent 46da9c0
commit e3c91a4
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/examples/250/package.json b/examples/250/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "navigo-example-basic-spa",
+  "private": true,
+  "scripts": {
+    "start": "node ./server.js"
+  }
+}
diff --git a/examples/250/page.html b/examples/250/page.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Navigo</title>
+    <link href="/styles.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div>
+      <a href="/about" data-navigo>About</a>
+      <a href="/products?a=b" data-navigo>Products 1</a>
+      <a href="/products?c=d" data-navigo>Products 2</a>
+      <a href="/login" data-navigo>Login</a>
+    </div>
+    <hr />
+    <div id="content"></div>
+    <script src="/navigo.js"></script>
+    <script>
+      window.addEventListener("load", () => {
+        const router = new Navigo("/");
+        const render = (content) =>
+          (document.querySelector("#content").innerHTML = content);
+
+        router
+          .on(
+            "/about",
+            (match) => {
+              render("About");
+            },
+            {
+              leave: (done) => {
+                if (
+                  confirm(
+                    "You are about to leave the About page. Are you sure?"
+                  )
+                ) {
+                  done();
+                } else {
+                  done(false);
+                }
+              },
+            }
+          )
+          .on("/products", (match) => {
+            render("Products " + JSON.stringify(match.params));
+          })
+          .on("/login", (match) => {
+            render("Login");
+          })
+          .on((match) => {
+            render("home");
+          })
+          .resolve();
+      });
+    </script>
+    <div id="content"></div>
+  </body>
+</html>
diff --git a/examples/250/server.js b/examples/250/server.js
@@ -0,0 +1,11 @@
+const express = require("express");
+const app = express();
+const port = 3000;
+const { staticAssets, serveFile } = require("../utils/server");
+
+staticAssets(app);
+app.get("*", serveFile(__dirname + "/page.html"));
+
+app.listen(port, () => {
+  console.log(`Example app listening at http://localhost:${port}`);
+});