@ -1,29 +1,20 @@
<app>
<ul class="navigate tab tab-block">
<li class={"navigate-tab tab-item " + (this.active.posts ? "active" : "")}>
<a
class={"navigate-item " + (this.active.posts ? "tab-active" : "")}
onclick={to(`posts/${this.state.pid}`)}
href="#"
>
Posts
</a>
</li>
<li class={"navigate-tab tab-item animated fadeIn " + (this.active.projects ? "active" : "")}>
<a
class={"navigate-item " + (this.active.projects ? "tab-active" : "")}
onclick={to("projects")}
href="#"
>
Projects
</a>
<li
each="{page in ['posts', 'projects', 'links', 'about']}"
class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
data-is="navtab"
active={this.parent.active.get(page)}
to={this.parent.to(page)}
title={page}
>
</li>
</ul>
<div class="projects-content">
<loading if={!this.state.loaded}></loading>
<projectsview
class="animated fadeInDown"
if={this.active.projects && this.state.loaded}
if={this.active.get("projects") && this.state.loaded}
state={this.state}
ref="projectsview"
>
@ -32,18 +23,33 @@
<div class="content">
<postsview
state={this.state}
if={this.active.posts}
if={this.active.get(" posts") }
ref="postsview"
>
</postsview>
<about
if={this.active.get("about")}
>
</about>
<links
if={this.active.get("links")}
>
</links>
</div>
<script>
import './navtab.tag';
import './projectsview.tag';
import './postsview.tag';
import './about.tag';
import './links.tag';
import './loading.tag';
import Z from './zipper.js';
import Z from './zipper.js';
import {default as R} from 'ramda';
import route from 'riot-route';
import lens from './lenses.js';
this.R = R;
this.route = route;
this.riot = riot;
@ -53,23 +59,31 @@ this.state = {
"loaded" : false
};
this.active = {
this.active = lens.actives( {
"projects" : false,
"posts" : false
};
"posts" : false,
"links" : false,
"about" : false
});
var self = this;
function projects() {
self.active.projects = true;
self.active.posts = false;
self.update();
function activate(page) {
return function() {
console.log(`activating ${page}`);
self.active = lens.setActive(self.active, page);
self.update();
};
}
var projects = activate("projects");
var about = activate("about");
var links = activate("links");
function posts(pid) {
self.active.posts = true;
console.log(self.state) ;
self.state.pid = parseInt(pid, 10);
self.active.projects = false;
activate("posts")() ;
self.update();
}
@ -84,24 +98,24 @@ to(name) {
}).bind(this);
}
this.route("posts", self.to(`posts/${self.state.pid}`));
this.route("posts/*", posts);
this.route("/", self.to("posts" ));
this.route("posts", (() => {posts(self.state.pid)} ));
this.route("projects", projects);
this.route("about", about);
this.route("links", links);
this.on("mount", () => {
route.start(true);
});
function notFork(p) {
return !p.fork;
}
function loaduser() {
/* https://api.github.com/users/${self.username}/repos?sort=updated&direction=desc */
axios.get(`/blog/projects`)
.then(function(resp) {
self.state.projects = Z.fromList(resp.data.filter(notFork));
self.state.projects = Z.fromList(
resp.data.filter(
R.pathEq(["fork"], false)));
self.state.loaded = true;
self.update();
});
