added filters by text type

assets/dist/main.css

@@ -702,14 +702,11 @@ header {
       position: absolute;
       margin: 0;
       left: 0;
-      padding: 0 1em 1em;
+      padding: 0 1em 0;
       background-color: white;
-      white-space: nowrap;
-      height: 1px;
-      opacity: 0;
-      overflow: hidden;
-      transition: opacity 0.3s ease-in-out; }
+      white-space: nowrap; }
       header #menus nav ul li {
+        position: relative;
         margin: 0;
         padding: 0;
         list-style: none;
@@ -717,9 +714,24 @@ header {
         font-weight: 500;
         font-size: 1.2em;
         line-height: 1.2; }
+        header #menus nav ul li:not(.active) {
+          height: 1px;
+          opacity: 0;
+          overflow: hidden;
+          transition: opacity 0.3s ease-in-out; }
         header #menus nav ul li a {
           color: inherit;
-          text-decoration: none; }
+          text-decoration: none;
+          display: inline-block;
+          width: 100%; }
+          header #menus nav ul li a:active, header #menus nav ul li a:focus {
+            outline: none;
+            -moz-outline-style: none; }
+        header #menus nav ul li.active a:after {
+          content: " \1F7AC";
+          font-style: normal;
+          font-size: 0.7em;
+          font-weight: 300; }
   header #menus:hover h3 {
     color: #646464; }
   header #menus:hover nav:hover {
@@ -727,10 +739,11 @@ header {
     header #menus:hover nav:hover h3 {
       color: #000; }
     header #menus:hover nav:hover ul {
+      padding-bottom: 1em; }
+    header #menus:hover nav:hover li {
       height: auto;
       opacity: 1;
-      transition: height opacity 0.3s ease-in-out; }
-    header #menus:hover nav:hover li {
+      transition: height opacity 0.3s ease-in-out;
       color: #646464; }
       header #menus:hover nav:hover li:hover {
         color: #000; }

assets/main.js

