app.ethica-spinoza.net/assets/main.js

/**
 * @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');

var m = require('mithril');
// var marked = require('marked');
var markdown =  require('markdown-it')()
                  .use(require('markdown-it-footnote'));

var _lang;
var _langs = [
  {'lc':'fr',   'label':'fr',   'db':'2-Appuhn-FR-ethicadb.json'},
  {'lc':'bra',  'label':'bra',  'db':'ethica-bresilen.json'}
];

var _dbs = {};
var _dbs_by_id = {};
var _loaded_dbs = 0;

function init(){
  // var hash = window.location.hash;
  _lang = getUrlVars()['lang'] || 'fr';
  console.log(_lang);

  // create lang menu
  // m.mount(document.getElementById('menus'), _LangMenu);

  // load all dbs, when loaded init main app
  for (var i = 0; i < _langs.length; i++) {
    // if(_langs[i].lc == lang){
      // var dbfile = _langs[i].db;
    // }
    loadJSON(_langs[i].lc, 'assets/jsondb/'+_langs[i].db, onDBLoaded);

  }


};

//     __                      __  ___
//    / /   ____ _____  ____ _/  |/  /__  ____  __  __
//   / /   / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
//  / /___/ /_/ / / / / /_/ / /  / /  __/ / / / /_/ /
// /_____/\__,_/_/ /_/\__, /_/  /_/\___/_/ /_/\__,_/
//                   /____/
var _LangMenu = {
  view: function(){
    // return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
    // create ul dom
    return m('ul', {id:"languages"}, _langs.map(function(lang){
        // create li dom for each lank link
        return m('li',
          // create a dom
          m('a', {
            'lang':lang.lc,
            'href':'/?lang='+lang.lc,
            onclick:function(e){
              e.preventDefault();
              // console.log('click lang', e);
              var lang = e.target.getAttribute('lang');
              console.log(lang);
              if(lang != _lang){
                // change url variable
                // change db
                _lang = lang;
                // redraw UI
                // m.redraw();
              }
              return false;
            }
          }, lang.label)
        );
      })
    );
  }
}

//        _
//       (_)________  ____
//      / / ___/ __ \/ __ \
//     / (__  ) /_/ / / / /
//  __/ /____/\____/_/ /_/
// /___/
function loadJSON(lc, file, callback) {

  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  // xobj.setRequestHeader('Accept-Encoding', 'gzip');
  xobj.open('GET', file, true); // Replace 'my_data' with the path to your file
  // xobj.onload = callback;
  xobj.onreadystatechange = function () {
    // console.log(xobj);
    if (xobj.readyState == 4 && xobj.status == "200") {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(lc, xobj.responseText);
    }
  };

  xobj.send(null);

  // TODO: load and unzip gziped json
  // TODO: load multiple languages jsons
};

function onDBLoaded(lc, json){

  _dbs[lc] = JSON.parse(json);
  _loaded_dbs ++;

  if (_loaded_dbs == _langs.length) {
    console.log("_dbs", _dbs);
    parseDBs();
    // m.mount(document.getElementById('app'), _Tree);
    m.mount(document.body, _App);
  }

}

function parseDBs(){
  for(l in _dbs){
    // console.log('l', l);
    _dbs_by_id[l] = {};
    for (p in _dbs[l]) {
      // console.log(_dbs[l][p]);
      for (e in _dbs[l][p].enonces) {
        // console.log('e',e);
        _dbs_by_id[l][_dbs[l][p].enonces[e].id] = _dbs[l][p].enonces[e];
        for (c in _dbs[l][p][e]){
          // console.log(_db[p][e][c]);
          _dbs_by_id[_dbs[l][p][e][c].id] = _dbs[l][p][e][c];
        }
      }
    }
  }
  console.log('_dbs_by_id', _dbs_by_id);
}

//     __    _       __
//    / /   (_)___  / /__
//   / /   / / __ \/ //_/
//  / /___/ / / / / ,<
// /_____/_/_/ /_/_/|_|
var _Link = {
  targetid:"",
  opened:false,
  oninit: function(vn){
    // console.log("INIT LINK : vn", vn);
    // define target id
    vn.state.tid = vn.attrs.href;
  },
  onupdate: function(vn){
    vn.state.tid = vn.attrs.href;
  },
  view: function(vn){
    if(vn.state.opened){
      // console.log('vn.state.tid', vn.state);
      return m('div', {'class':'opened-link'},
          [
            m('span', {'class':"link text"}, vn.children),
            typeof _dbs_by_id[_lang][vn.state.tid].childs != "undefined"
              ? m(_Enonce, _dbs_by_id[_lang][vn.state.tid])
              : m(_Item, _dbs_by_id[_lang][vn.state.tid])
          ]
        );
    }else{
      // console.log(vn);
      return m('a', {
          'class':'link',
          'href':'#'+vn.state.tid,
          'rel':vn.state.tid,
          onclick:function(e){
            e.preventDefault();
            console.log('click', vn);
            vn.state.opened = true;
            return false;
          }
        }, vn.children);
    }

  }
}

//   ______          __
//  /_  __/__  _  __/ /_
//   / / / _ \| |/_/ __/
//  / / /  __/>  </ /_
// /_/  \___/_/|_|\__/

// 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 = {
  id:null,
  text:"",
  texthtml:"",
  textdom:null,
  textchilds:[],
  parsetext: function(){
    // console.log('parsetext', this);
    // !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
    // convert markdown to html
    this.texthtml = markdown.render(this.text)
    // TODO: fixe number link text disapear [3](1d3) ( in 104d )
    // TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_  ( in 104d )
    // parse html string to virtual dom
    this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
    // get the text nodes (avoid html document extra)
    this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
  },
  oninit: function(vn){
    this.id = vn.attrs.id;
    this.text = vn.attrs.text;
    this.parsetext();
  },
  onbeforeupdate: function(vn,old){
    this.text = vn.attrs.text;
    this.parsetext();
  },
  view: function(vn){
    // console.log('_Text :: view : '+vn.attrs.slug, vn);
    return m('div',
      {'class':'text'},
      // loop through childNodes list generated by parseTextDom() in init
      this.textchilds.map(populateTextDom)
    ); // /m.div.text
  } // view:
}

//     ______
//    /  _/ /____  ____ ___
//    / // __/ _ \/ __ `__ \
//  _/ // /_/  __/ / / / / /
// /___/\__/\___/_/ /_/ /_/
var _Item = {
  id:null,
  part:null,
  type:null,
  nested:false,
  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("section", {
        'id':this.id,
        'class':'item'+(this.nested ? ' nested':'')
      },
      [
        // create title node
        m("h3", {
            // 'ref':vn.attrs.href,
            onclick: function(e){
              vn.state.active = vn.state.active ? 0 : 1;
            }
          }, this.type),
        // create text node
        m(_Text, {'text':this.text, 'id':this.id})
      ]
    )
  }
};

//     ______
//    / ____/___  ____  ____  ________
//   / __/ / __ \/ __ \/ __ \/ ___/ _ \
//  / /___/ / / / /_/ / / / / /__/  __/
// /_____/_/ /_/\____/_/ /_/\___/\___/
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 m("section", {
      'id'    :this.id,
      'class' :'enonce'+(this.nested ? ' nested':'')
    },
    [
      // create title node
      m("h2", {}, this.title),
      // create text node
      m(_Text, {'text':this.text, 'id':this.id}),
      // addd children
      this.childs.map(function(c){
        return m(_Item, 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'}, this.title),
        // create text node
        this.enonces.map(function(e){
          // console.log(e.text);
          return m(_Enonce, Object.assign({"partid":this.id},e))
        })
      ]
    )
  }
}

//   ______
//  /_  __/_______  ___
//   / / / ___/ _ \/ _ \
//  / / / /  /  __/  __/
// /_/ /_/   \___/\___/
var _Tree = {
  view: function(){
    console.log('_Tree view', _lang);
    return m('main', {id:"content"}, _dbs[_lang].map(function(p){
        // console.log("MAP _dbs", p);
        return m(_Part,p);
      })
    );
  }
}

//     ___
//    /   |  ____  ____
//   / /| | / __ \/ __ \
//  / ___ |/ /_/ / /_/ /
// /_/  |_/ .___/ .___/
//       /_/   /_/
var _App = {
  view: function(){
    console.log('_App view', _lang);
    return [
      m('header', [
        m('h1', 'Ethica'),
        m('aside', {'id':"menus"}, m(_LangMenu) )
      ]),
      m(_Tree),
      m('footer', [
        m('p', m.trust('© 2017 <a href="./">Ethica Spinoza</a>'))
      ])
    ]
  }
}
//     __  __     __
//    / / / /__  / /___  ___  __________
//   / /_/ / _ \/ / __ \/ _ \/ ___/ ___/
//  / __  /  __/ / /_/ /  __/ /  (__  )
// /_/ /_/\___/_/ .___/\___/_/  /____/
//             /_/

function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
  });
  return vars;
}

//     _       _ __
//    (_)___  (_) /_
//   / / __ \/ / __/
//  / / / / / / /_
// /_/_/ /_/_/\__/
init()