From 9187112754990800b00399f25f9fead60e39a104 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 17 Mar 2013 05:18:30 -0400 Subject: [PATCH] fixed labels all up. made it so only one showcard exists --- .../javascripts/Jit/graphsettings-model.js | 1 + app/assets/javascripts/Jit/graphsettings.js | 45 +++++----- .../javascripts/Jit/onCreateLabelHandler.js | 86 ++++++++++--------- app/assets/stylesheets/ForceDirected.css | 2 +- app/assets/stylesheets/base.css | 3 + app/views/main/console.html.erb | 1 + app/views/maps/show.html.erb | 1 + app/views/topics/show.html.erb | 1 + 8 files changed, 78 insertions(+), 62 deletions(-) diff --git a/app/assets/javascripts/Jit/graphsettings-model.js b/app/assets/javascripts/Jit/graphsettings-model.js index d9cd00c1..dbfecf4f 100644 --- a/app/assets/javascripts/Jit/graphsettings-model.js +++ b/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; diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js index 3ca32af5..b9002d79 100644 --- a/app/assets/javascripts/Jit/graphsettings.js +++ b/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) { @@ -538,18 +531,28 @@ function onDragCancelHandler(node, eventInfo, e, centred) { } function onPlaceLabelHandler(domElement, node) { - var style = domElement.style; - var left = parseInt(style.left); - var top = parseInt(style.top); - var w = domElement.offsetWidth; - style.left = (left - w / 2 + 107) + 'px'; - style.top = (top-165) + 'px'; - style.display = ''; - var label = document.getElementById('topic_' + node.id + '_label'); - $(label).show(); - w = label.offsetWidth; - style = label.style; - style.left = (-(w / 2 + 106)) + 'px'; + var style = domElement.style; + var left = parseInt(style.left); + var top = parseInt(style.top); + var w = $('#topic_' + node.id + '_label').width(); + style.left = (left - w / 2) + 'px'; + style.top = (top+20) + 'px'; + style.display = ''; + + // now position the showcard + if (MetamapsModel.showcardInUse != null) { + top = $('#' + MetamapsModel.showcardInUse).css('top'); + 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/ diff --git a/app/assets/javascripts/Jit/onCreateLabelHandler.js b/app/assets/javascripts/Jit/onCreateLabelHandler.js index 1b629588..e960bc7a 100644 --- a/app/assets/javascripts/Jit/onCreateLabelHandler.js +++ b/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,39 +257,41 @@ 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) { - // add some events to the label - $(showCard).find('img.icon').click(function(){ - hideCard(node); - }); - - $(showCard).find('.scroll').mCustomScrollbar(); +function bindNameContainerCallbacks(nameContainer, node) { + nameContainer.onmouseover = function(){ + $('.name.topic_' + node.id + ' .nodeOptions').css('display','block'); + } + + nameContainer.onmouseout = function(){ + $('.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.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'); - } - - nameContainer.onmouseout = function(){ - $('.name.topic_' + node.id + ' .nodeOptions').css('display','none'); - } + 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() { @@ -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); + }); + }); } diff --git a/app/assets/stylesheets/ForceDirected.css b/app/assets/stylesheets/ForceDirected.css index 9c4662df..0e70f5da 100644 --- a/app/assets/stylesheets/ForceDirected.css +++ b/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; } diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index c9b3122d..a9bd8a59 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -7,6 +7,9 @@ } .showcard, #showcard { + position:absolute; + display:none; + margin-top: -181px; width:216px; height:320px; color:#FFF; diff --git a/app/views/main/console.html.erb b/app/views/main/console.html.erb index b992b2fd..93abd496 100644 --- a/app/views/main/console.html.erb +++ b/app/views/main/console.html.erb @@ -23,6 +23,7 @@
+
<% if authenticated? %> diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb index e199d5eb..662664ec 100644 --- a/app/views/maps/show.html.erb +++ b/app/views/maps/show.html.erb @@ -42,6 +42,7 @@
+
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb index c48bcc46..552e2819 100644 --- a/app/views/topics/show.html.erb +++ b/app/views/topics/show.html.erb @@ -30,6 +30,7 @@
+