nudge focus shortcut code further to working

src/components/views/rooms/RoomList.js

@@ -72,10 +72,7 @@ module.exports = React.createClass({
         // order of the sublists
         this.listOrder = [];
 
-        // this.focusedRoomTileRoomId = null;
         this.focusedElement = null;
-        // this.focusedPosition = null;
-        // this.focusMoving = false;
     },
 
     componentDidMount: function() {
@@ -198,60 +195,58 @@ module.exports = React.createClass({
     },
 
     _onMoveFocus: function(up) {
-        // cheat and move focus by faking tab/shift-tab.  This lets us do things
+        var element = this.focusedElement;
-        // like collapse/uncollapse room headers & truncated lists without having
-        // to reimplement the entirety of the keyboard navigation logic.
-        //
-        // this simply doens't work, as for security apparently you can't inject
-        // UI events any more - c.f. this note from
-        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
-        //
-        // Note: manually firing an event does not generate the default action
-        // associated with that event. For example, manually firing a key event
-        // does not cause that letter to appear in a focused text input. In the
-        // case of UI events, this is important for security reasons, as it
-        // prevents scripts from simulating user actions that interact with the
-        // browser itself.
-/*
-        var event = document.createEvent('Event');
-        event.initEvent('keydown', true, true);
-        event.keyCode = 9;
-        event.shiftKey = up ? true : false;
-        document.dispatchEvent(event);
-*/
 
-        // alternatively, this is the beginning of moving the focus through the list,
+        // unclear why this isn't needed...
-        // navigating the pure datastructure of the list contents, but doesn't let
+        // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
-        // you navigate through other things
+        // this.focusDirection = up;
-/*        
+
-        this.focusMoving = true;
+        var descending = false;
-        if (this.focusPosition) {
+        var classes;
-            if (up) {
+
-                this.focusPosition.index++;
+        do {
-                if (this.focusPosition.index > this.listsForRoomId[this.focusPosition.list].length) {
+            var child = up ? element.lastElementChild : element.firstElementChild;
-                    // move to the next sublist
+            var sibling = up ? element.previousElementSibling : element.nextElementSibling;
+
+            if (descending) {
+                if (child) {
+                    element = child;
+                }
+                else if (sibling) {
+                    element = sibling;
+                }
+                else {
+                    descending = false;
+                    element = element.parentElement;
                 }
             }
             else {
-                this.focusPosition.index--;
+                if (sibling) {
-                if (this.focusPosition.index < 0) {
+                    element = sibling;
-                    // move to the previous sublist
+                    descending = true;
+                }
+                else {
+                    element = element.parentElement;
                 }
             }
-        }
+
-*/    
+            if (element) {
-        // alternatively, we can just try to manually implementing the focus switch at the DOM level.
+                classes = element.classList;
-        // ignores tabindex.
+                if (classes.contains("mx_LeftPanel")) { // we hit the top
-        var element = this.focusedElement;
+                    element = up ? element.lastElementChild : element.firstElementChild;
-        if (up) {
+                    descending = true;
-            element = element.parentElement.previousElementSibling.firstElementChild;
+                }
-        }
+            }
-        else {
+
-            element = element.parentElement.nextElementSibling.firstElementChild;
+        } while(element && !(
-        }
+            classes.contains("mx_RoomTile") ||
+            classes.contains("mx_SearchBox_search") ||
+            classes.contains("mx_RoomSubList_ellipsis")));
 
         if (element) {
             element.focus();
+            this.focusedElement = element;
+            this.focusedDescending = descending;
         }
     },
 
@@ -275,14 +270,6 @@ module.exports = React.createClass({
                 constantTimeDispatcher.dispatch("RoomSubList.sort", list, { room: room });
             });
         }
-
-/*
-        if (this.focusPosition && lists.indexOf(this.focusPosition.list) > -1) {
-            // if we're reordering the list which currently have focus, recalculate
-            // our focus offset
-            this.focusPosition = null;        
-        }
-*/    
     },
 
     onRoomReceipt: function(receiptEvent, room) {
@@ -343,12 +330,6 @@ module.exports = React.createClass({
     }, 500),
 
     refreshRoomList: function() {
-/*        
-        // if we're regenerating the list, then the chances are the contents
-        // or ordering is changing - forget our cached focus position
-        this.focusPosition = null;
-*/    
-
         // console.log("DEBUG: Refresh room list delta=%s ms",
         //     (!this._lastRefreshRoomListTs ? "-" : (Date.now() - this._lastRefreshRoomListTs))
         // );
@@ -641,34 +622,7 @@ module.exports = React.createClass({
     },
 
     onRoomTileFocus: function(roomId, event) {
-        // this.focusedRoomTileRoomId = roomId;
         this.focusedElement = event ? event.target : null;
-
-        /*
-        if (roomId && !this.focusPosition) {
-            var list = this.listsForRoomId[roomId];
-            if (list) {
-                console.warn("Focused to room " + roomId + " not in a list?!");
-            }
-            else {
-                this.focusPosition = {
-                    list: list,
-                    index: this.state.lists[list].findIndex(room=>{
-                        return room.roomId == roomId;
-                    }),
-                };
-            }
-        }
-
-        if (!roomId) {
-            if (this.focusMoving) {
-                this.focusMoving = false;
-            }
-            else {
-                this.focusPosition = null;
-            }
-        }
-        */
     },
 
     render: function() {