added firmware information on list item click

Author: victordiaz

nw-miniblip/index.html

@@ -25,6 +25,12 @@
 	    editor.setOptions({
 		  fontSize: "15pt"
 	    });
+
+	    //open source links in a new browser 
+	   $('a[target=_blank]').on('click', function(){
+	      require('nw.gui').Shell.openExternal( this.href );
+	      return false;
+	   });
 	});
   </script>
 
@@ -42,13 +48,34 @@
 
 	<div id = "main">
 
-		<div id = "firmware-list"> 
-			<h1> FIRMWARES </h1>
-			<div id = "list"> </div>
-		</div>
+		<div id = "firmware-upload-section">
+		
+			<div id="action"> 
+				<div class="info"> 
+					  <div class="heading">
+					    <div class="name"></div>
+					    <div class="author"></div>
+					    <div class="source"><a target = "_blank" href="">source</a></div>
+					  </div>
+					<div id="description"></div>
+				</div>
+
+				<button id = "upload"> upload firmware </button> 
+			</div>
+
+
+
+
+			<div id = "firmware-list"> 
+				<h1> FIRMWARES </h1>
+				<div id = "list"> </div>
+			</div>
+
+		    	<div id = "board"> 
+				<img src="./images/miniblip_board.png">
+				<h1 id = "info"> MINIBLIP no ha sido detectada </h1>
+			</div>
 
-	    	<div id = "board"> 
-			<img src="./images/miniblip_board.png">
 		</div>
 
 		<div id="editor-container">

nw-miniblip/javascript/main.js

@@ -52,8 +52,10 @@ function get_list_firmwares_remote() {
 
 	$.get(url, function(data) {
 	  var obj = $.parseJSON(data);
+
+	  
 	  $.each(obj, function(i, value) {
-		add_item_to_firmware_list(obj[i], true);
+		add_item_to_firmware_list(value, true);
 	  });
 
 	});
@@ -74,26 +76,39 @@ function get_remote_firmware_url(name) {
 
 function add_item_to_firmware_list(obj, isRemote) {
 	console.log("added " + obj.name);	
-	var file_url = "";	
+	var file_url = "";
+	
 	if (isRemote) {
 		file_url = get_remote_firmware_url(obj.name);
 console.log(file_url);
 	} else { 
 		file_url = get_local_firmware_path(obj.name);
 	}
 
-	$("#firmware-list #list").append('<div class="item" id = '+obj.id +'><div class="name">' + obj.name +'</div><div class="author">'+obj.author+'</div></div>');
-			$("#firmware-list #" + obj.id).click(function() {
 
-				if (isRemote) {
-					download_firmware(file_url, function() {
-						//upload_firmware(file_url, "/dev/sdb");
-					});
-				} else {
-					upload_firmware(file_url, "/dev/sdb");	
-				}
+	$item = $('<div class="item" id = '+obj.id +'><div class="name">' + obj.name +'</div><div class="author">'+obj.author+'</div></div>');
+
+	$("#firmware-list #list").append($item)
+
+	$item.click(function() {
+		var $div = $("#firmware-upload-section #action");
+	
+		$div.fadeOut("500", function() {
+			$div.find(".name").text(obj.name);
+			$div.find(".author").text(obj.author);
+			$div.find(".source a").attr("href", obj.source);
+			$(this).fadeIn("500");
+
+		});
 
+		if (isRemote) {
+			download_firmware(file_url, function() {
+				//upload_firmware(file_url, "/dev/sdb");
 			});
+		} else {
+			upload_firmware(file_url, "/dev/sdb");	
+		}
+	});
 }
 
 function get_list_firmwares_local() {

nw-miniblip/styles/main.less

@@ -105,6 +105,30 @@ body {
 }
 
 
+#firmware-upload-section {
+
+	#action {
+	    position: fixed;
+	    bottom: 0;
+	    left: 355px;
+	    width: 425px;
+	    padding: 10px;
+	    border-radius: 2px 2px 0px 0px;
+	    display: none;
+
+		#heading {
+			font-weight: 800;
+			font-size: 2em;
+		}
+
+		#upload {
+			float: right;
+			padding: 12px;
+		}
+	}
+
+}
+
 #firmware-list {
   float: left;
   width: 200px;
@@ -124,6 +148,7 @@ body {
   .item {
 	  border-bottom: 1px dotted black;
 	  padding: 11px;
+	  cursor: pointer;
 
 	.name {
 	  font-weight: bold;
@@ -175,6 +200,12 @@ body {
 	  opacity: 0.5;
 	  margin-top: 15%;
   }
+
+  #info {
+	  margin-top: 10px;
+	  font-size: 1.2em;
+	  color: gray;
+  }
 }
 
 .disabled {