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, setupTitle(vn){ this.title = vn.attrs.title; if(!this.title){ this.title = this.type; } this.title = markdown.renderInline(this.title); }, 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){ // console.log('Dot init : vn',vn); this.id = vn.attrs.id; this.type = vn.attrs.type; 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); this.setupTitle(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 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'){ var obj = _dbs.data_byid[_dbs.lang][id]; // console.log('link to : obj', obj); return m(_Dot, { "id":id, 'text':obj.text, 'dottype':obj.dottype, 'type':obj.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, // if no links to, add nothing // 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 => { var obj = _dbs.data_byid[_dbs.lang][id]; // console.log('link from : obj', obj); // return a dot return m(_Dot, { "id":id, 'text':obj.text, 'dottype':obj.dottype, 'type':obj.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, // if no links from, add nothing ]; }else{ // preview dot var dot_content = [ // m('span', {'class':'id'}, this.id), // this.type+' '+ // m('span', {'class':'bullet'}, m.trust('•')), m('span', { 'class':'title', onclick(e){ // TODO: animate openening (text and links separatly) vn.state.opened = true; } }, m.trust(this.title)), // TODO: on nested dot add full description : Part 1, Prop 8, scolie 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}`, // onclick(e){ // // TODO: animate openening (text and links separatly) // vn.state.opened = true; // } }, 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); } }) ); } }