added filters by text type
This commit is contained in:
Vendored
+22
-9
@@ -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; }
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+3
-1
@@ -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": {
|
||||
|
||||
+25
-6
@@ -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;
|
||||
|
||||
@@ -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'){
|
||||
|
||||
+35
-24
@@ -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;
|
||||
|
||||
+33
-6
@@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
]);
|
||||
})
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ____ __
|
||||
// / __ \____ __ __/ /____ ____ ___ ___ ____ __ __
|
||||
// / /_/ / __ \/ / / / __/ _ \ / __ `__ \/ _ \/ __ \/ / / /
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user