sticky titles ok, only level 1, more level seems to not be doable

assets/dist/main.css

@@ -736,7 +736,7 @@ header {
         color: #000; }
 
 .sticky-clone-wrapper {
-  padding-top: 6em;
+  padding-top: 5em;
   padding-bottom: 1em;
   position: fixed;
   top: 0;
@@ -750,6 +750,12 @@ header {
       margin: 0 0 0 70px; }
     body.mode-text .sticky-clone-wrapper h1.part-title {
       margin: 0 0 0 70px; }
+  .sticky-clone-wrapper h2.title {
+    font-size: 1em; }
+    body.mode-connections .sticky-clone-wrapper h2.title {
+      margin: 0 0 0 70px; }
+    body.mode-text .sticky-clone-wrapper h2.title {
+      margin: 0 0 0 70px; }
 
 main#content {
   margin-top: 5em; }

assets/main.js

@@ -38,7 +38,7 @@ var Layout = {
 function init(){
   _dbs.load(function(){
 		console.log('init dbs callback');
-	  // console.log("Init _dbs.data", _dbs.data);
+	  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.prefix("");

assets/main.scss

@@ -131,7 +131,7 @@ header{
 
 
 .sticky-clone-wrapper{
-  padding-top: $header_height+1em;
+  padding-top: $header_height;
   padding-bottom: 1em;
   position: fixed;
   top:0; left: 0;
@@ -147,6 +147,15 @@ header{
       margin:0 0 0 $margin_left;
     }
   }
+  h2.title{
+    font-size: 1em;
+    body.mode-connections &{
+      margin: 0 0 0 $margin_left;
+    }
+    body.mode-text &{
+      margin:0 0 0 $margin_left;
+    }
+  }
 }
 
 main#content{

assets/modules/ModeText.js

@@ -268,7 +268,7 @@ var _Part = {
     this.enonces = vn.attrs.enonces;
   },
   view(vn){
-    // console.log(vn.attrs.enonces);
+    console.log("part enonces", vn.attrs.enonces);
     return m("section", {
         'id'    :this.id,
         'class' :'part'
@@ -278,7 +278,7 @@ var _Part = {
         m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
         // create text node
         this.enonces.map(e => {
-          // console.log(e.type);
+          console.log(e.title +" - "+ e.type);
           // var title = e.title || '';
           switch (e.type) {
             case "title":
@@ -342,7 +342,7 @@ module.exports = {
   //   // i18next.changeLanguage(vn.attrs.lang);
   // },
   view(vn){
-    // console.log('_ModeText view : lang', vn.attrs.lang);
+    // console.log('_ModeText view : _dbs.data', _dbs.data);
     return m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map((p) => {
         // console.log("MAP _dbs", p);
         if(p.id == 'intro'){

assets/modules/header.js

@@ -13,11 +13,11 @@ var markdown =  require('markdown-it')()
 //  / __  /  __/ /_/ / /_/ /  __/ /
 // /_/ /_/\___/\__,_/\__,_/\___/_/
 module.exports = {
-  onupdate(vn){
+  // onupdate(vn){
-    console.log("Header onupdate : vn", vn);
+  //   // console.log("Header onupdate : vn", vn);
-  },
+  // },
   view(vn){
-    console.log("Header view : vn", vn);
+    // console.log("Header view : vn", vn);
     return m('header', [
       m('hgroup', [
         m('h1', 'Ethica'),

assets/modules/i18n.js

@@ -1,34 +1,16 @@
 
 module.exports = {
   t(key){
-    console.log('i18n',this);
     if(this.locales[key]){
       if(this.lang){
         if(this.locales[key][this.lang]){
-          return this.locales[key][this.lang];
+          return this.locales[key][this.lang];// key for current language
-        }else{
+        }else{this.log(`Key "${key}" does not exists for language ${this.lang}`);}
-          this.log(`Key "${key}" does not exists for language ${this.lang}`);
-        }
       }else if(this.locales[key][this.fallback]){
-        return this.locales[key][this.fallback];
+        return this.locales[key][this.fallback];// key for fallback language
-      }else{
+      }else{this.log(`Key "${key}" does not exists for fallback language ${this.fallback}`);}
-        this.log(`Key "${key}" does not exists for fallback language ${this.fallback}`);
+    }else{this.log(`Key "${key}" does not exists.`);}
-      }
+    return key;// if nothing else retrn key it self
-    }else{
-      this.log(`Key "${key}" does not exists.`);
-    }
-    // if(this.lang){
-    //   if(this.locales[key][this.lang]){
-    //     // key exists in current language
-    //     return this.locales[key][this.lang];
-    //   }else{
-    //     console.log('Key ${key} does not exists for language ${this.lang}');
-    //   }
-    // }else if(this.locales[key][this.fallback]){
-    //   // key exists in fallback language
-    //   return this.locales[key][this.fallback];
-    // }
-    return key;
   },
   setLang(l){
     this.lang = l

assets/modules/ui.js

@@ -7,108 +7,108 @@
  * @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
+  init(){
+    // console.log('UI init');
+    this.initStickyTitles();
+  },
+  initStickyTitles(){
+    //    _____ __  _      __            __  _ __  __
+    //   / ___// /_(_)____/ /____  __   / /_(_) /_/ /__
+    //   \__ \/ __/ / ___/ //_/ / / /  / __/ / __/ / _ \
+    //  ___/ / /_/ / /__/ ,< / /_/ /  / /_/ / /_/ /  __/
+    // /____/\__/_/\___/_/|_|\__, /   \__/_/\__/_/\___/
+    //                      /____/
+    // https://codepen.io/chrissp26/pen/gBrdo?editors=0010
+
+    // let header_height = $('header').height();
+    let header_height = document.getElementsByTagName('header')[0].clientHeight;
+    // console.log(header_height);
+
+    // create the stkd titles wrapper block
+    let stkd_wrapper = document.createElement('div');
+    stkd_wrapper.classList.add('sticky-clone-wrapper');
+    document.body.append(stkd_wrapper);
+
+    // get all part title
+    let part_titles = new Array();
+    Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
+      e._part = e.getAttribute('part');
+      part_titles.push(e)
+    });
+    console.log('part_titles', part_titles);
+
+    var stkd_part,
+        last_stkd_part = false,
+        subparts,
+        stkd_subpart,
+        last_stkd_subpart = false,
+        clone;
+
+    let OnScroll = function(event){
+      // console.log('on scrool', event);
+      stkd_part = false;
+      for (let i = part_titles.length-1; i >= 0; i--) {
+        if(part_titles[i].getBoundingClientRect().top < header_height){
+          stkd_part = part_titles[i];
+          // console.log("stkd_part");
+          break;
+        }
+      }
+
+      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);
+          // clone only once
+          clone = stkd_part.cloneNode(true);
+          // stkd_wrapper.innerHTML = '';
+          // fill stkd_wrapper
+          stkd_wrapper.appendChild(clone);
+          last_stkd_part = stkd_part;
+
+          // // get all subpart title only once
+          // let part_wrapper = stkd_part.parentNode;
+          // subparts = new Array();
+          // Array.from(part_wrapper.querySelectorAll('h2.title')).forEach(function(e){
+          //   subparts.push(e)
+          // });
+          // // console.log('subparts', subparts);
+        }
+
+        // // subtitle
+        // stkd_subpart = false;
+        // for (let i = subparts.length-1; i >= 0; i--) {
+        //   if(subparts[i].getBoundingClientRect().top < header_height + stkd_part.clientHeight){
+        //     stkd_subpart = subparts[i];
+        //     break;
+        //   }
+        // }
+        //
+        // if (stkd_subpart){
+        //   if( stkd_subpart.innerHTML !== last_stkd_subpart.innerHTML ){
+        //     console.log("new stkd_subpart "+stkd_subpart.innerHTML);
+        //     clone = stkd_subpart.cloneNode(true);
+        //     // stkd_wrapper.lastChild.remove();
+        //     stkd_wrapper.appendChild(clone);
+        //     last_stkd_subpart = stkd_subpart;
+        //   }
+        // }else{
+        //   // stkd_wrapper.lastChild.remove();
+        //   stkd_subpart = last_stkd_subpart = false;
+        // }
+      }else{
+        // empty stkd_wrapper
+        stkd_wrapper.innerHTML = '';
+        stkd_part = last_stkd_part = false;
+      }
+    };
+
+    //
+    // $window.on('scroll', OnScroll);
+    // console.log('window', window);
+    window.onscroll = OnScroll;
+  }
 }