navigation & source link

src/App.vue

@@ -1,13 +1,19 @@
 <template>
   <div id="app">
     <a href='#/'> <h1> D3.js vs Vue.js examples </h1> </a>
+    <h2>{{ $route.name }}</h2>
+    <topNav />
     <router-view></router-view>
   </div>
 </template>
 
 <script>
+
+import topNav from './components/demos-navigation'
+
 export default {
-  name: 'app'
+  name: 'app',
+  components: { topNav }
 }
 </script>
 

src/components/demos-navigation.vue

@@ -1,22 +1,96 @@
 <template>
   <div id="holder">
-    <div>
-      <a :href="prev.path"> < previous </a>
-      <!-- TODO: source code link  -->
-      <a :href="next.path"> next > </a>
+    <div class="links">
+      <a v-if="prev" :href="prev.href" class="prev"> < previous </a>
+      <a :href="sourceHref" class="source"> source </a>
+      <a v-if="next" :href="next.href" class="next"> next > </a>
     </div>
   </div>
 </template>
 
 <script>
 
+import { routes } from 'router/demos';
+const config = require('config.json');
+
 export default {
-  data () {
-    console.log(this.$route);
-    return {}
+  computed: {
+    prev: function() {
+      var index = this.findIndex();
+      if(index == -1) {
+        return undefined;
+      }
+      return index > 0 ? routes[index - 1] : undefined;
+    },
+    next: function() {
+      var index = this.findIndex();
+      if(index == -1) {
+        return undefined;
+      }
+      return index + 1 < routes.length ? routes[index + 1] : undefined;
+    },
+    sourceHref: function() {
+      var index = this.findIndex();
+      if(index == -1) {
+        return config.githubLink;
+      }
+      return routes[index].source;
+    }
+  },
+  methods: {
+    findIndex: function() {
+      var me = this.$route.path;
+      return routes.findIndex(r => r.path === me);
+    }
   }
 }
 </script>
 
-<style>
+<style scoped>
+
+#links {
+  display: block;
+  width: 300px;
+  height: 40px;
+  position: relative;
+}
+
+a {
+  display: block;
+  position: absolute;
+  width: 100px;
+  text-decoration: none;
+  font-weight: bold;
+  color: blue;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.prev {
+  left: 0px;
+}
+
+.source {
+  left:100px;
+  text-align: center;
+}
+
+.next {
+  right: 0px;
+  text-align: right;
+}
+
+#holder {
+  width: 300px;
+  margin: auto;
+  position: relative;
+  height: 30px;
+  /*border-top: 1px dashed gray;*/
+  border-bottom: 1px dashed gray;
+  padding-top: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
 </style>

src/components/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="hello">
     <ul>
-      <li v-for="item in itemz">
-        <a :href="item.path | hashed">{{ item.name  }}</a>
+      <li v-for="item in items">
+        <a :href="item.href">{{ item.name  }}</a>
       </li>
     </ul>
   </div>
@@ -10,23 +10,16 @@
 
 <script>
 import { routes } from 'router/demos'
+
 export default {
-  name: 'hello',
   data () {
     return {
-      itemz: routes
-    }
-  },
-  filters: {
-    hashed: function (value) {
-      if (!value) return ''
-      return '#' + value;
+      items: routes
     }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h1, h2 {
   font-weight: normal;

src/config.json

@@ -0,0 +1,3 @@
+{
+  "githubLink": "https://github.com/corpglory/d3vue/"
+}

src/d3-components/2-circle-render.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <svg width="500" height="300"></svg>
+  </div>
+</template>
+
+<script>
+const d3 = require('d3');
+export default {
+  data () {
+    console.log(this.$route);
+    return {}
+  }
+}
+</script>
+
+<style>
+</style>

src/main.js

@@ -1,13 +1,13 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './app'
+import app from './app'
 import router from './router'
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
-  template: '<App/>',
-  components: { App }
+  template: '<app/>',
+  components: { app }
 })

src/router/demos.js

@@ -1,8 +1,21 @@
+const config = require('config.json');
 
 export const routes = [
   {
     name: 'Circle mount',
     path: '/1-circle-mount',
     component: require('d3-components/1-circle-mount')
+  },
+  {
+    name: 'Circle render',
+    path: '/2-circle-mount',
+    component: require('d3-components/2-circle-render')
   }
-]
+].map(r => {
+  var res = r;
+  res.href = "#" + r.path;
+  res.source = config.githubLink +
+               'tree/master/src/d3-components' +
+               r.path + '.vue'
+  return res;
+})

src/router/index.js

@@ -9,7 +9,7 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'Index',
+      name: 'Menu',
       component: Index
     }, ... demoRoutes