add keyboard shortcuts and make todos selectable useing j and k

app/assets/javascripts/keybindings.js.coffee

@@ -41,8 +41,11 @@ $ ->
 
   mouseTrapRails.toggleHints() if mouseTrapRails.showOnLoad
 
+  # HELP
   Mousetrap.bind '?', -> $('div#tracks-shortcuts-dialog').modal()
-  Mousetrap.bind 'a', -> $('div#tracks-add-action-dialog').modal()
+
+  # ADD: a is bound in navbar
+
   # GO TO
   # Mousetrap.bind 'g h', TracksApp.go_home
   Mousetrap.bind 'g c', -> alert("go context")
@@ -50,6 +53,11 @@ $ ->
   Mousetrap.bind 'g t', -> alert("go tag")
   Mousetrap.bind 'g p', -> alert("go project")
   # Mousetrap.bind 'g P', TracksApp.go_projects
+
   # VIEW
   Mousetrap.bind 'v p', -> alert("group by project")
   Mousetrap.bind 'v c', -> alert("group by context")
+
+  # Item Selection
+  Mousetrap.bind 'j', -> TracksApp.selectNext()
+  Mousetrap.bind 'k', -> TracksApp.selectPrev()

app/assets/javascripts/tracks.js.coffee

@@ -3,4 +3,68 @@
 # 	goto_page:   (page) -> window.location.href = page
 # 	go_home: 	 this.goto_page "/"
 # 	go_contexts: this.goto_page "/contexts"
-# 	go_projects: this.goto_page "/projects"
+# 	go_projects: this.goto_page "/projects"
+
+TracksApp =
+	currentPosition: 0
+
+	updateCurrentPosition: ->
+		this.currentPosition = 0
+		$("div.todo-item").each ->
+			if $(this).hasClass("selected-item")
+				return false
+			else
+				this.currentPosition++
+
+	selectTodo: (new_todo) ->
+		$("div.todo-item.selected-item").removeClass("selected-item")
+		new_todo.addClass("selected-item")
+		TracksApp.updateCurrentPosition()
+
+	selectPrevNext: (go_next) ->
+		current = prev = next = null
+		stop = false
+		$("div.todo-item").each ->
+			if stop
+				next = $(this)
+				return false
+
+			prev = current
+			current = $(this) 
+
+			if $(this).hasClass("selected-item")
+				stop = true
+		
+		if go_next 
+			TracksApp.selectTodo(prev) if prev?
+			return prev
+		else
+			TracksApp.selectTodo(next) if next?
+			return next
+	
+	selectPrev: ->
+		unless TracksApp.selectPrevNext(true)?
+			TracksApp.selectTodo($("div.todo-item").last())
+	
+	selectNext: ->
+		unless TracksApp.selectPrevNext(false)?
+			TracksApp.selectTodo($("div.todo-item").first())
+
+# Make TracksApp globally accessible. From http://stackoverflow.com/questions/4214731/coffeescript-global-variables
+root = exports ? this
+root.TracksApp = TracksApp
+
+$ ->
+	$("a#menu-keyboard-shotcuts").click -> $('div#tracks-shortcuts-dialog').modal()
+
+	$("a.button-add-todo").click -> $('div#tracks-add-action-dialog').modal()
+
+	$("i.icon-book").click -> 
+		notes_id = $( this ).attr("data-note-id")
+		notes_div = $("div#" + notes_id )
+		notes_div.toggleClass("hide")
+		todo_item = $(this).parent().parent().parent().parent()
+		TracksApp.selectTodo(todo_item)
+
+	$("div.todo-item-description-container").click ->
+		TracksApp.selectTodo( $(this).parent().parent().parent() )

app/assets/stylesheets/tracks.css.scss

@@ -16,6 +16,9 @@ div.tracks-middle {
 
 .navbar-inner {
 	border-radius: none;
+	div.btn-toolbar {
+		margin: 0px 15px 0px 0px;
+	}
 }
 
 div#tracks-login-navbar {
@@ -42,16 +45,15 @@ span.badge_count {
 footer {
 	margin-top: 50px;
 	text-align: center;
-	background-color: #000;
-	background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
+	background-color: #DDD;
 }
 
 /* Todo */
 div.todo-item {
 	margin-top: 7px;
-	margin-left: 0px;
 	border: 3px solid #EEE;
-	border-width: 0px 0px 1px;
+	border-width: 0px 0px 1px 0px;
+	padding: 0px 3px 0px 3px;
 
 	min-height: none;
 	line-height: none;
@@ -59,6 +61,9 @@ div.todo-item {
 		min-height: 0px;
 	}
 
+	div.row {
+		margin-left: 0px;
+	}
 	i.icon-check-empty {
 		margin-right: 10px;
 	}
@@ -84,6 +89,23 @@ div.todo-item {
 		display: inline-block;
 		float:left;
 	}
+	div.todo-notes {
+		background-color: #EEE;
+		border-radius: 3px;
+		padding: 10px;
+		margin: 0px -3px 0px -3px;
+	}
+}
+
+div.selected-item {
+	border: 3px solid #AAA;
+	border-radius: 3px;
+	.row {
+		font-weight: bold;
+	}
+	.todo-notes {
+		font-weight: normal;
+	}
 }
 
 span.tags {
@@ -112,4 +134,8 @@ div.todos-container {
 			color: #444;
 		}
 	}
+}
+
+div.hide_me {
+	display: none;
 }