changed parts name

assets/modules/tree.js

@@ -9,188 +9,225 @@ var _dbs = require('./dbs');
 var _Header = require('./header');
 var _Footer = require('./footer');
 
-//     __    _       __
-//    / /   (_)___  / /__
-//   / /   / / __ \/ //_/
-//  / /___/ / / / / ,<
-// /_____/_/_/ /_/_/|_|
-var _Link = {
-  tid:"",
-  opened:false,
-  oninit: function(vn){
-    // console.log("INIT LINK : vn", vn);
-    // define target id
-    this.tid = vn.attrs.href;
-  },
-  onbeforeupdate: function(vn){
-    this.tid = vn.attrs.href;
-  },
-  view: function(vn){
-    this.tid_known = typeof _dbs.data_byid[_dbs.lang][this.tid] === 'undefined' ? false : true;
-    if (!this.tid_known) {
-      console.log('!! target id '+this.tid+' unkonwn !!');
-    }
-    if(this.opened && this.tid_known){
-      // console.log('this.tid', vn.state);
-      return m('div', {'class':'opened-link'},
-          [
-            m('span', {'class':"link text"}, vn.children),
-            typeof _dbs.data_byid[_dbs.lang][this.tid].childs != "undefined"
-              ? m(_Enonce, _dbs.data_byid[_dbs.lang][this.tid])
-              : m(_Item, _dbs.data_byid[_dbs.lang][this.tid])
-          ]
-        );
-    }else{
-      // console.log(vn);
-      return m('a', {
-          'class':'link',
-          'href':'#'+this.tid,
-          'rel':this.tid,
-          onclick:function(e){
-            e.preventDefault();
-            console.log('click', this);
-            vn.state.opened = true;
-            return false;
-          }
-        }, vn.children); // c'est quoi ce vn.children ?
-    }
+// var _lang = require('../main.js')._langs;
 
-  }
-}
-
-//   ______          __
-//  /_  __/__  _  __/ /_
-//   / / / _ \| |/_/ __/
-//  / / /  __/>  </ /_
-// /_/  \___/_/|_|\__/
-
-// recusive function to record information of all subnodes
-function parseTextDom(nodes){
-  var list = [];
-  // loop through childNodes
-  for (var i = 0; i < nodes.length; i++) {
-    var n = {};
-    if(typeof nodes[i].localName != "undefined"){
-      n.tag=nodes[i].localName;
-      if (n.tag == 'p') {
-        // replace p by div as we will insert other div in them
-        n.tag = 'div';
-        n.attrs = {'class':'paragraph'};
-      }
-      if (n.tag == 'a') {
-        // record the href attribute for cross reference
-        n.attrs = {'href':nodes[i].attributes.href.value};
-      }
-      if(nodes[i].childNodes.length){
-        // again parse node's childs
-        n.childs = parseTextDom(nodes[i].childNodes);
-      }
-    }else if (nodes[i].textContent.length > 1){
-      // if node has no localName it is probably a #text node
-      // we record it if it's not empty
-      n.tag='#text';
-      n.text=nodes[i].textContent;
-    }
-    // add the node to the list if it has a tag
-    if(typeof n.tag != "undefined")
-      list.push(n);
-  }
-  return list;
-}
-
-// recusive fucntion to generate mithril object from information recorded with parseTextDom()
-function populateTextDom(n,i){
-  // console.log('populateTextDom : '+i,n);
-  return n.tag == "#text"
-    ? m.trust(n.text)
-    : m(
-        n.tag != 'a' ? n.tag : _Link,
-        typeof n.attrs != "undefined" ? n.attrs : {},
-        typeof n.childs != "undefined"
-          ? n.childs.map(populateTextDom)
-          : typeof n.text != "undefined"
-            ? m.trust(n.text)
-            : null
-      );
-}
-
-var _Text = {
+//     ____        __
+//    / __ \____  / /_
+//   / / / / __ \/ __/
+//  / /_/ / /_/ / /_
+// /_____/\____/\__/
+var _Dot = {
   id:null,
-  text:"",
-  texthtml:"",
-  textdom:null,
-  textchilds:[],
-  parsetext: function(){
-    // console.log('parsetext', this);
-    // !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
-    // convert markdown to html
-    this.texthtml = markdown.render(this.text)
-    // TODO: fixe number link text disapear [3](1d3) ( in 104d )
-    // TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_  ( in 104d )
-    // parse html string to virtual dom
-    this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
-    // get the text nodes (avoid html document extra)
-    this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
+  type:'',
+  text:'',
+  summary:'',
+  active:true,
+  opened:false,
+  links:null,
+  parents:[],
+  lang:_dbs.lang,
+  setuptext:function(vn){
+    // console.log('setuptext', vn);
+
+    // construct text
+    this.text = markdown.render(vn.attrs.text);
+
+    // construct summary
+    // TODO: summary needs more work (strip tags, markdown render)
+    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) + "&nbsp;…";
+
   },
   oninit: function(vn){
     this.id = vn.attrs.id;
-    this.text = vn.attrs.text;
-    this.parsetext();
+    this.type = vn.attrs.type;
+
+    this.setuptext(vn);
+
+    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,old){
-    this.text = vn.attrs.text;
-    this.parsetext();
+  oncreate: function(vn){
+    if(this.active){
+      vn.dom.classList.remove('disabled');
+    }else{
+      vn.dom.classList.add('disabled');
+    }
+  },
+  onbeforeupdate: function(vn){
+    // console.log('onbeforeupdate');
+    if(this.lang != _dbs.lang){
+      this.lang = _dbs.lang;
+      this.setuptext(vn);
+    }
   },
   view: function(vn){
-    // console.log('_Text :: view : '+vn.attrs.slug, vn);
-    return m('div',
-      {'class':'text'},
-      // loop through childNodes list generated by parseTextDom() in init
-      this.textchilds.map(populateTextDom)
-    ); // /m.div.text
-  } // view:
+    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('nav', {'class':'links to'}, this.links.to.map(function(id){
+              // console.log(id);
+              if(typeof _dbs.data_byid[_dbs.lang][id] !== 'undefined'){
+                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('&#9899;')),
+        // full text
+        m('section', {
+          'class':'text',
+          onmouseover: function(e){
+            e.preventDefault();
+            if(e.target.nodeName == "A" ){
+              // console.log("over e.target", e.target);
+              // console.log('over vn', vn);
+              var id = e.target.getAttribute("href");
+              // add highlight class
+              vn.dom.querySelector('nav.links>div[uid="'+id+'"]').classList.add('highlight');
+            }else{
+              // remove all hilight class
+              for (link of vn.dom.querySelectorAll('nav.links>div.dot')) {
+                link.classList.remove('highlight');
+              }
+            }
+          },
+          onclick:function(e){
+            e.preventDefault();
+            if(e.target.nodeName == "A" ){
+              // console.log("over e.target", e.target);
+              // console.log('over vn', vn);
+              var id = e.target.getAttribute("href");
+              // add highlight class
+              vn.dom.querySelector('nav.links>div[uid="'+id+'"]>.summary').click();
+            }
+          }
+        }, m.trust(this.text)),
+        // links from
+        this.links.from.length
+          ? m('nav', {'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('&#8226;')),
+          m('p', {
+            'class':'summary',
+            onclick:function(e){
+              // TODO: animate openening (text and links separatly)
+              vn.state.opened = true;
+            }
+          }, m.trust(this.summary))
+      ];
+    }
+
+    return m('div',{
+        'uid':this.id,
+        'class':'dot'
+      },
+      dot_content
+    );
+  },
+  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');
+        if(this.links.from.length)
+          vn.dom.classList.add('from-links');
+      }else{
+        vn.dom.classList.remove('opened');
+      }
+    }
+  }
 }
 
-//     ______
-//    /  _/ /____  ____ ___
-//    / // __/ _ \/ __ `__ \
-//  _/ // /_/  __/ / / / / /
-// /___/\__/\___/_/ /_/ /_/
-var _Item = {
+/*
+
+down vote
+Here's full list of black dotlikes from unicode
+
+● - &#9679; - Black Circle
+⏺ - &#9210; - Black Circle for Record
+⚫ - &#9899; - Medium Black Circle
+⬤ - &#11044; - Black Large Circle
+⧭ - &#10733; - Black Circle with Down Arrow
+🞄 - &#128900; - Black Slightly Small Circle
+• - &#8226; - Bullet
+∙ - &#8729; - Bullet Operator
+⋅ - &#8901; - Dot Operator
+🌑 - &#127761; - New Moon Symbol
+*/
+
+
+//   _______   _ __   __
+//  / ___/ /  (_) /__/ /
+// / /__/ _ \/ / / _  /
+// \___/_//_/_/_/\_,_/
+var _Child = {
   id:null,
   part:null,
   type:null,
-  nested:false,
+  // nested:false,
+  text:'',
   oninit: function(vn){
     // console.log('vn.attrs', vn.attrs);
     this.id = vn.attrs.id;
     this.type = vn.attrs.type;
     // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
     this.text = vn.attrs.text;
-    this.nested = vn.attrs.nested || false;
+    // this.nested = vn.attrs.nested || false;
   },
   onbeforeupdate: function(vn, old){
-    this.nested = vn.attrs.nested || false;
+    // this.nested = vn.attrs.nested || false;
     this.type = vn.attrs.type;
     this.text = vn.attrs.text;
   },
   view: function(vn){
-    return m("section", {
-        'id':this.id,
-        'class':'item'+(this.nested ? ' nested':'')
-      },
-      [
-        // create title node
-        m("h3", {
-            // 'ref':vn.attrs.href,
-            onclick: function(e){
-              vn.state.active = vn.state.active ? 0 : 1;
-            }
-          }, this.type),
-        // create text node
-        m(_Text, {'text':this.text, 'id':this.id})
-      ]
-    )
+    return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type});
   }
 };
 
