added a:hover in text highlighting dots in links
This commit is contained in:
+37
-20
@@ -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){
|
||||
|
||||
Reference in New Issue
Block a user