Boostnote/electron_src/popup/popup.js

// document.getElementById('search-input').focus()

var remote = require('remote')
var ipc = require('ipc')

var SEARCH_INPUT = 1
var RESULT_LIST = 2
var RESULT_DETAIL = 3

angular.module('codexen.popup', [
  'ui.ace',
  'satellizer',
  'cfp.hotkeys'
])
.controller('PopUpController', function ($scope, Snippet, $auth, $window, hotkeys, $document, $filter) {

  // For Dev
  $scope.toggleDev = function () {
    remote.getCurrentWindow().toggleDevTools()
  }

  // Setup Events
  remote.getCurrentWindow().on('focus', function () {
    $scope.$apply(focusSearchInput)
  })

  hotkeys.bindTo($scope)
    .add('down', function (e) {
      if ($scope.isFocusing === RESULT_LIST) selectNextItem()
      e.preventDefault()
    })
    .add('up', function (e) {
      if ($scope.isFocusing === RESULT_LIST) selectPriorItem()
      e.preventDefault()
    })
    .add('right', function (e) {
      if ($scope.isFocusing === RESULT_LIST) focusDetail()
    })
    .add('left', function (e) {
      if ($scope.isFocusing === RESULT_DETAIL) focusList()
    })
    .add('esc', function (e) {
      switch ($scope.isFocusing) {
        case RESULT_LIST:
          focusSearchInput()
          break
        case RESULT_DETAIL:
          focusList()
          break
        case SEARCH_INPUT:
          hidePopUp()
      }
    })
    .add('tab', function (e) {
      if ($scope.isFocusing === RESULT_LIST) focusDetail()

    })

  // Init Data
  $scope.snippets = []

  var userId = $auth.getPayload().sub
  Snippet.findByUser(userId)
    .success(function (data) {
      $scope.snippets = data.snippets
      $scope.selectedItem = $scope.snippets[0]
      filterList()
    })
  function filterList (needle) {
    $scope.filteredSnippets = $filter('filter')($scope.snippets, needle)
  }
  $scope.filterList = filterList

  $scope.isFocusing = 0
  $scope.selectIndex = 0

  $scope.selectItem = selectItem
  function selectItem (index) {
    $scope.selectIndex = index
    $scope.selectedItem = $scope.filteredSnippets[index]
  }

  function selectNextItem () {
    if ($scope.selectIndex >= ($scope.filteredSnippets.length -1)) {
      return
    }
    selectItem(++$scope.selectIndex)
  }

  function selectPriorItem () {
    if ($scope.selectIndex == 0) {
      focusSearchInput()
      return
    }
    selectItem(--$scope.selectIndex)
  }

  function focusSearchInput () {
    $scope.isFocusing = SEARCH_INPUT
    document.getElementById('search-input').focus()
  }

  function focusList () {
    $scope.isFocusing = RESULT_LIST
    document.getElementById('search-input').blur()
  }
  $scope.focusList = focusList

  function focusDetail () {
    $scope.isFocusing = RESULT_DETAIL
  }

  function hidePopUp () {
    remote.getCurrentWindow().hide()
  }
})
.directive('resultItem', function () {
  return {
    link: function (scope, el, attr) {

    }
  }
})
.directive('searchInput', function () {
  return {
    restrict: 'A',
    link: function (scope, el, attr) {
      el.on('keydown', function (e) {

        // Down key => Focus on Result list
        if (e.keyCode === 40) {
          scope.focusList()
          e.preventDefault()
        }

        // Esc key => Dismiss popup
        if (e.keyCode === 27) {
          ipc.send('hidePopUp')
          e.preventDefault()
        }

        // TODO: Tab key => Auto complete
        if (e.keyCode === 9) {
          e.preventDefault()
        }
      })
    }
  }
})