app.ethica-spinoza.net/assets/modules/tree.js

var m = require('mithril');

// https://github.com/markdown-it/markdown-it
var markdown =  require('markdown-it')()
                  .use(require('markdown-it-footnote'));

var _dbs = require('./dbs');
var _Header = require('./header');
var _Footer = require('./footer');
var _Ui = require('./ui.js');

//     ____        __
//    / __ \____  / /_
//   / / / / __ \/ __/
//  / /_/ / /_/ / /_
// /_____/\____/\__/
var _Dot = {
  id:null,
  type:'',
  text:'',
  summary:'',
  active:true,
  opened:false,
  links:null,
  parents:[],
  lang:_dbs.lang,
  setuptext:function(vn){
    // console.log('setuptext', vn);

    // construct text
    this.text = vn.attrs.text || '';
    this.rendered_text = markdown.render(this.text);

    // construct summary
    // TODO: summary needs more work (strip tags, markdown render)
    this.summary = this.text.match('([^ ]*[ ]{0,1}){1,6}')[0];
    this.summary = this.summary.trim().replace(/_([^_]+)$/g, "_$1_");
    this.summary = this.summary.replace(/\[([^\]]+)$/g, "$1");
    this.summary = markdown.renderInline(this.summary) + " …";

  },
  oninit: function(vn){
    this.id = vn.attrs.id;
    this.type = vn.attrs.type;

    this.setuptext(vn);

    if(typeof vn.attrs.active !== 'undefined')
      this.active = vn.attrs.active;

    // links
    this.links = _dbs.data_strct[this.id];
    // console.log(this.links);

    // parents memorize where do we come from to avoid duplicates and looping nav
    if(vn.attrs.parents){
      this.parents = this.parents.concat(vn.attrs.parents);
      // console.log('_Dot init '+this.id+' parents :',this.parents);
    }

  },
  oncreate: function(vn){
    if(this.active){
      vn.dom.classList.remove('disabled');
    }else{
      vn.dom.classList.add('disabled');
    }
  },
  onbeforeupdate: function(vn){
    // console.log('onbeforeupdate');
    if(this.lang != _dbs.lang){
      this.lang = _dbs.lang;
      this.setuptext(vn);
    }
  },
  view: function(vn){
    if (this.active && this.opened) {
      // full view of dot with linked dots
      // console.log('_Dot view '+this.id+' parents :',this.parents);
      var dot_content = [
        // links to
        this.links.to.length
          ? m('nav', {'class':'links to'}, this.links.to.map(function(id){
              // console.log(id);
              if(typeof _dbs.data_byid[_dbs.lang][id] !== 'undefined'){
                return m(_Dot, {
                  "id":id,
                  'text':_dbs.data_byid[_dbs.lang][id].text,
                  'type':'',
                  // passe the memory of crossed dots plus the current one
                  'parents':vn.state.parents.concat([vn.state.id]),
                  // activate link only if not in parents (already went through it)
                  'active':vn.state.parents.indexOf(id) == -1 ? true:false
                });
              }
            })
          )
          : null,
        // id
        m('span', {'class':'id'}, this.id), // this.type+' '+
        // bullet
        m('span', {'class':'bullet'}, m.trust('⚫')),
        // full text
        m('section', {
          'class':'text',
          onmouseover: function(e){
            e.preventDefault();
            if(e.target.nodeName == "A" ){
              // console.log("over e.target", e.target);
              // console.log('over vn', vn);
              var id = e.target.getAttribute("href");
              // add highlight class
              vn.dom.querySelector('nav.links>div[uid="'+id+'"]').classList.add('highlight');
            }else{
              // remove all hilight class
              for (link of vn.dom.querySelectorAll('nav.links>div.dot')) {
                link.classList.remove('highlight');
              }
            }
          },
          onclick:function(e){
            e.preventDefault();
            if(e.target.nodeName == "A" ){
              // console.log("over e.target", e.target);
              // console.log('over vn', vn);
              var id = e.target.getAttribute("href");
              // add highlight class
              vn.dom.querySelector('nav.links>div[uid="'+id+'"]>.summary').click();
            }
          }
        }, m.trust(this.rendered_text)),
        // links from
        this.links.from.length
          ? m('nav', {'class':'links from'}, this.links.from.map(function(id){
              // retrun a dot
              return m(_Dot, {
                "id":id,
                'text':_dbs.data_byid[_dbs.lang][id].text,
                'type':'',
                // passe the memory of crossed dots plus the current one
                'parents':vn.state.parents.concat([vn.state.id]),
                // activate link only if not in parents (already went through it)
                'active':vn.state.parents.indexOf(id) == -1 ? true:false
              });
            })
          )
          : null
      ];
    }else{
      // preview dot
      var dot_content = [
          m('span', {'class':'id'}, this.id), // this.type+' '+
          m('span', {'class':'bullet'}, m.trust('•')),
          m('p', {
            'class':'summary',
            onclick:function(e){
              // TODO: animate openening (text and links separatly)
              vn.state.opened = true;
            }
          }, m.trust(this.summary))
      ];
    }

    return m('div',{
        'uid':this.id,
        'class':'dot'
      },
      dot_content
    );
  },
  onupdate: function(vn){
    // console.log('_Dot : onupdate', vn);
    if(this.active){
      if (this.opened){
        vn.dom.classList.add('opened');
        if(this.links.to.length)
          vn.dom.classList.add('to-links');
        if(this.links.from.length)
          vn.dom.classList.add('from-links');
      }else{
        vn.dom.classList.remove('opened');
      }
    }
  }
}

