Boostnote/electron_src/popup/popup.js

/* global angular */

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

var SEARCH_INPUT = 1
var RESULT_LIST = 2
var RESULT_CONTROL = 3
var RESULT_CONTENT = 4
var btnClipboard = document.getElementById('btnClipboard')
var btnEdit = document.getElementById('btnEdit')
var btnShare = document.getElementById('btnShare')
var aceView = document.getElementById('aceView')

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) {
      switch ($scope.isFocusing) {
        case RESULT_LIST:
          selectNextItem()
          break
        case RESULT_CONTROL:
          focusContent()
          break
      }
      e.preventDefault()
    })
    .add('up', function (e) {
      switch ($scope.isFocusing) {
        case RESULT_LIST:
          selectPriorItem()
          break
        case RESULT_CONTENT:
          focusControl()
          break
      }
      e.preventDefault()
    })
    .add('right', function (e) {
      if ($scope.isFocusing === RESULT_LIST) {
        focusControl()
        return
      }
      if ($scope.isFocusing === RESULT_CONTROL) {
        nextControl()
      }
    })
    .add('left', function (e) {
      if ($scope.isFocusing === RESULT_CONTROL) {
        priorControl()
      }
    })
    .add('esc', function (e) {
      switch ($scope.isFocusing) {
        case RESULT_LIST:
          focusSearchInput()
          break
        case RESULT_CONTROL:
          focusList()
          break
        case RESULT_CONTENT:
          console.log('esc fr content')
          focusControl()
          break
        case SEARCH_INPUT:
          hidePopUp()
      }
    })
    .add('shift+tab', function (e) {
      e.preventDefault()
      if ($scope.isFocusing === RESULT_CONTROL) {
        priorControl()
        return
      }
    })
    .add('tab', function (e) {
      e.preventDefault()
      if ($scope.isFocusing === RESULT_LIST) {
        focusControl()
        return
      }
      if ($scope.isFocusing === RESULT_CONTROL) {
        nextControl()
        return
      }
    })
    .add('enter', function (e) {
      switch ($scope.isFocusing) {
        case RESULT_LIST:
          console.log($scope.selectedItem.content)
          clipboard.writeText($scope.selectedItem.content)
          hidePopUp()
          break
      }
      e.preventDefault()
    })


  $scope.aceLoaded = function (editor) {
    editor.commands.addCommand({
      name: 'escape',
      bindKey: {win: 'esc', mac: 'esc'},
      exec: function (editor) {
        editor.blur()
        focusControl()
        $scope.$apply()
      },
      readOnly: true
    })
  }

  // Init Data
  $scope.snippets = []

  var userId = $auth.getPayload().sub
  Snippet.findByUser(userId)
    .success(function (data) {
      $scope.snippets = data.snippets
      filterList()
    })

  // Functions

  // Search Filter
  function filterList (needle) {
    $scope.filteredSnippets = $filter('filter')($scope.snippets, needle)
    $scope.selectIndex = 0
    selectItem($scope.selectIndex)
  }
  $scope.filterList = filterList

  function hidePopUp () {
    ipc.send('hidePopUp')
  }

  // Result Item control
  $scope.selectIndex = 0

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

    $scope.controlIndex = 0
  }

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

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

  // Focusing control
  $scope.isFocusing = 0

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

    $scope.controlIndex = 0
  }
  $scope.focusSearchInput = focusSearchInput

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

    $scope.controlIndex = 0
  }
  $scope.focusList = focusList

  function focusControl () {
    if ($scope.controlIndex === 0) {
      $scope.controlIndex = 1
    }
    $scope.isFocusing = RESULT_CONTROL
  }
  $scope.focusControl = focusControl

  function focusContent () {
    angular.element(aceView).scope().focus()
    $scope.isFocusing = RESULT_CONTENT
  }

  $scope.controlIndex = 0

  function nextControl () {
    if ($scope.controlIndex === 3) {
      $scope.controlIndex = 0
      focusContent()
      return
    }
    $scope.controlIndex ++
  }

  function priorControl () {
    if ($scope.controlIndex === 1) {
      focusList()
      return
    }
    $scope.controlIndex --
  }
})
.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()
        }
      })
    }
  }
})