diff --git a/client/components/layout/c-nav.comp.js b/client/components/layout/c-nav.comp.js index 75244f0..4d0620e 100644 --- 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 { @@ -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 index 8737274..946f330 100644 --- a/client/index.html +++ b/client/index.html @@ -13,13 +13,7 @@
- - - -
- -
- +
diff --git a/client/index.js b/client/index.js index e43676d..bc90407 100644 --- a/client/index.js +++ b/client/index.js @@ -1,6 +1,7 @@ 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"; @@ -8,9 +9,15 @@ 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 index dc5950c..bfc2e09 100644 --- a/client/pages/home.comp.html +++ b/client/pages/home.comp.html @@ -1,25 +1,30 @@ -
-
-
- -
-
-
-
+
+ +
+
+
+
+ +
+
+
+
-
-
-

Popular Tags

-
+
+
+

Popular Tags

+
+
+
+
-
\ No newline at end of file diff --git a/client/pages/home.comp.js b/client/pages/home.comp.js index 7017b05..eda8756 100644 --- 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 new file mode 100644 index 0000000..8558c75 --- /dev/null +++ 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 = ` +
+
+
+ +
+

Sign up

+

+ Have an account? +

+ + + + + +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+
+ `; + this.innerHTML = template; + } + + +} diff --git a/client/router/router-handler.js b/client/router/router-handler.js index 925b165..3b0cee3 100644 --- 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(); \ No newline at end of file