UX: Enable selecting radio by clicking anywhere on the row

Ease the selection of a radio button by allowing the user to click on
any of the table cells that are in the same row as the radio button of
concern.

2 files changed, 24 insertions, 0 deletions

diff --git a/qc_app/static/js/select_platform.js b/qc_app/static/js/select_platform.js
index d7541fa..d78877e 100644
--- a/qc_app/static/js/select_platform.js
+++ b/qc_app/static/js/select_platform.js
@@ -57,3 +57,14 @@ function update_genechips(event) {
 	setup_genechips(genec[species_elt.value.toLowerCase()]);
     }
 }
+
+function select_row_radio(row) {
+    radio = row.getElementsByTagName(
+	"td")[0].getElementsByTagName(
+	    "input")[0];
+    if(radio === undefined) {
+	return false;
+    }
+    radio.setAttribute("checked", "checked");
+    return true;
+}
diff --git a/qc_app/templates/select_platform.html b/qc_app/templates/select_platform.html
index 131003d..3ceae01 100644
--- a/qc_app/templates/select_platform.html
+++ b/qc_app/templates/select_platform.html
@@ -68,5 +68,18 @@
 <script type="text/javascript">
   document.getElementById(
       "species").addEventListener("change", update_genechips);
+  document.getElementById(
+      "genechips-table").getElementsByTagName(
+	  "tbody")[0].addEventListener(
+	      "click",
+	      function(event) {
+		  if(event.target.tagName.toLowerCase() == "td") {
+		      return select_row_radio(event.target.parentElement);
+		  }
+		  if(event.target.tagName.toLowerCase() == "td") {
+		      return select_row_radio(event.target);
+		  }
+		  return false;
+	      });
 </script>
 {%endblock%}