[whimsy.git] [23/37] Commit 1adbf5d: rough in keyboard logic

[Sam Ruby <ru...@apache.org>]

Commit 1adbf5d3198189365dd761700f767c1aa4edd5c6:
    rough in keyboard logic


Branch: refs/heads/secmail
Author: Sam Ruby <ru...@intertwingly.net>
Committer: Sam Ruby <ru...@intertwingly.net>
Pusher: rubys <ru...@apache.org>

------------------------------------------------------------
views/index.html.rb                                          | ++++ 
views/index.js.rb                                            | +++++++ ---
------------------------------------------------------------
77 changes: 58 additions, 19 deletions.
------------------------------------------------------------


diff --git a/views/index.html.rb b/views/index.html.rb
index 4d9e96e..554e5c6 100644
--- a/views/index.html.rb
+++ b/views/index.html.rb
@@ -4,6 +4,10 @@
       padding-right: 7px;
       padding-left: 7px;
     }
+
+   .selected {
+     background-color: yellow
+   }
   }
 
   _div.index!
diff --git a/views/index.js.rb b/views/index.js.rb
index 53accf2..cafe71c 100644
--- a/views/index.js.rb
+++ b/views/index.js.rb
@@ -1,28 +1,33 @@
+#
+# Index page showing unprocessed messages with attachments
+#
+
 class Index < React
   def initialize
+    @selected = nil
     @messages = []
   end
 
   def render
     _table do
       _thead do
-	_tr do
-	  _th 'Timestamp'
-	  _th 'From'
-	  _th 'Subject'
-	end
+        _tr do
+          _th 'Timestamp'
+          _th 'From'
+          _th 'Subject'
+        end
       end
 
       _tbody do
-	@messages.each do |messsage|
-	  _tr do
-	    _td do
-	      _a messsage.time, href: "#{messsage.href}"
-	    end 
-	    _td messsage.from
-	    _td messsage.subject
-	  end
-	end
+        @messages.each do |message|
+          _tr class: ('selected' if message.href == @selected) do
+            _td do
+              _a message.time, href: "#{message.href}"
+            end 
+            _td message.from
+            _td message.subject
+          end
+        end
       end
     end
 
@@ -30,14 +35,26 @@ def render
       onClick: self.fetch
   end
 
+  # initialize latest mailbox (year+month)
   def componentWillMount()
     @latest = @@mbox
   end
 
+  # on initial load, fetch latest mailbox and subscribe to keyboard events
   def componentDidMount()
     self.fetch()
+    window.onkeydown = self.keydown
+  end
+
+  # when content changes, scroll to selected message
+  def componentDidUpdate()
+    if @selected
+      selected = document.querySelector("a[href='#{@selected}']")
+      selected.scrollIntoView() if selected
+    end
   end
 
+  # fetch a month's worth of messages
   def fetch()
     # build JSON post XMLHttpRequest
     xhr = XMLHttpRequest.new()
@@ -48,16 +65,34 @@ def fetch()
     # process response
     def xhr.onreadystatechange()
       if xhr.readyState == 4
-	response = xhr.response.json
+        response = xhr.response.json
 
-	# update latest mbox
-	@latest = response.mbox if response.mbox
+        # update latest mbox
+        @latest = response.mbox if response.mbox
 
-	# add messages to list
-	@messages = @messages.concat(*response.messages)
+        # add messages to list
+        @messages = @messages.concat(*response.messages)
+
+        # select oldest message
+        @selected = @messages.last.href
       end
     end
 
     xhr.send(JSON.stringify mbox: @latest)
   end
+
+  # handle keyboard events
+  def keydown(event)
+    if event.keyCode == 38 # up
+      index = @messages.findIndex {|m| return m.href == @selected}
+      @selected = @messages[index-1].href if index > 0
+      event.preventDefault()
+    elsif event.keyCode == 40 # down
+      index = @messages.findIndex {|m| return m.href == @selected}
+      @selected = @messages[index+1].href if index < @messages.length-1
+      event.preventDefault()
+    else
+      alert event.keyCode
+    end
+  end
 end