Add setting for swapping arrow keys behavior

Closes #296.

assets/javascripts/app/shortcuts.coffee

@@ -15,6 +15,9 @@ class app.Shortcuts
     $.off document, 'keypress', @onKeypress
     return
 
+  swapArrowKeysBehavior: ->
+    app.settings.get('arrowScroll')
+
   showTip: ->
     app.showTip('KeyNav')
     @showTip = null
@@ -40,7 +43,9 @@ class app.Shortcuts
       event.preventDefault() if result is false
     return
 
-  handleKeydownEvent: (event) ->
+  handleKeydownEvent: (event, _force) ->
+    return @handleKeydownAltEvent(event, true) if not _force and event.which in [37, 38, 39, 40] and @swapArrowKeysBehavior()
+
     if not event.target.form and (48 <= event.which <= 57 or 65 <= event.which <= 90)
       @trigger 'typing'
       return
@@ -100,7 +105,9 @@ class app.Shortcuts
         @trigger 'pageBottom'
         false
 
-  handleKeydownShiftEvent: (event) ->
+  handleKeydownShiftEvent: (event, _force) ->
+    return @handleKeydownEvent(event, true) if not _force and event.which in [37, 38, 39, 40] and @swapArrowKeysBehavior()
+
     if not event.target.form and 65 <= event.which <= 90
       @trigger 'typing'
       return
@@ -118,7 +125,9 @@ class app.Shortcuts
           @trigger 'altDown'
           false
 
-  handleKeydownAltEvent: (event) ->
+  handleKeydownAltEvent: (event, _force) ->
+    return @handleKeydownEvent(event, true) if not _force and event.which in [37, 38, 39, 40] and @swapArrowKeysBehavior()
+
     switch event.which
       when 9
         @trigger 'altRight', event

assets/javascripts/templates/pages/settings_tmpl.coffee

@@ -24,6 +24,10 @@ app.templates.settingsPage = (settings) -> """
       <label class="_settings-label">
         <input type="checkbox" name="smoothScroll" value="1"#{if settings.smoothScroll then ' checked' else ''}>Use smooth scrolling
       </label>
+      <label class="_settings-label">
+        <input type="checkbox" name="arrowScroll" value="1"#{if settings.arrowScroll then ' checked' else ''}>Use arrow keys to scroll the main content area
+        <small>With this checked, use <code class="_label">alt</code> + <code class="_label">&uarr;</code><code class="_label">&darr;</code><code class="_label">&larr;</code><code class="_label">&rarr;</code> to navigate the sidebar.</small>
+      </label>
     </div>
   </div>
 

assets/javascripts/views/content/settings_page.coffee

@@ -15,6 +15,7 @@ class app.views.SettingsPage extends app.View
     settings = {}
     settings.dark = app.settings.get('dark')
     settings.smoothScroll = !app.settings.get('fastScroll')
+    settings.arrowScroll = app.settings.get('arrowScroll')
     settings[layout] = app.settings.hasLayout(layout) for layout in LAYOUTS
     settings
 
@@ -40,6 +41,10 @@ class app.views.SettingsPage extends app.View
     app.settings.set('fastScroll', !enable)
     return
 
+  toggle: (name, enable) ->
+    app.settings.set(name, enable)
+    return
+
   onChange: (event) =>
     input = event.target
     switch input.name
@@ -49,6 +54,8 @@ class app.views.SettingsPage extends app.View
         @toggleLayout input.value, input.checked
       when 'smoothScroll'
         @toggleSmoothScroll input.checked
+      else
+        @toggle input.name, input.checked
     return
 
   onRoute: (route) =>