started to code the corpus nodepopup

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -41,7 +41,7 @@
     var _node_hover_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
-
+    var _node_pop_up;
     // Colors depend on edlp_vars loaded by edlptheme
     // console.log('Corpus : edlp_vars', edlp_vars);
 
@@ -97,7 +97,17 @@
       // console.log('drupalSettings',drupalSettings);
       // console.log('window.location', window.location);
       var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
-      $.getJSON(path, {}, onCorpusLoaded);
+      $.getJSON(path, {})
+        .done(function(data){
+          onCorpusLoaded(data);
+        })
+        .fail(function(jqxhr, textStatus, error){
+          onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path);
+        });
+    };
+
+    function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){
+      console.warn('corpus load failed', jqxhr.responseText);
     };
 
     function onCorpusLoaded(data){
@@ -106,6 +116,7 @@
       // buildParticles(data.nodes);
       buildNodes(data.nodes);
       initEvents();
+      initNodePopup();
       startAnime();
     };
 
@@ -114,16 +125,12 @@
     //   /  |/ / __ \/ __  / _ \/ ___/
     //  / /|  / /_/ / /_/ /  __(__  )
     // /_/ |_/\____/\__,_/\___/____/
-
     function buildNodes(nodes){
       console.log("buildNodes", nodes);
       var x,y,d;
       for (var i in nodes) {
-        // console.log('i',i);
         d = i < 1 ? true : false;
         _nodes.push(new Node(i,nodes[i],d));
-        // if(i==0)
-        //   break;
       }
     };
 
@@ -167,21 +174,15 @@
 
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
-
       this.hover = false;
 
       // physics
       this.p = _physics.makeParticle(this.mass, this.x, this.y);
       this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
 
-
       // prototypes
       if (typeof Node.initialized == "undefined") {
 
-        // Node.prototype.init = function(){
-        //   // console.log("Node : init()", this);
-        //   // this.draw();
-        // };
         Node.prototype.calcWallLimits = function(){
           this.wall_limits = {
             top:    _canvas_props.margin_top  +this.r,
@@ -236,28 +237,29 @@
             if(_node_hover_id == -1 || _node_hover_id == this.id){
               // console.log("Node hover", this.id);
               this.hover = true;
-              this.highlightEntries();
+              // this.highlightEntries();
               _node_hover_id = this.id;
+              _node_pop_up.setNode(this);
             }
           }else{
             this.hover = false;
             if (_node_hover_id == this.id) {
               _node_hover_id = -1;
-              _$entrees_block_termlinks.removeClass('highlighted');
+              _node_pop_up.removeNode();
             }
           }
         };
 
-        Node.prototype.highlightEntries = function(){
-          _$entrees_block_termlinks.removeClass('highlighted');
-          var entree;
-          for (var i = 0; i < this.entrees.length; i++) {
-            entree = this.entrees[i];
-            _$entrees_block_termlinks.filter(function(){
-              return $(this).attr('tid') == entree;
-            }).addClass('highlighted');
-          }
-        }
+        // Node.prototype.highlightEntries = function(){
+        //   _$entrees_block_termlinks.removeClass('highlighted');
+        //   var entree;
+        //   for (var i = 0; i < this.entrees.length; i++) {
+        //     entree = this.entrees[i];
+        //     _$entrees_block_termlinks.filter(function(){
+        //       return $(this).attr('tid') == entree;
+        //     }).addClass('highlighted');
+        //   }
+        // }
 
         Node.prototype.draw = function(){
           // carre plein
@@ -415,6 +417,51 @@
     };
 
 
+
+    //  _  _         _     ___          _   _
+    // | \| |___  __| |___| _ \___ _ __| | | |_ __
+    // | .` / _ \/ _` / -_)  _/ _ \ '_ \ |_| | '_ \
+    // |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/
+    //                            |_|        |_|
+    function initNodePopup(){
+      _node_pop_up = new NodePopUp();
+    };
+
+    function NodePopUp(){
+      this.visible = false;
+      this.node;
+      this.$dom = $('<div>').addClass('node-popup').appendTo('body');
+      this.$content = $('<div>').addClass('inner').appendTo(this.$dom);
+
+      if (typeof NodePopUp.initialized == "undefined") {
+
+        NodePopUp.prototype.setNode = function(node){
+          this.node = node;
+          this.$content.html(this.node.title);
+        };
+
+        NodePopUp.prototype.removeNode = function(){
+          this.node = false;
+        };
+
+        NodePopUp.prototype.draw = function(){
+          if(this.node){
+            this.$dom.css({
+              'display':"block",
+              'left':this.node.x+"px",
+              'top':this.node.y+"px",
+            });
+          }else{
+            this.$dom.css({
+              'display':"none",
+            });
+          }
+        };
+
+        NodePopUp.initialized = true;
+      }
+    }
+
     //     ____                 __
     //    / __ \___  ____  ____/ /__  _____
     //   / /_/ / _ \/ __ \/ __  / _ \/ ___/
@@ -428,14 +475,42 @@
       for (var i = 0; i < _nodes.length; i++) {
         _nodes[i].onUpdate();
       }
-      // if(_node_hover_id != -1){
-      //   _canvas.style.cursor = 'pointer';
-      // }else{
-      //   _canvas.style.cursor = 'auto';
-      // }
-      _canvas.style.cursor = _node_hover_id != -1 ? 'pointer' : 'auto';
+
+      _node_pop_up.draw();
+
+      if(_node_hover_id != -1){
+        _canvas.style.cursor = 'pointer';
+        highlightEntries();
+        // _node_pop_up.visible = true;
+      }else{
+        _canvas.style.cursor = 'auto';
+        _$entrees_block_termlinks.removeClass('highlighted');
+        // _node_pop_up.visible = false;
+      }
     };
 
