Keyboard navigation on list

items.js.coffee

container = document.getElementById('items')
new List(container)

list.js.coffee

class List
  constructor: (@container) ->
    document.addEventListener 'keypress', (e) =>
      return if document.activeElement.tagName in ['INPUT', 'TEXTAREA']
      
      switch e.keyCode || e.charCode
        when 106 then @selectNext()
        when 107 then @selectPrev()
        else return

  selectNext: ->
    unless @selected
      @select @container.firstElementChild
      return
    @select @selected.nextElementSibling
    @scroll()

  selectPrev: ->
    unless @selected
      return
    @select @selected.previousElementSibling
    @scroll()

  select: (element) ->
    return unless element
    @selected?.classList.remove 'selected'
    element.classList.add 'selected'
    @selected = element

  scroll: ->
    rectObject = @selected.getBoundingClientRect()

    if rectObject.top < 0
      @selected.scrollIntoView()
    else if rectObject.bottom > innerHeight
      @selected.scrollIntoView(false)