416 lines
12 KiB
JavaScript
416 lines
12 KiB
JavaScript
|
|
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);
|
|
|
|
if(this.dottype == "preface"){
|
|
this.summary = this.rendered_text;
|
|
}else{
|
|
// construct summary
|
|
// TODO: summary needs more work (strip tags, markdown render)
|
|
// remove img
|
|
this.summary = this.text.replace(/!\[[^\]]+\]\([^\)]+\)/g, "");
|
|
// get portion of text
|
|
this.summary = this.summary.match('([^ ]*[ ]{0,1}){1,6}')[0];
|
|
// end underscores (italic)
|
|
this.summary = this.summary.trim().replace(/_([^_]+)$/g, "_$1_");
|
|
// end brackets (links)
|
|
this.summary = this.summary.replace(/\[([^\]]+)$/g, "$1");
|
|
// render the marckdown
|
|
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);
|
|
}
|
|
},
|
|
setOpenedContent(vn){
|
|
this.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
|
|
];
|
|
},
|
|
setPreviewContent(vn){
|
|
this.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))
|
|
];
|
|
},
|
|
view(vn){
|
|
if (this.active && this.opened) {
|
|
// full view of dot with linked dots
|
|
this.setOpenedContent(vn);
|
|
}else{
|
|
// preview dot
|
|
this.setPreviewContent(vn);
|
|
}
|
|
|
|
return m('div',{
|
|
'uid':this.id,
|
|
'class':`dot ${this.dottype}`,
|
|
},
|
|
this.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);
|
|
}
|
|
})
|
|
);
|
|
}
|
|
}
|