+
+    //  _  _ _      _    _   _      _   _   ___     _       _
+    // | || (_)__ _| |_ | |_(_)__ _| |_| |_| __|_ _| |_ _ _(_)___ ___
+    // | __ | / _` | ' \| / / / _` | ' \  _| _|| ' \  _| '_| / -_|_-<
+    // |_||_|_\__, |_||_|_\_\_\__, |_||_\__|___|_||_\__|_| |_\___/__/
+    //        |___/           |___/
+    function highlightEntries(){
+      _$entrees_block_termlinks.removeClass('highlighted');
+      var entree;
+      for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
+        entree = _nodes[_node_hover_id].entrees[i];
+        _$entrees_block_termlinks.filter(function(){
+          return $(this).attr('tid') == entree;
+        }).addClass('highlighted');
+      }
+    }
+
+
+    //  ___ _            _     _        _
+    // / __| |_ __ _ _ _| |_  /_\  _ _ (_)_ __  ___
+    // \__ \  _/ _` | '_|  _|/ _ \| ' \| | '  \/ -_)
+    // |___/\__\__,_|_|  \__/_/ \_\_||_|_|_|_|_\___|
     function startAnime(){
       _physics.onUpdate(render);
       _physics.play()

sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css

@@ -7,3 +7,26 @@ canvas#corpus-map {
   z-index: 0; }
   canvas#corpus-map.de-activated {
     background-color: #f4f4f4; }
+
+div.node-popup {
+  display: none;
+  position: absolute;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  width: 140px;
+  min-height: 30px;
+  pointer-events: none; }
+  div.node-popup .inner {
+    padding: 1em;
+    outline: 1px solid red;
+    background-color: white; }
+  div.node-popup:before {
+    content: "";
+    position: absolute;
+    bottom: -15px;
+    left: -29px;
+    width: 30px;
+    height: 0;
+    border-top: 1px solid red;
+    -webkit-transform: rotateZ(135deg);
+    transform: rotateZ(135deg); }

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -41,7 +41,7 @@
     var _node_hover_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
-
+    var _node_pop_up;
     // Colors depend on edlp_vars loaded by edlptheme
     // console.log('Corpus : edlp_vars', edlp_vars);
 
@@ -97,7 +97,17 @@
       // console.log('drupalSettings',drupalSettings);
       // console.log('window.location', window.location);
       var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
