added some fancy display and interactivity to dots

assets/dist/main.css

@@ -824,6 +824,33 @@ section.enonce {
         padding-left: 2em;
         border-left: 1px solid #999; }
 
+.dot {
+  cursor: pointer;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+  transition: transform 0.2s ease-in-out; }
+  .dot span.id {
+    display: inline-block;
+    position: absolute;
+    left: -3.5em;
+    opacity: 0;
+    transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out; }
+  .dot p.summary {
+    display: inline-block;
+    margin: 0 0 0 1em;
+    opacity: 0;
+    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; }
+
 footer {
   position: fixed;
   bottom: 0; }

assets/dist/main.js

@@ -2781,12 +2781,184 @@ init()
 
 
 var m = __webpack_require__(1);
+
+// https://github.com/markdown-it/markdown-it
+var markdown =  __webpack_require__(29)()
+                  .use(__webpack_require__(28));
+
 var _dbs = __webpack_require__(2);
 var _Header = __webpack_require__(8);
 var _Footer = __webpack_require__(7);
 
 // 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))
+        })
+      ]
+    )
+  }
+}
+
+
 //     ____        __
 //    / __ \____  / /______
 //   / / / / __ \/ __/ ___/
@@ -2797,13 +2969,28 @@ 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;
+//   }
+// }
+
+
 /***/ }),
 /* 20 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2811,6 +2998,7 @@ module.exports = {
 
 var m = __webpack_require__(1);
 
+// https://github.com/markdown-it/markdown-it
 var markdown =  __webpack_require__(29)()
                   .use(__webpack_require__(28));
 
@@ -3075,7 +3263,7 @@ var _Part = {
       },
       [
         // create title node
-        m("h1", {'class':'part'}, this.title),
+        m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
         // create text node
         this.enonces.map(function(e){
           // console.log(e.text);
@@ -3096,7 +3284,7 @@ module.exports = {
     console.log('_Tree view', _dbs.lang);
     return [
       m(_Header),
-      m('main', {id:"content"}, _dbs.data[_dbs.lang].map(function(p){
+      m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
           // console.log("MAP _dbs", p);
           return m(_Part,p);
         })

assets/main.scss

@@ -83,6 +83,11 @@ h1.part{
   margin: 1em 0;
 }
 
+//   ______
+//  /_  __/_______  ___
+//   / / / ___/ _ \/ _ \
+//  / / / /  /  __/  __/
+// /_/ /_/   \___/\___/
 section.enonce{
   width:450px;
   margin: 1em 0;
@@ -134,6 +139,49 @@ section.enonce{
   }
 }
 
+//     ____        __
+//    / __ \____  / /______
+//   / / / / __ \/ __/ ___/
+//  / /_/ / /_/ / /_(__  )
+// /_____/\____/\__/____/
+.dot{
+  cursor: pointer;
+  position: relative;
+  transform: translate3d(0,0,0);
+  transition: transform 0.2s ease-in-out;
+  span.id{
+    display: inline-block;
+    position: absolute;
+    left:-3.5em;
+    opacity:0;
+    // transform: translate3d(0, 0, 0);
+    transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
+  }
+  span.bullet{
+  }
+  p.summary{
+    display: inline-block;
+    margin: 0 0 0 1em;
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+  }
+  &:hover, &.opened{
+    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{
+      opacity: 1;
+      transform: translate3d(-0.5em, 0, 0);
+      transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
+    }
+  }
+
+}
+
+
 footer{
   position: fixed;
   bottom: 0;

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;
+//   }
+// }

assets/modules/tree.js

@@ -1,6 +1,7 @@
 
 var m = require('mithril');
 
+// https://github.com/markdown-it/markdown-it
 var markdown =  require('markdown-it')()
                   .use(require('markdown-it-footnote'));
 
@@ -265,7 +266,7 @@ var _Part = {
       },
       [
         // create title node
-        m("h1", {'class':'part'}, this.title),
+        m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
         // create text node
         this.enonces.map(function(e){
           // console.log(e.text);
@@ -286,7 +287,7 @@ module.exports = {
     console.log('_Tree view', _dbs.lang);
     return [
       m(_Header),
-      m('main', {id:"content"}, _dbs.data[_dbs.lang].map(function(p){
+      m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
           // console.log("MAP _dbs", p);
           return m(_Part,p);
         })