first alpha mithril version: display text, open nested crossref infinitly

2017-04-18 12:27:07 +02:00
parent 2f69ebccc2
commit 4d237e7b5c
7 changed files with 234 additions and 32 deletions
@@ -1,17 +1,169 @@
-
-var m = require('mithril');
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   16-04-2017
+ * @Email:  bachir@figureslibres.io
+ * @Last modified by:   bach
+ * @Last modified time: 18-04-2017
+ * @License: GPL-V3
+ */

 require('normalize.css/normalize.css');
 require('./fonts/amiri/amiri.css');
 require('./fonts/dejavu/dejavu.css');
 require('./fonts/opensans/opensans.css');

-console.log("Hello");
+var m = require('mithril');
+
+console.log("DataItems", DataItems);
+
+var DataItemsBySlug = {};
+for (item of DataItems) {
+  DataItemsBySlug[item.slug] = item;
+}
+console.log("DataItemsBySlug", DataItemsBySlug);
+
+//     __    _       __
+//    / /   (_)___  / /__
+//   / /   / / __ \/ //_/
+//  / /___/ / / / / ,<
+// /_____/_/_/ /_/_/|_|
+var _Link = {
+  targetslug:"",
+  opened:false,
+  oninit: function(vn){
+    vn.state.targetslug = vn.attrs.href.replace(/^.*\/(.+)$/, "$1").replace(/^(.+)\/$/, "$1");
+  },
+  view: function(vn){
+    if(vn.state.opened){
+      // return m('div', "Hello "+vn.state.targetslug);
+      return m(_Item, DataItemsBySlug[vn.state.targetslug]);
+    }else{
+      return m('a', {
+          'class':'link',
+          'href':'#'+vn.state.targetslug,
+          'rel':vn.state.targetslug,
+          onclick:function(e){
+            e.preventDefault();
+            vn.state.opened = true;
+            return false;
+          }
+        }, vn.children);
+    }

-var app = {
-  view: function() {
-    return m('div', 'hello Ethica!')
  }
 }

-m.mount(document.getElementById('app'), app)
+//   ______          __
+//  /_  __/__  _  __/ /_
+//   / / / _ \| |/_/ __/
+//  / / /  __/>  </ /_
+// /_/  \___/_/|_|\__/
+var _Text = {
+  textchilds:[],
+  oninit: function(vn){
+    // initiaize text childNodes array
+    vn.state.textchilds = [];
+    // parse html string to virtual dom
+    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;
+    // loop through 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':
+                p.childs.push({
+                  tag:'a',
+                  href:childs[i].childNodes[j].href,
+                  text:childs[i].childNodes[j].innerHTML
+                });
+                break;
+            }
+          }else{
+            // if textnode
+            p.childs.push({
+              tag:'#text',
+              text:childs[i].childNodes[j].data
+            });
+          }
+        }
+        vn.state.textchilds.push(p);
+      }
+    }
+  },
+  view: function(vn){
+    // console.log('_Text :: view : '+vn.attrs.slug, vn);
+    return m('div',
+      {'class':'text'},
+      // loop through first level paragraph
+      vn.state.textchilds.map(function(p,i){
+          // create paragraph and loop through text and link nodes
+          return m('div', {'class':'paragraph'}, p.childs.map(function(c,j) {
+          // 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':
+                return m.trust(c.text);
+                break;
+            }
+          }) // /map
+        ) // /m.div.paragraph
+      }) // /map
+    ) // /m.div.text
+  } // view:
+}
+
+//     ______
+//    /  _/ /____  ____ ___
+//    / // __/ _ \/ __ `__ \
+//  _/ // /_/  __/ / / / / /
+// /___/\__/\___/_/ /_/ /_/
+var _Item = {
+  active:0,
+  view: function(vn){
+    return m("section", {
+        'id':vn.attrs.slug,
+        'class':'item'+(vn.state.active ? ' active' : '')
+      },
+      [
+        // create title node
+        m("h1", {
+            'ref':vn.attrs.href,
+            onclick: function(e){
+              vn.state.active = vn.state.active ? 0 : 1;
+            }
+          }, vn.attrs.title),
+        // create text node
+        m(_Text, {'text':vn.attrs.text, 'slug':vn.attrs.slug})
+      ]
+    )
+  }
+};
+
+//   ______
+//  /_  __/_______  ___
+//   / / / ___/ _ \/ _ \
+//  / / / /  /  __/  __/
+// /_/ /_/   \___/\___/
+var _Tree = {
+  view: function(){
+    return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
+  }
+}
+
+m.mount(document.getElementById('app'), _Tree);