add 'enter to save clipboard'

electron_src/popup/index.html

@@ -17,26 +17,27 @@
     <!-- Dev!!-->
     <button style="position:fixed;bottom:0;right:0;padding:5px;z-index:1000;" type="button" name="button" ng-click="toggleDev()">DEV!</button>
 
-    <div class="search-block">
+    <div ng-click="focusSearchInput()" class="search-block">
       <input ng-change="filterList(searchNeedle)" search-input id="search-input" type="text" class="form-control" ng-model="searchNeedle" ng-change="refreshResult">
     </div>
 
     <div class="result-block row-fluid">
-      <ul ng-click="focusList()" class="result-list" ng-class="{focused:isFocusing == 2}">
+      <ul ng-click="focusList()" class="result-list left-pane" ng-class="{focused:isFocusing == 2}">
         <li ng-click="selectItem($index)" ng-repeat="snippet in filteredSnippets"><a ng-class="{selected:$index == selectIndex}" href="#">{{snippet.description}}</a></li>
       </ul>
 
-      <div class="result-detail" ng-class="{focused:isFocusing == 3}">
-        <div class="result-detail-control">
-          <button type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
-          <button type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
-          <button type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button>
+      <div class="right-pane">
+        <div ng-click="focusControl()" class="result-detail-control">
+          <button ng-class="{focus: controlIndex == 1}" id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
+          <button ng-class="{focus: controlIndex == 2}" id="btnEdit" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
+          <button ng-class="{focus: controlIndex == 3}" id="btnShare" type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button>
         </div>
-        <div class="result-detail-cotent"
+        <div ng-click="focusContent()" id="aceView" class="result-detail-content"
           ui-ace="{
             showGutter: false,
             useWrapMode: true,
-            mode:selectedItem.mode.toLowerCase()
+            mode:selectedItem.mode.toLowerCase(),
+            onLoad : aceLoaded
           }"
 
           readonly

electron_src/popup/popup.js

@@ -1,11 +1,17 @@
-// document.getElementById('search-input').focus()
+/* global angular */
 
 var remote = require('remote')
 var ipc = require('ipc')
+var clipboard = require('clipboard')
 
 var SEARCH_INPUT = 1
 var RESULT_LIST = 2
-var RESULT_DETAIL = 3
+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',
@@ -26,35 +32,99 @@ angular.module('codexen.popup', [
 
   hotkeys.bindTo($scope)
     .add('down', function (e) {
-      if ($scope.isFocusing === RESULT_LIST) selectNextItem()
+      switch ($scope.isFocusing) {
+        case RESULT_LIST:
+          selectNextItem()
+          break
+        case RESULT_CONTROL:
+          focusContent()
+          break
+      }
       e.preventDefault()
     })
     .add('up', function (e) {
-      if ($scope.isFocusing === RESULT_LIST) selectPriorItem()
+      switch ($scope.isFocusing) {
+        case RESULT_LIST:
+          selectPriorItem()
+          break
+        case RESULT_CONTENT:
+          focusControl()
+          break
+      }
       e.preventDefault()
     })
     .add('right', function (e) {
-      if ($scope.isFocusing === RESULT_LIST) focusDetail()
+      if ($scope.isFocusing === RESULT_LIST) {
+        focusControl()
+        return
+      }
+      if ($scope.isFocusing === RESULT_CONTROL) {
+        nextControl()
+      }
     })
     .add('left', function (e) {
-      if ($scope.isFocusing === RESULT_DETAIL) focusList()
+      if ($scope.isFocusing === RESULT_CONTROL) {
+        priorControl()
+      }
     })
     .add('esc', function (e) {
       switch ($scope.isFocusing) {
         case RESULT_LIST:
           focusSearchInput()
           break
-        case RESULT_DETAIL:
+        case RESULT_CONTROL:
           focusList()
           break
+        case RESULT_CONTENT:
+          console.log('esc fr content')
+          focusControl()
+          break
         case SEARCH_INPUT:
           hidePopUp()
       }
     })
-    .add('tab', function (e) {
-      if ($scope.isFocusing === RESULT_LIST) focusDetail()
-
+    .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 = []
@@ -63,21 +133,32 @@ angular.module('codexen.popup', [
   Snippet.findByUser(userId)
     .success(function (data) {
       $scope.snippets = data.snippets
-      $scope.selectedItem = $scope.snippets[0]
       filterList()
     })
+
+  // Functions
+
+  // Search Filter
   function filterList (needle) {
     $scope.filteredSnippets = $filter('filter')($scope.snippets, needle)
+    $scope.selectIndex = 0
+    selectItem($scope.selectIndex)
   }
   $scope.filterList = filterList
 
-  $scope.isFocusing = 0
+  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 () {
@@ -88,37 +169,62 @@ angular.module('codexen.popup', [
   }
 
   function selectPriorItem () {
-    if ($scope.selectIndex == 0) {
+    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 focusDetail () {
-    $scope.isFocusing = RESULT_DETAIL
+  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
   }
 
-  function hidePopUp () {
-    remote.getCurrentWindow().hide()
-  }
-})
-.directive('resultItem', function () {
-  return {
-    link: function (scope, el, attr) {
+  $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 () {

electron_src/popup/popup.scss

@@ -21,7 +21,7 @@ $focused-shadow-color: $brand-primary;
     bottom: 0;
     width: 100%;
     overflow: hidden;
-    .result-list{
+    .left-pane{
       margin: 0;
       position: absolute;
       left: 0;
@@ -30,6 +30,9 @@ $focused-shadow-color: $brand-primary;
       width: 40%;
       overflow-y: auto;
       overflow-x: hidden;
+
+    }
+    .result-list{
       list-style:none;
       padding: 0;
       &.focused{
@@ -52,10 +55,7 @@ $focused-shadow-color: $brand-primary;
       }
       border-right: 1px solid $border-color;
     }
-    .result-detail{
-      &.focused{
-        border: solid 1px $brand-primary;
-      }
+    .right-pane{
       position: absolute;
       left: 40%;
       top: 0;
@@ -63,13 +63,21 @@ $focused-shadow-color: $brand-primary;
       width: 60%;
       overflow-y: auto;
       overflow-x: hidden;
-      .result-detail-cotent{
+
+    }
+
+    .result-detail-control{
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 34px;
+    }
+    .result-detail-content{
       position: absolute;
       top: 34px;
       bottom: 0;
       width: 100%;
     }
   }
-  }
 
 }

main.js

@@ -12,7 +12,12 @@ app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit()
 })
 
+var Tray = require('tray')
+var appIcon = null
+
 app.on('ready', function () {
+  appIcon = new Tray('./icon.png')
+  appIcon.setToolTip('This is my application.')
 
   mainWindow = new BrowserWindow({width: 800, height: 600})
 

src/directives/ui-ace.js

@@ -332,6 +332,12 @@ angular.module('ui.ace', [])
 
         scope.Infinity = -1
 
+        scope.focus = function () {
+          acee.focus()
+        }
+
+        scope.addCommand = acee.commands.addCommand
+
       }
     };
   }]);