Repos / pytaku / 66245ea6e8
commit 66245ea6e845ceffb46aa032bf9c9c4393dda9cb
Author: Bùi Thành Nhân <hi@imnhan.com>
Date: Mon Aug 17 22:56:37 2020 +0700
split single js file to multiple modules
diff --git a/src/pytaku/static/js/common-components.js b/src/pytaku/static/js/common-components.js
new file mode 100644
index 0000000..22852ee
--- /dev/null
+++ b/src/pytaku/static/js/common-components.js
@@ -0,0 +1,52 @@
+import { Auth } from "./models.js";
+
+function Navbar(initialVNode) {
+ let isLoggingOut = false;
+ return {
+ view: (vnode) => {
+ let userLink;
+ if (Auth.isLoggedIn()) {
+ userLink = m("span.nav--greeting", [
+ "Welcome, ",
+ m("b", Auth.username),
+ " ",
+ m(
+ "button",
+ {
+ onclick: (ev) => {
+ isLoggingOut = true;
+ m.redraw();
+ Auth.logout();
+ },
+ disabled: isLoggingOut ? "disabled" : null,
+ },
+ [
+ m("i.icon.icon-log-out"),
+ isLoggingOut ? " logging out" : " logout",
+ ]
+ ),
+ ]);
+ } else {
+ userLink = m(m.route.Link, { class: "nav--link", href: "/a" }, [
+ m("i.icon.icon-log-in"),
+ "login / register",
+ ]);
+ }
+
+ return m("nav", [
+ m(m.route.Link, { class: "nav--logo", href: "/" }, [
+ m("img.nav--logo--img", {
+ src: "/static/pytaku.svg",
+ alt: "home",
+ }),
+ ]),
+ m("form.nav--search-form", [
+ m("input", { placeholder: "search title name" }),
+ m("button", { type: "submit" }, [m("i.icon.icon-search")]),
+ ]),
+ userLink,
+ ]);
+ },
+ };
+}
+export { Navbar };
diff --git a/src/pytaku/static/js/main.js b/src/pytaku/static/js/main.js
new file mode 100644
index 0000000..cf63ec1
--- /dev/null
+++ b/src/pytaku/static/js/main.js
@@ -0,0 +1,11 @@
+import { Auth } from "./models.js";
+import Authentication from "./routes/authentication.js";
+import Home from "./routes/home.js";
+
+const root = document.getElementById("spa-root");
+m.route.prefix = "";
+m.route(root, "/h", {
+ "/h": Home,
+ "/a": Authentication,
+});
+Auth.init();
diff --git a/src/pytaku/static/js/spa.js b/src/pytaku/static/js/routes/authentication.js
similarity index 75%
rename from src/pytaku/static/js/spa.js
rename to src/pytaku/static/js/routes/authentication.js
index 5776261..1e6743a 100644
--- a/src/pytaku/static/js/spa.js
+++ b/src/pytaku/static/js/routes/authentication.js
@@ -1,20 +1,5 @@
-/* Top-level Components */
-import { Auth } from "./models.js";
-
-const Home = {
- oncreate: (vnode) => {
- document.title = "Pytaku";
- },
- view: (vnode) => {
- return m("div.main", [
- m(Navbar),
- m("div.content", [
- m("p", "Try searching for some manga title using the box above."),
- m("p", "Logging in allows you to follow manga titles."),
- ]),
- ]);
- },
-};
+import { Navbar } from "../common-components.js";
+import { Auth } from "../models.js";
function Authentication(initialVNode) {
let loginUsername;
@@ -201,62 +186,4 @@ function Authentication(initialVNode) {
};
}
-function Navbar(initialVNode) {
- let isLoggingOut = false;
- return {
- view: (vnode) => {
- let userLink;
- if (Auth.isLoggedIn()) {
- userLink = m("span.nav--greeting", [
- "Welcome, ",
- m("b", Auth.username),
- " ",
- m(
- "button",
- {
- onclick: (ev) => {
- isLoggingOut = true;
- m.redraw();
- Auth.logout();
- },
- disabled: isLoggingOut ? "disabled" : null,
- },
- [
- m("i.icon.icon-log-out"),
- isLoggingOut ? " logging out" : " logout",
- ]
- ),
- ]);
- } else {
- userLink = m(m.route.Link, { class: "nav--link", href: "/a" }, [
- m("i.icon.icon-log-in"),
- "login / register",
- ]);
- }
-
- return m("nav", [
- m(m.route.Link, { class: "nav--logo", href: "/" }, [
- m("img.nav--logo--img", {
- src: "/static/pytaku.svg",
- alt: "home",
- }),
- ]),
- m("form.nav--search-form", [
- m("input", { placeholder: "search title name" }),
- m("button", { type: "submit" }, [m("i.icon.icon-search")]),
- ]),
- userLink,
- ]);
- },
- };
-}
-
-/* Entry point */
-
-const root = document.getElementById("spa-root");
-m.route.prefix = "";
-m.route(root, "/h", {
- "/h": Home,
- "/a": Authentication,
-});
-Auth.init();
+export default Authentication;
diff --git a/src/pytaku/static/js/routes/home.js b/src/pytaku/static/js/routes/home.js
new file mode 100644
index 0000000..df0ce6d
--- /dev/null
+++ b/src/pytaku/static/js/routes/home.js
@@ -0,0 +1,18 @@
+import { Navbar } from "../common-components.js";
+
+const Home = {
+ oncreate: (vnode) => {
+ document.title = "Pytaku";
+ },
+ view: (vnode) => {
+ return m("div.main", [
+ m(Navbar),
+ m("div.content", [
+ m("p", "Try searching for some manga title using the box above."),
+ m("p", "Logging in allows you to follow manga titles."),
+ ]),
+ ]);
+ },
+};
+
+export default Home;
diff --git a/src/pytaku/templates/spa.html b/src/pytaku/templates/spa.html
index 3d43b80..ce36cfa 100644
--- a/src/pytaku/templates/spa.html
+++ b/src/pytaku/templates/spa.html
@@ -44,6 +44,6 @@
<script>const initialState = "{{ initial_state }}";</script>
<script src="{{ url_for('static', filename='vendored/mithril.min.js') }}"></script>
- <script src="{{ url_for('static', filename='js/spa.js') }}" type="module"></script>
+ <script src="{{ url_for('static', filename='js/main.js') }}" type="module"></script>
</body>
</html>