Merge localstorage

kevinkace · Mar 25, 2018 · 2e37019 · 2e37019
1 parent a9c12aa
commit 2e37019
Show file tree

Hide file tree

Showing 15 changed files with 383 additions and 158 deletions.
diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -16,6 +16,9 @@ export default {
         };
     },
     onbeforeremove : (vnode) => animResolve(vnode.dom, css.headerOut),
+    onremove : () => {
+        delete state.header;
+    },
     view : () =>
         m("div", { class : css.headerIn },
             m("h1", { class : css.title }, state.song ? state.song.title : state.appName),

diff --git a/src/components/home/index.css b/src/components/home/index.css
@@ -96,38 +96,3 @@
     color: #fff !important;
     --color: colors.cta;
 }
-
-.list {
-    max-width: 30em;
-    margin: 1.6em auto 0;
-
-    text-align: left;
-
-    h3 {
-        margin-bottom: 0.2em;
-        border-bottom: solid 1px #fff5;
-
-        color: colors.ctaLight;
-        font: bold 1.25em/1 fontSans;
-    }
-
-    a {
-        display: block;
-
-        font-family: fontSerif;
-        text-transform: uppercase;
-        text-decoration: none;
-        font-size: 1.35em;
-
-        &:hover {
-            text-decoration: underline;
-        }
-
-        span {
-            display: inline-block;
-            padding-left: 0.3em;
-            opacity: 0.6;
-            font-size: 0.8em;
-        }
-    }
-}
diff --git a/src/components/home/index.js b/src/components/home/index.js
@@ -1,12 +1,18 @@
 import m from "mithril";
 
 import state from "../../state";
+import db from "../../state/db";
 
 import css from "./index.css";
 
 import logo from "../icons/lyrite-logo.svg";
