|
@@ -20,19 +20,21 @@ var _Dot = {
|
|
|
dottype:null,
|
|
|
type:'',
|
|
|
title:'',
|
|
|
+ breadcrumb:'',
|
|
|
text:'',
|
|
|
summary:'',
|
|
|
active:true,
|
|
|
- opened:false,
|
|
|
+ opened:0,
|
|
|
+ nested: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);
|
|
|
+ if(!this.title) this.title = this.type;
|
|
|
+
|
|
|
+ if(this.title)
|
|
|
+ this.title = markdown.renderInline(this.title);
|
|
|
},
|
|
|
setuptext(vn){
|
|
|
// console.log('setuptext', vn);
|
|
@@ -50,24 +52,20 @@ var _Dot = {
|
|
|
this.summary = this.text.replace(/!\[[^\]]+\]\([^\)]+\)/g, "");
|
|
|
// get portion of text
|
|
|
this.summary = this.summary.match('([^ ]*[ ]{0,1}){1,6}')[0];
|
|
|
- // end underscores (italic)
|
|
|
+ // end underscores (italic) splited by summarizing
|
|
|
this.summary = this.summary.trim().replace(/_([^_]+)$/g, "_$1_");
|
|
|
- // end brackets (links)
|
|
|
+ // remove brackets (links) splited by summarizing
|
|
|
this.summary = this.summary.replace(/\[([^\]]+)$/g, "$1");
|
|
|
- // render the marckdown
|
|
|
+ // render the markdown
|
|
|
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);
|
|
|
-
|
|
|
+ this.breadcrumb = vn.attrs.breadcrumb;
|
|
|
// console.log(`${this.id} -> ${this.dottype}`);
|
|
|
|
|
|
if(typeof vn.attrs.active !== 'undefined')
|
|
@@ -75,14 +73,18 @@ var _Dot = {
|
|
|
|
|
|
// 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);
|
|
|
}
|
|
|
+ this.nested = this.parents.length ? true : false;
|
|
|
+
|
|
|
+ // if(this.nested) console.log(`oninit ${this.id}`);
|
|
|
|
|
|
+ this.setupTitle(vn);
|
|
|
+ this.setuptext(vn);
|
|
|
},
|
|
|
oncreate(vn){
|
|
|
if(this.active){
|
|
@@ -92,130 +94,17 @@ var _Dot = {
|
|
|
}
|
|
|
},
|
|
|
onbeforeupdate(vn){
|
|
|
- // console.log('onbeforeupdate');
|
|
|
+ // if(this.opened) console.log(`onbeforeupdate ${this.id} : vn`,vn);
|
|
|
if(this.lang != _dbs.lang){
|
|
|
this.lang = _dbs.lang;
|
|
|
+ this.breadcrumb = vn.attrs.breadcrumb;
|
|
|
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
|
|
|
- );
|
|
|
+ // this.opened = 0;
|
|
|
},
|
|
|
onupdate(vn){
|
|
|
- // console.log('_Dot : onupdate', vn);
|
|
|
+ // if(this.nested) console.log(`onupdate ${this.id}`);
|
|
|
if(this.active){
|
|
|
if (this.opened){
|
|
|
vn.dom.classList.add('opened');
|
|
@@ -227,14 +116,116 @@ var _Dot = {
|
|
|
vn.dom.classList.remove('opened');
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ setupLinks(vn, c, links){
|
|
|
+ return m('nav', {'class':`links ${c}`}, links.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,
|
|
|
+ 'title':obj.title,
|
|
|
+ 'breadcrumb':obj.breadcrumb,
|
|
|
+ '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,
|
|
|
+ // 'nested':true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ );
|
|
|
+ },
|
|
|
+ viewOpenedContent(vn){
|
|
|
+ // if(this.nested) console.log(`viewOpenedContent ${this.id} : vn`, vn);
|
|
|
+ // if(this.nested) console.log(`viewOpenedContent ${this.id} : this`, this);
|
|
|
+ return m('div', {
|
|
|
+ 'uid':this.id,
|
|
|
+ 'class':`dot ${this.dottype}${this.nested ? ' nested':''}`},
|
|
|
+ [
|
|
|
+ // links to
|
|
|
+ this.links.to.length
|
|
|
+ ? this.setupLinks(vn, 'to', this.links.to)
|
|
|
+ : null, // if no links to, add nothing
|
|
|
+ // close btn
|
|
|
+ m('div', {
|
|
|
+ 'class':'close-link-btn',
|
|
|
+ onclick(e){
|
|
|
+ vn.state.opened = 0;
|
|
|
+ }
|
|
|
+ }, m('span', m.trust("🗙"))
|
|
|
+ ),
|
|
|
+ // Title
|
|
|
+ m('span', {'class':'title'}, m.trust(this.nested ? this.breadcrumb : this.title)),
|
|
|
+ // full text
|
|
|
+ m('section', {
|
|
|
+ 'class':'text',
|
|
|
+ onmouseover(e){
|
|
|
+ e.preventDefault();
|
|
|
+ if(e.target.nodeName == "A" ){
|
|
|
+ let 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" ){
|
|
|
+ let id = e.target.getAttribute("href");
|
|
|
+ vn.dom.querySelector(`nav.links>div[uid="${id}"]>.title`).click();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, m.trust(this.rendered_text)
|
|
|
+ ),
|
|
|
+ // links from
|
|
|
+ this.links.from.length
|
|
|
+ ? this.setupLinks(vn, 'from', this.links.from)
|
|
|
+ : null, // if no links from, add nothing
|
|
|
+ ]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ viewPreviewContent(vn){
|
|
|
+ // if(this.nested) console.log(`viewPreviewContent ${this.id} : vn`, vn);
|
|
|
+ // if(this.nested) console.log(`viewPreviewContent ${this.id} : this`, this);
|
|
|
+ return m('div', {
|
|
|
+ 'uid':this.id,
|
|
|
+ 'class':`dot ${this.dottype}${this.nested ? ' nested':''}`
|
|
|
+ },
|
|
|
+ [
|
|
|
+ // bullet
|
|
|
+ m('div', {'class':'bullet'}, m('span', m.trust('⚫'))),
|
|
|
+ m('span', {
|
|
|
+ 'class':'title',
|
|
|
+ onclick(e){
|
|
|
+ if(!vn.state.opened) vn.state.opened = 1;
|
|
|
+ }
|
|
|
+ }, m.trust(this.nested ? this.breadcrumb : this.title)),
|
|
|
+ m('p', {'class':'summary'}, m.trust(this.summary))
|
|
|
+ ]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ view(vn){
|
|
|
+ // if (this.nested) console.log(`view ${this.id}`);
|
|
|
+ // if (this.opened) console.log(`view ${this.id} : vn`,vn);
|
|
|
+ // if (this.nested) console.log(`view ${this.id} : this`,this);
|
|
|
+
|
|
|
+ return this.active && vn.state.opened
|
|
|
+ ? this.viewOpenedContent(vn) // full view of dot with linked dots
|
|
|
+ : this.viewPreviewContent(vn); // preview dot
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
-
|
|
|
-down vote
|
|
|
-Here's full list of black dotlikes from unicode
|
|
|
-
|
|
|
+full list of black dotlikes from unicode
|
|
|
● - ● - Black Circle
|
|
|
⏺ - ⏺ - Black Circle for Record
|
|
|
⚫ - ⚫ - Medium Black Circle
|
|
@@ -247,34 +238,34 @@ Here's full list of black dotlikes from unicode
|
|
|
🌑 - 🌑 - New Moon Symbol
|
|
|
*/
|
|
|
|
|
|
-
|
|
|
// _______ _ __ __
|
|
|
// / ___/ / (_) /__/ /
|
|
|
// / /__/ _ \/ / / _ /
|
|
|
// \___/_//_/_/_/\_,_/
|
|
|
var _Child = {
|
|
|
- id:null,
|
|
|
- part:null,
|
|
|
- type:null,
|
|
|
- dottype:null,
|
|
|
- // nested:false,
|
|
|
- text:'',
|
|
|
+ // 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;
|
|
|
+ // // 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;
|
|
|
+ // // 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});
|
|
|
+ // return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type, 'dottype':this.dottype});
|
|
|
+ return m(_Dot, vn.attrs);
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -292,31 +283,37 @@ var _Enonce = {
|
|
|
// 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;
|
|
|
+ // // // 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;
|
|
|
+ // // 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}),
|
|
|
+ // m(_Dot, {
|
|
|
+ // 'id':this.id
|
|
|
+ // 'text':this.text
|
|
|
+ // 'type':this.title
|
|
|
+ // 'dottype':this.dottype
|
|
|
+ // }),
|
|
|
+ m(_Dot, vn.attrs),
|
|
|
// addd children
|
|
|
- this.childs.map(c => { return m(_Child, c); })
|
|
|
+ vn.attrs.childs.map(c => { return m(_Child, c); })
|
|
|
]
|
|
|
}
|
|
|
}
|