dots navigation is functional
This commit is contained in:
Bachir Soussi Chiadmi
Vendored
+77
-31
@@ -753,15 +753,17 @@ html, body {
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 3em;
|
||||
top: 0;
|
||||
z-index: 5; }
|
||||
z-index: 5;
|
||||
background-color: white; }
|
||||
header > * {
|
||||
display: inline-block;
|
||||
vertical-align: bottom; }
|
||||
header > *:first-child {
|
||||
margin-left: 1em; }
|
||||
header > *:last-child {
|
||||
margin-right: 1em; }
|
||||
header > h1 {
|
||||
margin: 0 0 0 50px; }
|
||||
|
||||
nav#menus {
|
||||
float: right; }
|
||||
@@ -780,15 +782,11 @@ nav#menus {
|
||||
color: inherit; }
|
||||
|
||||
main#content {
|
||||
margin: 3em auto;
|
||||
width: 450px; }
|
||||
main#content > * {
|
||||
width: 450px; }
|
||||
margin-top: 3em; }
|
||||
|
||||
h1.part {
|
||||
font-size: 1.6em;
|
||||
width: 450px;
|
||||
margin: 1em 0; }
|
||||
width: 450px; }
|
||||
|
||||
section.enonce {
|
||||
width: 450px;
|
||||
@@ -824,36 +822,84 @@ section.enonce {
|
||||
padding-left: 2em;
|
||||
border-left: 1px solid #999; }
|
||||
|
||||
h1.part {
|
||||
margin: 0 0 0 50px; }
|
||||
|
||||
.dot {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform 0.2s ease-in-out; }
|
||||
.dot span.id {
|
||||
border: 1px solid white;
|
||||
width: 500px; }
|
||||
.dot > span.id {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: -3.5em;
|
||||
opacity: 0;
|
||||
transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out; }
|
||||
.dot p.summary {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1em;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out; }
|
||||
.dot:hover, .dot.opened {
|
||||
transform: translate3d(0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out; }
|
||||
.dot:hover p.summary, .dot.opened p.summary {
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s ease-in-out; }
|
||||
.dot:hover span.id, .dot.opened span.id {
|
||||
opacity: 1;
|
||||
transform: translate3d(-0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out; }
|
||||
.dot > span.bullet {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
font-size: 15px;
|
||||
font-kerning: none; }
|
||||
.dot > p.summary {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
width: 405px; }
|
||||
.dot:not(.disabled) > p.summary {
|
||||
cursor: pointer; }
|
||||
.dot.disabled > p.summary {
|
||||
cursor: default; }
|
||||
.dot > section.text {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
width: 405px; }
|
||||
.dot > section.text p {
|
||||
margin: 0; }
|
||||
.dot > section.text p:not(:last-child) {
|
||||
margin-bottom: 1em; }
|
||||
.dot.to-links > section.text {
|
||||
border-top: 1px solid #e2e2e2; }
|
||||
.dot.from-links > section.text {
|
||||
border-bottom: 1px solid #e2e2e2; }
|
||||
.dot > aside.links {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
box-sizing: border-box; }
|
||||
.dot > aside.links.to {
|
||||
bottom: 100%;
|
||||
margin-top: 30px;
|
||||
padding-bottom: 10px; }
|
||||
.dot > aside.links.from {
|
||||
top: 100%;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 30px; }
|
||||
.dot > aside.links:before {
|
||||
content: "";
|
||||
border-left: 1px solid #e2e2e2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 70px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
z-index: -1; }
|
||||
.dot:hover > p.summary, .dot.opened > p.summary {
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s ease-in-out; }
|
||||
.dot:hover > span.id, .dot.opened > span.id {
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s ease-in-out; }
|
||||
.dot.disabled > * {
|
||||
color: grey; }
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0; }
|
||||
bottom: 0;
|
||||
background-color: white; }
|
||||
footer > * {
|
||||
margin-left: 1em; }
|
||||
|
||||
|
||||
Vendored
+584
-452
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -26,6 +26,7 @@ function init(){
|
||||
_dbs.load(function(){
|
||||
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(document.body, "/tree", {
|
||||
"/tree": _Tree,
|
||||
"/dots": _Dots,
|
||||
|
||||
+110
-28
@@ -21,15 +21,25 @@ html, body{
|
||||
padding:0;
|
||||
}
|
||||
|
||||
$header_height:3em;
|
||||
$dot_w:500px;
|
||||
$margin_left:50px;
|
||||
$bullet_w:40px;
|
||||
|
||||
header{
|
||||
position: fixed;
|
||||
width:100%; top:0; z-index: 5;
|
||||
width:100%; height:$header_height;
|
||||
top:0; z-index: 5;
|
||||
background-color: white;
|
||||
>*{
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
&:first-child{ margin-left: 1em;}
|
||||
// &:first-child{ margin-left: 1em;}
|
||||
&:last-child{ margin-right: 1em;}
|
||||
}
|
||||
>h1{
|
||||
margin: 0 0 0 $margin_left;
|
||||
}
|
||||
}
|
||||
|
||||
nav#menus{
|
||||
@@ -70,17 +80,18 @@ nav#menus{
|
||||
// }
|
||||
|
||||
main#content{
|
||||
margin: 3em auto;
|
||||
width: 450px;
|
||||
&>*{
|
||||
width: 450px;
|
||||
}
|
||||
margin-top: $header_height;
|
||||
// margin: 5em;
|
||||
// width: 450px;
|
||||
// &>*{
|
||||
// width: 450px;
|
||||
// }
|
||||
}
|
||||
|
||||
h1.part{
|
||||
font-size: 1.6em;
|
||||
width:450px;
|
||||
margin: 1em 0;
|
||||
// margin: 1em 0;
|
||||
}
|
||||
|
||||
// ______
|
||||
@@ -144,40 +155,110 @@ section.enonce{
|
||||
// / / / / __ \/ __/ ___/
|
||||
// / /_/ / /_/ / /_(__ )
|
||||
// /_____/\____/\__/____/
|
||||
|
||||
h1.part{
|
||||
margin:0 0 0 $margin_left;
|
||||
}
|
||||
|
||||
.dot{
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
transform: translate3d(0,0,0);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
span.id{
|
||||
// overflow-x: visible;
|
||||
// overflow-y: auto;
|
||||
border: 1px solid white;
|
||||
// transform: translate3d(0,0,0);
|
||||
// transition: transform 0.2s ease-in-out;
|
||||
width: $dot_w;
|
||||
>span.id{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left:-3.5em;
|
||||
// position: absolute;
|
||||
// left:-3.5em;
|
||||
width: $margin_left; text-align: right;
|
||||
opacity:0;
|
||||
// transform: translate3d(0, 0, 0);
|
||||
transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
|
||||
}
|
||||
span.bullet{
|
||||
}
|
||||
p.summary{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1em;
|
||||
opacity: 0;
|
||||
// transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
>span.bullet{
|
||||
display: inline-block;
|
||||
width:$bullet_w; text-align: center;
|
||||
vertical-align: top;
|
||||
font-size: 15px;
|
||||
font-kerning: none;
|
||||
}
|
||||
>p.summary{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
width : $dot_w - $margin_left - $bullet_w -5px;
|
||||
}
|
||||
&:not(.disabled) > p.summary{cursor: pointer;}
|
||||
&.disabled > p.summary{cursor: default;}
|
||||
|
||||
>section.text{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
width : $dot_w - $margin_left - $bullet_w -5px;
|
||||
p{
|
||||
margin:0;
|
||||
&:not(:last-child){
|
||||
margin-bottom:1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.to-links > section.text{
|
||||
border-top: 1px solid #e2e2e2;
|
||||
}
|
||||
&.from-links > section.text{
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
>aside.links{
|
||||
position:relative;
|
||||
left: $margin_left*2;
|
||||
box-sizing: border-box;
|
||||
&.to{
|
||||
bottom:100%;
|
||||
margin-top: 30px;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
&.from{
|
||||
top:100%;
|
||||
padding-top:10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
border-left: 1px solid #e2e2e2;
|
||||
position: absolute;
|
||||
top:0; left:$margin_left + ($bullet_w/2);
|
||||
height: 100%; width:1px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.opened{
|
||||
transform: translate3d(0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out;
|
||||
p.summary{
|
||||
// transform: translate3d(0.5em, 0, 0);
|
||||
// transition: transform 0.1s ease-in-out;
|
||||
>p.summary{
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
span.id{
|
||||
>span.id{
|
||||
opacity: 1;
|
||||
transform: translate3d(-0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
|
||||
// transform: translate3d(-0.5em, 0, 0);
|
||||
// transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
&.disabled>*{
|
||||
color:grey;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -185,5 +266,6 @@ section.enonce{
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
>*{margin-left: 1em;}
|
||||
}
|
||||
|
||||
+12
-3
@@ -89,20 +89,29 @@ module.exports = {
|
||||
// get links
|
||||
links_match = item.text.match(/\[[^\]]+\]\([^\)]+\)/g);
|
||||
// console.log(links_match);
|
||||
// if links exist on text
|
||||
if(links_match){
|
||||
for(link of links_match){
|
||||
// console.log(link);
|
||||
// get the target id
|
||||
tid = link.match(/\((.+)\)/)[1];
|
||||
obj.to.push(tid);
|
||||
// avoid duplicates
|
||||
if (obj.to.indexOf(tid) == -1)
|
||||
obj.to.push(tid);
|
||||
|
||||
// add id to "from" links in target
|
||||
// if target exists
|
||||
if(typeof this.data_strct[tid] !== 'undefined'){
|
||||
this.data_strct[tid].from.push(id);
|
||||
// avoid duplicates
|
||||
if (this.data_strct[tid].from.indexOf(tid) == -1)
|
||||
this.data_strct[tid].from.push(id);
|
||||
}else{
|
||||
// if targets does not exists, the db has an issue, warn about that
|
||||
console.log('!! warning : '+tid+' target id does not exists');
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log(this.links);
|
||||
// add the item links to the main links listings
|
||||
this.data_strct[id] = obj;
|
||||
}
|
||||
// console.log('data_strct',this.data_strct);
|
||||
|
||||
+103
-15
@@ -21,35 +21,123 @@ var _Dot = {
|
||||
type:'',
|
||||
text:'',
|
||||
summary:'',
|
||||
active:true,
|
||||
opened:false,
|
||||
classes:['dot'],
|
||||
links:null,
|
||||
parents:[],
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = markdown.render(vn.attrs.text);
|
||||
|
||||
// construct summary
|
||||
// TODO: summary needs more work (strip tags, markdown render)
|
||||
this.summary = markdown.renderInline(vn.attrs.text.match('([^ ]*[ ]{0,1}){1,8}')[0]) + "…"
|
||||
this.summary = vn.attrs.text.match('([^ ]*[ ]{0,1}){1,6}')[0];
|
||||
this.summary = this.summary.trim().replace(/_([^_]+)$/g, "_$1_");
|
||||
this.summary = this.summary.replace(/\[([^\]]+)$/g, "$1");
|
||||
this.summary = markdown.renderInline(this.summary) + " …";
|
||||
|
||||
if(typeof vn.attrs.active !== 'undefined')
|
||||
this.active = vn.attrs.active;
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
},
|
||||
oncreate: function(vn){
|
||||
if(this.active){
|
||||
vn.dom.classList.remove('disabled');
|
||||
}else{
|
||||
vn.dom.classList.add('disabled');
|
||||
}
|
||||
},
|
||||
onbeforeupdate: function(vn){
|
||||
if (this.opened){
|
||||
this.classes.push('opened');
|
||||
}else{
|
||||
this.classes = ['dot'];
|
||||
},
|
||||
onupdate: function(vn){
|
||||
// console.log('_Dot : onupdate', vn);
|
||||
if(this.active){
|
||||
if (this.opened){
|
||||
vn.dom.classList.add('opened');
|
||||
if(this.links.to.length)
|
||||
vn.dom.classList.add('to-links');
|
||||
}else{
|
||||
vn.dom.classList.remove('opened');
|
||||
if(this.links.from.length)
|
||||
vn.dom.classList.add('from-links');
|
||||
}
|
||||
}
|
||||
},
|
||||
view: function(vn){
|
||||
if (this.active && this.opened) {
|
||||
// full view of dot with linked dots
|
||||
console.log('_Dot view '+this.id+' parents :',this.parents);
|
||||
var dot_content = [
|
||||
// links to
|
||||
this.links.to.length
|
||||
? m('aside', {'class':'links to'}, this.links.to.map(function(id){
|
||||
// console.log(id);
|
||||
return m(_Dot, {
|
||||
"id":id,
|
||||
'text':_dbs.data_byid[_dbs.lang][id].text,
|
||||
'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,
|
||||
// id
|
||||
m('span', {'class':'id'}, this.id), // this.type+' '+
|
||||
// bullet
|
||||
m('span', {'class':'bullet'}, m.trust('⚫')),
|
||||
// full text
|
||||
m('section', {'class':'text'}, m.trust(this.text)),
|
||||
// links from
|
||||
this.links.from.length
|
||||
? m('aside', {'class':'links from'}, this.links.from.map(function(id){
|
||||
// retrun a dot
|
||||
return m(_Dot, {
|
||||
"id":id,
|
||||
'text':_dbs.data_byid[_dbs.lang][id].text,
|
||||
'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
|
||||
];
|
||||
}else{
|
||||
// preview dot
|
||||
var dot_content = [
|
||||
m('span', {'class':'id'}, this.id), // this.type+' '+
|
||||
m('span', {'class':'bullet'}, m.trust('•')),
|
||||
m('p', {
|
||||
'class':'summary',
|
||||
onclick:function(e){
|
||||
vn.state.opened = true;
|
||||
}
|
||||
}, m.trust(this.summary))
|
||||
];
|
||||
}
|
||||
|
||||
return m('div',{
|
||||
'id':this.id,
|
||||
'class':this.classes.join(' '),
|
||||
onclick:function(e){
|
||||
vn.state.opened = true;
|
||||
}
|
||||
'class':'dot'
|
||||
},
|
||||
[
|
||||
m('span', {'class':'id'}, this.id), // this.type+' '+
|
||||
m('span', {'class':'bullet'}, m.trust('⚫')),
|
||||
m('p', {'class':'summary'}, m.trust(this.summary))
|
||||
]);
|
||||
dot_content
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user