+import list from "./list";
 
 export default {
+    oninit : (vnode) => {
+        vnode.state.defaultSongs = db.get("songs?default=true");
+        vnode.state.customSongs = db.get("songs?default=undefined");
+    },
     view : (vnode) => [
         m("div", { class : css.home },
 
@@ -44,7 +50,7 @@ export default {
                         m("button", {
                             class : css.loadBtn,
                             onclick : () => {
-                                let slug = state.action("LOAD SONG", vnode.state.lyricsValue);
+                                let slug = state.action("IMPORT SONG LYRICS", vnode.state.lyricsValue);
 
                                 delete vnode.state.textarea;
                                 delete vnode.state.load;
@@ -57,24 +63,14 @@ export default {
             ),
 
             // loaded songs list
-            m("div", { class : css.list },
-                m("h3", "or choose a song"),
-                state.songs ? state.songs.map((song, idx) =>
-                    m("a", {
-                            onclick : () => {
-                                console.log("open song");
-                                state.action("OPEN SONG", idx);
-                            },
-                            oncreate: m.route.link,
-                            href : `/${song.slug}`
-                        },
-                        song.title,
-                        song.artist ?
-                            m("span", " - ", song.artist ) :
-                            null
-                    )
-                ) : null
-            )
+            Object.keys(vnode.state.customSongs).length ?
+                m(list, { songs : vnode.state.customSongs, header : "your songs"}) :
+                null,
+
+            // loaded songs list
+            Object.keys(vnode.state.defaultSongs).length ?
+                m(list, { songs : vnode.state.defaultSongs, header : "default songs"}) :
+                null
         )
     ]
 };
diff --git a/src/components/home/list.css b/src/components/home/list.css
@@ -0,0 +1,39 @@
+@value * as colors from "../../palette.css";
+@value fontSans, fontSerif from "../../index.css";
+
+.list {
+    max-width: 30em;
+    margin: 1.6em auto 0;
+
+    text-align: left;
+
+    h3 {
+        margin-bottom: 0.2em;
+        padding-bottom: 0.3em;
+        border-bottom: solid 1px #fff5;
+
+        color: colors.ctaLight;
+        font: bold 1.15em/1 fontSans;
+    }
+
+    a {
+        display: block;
+
+        font-family: fontSerif;
+        text-transform: uppercase;
+        text-decoration: none;
+        font-size: 1.25em;
+        line-height: 1.25;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        span {
+            display: inline-block;
+            padding-left: 0.3em;
+            opacity: 0.6;
+            font-size: 0.8em;
+        }
+    }
+}
diff --git a/src/components/home/list.js b/src/components/home/list.js
@@ -0,0 +1,22 @@
+import m from "mithril";
+
+import css from "./list.css";
+
+export default {
+    view : (vnode) =>
+        m("div", { class : css.list },
+            m("h3", vnode.attrs.header),
+
+            Object.keys(vnode.attrs.songs).map((slug) =>
+                m("a", {
+                        oncreate : m.route.link,
+                        href     : `/${vnode.attrs.songs[slug].slug}`
+                    },
+                    vnode.attrs.songs[slug].title,
+                    vnode.attrs.songs[slug].artist ?
+                        m("span", " - ", vnode.attrs.songs[slug].artist ) :
+                        null
+                )
+            )
+        )
+};
diff --git a/src/components/layout/index.css b/src/components/layout/index.css
@@ -23,4 +23,22 @@
     opacity: 0.3;
 
     font: normal 0.8em/1 monospace;
+}
+
+.clear {
+    position: fixed;
+    bottom: 1em;
+    left: 1em;
+}
+
+.debug {
+    position: fixed;
+    top: 0;
+    opacity: 0.2;
+    max-height: 100vh;
+    width: 400px;
+    overflow-y: auto;
+    font-size: 0.75em;
+    z-index: -1;
+    pointer-events: none;
 }
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
@@ -15,6 +15,19 @@ export default {
 
             vnode.children,
 
+            state.debug ? [
+                    m("button", {
+                        class   : css.clear,
+                        onclick : () => {
+                            state.action("CLEAR DB");
+
+                        }
+                    }, "clear"),
+
+                    m("pre", { class : css.debug }, JSON.stringify(state, null, 2))
+                ] :
+                null,
+
             m("div", { class : css.bug },
                 m("a", {
                     href  : state.githubHref,

diff --git a/src/components/lyrics/index.js b/src/components/lyrics/index.js
@@ -11,37 +11,38 @@ function addBr(text) {
 
 export default {
     oninit : () => {
-        if(state.song.untitled) {
-            state.action("OPEN TITLE MODAL");
-        }
+        // if(state.song.untitled) {
+        //     state.action("OPEN TITLE MODAL");
+        // }
     },
-    view : () => m("div", { class : css.lyredit },
-        m("div", {
-                class : state.edit ? css.lyricsEdit : css.lyrics,
-                style : {
-                    fontSize    : `${state.font.size}em`,
-                    columnCount : state.cols.count
-                }
-            },
-            state.song.lyrics
-                .map((part, idx) =>
-                    m("p", {
-                            id    : part.hash,
-                            class : [
-                                state.selected === idx ? css.lineSelected : css.line,
-                                part.style ? css[`s${part.style.idx}`] : null
-                            ].join(" "),
+    view : () =>
+        m("div", { class : css.lyredit },
+            m("div", {
+                    class : state.edit ? css.lyricsEdit : css.lyrics,
+                    style : {
+                        fontSize    : `${state.font.size}em`,
+                        columnCount : state.cols.count
+                    }
+                },
+                state.song.lyrics
+                    .map((part, idx) =>
+                        m("p", {
+                                id    : part.hash,
+                                class : [
+                                    state.selected === idx ? css.lineSelected : css.line,
+                                    part.style ? css[`s${part.style.idx}`] : null
+                                ].join(" "),
 
-                            onclick : () => {
-                                state.action("CLICK LYRIC", idx);
-                            }
-                        },
+                                onclick : () => {
+                                    state.action("CLICK LYRIC", idx);
+                                }
+                            },
 
-                        m.trust(addBr(part.text))
+                            m.trust(addBr(part.text))
+                        )
                     )
-                )
-        ),
+            ),
 
-        state.edit ? m(edit) : null
-    )
+            state.edit ? m(edit) : null
+        )
 };
diff --git a/src/components/modal/title.js b/src/components/modal/title.js
@@ -14,7 +14,7 @@ export default {
                         return;
                     }
 
-                    state.action("ADD TITLE", vnode.state.value);
+                    state.action("ADD TITLE MODAL", vnode.state.value);
                 }
             },
             m("input", {
@@ -37,7 +37,9 @@ export default {
                 ),
                 m("button", {
                         class   : css.cancel,
-                        onclick : () => {
+                        onclick : (e) => {
+                            e.preventDefault();
+
                             state.action("CLOSE MODAL");
                         }
                     },

diff --git a/src/index.js b/src/index.js
@@ -12,9 +12,12 @@ import "./favicon.ico";
 
 const mountEl = document.getElementById("mount");
 
-m.route.prefix("");
+// state.debug = true;
+state.action("IMPORT DEFAULT SONGS");
 
+m.route.prefix("");
 m.route(mountEl, "/", routes);
 
+
 window.m = m;
 window.state = state;
diff --git a/src/routes.js b/src/routes.js
@@ -10,33 +10,16 @@ import error from "./components/error";
 import home from "./components/home";
 
 export default {
-    "/"      : {
+    "/" : {
         onmatch : () => {
-            if(!state.songs) {
-                state.action("LOAD DEFAULT SONGS");
-            } else {
-                state.action("CLOSE SONG");
-            }
+            state.action("CLOSE SONG");
         },
         render : () => m(layout, m(home))
     },
 
     "/:slug" : {
-        onmatch : (args) => {
-            if(!state.songs) {
-                state.action("LOAD DEFAULT SONGS");
-            }
-
-            let songIdx = state.action("GET SONG IDX FROM SLUG", args.slug);
-
-            if(!songIdx && songIdx !== 0) {
-                return error;
-            }
-
-            state.action("OPEN SONG", songIdx);
-
-            return lyrics;
-        },
+        onmatch : (args) =>
+            state.action("LOAD SONG BY SLUG", args.slug) ? lyrics : error,
         render : (comp) => m(layout, { header : true }, m(comp.tag))
     }
 };