fixed labels all up. made it so only one showcard exists

app/assets/javascripts/Jit/graphsettings-model.js

@@ -15,6 +15,7 @@ MetamapsModel.selectedNodes = new Array();
 
 //is any showcard open right now? which one?
 MetamapsModel.showcardInUse = null;
+MetamapsModel.widthOfLabel = null;
 
 //is the mouse hovering over an edge? which one?
 MetamapsModel.edgeHoveringOver = false;

app/assets/javascripts/Jit/graphsettings.js

@@ -89,19 +89,12 @@ function graphSettings(type, embed) {
         if (touchDragNode) onDragMoveTopicHandler(touchDragNode, eventInfo, e);
         else {
           touchPanZoomHandler(eventInfo, e); 
-          $('#topic_' + MetamapsModel.showcardInUse + '_label').hide();
+          Mconsole.labels.hideLabel(Mconsole.graph.getNode(MetamapsModel.showcardInUse));
         }
       },
       //Implement the same handler for touchscreens
       onTouchEnd: function (node, eventInfo, e) {
-        //clicking on a node, or clicking on blank part of canvas?
+        
-        if (node.nodeFrom) {
-          selectEdgeOnClickHandler(node, e);  
-        } else if (node && !node.nodeFrom) {
-          selectNodeOnClickHandler(node, e);
-        } else {
-          canvasDoubleClickHandler(eventInfo.getPos(), e);
-        }//if
       },
       //Implement the same handler for touchscreens
       onTouchCancel: function (node, eventInfo, e) {
@@ -541,15 +534,25 @@ function onPlaceLabelHandler(domElement, node) {
     var style = domElement.style;  
     var left = parseInt(style.left);  
     var top = parseInt(style.top);  
-  var w = domElement.offsetWidth;
+    var w = $('#topic_' + node.id + '_label').width();
-  style.left = (left - w / 2 + 107) + 'px';
+    style.left = (left - w / 2) + 'px';  
-  style.top = (top-165) + 'px';
+    style.top = (top+20) + 'px';  
     style.display = '';
-  var label = document.getElementById('topic_' + node.id + '_label');
+    
-  $(label).show(); 
+    // now position the showcard
-  w = label.offsetWidth;
+    if (MetamapsModel.showcardInUse != null) {
-  style = label.style;
+        top = $('#' + MetamapsModel.showcardInUse).css('top');
-  style.left = (-(w / 2 + 106)) + 'px';    
+        left = parseInt($('#' + MetamapsModel.showcardInUse).css('left'));
+        if (0 != $('#topic_' + MetamapsModel.showcardInUse + '_label').width()) {
+            MetamapsModel.widthOfLabel = $('#topic_' + MetamapsModel.showcardInUse + '_label').width();
+        }
+        w = MetamapsModel.widthOfLabel/2;
+        left = (left + w) + 'px';
+        $('#showcard').css('top', top);
+        $('#showcard').css('left', left);
+        
+        Mconsole.labels.hideLabel(Mconsole.graph.getNode(MetamapsModel.showcardInUse));
+    } 
 }
 
 // thanks to http://stackoverflow.com/questions/4338963/

app/assets/javascripts/Jit/onCreateLabelHandler.js

@@ -15,22 +15,6 @@
  */
 
 function onCreateLabelHandler(domElement, node) {
-  var html = generateShowcardHTML();
-  html = replaceVariables(html, node);
-  
-  var showCard = document.createElement('div');
-  showCard.className = 'showcard topic_' + node.id;
-  if (authorizeToEdit(node)) {
-    var perm = document.createElement('div');
-    perm.className = 'permission canEdit';
-    perm.innerHTML = html;
-    showCard.appendChild(perm);
-  } else {
-    showCard.innerHTML = html;
-  }
-  showCard.style.display = "none";
-  domElement.appendChild(showCard);
-
   // Create a 'name' button and add it to the main node label
   var nameContainer = document.createElement('span'),
   style = nameContainer.style;
@@ -42,7 +26,7 @@ function onCreateLabelHandler(domElement, node) {
   style.fontSize = "0.9em";
   style.color = "#222222";
 
-  bindCallbacks(showCard, nameContainer, node);
+  bindNameContainerCallbacks(nameContainer, node);
 }
 
 function generateShowcardHTML() {
@@ -273,32 +257,14 @@ function hideCard(node) {
 
   $(card).fadeOut('fast', function(){
     node.setData('dim', 25, 'current');
-    $('.name.topic_' + node.id).show();
+    Mconsole.labels.hideLabel(Mconsole.graph.getNode(node.id), true)
     Mconsole.plot();
   });
 
   MetamapsModel.showcardInUse = null;
 }
 
-function bindCallbacks(showCard, nameContainer, node) {
+function bindNameContainerCallbacks(nameContainer, node) {
-   // add some events to the label
-  $(showCard).find('img.icon').click(function(){
-    hideCard(node);
-  });
-
-  $(showCard).find('.scroll').mCustomScrollbar(); 
-
-  // add some events to the label
-  $(nameContainer).find('.label').click(function(e){
-    hideCurrentCard();
-    $('.showcard.topic_' + node.id).fadeIn('fast');
-    $('.showcard.topic_' + node.id).find('.scroll').mCustomScrollbar("update");
-    node.setData('dim', 1, 'current');
-    MetamapsModel.showcardInUse = node.id;
-    Mconsole.plot();
-    $('#topic_' + node.id + '_label').hide();
-  });
-
    nameContainer.onmouseover = function(){
      $('.name.topic_' + node.id + ' .nodeOptions').css('display','block');
    }
@@ -307,6 +273,26 @@ function bindCallbacks(showCard, nameContainer, node) {
      $('.name.topic_' + node.id + ' .nodeOptions').css('display','none');
    }
     
+    var showCard = document.getElementById('showcard');
+
+  // add some events to the label
+  $(nameContainer).find('.label').click(function(e){
+    hideCurrentCard();
+    showCard.innerHTML = '';
+      
+    var html = generateShowcardHTML();
+    html = replaceVariables(html, node);
+      
+    showCard.className = 'showcard topic_' + node.id;
+    if (authorizeToEdit(node)) {
+      var perm = document.createElement('div');
+      perm.className = 'permission canEdit';
+      perm.innerHTML = html;
+      showCard.appendChild(perm);
+    } else {
+      showCard.innerHTML = html;
+    }
+
   //bind best_in_place ajax callbacks
   $(showCard).find('.best_in_place_metacode').bind("ajax:success", function() {
     var metacode = $(this).html();
@@ -377,4 +363,24 @@ function bindCallbacks(showCard, nameContainer, node) {
     else if (permission == "public") el.html("pu");
     else if (permission == "private") el.html("pr");
   });
+  
+  var top = $('#' + node.id).css('top');
+  var left = parseInt($('#' + node.id).css('left'));
+  var w = $('#topic_' + node.id + '_label').width();
+  w = w/2;
+  left = (left + w) + 'px';
+  $('#showcard').css('top', top);
+  $('#showcard').css('left', left);   
+
+  $('.showcard.topic_' + node.id).fadeIn('fast');
+    $('.showcard.topic_' + node.id).find('.scroll').mCustomScrollbar();
+    node.setData('dim', 1, 'current');
+    MetamapsModel.showcardInUse = node.id;
+    Mconsole.plot();
+    Mconsole.labels.hideLabel(Mconsole.graph.getNode(node.id))
+    // add some events to the label
+    $(showCard).find('img.icon').click(function(){
+      hideCard(node);
+    });
+  });
 }

app/assets/stylesheets/ForceDirected.css

@@ -4,6 +4,7 @@
 
 .label {
   display:block;
+  white-space: nowrap;
   padding: 2px 4px;
   background:#ddd;
   opacity:0.8;
@@ -13,5 +14,4 @@
 span.name {
   cursor: pointer;
   position: absolute;
-  top: 185px;
 }

app/assets/stylesheets/base.css

@@ -7,6 +7,9 @@
 }
 
 .showcard, #showcard {
+    position:absolute;
+    display:none;
+    margin-top: -181px;
     width:216px;
 	height:320px;
     color:#FFF;

app/views/main/console.html.erb

@@ -23,6 +23,7 @@
     <div id="center-container">
       <div id="infovis"></div>    
     </div>
+    <div class="showcard" id="showcard"></div>
   </div>
   <div class="clearfloat"></div>
   <% if authenticated? %>

app/views/maps/show.html.erb

@@ -42,6 +42,7 @@
   <div id="center-container">
     <div id="infovis"></div>    
   </div>
+  <div class="showcard" id="showcard"></div>
 </div>
 <div class="clearfloat"></div>
 

app/views/topics/show.html.erb

@@ -30,6 +30,7 @@
   <div id="center-container">
     <div id="infovis"></div>    
   </div>
+  <div class="showcard" id="showcard"></div>
 </div>
 <div class="clearfloat"></div>