added a close button, also the image is now updated when you change metacodes

This commit is contained in:
Devin Howard 2013-01-02 22:39:10 -05:00
parent 8305beaaa7
commit 4ea435dfee
3 changed files with 21 additions and 8 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View file

@ -528,6 +528,7 @@ function onCreateLabelHandler(domElement, node) {
var html = ' \ var html = ' \
<div class="CardOnGraph" \ <div class="CardOnGraph" \
id="topic_$_id_$"> \ id="topic_$_id_$"> \
<a href="#" class="close-link">close</a> \
<p class="type best_in_place" \ <p class="type best_in_place" \
id="best_in_place_metacode" \ id="best_in_place_metacode" \
data-url="/topics/$_id_$" \ data-url="/topics/$_id_$" \
@ -549,7 +550,7 @@ function onCreateLabelHandler(domElement, node) {
data-attribute="name" \ data-attribute="name" \
data-type="input"> \ data-type="input"> \
$_name_$</span> \ $_name_$</span> \
<a href="/topics/$_id_$"> \ <a href="/topics/$_id_$" target="_blank"> \
<img class="topic-go-arrow" \ <img class="topic-go-arrow" \
title="Go to the topic page" \ title="Go to the topic page" \
src="/assets/go-arrow.png" /> \ src="/assets/go-arrow.png" /> \
@ -623,7 +624,7 @@ function onCreateLabelHandler(domElement, node) {
domElement.appendChild(showCard); domElement.appendChild(showCard);
// add some events to the label // add some events to the label
showCard.onclick = function(){ $(showCard).find('a.close-link').click(function(){
delete node.selected; delete node.selected;
node.setData('dim', 25, 'current'); node.setData('dim', 25, 'current');
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
@ -637,11 +638,11 @@ function onCreateLabelHandler(domElement, node) {
modes: ['edge-property:lineWidth:color'], modes: ['edge-property:lineWidth:color'],
duration: 500 duration: 500
}); });
// $('.showcard.topic_' + node.id).fadeOut('fast', function(){ $('.showcard.topic_' + node.id).fadeOut('fast', function(){
// $('.name').css('display','block'); $('.name').css('display','block');
// Mconsole.plot(); Mconsole.plot();
// }); });
} });
// 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'),
@ -656,4 +657,14 @@ function onCreateLabelHandler(domElement, node) {
nameContainer.onclick = function(){ nameContainer.onclick = function(){
selectNodeOnClickHandler(node) selectNodeOnClickHandler(node)
} }
//bind callbacks
$(showCard).find('.type.best_in_place').bind("ajax:success", function() {
var metacode = $(this).html();
$(showCard).find('img.icon').attr('alt', metacode);
$(showCard).find('img.icon').attr('src', imgArray[metacode].src);
node.setData("metacode", metacode);
Mconsole.plot();
});
}//onCreateLabelHandler }//onCreateLabelHandler

View file

@ -4,7 +4,9 @@
.topic { display:block; float:left; position:relative; width:175px; height:300px; padding:10px 5px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; } .topic { display:block; float:left; position:relative; width:175px; height:300px; padding:10px 5px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
.topic .delete {position: absolute; .close-link,
.topic .delete {
position: absolute;
top: -14px; top: -14px;
left: 0px; left: 0px;
background: none; background: none;