added a:hover in text highlighting dots in links

assets/dist/main.css

@@ -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

@@ -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/main.scss

@@ -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

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