bachir/app.ethica-spinoza.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added a:hover in text highlighting dots in links

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-07-18 19:32:14 +02:00
parent c62b1df52d
commit 9d41425081
5 changed files with 108 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/dist/main.css
Vendored
+17 -11
View File
@@ -763,7 +763,7 @@ header {
header > *:last-child {
margin-right: 1em; }
header > h1 {
margin: 0 0 0 50px; }
margin: 0 0 0 70px; }
nav#menus {
float: right; }
@@ -790,7 +790,7 @@ h1.part {
section.enonce {
width: 450px;
margin: 1em 0;
margin: 1em 0 1em 50px;
overflow-x: visible;
font-family: 'amiri', sans-serif;
font-size: 16px;
@@ -823,7 +823,7 @@ section.enonce {
border-left: 1px solid #999; }
h1.part {
margin: 0 0 0 50px; }
margin: 1em 0 0 70px; }
.dot {
position: relative;
@@ -862,23 +862,27 @@ h1.part {
margin: 0; }
.dot > section.text p:not(:last-child) {
margin-bottom: 1em; }
.dot > section.text a {
color: inherit;
text-decoration: none;
font-weight: bold; }
.dot.to-links > section.text {
border-top: 1px solid #e2e2e2; }
.dot.from-links > section.text {
border-bottom: 1px solid #e2e2e2; }
.dot > aside.links {
.dot > nav.links {
position: relative;
left: 100px;
box-sizing: border-box; }
.dot > aside.links.to {
.dot > nav.links.to {
bottom: 100%;
margin-top: 30px;
margin-top: 15px;
padding-bottom: 10px; }
.dot > aside.links.from {
.dot > nav.links.from {
top: 100%;
padding-top: 10px;
margin-bottom: 30px; }
.dot > aside.links:before {
margin-bottom: 15px; }
.dot > nav.links:before {
content: "";
border-left: 1px solid #e2e2e2;
position: absolute;
@@ -887,14 +891,16 @@ h1.part {
height: 100%;
width: 1px;
z-index: -1; }
.dot:hover > p.summary, .dot.opened > p.summary {
.dot:hover > p.summary, .dot.opened > p.summary, .dot.highlight > p.summary {
opacity: 1;
transition: opacity 0.4s ease-in-out; }
.dot:hover > span.id, .dot.opened > span.id {
.dot:hover > span.id, .dot.opened > span.id, .dot.highlight > span.id {
opacity: 1;
transition: opacity 0.4s ease-in-out; }
.dot.disabled > * {
color: grey; }
.dot:not(.opened) {
line-height: 0.7; }
footer {
position: fixed;
assets/dist/main.js
Vendored
+37 -20
View File
@@ -3267,28 +3267,14 @@ var _Dot = {
},
onbeforeupdate: function(vn){
},
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);
// 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){
? m('nav', {'class':'links to'}, this.links.to.map(function(id){
// console.log(id);
return m(_Dot, {
"id":id,
@@ -3307,10 +3293,27 @@ var _Dot = {
// bullet
m('span', {'class':'bullet'}, m.trust('⚫')),
// full text
m('section', {'class':'text'}, m.trust(this.text)),
m('section', {
'class':'text',
onmouseover: function(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');
}
}
}
}, m.trust(this.text)),
// links from
this.links.from.length
? m('aside', {'class':'links from'}, this.links.from.map(function(id){
? m('nav', {'class':'links from'}, this.links.from.map(function(id){
// retrun a dot
return m(_Dot, {
"id":id,
@@ -3340,11 +3343,25 @@ var _Dot = {
}
return m('div',{
'id':this.id,
'uid':this.id,
'class':'dot'
},
dot_content
);
},
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');
if(this.links.from.length)
vn.dom.classList.add('from-links');
}else{
vn.dom.classList.remove('opened');
}
}
}
}
@@ -3480,7 +3497,7 @@ var _Part = {
// /_____/\____/\__/____/
module.exports = {
view: function(){
console.log('_Dots view', _dbs.lang);
// console.log('_Dots view', _dbs.lang);
return [
m(_Header),
m('main', {id:"content", 'class':'dots'}, _dbs.data[_dbs.lang].map(function(p){
assets/dist/main.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/main.scss
+16 -7
View File
@@ -38,7 +38,7 @@ header{
&:last-child{ margin-right: 1em;}
}
>h1{
margin: 0 0 0 $margin_left;
margin: 0 0 0 $margin_left+($bullet_w/2);
}
}
@@ -101,7 +101,7 @@ h1.part{
// /_/ /_/ \___/\___/
section.enonce{
width:450px;
margin: 1em 0;
margin: 1em 0 1em $margin_left;
overflow-x: visible;
@include base_font;
// max-height:14px;
@@ -157,7 +157,7 @@ section.enonce{
// /_____/\____/\__/____/
h1.part{
margin:0 0 0 $margin_left;
margin:1em 0 0 $margin_left+($bullet_w/2);
}
.dot{
@@ -208,6 +208,11 @@ h1.part{
margin-bottom:1em;
}
}
a{
color: inherit;
text-decoration: none;
font-weight: bold;
}
}
&.to-links > section.text{
border-top: 1px solid #e2e2e2;
@@ -216,19 +221,19 @@ h1.part{
border-bottom: 1px solid #e2e2e2;
}
>aside.links{
>nav.links{
position:relative;
left: $margin_left*2;
box-sizing: border-box;
&.to{
bottom:100%;
margin-top: 30px;
margin-top: 15px;
padding-bottom:10px;
}
&.from{
top:100%;
padding-top:10px;
margin-bottom: 30px;
margin-bottom: 15px;
}
&:before{
@@ -241,7 +246,7 @@ h1.part{
}
}
&:hover, &.opened{
&:hover, &.opened, &.highlight{
// transform: translate3d(0.5em, 0, 0);
// transition: transform 0.1s ease-in-out;
>p.summary{
@@ -259,6 +264,10 @@ h1.part{
color:grey;
}
&:not(.opened){
line-height: 0.7;
}
}
assets/modules/dots.js
+37 -20
View File
@@ -60,28 +60,14 @@ var _Dot = {
},
onbeforeupdate: function(vn){
},
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);
// 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){
? m('nav', {'class':'links to'}, this.links.to.map(function(id){
// console.log(id);
return m(_Dot, {
"id":id,
@@ -100,10 +86,27 @@ var _Dot = {
// bullet
m('span', {'class':'bullet'}, m.trust('⚫')),
// full text
m('section', {'class':'text'}, m.trust(this.text)),
m('section', {
'class':'text',
onmouseover: function(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');
}
}
}
}, m.trust(this.text)),
// links from
this.links.from.length
? m('aside', {'class':'links from'}, this.links.from.map(function(id){
? m('nav', {'class':'links from'}, this.links.from.map(function(id){
// retrun a dot
return m(_Dot, {
"id":id,
@@ -133,11 +136,25 @@ var _Dot = {
}
return m('div',{
'id':this.id,
'uid':this.id,
'class':'dot'
},
dot_content
);
},
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');
if(this.links.from.length)
vn.dom.classList.add('from-links');
}else{
vn.dom.classList.remove('opened');
}
}
}
}
@@ -273,7 +290,7 @@ var _Part = {
// /_____/\____/\__/____/
module.exports = {
view: function(){
console.log('_Dots view', _dbs.lang);
// console.log('_Dots view', _dbs.lang);
return [
m(_Header),
m('main', {id:"content", 'class':'dots'}, _dbs.data[_dbs.lang].map(function(p){