glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

adjusted so that cards show up where the icon is, rather than in one static place.

Browse source
This commit is contained in:
Connor Turland 2012-12-15 04:27:55 -05:00
parent 7c65634ade
commit ea8f37da27
2 changed files with 65 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/assets/javascripts/Jit/graphsettings.js
View file

@ -63,10 +63,10 @@ function graphSettings(type) {
type: 'HTML',
//Change cursor style when hovering a node
onMouseEnter: function () {
//fd.canvas.getElement().style.cursor = 'move';
},
onMouseLeave: function () {
//fd.canvas.getElement().style.cursor = '';
},
//Update node positions when dragged
onDragMove: function (node, eventInfo, e) {
@ -122,15 +122,45 @@ function graphSettings(type) {
// Add text to the labels. This method is only triggered
// on label creation and only for DOM labels (not native canvas ones).
onCreateLabel: function (domElement, node) {
// Create a 'name' and 'close' buttons and add them
var html =
'<div class="CardOnGraph" title="Click to Hide" id="item_' + node.id + '"><p class="type">' + node.getData("itemcatname") + '</p>' +
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a></div>';
var showCard = document.createElement('div');
showCard.className = 'showcard item_' + node.id;
showCard.innerHTML = html;
showCard.style.display = "none";
domElement.appendChild(showCard);
// add some events to the label
showCard.onclick = function(){
$('.showcard.item_' + node.id).fadeOut('fast', function(){
$('.name').css('display','block');
Mconsole.plot();
});
}
// Create a 'name' button and add it
// to the main node label
var nameContainer = document.createElement('span'),
style = nameContainer.style;
nameContainer.className = 'name';
nameContainer.className = 'name item_' + node.id;
nameContainer.innerHTML = '<div class="label">' + node.name + '</div>';
domElement.appendChild(nameContainer);
style.fontSize = "0.9em";
style.color = "#222222";
style.color = "#222222";
// add some events to the label
nameContainer.onmouseover = function(){
$('.showcard').css('display','none');
$('.name').css('display','block');
$('.name.item_' + node.id).css('display','none');
$('.showcard.item_' + node.id).fadeIn('fast');
Mconsole.plot();
}
},
// Change node styles when DOM labels are placed
// or moved.

35
app/assets/stylesheets/base.css
View file

@ -6,12 +6,16 @@
color:#444;
}
#showcard {
width:auto;
height:auto;
.showcard, #showcard {
width:216px;
height:320px;
color:#FFF;
text-align: left;
overflow: auto;
overflow: visible;
position: relative;
top: -185px;
left: 107px;
z-index:14000;
}
#showcard .contributor { font-size:14px; }
@ -25,4 +29,25 @@
height:100%;
margin:0;
overflow:hidden;
}
}
.CardOnGraph { display:block; position:relative; width:175px; height:300px; padding:10px 5px 10px 35px; background: url('bg.png'); border-radius:15px; color:#000; }
.CardOnGraph .scroll { display:block; height:283px; }
.CardOnGraph .type {position: absolute;
color: white;
top: -22px;
right: 0;
font-weight: bold;
font-size: 20px;
line-height: 24px;}
.CardOnGraph .icon { position:absolute; top:135px; left:-25px; }
.CardOnGraph .title { font-size:22px; line-height:25px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
.CardOnGraph .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
.CardOnGraph .desc h3 { font-style:normal; margin-top:5px; }
.CardOnGraph .link { position:absolute; width:170px; top:295px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }