refactored all script : replaced onupdate by onbeforeupdate (red more about lifecycle in mithrile)
This commit is contained in:
Bachir Soussi Chiadmi
Vendored
+22
-9
@@ -750,8 +750,18 @@ html, body {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
header > * {
|
||||
display: inline-block; }
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 5; }
|
||||
header > * {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
header > *:first-child {
|
||||
margin-left: 1em; }
|
||||
header > *:last-child {
|
||||
margin-right: 1em; }
|
||||
|
||||
aside#menus {
|
||||
float: right; }
|
||||
@@ -764,14 +774,11 @@ aside#menus {
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0 auto; }
|
||||
|
||||
main#content {
|
||||
display: inline-block;
|
||||
text-align: left; }
|
||||
margin: 3em auto;
|
||||
width: 450px; }
|
||||
main#content > * {
|
||||
width: 450px; }
|
||||
|
||||
h1.part {
|
||||
font-size: 1.6em;
|
||||
@@ -812,4 +819,10 @@ section.enonce {
|
||||
padding-left: 2em;
|
||||
border-left: 1px solid #999; }
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0; }
|
||||
footer > * {
|
||||
margin-left: 1em; }
|
||||
|
||||
/*# sourceMappingURL=main.css.map*/
|
||||
Vendored
+13099
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+115
-59
@@ -19,10 +19,9 @@ var markdown = require('markdown-it')()
|
||||
|
||||
var _lang;
|
||||
var _langs = [
|
||||
{'lc':'fr', 'label':'fr (appuhn)', 'db':'2-Appuhn-FR-ethicadb.json'},
|
||||
{'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'}
|
||||
{'lc':'fr', 'label':'fr', 'db':'2-Appuhn-FR-ethicadb.json'},
|
||||
{'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'}
|
||||
];
|
||||
// console.log(_langs);
|
||||
|
||||
var _dbs = {};
|
||||
var _dbs_by_id = {};
|
||||
@@ -34,7 +33,7 @@ function init(){
|
||||
console.log(_lang);
|
||||
|
||||
// create lang menu
|
||||
m.mount(document.getElementById('menus'), _LangMenu);
|
||||
// m.mount(document.getElementById('menus'), _LangMenu);
|
||||
|
||||
// load all dbs, when loaded init main app
|
||||
for (var i = 0; i < _langs.length; i++) {
|
||||
@@ -75,7 +74,7 @@ var _LangMenu = {
|
||||
// change db
|
||||
_lang = lang;
|
||||
// redraw UI
|
||||
m.redraw();
|
||||
// m.redraw();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -121,7 +120,8 @@ function onDBLoaded(lc, json){
|
||||
if (_loaded_dbs == _langs.length) {
|
||||
console.log("_dbs", _dbs);
|
||||
parseDBs();
|
||||
m.mount(document.getElementById('app'), _Tree);
|
||||
// m.mount(document.getElementById('app'), _Tree);
|
||||
m.mount(document.body, _App);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -247,31 +247,38 @@ function populateTextDom(n,i){
|
||||
}
|
||||
|
||||
var _Text = {
|
||||
id:null,
|
||||
text:"",
|
||||
texthtml:"",
|
||||
textdom:null,
|
||||
textchilds:[],
|
||||
oninit: function(vn){
|
||||
// debug = vn.attrs.id == '1a5';
|
||||
parsetext: function(){
|
||||
// console.log('parsetext', this);
|
||||
// !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
|
||||
// convert markdown to html
|
||||
var texthtml = markdown.render(vn.attrs.text)
|
||||
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
|
||||
var textdom = new DOMParser().parseFromString(texthtml, "text/html");
|
||||
this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
|
||||
// get the text nodes (avoid html document extra)
|
||||
// if(debug) console.log('textdom',textdom);
|
||||
vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes);
|
||||
this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
|
||||
},
|
||||
onupdate: function(vn){
|
||||
var texthtml = markdown.render(vn.attrs.text)
|
||||
var textdom = new DOMParser().parseFromString(texthtml, "text/html");
|
||||
vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes);
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.text = vn.attrs.text;
|
||||
this.parsetext();
|
||||
},
|
||||
onbeforeupdate: function(vn,old){
|
||||
this.text = vn.attrs.text;
|
||||
this.parsetext();
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log('_Text :: view : '+vn.attrs.slug, vn);
|
||||
// console.log('vn.state.textchilds', vn.state.textchilds);
|
||||
return m('div',
|
||||
{'class':'text'},
|
||||
// loop through childNodes list generated by parseTextDom() in init
|
||||
vn.state.textchilds.map(populateTextDom)
|
||||
this.textchilds.map(populateTextDom)
|
||||
); // /m.div.text
|
||||
} // view:
|
||||
}
|
||||
@@ -282,20 +289,27 @@ var _Text = {
|
||||
// _/ // /_/ __/ / / / / /
|
||||
// /___/\__/\___/_/ /_/ /_/
|
||||
var _Item = {
|
||||
// id:null,
|
||||
// part:null,
|
||||
// type:null,
|
||||
// nested:false,
|
||||
// oninit: function(vn){
|
||||
// // console.log('vn.attrs', vn.attrs);
|
||||
// vn.state.id = vn.attrs.id;
|
||||
// // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
||||
// vn.state.nested = vn.attrs.nested | false;
|
||||
// },
|
||||
id:null,
|
||||
part:null,
|
||||
type:null,
|
||||
nested:false,
|
||||
oninit: function(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;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
this.nested = vn.attrs.nested || false;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = vn.attrs.text;
|
||||
},
|
||||
view: function(vn){
|
||||
return m("section", {
|
||||
'id':vn.attrs.id,
|
||||
'class':'item'+((vn.attrs.nested || false) ? ' nested':'')
|
||||
'id':this.id,
|
||||
'class':'item'+(this.nested ? ' nested':'')
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
@@ -304,9 +318,9 @@ var _Item = {
|
||||
onclick: function(e){
|
||||
vn.state.active = vn.state.active ? 0 : 1;
|
||||
}
|
||||
}, vn.attrs.type),
|
||||
}, this.type),
|
||||
// create text node
|
||||
m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id})
|
||||
m(_Text, {'text':this.text, 'id':this.id})
|
||||
]
|
||||
)
|
||||
}
|
||||
@@ -318,34 +332,42 @@ var _Item = {
|
||||
// / /___/ / / / /_/ / / / / /__/ __/
|
||||
// /_____/_/ /_/\____/_/ /_/\___/\___/
|
||||
var _Enonce = {
|
||||
// partid:null,
|
||||
// id:null,
|
||||
// title:null,
|
||||
// nested:false,
|
||||
partid:null,
|
||||
id:null,
|
||||
title:null,
|
||||
text:null,
|
||||
nested:false,
|
||||
childs:[],
|
||||
oninit:function(vn){
|
||||
// // console.log('Enonce on init', vn);
|
||||
// vn.state.partid = vn.attrs.partid;
|
||||
// vn.state.id = vn.attrs.id;
|
||||
// vn.state.title = vn.attrs.title;
|
||||
vn.state.childs = vn.attrs.childs;
|
||||
// vn.state.nested = vn.attrs.nested | false;
|
||||
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;
|
||||
},
|
||||
onupdate:function(vn) {
|
||||
vn.state.childs = vn.attrs.childs;
|
||||
onbeforeupdate:function(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);
|
||||
},
|
||||
view: function(vn){
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
|
||||
return m("section", {
|
||||
'id' :vn.attrs.id,
|
||||
'class' :'enonce'+((vn.attrs.nested || false) ? ' nested':'')
|
||||
'id' :this.id,
|
||||
'class' :'enonce'+(this.nested ? ' nested':'')
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h2", {}, vn.attrs.title),
|
||||
m("h2", {}, this.title),
|
||||
// create text node
|
||||
m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id}),
|
||||
m(_Text, {'text':this.text, 'id':this.id}),
|
||||
// addd children
|
||||
vn.state.childs.map(function(c){
|
||||
this.childs.map(function(c){
|
||||
return m(_Item, c)
|
||||
})
|
||||
])
|
||||
@@ -358,19 +380,32 @@ var _Enonce = {
|
||||
// / ____/ /_/ / / / /_
|
||||
// /_/ \__,_/_/ \__/
|
||||
var _Part = {
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.title = vn.attrs.title;
|
||||
this.enonces = vn.attrs.enonces;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
// console.log('_Part, onbeforeupdate old',old);
|
||||
this.title = vn.attrs.title;
|
||||
this.enonces = vn.attrs.enonces;
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log(vn.attrs.enonces);
|
||||
return m("section", {
|
||||
'id' :vn.attrs.id,
|
||||
'class' :'part'
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, vn.attrs.title),
|
||||
// create text node
|
||||
vn.attrs.enonces.map(function(e){
|
||||
return m(_Enonce, Object.assign({"partid":vn.attrs.id},e))
|
||||
})
|
||||
])
|
||||
'id' :this.id,
|
||||
'class' :'part'
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, this.title),
|
||||
// create text node
|
||||
this.enonces.map(function(e){
|
||||
// console.log(e.text);
|
||||
return m(_Enonce, Object.assign({"partid":this.id},e))
|
||||
})
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -390,6 +425,27 @@ var _Tree = {
|
||||
}
|
||||
}
|
||||
|
||||
// ___
|
||||
// / | ____ ____
|
||||
// / /| | / __ \/ __ \
|
||||
// / ___ |/ /_/ / /_/ /
|
||||
// /_/ |_/ .___/ .___/
|
||||
// /_/ /_/
|
||||
var _App = {
|
||||
view: function(){
|
||||
console.log('_App view', _lang);
|
||||
return [
|
||||
m('header', [
|
||||
m('h1', 'Ethica'),
|
||||
m('aside', {'id':"menus"}, m(_LangMenu) )
|
||||
]),
|
||||
m(_Tree),
|
||||
m('footer', [
|
||||
m('p', m.trust('© 2017 <a href="./">Ethica Spinoza</a>'))
|
||||
])
|
||||
]
|
||||
}
|
||||
}
|
||||
// __ __ __
|
||||
// / / / /__ / /___ ___ __________
|
||||
// / /_/ / _ \/ / __ \/ _ \/ ___/ ___/
|
||||
|
||||
+21
-10
@@ -22,8 +22,13 @@ html, body{
|
||||
}
|
||||
|
||||
header{
|
||||
position: fixed;
|
||||
width:100%; top:0; z-index: 5;
|
||||
>*{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
&:first-child{ margin-left: 1em;}
|
||||
&:last-child{ margin-right: 1em;}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,18 +49,18 @@ aside#menus{
|
||||
}
|
||||
}
|
||||
|
||||
#app{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
// #app{
|
||||
// position: relative;
|
||||
// text-align: center;
|
||||
// margin: 3em auto;
|
||||
// }
|
||||
|
||||
main#content{
|
||||
display:inline-block;
|
||||
text-align: left;
|
||||
// &>*{
|
||||
// width: 450px;
|
||||
// }
|
||||
margin: 3em auto;
|
||||
width: 450px;
|
||||
&>*{
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
h1.part{
|
||||
@@ -114,3 +119,9 @@ section.enonce{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
>*{margin-left: 1em;}
|
||||
}
|
||||
|
||||
+1
-16
@@ -6,22 +6,7 @@
|
||||
<link rel="stylesheet" href="assets/dist/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ethica</h1>
|
||||
<aside id="menus">
|
||||
<!-- <ul id="languages"> -->
|
||||
<!-- <li><a href="/?lang=fr">fr (Appuhn)</a></li>
|
||||
<li><a href="/?lang=bra">bra</a></li> -->
|
||||
<!-- </ul> -->
|
||||
</aside>
|
||||
</header>
|
||||
<section id="app">
|
||||
|
||||
</section>
|
||||
<footer>
|
||||
<p>© 2017 <a href="./">Ethica Spinoza</a></p>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="assets/dist/main.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user