app.ethica-spinoza.net/assets/modules/ModeConnections.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,
  dottype:null,
  type:'',
  title:'',
  text:'',
  summary:'',
  active:true,
  opened:false,
  links:null,
  parents:[],
  lang:_dbs.lang,
  setupDotType(vn){
    // var rx_id = /^(\d)(app|agd|\d\d|pr|ad|ap|c|p|d|a)(cd|sc|\d\d|d|c|a|l|p|\d)?(e|\d|sc)?(d|c|a|sc)?$/;
    // var m = this.id.match(rx_id);
    // if(m){
    //   switch(true){
    //     case /^\d{2}$/.test(m[2]):
    //       switch(true){
    //         case /^cd$/.test(m[3])    : this.dottype = 'corollaire-demo'; break;
    //         case /^sc$/.test(m[3])    : this.dottype = 'scolie'; break;
    //         case /^d$/.test(m[3])     : this.dottype = 'demonstration'; break;
    //         case /^c$/.test(m[3])     :
    //           switch(true){
    //             case /^sc$/.test(m[4]): this.dottype = 'scolie'; break;
    //             case /^d$/.test(m[4]) : this.dottype = 'demonstration'; break;
    //             case /^d$/.test(m[5]) : this.dottype = 'demonstration'; break;
    //             case /^sc$/.test(m[5]): this.dottype = 'scolie'; break;
    //             case /^\d$/.test(m[4]): this.dottype = 'corollaire'; break;
    //             case !m[4]            : this.dottype = 'corollaire'; break;
    //           }
    //           break;
    //         case /^a$/.test(m[3])     : this.dottype = 'axiom'; break;
    //         case /^l$/.test(m[3])     :
    //           switch(true){
    //             case /^d$/.test(m[5]) : this.dottype = 'demonstration'; break;
    //             case /^sc$/.test(m[5]): this.dottype = 'scolie'; break;
    //             case !m[5]            : this.dottype = 'lemme'; break;
    //           }
    //           break;
    //         case /^p$/.test(m[3])     : this.dottype = 'postulat'; break;
    //         case /^\d$/.test(m[3])    : this.dottype = '??'; break;
    //         case /^\d{2}$/.test(m[3]) : this.dottype = '??'; break;
    //         case !m[3]                : this.dottype = 'proposition'; break;
    //       }
    //       break;
    //     case /^app|ap$/.test(m[2])    : this.dottype = 'appendice'; break;
    //     case /^agd$/.test(m[2])       : this.dottype = 'def-gen-affect'; break;
    //     case /^pr$/.test(m[2])        : this.dottype = 'preface'; break;
    //     case /^ad$/.test(m[2])        :
    //       switch(true){
    //         case /^e$/.test(m[4])     :this.dottype = 'explication'; break;
    //         case !m[4]                :this.dottype = 'def-affect'; break;
    //       }
    //       break;
    //     case /^c$/.test(m[2])         : this.dottype = 'chapitre'; break;
    //     case /^p$/.test(m[2])         : this.dottype = 'postulat'; break;
    //     case /^d$/.test(m[2])         :
    //       switch(true){
    //         case /^e$/.test(m[4])     : this.dottype = 'explication'; break;
    //         case !m[4]                : this.dottype = 'definition'; break;
    //       }
    //       break;
    //     case /^a$/.test(m[2])         : this.dottype = 'axiom'; break;
    //   }
    //   // }
    // }
    // console.log(`${this.id} -> ${this.dottype}`,m);
    //
    // // TODO: fix false ids
    // // we have app and ap for appendice (1app | 4ap)
    // // 213def ??
    // // 209cd demo ou corollaire-demo ??
    // // 210csc scolie ou corollaire-scolie ??
    // // 213l1d demo ??
  },
  setupTitle(vn){
    this.title = vn.attrs.title;
    if(!this.title){
      this.title = this.type;
    }
  },
  setuptext(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(vn){
    this.id = vn.attrs.id;
    this.type = vn.attrs.type;
    // this.title = vn.attrs.title || "title";
    // this.setupDotType(vn);
    this.dottype = vn.attrs.dottype;

    this.setupTitle(vn);
    this.setuptext(vn);

    console.log(`${this.id} -> ${this.dottype}`);

    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(vn){
    if(this.active){
      vn.dom.classList.remove('disabled');
    }else{
      vn.dom.classList.add('disabled');
    }
  },
  onbeforeupdate(vn){
    // console.log('onbeforeupdate');
    if(this.lang != _dbs.lang){
      this.lang = _dbs.lang;
      this.setuptext(vn);
    }
  },
  view(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
        // TODO: add dottype class to nested dots
        this.links.to.length
          ? m('nav', {'class':'links to'}, this.links.to.map(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('⚫')),
        // Title
        m('span', {'class':'title'}, m.trust(this.title)),
        // full text
        m('section', {
          'class':'text',
          onmouseover(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(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(id => {
              // retrun a dot
              // TODO: add dottype class to nested dots
              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('span', {'class':'title'}, m.trust(this.title)),
          m('p', {
            'class':'summary',
            onclick(e){
              // TODO: animate openening (text and links separatly)
              vn.state.opened = true;
            }
          }, m.trust(this.summary))
      ];
    }

    return m('div',{
        'uid':this.id,
        'class':`dot ${this.dottype}`
      },
      dot_content
    );
  },
  onupdate(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,
  dottype:null,
  // nested:false,
  text:'',
  oninit(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;
    this.dottype = vn.attrs.dottype;
  },
  onbeforeupdate(vn, old){
    // this.nested = vn.attrs.nested || false;
    this.type = vn.attrs.type;
    this.text = vn.attrs.text;
  },
  view(vn){
    return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type, 'dottype':this.dottype});
  }
};

//     ______
//    / ____/___  ____  ____  ________
//   / __/ / __ \/ __ \/ __ \/ ___/ _ \
//  / /___/ / / / /_/ / / / / /__/  __/
// /_____/_/ /_/\____/_/ /_/\___/\___/
var _Enonce = {
  partid:null,
  id:null,
  title:null,
  text:null,
  dottype:null,
  // nested:false,
  childs:[],
  oninit(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;
    this.dottype = vn.attrs.dottype;
  },
  onbeforeupdate(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);
    this.dottype = vn.attrs.dottype;
  },
  view(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, 'dottype':this.dottype}),
      // addd children
      this.childs.map(c => { return m(_Child, c); })
    ]
  }
}


//     ____             __
//    / __ \____ ______/ /_
//   / /_/ / __ `/ ___/ __/
//  / ____/ /_/ / /  / /_
// /_/    \__,_/_/   \__/
var _Part = {
  oninit(vn){
    this.id = vn.attrs.id;
    this.title = vn.attrs.title || "";
    this.enonces = vn.attrs.enonces;
  },
  onbeforeupdate(vn, old){
    // console.log('_Part, onbeforeupdate old',old);
    this.title = vn.attrs.title || "";
    this.enonces = vn.attrs.enonces;
  },
  view(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(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(vn){
    console.log('_Intro : oninit : vn', vn);
    this.id = vn.attrs.id;
    this.text = vn.attrs.text || '';
  },
  onbeforeupdate(vn, old){
    this.id = vn.attrs.id;
    this.text = vn.attrs.text || '';
  },
  view(vn){
    return m("section", {'class':'intro'}, m("p",m.trust(markdown.renderInline(this.text))));
  }
}


//    ______                            __  _
//   / ____/___  ____  ____  ___  _____/ /_(_)___  ____  _____
//  / /   / __ \/ __ \/ __ \/ _ \/ ___/ __/ / __ \/ __ \/ ___/
// / /___/ /_/ / / / / / / /  __/ /__/ /_/ / /_/ / / / (__  )
// \____/\____/_/ /_/_/ /_/\___/\___/\__/_/\____/_/ /_/____/
module.exports = {
  oncreate(vn){
    document.body.classList.add('mode-connections');
    _Ui.init();
  },
  view(vn){
    // console.log('_ModeConnections view', vn.attrs.lang);
    return m('main', {id:"content", 'class':'mode-connections'}, _dbs.data[vn.attrs.lang].map(p => {
        if(p.id == 'intro'){
          return m(_Intro,p);
        }else{
          return m(_Part,p);
        }
      })
    );
  }
}