bachir/app.ethica-spinoza.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mode connection is ok

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-02-27 16:09:52 +01:00
parent 4ce48857bb
commit bd1fc36384
8 changed files with 331 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/dist/main.css
Vendored
+31 -6
View File
@@ -774,11 +774,13 @@ h2.title {
h4.filet {
margin: 0.5em 0 0 70px; }
div.proposition:not(.chapitre), div.proposition.chapitre:first-of-type,
div.proposition:not(.chapitre), div.proposition.chapitre:first-of-type, div.proposition:not(.dot.nested),
div.appendice:not(.chapitre),
div.appendice.chapitre:first-of-type,
div.appendice:not(.dot.nested),
div.chapitre:not(.chapitre),
div.chapitre.chapitre:first-of-type {
div.chapitre.chapitre:first-of-type,
div.chapitre:not(.dot.nested) {
margin-top: 1em; }
div.proposition span.title,
@@ -883,7 +885,9 @@ main#content.mode-text .opened-link .close-link-btn {
border: 1px solid white;
width: 550px; }
.dot > span.title {
margin: 0 0.6em 0 0; }
padding: 0 0.6em 0 0; }
.dot.opened > span.title {
display: block; }
.dot > p.summary {
display: inline-block;
vertical-align: top;
@@ -913,7 +917,9 @@ main#content.mode-text .opened-link .close-link-btn {
text-decoration: none;
font-weight: bold; }
.dot.to-links > section.text {
border-top: 1px solid #e2e2e2; }
border-top: 1px solid #e2e2e2;
padding-top: 1.5em;
margin-top: -1.5em; }
.dot.from-links > section.text {
border-bottom: 1px solid #e2e2e2; }
.dot > nav.links {
@@ -925,8 +931,7 @@ main#content.mode-text .opened-link .close-link-btn {
padding-bottom: 10px; }
.dot > nav.links.from {
top: 100%;
padding-top: 10px;
margin-bottom: 15px; }
padding-top: 10px; }
.dot > nav.links:before {
content: "";
border-left: 1px solid #e2e2e2;
@@ -941,6 +946,26 @@ main#content.mode-text .opened-link .close-link-btn {
transition: opacity 0.4s ease-in-out; }
.dot.disabled > * {
color: grey; }
.dot.opened {
margin-bottom: 15px; }
.dot .bullet, .dot .close-link-btn {
position: absolute;
width: 20px;
left: -24px;
margin: -3px 0 0 0;
text-align: center; }
.dot .bullet span {
font-style: normal;
font-size: 0.2em;
font-weight: 300; }
.dot .close-link-btn {
cursor: pointer; }
.dot .close-link-btn span {
font-style: normal;
font-size: 0.7em;
font-weight: 300; }
.dot.nested {
font-size: 16px; }
footer {
position: fixed;
assets/dist/main.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/dist/main.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/main.js
+2 -2
View File
@@ -25,7 +25,7 @@ const _ModeConnections = require('./modules/ModeConnections');
var Layout = {
view(vn){
console.log('Layout view : lang', vn.attrs.lang);
// console.log('Layout view : lang', vn.attrs.lang);
_i18n.setLang(vn.attrs.lang);
return [
m(_Header, vn.attrs),
@@ -40,7 +40,7 @@ function init(){
console.log('init dbs callback');
console.log("Init _dbs.data", _dbs.data);
console.log("Init _dbs.data_byid", _dbs.data_byid);
// console.log("Init _dbs.data_strct", _dbs.data_strct);
console.log("Init _dbs.data_strct", _dbs.data_strct);
m.route.prefix("");
m.route(document.body, "/fr/text", {
"/:lang/text": {
assets/main.scss
+50 -3
View File
@@ -221,7 +221,7 @@ h4.filet{
div.proposition,
div.appendice,
div.chapitre{
&:not(.chapitre), &.chapitre:first-of-type{margin-top: 1em;}
&:not(.chapitre), &.chapitre:first-of-type, &:not(.dot.nested){margin-top: 1em;}
span.title{
font-size: 1.2em;
font-weight: 500;
@@ -423,8 +423,12 @@ main#content.mode-connections{
// font-kerning: none;
// }
>span.title{
margin: 0 0.6em 0 0;
padding: 0 0.6em 0 0;
}
&.opened>span.title{
display:block;
}
>p.summary{
display: inline-block;
@@ -466,6 +470,9 @@ main#content.mode-connections{
}
&.to-links > section.text{
border-top: 1px solid #e2e2e2;
$decal:1.5em;
padding-top:$decal;
margin-top: -$decal;
}
&.from-links > section.text{
border-bottom: 1px solid #e2e2e2;
@@ -483,7 +490,7 @@ main#content.mode-connections{
&.from{
top:100%;
padding-top:10px;
margin-bottom: 15px;
// margin-bottom: 15px;
}
&:before{
@@ -518,6 +525,46 @@ main#content.mode-connections{
// line-height: 0.8;
// }
&.opened{
// position:relative;
// outline: 1px solid red;
margin-bottom: 15px;
// span.title{
// float:left;
// }
}
.bullet,.close-link-btn{
position:absolute;
width:20px;
// top:0;
left:-24px;
margin:-3px 0 0 0;
// outline: 1px solid green;
// display:inline-block;
// background-color: white;
// z-index: 10;
text-align: center;
}
.bullet{
span{
font-style: normal;
font-size: 0.2em;
font-weight: 300;
}
}
.close-link-btn{
cursor: pointer;
span{
font-style: normal;
font-size: 0.7em;
font-weight: 300;
}
}
&.nested{
font-size: $fs;
}
}
assets/modules/ModeConnections.js
+167 -170
View File
@@ -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); })
]
}
}
assets/modules/dbs.js
+77 -2
View File
@@ -34,6 +34,45 @@ module.exports = {
loaded_dbs:0,
data_byid:[],
data_strct:{},
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)?$/,
id_strct:[
'Partie',
{
'prop':'Proposition', // \d\d
'app' :'Appendice',
'agd' :'Definition generale des affections',
'pr' :'Preface',
'ad' :'Definiton des affections',
'ap' :'Appendice',
'c' :'Corollaire',
'p' :'Postulat',
'd' :'Definition',
'a' :'Axiome',
},
{
// \d\d
// \d
'cd' :'Corollaire Demonstration',
'sc' :'Scolie',
'd' :'Demonstration',
'c' :'Corollaire',
'a' :'Axiome',
'l' :'Lemme',
'p' :'Postulat',
},
{
// \d
'e':'Explication',
'sc':'Scolie',
},
{
'd':'Demonstration',
'c':'Corollaire',
'a':'Axiome',
'sc':'Scolie',
}
],
load(callback) {
// load all dbs, when all loaded call main app callback function
for (var i = 0; i < this.langs.length; i++) {
@@ -94,6 +133,8 @@ module.exports = {
// guess the type from the id
// console.log(this.data[l][p].enonces[e].id);
this.data[l][p].enonces[e].dottype = this.setupType(this.data[l][p].enonces[e].id);
// breadcrumb (full tree title)
this.data[l][p].enonces[e].breadcrumb = this.setupBreadcrumb(this.data[l][p].enonces[e].id);
// records childs in array keyed by ids
this.data_byid[l][this.data[l][p].enonces[e].id] = this.data[l][p].enonces[e];
}
@@ -103,6 +144,8 @@ module.exports = {
if(this.data[l][p].enonces[e].childs[c].id){
// guess the type from the id
this.data[l][p].enonces[e].childs[c].dottype = this.setupType(this.data[l][p].enonces[e].childs[c].id);
// breadcrumb (full tree title)
this.data[l][p].enonces[e].childs[c].breadcrumb = this.setupBreadcrumb(this.data[l][p].enonces[e].childs[c].id);
// records childs in array keyed by ids
this.data_byid[l][this.data[l][p].enonces[e].childs[c].id] = this.data[l][p].enonces[e].childs[c];
}
@@ -114,10 +157,42 @@ module.exports = {
// console.log('this.data_byid', this.data_byid);
this.parseStrct(callback);
},
setupBreadcrumb(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 breadcrumb = ""
var m = id.match(this.rx_id);
if(m){
m.shift();
// console.log("id", m);
for (let i = 0; i < m.length; i++) { // we loop through match result variables
// console.log('m[i]', m[i]);
if(i == 0){ // first digit is part number
breadcrumb += `${this.id_strct[i]} ${m[i]}`
}else{
if(typeof m[i] !== 'undefined'){
if(isNaN(m[i])){ // if not a number we get the label
breadcrumb += ` ${this.id_strct[i][m[i]]}`
}else{ // if its a number
if(i == 1){ // we just add the number to the breadcrumb preceded by 'Proposition'
breadcrumb += ` ${this.id_strct[i]['prop']} ${m[i]}`
}else{ // we just add the number to the breadcrumb
breadcrumb += ` ${m[i]}`
}
}
}else{ // if variable is not defined we are at the end of the id
break
}
}
}
}
// console.log('breadcrumb', breadcrumb);
return breadcrumb;
},
setupType(id){
// console.log('setupType',id);
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 = id.match(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 = id.match(this.rx_id);
if(m){
switch(true){
case /^\d{2}$/.test(m[2]): // proposition
assets/modules/ui.js
+2 -2
View File
@@ -41,7 +41,7 @@ module.exports = {
e._part = e.getAttribute('part');
part_titles.push(e)
});
console.log('part_titles', part_titles);
// console.log('part_titles', part_titles);
var stkd_part,
last_stkd_part = false,
@@ -64,7 +64,7 @@ module.exports = {
if (stkd_part) {
// console.log('got stkd_part', stkd_part._part);
if(stkd_part._part !== last_stkd_part._part){
console.log('new sticky', stkd_part.innerHTML);
// console.log('new sticky', stkd_part.innerHTML);
// clone only once
clone = stkd_part.cloneNode(true);
stkd_wrapper.innerHTML = '';