From 4ab90c4a08b74226dbe48724039d4f9a8805d6c0 Mon Sep 17 00:00:00 2001 From: Alexis Jacomy Date: Thu, 16 Jun 2011 23:23:36 +0200 Subject: Flash fixed on Chrome and Firefox, nodes colors legend first working draft available, layout update --- public/javascripts/stargit.js | 174 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 150 insertions(+), 24 deletions(-) (limited to 'public/javascripts') diff --git a/public/javascripts/stargit.js b/public/javascripts/stargit.js index 82c414d..e31a98d 100644 --- a/public/javascripts/stargit.js +++ b/public/javascripts/stargit.js @@ -1,12 +1,15 @@ var stargit=(function(){ - // Functions: var flash; var githubNodesObj = {}; var githubEdgesObj = {}; var graphAttributes = {}; function setFlash(){ - flash = $('#SiGMa')[0]; + if (navigator.appName.indexOf("Microsoft") != -1) { + flash = window["SiGMa"]; + } else { + flash = document["SiGMa"]; + } if(!flash){ return false; @@ -15,6 +18,104 @@ var stargit=(function(){ } } + function setLegend(attName,attribute){ + // First, let's remove all "legend_element" elements: + $("#legend>*").remove(); + + // Then, let's add the new legend elements: + var legTitle = document.createElement("div"); + legTitle.id = "legend_title"; + + $("#legend").append(legTitle); + $("#legend_title").append("Nodes color: "); + + var fieldB = document.createElement("strong"); + fieldB.style.fontSize = "12px"; + fieldB.innerHTML = (attribute["label"]?attribute["label"]:attName); + $("#legend_title").append(fieldB); + + var legElements = document.createElement("div"); + legElements.id = "legend_elements"; + + $("#legend").append(legElements); + + if(attribute["type"]=="Num"){ + var grad = document.createElement("div"); + + grad.style.backgroundImage = + "-webkit-gradient("+ + " linear,"+ + " left top,"+ + " right top,"+ + " color-stop(0, "+attribute["colorMax"].replace("0x","#")+"),"+ + " color-stop(1, "+attribute["colorMin"].replace("0x","#")+"))"; + + grad.style.backgroundImage = + "-moz-linear-gradient("+ + " left center,"+ + " "+attribute["colorMax"].replace("0x","#")+" 0%,"+ + " "+attribute["colorMin"].replace("0x","#")+" 100%)"; + + $("#legend_elements").append("
"); + + grad.style.height = "20px"; + grad.style.width = "80%"; + grad.style.marginLeft = "10%"; + + $("#legend_elements").append(grad); + + var lowest = document.createElement("div"); + lowest.style.paddingTop = "5px"; + lowest.style.paddingLeft = "5px"; + lowest.style.float = "left"; + lowest.style.styleFloat = "left"; + lowest.style.cssFloat = "left"; + lowest.style.display = "inline"; + lowest.innerHTML = "(lowest values)"; + $("#legend_elements").append(lowest); + + var highest = document.createElement("div"); + highest.style.paddingTop = "5px"; + highest.style.paddingRight = "5px"; + highest.style.float = "right"; + highest.style.styleFloat = "right"; + highest.style.cssFloat = "right"; + highest.style.display = "inline"; + highest.innerHTML = "(highest values)"; + $("#legend_elements").append(highest); + + }else if(attribute["type"]=="Str"){ + var l = attribute["values"].length; + + for(var val in attribute["values"]){ + var le = document.createElement("div"); + le.id = "value_"+val; + le.style.display = "inline"; + $("#legend_elements").append(le); + + var bg = document.createElement("div"); + bg.style.width = "13px"; + bg.style.height = "13px"; + bg.style.marginLeft = "12px"; + bg.style.marginTop = "12px"; + bg.style.float = "left"; + bg.style.styleFloat = "left"; + bg.style.cssFloat = "left"; + bg.style.backgroundColor = attribute["values"][val].replace("0x","#"); + $("#value_"+val).append(bg); + + var ti = document.createElement("div"); + ti.innerHTML = val; + ti.style.paddingLeft = "3px"; + ti.style.marginTop = "12px"; + ti.style.float = "left"; + ti.style.styleFloat = "left"; + ti.style.cssFloat = "left"; + $("#value_"+val).append(ti); + } + } + } + // This function refreshes the graph from the login of // a user: function getGithubGraph(user){ @@ -26,22 +127,7 @@ var stargit=(function(){ success: function(json){ resetGraph(json); - } - }); - } - - // This function gets the graph attributes to refresh - // the different comboboxes: - function getGraphAttributes(){ - url = "/graph/attributes"; - - $.ajax({ - url: url, - dataType: 'json', - success: - function(json){ - graphAttributes = (json && json["attributes"]) ? json["attributes"] : {}; - setComboBoxes(); + if(document.getElementById("query_input").value) document.getElementById("query_input").value = user; } }); } @@ -58,8 +144,8 @@ var stargit=(function(){ flash.updateGraph(graph); flash.initForceAtlas(); - if($("#query_color").value) flash.setColor($("#query_color").value,graphAttributes); - if($("#query_size").value) flash.setSize($("#query_size").value); + if(document.getElementById("query_color").value) flash.setColor(document.getElementById("query_color").value,graphAttributes); + if(document.getElementById("query_size").value) flash.setSize(document.getElementById("query_size").value); } // This function updates the comboboxes: @@ -78,8 +164,8 @@ var stargit=(function(){ } } - var nodes_color = $("#query_color"); - var nodes_size = $("#query_size"); + var nodes_color = document.getElementById("query_color"); + var nodes_size = document.getElementById("query_size"); while(nodes_color.options.length) nodes_color.options.remove(0); while(nodes_size.options.length) nodes_size.options.remove(0); @@ -104,6 +190,12 @@ var stargit=(function(){ nodes_size.options.add(optn) } + + if(graphAttributes){ + console.debug(colorAtts[0]); + console.debug(graphAttributes[colorAtts[0]]); + setLegend(colorAtts[0]["label"],colorAtts[0]); + } } // PUBLIC FUNCTIONS: @@ -114,12 +206,17 @@ var stargit=(function(){ setSize: function(e){ if(!setFlash()) return; - flash.setSize(e.value); + console.debug(e.target.value); + flash.setSize(e.target.value); }, setColor: function(e){ if(!setFlash()) return; - flash.setColor(e.value,graphAttributes); + console.debug(e.target.value); + + setLegend(e.target.value,graphAttributes[e.target.value]); + + flash.setColor(e.target.value,graphAttributes); }, toggleEdges: function(){ @@ -145,6 +242,35 @@ var stargit=(function(){ flash.activateFishEye(); } return !isFishEye; + }, + + getGraphAttributes: function(){ + url = "/graph/attributes"; + + $.ajax({ + url: url, + dataType: 'json', + success: + function(json){ + graphAttributes = (json && json["attributes"]) ? json["attributes"] : {}; + setComboBoxes(); + } + }); + }, + + onClickNodes: function(nodesArray){ + if(nodesArray.length){ + query = nodesArray[0]; + + getGithubGraph(query); + document.getElementById("query_input").value = query; + } + }, + + onOverNodes: function(nodesArray){ + for(var i=0;i