dots navigation is functional

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);
+    }
+
+  },
+  oncreate: function(vn){
+    if(this.active){
+      vn.dom.classList.remove('disabled');
+    }else{
+      vn.dom.classList.add('disabled');
+    }
   },
   onbeforeupdate: function(vn){
-    if (this.opened){
-      this.classes.push('opened');
-    }else{
-      this.classes = ['dot'];
+  },
+  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
+    );
   }
 }