@@ -204,7 +241,7 @@ var _Enonce = {
   id:null,
   title:null,
   text:null,
-  nested:false,
+  // nested:false,
   childs:[],
   oninit:function(vn){
   //   // console.log('Enonce on init', vn);
@@ -213,35 +250,30 @@ var _Enonce = {
     this.title = vn.attrs.title;
     this.text = vn.attrs.text;
     this.childs = vn.attrs.childs;
-    this.nested = vn.attrs.nested || false;
+    // this.nested = vn.attrs.nested || false;
   },
   onbeforeupdate:function(vn, old) {
     // console.log(vn.attrs.childs);
     this.title = vn.attrs.title;
     this.text = vn.attrs.text;
     this.childs = vn.attrs.childs;
-    this.nested = vn.attrs.nested || false;
+    // this.nested = vn.attrs.nested || false;
     // if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
   },
   view: function(vn){
     // if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
-    return m("section", {
-      'id'    :this.id,
-      'class' :'enonce'+(this.nested ? ' nested':'')
-    },
-    [
-      // create title node
-      m("h2", {}, this.title),
-      // create text node
-      m(_Text, {'text':this.text, 'id':this.id}),
+    return [
+      // create dot
+      m(_Dot, {"id":this.id, 'text':this.text,'type':this.title}),
       // addd children
       this.childs.map(function(c){
-        return m(_Item, c)
+        return m(_Child, c);
       })
-    ])
+    ]
   }
 }
 
+
 //     ____             __
 //    / __ \____ ______/ /_
 //   / /_/ / __ `/ ___/ __/
@@ -277,22 +309,34 @@ var _Part = {
   }
 }
 
-//   ______
-//  /_  __/_______  ___
-//   / / / ___/ _ \/ _ \
-//  / / / /  /  __/  __/
-// /_/ /_/   \___/\___/
+
+//     ____        __
+//    / __ \____  / /______
+//   / / / / __ \/ __/ ___/
+//  / /_/ / /_/ / /_(__  )
+// /_____/\____/\__/____/
 module.exports = {
   view: function(){
-    console.log('_Tree view', _dbs.lang);
+    // console.log('_Tree view', _dbs.lang);
     return [
       m(_Header),
       m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
-          // console.log("MAP _dbs", p);
           return m(_Part,p);
         })
       ),
       m(_Footer)
-    ]
+    ];
   }
 }
+
+
+// function(){
+//   switch(_dbs.lang){
+//     case 'fr':
+//       return "Hello dots !";
+//       break;
+//     case 'bra':
+//       return '"Hola dots !"'
+//       break;
+//   }
+// }