-      $.getJSON(path, {}, onCorpusLoaded);
+      $.getJSON(path, {})
+        .done(function(data){
+          onCorpusLoaded(data);
+        })
+        .fail(function(jqxhr, textStatus, error){
+          onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path);
+        });
+    };
+
+    function onCorpusLoadError(jqxhr, textStatus, error, $link, sys_path){
+      console.warn('corpus load failed', jqxhr.responseText);
     };
 
     function onCorpusLoaded(data){
@@ -106,6 +116,7 @@
       // buildParticles(data.nodes);
       buildNodes(data.nodes);
       initEvents();
+      initNodePopup();
       startAnime();
     };
 
@@ -114,16 +125,12 @@
     //   /  |/ / __ \/ __  / _ \/ ___/
     //  / /|  / /_/ / /_/ /  __(__  )
     // /_/ |_/\____/\__,_/\___/____/
-
     function buildNodes(nodes){
       console.log("buildNodes", nodes);
       var x,y,d;
       for (var i in nodes) {
-        // console.log('i',i);
         d = i < 1 ? true : false;
         _nodes.push(new Node(i,nodes[i],d));
-        // if(i==0)
-        //   break;
       }
     };
 
@@ -167,21 +174,15 @@
 
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
-
       this.hover = false;
 
       // physics
       this.p = _physics.makeParticle(this.mass, this.x, this.y);
       this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
 
-
       // prototypes
       if (typeof Node.initialized == "undefined") {
 
-        // Node.prototype.init = function(){
-        //   // console.log("Node : init()", this);
-        //   // this.draw();
-        // };
         Node.prototype.calcWallLimits = function(){
           this.wall_limits = {
             top:    _canvas_props.margin_top  +this.r,
@@ -236,28 +237,29 @@
             if(_node_hover_id == -1 || _node_hover_id == this.id){
               // console.log("Node hover", this.id);
               this.hover = true;
-              this.highlightEntries();
+              // this.highlightEntries();
               _node_hover_id = this.id;
+              _node_pop_up.setNode(this);
             }
           }else{
             this.hover = false;
             if (_node_hover_id == this.id) {
               _node_hover_id = -1;
-              _$entrees_block_termlinks.removeClass('highlighted');
+              _node_pop_up.removeNode();
             }
           }
         };
 
-        Node.prototype.highlightEntries = function(){
-          _$entrees_block_termlinks.removeClass('highlighted');
-          var entree;
-          for (var i = 0; i < this.entrees.length; i++) {
-            entree = this.entrees[i];
-            _$entrees_block_termlinks.filter(function(){
-              return $(this).attr('tid') == entree;
-            }).addClass('highlighted');
-          }
-        }
+        // Node.prototype.highlightEntries = function(){
+        //   _$entrees_block_termlinks.removeClass('highlighted');
+        //   var entree;
+        //   for (var i = 0; i < this.entrees.length; i++) {
+        //     entree = this.entrees[i];
+        //     _$entrees_block_termlinks.filter(function(){
+        //       return $(this).attr('tid') == entree;
+        //     }).addClass('highlighted');
+        //   }
+        // }
 
         Node.prototype.draw = function(){
           // carre plein
@@ -415,6 +417,51 @@
     };
 
 
+
+    //  _  _         _     ___          _   _
+    // | \| |___  __| |___| _ \___ _ __| | | |_ __
+    // | .` / _ \/ _` / -_)  _/ _ \ '_ \ |_| | '_ \
+    // |_|\_\___/\__,_\___|_| \___/ .__/\___/| .__/
+    //                            |_|        |_|
+    function initNodePopup(){
+      _node_pop_up = new NodePopUp();
+    };
+
+    function NodePopUp(){
+      this.visible = false;
+      this.node;
+      this.$dom = $('<div>').addClass('node-popup').appendTo('body');
+      this.$content = $('<div>').addClass('inner').appendTo(this.$dom);
+
+      if (typeof NodePopUp.initialized == "undefined") {
+
+        NodePopUp.prototype.setNode = function(node){
+          this.node = node;
+          this.$content.html(this.node.title);
+        };
+
+        NodePopUp.prototype.removeNode = function(){
+          this.node = false;
+        };
+
+        NodePopUp.prototype.draw = function(){
+          if(this.node){
+            this.$dom.css({
+              'display':"block",
+              'left':this.node.x+"px",
+              'top':this.node.y+"px",
+            });
+          }else{
+            this.$dom.css({
+              'display':"none",
+            });
+          }
+        };
+
+        NodePopUp.initialized = true;
+      }
+    }
+
     //     ____                 __
     //    / __ \___  ____  ____/ /__  _____
     //   / /_/ / _ \/ __ \/ __  / _ \/ ___/
@@ -428,14 +475,42 @@
       for (var i = 0; i < _nodes.length; i++) {
         _nodes[i].onUpdate();
       }
-      // if(_node_hover_id != -1){
-      //   _canvas.style.cursor = 'pointer';
-      // }else{
-      //   _canvas.style.cursor = 'auto';
-      // }
-      _canvas.style.cursor = _node_hover_id != -1 ? 'pointer' : 'auto';
+
+      _node_pop_up.draw();
+
+      if(_node_hover_id != -1){
+        _canvas.style.cursor = 'pointer';
+        highlightEntries();
+        // _node_pop_up.visible = true;
+      }else{
+        _canvas.style.cursor = 'auto';
+        _$entrees_block_termlinks.removeClass('highlighted');
+        // _node_pop_up.visible = false;
+      }
     };
 
