add basic router

gothinkster · May 17, 2017 · ef1c2c8 · ef1c2c8
1 parent df0ccd6
commit ef1c2c8
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 45 deletions.
diff --git a/client/components/layout/c-nav.comp.js b/client/components/layout/c-nav.comp.js
@@ -1,4 +1,7 @@
 "use strict";
+
+import {RouterHandler} from '../../router/router-handler';
+
 export class CNavComponent extends HTMLElement {
     constructor() {
         super();
@@ -22,7 +25,7 @@ export class CNavComponent extends HTMLElement {
                 <ul class="nav navbar-nav pull-xs-right">
                     <li class="nav-item">
                         <!-- Add "active" class when you're on that page" -->
-                        <a class="nav-link active" href="">Home</a>
+                        <a style="cursor: pointer;" route="/" class="nav-link active">Home</a>
                     </li>
                     <!--<li class="nav-item">-->
                         <!--<a class="nav-link" href="">-->
@@ -35,10 +38,10 @@ export class CNavComponent extends HTMLElement {
                         <!--</a>-->
                     <!--</li>-->
                     <li class="nav-item">
-                        <a class="nav-link" href="">Sign in</a>
+                        <a style="cursor: pointer;" route="/login" class="nav-link">Sign in</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="">Sign up</a>
+                        <a style="cursor: pointer;" class="nav-link">Sign up</a>
                     </li>
                 </ul>
             </div>
@@ -47,6 +50,33 @@ export class CNavComponent extends HTMLElement {
 
 
         this.innerHTML = template;
+        let links = this.querySelectorAll('a.nav-link');
+        links.forEach(link => {
+           link.addEventListener('click', () => {
+               var routingTo = link.getAttribute('route');
+               let state = {};
+               state.route = routingTo;
+               history.pushState(state, null, routingTo);
+           });
+        });
+
+        this.updateActive(location.pathname);
+
+        RouterHandler.onChange((routeTo) => {
+            this.updateActive(routeTo);
+        });
+
+    }
+
+    updateActive(route) {
+        let links = this.querySelectorAll('a.nav-link');
+        links.forEach(link => {
+            link.className = 'nav-link';
+            let linkRoute = link.getAttribute('route');
+            if (linkRoute === route) {
+                link.className = 'nav-link active';
+            }
+        });
     }
 
 

diff --git a/client/index.html b/client/index.html
@@ -13,13 +13,7 @@
 <body>
 <c-nav></c-nav>
 <div class="home-page">
-
-    <c-banner></c-banner>
-
-    <div class="container page">
-        <router-outlet></router-outlet>
-    </div>
-
+    <router-outlet></router-outlet>
 </div>
 <c-footer></c-footer>
 </body>

diff --git a/client/index.js b/client/index.js
@@ -1,16 +1,23 @@
 import {layoutComponents} from "./components/layout/index";
 import {ArticleComponent} from "./components/article.comp";
 import {HomeComponent} from "./pages/home.comp";
+import {CLoginComponent} from "./pages/login.comp";
 import {RouterOutlet} from "./router/router-outlet";
 import {ComponentRegistry} from "./component-registry";
 import {RouterHandler} from "./router/router-handler";
 
 
 class App {
     constructor() {
+        this.registerComponents();
+
         const url = location.pathname;
-        const routerHandler = new RouterHandler();
-        console.log(url);
+        RouterHandler.navigate(url);
+
+        // console.log(globalFeed);
+    }
+
+    registerComponents() {
         const components = [
             ...layoutComponents,
             {
@@ -24,21 +31,13 @@ class App {
             {
                 tagName: 'c-home',
                 component: HomeComponent
+            },
+            {
+                tagName: 'c-login',
+                component: CLoginComponent
             }
         ];
         ComponentRegistry.register(components);
-
-        let n = new HomeComponent();
-        const outlet = document.querySelector('router-outlet');
-        while (outlet.firstChild) {
-            outlet.removeChild(outlet.firstChild);
-        }
-        outlet.appendChild(n);
-
-
-
-
-        // console.log(globalFeed);
     }
 
 }

diff --git a/client/pages/home.comp.html b/client/pages/home.comp.html
@@ -1,25 +1,30 @@
-<div class="row">
-    <div class="col-md-9">
-        <div class="feed-toggle">
-            <ul id="feedOptions" class="nav nav-pills outline-active">
-                <!--<li class="nav-item">-->
-                    <!--<a class="nav-link disabled" href="">Your Feed</a>-->
-                <!--</li>-->
-                <li class="nav-item">
-                    <a class="nav-link active" href="">Global Feed</a>
-                </li>
-            </ul>
-        </div>
-        <div id="globalFeed">
-        </div>
-    </div>
+<div>
+    <c-banner></c-banner>
+    <div class="container page">
+        <div class="row">
+            <div class="col-md-9">
+                <div class="feed-toggle">
+                    <ul id="feedOptions" class="nav nav-pills outline-active">
+                        <!--<li class="nav-item">-->
+                        <!--<a class="nav-link disabled" href="">Your Feed</a>-->
+                        <!--</li>-->
+                        <li class="nav-item">
+                            <a class="nav-link active" href="">Global Feed</a>
+                        </li>
+                    </ul>
+                </div>
+                <div id="globalFeed">
+                </div>
+            </div>
 
-    <div class="col-md-3">
-        <div class="sidebar">
-            <p>Popular Tags</p>
-            <div id="tagList" class="tag-list">
+            <div class="col-md-3">
+                <div class="sidebar">
+                    <p>Popular Tags</p>
+                    <div id="tagList" class="tag-list">
+                    </div>
+                </div>
             </div>
+
         </div>
     </div>
-
 </div>
diff --git a/client/pages/home.comp.js b/client/pages/home.comp.js
@@ -106,8 +106,8 @@ export class HomeComponent extends HTMLElement {
     createNewTagElement(tag) {
         const tagEl = document.createElement('a');
         tagEl.className = 'tag-pill tag-default';
-        tagEl.href = '#';
         tagEl.innerHTML = tag;
+        tagEl.style="cursor: pointer;";
         return tagEl;
     }
 

diff --git a/client/pages/login.comp.js b/client/pages/login.comp.js
@@ -0,0 +1,56 @@
+"use strict";
+export class CLoginComponent extends HTMLElement {
+    constructor() {
+        super();
+        // this.shadow = this.createShadowRoot();
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+
+    }
+
+    connectedCallback() {
+        var template = `
+             <div class="auth-page">
+  <div class="container page">
+    <div class="row">
+
+      <div class="col-md-6 offset-md-3 col-xs-12">
+        <h1 class="text-xs-center">Sign up</h1>
+        <p class="text-xs-center">
+          <a href="">Have an account?</a>
+        </p>
+
+        <!--<ul class="error-messages">-->
+          <!--<li>That email is already taken</li>-->
+        <!--</ul>-->
+
+        <form>
+          <fieldset class="form-group">
+            <input class="form-control form-control-lg" type="text" placeholder="Your Name">
+          </fieldset>
+          <fieldset class="form-group">
+            <input class="form-control form-control-lg" type="text" placeholder="Email">
+          </fieldset>
+          <fieldset class="form-group">
+            <input class="form-control form-control-lg" type="password" placeholder="Password">
+          </fieldset>
+          <button class="btn btn-lg btn-primary pull-xs-right">
+            Sign up
+          </button>
+        </form>
+      </div>
+
+    </div>
+  </div>
+</div>
+        `;
+        this.innerHTML = template;
+    }
+
+
+}
diff --git a/client/router/router-handler.js b/client/router/router-handler.js
@@ -1,3 +1,64 @@
+import {HomeComponent} from "../pages/home.comp";
+import {CLoginComponent} from "../pages/login.comp";
 export class RouterHandler {
+    constructor() {
+        var pushState = history.pushState;
+        history.pushState = function (state, a, b) {
+            if (typeof history.onpushstate == "function") {
+                history.onpushstate({state: state}, a, b);
+            }
+            return pushState.apply(history, arguments);
+        };
 
+        window.onpopstate = history.onpushstate = (state, a, url) => {
+            let routeTo = null;
+            if (state.state != null && state.state.route != undefined) {
+                routeTo = state.state.route;
+            } else if(url != undefined) {
+                routeTo = url;
+            }
+            RouterHandler.handleButtonChanges(routeTo);
+            RouterHandler._onChangeCallbacks.forEach(c => {
+                c(routeTo);
+            });
+            // }
+        };
+    }
+
+    static onChange(callback) {
+        RouterHandler._onChangeCallbacks.push(callback);
+    }
+
+    static handleButtonChanges(url) {
+        let page = null;
+
+        if (url == undefined || url == '/') {
+            page = new HomeComponent();
+        } else {
+            page = new CLoginComponent();
+        }
+        const outlet = document.querySelector('router-outlet');
+        while (outlet.firstChild) {
+            outlet.removeChild(outlet.firstChild);
+        }
+        outlet.appendChild(page);
+    }
+
+    static navigate(url) {
+        let page = null;
+
+        if (url == '/') {
+            page = new HomeComponent();
+        } else {
+            page = new CLoginComponent();
+        }
+        const outlet = document.querySelector('router-outlet');
+        while (outlet.firstChild) {
+            outlet.removeChild(outlet.firstChild);
+        }
+        // history.pushState({}, null, url);
+        outlet.appendChild(page);
+    }
 }
+RouterHandler._onChangeCallbacks = [];
+new RouterHandler();