Flash fixed on Chrome and Firefox, nodes colors legend first working draft available, layout update

5 files changed, 178 insertions, 35 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 3fad3cb..7554bb7 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -66,7 +66,7 @@
 		left bottom,
 		left top,
 		color-stop(0, rgb(181,181,181)),
-		color-stop(0.99, rgb(224,224,224))
+		color-stop(1, rgb(224,224,224))
 	);
 	background-image: -moz-linear-gradient(
 		center bottom,
@@ -95,16 +95,22 @@
 	height: 65%;
 }
 
+#query_top *{
+	margin-top: 15px;
+}
+
 #query_top label{
-	padding-left: 10px;
+	padding-left: 16px;
 	font-family: Collegiate;
 	font-size: 26pt;
+	width: 45%;
 }
 
 #query_top input{
 	padding-right: 10px;
 	font-size: 20pt;
-	width: 60%;
+	
+	width: 45%;
 }
 
 #query_bottom{
@@ -114,15 +120,19 @@
 
 #query_bottom span{
 	float: left;
-	width: 50%;
+	width: 40%;
 }
 
-#query_bottom span label{
-	padding-left: 10px;
+#query_bottom #query_size_span{
+	margin-left: 16px;
+}
+
+#query_bottom #query_color_span{
+	margin-left: 16px;
 }
 
 #query_bottom select{
-	width: auto;
+	width: 105px;
 }
 
 #query_properties{
@@ -135,8 +145,8 @@
 	height: 100%;
 }
 		
-#query_buttons:hover{
-	color: #F0F;
+#query_buttons input:hover{
+	color: #000;
 }
 
 #query_buttons input{
@@ -190,8 +200,10 @@ input.fisheye{
 }
 
 #legend_title{
+	padding-left: 10px;
 	width: 100%;
 	height: 25%;
+	font-size: 10pt;
 }
 
 #legend_elements{
diff --git a/public/flash/SiGMa_API.swf b/public/flash/SiGMa_API.swf
index 67e200c..27720aa 100644
--- a/public/flash/SiGMa_API.swf
+++ b/public/flash/SiGMa_API.swf
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("<br/>");
+			
+	    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<nodesArray.length;i++){
+				console.debug("node: "+nodesArray[i]);
+			}
 		}
 	};
 })();
\ No newline at end of file
diff --git a/views/index.tt b/views/index.tt
index 93ca976..66d71db 100644
--- a/views/index.tt
+++ b/views/index.tt
@@ -15,13 +15,15 @@
 				<input type="text" id="query_input" />
 			</div>
 			<div id="query_bottom">
-			  <span>
+			  <span id="query_size_span">
 					<label for="query_size">nodes size:</label>
+					<br/>
 					<select id="query_size">
 					</select>
 				</span>
-				<span>
+				<span id="query_color_span">
 					<label for="query_color">nodes color:</label>
+					<br/>
 					<select id="query_color">
 					</select>
 				</span>
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index f547e68..3bf4d0c 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -29,6 +29,9 @@
 				$("#query_buttons .fisheye").click(function(){
 					this.value = stargit.toggleFishEye()?"hide fisheye":"use fisheye";
 				});
+				
+				flash = document.getElementById("SiGMa");
+				stargit.getGraphAttributes();
 			});
 		</script>
   </head>