Skip to content
This repository has been archived by the owner on Sep 27, 2022. It is now read-only.

Commit

Permalink
article preview routing etc
Browse files Browse the repository at this point in the history
  • Loading branch information
@criticalbh
criticalbh committed May 18, 2017
1 parent a7ed39d commit e07e2b2
Show file tree
Hide file tree
Showing 10 changed files with 440 additions and 109 deletions.
19 changes: 0 additions & 19 deletions client/components/article.comp.html
View file

This file was deleted.

86 changes: 56 additions & 30 deletions client/components/article.comp.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import {X_Component} from "./component.dec";
import {RouterHandler} from "../router/router-handler";
"use strict";
//
// const model = {
// author: 'admir'
// };

@X_Component({
templateUrl: 'components/article.comp.html',
model: {}
templateUrl: 'components/article.comp.html'
})
export class ArticleComponent extends HTMLElement {

Expand All @@ -17,50 +13,80 @@ export class ArticleComponent extends HTMLElement {
author: '',
heart: 0
};

this.parsedElem = null;
}

static get observedAttributes() {
return ["author"];
return [];
}

attributeChangedCallback(name, oldValue, newValue) {
console.log(name);
}

disconnectedCallback() {
console.log('disconnected');
const button = this.querySelector('#ion-heart');
button.removeEventListener('click', this.updateHearts.bind(this));
}

connectedCallback() {
while (this.firstChild) {
this.removeChild(this.firstChild);
}
ArticleComponent.template(this.model).then(e => {
this.appendChild(e());
var btn = this.querySelector('#ion-heart');
btn.addEventListener('click',() => {
this.updateHearts();
});
this.innerHTML = this.render();
const button = this.querySelector('#ion-heart');
button.addEventListener('click', this.updateHearts.bind(this));

const authorButton = this.querySelector('#author');
authorButton.addEventListener('click', (e) => {
e.preventDefault();
RouterHandler.getInstance.router.navigate(authorButton.getAttribute('href'));
});

const previewLink = document.getElementById('preview-link');
previewLink.addEventListener('click', (e) => {
e.preventDefault();
RouterHandler.getInstance.router.navigate(previewLink.getAttribute('href'));
});


}


updateHearts() {
var span = this.querySelector('#ion-heart > span');
this.model.favoritesCount = this.model.favoritesCount + 1;
span.innerHTML = this.model.favoritesCount;
}


renderComponent() {
while (this.firstChild) {
this.removeChild(this.firstChild);
}
ArticleComponent.template(this.model).then(e => {
this.appendChild(e());
});
}

test() {
alert('a');
render() {
return `
<div class="article-preview">
<div class="article-meta">
<a href="profile.html">
<img src="${this.model.author.image}"/>
</a>
<div class="info">
<a id="author" href="/profile/${this.model.author.username}" class="author">${this.model.author.username}</a>
<span class="date">${this.model.createdAt}</span>
</div>
<button id="ion-heart" class="btn btn-outline-primary btn-sm pull-xs-right">
<i class="ion-heart"></i> <span>${this.model.favoritesCount}</span>
</button>
</div>
<a id="preview-link" href="#/article/${this.model.slug}" class="preview-link">
<h1>${this.model.title}</h1>
<p>${this.model.description}</p>
<span>Read more...</span>
<ul class="tag-list">
<li class="tag-default tag-pill tag-outline">
well
</li>
<li class="tag-default tag-pill tag-outline">
well
</li>
</ul>
</a>
</div>
`;
}


}
36 changes: 18 additions & 18 deletions client/components/layout/c-nav.comp.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use strict";

import {RouterHandler} from '../../router/router-handler';
import {RouterHandler} from "../../router/router-handler";


export class CNavComponent extends HTMLElement {
constructor() {
Expand All @@ -21,11 +22,11 @@ export class CNavComponent extends HTMLElement {
var template = `
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">conduit</a>
<a class="navbar-brand" href="/" data-navigo >conduit</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<!-- Add "active" class when you're on that page" -->
<a style="cursor: pointer;" route="/" class="nav-link active">Home</a>
<a href="/" data-navigo class="nav-link">Home</a>
</li>
<!--<li class="nav-item">-->
<!--<a class="nav-link" href="">-->
Expand All @@ -38,41 +39,40 @@ export class CNavComponent extends HTMLElement {
<!--</a>-->
<!--</li>-->
<li class="nav-item">
<a style="cursor: pointer;" route="/login" class="nav-link">Sign in</a>
<a href="/login" data-navigo class="nav-link">Sign in</a>
</li>
<li class="nav-item">
<a style="cursor: pointer;" route="/register" class="nav-link">Sign up</a>
<a href="/register" data-navigo class="nav-link">Sign up</a>
</li>
</ul>
</div>
</nav>
`;


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);
});
link.addEventListener('click', (e) => {
e.preventDefault();
var routingTo = link.getAttribute('href');
RouterHandler.getInstance.router.navigate(routingTo);
this.updateActive(routingTo);
});
});

this.updateActive(location.pathname);

RouterHandler.onChange((routeTo) => {
this.updateActive(routeTo);
});
let curUrl = location.hash;
curUrl = curUrl.substring(1);
console.log(curUrl);
this.updateActive(curUrl);

}

updateActive(route) {
let links = this.querySelectorAll('a.nav-link');
links.forEach(link => {
link.className = 'nav-link';
let linkRoute = link.getAttribute('route');
let linkRoute = link.getAttribute('href');
if (linkRoute === route) {
link.className = 'nav-link active';
}
Expand Down
17 changes: 11 additions & 6 deletions client/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,13 @@ import {CRegisterComponent} from "./pages/register.comp";
import {RouterOutlet} from "./router/router-outlet";
import {ComponentRegistry} from "./component-registry";
import {RouterHandler} from "./router/router-handler";

import {ProfileComponent} from "./pages/profile.comp";
import {ArticlePreviewComponent} from "./pages/article-preview.comp";

class App {
constructor() {
this.registerComponents();

const url = location.pathname;
RouterHandler.navigate(url);

// console.log(globalFeed);
RouterHandler.getInstance.init();
}

registerComponents() {
Expand All @@ -40,6 +37,14 @@ class App {
{
tagName: 'c-register',
component: CRegisterComponent
},
{
tagName: 'c-profile',
component: ProfileComponent
},
{
tagName: 'article-preview',
component: ArticlePreviewComponent
}
];
ComponentRegistry.register(components);
Expand Down
Loading

0 comments on commit e07e2b2

Please sign in to comment.