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

assets/dist/main.css

@@ -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*/

assets/main.js

@@ -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>'))
+      ])
+    ]
+  }
+}
 //     __  __     __
 //    / / / /__  / /___  ___  __________
 //   / /_/ / _ \/ / __ \/ _ \/ ___/ ___/

assets/main.scss

@@ -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;}
+}

index.html

@@ -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>