refactoring, fix reverse breadcrumb

assets/main.js

@@ -42,7 +42,7 @@ function init(){
     console.log("Init _dbs.data_byid", _dbs.data_byid);
     console.log("Init _dbs.data_strct", _dbs.data_strct);
     m.route.prefix("");
-		m.route(document.body, "/fr/text", {
+		m.route(document.body, "/fr/connections", {
 			"/:lang/text": {
 				render(vn){
 					// console.log('Routing render : vn', vn);

assets/modules/ModeConnections.js

@@ -249,6 +249,7 @@ var _Child = {
   // dottype:null,
   // // nested:false,
   // text:'',
+  childs:[],
   oninit(vn){
     // // console.log('vn.attrs', vn.attrs);
     // this.id = vn.attrs.id;
@@ -265,7 +266,17 @@ var _Child = {
   },
   view(vn){
     // return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type, 'dottype':this.dottype});
-    return m(_Dot, vn.attrs);
+
+    // if (typeof vn.attrs.childs === 'undefined'){
+    //   debugger;
+    // }
+    return [
+      m(_Dot, vn.attrs),
+      // add children
+      typeof vn.attrs.childs !== 'undefined'
+      ? vn.attrs.childs.map(c => { return m(_Child, c); })
+      : null
+    ];
   }
 };
 

assets/modules/ModeText.js

@@ -205,14 +205,20 @@ var _Item = {
       },
       [
         // create title node (only if not nested)
-        !this.nested ? m("h3", {
-            // 'ref':vn.attrs.href,
-            // onclick(e){ WHAT IS THIS STATE ACTIVE ???
-            //   vn.state.active = vn.state.active ? 0 : 1;
-            // }
-          }, m.trust(markdown.renderInline(this.type))) : null,
+        !this.nested
+          ? m("h3", {
+              // 'ref':vn.attrs.href,
+              // onclick(e){ WHAT IS THIS STATE ACTIVE ???
+              //   vn.state.active = vn.state.active ? 0 : 1;
+              // }
+            }, m.trust(markdown.renderInline(this.type)))
+          : null,
         // create text node
-        m(_Text, {'text':this.text, 'id':this.id})
+        m(_Text, {'text':this.text, 'id':this.id}),
+        // add children (only if not nested)
+        // typeof vn.attrs.childs !== 'undefined' && !this.nested
+        //   ? vn.attrs.childs.map(c => { return m(_Item, c); })
+        //   : null
       ]
     )
   }
@@ -260,7 +266,9 @@ var _Enonce = {
       // create text node
       m(_Text, {'text':this.text, 'id':this.id}),
       // add children (only if not nested)
-      !this.nested ? this.childs.map(c => { return m(_Item, c); }) : null
+      typeof this.childs !== 'undefined' && !this.nested
+        ? this.childs.map(c => { return m(_Item, c); })
+        : null
     ])
   }
 }
@@ -272,26 +280,26 @@ var _Enonce = {
 // /_/    \__,_/_/   \__/
 var _Part = {
   oninit(vn){
-    this.id = vn.attrs.id;
-    this.title = vn.attrs.title || '';
-    this.enonces = vn.attrs.enonces;
+    // this.id = vn.attrs.id;
+    // this.title = vn.attrs.title || '';
+    // this.enonces = vn.attrs.enonces;
   },
   onbeforeupdate(vn, old){
     // console.log('_Part, onbeforeupdate old',old);
-    this.title = vn.attrs.title || '';
-    this.enonces = vn.attrs.enonces;
+    // this.title = vn.attrs.title || '';
+    // this.enonces = vn.attrs.enonces;
   },
   view(vn){
     // console.log("part enonces", vn.attrs.enonces);
     return m("section", {
-        'id'    :this.id,
+        'id'    :vn.attrs.id,
         'class' :'part'
       },
       [
         // create title node
-        m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
+        m("h1", {'class':'part-title', 'part':vn.attrs.id}, m.trust(markdown.renderInline(vn.attrs.title))),
         // create text node
-        this.enonces.map(e => {
+        vn.attrs.enonces.map(e => {
           // console.log(e.title +" - "+ e.type);
           // var title = e.title || '';
           switch (e.type) {
@@ -307,7 +315,7 @@ var _Part = {
               break;
             default:
               // or build structure
-              return m(_Enonce, Object.assign({"partid":this.id},e));
+              return m(_Enonce, Object.assign({"partid":vn.attrs.id},e));
           }
         })
       ]

assets/modules/dbs.js

@@ -120,36 +120,54 @@ module.exports = {
   },
   parseByID(callback){
     // create a id keyed array of contents
+    var e_id, c_id, cc_id;
     // loop through laguages
-    for(l in this.data){
+    for(let l in this.data){
       // console.log('l', l);
       this.data_byid[l] = {};
       // loop through parts
-      for (p in this.data[l]) {
+      for (let p in this.data[l]) {
         if(this.data[l][p].type !== "intro"){
           // console.log(this.data[l][p]);
           // loop through enonces
-          for (e in this.data[l][p].enonces) {
+          for (let e in this.data[l][p].enonces) {
             // console.log('e',e);
             if(this.data[l][p].enonces[e].id){
+              e_id = this.data[l][p].enonces[e].id;
               // 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);
+              this.data[l][p].enonces[e].dottype = this.setupType(e_id);
               // breadcrumb (full tree title)
-              this.data[l][p].enonces[e].breadcrumb = this.setupBreadcrumb(this.data[l][p].enonces[e].id);
+              this.data[l][p].enonces[e].breadcrumb = this.setupBreadcrumb(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];
+              this.data_byid[l][e_id] = this.data[l][p].enonces[e];
             }
             // loop through childs
-            for (c in this.data[l][p].enonces[e].childs){
+            for (let c in this.data[l][p].enonces[e].childs){
               // console.log(_db[p][e][c]);
               if(this.data[l][p].enonces[e].childs[c].id){
+                c_id = 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);
+                this.data[l][p].enonces[e].childs[c].dottype = this.setupType(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);
+                this.data[l][p].enonces[e].childs[c].breadcrumb = this.setupBreadcrumb(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];
+                this.data_byid[l][c_id] = this.data[l][p].enonces[e].childs[c];
+              }
+              // loop through childs of childs
+              for (let cc in this.data[l][p].enonces[e].childs[c].childs){
+                // console.log(_db[p][e][c]);
+                if(this.data[l][p].enonces[e].childs[c].childs[cc].id){
+                  cc_id = this.data[l][p].enonces[e].childs[c].childs[cc].id;
+                  console.log('cc_id', cc_id);
+                  // guess the type from the id
+                  this.data[l][p].enonces[e].childs[c].childs[cc].dottype = this.setupType(cc_id);
+                  // breadcrumb (full tree title)
+                  this.data[l][p].enonces[e].childs[c].childs[cc].breadcrumb = this.setupBreadcrumb(cc_id);
+                  // records childs in array keyed by ids
+                  this.data_byid[l][cc_id] = this.data[l][p].enonces[e].childs[c].childs[cc];
+                }
+
               }
             }
           }
@@ -161,7 +179,7 @@ module.exports = {
   },
   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 breadcrumb_array = [];
     var m = id.match(this.rx_id);
     var mode = 'full';
     if(m){
@@ -175,28 +193,33 @@ module.exports = {
       }
       // console.log('m_clean', m_clean);
 
-      for (let i = m_clean.length-1; i >= 0; i--) { // we loop through match result variables
+      for (let i = 0; i < m_clean.length; i++) { // we loop through match result variables
+      // for (let i = m_clean.length-1; i >= 0; i--) { // we loop through match result variables in reverse order
         // console.log('m_clean['+i+']', m_clean[i]);
         if(i == 0){ // first digit is part number
-          breadcrumb += ` ${this.id_strct[i]['dim']} ${m_clean[i]}`
+          breadcrumb_array.unshift(`${this.id_strct[i]['dim']} ${m_clean[i]}`);
         }else{
           // display mode
           mode = i !== m_clean.length-1 ? 'dim' : 'full';
           if(isNaN(m_clean[i])){ // if not a number we get the label
-            breadcrumb += ` ${this.id_strct[i][m_clean[i]][mode]}`
+            breadcrumb_array.unshift(`${this.id_strct[i][m_clean[i]][mode]}`);
+            // breadcrumb_array.splice(1, 0, `${m_clean[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'][mode]} ${m_clean[i]}`
-            }else{ // we just add the number to the breadcrumb
-              breadcrumb += ` ${m_clean[i]}`
+              breadcrumb_array.unshift(`${this.id_strct[i]['prop'][mode]} ${m_clean[i]}`);
+            }else{ // we just add the number to the breadcrumb behind the last added item
+              // breadcrumb_array.unshift(`${m_clean[i]}`);
+              // debugger;
+              breadcrumb_array.splice(1, 0, `${m_clean[i]}`);
+
             }
           }
         }
       }
     }
 
-    // console.log('breadcrumb', breadcrumb);
-    return breadcrumb;
+    // console.log('breadcrumb_array', breadcrumb_array);
+    return breadcrumb_array.join(' ');
   },
   setupType(id){
     // console.log('setupType',id);

webpack.config.js

@@ -43,46 +43,46 @@ module.exports = {
       // define where to save the file
       filename: '[name].css', allChunks: true,
     }),
-    new UglifyJsPlugin({
-      sourceMap: true,
-      parallel:4,
-      uglifyOptions: {
-        ecma: 8,
-        // disable most of compress to gain in compilation speed
-        // https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1
-        compress: {
-          arrows: false,
-          booleans: false,
-          // cascade: false,
-          collapse_vars: false,
-          comparisons: false,
-          computed_props: false,
-          hoist_funs: false,
-          hoist_props: false,
-          hoist_vars: false,
-          if_return: false,
-          inline: false,
-          join_vars: false,
-          keep_infinity: true,
-          loops: false,
-          negate_iife: false,
-          properties: false,
-          reduce_funcs: false,
-          reduce_vars: false,
-          sequences: false,
-          side_effects: false,
-          switches: false,
-          top_retain: false,
-          toplevel: false,
-          typeofs: false,
-          unused: false,
-          conditionals: false,
-          dead_code: true,
-          evaluate: false,
-          warnings: false
-        },
-      }
-    })
+    // new UglifyJsPlugin({
+    //   sourceMap: true,
+    //   parallel:4,
+    //   uglifyOptions: {
+    //     ecma: 8,
+    //     // disable most of compress to gain in compilation speed
+    //     // https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1
+    //     compress: {
+    //       arrows: false,
+    //       booleans: false,
+    //       // cascade: false,
+    //       collapse_vars: false,
+    //       comparisons: false,
+    //       computed_props: false,
+    //       hoist_funs: false,
+    //       hoist_props: false,
+    //       hoist_vars: false,
+    //       if_return: false,
+    //       inline: false,
+    //       join_vars: false,
+    //       keep_infinity: true,
+    //       loops: false,
+    //       negate_iife: false,
+    //       properties: false,
+    //       reduce_funcs: false,
+    //       reduce_vars: false,
+    //       sequences: false,
+    //       side_effects: false,
+    //       switches: false,
+    //       top_retain: false,
+    //       toplevel: false,
+    //       typeofs: false,
+    //       unused: false,
+    //       conditionals: false,
+    //       dead_code: true,
+    //       evaluate: false,
+    //       warnings: false
+    //     },
+    //   }
+    // })
   ],
   watch: true
 };