/*

down vote
Here's full list of black dotlikes from unicode

● - ● - Black Circle
⏺ - ⏺ - Black Circle for Record
⚫ - ⚫ - Medium Black Circle
⬤ - ⬤ - Black Large Circle
⧭ - ⧭ - Black Circle with Down Arrow
🞄 - 🞄 - Black Slightly Small Circle
• - • - Bullet
∙ - ∙ - Bullet Operator
⋅ - ⋅ - Dot Operator
🌑 - 🌑 - New Moon Symbol
*/


//   _______   _ __   __
//  / ___/ /  (_) /__/ /
// / /__/ _ \/ / / _  /
// \___/_//_/_/_/\_,_/
var _Child = {
  id:null,
  part:null,
  type:null,
  // nested:false,
  text:'',
  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(_Dot, {"id":this.id, 'text':this.text, 'type':this.type});
  }
};

//     ______
//    / ____/___  ____  ____  ________
//   / __/ / __ \/ __ \/ __ \/ ___/ _ \
//  / /___/ / / / /_/ / / / / /__/  __/
// /_____/_/ /_/\____/_/ /_/\___/\___/
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 [
      // create dot
      m(_Dot, {"id":this.id, 'text':this.text,'type':this.title}),
      // addd children
      this.childs.map(function(c){
        return m(_Child, 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-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
        // create text node
        this.enonces.map(function(e){
          // console.log(e.text);
          // return m(_Enonce, Object.assign({"partid":this.id},e))
          switch (e.type) {
            case "title":
              // handle titles
              return m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)));
              break;
            case "filet":
              // handle filets
              return m("h4", {'class':'filet'}, m.trust(markdown.renderInline(e.title)));
              break;
            default:
              // or build structure
              return m(_Enonce, Object.assign({"partid":this.id},e));
          }
        })
      ]
    )
  }
}

//     ____      __
//    /  _/___  / /__________
//    / // __ \/ __/ ___/ __ \
//  _/ // / / / /_/ /  / /_/ /
// /___/_/ /_/\__/_/   \____/
var _Intro = {
  oninit : function(vn){
    console.log('_Intro : oninit : vn', vn);
    this.id = vn.attrs.id;
    this.text = vn.attrs.text || '';
  },
  onbeforeupdate : function(vn, old){
    this.id = vn.attrs.id;
    this.text = vn.attrs.text || '';
  },
  view : function(vn){
    return m("section", {'class':'intro'}, m("p",m.trust(markdown.renderInline(this.text))));
  }
}


//   ______
//  /_  __/_______  ___
//   / / / ___/ _ \/ _ \
//  / / / /  /  __/  __/
// /_/ /_/   \___/\___/
module.exports = {
  // oninit : function(vn){
  //   this.lang = vn.attrs.lang;
  // },
  oncreate: function(vn){
    document.body.classList.add('tree');
    _Ui.init();
  },
  view: function(vn){
    console.log('_Tree view', vn.attrs.lang);
    return [
      m(_Header),
      m('main', {id:"content", 'class':'tree'}, _dbs.data[vn.attrs.lang].map(function(p){
          if(p.id == 'intro'){
            return m(_Intro,p);
          }else{
            return m(_Part,p);
          }
        })
      ),
      m(_Footer)
    ];
  }
}


// function(){
//   switch(_dbs.lang){
//     case 'fr':
//       return "Hello dots !";
//       break;
//     case 'bra':
//       return '"Hola dots !"'
//       break;
//   }
// }