mode connection is ok

assets/dist/main.css

@@ -774,11 +774,13 @@ h2.title {
 h4.filet {
   margin: 0.5em 0 0 70px; }
 
-div.proposition:not(.chapitre), div.proposition.chapitre:first-of-type,
+div.proposition:not(.chapitre), div.proposition.chapitre:first-of-type, div.proposition:not(.dot.nested),
 div.appendice:not(.chapitre),
 div.appendice.chapitre:first-of-type,
+div.appendice:not(.dot.nested),
 div.chapitre:not(.chapitre),
-div.chapitre.chapitre:first-of-type {
+div.chapitre.chapitre:first-of-type,
+div.chapitre:not(.dot.nested) {
   margin-top: 1em; }
 
 div.proposition span.title,
@@ -883,7 +885,9 @@ main#content.mode-text .opened-link .close-link-btn {
   border: 1px solid white;
   width: 550px; }
   .dot > span.title {
-    margin: 0 0.6em 0 0; }
+    padding: 0 0.6em 0 0; }
+  .dot.opened > span.title {
+    display: block; }
   .dot > p.summary {
     display: inline-block;
     vertical-align: top;
@@ -913,7 +917,9 @@ main#content.mode-text .opened-link .close-link-btn {
       text-decoration: none;
       font-weight: bold; }
   .dot.to-links > section.text {
-    border-top: 1px solid #e2e2e2; }
+    border-top: 1px solid #e2e2e2;
+    padding-top: 1.5em;
+    margin-top: -1.5em; }
   .dot.from-links > section.text {
     border-bottom: 1px solid #e2e2e2; }
   .dot > nav.links {
@@ -925,8 +931,7 @@ main#content.mode-text .opened-link .close-link-btn {
       padding-bottom: 10px; }
     .dot > nav.links.from {
       top: 100%;
-      padding-top: 10px;
-      margin-bottom: 15px; }
+      padding-top: 10px; }
     .dot > nav.links:before {
       content: "";
       border-left: 1px solid #e2e2e2;
@@ -941,6 +946,26 @@ main#content.mode-text .opened-link .close-link-btn {
     transition: opacity 0.4s ease-in-out; }
   .dot.disabled > * {
     color: grey; }
