|
@@ -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 _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 app = {
|
|
|
- view: function() {
|
|
|
- return m('div', 'hello Ethica!')
|
|
|
+// ______
|
|
|
+// /_ __/_______ ___
|
|
|
+// / / / ___/ _ \/ _ \
|
|
|
+// / / / / / __/ __/
|
|
|
+// /_/ /_/ \___/\___/
|
|
|
+var _Tree = {
|
|
|
+ view: function(){
|
|
|
+ return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-m.mount(document.getElementById('app'), app)
|
|
|
+m.mount(document.getElementById('app'), _Tree);
|