typo styles ok, text mode ok with close bouton, bugfixes

This commit is contained in:
Bachir Soussi Chiadmi
2018-02-26 18:52:44 +01:00
parent f69747ac0a
commit 4ce48857bb
9 changed files with 541 additions and 360 deletions
+110 -99
View File
@@ -41,12 +41,22 @@ var _Dot = {
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) + " …";
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){
@@ -89,73 +99,15 @@ var _Dot = {
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 => {
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 from : obj', obj);
// return a dot
// console.log('link to : obj', obj);
return m(_Dot, {
"id":id,
'text':obj.text,
@@ -166,41 +118,100 @@ var _Dot = {
// 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
];
}
})
)
: 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
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))
];
this.setPreviewContent(vn);
}
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
this.dot_content
);
},
onupdate(vn){
+38 -24
View File
@@ -16,6 +16,7 @@ var _Ui = require('./ui.js');
// / /___/ / / / / ,<
// /_____/_/_/ /_/_/|_|
var _Link = {
parent_id:null,
tid:"",
opened:false,
oninit(vn){
@@ -29,16 +30,28 @@ var _Link = {
view(vn){
this.tid_known = typeof _dbs.data_byid[_dbs.lang][this.tid] === 'undefined' ? false : true;
if (!this.tid_known) {
// console.log('!! target id '+this.tid+' unkonwn !!');
// console.log(`!! in ${this.id}, target id ${this.tid} is unkonwn !!`);
}
if(this.opened && this.tid_known){
// console.log('this.tid', vn.state);
// traget object
this.tob = Object.assign({"nested":true},_dbs.data_byid[_dbs.lang][this.tid]);
return m('div', {'class':'opened-link'},
[
m('span', {'class':"link text"}, vn.children),
m('div', {
'class':'close-link-btn',
onclick(e){
// e.preventDefault();
console.log('click close btn', this);
vn.state.opened = false;
// return false;
}
}, m('span', m.trust("&#128473;"))),
typeof _dbs.data_byid[_dbs.lang][this.tid].childs != "undefined"
? m(_Enonce, _dbs.data_byid[_dbs.lang][this.tid])
: m(_Item, _dbs.data_byid[_dbs.lang][this.tid])
? m(_Enonce, this.tob)
: m(_Item, this.tob)
]
);
}else{
@@ -93,7 +106,7 @@ function parseTextDom(nodes){
// again parse node's childs
n.childs = parseTextDom(nodes[i].childNodes);
}
}else if (nodes[i].textContent.length > 1){
}else if (nodes[i].textContent.length > 0){
// if node has no localName it is probably a #text node
// we record it if it's not empty
n.tag='#text';
@@ -133,15 +146,10 @@ var _Text = {
// !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
// convert markdown to html
this.texthtml = markdown.render(this.text)
// TODO: fixe number link text disapear [3](1d3) ( in 104d )
// TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_ ( in 104d )
// parse html string to virtual dom
// convert html string to virtual dom
this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
// get the text nodes (avoid html document extra)
// get the text nodes (avoid html document extra) and apply some transformations
this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
if(this.id == "115sc"){
// console.log(this.textchilds);
}
},
oninit(vn){
this.id = vn.attrs.id;
@@ -179,6 +187,7 @@ var _Item = {
// 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 || null;
},
onbeforeupdate(vn, old){
this.nested = vn.attrs.nested || false;
@@ -186,18 +195,22 @@ var _Item = {
this.text = vn.attrs.text;
},
view(vn){
// if(this.id == "340c2"){
// console.log(`${this.id} vn.attrs `,vn.attrs);
// }
return m("section", {
'id':this.id,
'class':'item'+(this.nested ? ' nested':'')
// 'class':'item'+(this.nested ? ' nested':'')
'class' :`item${this.nested ? ' nested':''} ${this.dottype}`
},
[
// create title node
m("h3", {
// create title node (only if not nested)
!this.nested ? m("h3", {
// 'ref':vn.attrs.href,
onclick(e){
vn.state.active = vn.state.active ? 0 : 1;
}
}, m.trust(markdown.renderInline(this.type))),
// onclick(e){ WHAT IS THIS STATE ACTIVE ???
// vn.state.active = vn.state.active ? 0 : 1;
// }
}, m.trust(markdown.renderInline(this.type))) : null,
// create text node
m(_Text, {'text':this.text, 'id':this.id})
]
@@ -225,6 +238,7 @@ var _Enonce = {
this.text = vn.attrs.text;
this.childs = vn.attrs.childs || [];
this.nested = vn.attrs.nested || false;
this.dottype = vn.attrs.dottype || "no-dottype";
},
onbeforeupdate(vn, old) {
// console.log(vn.attrs.childs);
@@ -238,15 +252,15 @@ var _Enonce = {
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
return m("section", {
'id' :this.id,
'class' :'enonce'+(this.nested ? ' nested':'')
'class' :`enonce${this.nested ? ' nested':''} ${this.dottype}`
},
[
// create title node
m("h2", {}, m.trust(markdown.renderInline(this.title))),
// create title node (only if not nested)
!this.nested ? m("h2", {}, m.trust(markdown.renderInline(this.title))) : null,
// create text node
m(_Text, {'text':this.text, 'id':this.id}),
// addd children
this.childs.map(c => { return m(_Item, c); })
// add children (only if not nested)
!this.nested ? this.childs.map(c => { return m(_Item, c); }) : null
])
}
}
@@ -268,7 +282,7 @@ var _Part = {
this.enonces = vn.attrs.enonces;
},
view(vn){
console.log("part enonces", vn.attrs.enonces);
// console.log("part enonces", vn.attrs.enonces);
return m("section", {
'id' :this.id,
'class' :'part'
+5 -32
View File
@@ -120,75 +120,48 @@ module.exports = {
var m = id.match(rx_id);
if(m){
switch(true){
case /^\d{2}$/.test(m[2]):
case /^\d{2}$/.test(m[2]): // proposition
switch(true){
case /^cd$/.test(m[3]) : return 'corollaire-demo';
case /^cd$/.test(m[3]) : return 'corollaire-demo';
case /^sc$/.test(m[3]) : return 'scolie';
case /^sc$/.test(m[3]) : return 'scolie';
case /^d$/.test(m[3]) : return 'demonstration';
case /^d$/.test(m[3]) : return 'demonstration';
case /^c$/.test(m[3]) :
switch(true){
case /^sc$/.test(m[4]): return 'scolie';
case /^sc$/.test(m[4]): return 'scolie';
case /^d$/.test(m[4]) : return 'demonstration';
case /^d$/.test(m[4]) : return 'demonstration';
case /^d$/.test(m[5]) : return 'demonstration';
case /^d$/.test(m[5]) : return 'demonstration';
case /^sc$/.test(m[5]): return 'scolie';
case /^sc$/.test(m[5]): return 'scolie';
case /^\d$/.test(m[4]): return 'corollaire';
case /^\d$/.test(m[4]): return 'corollaire';
case !m[4] : return 'corollaire';
case !m[4] : return 'corollaire';
}
case /^a$/.test(m[3]) : return 'axiom';
case /^a$/.test(m[3]) : return 'axiom';
case /^a$/.test(m[3]) : return 'prop-axiom';
case /^l$/.test(m[3]) :
switch(true){
case /^d$/.test(m[5]) : return 'demonstration';
case /^d$/.test(m[5]) : return 'demonstration';
case /^sc$/.test(m[5]): return 'scolie';
case /^sc$/.test(m[5]): return 'scolie';
case !m[5] : return 'lemme';
case /^d$/.test(m[5]) : return 'lemme-demonstration';
case /^sc$/.test(m[5]): return 'lemme-scolie';
case /^c$/.test(m[5]) : return 'lemme-corrollaire';
case !m[5] : return 'lemme';
}
case /^p$/.test(m[3]) : return 'postulat';
case /^p$/.test(m[3]) : return 'postulat';
case /^\d$/.test(m[3]) : return '??';
case /^\d$/.test(m[3]) : return '??';
case /^\d{2}$/.test(m[3]) : return '??';
case /^\d{2}$/.test(m[3]) : return '??';
case !m[3] : return 'proposition';
case !m[3] : return 'proposition';
}
case /^app|ap$/.test(m[2]) : return 'appendice';
case /^app|ap$/.test(m[2]) : return 'appendice';
case /^agd$/.test(m[2]) : return 'def-gen-affect';
case /^agd$/.test(m[2]) : return 'def-gen-affect';
case /^pr$/.test(m[2]) : return 'preface';
case /^pr$/.test(m[2]) : return 'preface';
case /^ad$/.test(m[2]) :
switch(true){
case /^e$/.test(m[4]) :return 'explication';
case /^e$/.test(m[4]) :return 'explication';
case !m[4] :return 'def-affect';
case !m[4] :return 'def-affect';
}
case /^c$/.test(m[2]) : return 'chapitre';
case /^c$/.test(m[2]) : return 'chapitre';
case /^p$/.test(m[2]) : return 'postulat';
case /^p$/.test(m[2]) : return 'postulat';
case /^d$/.test(m[2]) :
switch(true){
case /^e$/.test(m[4]) : return 'explication';
case /^e$/.test(m[4]) : return 'explication';
case !m[4] : return 'definition';
case !m[4] : return 'definition';
}
case /^a$/.test(m[2]) : return 'axiom';
case /^a$/.test(m[2]) : return 'axiom';
}
// }
}
+7 -4
View File
@@ -28,12 +28,15 @@ module.exports = {
// console.log(header_height);
// create the stkd titles wrapper block
let stkd_wrapper = document.createElement('div');
stkd_wrapper.classList.add('sticky-clone-wrapper');
document.body.append(stkd_wrapper);
var stkd_wrapper = document.querySelector('.sticky-clone-wrapper');
if(!stkd_wrapper){
var stkd_wrapper = document.createElement('div');
stkd_wrapper.classList.add('sticky-clone-wrapper');
document.body.append(stkd_wrapper);
}
// get all part title
let part_titles = new Array();
var part_titles = new Array();
Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
e._part = e.getAttribute('part');
part_titles.push(e)