dots navigation is functional

assets/dist/main.css

@@ -753,15 +753,17 @@ html, body {
 header {
   position: fixed;
   width: 100%;
+  height: 3em;
   top: 0;
-  z-index: 5; }
+  z-index: 5;
+  background-color: white; }
   header > * {
     display: inline-block;
     vertical-align: bottom; }
-    header > *:first-child {
-      margin-left: 1em; }
     header > *:last-child {
       margin-right: 1em; }
+  header > h1 {
+    margin: 0 0 0 50px; }
 
 nav#menus {
   float: right; }
@@ -780,15 +782,11 @@ nav#menus {
         color: inherit; }
 
 main#content {
-  margin: 3em auto;
-  width: 450px; }
-  main#content > * {
-    width: 450px; }
+  margin-top: 3em; }
 
 h1.part {
   font-size: 1.6em;
-  width: 450px;
-  margin: 1em 0; }
+  width: 450px; }
 
 section.enonce {
   width: 450px;
@@ -824,36 +822,84 @@ section.enonce {
         padding-left: 2em;
         border-left: 1px solid #999; }
 
+h1.part {
+  margin: 0 0 0 50px; }
+
 .dot {
-  cursor: pointer;
   position: relative;
-  transform: translate3d(0, 0, 0);
-  transition: transform 0.2s ease-in-out; }
-  .dot span.id {
+  border: 1px solid white;
+  width: 500px; }
+  .dot > span.id {
     display: inline-block;
-    position: absolute;
-    left: -3.5em;
+    width: 50px;
+    text-align: right;
     opacity: 0;
-    transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out; }
-  .dot p.summary {
+    transition: opacity 0.4s ease-in-out; }
+  .dot > span.bullet {
     display: inline-block;
-    margin: 0 0 0 1em;
+    width: 40px;
+    text-align: center;
+    vertical-align: top;
+    font-size: 15px;
+    font-kerning: none; }
+  .dot > p.summary {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
     opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+    width: 405px; }
+  .dot:not(.disabled) > p.summary {
+    cursor: pointer; }
+  .dot.disabled > p.summary {
+    cursor: default; }
+  .dot > section.text {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    width: 405px; }
+    .dot > section.text p {
+      margin: 0; }
+      .dot > section.text p:not(:last-child) {
+        margin-bottom: 1em; }
+  .dot.to-links > section.text {
+    border-top: 1px solid #e2e2e2; }
+  .dot.from-links > section.text {
+    border-bottom: 1px solid #e2e2e2; }
+  .dot > aside.links {
+    position: relative;
+    left: 100px;
+    box-sizing: border-box; }
+    .dot > aside.links.to {
+      bottom: 100%;
+      margin-top: 30px;
+      padding-bottom: 10px; }
+    .dot > aside.links.from {
+      top: 100%;
+      padding-top: 10px;
+      margin-bottom: 30px; }
+    .dot > aside.links:before {
+      content: "";
+      border-left: 1px solid #e2e2e2;
+      position: absolute;
+      top: 0;
+      left: 70px;
+      height: 100%;
+      width: 1px;
+      z-index: -1; }
+  .dot:hover > p.summary, .dot.opened > p.summary {
+    opacity: 1;
+    transition: opacity 0.4s ease-in-out; }
+  .dot:hover > span.id, .dot.opened > span.id {
+    opacity: 1;
     transition: opacity 0.4s ease-in-out; }
-  .dot:hover, .dot.opened {
-    transform: translate3d(0.5em, 0, 0);
-    transition: transform 0.1s ease-in-out; }
-    .dot:hover p.summary, .dot.opened p.summary {
-      opacity: 1;
-      transition: opacity 0.4s ease-in-out; }
-    .dot:hover span.id, .dot.opened span.id {
-      opacity: 1;
-      transform: translate3d(-0.5em, 0, 0);
-      transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out; }
+  .dot.disabled > * {
+    color: grey; }
 
 footer {
   position: fixed;
-  bottom: 0; }
+  bottom: 0;
+  background-color: white; }
   footer > * {
     margin-left: 1em; }
 

assets/main.js

@@ -26,6 +26,7 @@ function init(){
   _dbs.load(function(){
     console.log("Init _dbs.data", _dbs.data);
     console.log("Init _dbs.data_byid", _dbs.data_byid);
+    console.log("Init _dbs.data_strct", _dbs.data_strct);
     m.route(document.body, "/tree", {
       "/tree": _Tree,
       "/dots": _Dots,

assets/main.scss

@@ -21,15 +21,25 @@ html, body{
   padding:0;
 }
 
+$header_height:3em;
+$dot_w:500px;
+$margin_left:50px;
+$bullet_w:40px;
+
 header{
   position: fixed;
-  width:100%; top:0; z-index: 5;
+  width:100%; height:$header_height;
+  top:0; z-index: 5;
+  background-color: white;
   >*{
     display: inline-block;
     vertical-align: bottom;
-    &:first-child{ margin-left: 1em;}
+    // &:first-child{ margin-left: 1em;}
     &:last-child{ margin-right: 1em;}
   }
+  >h1{
+    margin: 0 0 0 $margin_left;
+  }
 }
 
 nav#menus{
@@ -70,17 +80,18 @@ nav#menus{
 // }
 
 main#content{
-  margin: 3em auto;
-  width: 450px;
-  &>*{
-    width: 450px;
-  }
+  margin-top: $header_height;
+  // margin: 5em;
+  // width: 450px;
+  // &>*{
+  //   width: 450px;
+  // }
 }
 
 h1.part{
   font-size: 1.6em;
   width:450px;
-  margin: 1em 0;
+  // margin: 1em 0;
 }
 
 //   ______
@@ -144,40 +155,110 @@ section.enonce{
 //   / / / / __ \/ __/ ___/
 //  / /_/ / /_/ / /_(__  )
 // /_____/\____/\__/____/
+
+h1.part{
+  margin:0 0 0 $margin_left;
+}
+
 .dot{
-  cursor: pointer;
+
   position: relative;
-  transform: translate3d(0,0,0);
-  transition: transform 0.2s ease-in-out;
-  span.id{
+  // overflow-x: visible;
+  // overflow-y: auto;
+  border: 1px solid white;
+  // transform: translate3d(0,0,0);
+  // transition: transform 0.2s ease-in-out;
+  width: $dot_w;
+  >span.id{
     display: inline-block;
-    position: absolute;
-    left:-3.5em;
+    // position: absolute;
+    // left:-3.5em;
+    width: $margin_left; text-align: right;
     opacity:0;
     // transform: translate3d(0, 0, 0);
-    transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
+    // transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
+    transition: opacity 0.4s ease-in-out;
   }
-  span.bullet{
+  >span.bullet{
+    display: inline-block;
+    width:$bullet_w; text-align: center;
+    vertical-align: top;
+    font-size: 15px;
+    font-kerning: none;
   }
-  p.summary{
+  >p.summary{
     display: inline-block;
-    margin: 0 0 0 1em;
+    vertical-align: top;
+    margin: 0;
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
+    width : $dot_w - $margin_left - $bullet_w -5px;
   }
+  &:not(.disabled) > p.summary{cursor: pointer;}
+  &.disabled > p.summary{cursor: default;}
+
+  >section.text{
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    width : $dot_w - $margin_left - $bullet_w -5px;
+    p{
+      margin:0;
+      &:not(:last-child){
+        margin-bottom:1em;
+      }
+    }
+  }
+  &.to-links > section.text{
+    border-top: 1px solid #e2e2e2;
+  }
+  &.from-links > section.text{
+    border-bottom: 1px solid #e2e2e2;
+  }
+
+  >aside.links{
+    position:relative;
+    left: $margin_left*2;
+    box-sizing: border-box;
+    &.to{
+      bottom:100%;
+      margin-top: 30px;
+      padding-bottom:10px;
+    }
+    &.from{
+      top:100%;
+      padding-top:10px;
+      margin-bottom: 30px;
+    }
+
+    &:before{
+      content: "";
+      border-left: 1px solid #e2e2e2;
+      position: absolute;
+      top:0; left:$margin_left + ($bullet_w/2);
+      height: 100%; width:1px;
+      z-index: -1;
+    }
+  }
+
   &:hover, &.opened{
-    transform: translate3d(0.5em, 0, 0);
-    transition: transform 0.1s ease-in-out;
-    p.summary{
+    // transform: translate3d(0.5em, 0, 0);
+    // transition: transform 0.1s ease-in-out;
+    >p.summary{
       opacity: 1;
       transition: opacity 0.4s ease-in-out;
     }
-    span.id{
+    >span.id{
       opacity: 1;
-      transform: translate3d(-0.5em, 0, 0);
-      transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
+      // transform: translate3d(-0.5em, 0, 0);
+      // transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
+      transition: opacity 0.4s ease-in-out;
     }
   }
+  &.disabled>*{
+    color:grey;
+  }
+
 
 }
 
@@ -185,5 +266,6 @@ section.enonce{
 footer{
   position: fixed;
   bottom: 0;
+  background-color: white;
   >*{margin-left: 1em;}
 }

assets/modules/dbs.js

@@ -89,20 +89,29 @@ module.exports = {
       // get links
       links_match = item.text.match(/\[[^\]]+\]\([^\)]+\)/g);
       // console.log(links_match);
+      // if links exist on text
       if(links_match){
         for(link of links_match){
           // console.log(link);
+          // get the target id
           tid = link.match(/\((.+)\)/)[1];
-          obj.to.push(tid);
+          // avoid duplicates
+          if (obj.to.indexOf(tid) == -1)
+            obj.to.push(tid);
+
           // add id to "from" links in target
+          // if target exists
           if(typeof this.data_strct[tid] !== 'undefined'){
-            this.data_strct[tid].from.push(id);
+            // avoid duplicates
+            if (this.data_strct[tid].from.indexOf(tid) == -1)
+              this.data_strct[tid].from.push(id);
           }else{
+            // if targets does not exists, the db has an issue, warn about that
             console.log('!! warning : '+tid+' target id does not exists');
           }
         }
       }
-      // console.log(this.links);
+      // add the item links to the main links listings
       this.data_strct[id] = obj;
     }
     // console.log('data_strct',this.data_strct);

assets/modules/dots.js

@@ -21,35 +21,123 @@ var _Dot = {
   type:'',
   text:'',
   summary:'',
+  active:true,
   opened:false,
-  classes:['dot'],
+  links:null,
+  parents:[],
   oninit: function(vn){
     this.id = vn.attrs.id;
     this.type = vn.attrs.type;
     this.text = markdown.render(vn.attrs.text);
+
+    // construct summary
     // TODO: summary needs more work (strip tags, markdown render)
-    this.summary = markdown.renderInline(vn.attrs.text.match('([^ ]*[ ]{0,1}){1,8}')[0]) + "…"
+    this.summary = vn.attrs.text.match('([^ ]*[ ]{0,1}){1,6}')[0];
+    this.summary = this.summary.trim().replace(/_([^_]+)$/g, "_$1_");
+    this.summary = this.summary.replace(/\[([^\]]+)$/g, "$1");
+    this.summary = markdown.renderInline(this.summary) + " …";
+
+    if(typeof vn.attrs.active !== 'undefined')
+      this.active = vn.attrs.active;
+
+    // links
+    this.links = _dbs.data_strct[this.id];
+    // console.log(this.links);
+
+    // parents memorize where do we come from to avoid duplicates and looping nav
+    if(vn.attrs.parents){
+      this.parents = this.parents.concat(vn.attrs.parents);
+      // console.log('_Dot init '+this.id+' parents :',this.parents);
+    }
+
   },
-  onbeforeupdate: function(vn){
-    if (this.opened){
-      this.classes.push('opened');
+  oncreate: function(vn){
+    if(this.active){
+      vn.dom.classList.remove('disabled');
     }else{
-      this.classes = ['dot'];
+      vn.dom.classList.add('disabled');
+    }
+  },
+  onbeforeupdate: function(vn){
+  },
+  onupdate: function(vn){
+    // console.log('_Dot : onupdate', vn);
+    if(this.active){
+      if (this.opened){
+        vn.dom.classList.add('opened');
+        if(this.links.to.length)
+          vn.dom.classList.add('to-links');
+      }else{
+        vn.dom.classList.remove('opened');
+        if(this.links.from.length)
+          vn.dom.classList.add('from-links');
+      }
     }
   },
   view: function(vn){
+    if (this.active && this.opened) {
+      // full view of dot with linked dots
+      console.log('_Dot view '+this.id+' parents :',this.parents);
+      var dot_content = [
+        // links to
+        this.links.to.length
+          ? m('aside', {'class':'links to'}, this.links.to.map(function(id){
+              // console.log(id);
+              return m(_Dot, {
+                "id":id,
+                'text':_dbs.data_byid[_dbs.lang][id].text,
+                'type':'',
+                // passe the memory of crossed dots plus the current one
+                'parents':vn.state.parents.concat([vn.state.id]),
+                // activate link only if not in parents (already went through it)
+                'active':vn.state.parents.indexOf(id) == -1 ? true:false
+              });
+            })
+          )
+          : null,
+        // id
+        m('span', {'class':'id'}, this.id), // this.type+' '+
+        // bullet
+        m('span', {'class':'bullet'}, m.trust('⚫')),
+        // full text
+        m('section', {'class':'text'}, m.trust(this.text)),
+        // links from
+        this.links.from.length
+          ? m('aside', {'class':'links from'}, this.links.from.map(function(id){
+              // retrun a dot
+              return m(_Dot, {
+                "id":id,
+                'text':_dbs.data_byid[_dbs.lang][id].text,
+                'type':'',
+                // passe the memory of crossed dots plus the current one
+                'parents':vn.state.parents.concat([vn.state.id]),
+                // activate link only if not in parents (already went through it)
+                'active':vn.state.parents.indexOf(id) == -1 ? true:false
+              });
+            })
+          )
+          : null
+      ];
+    }else{
+      // preview dot
+      var dot_content = [
+          m('span', {'class':'id'}, this.id), // this.type+' '+
+          m('span', {'class':'bullet'}, m.trust('•')),
+          m('p', {
+            'class':'summary',
+            onclick:function(e){
+              vn.state.opened = true;
+            }
+          }, m.trust(this.summary))
+      ];
+    }
+
     return m('div',{
         'id':this.id,
-        'class':this.classes.join(' '),
-        onclick:function(e){
-          vn.state.opened = true;
-        }
+        'class':'dot'
       },
-      [
-        m('span', {'class':'id'}, this.id), // this.type+' '+
-        m('span', {'class':'bullet'}, m.trust('⚫')),
-        m('p', {'class':'summary'}, m.trust(this.summary))
-    ]);
+      dot_content
+    );
   }
 }