+
+    //  _  _ _      _    _   _      _   _   ___     _       _
+    // | || (_)__ _| |_ | |_(_)__ _| |_| |_| __|_ _| |_ _ _(_)___ ___
+    // | __ | / _` | ' \| / / / _` | ' \  _| _|| ' \  _| '_| / -_|_-<
+    // |_||_|_\__, |_||_|_\_\_\__, |_||_\__|___|_||_\__|_| |_\___/__/
+    //        |___/           |___/
+    function highlightEntries(){
+      _$entrees_block_termlinks.removeClass('highlighted');
+      var entree;
+      for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
+        entree = _nodes[_node_hover_id].entrees[i];
+        _$entrees_block_termlinks.filter(function(){
+          return $(this).attr('tid') == entree;
+        }).addClass('highlighted');
+      }
+    }
+
+
+    //  ___ _            _     _        _
+    // / __| |_ __ _ _ _| |_  /_\  _ _ (_)_ __  ___
+    // \__ \  _/ _` | '_|  _|/ _ \| ' \| | '  \/ -_)
+    // |___/\__\__,_|_|  \__/_/ \_\_||_|_|_|_|_\___|
     function startAnime(){
       _physics.onUpdate(render);
       _physics.play()

sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss

@@ -16,3 +16,38 @@ canvas#corpus-map{
   // width:100%; height:100%;
   z-index:0;
 }
+div.node-popup{
+  display:none;
+  position: absolute;
+  box-sizing: content-box;
+  width:140px; min-height: 30px;
+  pointer-events: none;
+
+  .inner{
+    padding:1em;
+    outline: 1px solid red;
+    background-color: white;
+  }
+
+  &:before{
+    content:"";
+    position: absolute;
+    bottom:-15px;left:-29px;
+    width: 30px; height:0;
+    border-top: 1px solid red;
+    transform: rotateZ(135deg);
+  }
+
+  &[pos="top-left"]{
+
+  }
+  &[pos="top-right"]{
+
+  }
+  &[pos="bottom-right"]{
+
+  }
+  &[pos="bottom-left"]{
+
+  }
+}

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -117,7 +117,7 @@ edlp_vars = {
     };
 
     function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
-      console.warn('fail : error', jqxhr.responseText);
+      console.warn('ajaxlink load failed', jqxhr.responseText);
       $link.removeClass('ajax-loading');
       _$body.removeClass('ajax-loading');
     };

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -94,7 +94,7 @@
     };
 
     function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
-      console.warn('fail : error', jqxhr.responseText);
+      console.warn('ajaxlink load failed', jqxhr.responseText);
       $link.removeClass('ajax-loading');
       _$body.removeClass('ajax-loading');
     };