improved route strategy (url path), headers menu are working

.htaccess

@@ -0,0 +1,4 @@
+RewriteEngine on
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule . index.html [L]

assets/dist/main.css

@@ -753,77 +753,136 @@ html, body {
 header {
   position: fixed;
   width: 100%;
-  height: 3em;
+  height: 4em;
   top: 0;
   z-index: 5;
   background-color: white; }
   header > * {
     display: inline-block;
-    vertical-align: bottom; }
+    vertical-align: text-bottom; }
     header > *:last-child {
       margin-right: 1em; }
   header > h1 {
+    font-size: 3em;
     margin: 0 0 0 70px; }
-
-nav#menus {
-  float: right; }
-  nav#menus > ul {
-    display: inline-block; }
-  nav#menus ul {
-    margin: 0 0.5em; }
-    nav#menus ul li {
-      list-style: none;
-      line-height: 0.9;
-      display: inline-block;
-      vertical-align: middle;
-      margin: 0 0.2em; }
-      nav#menus ul li a {
-        text-decoration: none;
-        color: inherit; }
+  header #menus > * {
+    display: inline-block;
+    vertical-align: top; }
+  header #menus nav {
+    padding: 1em 1em;
+    position: relative; }
+    header #menus nav h3 {
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      transition: color 0.3s ease-in-out; }
+    header #menus nav ul {
+      position: absolute;
+      margin: 0;
+      left: 0;
+      padding: 0 1em 1em;
+      background-color: white;
+      white-space: nowrap;
+      height: 1px;
+      opacity: 0;
+      overflow: hidden;
+      transition: opacity 0.3s ease-in-out; }
+      header #menus nav ul li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        transition: color 0.3s ease-in-out;
+        font-weight: 500;
+        font-size: 1.2em;
+        line-height: 1.2; }
+        header #menus nav ul li a {
+          color: inherit;
+          text-decoration: none; }
+  header #menus:hover h3 {
+    color: #646464; }
+  header #menus:hover nav:hover {
+    z-index: 10; }
+    header #menus:hover nav:hover h3 {
+      color: #000; }
+    header #menus:hover nav:hover ul {
+      height: auto;
+      opacity: 1;
+      transition: height opacity 0.3s ease-in-out; }
+    header #menus:hover nav:hover li {
+      color: #646464; }
+      header #menus:hover nav:hover li:hover {
+        color: #000; }
+
+.sticky-clone-wrapper {
+  padding-top: 4em;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  background-color: white; }
+  .sticky-clone-wrapper h1.part-title {
+    font-size: 1.6em; }
+    body.inline .sticky-clone-wrapper h1.part-title {
+      margin: 0 0 0 70px; }
+    body.tree .sticky-clone-wrapper h1.part-title {
+      margin: 0 0 0 70px; }
 
 main#content {
-  margin-top: 3em; }
+  margin-top: 4em; }
+  main#content h1.part-title {
+    font-size: 1.6em;
+    width: 450px; }
+  main#content section.part {
+    position: relative; }
+  main#content h2.title, main#content h2.filet {
+    font-size: 1em;
+    width: 450px; }
 
-h1.part {
-  font-size: 1.6em;
-  width: 450px; }
+main#content.inline h1.part-title {
+  margin: 1em 0 0 70px; }
 
-section.enonce {
+main#content.inline h2.title, main#content.inline h4.filet {
+  margin: 1em 0 0 70px; }
+
+main#content.inline section.enonce {
   width: 450px;
-  margin: 1em 0 1em 50px;
+  margin: 1em 0 1em 70px;
   overflow-x: visible;
   font-family: 'amiri', sans-serif;
   font-size: 16px;
   font-kerning: auto;
   line-height: 1.4; }
-  section.enonce h2 {
+  main#content.inline section.enonce h2 {
     font-size: 1em;
     font-weight: 300;
     margin: 0;
     cursor: pointer; }
-  section.enonce h3 {
+  main#content.inline section.enonce h3 {
     font-size: 0.9em;
     font-weight: 300;
     margin: 0;
     cursor: pointer; }
-  section.enonce div.text {
+  main#content.inline section.enonce div.text {
     font-size: 1.3em; }
