added some fancy display and interactivity to dots

assets/modules/dots.js

@@ -1,11 +1,183 @@
 
 var m = require('mithril');
+
+// https://github.com/markdown-it/markdown-it
+var markdown =  require('markdown-it')()
+                  .use(require('markdown-it-footnote'));
+
 var _dbs = require('./dbs');
 var _Header = require('./header');
 var _Footer = require('./footer');
 
 // var _lang = require('../main.js')._langs;
 
+//     ____        __
+//    / __ \____  / /_
+//   / / / / __ \/ __/
+//  / /_/ / /_/ / /_
+// /_____/\____/\__/
+var _Dot = {
+  id:null,
+  type:'',
+  text:'',
+  summary:'',
+  opened:false,
+  classes:['dot'],
+  oninit: function(vn){
+    this.id = vn.attrs.id;
+    this.type = vn.attrs.type;
+    this.text = markdown.render(vn.attrs.text);
+    // TODO: summary needs more work (strip tags, markdown render)
+    this.summary = markdown.renderInline(vn.attrs.text.match('([^ ]*[ ]{0,1}){1,8}')[0]) + "…"
+  },
+  onbeforeupdate: function(vn){
+    if (this.opened){
+      this.classes.push('opened');
+    }else{
+      this.classes = ['dot'];
+    }
+  },
+  view: function(vn){
+    return m('div',{
+        'id':this.id,
+        'class':this.classes.join(' '),
+        onclick:function(e){
+          vn.state.opened = true;
+        }
+      },
+      [
+        m('span', {'class':'id'}, this.id), // this.type+' '+
+        m('span', {'class':'bullet'}, m.trust('⚫')),
+        m('p', {'class':'summary'}, m.trust(this.summary))
+    ]);
+  }
+}
+
+/*
+
+down vote
+Here's full list of black dotlikes from unicode
+
+● - ● - Black Circle
+⏺ - ⏺ - Black Circle for Record
+⚫ - ⚫ - Medium Black Circle
+⬤ - ⬤ - Black Large Circle
+⧭ - ⧭ - Black Circle with Down Arrow
+🞄 - 🞄 - Black Slightly Small Circle
+• - • - Bullet
+∙ - ∙ - Bullet Operator
+⋅ - ⋅ - Dot Operator
+🌑 - 🌑 - New Moon Symbol
+*/
+
+
+//   _______   _ __   __
+//  / ___/ /  (_) /__/ /
+// / /__/ _ \/ / / _  /
+// \___/_//_/_/_/\_,_/
+var _Child = {
+  id:null,
+  part:null,
+  type:null,
+  // 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;
+  },
+  onbeforeupdate: function(vn, old){
+    // this.nested = vn.attrs.nested || false;
+    this.type = vn.attrs.type;
+    this.text = vn.attrs.text;
+  },
+  view: function(vn){
+    return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type});
+  }
+};
+
+//     ______
+//    / ____/___  ____  ____  ________
+//   / __/ / __ \/ __ \/ __ \/ ___/ _ \
+//  / /___/ / / / /_/ / / / / /__/  __/
+// /_____/_/ /_/\____/_/ /_/\___/\___/
+var _Enonce = {
+  partid:null,
+  id:null,
+  title:null,
+  text:null,
+  // nested:false,
+  childs:[],
+  oninit:function(vn){
+  //   // console.log('Enonce on init', vn);
+    this.partid = vn.attrs.partid;
+    this.id = vn.attrs.id;
+    this.title = vn.attrs.title;
+    this.text = vn.attrs.text;
+    this.childs = vn.attrs.childs;
+    // 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;
+    // 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 [
+      // create dot
+      m(_Dot, {"id":this.id, 'text':this.text,'type':this.title}),
+      // addd children
+      this.childs.map(function(c){
+        return m(_Child, c);
+      })
+    ]
+  }
+}
+
+
+//     ____             __
+//    / __ \____ ______/ /_
+//   / /_/ / __ `/ ___/ __/
+//  / ____/ /_/ / /  / /_
+// /_/    \__,_/_/   \__/
+var _Part = {
+  oninit: function(vn){
+    this.id = vn.attrs.id;
+    this.title = vn.attrs.title;
+    this.enonces = vn.attrs.enonces;
+  },
+  onbeforeupdate: function(vn, old){
+    // console.log('_Part, onbeforeupdate old',old);
+    this.title = vn.attrs.title;
+    this.enonces = vn.attrs.enonces;
+  },
+  view: function(vn){
+    // console.log(vn.attrs.enonces);
+    return m("section", {
+        'id'    :this.id,
+        'class' :'part'
+      },
+      [
+        // create title node
+        m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
+        // create text node
+        this.enonces.map(function(e){
+          // console.log(e.text);
+          return m(_Enonce, Object.assign({"partid":this.id},e))
+        })
+      ]
+    )
+  }
+}
+
+
 //     ____        __
 //    / __ \____  / /______
 //   / / / / __ \/ __/ ___/
@@ -16,8 +188,23 @@ module.exports = {
     console.log('_Dots view', _dbs.lang);
     return [
       m(_Header),
-      m('main', {id:"content"}, "Hello dots !"),
+      m('main', {id:"content", 'class':'dots'}, _dbs.data[_dbs.lang].map(function(p){
+          return m(_Part,p);
+        })
+      ),
       m(_Footer)
     ];
   }
 }
+
+
+// function(){
+//   switch(_dbs.lang){
+//     case 'fr':
+//       return "Hello dots !";
+//       break;
+//     case 'bra':
+//       return '"Hola dots !"'
+//       break;
+//   }
+// }