refactoring finished, added footnotes support

assets/dist/main.css

@@ -759,7 +759,12 @@ main#content {
   display: inline-block;
   text-align: left; }
 
-section.item {
+h1.part {
+  font-size: 1.6em;
+  width: 450px;
+  margin: 1em 0; }
+
+section.enonce {
   width: 450px;
   margin: 1em 0;
   overflow-x: visible;
@@ -767,24 +772,29 @@ section.item {
   font-size: 16px;
   font-kerning: auto;
   line-height: 1.4; }
-  section.item h1 {
+  section.enonce h2 {
-    font-size: 0.750em;
+    font-size: 1em;
     font-weight: 300;
     margin: 0;
     cursor: pointer; }
-  section.item div.text {
+  section.enonce h3 {
+    font-size: 0.9em;
+    font-weight: 300;
+    margin: 0;
+    cursor: pointer; }
+  section.enonce div.text {
     font-size: 1.3em; }
-    section.item div.text div.paragraph {
+    section.enonce div.text div.paragraph {
       margin-bottom: 1em; }
-      section.item div.text div.paragraph div.opened-link {
+      section.enonce div.text div.paragraph div.opened-link {
         display: inline; }
-      section.item div.text div.paragraph a.link, section.item div.text div.paragraph span.link.text {
+      section.enonce div.text div.paragraph a.link, section.enonce div.text div.paragraph span.link.text {
         font-weight: 600;
         text-decoration: none;
         color: inherit; }
-      section.item div.text div.paragraph span.link.text:after {
+      section.enonce div.text div.paragraph span.link.text:after {
         content: ':'; }
-      section.item div.text div.paragraph section.item {
+      section.enonce div.text div.paragraph section.enonce, section.enonce div.text div.paragraph section.item {
         padding-left: 2em;
         border-left: 1px solid #999; }
 

assets/main.js

@@ -13,22 +13,27 @@ require('./fonts/dejavu/dejavu.css');
 require('./fonts/opensans/opensans.css');
 
 var m = require('mithril');
+// var marked = require('marked');
+var markdown =  require('markdown-it')()
+                  .use(require('markdown-it-footnote'));
 
-console.log("Hello Ethica");
+// console.log("Hello Ethica");
 
-const db_fr = require('./jsondb/2-Appuhn-FR-ethicadb.json')
+var _db = require('./jsondb/2-Appuhn-FR-ethicadb.json')
+// console.log("_db", _db);
 
-console.log(db_fr);
+var _db_by_id = {};
-
+for (p in _db) {
-
+  for (e in _db[p]) {
-// console.log("DataItems", DataItems);
+    // console.log(_db[p][e]);
-
+    _db_by_id[_db[p][e].id] = _db[p][e];
-// var DataItemsBySlug = {};
+    for (c in _db[p][e]){
-// for (item in DataItems) {
+      // console.log(_db[p][e][c]);
-//   // console.log(item);
+      _db_by_id[_db[p][e][c].id] = _db[p][e][c];
-//   DataItemsBySlug[DataItems[item].slug] = DataItems[item];
+    }
-// }
+  }
-// console.log("DataItemsBySlug", DataItemsBySlug);
+}
+console.log('_db_by_id', _db_by_id);
 
 //     __    _       __
 //    / /   (_)___  / /__
@@ -36,31 +41,33 @@ console.log(db_fr);
 //  / /___/ / / / / ,<
 // /_____/_/_/ /_/_/|_|
 var _Link = {
-  targetslug:"",
+  targetid:"",
   opened:false,
   oninit: function(vn){
-    // console.log("vn.attrs", vn.attrs);
+    // console.log("INIT LINK : vn", vn);
-    vn.state.targetslug = vn.attrs.href.replace(/^.*\/(.+)$/, "$1").replace(/^(.+)\/$/, "$1");
+    // define target id
+    vn.state.tid = vn.attrs.href;
   },
   view: function(vn){
     if(vn.state.opened){
-      // return m('div', "Hello "+vn.state.targetslug);
+      // console.log('vn.state.tid', vn.state);
-      // console.log('vn.state.targetslug', vn.state);
       return m('div', {'class':'opened-link'},
           [
             m('span', {'class':"link text"}, vn.children),
-            m(_Item, DataItemsBySlug[vn.state.targetslug])
+            typeof _db_by_id[vn.state.tid].childs != "undefined"
+              ? m(_Enonce, _db_by_id[vn.state.tid])
+              : m(_Item, _db_by_id[vn.state.tid])
           ]
         );
-
-
     }else{
+      // console.log(vn);
       return m('a', {
           'class':'link',
-          'href':'#'+vn.state.targetslug,
+          'href':'#'+vn.state.tid,
-          'rel':vn.state.targetslug,
+          'rel':vn.state.tid,
           onclick:function(e){
             e.preventDefault();
+            console.log('click', vn);
             vn.state.opened = true;
             return false;
           }
@@ -75,78 +82,76 @@ var _Link = {
 //   / / / _ \| |/_/ __/
 //  / / /  __/>  </ /_
 // /_/  \___/_/|_|\__/
+
+// 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 = {
   textchilds:[],
   oninit: function(vn){
-    // initiaize text childNodes array
+    debug = vn.attrs.id == '1a5';
-    vn.state.textchilds = [];
+    // convert markdown to html
+    var texthtml = markdown.render(vn.attrs.text)
     // parse html string to virtual dom
-    // console.log('vn.attrs.text',vn.attrs.text);
+    var textdom = new DOMParser().parseFromString(texthtml, "text/html");
-    var textdom = new DOMParser().parseFromString(vn.attrs.text, "text/html");
     // get the text nodes (avoid html document extra)
-    var childs = textdom.getElementsByTagName('body')[0].childNodes;
+    if(debug) console.log('textdom',textdom);
-    // loop through childNodes
+    vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes);
-    for (var i = 0; i < childs.length; i++) {
-      // if not textnode, get only first level paragraphs
-      if(typeof childs[i].localName != "undefined" && childs[i].localName == "p"){
-        var p = {
-          tag:"p",
-          childs:[]
-        }
-        // loop though paragraph child nodes (normaly only textnodes and <a>)
-        for (var j = 0; j < childs[i].childNodes.length; j++) {
-          // if not textnode
-          if(typeof childs[i].childNodes[j].localName != "undefined"){
-            switch (childs[i].childNodes[j].localName) {
-              case 'a':
-                // console.log('childs[i].childNodes[j]', childs[i].childNodes[j]);
-                p.childs.push({
-                  tag:'a',
-                  href:childs[i].childNodes[j].attributes.href.value,
-                  text:childs[i].childNodes[j].innerHTML
-                });
-                break;
-            }
-          }else{
-            // if textnode
-            // console.log(childs[i].childNodes[j]);
-            // console.log("["+childs[i].childNodes[j].textContent+"]");
-            p.childs.push({
-              tag:'#text',
-              text:childs[i].childNodes[j].textContent //+ (childs[i].childNodes[j].nextSibling ? " " : "")
-            });
-          }
-        }
-        vn.state.textchilds.push(p);
-      }
-    }
   },
   view: function(vn){
     // console.log('_Text :: view : '+vn.attrs.slug, vn);
+    // console.log('vn.state.textchilds', vn.state.textchilds);
     return m('div',
       {'class':'text'},
-      // loop through first level paragraph
+      // loop through childNodes list generated by parseTextDom() in init
-      vn.state.textchilds.map(function(p,i){
+      vn.state.textchilds.map(populateTextDom)
-          // create paragraph and loop through text and link nodes
-          return m('div', {'class':'paragraph'}, p.childs.map(function(c,j) {
-            console.log('c',c);
-          // return p.childs.map(function(c,j) {
-            // create text and link node
-            switch (c.tag) {
-              case 'a':
-                return m(_Link,
-                  {
-                    href:c.href
-                  }, c.text);
-                break;
-              case '#text':
-                // console.log("["+c.text+"]");
-                return m.trust(c.text);
-                break;
-            }
-          }) // /map
-        ); // /m.div.paragraph
-      }) // /map
     ); // /m.div.text
   } // view:
 }
@@ -157,35 +162,104 @@ var _Text = {
 //  _/ // /_/  __/ / / / / /
 // /___/\__/\___/_/ /_/ /_/
 var _Item = {
-  slug:null,
+  id:null,
   part:null,
   type:null,
-  active:0,
+  nested:false,
   oninit: function(vn){
     // console.log('vn.attrs', vn.attrs);
-    vn.state.slug = vn.attrs.slug;
+    vn.state.id = vn.attrs.id;
-    vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
+    // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
+    vn.state.nested = vn.attrs.nested | false;
   },
   view: function(vn){
     return m("section", {
-        'id':vn.attrs.slug,
+        'id':vn.state.id,
-        'class':'item'+(vn.state.active ? ' active' : '')
+        'class':'item'+(vn.state.nested ? ' nested':'')
       },
       [
         // create title node
-        m("h1", {
+        m("h3", {
-            'ref':vn.attrs.href,
+            // 'ref':vn.attrs.href,
             onclick: function(e){
               vn.state.active = vn.state.active ? 0 : 1;
             }
-          }, "Part "+vn.state.part+" : "+vn.attrs.title),
+          }, vn.attrs.type),
         // create text node
-        m(_Text, {'text':vn.attrs.text, 'slug':vn.attrs.slug})
+        m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id})
       ]
     )
   }
 };
 
+//     ______
+//    / ____/___  ____  ____  ________
+//   / __/ / __ \/ __ \/ __ \/ ___/ _ \
+//  / /___/ / / / /_/ / / / / /__/  __/
+// /_____/_/ /_/\____/_/ /_/\___/\___/
+var _Enonce = {
+  partid:null,
+  id:null,
+  title:null,
+  nested:false,
+  childs:[],
+  oninit:function(vn){
+    // console.log('Enonce on init', vn);
+    vn.state.partid = vn.attrs.partid;
+    vn.state.id = vn.attrs.id;
+    vn.state.title = vn.attrs.title;
+    vn.state.childs = vn.attrs.childs;
+    vn.state.nested = vn.attrs.nested | false;
+  },
+  view: function(vn){
+    return m("section", {
+      'id'    :vn.state.id,
+      'class' :'enonce'+(vn.state.nested ? ' nested':'')
+    },
+    [
+      // create title node
+      m("h2", {}, vn.attrs.title),
+      // create text node
+      m(_Text, {'text':vn.attrs.text, 'id':vn.state.id}),
+      // addd children
+      vn.state.childs.map(function(c){
+        return m(_Item, c)
+      })
+    ])
+  }
+}
+
+//     ____             __
+//    / __ \____ ______/ /_
+//   / /_/ / __ `/ ___/ __/
+//  / ____/ /_/ / /  / /_
+// /_/    \__,_/_/   \__/
+var _Part = {
+  id:null, // get the part number
+  title:null,
+  enonces:[],
+  oninit:function(vn){
+    // console.log('Part on init', vn);
+    vn.state.id = vn.attrs.id;
+    vn.state.title = vn.attrs.title;
+    vn.state.enonces = vn.attrs.enonces;
+  },
+  view: function(vn){
+    return m("section", {
+      'id'    :vn.state.id,
+      'class' :'part'
+    },
+    [
+      // create title node
+      m("h1", {'class':'part'}, vn.state.title),
+      // create text node
+      vn.state.enonces.map(function(e){
+        return m(_Enonce, Object.assign({"partid":vn.state.id},e))
+      })
+    ])
+  }
+}
+
 //   ______
 //  /_  __/_______  ___
 //   / / / ___/ _ \/ _ \
@@ -194,10 +268,11 @@ var _Item = {
 var _Tree = {
   view: function(){
     // return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
-    return m('main', {id:"content"}, DataItems.map(function(c){
+    return m('main', {id:"content"}, _db.map(function(p){
-      return m(_Item,c);
+        // console.log("MAP _db", _db[k]);
-    }));
+        return m(_Part,p);
+      })
+    );
   }
 }
-
+m.mount(document.getElementById('app'), _Tree);
-// m.mount(document.getElementById('app'), _Tree);

assets/main.scss

@@ -9,7 +9,7 @@ $fs:16px;
 
 @mixin base_font{
   font-family: 'amiri', sans-serif;
-  font-size: 16px;
+  font-size: $fs;
   font-kerning: auto;
   line-height: 1.4;
 }
@@ -30,9 +30,18 @@ html, body{
 main#content{
   display:inline-block;
   text-align: left;
+  // &>*{
+  //   width: 450px;
+  // }
 }
 
-section.item{
+h1.part{
+  font-size: 1.6em;
+  width:450px;
+  margin: 1em 0;
+}
+
+section.enonce{
   width:450px;
   margin: 1em 0;
   overflow-x: visible;
@@ -44,8 +53,15 @@ section.item{
   //   max-height:1000px;
   // }
 
-  h1{
+  h2{
-    font-size: 0.750em;
+    font-size: 1em;
+    font-weight: 300;
+    margin: 0;
+    cursor:pointer;
+  }
+
+  h3{
+    font-size: 0.9em;
     font-weight: 300;
     margin: 0;
     cursor:pointer;
@@ -67,7 +83,7 @@ section.item{
       span.link.text:after{
         content:':'
       }
-      section.item{
+      section.enonce, section.item{
         padding-left:2em;
         border-left: 1px solid #999;
       }

package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "css-loader": "^0.28.0",
     "file-loader": "^0.11.1",
+    "markdown-it": "^8.3.1",
+    "markdown-it-footnote": "^3.0.1",
     "mithril": "^1.1.1",
     "node-sass": "^4.5.3",
     "normalize.css": "^6.0.0",

yarn.lock

@@ -727,6 +727,10 @@ enhanced-resolve@^3.0.0:
     object-assign "^4.0.1"
     tapable "^0.2.5"
 
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
 errno@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
@@ -1299,6 +1303,12 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+linkify-it@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
+  dependencies:
+    uc.micro "^1.0.1"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -1388,10 +1398,28 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+markdown-it-footnote@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-3.0.1.tgz#7f3730747cacc86e2fe0bf8a17a710f34791517a"
+
+markdown-it@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.1.tgz#2f4b622948ccdc193d66f3ca2d43125ac4ac7323"
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.3"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.16"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -2524,6 +2552,10 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
 
+uc.micro@^1.0.1, uc.micro@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
+
 uglify-js@^2.8.5:
   version "2.8.22"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.22.tgz#d54934778a8da14903fa29a326fb24c0ab51a1a0"