@@ -40,7 +40,9 @@ 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);
+		console.log("Init _dbs.types", _dbs.types);
+		console.log("Init _dbs.data_bytype", _dbs.data_bytype);
     m.route.prefix("");
 		m.route(document.body, "/fr/connections", {
 			"/:lang/text": {

assets/main.scss

@@ -69,14 +69,12 @@ header{
       ul{
         position: absolute;
         margin:0;
-        left:0; padding:0 1em 1em;
+        left:0; padding:0 1em 0;
         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{
+          position: relative;
           margin:0;
           padding:0;
           list-style: none;
@@ -84,9 +82,29 @@ header{
           font-weight:500;
           font-size: 1.2em;
           line-height: 1.2;
+          &:not(.active){
+            height:1px; opacity:0;
+            overflow: hidden;
+            transition: opacity 0.3s ease-in-out;
+          }
+          // &.active{
+          //   z-index: 99;
+          // }
           a{
             color: inherit;
             text-decoration: none;
+            display: inline-block;
+            width: 100%;
+            &:active,
+            &:focus{ outline:none; -moz-outline-style: none; }
+          }
+          &.active{
+            a:after{
+              content: " \1F7AC";
+              font-style: normal;
+              font-size: 0.7em;
+              font-weight: 300;
+            }
           }
         }
       }
@@ -106,10 +124,11 @@ header{
           color:#000;
         }
         ul{
-          height:auto; opacity: 1;
-          transition: height opacity 0.3s ease-in-out;
+          padding-bottom: 1em;
         }
         li{
+          height:auto; opacity: 1;
+          transition: height opacity 0.3s ease-in-out;
           color: rgb(100,100,100);
           &:hover{
             color: #000;

assets/modules/ModeConnections.js

@@ -208,7 +208,12 @@ var _Dot = {
             if(!vn.state.opened) vn.state.opened = 1;
           }
         }, m.trust(this.nested ? this.breadcrumb : this.title)),
-        m('p', {'class':'summary'}, m.trust(this.summary))
+        m('p', {
+          'class':'summary',
+          onclick(e){
+            if(!vn.state.opened) vn.state.opened = 1;
+          }
+        }, m.trust(this.summary))
       ]
     );
   },
@@ -242,15 +247,17 @@ var _Child = {
   // onbeforeupdate(vn, old){},
   view(vn){
     return [
-      m(_Dot, vn.attrs),
+      !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype
+        ? m(_Dot, vn.attrs)
+        : null,
       // add children
       typeof vn.attrs.childs !== 'undefined'
-      ? vn.attrs.childs.map(c => {
-        c.lang = vn.attrs.lang;
-        c.level = vn.attrs.level + 1;
-        return m(_Child, c);
-      })
-      : null
+        ? vn.attrs.childs.map(c => {
+          c.lang = vn.attrs.lang;
+          c.level = vn.attrs.level + 1;
+          return m(_Child, c);
+        })
+        : null
     ];
   }
 };
@@ -266,9 +273,11 @@ var _Enonce = {
   view(vn){
     vn.attrs.level = 0;
     return [
+      !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype
       // create dot
-      m(_Dot, vn.attrs),
-      // addd children
+        ? m(_Dot, vn.attrs)
+        : null,
+      // add children
       vn.attrs.childs.map(c => {
         c.lang = vn.attrs.lang;
         c.level = 1;
@@ -307,7 +316,9 @@ var _Part = {
           switch (e.type) {
             case "title":
               // handle titles
-              return m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)));
+              return !_dbs.active_type_filter
+                ? m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)))
+                : null;
               break;
             case "filet":
               // handle filets
@@ -357,7 +368,8 @@ module.exports = {
     console.log('Connection, onbeforeupdate old',old, 'vn',vn);
   },
   view(vn){
-    console.log('_ModeConnections view', vn.attrs.lang);
+    // console.log('_ModeConnections view', vn.attrs.lang);
+    console.log('_dbs.active_type_filter : ', _dbs.active_type_filter);
     return m('main', {id:"content", 'class':'mode-connections'}, _dbs.data[vn.attrs.lang].map(p => {
         p.lang = vn.attrs.lang;
         if(p.id == 'intro'){

assets/modules/ModeText.js

@@ -224,25 +224,28 @@ var _Item = {
         // 'class':'item'+(this.nested ? ' nested':'')
         'class' :`item${this.nested ? ' nested':''} ${this.dottype}`
       },
-      [
-        // 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,
-        // create text node
-        typeof vn.attrs.text !== "undefined"
-          ? m(_Text, {'text':this.text, 'id':this.id, 'lang':vn.attrs.lang})
-          : null,
-        // add children (only if not nested)
-        // typeof vn.attrs.childs !== 'undefined' && !this.nested
-        //   ? vn.attrs.childs.map(c => { return m(_Item, c); })
-        //   : null
-      ]
+      // filter by type if active filter
+      !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype
+        ? [
+            // 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,
+            // create text node
+            typeof vn.attrs.text !== "undefined"
+              ? m(_Text, {'text':this.text, 'id':this.id, 'lang':vn.attrs.lang})
+              : null,
+            // add children (only if not nested)
+            // typeof vn.attrs.childs !== 'undefined' && !this.nested
+            //   ? vn.attrs.childs.map(c => { return m(_Item, c); })
+            //   : null
+          ]
+        :null
     )
   }
 };
@@ -287,10 +290,15 @@ var _Enonce = {
       'class' :`enonce${vn.attrs.nested ? ' nested':''} ${this.dottype}`
     },
     [
-      // create title node (only if not nested)
-      !vn.attrs.nested ? m("h2", {}, m.trust(markdown.renderInline(this.title))) : null,
-      // create text node
-      m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id, 'nested':vn.attrs.nested}),
+      // filter by type if active filter (but let map on children)
+      !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype
+        // create title node (only if not nested)
+        ? !vn.attrs.nested ? m("h2", {}, m.trust(markdown.renderInline(this.title))) : null
+        : null,
+        !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype
+        // create text node
+        ? m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id, 'nested':vn.attrs.nested})
+        : null,
       // add children (only if not nested)
       typeof vn.attrs.childs !== 'undefined' && !vn.attrs.nested
         ? vn.attrs.childs.map(c => {
@@ -335,7 +343,9 @@ var _Part = {
             case "title":
               // handle titles
               // console.log('title');
-              return m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)));
+              return !_dbs.active_type_filter 
+                ? m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)))
+                : null ;
               break;
             case "filet":
               // handle filets
