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

This commit is contained in:
Connor Turland 2013-03-17 05:18:30 -04:00
parent 1f7588f1ce
commit 9187112754
8 changed files with 78 additions and 62 deletions

View file

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

View file

@ -89,19 +89,12 @@ function graphSettings(type, embed) {
if (touchDragNode) onDragMoveTopicHandler(touchDragNode, eventInfo, e); if (touchDragNode) onDragMoveTopicHandler(touchDragNode, eventInfo, e);
else { else {
touchPanZoomHandler(eventInfo, e); touchPanZoomHandler(eventInfo, e);
$('#topic_' + MetamapsModel.showcardInUse + '_label').hide(); Mconsole.labels.hideLabel(Mconsole.graph.getNode(MetamapsModel.showcardInUse));
} }
}, },
//Implement the same handler for touchscreens //Implement the same handler for touchscreens
onTouchEnd: function (node, eventInfo, e) { 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 //Implement the same handler for touchscreens
onTouchCancel: function (node, eventInfo, e) { onTouchCancel: function (node, eventInfo, e) {
@ -541,15 +534,25 @@ function onPlaceLabelHandler(domElement, node) {
var style = domElement.style; var style = domElement.style;
var left = parseInt(style.left); var left = parseInt(style.left);
var top = parseInt(style.top); 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 = ''; 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/ // thanks to http://stackoverflow.com/questions/4338963/

View file

@ -15,22 +15,6 @@
*/ */
function onCreateLabelHandler(domElement, node) { 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 // Create a 'name' button and add it to the main node label
var nameContainer = document.createElement('span'), var nameContainer = document.createElement('span'),
style = nameContainer.style; style = nameContainer.style;
@ -42,7 +26,7 @@ function onCreateLabelHandler(domElement, node) {
style.fontSize = "0.9em"; style.fontSize = "0.9em";
style.color = "#222222"; style.color = "#222222";
bindCallbacks(showCard, nameContainer, node); bindNameContainerCallbacks(nameContainer, node);
} }
function generateShowcardHTML() { function generateShowcardHTML() {
@ -273,32 +257,14 @@ function hideCard(node) {
$(card).fadeOut('fast', function(){ $(card).fadeOut('fast', function(){
node.setData('dim', 25, 'current'); node.setData('dim', 25, 'current');
$('.name.topic_' + node.id).show(); Mconsole.labels.hideLabel(Mconsole.graph.getNode(node.id), true)
Mconsole.plot(); Mconsole.plot();
}); });
MetamapsModel.showcardInUse = null; 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(){ nameContainer.onmouseover = function(){
$('.name.topic_' + node.id + ' .nodeOptions').css('display','block'); $('.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'); $('.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 //bind best_in_place ajax callbacks
$(showCard).find('.best_in_place_metacode').bind("ajax:success", function() { $(showCard).find('.best_in_place_metacode').bind("ajax:success", function() {
var metacode = $(this).html(); var metacode = $(this).html();
@ -377,4 +363,24 @@ function bindCallbacks(showCard, nameContainer, node) {
else if (permission == "public") el.html("pu"); else if (permission == "public") el.html("pu");
else if (permission == "private") el.html("pr"); 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);
});
});
} }

View file

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

View file

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

View file

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

View file

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

View file

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