ethica-spinoza-hugo-theme/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');

// console.log("DataItems", DataItems);

var DataItemsBySlug = {};
for (item in DataItems) {
  // console.log(item);
  DataItemsBySlug[DataItems[item].slug] = DataItems[item];
}
// console.log("DataItemsBySlug", DataItemsBySlug);

//     __    _       __
//    / /   (_)___  / /__
//   / /   / / __ \/ //_/
//  / /___/ / / / / ,<
// /_____/_/_/ /_/_/|_|
var _Link = {
  targetslug:"",
  opened:false,
  oninit: function(vn){
    // console.log("vn.attrs", vn.attrs);
    vn.state.targetslug = vn.attrs.href.replace(/^.*\/(.+)$/, "$1").replace(/^(.+)\/$/, "$1");
  },
  view: function(vn){
    if(vn.state.opened){
      // return m('div', "Hello "+vn.state.targetslug);
      // 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])
          ]
        );


    }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
    // console.log('vn.attrs.text',vn.attrs.text);
    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':
                // 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);
    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) {
            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:
}

//     ______
//    /  _/ /____  ____ ___
//    / // __/ _ \/ __ `__ \
//  _/ // /_/  __/ / / / / /
// /___/\__/\___/_/ /_/ /_/
var _Item = {
  slug:null,
  part:null,
  type:null,
  active:0,
  oninit: function(vn){
    // console.log('vn.attrs', vn.attrs);
    vn.state.slug = vn.attrs.slug;
    vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
  },
  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;
            }
          }, "Part "+vn.state.part+" : "+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);