+  .dot.opened {
+    margin-bottom: 15px; }
+  .dot .bullet, .dot .close-link-btn {
+    position: absolute;
+    width: 20px;
+    left: -24px;
+    margin: -3px 0 0 0;
+    text-align: center; }
+  .dot .bullet span {
+    font-style: normal;
+    font-size: 0.2em;
+    font-weight: 300; }
+  .dot .close-link-btn {
+    cursor: pointer; }
+    .dot .close-link-btn span {
+      font-style: normal;
+      font-size: 0.7em;
+      font-weight: 300; }
+  .dot.nested {
+    font-size: 16px; }
 
 footer {
   position: fixed;

assets/main.js

@@ -25,7 +25,7 @@ const _ModeConnections = require('./modules/ModeConnections');
 
 var Layout = {
 	view(vn){
-		console.log('Layout view : lang', vn.attrs.lang);
+		// console.log('Layout view : lang', vn.attrs.lang);
 		_i18n.setLang(vn.attrs.lang);
 		return [
 			m(_Header, vn.attrs),
@@ -40,7 +40,7 @@ function init(){
 		console.log('init dbs callback');
 	  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);
+    console.log("Init _dbs.data_strct", _dbs.data_strct);
     m.route.prefix("");
 		m.route(document.body, "/fr/text", {
 			"/:lang/text": {

assets/main.scss

@@ -221,7 +221,7 @@ h4.filet{
 div.proposition,
 div.appendice,
 div.chapitre{
-  &:not(.chapitre), &.chapitre:first-of-type{margin-top: 1em;}
+  &:not(.chapitre), &.chapitre:first-of-type, &:not(.dot.nested){margin-top: 1em;}
   span.title{
   font-size: 1.2em;
   font-weight: 500;
@@ -423,8 +423,12 @@ main#content.mode-connections{
   //   font-kerning: none;
   // }
   >span.title{
-    margin: 0 0.6em 0 0;
+    padding: 0 0.6em 0 0;
   }
+  &.opened>span.title{
+    display:block;
+  }
+
 
   >p.summary{
     display: inline-block;
@@ -466,6 +470,9 @@ main#content.mode-connections{
   }
   &.to-links > section.text{
     border-top: 1px solid #e2e2e2;
+    $decal:1.5em;
+    padding-top:$decal;
+    margin-top: -$decal;
   }
   &.from-links > section.text{
     border-bottom: 1px solid #e2e2e2;
@@ -483,7 +490,7 @@ main#content.mode-connections{
     &.from{
       top:100%;
       padding-top:10px;
-      margin-bottom: 15px;
+      // margin-bottom: 15px;
     }
 
     &:before{
@@ -518,6 +525,46 @@ main#content.mode-connections{
   //   line-height: 0.8;
   // }
 
+  &.opened{
+    // position:relative;
+    // outline: 1px solid red;
+    margin-bottom: 15px;
+    // span.title{
+    //   float:left;
+    // }
+  }
+  .bullet,.close-link-btn{
+    position:absolute;
+    width:20px;
+    // top:0;
+    left:-24px;
+    margin:-3px 0 0 0;
+    // outline: 1px solid green;
+    // display:inline-block;
+    // background-color: white;
+    // z-index: 10;
+    text-align: center;
+  }
+  .bullet{
+    span{
+      font-style: normal;
+      font-size: 0.2em;
+      font-weight: 300;
+    }
+  }
+
+  .close-link-btn{
+    cursor: pointer;
+    span{
+      font-style: normal;
+      font-size: 0.7em;
+      font-weight: 300;
+    }
+  }
+
+  &.nested{
+    font-size: $fs;
+  }
 
 }
 

assets/modules/ModeConnections.js

@@ -20,19 +20,21 @@ var _Dot = {
   dottype:null,
   type:'',
   title:'',
+  breadcrumb:'',
   text:'',
   summary:'',
   active:true,
-  opened:false,
+  opened:0,
+  nested:false,
   links:null,
   parents:[],
   lang:_dbs.lang,
   setupTitle(vn){
     this.title = vn.attrs.title;
-    if(!this.title){
-      this.title = this.type;
-    }
-    this.title = markdown.renderInline(this.title);
+    if(!this.title) this.title = this.type;
+
+    if(this.title)
+      this.title = markdown.renderInline(this.title);
   },
   setuptext(vn){
     // console.log('setuptext', vn);
@@ -50,24 +52,20 @@ var _Dot = {
       this.summary = this.text.replace(/!\[[^\]]+\]\([^\)]+\)/g, "");
       // get portion of text
       this.summary = this.summary.match('([^ ]*[ ]{0,1}){1,6}')[0];
-      // end underscores (italic)
+      // end underscores (italic) splited by summarizing
       this.summary = this.summary.trim().replace(/_([^_]+)$/g, "_$1_");
-      // end brackets (links)
+      // remove brackets (links) splited by summarizing
       this.summary = this.summary.replace(/\[([^\]]+)$/g, "$1");
-      // render the marckdown
+      // render the markdown
       this.summary = markdown.renderInline(this.summary) + " …";
     }
 
   },
   oninit(vn){
-    // console.log('Dot init : vn',vn);
     this.id = vn.attrs.id;
     this.type = vn.attrs.type;
     this.dottype = vn.attrs.dottype;
-
-    this.setupTitle(vn);
-    this.setuptext(vn);
-
+    this.breadcrumb = vn.attrs.breadcrumb;
     // console.log(`${this.id} -> ${this.dottype}`);
 
     if(typeof vn.attrs.active !== 'undefined')
@@ -75,14 +73,18 @@ var _Dot = {
 
     // links
     this.links = _dbs.data_strct[this.id];
-    // console.log(this.links);
 
     // parents memorize where do we come from to avoid duplicates and looping nav
     if(vn.attrs.parents){
       this.parents = this.parents.concat(vn.attrs.parents);
       // console.log('_Dot init '+this.id+' parents :',this.parents);
     }
+    this.nested = this.parents.length ? true : false;
+
+    // if(this.nested) console.log(`oninit ${this.id}`);
 
+    this.setupTitle(vn);
+    this.setuptext(vn);
   },
   oncreate(vn){
     if(this.active){
@@ -92,130 +94,17 @@ var _Dot = {
     }
   },
   onbeforeupdate(vn){
-    // console.log('onbeforeupdate');
+    // if(this.opened) console.log(`onbeforeupdate ${this.id} : vn`,vn);
     if(this.lang != _dbs.lang){
       this.lang = _dbs.lang;
+      this.breadcrumb = vn.attrs.breadcrumb;
       this.setuptext(vn);
       this.setupTitle(vn);
     }
-  },
-  setOpenedContent(vn){
-    this.dot_content = [
-      // links to
-      this.links.to.length
-        ? m('nav', {'class':'links to'}, this.links.to.map(id => {
-            // console.log(id);
-            if(typeof _dbs.data_byid[_dbs.lang][id] !== 'undefined'){
-              var obj = _dbs.data_byid[_dbs.lang][id];
-              // console.log('link to : obj', obj);
-              return m(_Dot, {
-                "id":id,
-                'text':obj.text,
-                'dottype':obj.dottype,
-                'type':obj.type,
-                // passe the memory of crossed dots plus the current one
-                'parents':vn.state.parents.concat([vn.state.id]),
-                // activate link only if not in parents (already went through it)
-                'active':vn.state.parents.indexOf(id) == -1 ? true:false
-              });
-            }
-          })
-        )
-        : null, // if no links to, add nothing
-      // id
-      // m('span', {'class':'id'}, this.id), // this.type+' '+
-      // bullet
-      // m('span', {'class':'bullet'}, m.trust('⚫')),
-      // Title
-      m('span', {'class':'title'}, m.trust(this.title)),
-      // full text
-      m('section', {
-        'class':'text',
-        onmouseover(e){
-          e.preventDefault();
-          if(e.target.nodeName == "A" ){
-            // console.log("over e.target", e.target);
-            // console.log('over vn', vn);
-            var id = e.target.getAttribute("href");
-            // add highlight class
-            vn.dom.querySelector('nav.links>div[uid="'+id+'"]').classList.add('highlight');
-          }else{
-            // remove all hilight class
-            for (link of vn.dom.querySelectorAll('nav.links>div.dot')) {
-              link.classList.remove('highlight');
-            }
-          }
-        },
-        onclick(e){
-          e.preventDefault();
-          if(e.target.nodeName == "A" ){
-            // console.log("over e.target", e.target);
-            // console.log('over vn', vn);
-            var id = e.target.getAttribute("href");
-            // add highlight class
-            vn.dom.querySelector('nav.links>div[uid="'+id+'"]>.summary').click();
-          }
-        }
-      }, m.trust(this.rendered_text)),
-      // links from
-      this.links.from.length
-        ? m('nav', {'class':'links from'}, this.links.from.map(id => {
-            var obj = _dbs.data_byid[_dbs.lang][id];
-            // console.log('link from : obj', obj);
-            // return a dot
-            return m(_Dot, {
-              "id":id,
-              'text':obj.text,
-              'dottype':obj.dottype,
-              'type':obj.type,
-              // passe the memory of crossed dots plus the current one
-              'parents':vn.state.parents.concat([vn.state.id]),
-              // activate link only if not in parents (already went through it)
-              'active':vn.state.parents.indexOf(id) == -1 ? true:false
-            });
-          })
-        )
-        : null, // if no links from, add nothing
-    ];
-  },
-  setPreviewContent(vn){
-    this.dot_content = [
-        // m('span', {'class':'id'}, this.id), // this.type+' '+
-        // m('span', {'class':'bullet'}, m.trust('•')),
-        m('span', {
-          'class':'title',
-          onclick(e){
-            // TODO: animate openening (text and links separatly)
-            vn.state.opened = true;
-          }
-        }, m.trust(this.title)), // TODO: on nested dot add full description : Part 1, Prop 8, scolie
-        m('p', {
-          'class':'summary',
-          onclick(e){
-            // TODO: animate openening (text and links separatly)
-            vn.state.opened = true;
-          }
-        }, m.trust(this.summary))
-    ];
-  },
-  view(vn){
-    if (this.active && this.opened) {
-      // full view of dot with linked dots
-      this.setOpenedContent(vn);
-    }else{
-      // preview dot
-      this.setPreviewContent(vn);
-    }
-
-    return m('div',{
-        'uid':this.id,
-        'class':`dot ${this.dottype}`,
-      },
-      this.dot_content
-    );
+    // this.opened = 0;
   },
   onupdate(vn){
-    // console.log('_Dot : onupdate', vn);
+    // if(this.nested) console.log(`onupdate ${this.id}`);
     if(this.active){
       if (this.opened){
         vn.dom.classList.add('opened');
@@ -227,14 +116,116 @@ var _Dot = {
         vn.dom.classList.remove('opened');
       }
     }
+  },
+  setupLinks(vn, c, links){
+    return m('nav', {'class':`links ${c}`}, links.map(id => {
+        // console.log(id);
+        if(typeof _dbs.data_byid[_dbs.lang][id] !== 'undefined'){
+          var obj = _dbs.data_byid[_dbs.lang][id];
+          // console.log('link to : obj', obj);
+          return m(_Dot, {
+            "id":id,
+            'title':obj.title,
+            'breadcrumb':obj.breadcrumb,
+            'text':obj.text,
+            'dottype':obj.dottype,
+            'type':obj.type,
+            // passe the memory of crossed dots plus the current one
+            'parents':vn.state.parents.concat([vn.state.id]),
+            // activate link only if not in parents (already went through it)
+            'active':vn.state.parents.indexOf(id) == -1 ? true:false,
+            // 'nested':true,
+          });
+        }
+      })
+    );
+  },
+  viewOpenedContent(vn){
+    // if(this.nested) console.log(`viewOpenedContent ${this.id} : vn`, vn);
+    // if(this.nested) console.log(`viewOpenedContent ${this.id} : this`, this);
+    return m('div', {
+        'uid':this.id,
+        'class':`dot ${this.dottype}${this.nested ? ' nested':''}`},
+      [
+        // links to
+        this.links.to.length
+          ? this.setupLinks(vn, 'to', this.links.to)
+          : null, // if no links to, add nothing
+        // close btn
+        m('div', {
+            'class':'close-link-btn',
+            onclick(e){
+              vn.state.opened = 0;
+            }
+          }, m('span', m.trust("🗙"))
+        ),
+        // Title
+        m('span', {'class':'title'}, m.trust(this.nested ? this.breadcrumb : this.title)),
+        // full text
+        m('section', {
+            'class':'text',
+            onmouseover(e){
+              e.preventDefault();
+              if(e.target.nodeName == "A" ){
+                let id = e.target.getAttribute("href");
+                // add highlight class
+                vn.dom.querySelector(`nav.links>div[uid="${id}"]`).classList.add('highlight');
+              }else{
+                // remove all hilight class
+                for (link of vn.dom.querySelectorAll('nav.links>div.dot')) {
+                  link.classList.remove('highlight');
+                }
+              }
+            },
+            onclick(e){
+              e.preventDefault();
+              if(e.target.nodeName == "A" ){
+                let id = e.target.getAttribute("href");
+                vn.dom.querySelector(`nav.links>div[uid="${id}"]>.title`).click();
+              }
+            }
+          }, m.trust(this.rendered_text)
+        ),
+        // links from
+        this.links.from.length
+          ? this.setupLinks(vn, 'from', this.links.from)
+          : null, // if no links from, add nothing
+      ]
+    );
+  },
+  viewPreviewContent(vn){
+    // if(this.nested) console.log(`viewPreviewContent ${this.id} : vn`, vn);
+    // if(this.nested) console.log(`viewPreviewContent ${this.id} : this`, this);
+    return m('div', {
+        'uid':this.id,
+        'class':`dot ${this.dottype}${this.nested ? ' nested':''}`
+      },
+      [
+        // bullet
+        m('div', {'class':'bullet'}, m('span', m.trust('⚫'))),
+        m('span', {
+          'class':'title',
+          onclick(e){
+            if(!vn.state.opened) vn.state.opened = 1;
+          }
+        }, m.trust(this.nested ? this.breadcrumb : this.title)),
+        m('p', {'class':'summary'}, m.trust(this.summary))
+      ]
+    );
+  },
+  view(vn){
+    // if (this.nested) console.log(`view ${this.id}`);
+    // if (this.opened) console.log(`view ${this.id} : vn`,vn);
+    // if (this.nested) console.log(`view ${this.id} : this`,this);
+
+    return this.active && vn.state.opened
+      ? this.viewOpenedContent(vn)  // full view of dot with linked dots
+      : this.viewPreviewContent(vn); // preview dot
   }
 }
 
 /*
-
-down vote
-Here's full list of black dotlikes from unicode
-
+full list of black dotlikes from unicode
 ● - ● - Black Circle
 ⏺ - ⏺ - Black Circle for Record
 ⚫ - ⚫ - Medium Black Circle
@@ -247,34 +238,34 @@ Here's full list of black dotlikes from unicode
 🌑 - 🌑 - New Moon Symbol
 */
 
-
 //   _______   _ __   __
 //  / ___/ /  (_) /__/ /
 // / /__/ _ \/ / / _  /
 // \___/_//_/_/_/\_,_/
 var _Child = {
-  id:null,
-  part:null,
-  type:null,
-  dottype:null,
-  // nested:false,
-  text:'',
+  // id:null,
+  // part:null,
+  // type:null,
+  // dottype:null,
+  // // nested:false,
+  // text:'',
   oninit(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;
-    this.dottype = vn.attrs.dottype;
+    // // 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;
+    // this.dottype = vn.attrs.dottype;
   },
   onbeforeupdate(vn, old){
-    // this.nested = vn.attrs.nested || false;
-    this.type = vn.attrs.type;
-    this.text = vn.attrs.text;
+    // // this.nested = vn.attrs.nested || false;
+    // this.type = vn.attrs.type;
+    // this.text = vn.attrs.text;
   },
   view(vn){
-    return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type, 'dottype':this.dottype});
+    // return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type, 'dottype':this.dottype});
+    return m(_Dot, vn.attrs);
   }
 };
 
@@ -292,31 +283,37 @@ var _Enonce = {
   // nested:false,
   childs:[],
   oninit(vn){
-  //   // console.log('Enonce on init', vn);
-    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;
-    this.dottype = vn.attrs.dottype;
+  // //   // console.log('Enonce on init', vn);
+  //   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;
+  //   this.dottype = vn.attrs.dottype;
   },
   onbeforeupdate(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);
-    this.dottype = vn.attrs.dottype;
+    // // 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);
+    // this.dottype = vn.attrs.dottype;
   },
   view(vn){
     // if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
     return [
       // create dot
-      m(_Dot, {"id":this.id, 'text':this.text, 'type':this.title, 'dottype':this.dottype}),
+      // m(_Dot, {
+      //   'id':this.id
+      //   'text':this.text
+      //   'type':this.title
+      //   'dottype':this.dottype
+      // }),
+      m(_Dot, vn.attrs),
       // addd children
-      this.childs.map(c => { return m(_Child, c); })
+      vn.attrs.childs.map(c => { return m(_Child, c); })
     ]
   }
 }

assets/modules/dbs.js

@@ -34,6 +34,45 @@ module.exports = {
   loaded_dbs:0,
   data_byid:[],
   data_strct:{},
+  rx_id:/^(\d)(app|agd|\d\d|pr|ad|ap|c|p|d|a)(cd|sc|\d\d|d|c|a|l|p|\d)?(e|\d|sc)?(d|c|a|sc)?$/,
+  id_strct:[
+    'Partie',
+    {
+      'prop':'Proposition', // \d\d
+      'app' :'Appendice',
+      'agd' :'Definition generale des affections',
+      'pr'  :'Preface',
+      'ad'  :'Definiton des affections',
+      'ap'  :'Appendice',
+      'c'   :'Corollaire',
+      'p'   :'Postulat',
+      'd'   :'Definition',
+      'a'   :'Axiome',
+    },
+    {
+      // \d\d
+      // \d
+      'cd'  :'Corollaire Demonstration',
+      'sc'  :'Scolie',
+      'd'   :'Demonstration',
+      'c'   :'Corollaire',
+      'a'   :'Axiome',
+      'l'   :'Lemme',
+      'p'   :'Postulat',
+    },
+    {
+      // \d
+      'e':'Explication',
+      'sc':'Scolie',
+    },
+    {
+      'd':'Demonstration',
+      'c':'Corollaire',
+      'a':'Axiome',
+      'sc':'Scolie',
+    }
+  ],
+
   load(callback) {
     // load all dbs, when all loaded call main app callback function
     for (var i = 0; i < this.langs.length; i++) {
@@ -94,6 +133,8 @@ module.exports = {
               // guess the type from the id
               // console.log(this.data[l][p].enonces[e].id);
               this.data[l][p].enonces[e].dottype = this.setupType(this.data[l][p].enonces[e].id);
+              // breadcrumb (full tree title)
+              this.data[l][p].enonces[e].breadcrumb = this.setupBreadcrumb(this.data[l][p].enonces[e].id);
               // records childs in array keyed by ids
               this.data_byid[l][this.data[l][p].enonces[e].id] = this.data[l][p].enonces[e];
             }
@@ -103,6 +144,8 @@ module.exports = {
               if(this.data[l][p].enonces[e].childs[c].id){
                 // guess the type from the id
                 this.data[l][p].enonces[e].childs[c].dottype = this.setupType(this.data[l][p].enonces[e].childs[c].id);
+                // breadcrumb (full tree title)
+                this.data[l][p].enonces[e].childs[c].breadcrumb = this.setupBreadcrumb(this.data[l][p].enonces[e].childs[c].id);
                 // records childs in array keyed by ids
                 this.data_byid[l][this.data[l][p].enonces[e].childs[c].id] = this.data[l][p].enonces[e].childs[c];
               }
@@ -114,10 +157,42 @@ module.exports = {
     // console.log('this.data_byid', this.data_byid);
     this.parseStrct(callback);
   },
+  setupBreadcrumb(id){
+    // /^(\d)(app|agd|\d\d|pr|ad|ap|c|p|d|a)(cd|sc|\d\d|d|c|a|l|p|\d)?(e|\d|sc)?(d|c|a|sc)?$/
+    var breadcrumb = ""
+    var m = id.match(this.rx_id);
+    if(m){
+      m.shift();
+      // console.log("id", m);
+      for (let i = 0; i < m.length; i++) { // we loop through match result variables
+        // console.log('m[i]', m[i]);
+        if(i == 0){ // first digit is part number
+          breadcrumb += `${this.id_strct[i]} ${m[i]}`
+        }else{
+          if(typeof m[i] !== 'undefined'){
+            if(isNaN(m[i])){ // if not a number we get the label
+              breadcrumb += ` ${this.id_strct[i][m[i]]}`
+            }else{ // if its a number
+              if(i == 1){ // we just add the number to the breadcrumb preceded by 'Proposition'
+                breadcrumb += ` ${this.id_strct[i]['prop']} ${m[i]}`
+              }else{ // we just add the number to the breadcrumb
+                breadcrumb += ` ${m[i]}`
+              }
+            }
+          }else{ // if variable is not defined we are at the end of the id
+            break
+          }
+        }
+      }
+    }
+
+    // console.log('breadcrumb', breadcrumb);
+    return breadcrumb;
+  },
   setupType(id){
     // console.log('setupType',id);
-    var rx_id = /^(\d)(app|agd|\d\d|pr|ad|ap|c|p|d|a)(cd|sc|\d\d|d|c|a|l|p|\d)?(e|\d|sc)?(d|c|a|sc)?$/;
-    var m = id.match(rx_id);
+    // /^(\d)(app|agd|\d\d|pr|ad|ap|c|p|d|a)(cd|sc|\d\d|d|c|a|l|p|\d)?(e|\d|sc)?(d|c|a|sc)?$/
+    var m = id.match(this.rx_id);
     if(m){
       switch(true){
         case /^\d{2}$/.test(m[2]): // proposition

assets/modules/ui.js

@@ -41,7 +41,7 @@ module.exports = {
       e._part = e.getAttribute('part');
       part_titles.push(e)
     });
-    console.log('part_titles', part_titles);
+    // console.log('part_titles', part_titles);
 
     var stkd_part,
         last_stkd_part = false,
@@ -64,7 +64,7 @@ module.exports = {
       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);
+          // console.log('new sticky', stkd_part.innerHTML);
           // clone only once
           clone = stkd_part.cloneNode(true);
           stkd_wrapper.innerHTML = '';