-    section.enonce div.text div.paragraph {
+    main#content.inline section.enonce div.text div.paragraph {
       margin-bottom: 1em; }
-      section.enonce div.text div.paragraph div.opened-link {
+      main#content.inline section.enonce div.text div.paragraph div.opened-link {
         display: inline; }
-      section.enonce div.text div.paragraph a.link, section.enonce div.text div.paragraph span.link.text {
+      main#content.inline section.enonce div.text div.paragraph a.link, main#content.inline section.enonce div.text div.paragraph span.link.text {
         font-weight: 600;
         text-decoration: none;
         color: inherit; }
-      section.enonce div.text div.paragraph span.link.text:after {
+      main#content.inline section.enonce div.text div.paragraph span.link.text:after {
         content: ':'; }
-      section.enonce div.text div.paragraph section.enonce, section.enonce div.text div.paragraph section.item {
+      main#content.inline section.enonce div.text div.paragraph section.enonce, main#content.inline section.enonce div.text div.paragraph section.item {
         padding-left: 2em;
         border-left: 1px solid #999; }
 
-h1.part {
-  margin: 1em 0 0 70px; }
+main#content.tree h1.part-title {
+  margin: 0 0 0 70px; }
+
+main#content.tree h2.title, main#content.tree h4.filet {
+  margin: 0 0 0 70px; }
 
 .dot {
   position: relative;
@@ -848,7 +907,7 @@ h1.part {
     margin: 0;
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
-    width: 405px; }
+    width: 385px; }
   .dot:not(.disabled) > p.summary {
     cursor: pointer; }
   .dot.disabled > p.summary {
@@ -857,7 +916,7 @@ h1.part {
     display: inline-block;
     vertical-align: top;
     margin: 0;
-    width: 405px; }
+    width: 385px; }
     .dot > section.text p {
       margin: 0; }
       .dot > section.text p:not(:last-child) {
@@ -872,7 +931,7 @@ h1.part {
     border-bottom: 1px solid #e2e2e2; }
   .dot > nav.links {
     position: relative;
-    left: 100px;
+    left: 140px;
     box-sizing: border-box; }
     .dot > nav.links.to {
       bottom: 100%;
@@ -887,7 +946,7 @@ h1.part {
       border-left: 1px solid #e2e2e2;
       position: absolute;
       top: 0;
-      left: 70px;
+      left: 90px;
       height: 100%;
       width: 1px;
       z-index: -1; }

assets/jsondb/3-Elwes-EN-ethicadb.json

@@ -2,7 +2,7 @@
 	{
 		"index": 1,
 		"id": "p1",
-		"title": "_Part I._ \n\n CONCERNING GOG.",
+		"title": "_Part I._ \n\n CONCERNING GOD.",
 		"enonces": [
 			{
 				"title":"DEFINITIONS",
@@ -5383,4 +5383,4 @@
 			}
 		]
 	}
-]
+]

assets/main.js

@@ -22,14 +22,16 @@ var _dbs = require('./modules/dbs');
 var _Inline = require('./modules/inline');
 var _Tree = require('./modules/tree');
 
+
 function init(){
   _dbs.load(function(){
     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);
-    m.route(document.body, "/inline", {
-      "/inline": _Inline,
-      "/tree": _Tree,
+    m.route.prefix("");
+    m.route(document.body, "/lat/inline", {
+      "/:lang/inline": _Inline,
+      "/:lang/tree": _Tree,
     });
   });
 };

assets/main.scss

@@ -21,64 +21,126 @@ html, body{
   padding:0;
 }
 
-$header_height:3em;
+$header_height:4em;
 $dot_w:500px;
-$margin_left:50px;
 $bullet_w:40px;
+$margin_left:50px + ($bullet_w/2);
 
 header{
   position: fixed;
   width:100%; height:$header_height;
   top:0; z-index: 5;
   background-color: white;
+  // padding: 0 0 0 $margin_left;
+  // border-bottom: 1px solid green;
   >*{
     display: inline-block;
-    vertical-align: bottom;
+    vertical-align: text-bottom;
     // &:first-child{ margin-left: 1em;}
     &:last-child{ margin-right: 1em;}
   }
   >h1{
-    margin: 0 0 0 $margin_left+($bullet_w/2);
+    font-size: 3em;
+    margin: 0 0 0 $margin_left;
   }
-}
 
-nav#menus{
-  float:right;
-  >ul{
-    display: inline-block;
-  }
-  ul{
-    margin:0 0.5em;
-    li{
-      list-style: none;
-      line-height: 0.9;
+
+  #menus{
+    // float:right;
+    >*{
       display: inline-block;
-      vertical-align: middle;
-      margin: 0 0.2em;
-      a{
-        text-decoration: none;
-        color: inherit;
+      vertical-align: top;
+    }
+    nav {
+      padding:1em 1em;
+      position: relative;
+      h3{
+        margin:0; padding:0;
+        cursor: pointer;
+        transition: color 0.3s ease-in-out;
+      }
+
+      ul{
+        position: absolute;
+        margin:0;
+        left:0; padding:0 1em 1em;
+        background-color: rgba(255,255,255, 1);
+        // top:2em;
+        white-space: nowrap;
+        height:1px; opacity:0;
+        overflow: hidden;
+        transition: opacity 0.3s ease-in-out;
+        li{
+          margin:0;
+          padding:0;
+          list-style: none;
+          transition: color 0.3s ease-in-out;
+          font-weight:500;
+          font-size: 1.2em;
+          line-height: 1.2;
+          a{
+            color: inherit;
+            text-decoration: none;
+          }
+        }
+      }
+    }
+    // nav#parts-nav{
+    //   ul{
+    //     right:0; left: auto;
+    //   }
+    // }
+    &:hover{
+      h3{
+        color: rgb(100,100,100);
+      }
+      nav:hover{
+        z-index: 10;
+        h3{
+          color:#000;
+        }
+        ul{
+          height:auto; opacity: 1;
+          transition: height opacity 0.3s ease-in-out;
+        }
+        li{
+          color: rgb(100,100,100);
+          &:hover{
+            color: #000;
+          }
+        }
       }
     }
   }
-  // ul#languages{
-  //   li{
-  //     list-style: none;
-  //     line-height: 0.9;
-  //     a{
-  //       text-decoration: none;
-  //       color: inherit;
-  //     }
-  //   }
-  // }
+
 }
 
+
 // #app{
 //   position: relative;
 //   text-align: center;
 //   margin: 3em auto;
 // }
 
+
+
+.sticky-clone-wrapper{
+  padding-top: $header_height;
+  position: fixed;
+  top:0; left: 0;
+  z-index: 4;
+  background-color: white;
+  h1.part-title{
+    font-size: 1.6em;
+    body.inline &{
+      margin: 0 0 0 $margin_left;
+    }
+    body.tree &{
+      margin:0 0 0 $margin_left;
+    }
+  }
+}
+
 main#content{
   margin-top: $header_height;
   // margin: 5em;
@@ -86,12 +148,22 @@ main#content{
   // &>*{
   //   width: 450px;
   // }
-}
 
-h1.part{
-  font-size: 1.6em;
-  width:450px;
-  // margin: 1em 0;
+  h1.part-title{
+    font-size: 1.6em;
+    width:450px;
+  }
+
+  section.part{
+    position: relative;
+  }
+
+  h2.title, h2.filet{
+    font-size: 1em;
+    width:450px;
+    // margin: 1em 0;
+  }
+
 }
 
 //     ____      __    _
@@ -99,66 +171,90 @@ h1.part{
 //    / // __ \/ /   / / __ \/ _ \
 //  _/ // / / / /___/ / / / /  __/
 // /___/_/ /_/_____/_/_/ /_/\___/
-section.enonce{
-  width:450px;
-  margin: 1em 0 1em $margin_left;
-  overflow-x: visible;
-  @include base_font;
-  // max-height:14px;
-  // overflow: hidden;
-  // transition: max-height 0.5s ease-in-out;
-  // &.active{
-  //   max-height:1000px;
+main#content.inline{
+  h1.part-title{
+    margin: 1em 0 0 $margin_left;
+  }
+  h2.title, h4.filet{
+    margin: 1em 0 0 $margin_left;
+  }
+
+  // .sticky{
+  //   color: red;
+  //   &.fixed{
+  //     position: fixed;
+  //   }
   // }
 
-  h2{
-    font-size: 1em;
-    font-weight: 300;
-    margin: 0;
-    cursor:pointer;
-  }
+  section.enonce{
+    width:450px;
+    margin: 1em 0 1em $margin_left;
+    overflow-x: visible;
+    @include base_font;
+    // max-height:14px;
+    // overflow: hidden;
+    // transition: max-height 0.5s ease-in-out;
+    // &.active{
+    //   max-height:1000px;
+    // }
 
-  h3{
-    font-size: 0.9em;
-    font-weight: 300;
-    margin: 0;
-    cursor:pointer;
-  }
 
-  div.text{
-    font-size: 1.3em;
-    div.paragraph{
-      margin-bottom: 1em;
+    h2{
+      font-size: 1em;
+      font-weight: 300;
+      margin: 0;
+      cursor:pointer;
+    }
+
+    h3{
+      font-size: 0.9em;
+      font-weight: 300;
+      margin: 0;
+      cursor:pointer;
+    }
 
-      div.opened-link{
-        display:inline;
-      }
-      a.link, span.link.text{
-        font-weight: 600;
-        text-decoration: none;
-        color: inherit;
-      }
-      span.link.text:after{
-        content:':'
-      }
-      section.enonce, section.item{
-        padding-left:2em;
-        border-left: 1px solid #999;
+    div.text{
+      font-size: 1.3em;
+      div.paragraph{
+        margin-bottom: 1em;
+
+        div.opened-link{
+          display:inline;
+        }
+        a.link, span.link.text{
+          font-weight: 600;
+          text-decoration: none;
+          color: inherit;
+        }
+        span.link.text:after{
+          content:':'
+        }
+        section.enonce, section.item{
+          padding-left:2em;
+          border-left: 1px solid #999;
+        }
       }
-    }
 
+    }
   }
+
 }
 
+
 //   ______
 //  /_  __/_______  ___
 //   / / / ___/ _ \/ _ \
 //  / / / /  /  __/  __/
 // /_/ /_/   \___/\___/
-h1.part{
-  margin:1em 0 0 $margin_left+($bullet_w/2);
-}
+main#content.tree{
 
+  h1.part-title{
+    margin:0 0 0 $margin_left;
+  }
+  h2.title, h4.filet{
+    margin:0 0 0 $margin_left;
+  }
+}
 .dot{
 
   position: relative;
@@ -172,7 +268,7 @@ h1.part{
     display: inline-block;
     // position: absolute;
     // left:-3.5em;
-    width: $margin_left; text-align: right;
+    width: $margin_left - ($bullet_w/2); text-align: right;
     opacity:0;
     // transform: translate3d(0, 0, 0);
     // transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;

assets/modules/dbs.js

@@ -9,10 +9,10 @@
 module.exports = {
   lang:'fr',
   langs:[
-    {'lc':'lat',  'label':'lat',  'db':'0-LAT-ethicadb.json'},
-    {'lc':'fr',   'label':'fr',   'db':'2-Appuhn-FR-ethicadb.json'},
-    {'lc':'bra',  'label':'bra',  'db':'ethica-bresilen.json'},
-    {'lc':'en',   'label':'en',   'db':'3-Elwes-EN-ethicadb.json'}
+    {'lc':'lat',  'label':'Latin',  'db':'0-LAT-ethicadb.json'},
+    {'lc':'fr',   'label':'Français',   'db':'2-Appuhn-FR-ethicadb.json'},
+    {'lc':'bra',  'label':'Brazilian',  'db':'ethica-bresilen.json'},
+    {'lc':'en',   'label':'English',   'db':'3-Elwes-EN-ethicadb.json'}
   ],
   data:[],
   loaded_dbs:0,
@@ -21,7 +21,7 @@ module.exports = {
   load: function(callback) {
     // load all dbs, when all loaded call main app callback function
     for (var i = 0; i < this.langs.length; i++) {
-      this.loadJSON(this.langs[i].lc, 'assets/jsondb/'+this.langs[i].db, callback)
+      this.loadJSON(this.langs[i].lc, '/assets/jsondb/'+this.langs[i].db, callback)
     }
   },
   loadJSON: function(lc, file, callback){

assets/modules/header.js

@@ -1,6 +1,8 @@
 
 var m = require('mithril');
 var _dbs = require('./dbs');
+var markdown =  require('markdown-it')()
+                  .use(require('markdown-it-footnote'));
 
 
 //     __  __               __
@@ -12,7 +14,11 @@ module.exports = {
   view: function(vn){
     return m('header', [
       m('h1', 'Ethica'),
-      m('nav', {'id':"menus"}, [
+      // m('nav', {'id':'parts-nav'}, [
+      //
+      // ]),
+      m('div', {'id':"menus"}, [
+        m(_PartsNav),
         m(_RouteMenu),
         m(_LangMenu)
       ])
@@ -20,15 +26,55 @@ module.exports = {
   }
 }
 
+//     ____             __
+//    / __ \____ ______/ /______   ____ ___  ___  ____  __  __
+//   / /_/ / __ `/ ___/ __/ ___/  / __ `__ \/ _ \/ __ \/ / / /
+//  / ____/ /_/ / /  / /_(__  )  / / / / / /  __/ / / / /_/ /
+// /_/    \__,_/_/   \__/____/  /_/ /_/ /_/\___/_/ /_/\__,_/
+var _PartsNav = {
+  view: function(vn){
+    var lang = m.route.param('lang');
+    console.log('partsmenu', lang);
+    return m('nav', {id:'parts-nav'}, [
+      // TODO: replaced labels with localized content
+      m('h3', 'Parts'),
+      m('ul', _dbs.data[lang].map(function(p){
+        // console.log("anchors, part", p);
+        return m('li', [
+          m('a', {'href':'#'+p.id}, m.trust(markdown.renderInline(p.title)))
+        ]);
+      })
+      )
+    ]);
+  }
+};
 
+//     ____              __
+//    / __ \____  __  __/ /____     ____ ___  ___  ____  __  __
+//   / /_/ / __ \/ / / / __/ _ \   / __ `__ \/ _ \/ __ \/ / / /
+//  / _, _/ /_/ / /_/ / /_/  __/  / / / / / /  __/ / / / /_/ /
+// /_/ |_|\____/\__,_/\__/\___/  /_/ /_/ /_/\___/_/ /_/\__,_/
 var _RouteMenu = {
   view: function(){
-    // create ul dom
-    return m('ul', {id:"routes"}, [
-      m('li', m('a', {'href':'#!/inline'}, "inline")),
-      m('li', m('a', {'href':'#!/tree'}, "tree")),
-    ]
-    );
+    var lang = m.route.param('lang');
+    var path = m.route.get().match(/^(\/[^\/]+)(\/[^\/|#]+)(.*)$/);
+    console.log('Route menu Path', path);
+    return m('nav', {id:'routes'}, [
+      // TODO: replaced labels with localized content
+      m('h3', 'Routes'),
+      m('ul', [
+        m('li', m('a', {
+          'href':'/'+lang+'/inline'+path[3],
+          oncreate : m.route.link,
+          onupdate : m.route.link
+        }, "inline")),
+        m('li', m('a', {
+          'href':'/'+lang+'/tree'+path[3],
+          oncreate : m.route.link,
+          onupdate : m.route.link
+        }, "tree")),
+      ])
+    ]);
   }
 }
 
@@ -40,31 +86,36 @@ var _RouteMenu = {
 //                   /____/
 var _LangMenu = {
   view: function(){
+    var path = m.route.get().match(/^\/[^\/]+(.+)$/);
+    // console.log('Lang menu Path', path);
     // create ul dom
-    return m('ul', {id:"languages"}, _dbs.langs.map(function(lang){
+    return m('nav', {id:'languages'}, [
+      // TODO: replaced labels with localized content
+      m('h3', 'languages'),
+      m('ul', _dbs.langs.map(function(lang){
         // create li dom for each lank link
         return m('li',
           // create a dom
           m('a', {
             'lang':lang.lc,
-            'href':'/?lang='+lang.lc,
-            onclick:function(e){
-              e.preventDefault();
-              // console.log('click lang', e);
-              var lang = e.target.getAttribute('lang');
-              console.log(lang);
-              if(lang != _dbs.lang){
-                // change url variable
-                // change db
-                _dbs.lang = lang;
-                // redraw UI
-                // m.redraw();
-              }
-              return false;
-            }
+            'href':'/'+lang.lc+path[1]
+            // onclick:function(e){
+            //   e.preventDefault();
+            //   // console.log('click lang', e);
+            //   var lang = e.target.getAttribute('lang');
+            //   // console.log(lang);
+            //   if(lang != _dbs.lang){
+            //     // change url variable
+            //     // change db
+            //     _dbs.lang = lang;
+            //     // redraw UI
+            //     // m.redraw();
+            //   }
+            //   return false;
+            // }
           }, lang.label)
         );
-      })
-    );
+      }))
+    ]);
   }
 }

assets/modules/inline.js

@@ -8,6 +8,7 @@ var markdown =  require('markdown-it')()
 var _dbs = require('./dbs');
 var _Header = require('./header');
 var _Footer = require('./footer');
+var _Ui = require('./ui.js');
 
 //     __    _       __
 //    / /   (_)___  / /__
@@ -134,7 +135,7 @@ var _Text = {
   },
   oninit: function(vn){
     this.id = vn.attrs.id;
-    this.text = vn.attrs.text;
+    this.text = vn.attrs.text || "";
     this.parsetext();
   },
   onbeforeupdate: function(vn,old){
@@ -212,7 +213,7 @@ var _Enonce = {
     this.id = vn.attrs.id;
     this.title = vn.attrs.title;
     this.text = vn.attrs.text;
-    this.childs = vn.attrs.childs;
+    this.childs = vn.attrs.childs || [];
     this.nested = vn.attrs.nested || false;
   },
   onbeforeupdate:function(vn, old) {
@@ -250,12 +251,12 @@ var _Enonce = {
 var _Part = {
   oninit: function(vn){
     this.id = vn.attrs.id;
-    this.title = vn.attrs.title;
+    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.title = vn.attrs.title || '';
     this.enonces = vn.attrs.enonces;
   },
   view: function(vn){
@@ -266,18 +267,20 @@ var _Part = {
       },
       [
         // create title node
-        m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
+        m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
         // create text node
         this.enonces.map(function(e){
-          console.log(e.type);
-
+          // console.log(e.type);
+          // var title = e.title || '';
           switch (e.type) {
             case "title":
               // handle titles
+              // console.log('title');
               return m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)));
               break;
             case "filet":
               // handle filets
+              // console.log('filet');
               return m("h4", {'class':'filet'}, m.trust(markdown.renderInline(e.title)));
               break;
             default:
@@ -296,11 +299,18 @@ var _Part = {
 //  _/ // / / / /___/ / / / /  __/
 // /___/_/ /_/_____/_/_/ /_/\___/
 module.exports = {
-  view: function(){
-    console.log('_Inline view', _dbs.lang);
+  // oninit : function(vn){
+  //   this.lang = vn.attrs.lang;
+  // },
+  oncreate: function(vn){
+    document.body.classList.add('inline');
+    _Ui.init();
+  },
+  view: function(vn){
+    console.log('_Inline view', vn.attrs.lang);
     return [
       m(_Header),
-      m('main', {id:"content", 'class':'inline'}, _dbs.data[_dbs.lang].map(function(p){
+      m('main', {id:"content", 'class':'inline'}, _dbs.data[vn.attrs.lang].map(function(p){
           // console.log("MAP _dbs", p);
           return m(_Part,p);
         })
@@ -308,4 +318,5 @@ module.exports = {
       m(_Footer)
     ]
   }
+
 }

assets/modules/tree.js

@@ -8,8 +8,7 @@ var markdown =  require('markdown-it')()
 var _dbs = require('./dbs');
 var _Header = require('./header');
 var _Footer = require('./footer');
-
-// var _lang = require('../main.js')._langs;
+var _Ui = require('./ui.js');
 
 //     ____        __
 //    / __ \____  / /_
@@ -298,7 +297,7 @@ var _Part = {
       },
       [
         // create title node
-        m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
+        m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
         // create text node
         this.enonces.map(function(e){
           // console.log(e.text);
@@ -329,11 +328,18 @@ var _Part = {
 //  / / / /  /  __/  __/
 // /_/ /_/   \___/\___/
 module.exports = {
-  view: function(){
-    // console.log('_Tree view', _dbs.lang);
+  // oninit : function(vn){
+  //   this.lang = vn.attrs.lang;
+  // },
+  oncreate: function(vn){
+    document.body.classList.add('tree');
+    _Ui.init();
+  },
+  view: function(vn){
+    console.log('_Tree view', vn.attrs.lang);
     return [
       m(_Header),
-      m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
+      m('main', {id:"content", 'class':'tree'}, _dbs.data[vn.attrs.lang].map(function(p){
           return m(_Part,p);
         })
       ),

assets/modules/ui.js

@@ -0,0 +1,114 @@
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   12-09-2017
+ * @Email:  bachir@figureslibres.io
+ * @Last modified by:   bach
+ * @Last modified time: 12-09-2017
+ * @License: GPL-V3
+ */
+
+// var $ = require('jquery');
+// https://plainjs.com
+
+
+// jQuery(document).ready(function($) {
+// console.log('Hello Jquery');
+
+// var $window;
+
+var init = function(){
+  console.log('UI init');
+  // $window = $(window);
+  //    _____ __  _      __            __  _ __  __
+  //   / ___// /_(_)____/ /____  __   / /_(_) /_/ /__
+  //   \__ \/ __/ / ___/ //_/ / / /  / __/ / __/ / _ \
+  //  ___/ / /_/ / /__/ ,< / /_/ /  / /_/ / /_/ /  __/
+  // /____/\__/_/\___/_/|_|\__, /   \__/_/\__/_/\___/
+  //                      /____/
+  // https://codepen.io/chrissp26/pen/gBrdo?editors=0010
+
+  // var header_height = $('header').height();
+  var header_height = document.getElementsByTagName('header')[0].clientHeight;
+  console.log(header_height);
+
+  // var $sticky_clone_wrapper = $('<div>').addClass('sticky-clone-wrapper').appendTo('body');
+  var sticky_clone_wrapper = document.createElement('div');
+  sticky_clone_wrapper.classList.add('sticky-clone-wrapper');
+  document.body.append(sticky_clone_wrapper);
+  //
+  // var $stickies = $('h1.part-title').addClass('sticky').each(function(i){
+  //   var $sticky = $(this);
+  //   $sticky
+  //     .data('originalPosition', $sticky.offset().top)
+  //     .data('originalHeight', $sticky.outerHeight());
+  // });
+  var stickies = new Array();
+  Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
+    // console.log('sticky', e);
+    e._part = e.getAttribute('part');
+    stickies.push(e)
+  });
+  console.log('stickies', stickies);
+
+  //
+  // var OnScroll = function(event){
+  //   var $last_sticky;
+  //   $stickies.each(function(i){
+  //     var $sticky = $(this);
+  //     var pos = $sticky.data('originalPosition');
+  //     if(pos < $window.scrollTop()+header_height){
+  //
+  //     }
+  //     // if(i == 1){
+  //     //   console.log(pos +" | "+$window.scrollTop());
+  //     // }
+  //     // if(pos < $window.scrollTop()+header_height){
+  //     //   if(!$sticky.is('.sticked')){
+  //     //     $sticky.addClass('sticked').clone().appendTo($sticky_clone_wrapper.empty());
+  //     //   }
+  //     // }else{
+  //     //   if($sticky.is('.sticked')){
+  //     //     $sticky.removeClass('sticked');
+  //     //     $('.part-title[part="'+$sticky.attr('part')+'"]', $sticky_clone_wrapper).remove();
+  //     //   }
+  //     // }
+  //   });
+  // };
+  var last_sticky = "", sticked_sticky, clone;
+  var OnScroll = function(event){
+    // console.log('on scrool', event);
+    sticked_sticky = false;
+    for (var i = stickies.length-1; i >= 0; i--) {
+      if(stickies[i].getBoundingClientRect().top < header_height){
+        sticked_sticky = stickies[i];
+        break;
+      }
+    }
+
+    if (sticked_sticky) {
+      // console.log('sticked_sticky', sticked_sticky._part);
+      if(last_sticky !== sticked_sticky._part){
+        // console.log('new sticky', last_sticky);
+        // fill sticky_clone_wrapper
+        clone = sticked_sticky.cloneNode(true);
+        sticky_clone_wrapper.innerHTML = '';
+        sticky_clone_wrapper.appendChild(clone);
+        last_sticky = sticked_sticky._part;
+      }
+    }else{
+      // empty sticky_clone_wrapper
+      sticky_clone_wrapper.innerHTML = '';
+    }
+  };
+
+  //
+  // $window.on('scroll', OnScroll);
+  // console.log('window', window);
+  window.onscroll = OnScroll;
+}
+// });
+
+
+module.exports = {
+  init : init
+}

index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="utf-8">
     <title>Ethica Spinoza</title>
-    <link rel="stylesheet" href="assets/dist/main.css">
+    <link rel="stylesheet" href="/assets/dist/main.css">
   </head>
   <body>
-    
-    <script src="assets/dist/main.js" charset="utf-8"></script>
+
+    <script src="/assets/dist/main.js" charset="utf-8"></script>
   </body>
 </html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ethica",
   "version": "1.0.0",
-  "description": "ethica hugo theme",
+  "description": "ethica",
   "main": "js/main.js",
   "author": "Bachir Soussi Chiadmi <bachir@g-u-i.me>",
   "license": "GPL-3.0",
@@ -12,6 +12,7 @@
   "dependencies": {
     "css-loader": "^0.28.0",
     "file-loader": "^0.11.1",
+    "jquery": "^3.2.1",
     "markdown-it": "^8.3.1",
     "markdown-it-footnote": "^3.0.1",
     "mithril": "^1.1.1",

yarn.lock

@@ -131,10 +131,6 @@ async-foreach@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
 
-async@0.2.x:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-
 async@^2.1.2, async@^2.1.5:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
@@ -477,21 +473,6 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.8.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
-  dependencies:
-    graceful-readlink ">= 1.0.0"
-
-compression-webpack-plugin@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-0.4.0.tgz#811de04215f811ea6a12d4d8aed8457d758f13ac"
-  dependencies:
-    async "0.2.x"
-    webpack-sources "^0.1.0"
-  optionalDependencies:
-    node-zopfli "^2.0.0"
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -680,12 +661,6 @@ deep-extend@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
 
-defaults@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
-  dependencies:
-    clone "^1.0.2"
-
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
@@ -987,10 +962,6 @@ graceful-fs@^4.1.2:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
-"graceful-readlink@>= 1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
-
 har-schema@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
@@ -1248,6 +1219,10 @@ jodid25519@^1.0.0:
   dependencies:
     jsbn "~0.1.0"
 
+jquery@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
+
 js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
@@ -1549,7 +1524,7 @@ ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
-nan@^2.0.0, nan@^2.3.0, nan@^2.3.2:
+nan@^2.3.0, nan@^2.3.2:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.1.tgz#8c84f7b14c96b89f57fbc838012180ec8ca39a01"
 
@@ -1599,7 +1574,7 @@ node-libs-browser@^2.0.0:
     util "^0.10.3"
     vm-browserify "0.0.4"
 
-node-pre-gyp@^0.6.29, node-pre-gyp@^0.6.4:
+node-pre-gyp@^0.6.29:
   version "0.6.34"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
   dependencies:
@@ -1636,15 +1611,6 @@ node-sass@^4.5.3:
     sass-graph "^2.1.1"
     stdout-stream "^1.4.0"
 
-node-zopfli@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/node-zopfli/-/node-zopfli-2.0.2.tgz#a7a473ae92aaea85d4c68d45bbf2c944c46116b8"
-  dependencies:
-    commander "^2.8.1"
-    defaults "^1.0.2"
-    nan "^2.0.0"
-    node-pre-gyp "^0.6.4"
-
 "nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"