@@ -394,6 +404,7 @@ module.exports = {
   // },
   view(vn){
     // console.log('_ModeText view', vn.attrs.lang);
+    console.log('_dbs.active_type_filter : ', _dbs.active_type_filter);
     return m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map((p) => {
         // console.log("MAP _dbs", p);
         p.lang = vn.attrs.lang;

assets/modules/dbs.js

@@ -32,6 +32,9 @@ module.exports = {
   data:[],
   loaded_dbs:0,
   data_byid:[],
+  data_bytype:[], // not sure we'll use it ...
+  types:[],
+  active_type_filter:null,
   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:[
@@ -141,12 +144,16 @@ module.exports = {
 
   },
   parseByID(callback){
+    // TODO: make this function recursive to avoid code repetition
     // create a id keyed array of contents
-    var e_id, c_id, cc_id;
-    // loop through laguages
+    var e_id, c_id, cc_id,
+        dottype;
+    // loop through languages
     for(let l in this.data){
       // console.log('l', l);
       this.data_byid[l] = {};
+      this.data_bytype[l] = {};
+      this.types[l] = [];
       // loop through parts
       for (let p in this.data[l]) {
         if(this.data[l][p].type !== "intro"){
@@ -158,11 +165,18 @@ module.exports = {
               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(e_id);
+              dottype = this.setupType(e_id);
+              this.data[l][p].enonces[e].dottype = dottype;
               // breadcrumb (full tree title)
               this.data[l][p].enonces[e].breadcrumb = this.setupBreadcrumb(e_id);
               // records childs in array keyed by ids
               this.data_byid[l][e_id] = this.data[l][p].enonces[e];
+              // data by dottype
+              if (dottype) {
+                if(typeof this.data_bytype[l][dottype] == "undefined") this.data_bytype[l][dottype] = {};
+                if(this.types[l].indexOf(dottype) == -1) this.types[l].push(dottype);
+                this.data_bytype[l][dottype][e_id] = this.data[l][p].enonces[e];
+              }
             }
             // loop through childs
             for (let c in this.data[l][p].enonces[e].childs){
@@ -170,11 +184,18 @@ module.exports = {
               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(c_id);
+                dottype = this.setupType(c_id);
+                this.data[l][p].enonces[e].childs[c].dottype = dottype;
                 // breadcrumb (full tree title)
                 this.data[l][p].enonces[e].childs[c].breadcrumb = this.setupBreadcrumb(c_id);
                 // records childs in array keyed by ids
                 this.data_byid[l][c_id] = this.data[l][p].enonces[e].childs[c];
+                // data by dottype
+                if (dottype) {
+                  if(typeof this.data_bytype[l][dottype] == "undefined") this.data_bytype[l][dottype] = {};
+                  if(this.types[l].indexOf(dottype) == -1) this.types[l].push(dottype);
+                  this.data_bytype[l][dottype][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){
@@ -183,13 +204,19 @@ module.exports = {
                   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);
+                  dottype = this.setupType(cc_id);
+                  this.data[l][p].enonces[e].childs[c].childs[cc].dottype = dottype;
                   // 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];
+                  // data by dottype
+                  if (dottype) {
+                    if(typeof this.data_bytype[l][dottype] == "undefined") this.data_bytype[l][dottype] = {};
+                    if(this.types[l].indexOf(dottype) == -1) this.types[l].push(dottype);
+                    this.data_bytype[l][dottype][cc_id] = this.data[l][p].enonces[e].childs[c].childs[cc];
+                  }
                 }
-
               }
             }
           }

assets/modules/header.js

@@ -25,6 +25,7 @@ module.exports = {
       ]),
       m('div', {'id':"menus"}, [
         m(_PartsNav),
+        m(_Filters),
         m(_RouteMenu),
         m(_LangMenu)
       ])
@@ -57,6 +58,44 @@ var _PartsNav = {
   }
 };
 
+
+//  ___ _ _ _                __  __
+// | __(_) | |_ ___ _ _ ___ |  \/  |___ _ _ _  _
+// | _|| | |  _/ -_) '_(_-< | |\/| / -_) ' \ || |
+// |_| |_|_|\__\___|_| /__/ |_|  |_\___|_||_\_,_|
+var _Filters = {
+  view(vn){
+    var lang = m.route.param('lang');
+    return m('nav', {id:'filters'}, [
+      m('h3', _i18n.t('Filters')),
+      m('ul', _dbs.types[lang].map(function(p){
+        // console.log("types", p);
+        return m('li', [
+          m('a', {
+            'href':`#filter-${p}`,
+            'type':`${p}`,
+            onclick(e){
+              // console.log('click filter btn', type);
+              e.preventDefault();
+              if(e.target.parentNode.classList.contains('active')){
+                e.target.parentNode.classList.remove('active');
+                _dbs.active_type_filter = null;
+              }else{
+                e.target.parentNode.classList.add('active');
+                let type = e.target.getAttribute("type");
+                _dbs.active_type_filter = type;
+              }
+              return false;
+            }
+          }, p)
+        ]);
+      })
+      )
+    ]);
+  }
+}
+
+
 //     ____              __
 //    / __ \____  __  __/ /____     ____ ___  ___  ____  __  __
 //   / /_/ / __ \/ / / / __/ _ \   / __ `__ \/ _ \/ __ \/ / / /

assets/modules/i18n.js

@@ -16,7 +16,7 @@ module.exports = {
     this.lang = l
   },
   log(msg){
-    console.log(`i18n : ${msg}`);
+    console.warn(`i18n : ${msg}`);
   },
   fallback:'en',
   lang: null,
@@ -51,5 +51,11 @@ module.exports = {
       'bra':'Conexões',
       'lat':'Hospites'
     },
+    'Filters':{
+      'en':'Filters',
+      'fr':'Filtres',
+      'bra':'Filtros',
+      'lat':'Filtra'
+    }
   }
 }