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

refactored all script : replaced onupdate by onbeforeupdate (red more about lifecycle in mithrile)

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-07-10 17:30:43 +02:00
parent 635e921e50
commit 915fb78f3a
6 changed files with 13259 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/dist/main.css
Vendored
+22 -9
View File
@@ -750,8 +750,18 @@ html, body {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
header > * { header {
display: inline-block; } 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 { aside#menus {
float: right; } float: right; }
@@ -764,14 +774,11 @@ aside#menus {
text-decoration: none; text-decoration: none;
color: inherit; } color: inherit; }
#app {
position: relative;
text-align: center;
margin: 0 auto; }
main#content { main#content {
display: inline-block; margin: 3em auto;
text-align: left; } width: 450px; }
main#content > * {
width: 450px; }
h1.part { h1.part {
font-size: 1.6em; font-size: 1.6em;
@@ -812,4 +819,10 @@ section.enonce {
padding-left: 2em; padding-left: 2em;
border-left: 1px solid #999; } border-left: 1px solid #999; }
footer {
position: fixed;
bottom: 0; }
footer > * {
margin-left: 1em; }
/*# sourceMappingURL=main.css.map*/ /*# sourceMappingURL=main.css.map*/
assets/dist/main.js
Vendored
+13099 -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
+115 -59
View File
@@ -19,10 +19,9 @@ var markdown = require('markdown-it')()
var _lang; var _lang;
var _langs = [ var _langs = [
{'lc':'fr', 'label':'fr (appuhn)', 'db':'2-Appuhn-FR-ethicadb.json'}, {'lc':'fr', 'label':'fr', 'db':'2-Appuhn-FR-ethicadb.json'},
{'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'} {'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'}
]; ];
// console.log(_langs);
var _dbs = {}; var _dbs = {};
var _dbs_by_id = {}; var _dbs_by_id = {};
@@ -34,7 +33,7 @@ function init(){
console.log(_lang); console.log(_lang);
// create lang menu // create lang menu
m.mount(document.getElementById('menus'), _LangMenu); // m.mount(document.getElementById('menus'), _LangMenu);
// load all dbs, when loaded init main app // load all dbs, when loaded init main app
for (var i = 0; i < _langs.length; i++) { for (var i = 0; i < _langs.length; i++) {
@@ -75,7 +74,7 @@ var _LangMenu = {
// change db // change db
_lang = lang; _lang = lang;
// redraw UI // redraw UI
m.redraw(); // m.redraw();
} }
return false; return false;
} }
@@ -121,7 +120,8 @@ function onDBLoaded(lc, json){
if (_loaded_dbs == _langs.length) { if (_loaded_dbs == _langs.length) {
console.log("_dbs", _dbs); console.log("_dbs", _dbs);
parseDBs(); 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 = { var _Text = {
id:null,
text:"",
texthtml:"",
textdom:null,
textchilds:[], textchilds:[],
oninit: function(vn){ parsetext: function(){
// debug = vn.attrs.id == '1a5'; // console.log('parsetext', this);
// !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
// convert markdown to html // 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 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 ) // TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_ ( in 104d )
// parse html string to virtual dom // 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) // get the text nodes (avoid html document extra)
// if(debug) console.log('textdom',textdom); this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes);
}, },
onupdate: function(vn){ oninit: function(vn){
var texthtml = markdown.render(vn.attrs.text) this.id = vn.attrs.id;
var textdom = new DOMParser().parseFromString(texthtml, "text/html"); this.text = vn.attrs.text;
vn.state.textchilds = parseTextDom(textdom.getElementsByTagName('body')[0].childNodes); this.parsetext();
},
onbeforeupdate: function(vn,old){
this.text = vn.attrs.text;
this.parsetext();
}, },
view: function(vn){ view: function(vn){
// console.log('_Text :: view : '+vn.attrs.slug, vn); // console.log('_Text :: view : '+vn.attrs.slug, vn);
// console.log('vn.state.textchilds', vn.state.textchilds);
return m('div', return m('div',
{'class':'text'}, {'class':'text'},
// loop through childNodes list generated by parseTextDom() in init // loop through childNodes list generated by parseTextDom() in init
vn.state.textchilds.map(populateTextDom) this.textchilds.map(populateTextDom)
); // /m.div.text ); // /m.div.text
} // view: } // view:
} }
@@ -282,20 +289,27 @@ var _Text = {
// _/ // /_/ __/ / / / / / // _/ // /_/ __/ / / / / /
// /___/\__/\___/_/ /_/ /_/ // /___/\__/\___/_/ /_/ /_/
var _Item = { var _Item = {
// id:null, id:null,
// part:null, part:null,
// type:null, type:null,
// nested:false, nested:false,
// oninit: function(vn){ oninit: function(vn){
// // console.log('vn.attrs', vn.attrs); // console.log('vn.attrs', vn.attrs);
// vn.state.id = vn.attrs.id; this.id = vn.attrs.id;
// // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1]; this.type = vn.attrs.type;
// vn.state.nested = vn.attrs.nested | false; // 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){ view: function(vn){
return m("section", { return m("section", {
'id':vn.attrs.id, 'id':this.id,
'class':'item'+((vn.attrs.nested || false) ? ' nested':'') 'class':'item'+(this.nested ? ' nested':'')
}, },
[ [
// create title node // create title node
@@ -304,9 +318,9 @@ var _Item = {
onclick: function(e){ onclick: function(e){
vn.state.active = vn.state.active ? 0 : 1; vn.state.active = vn.state.active ? 0 : 1;
} }
}, vn.attrs.type), }, this.type),
// create text node // 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 = { var _Enonce = {
// partid:null, partid:null,
// id:null, id:null,
// title:null, title:null,
// nested:false, text:null,
nested:false,
childs:[], childs:[],
oninit:function(vn){ oninit:function(vn){
// // console.log('Enonce on init', vn); // // console.log('Enonce on init', vn);
// vn.state.partid = vn.attrs.partid; this.partid = vn.attrs.partid;
// vn.state.id = vn.attrs.id; this.id = vn.attrs.id;
// vn.state.title = vn.attrs.title; this.title = vn.attrs.title;
vn.state.childs = vn.attrs.childs; this.text = vn.attrs.text;
// vn.state.nested = vn.attrs.nested | false; this.childs = vn.attrs.childs;
this.nested = vn.attrs.nested || false;
}, },
onupdate:function(vn) { onbeforeupdate:function(vn, old) {
vn.state.childs = vn.attrs.childs; // 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){ view: function(vn){
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
return m("section", { return m("section", {
'id' :vn.attrs.id, 'id' :this.id,
'class' :'enonce'+((vn.attrs.nested || false) ? ' nested':'') 'class' :'enonce'+(this.nested ? ' nested':'')
}, },
[ [
// create title node // create title node
m("h2", {}, vn.attrs.title), m("h2", {}, this.title),
// create text node // create text node
m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id}), m(_Text, {'text':this.text, 'id':this.id}),
// addd children // addd children
vn.state.childs.map(function(c){ this.childs.map(function(c){
return m(_Item, c) return m(_Item, c)
}) })
]) ])
@@ -358,19 +380,32 @@ var _Enonce = {
// / ____/ /_/ / / / /_ // / ____/ /_/ / / / /_
// /_/ \__,_/_/ \__/ // /_/ \__,_/_/ \__/
var _Part = { 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){ view: function(vn){
// console.log(vn.attrs.enonces);
return m("section", { return m("section", {
'id' :vn.attrs.id, 'id' :this.id,
'class' :'part' 'class' :'part'
}, },
[ [
// create title node // create title node
m("h1", {'class':'part'}, vn.attrs.title), m("h1", {'class':'part'}, this.title),
// create text node // create text node
vn.attrs.enonces.map(function(e){ this.enonces.map(function(e){
return m(_Enonce, Object.assign({"partid":vn.attrs.id},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>'))
])
]
}
}
// __ __ __ // __ __ __
// / / / /__ / /___ ___ __________ // / / / /__ / /___ ___ __________
// / /_/ / _ \/ / __ \/ _ \/ ___/ ___/ // / /_/ / _ \/ / __ \/ _ \/ ___/ ___/
assets/main.scss
+21 -10
View File
@@ -22,8 +22,13 @@ html, body{
} }
header{ header{
position: fixed;
width:100%; top:0; z-index: 5;
>*{ >*{
display: inline-block; display: inline-block;
vertical-align: top;
&:first-child{ margin-left: 1em;}
&:last-child{ margin-right: 1em;}
} }
} }
@@ -44,18 +49,18 @@ aside#menus{
} }
} }
#app{ // #app{
position: relative; // position: relative;
text-align: center; // text-align: center;
margin: 0 auto; // margin: 3em auto;
} // }
main#content{ main#content{
display:inline-block; margin: 3em auto;
text-align: left; width: 450px;
// &>*{ &>*{
// width: 450px; width: 450px;
// } }
} }
h1.part{ h1.part{
@@ -114,3 +119,9 @@ section.enonce{
} }
} }
footer{
position: fixed;
bottom: 0;
>*{margin-left: 1em;}
}
index.html
-15
View File
@@ -6,21 +6,6 @@
<link rel="stylesheet" href="assets/dist/main.css"> <link rel="stylesheet" href="assets/dist/main.css">
</head> </head>
<body> <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> <script src="assets/dist/main.js" charset="utf-8"></script>
</body> </body>