added a:hover in text highlighting dots in links

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
+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){