add 'enter to save clipboard'

2025-12-13 01:36:22 +00:00 · 2015-06-05 01:12:47 +09:00
parent c3ed69a712
commit bacccbadf3
6 changed files with 172 additions and 46 deletions
--- a/electron_src/popup/index.html
+++ b/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
--- a/electron_src/popup/popup.js
+++ b/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,62 +133,98 @@ 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 () {
-    if ($scope.selectIndex >= ($scope.filteredSnippets.length -1)) {
+    if ($scope.selectIndex >= ($scope.filteredSnippets.length - 1)) {
      return
    }
    selectItem(++$scope.selectIndex)
  }

  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 hidePopUp () {
-    remote.getCurrentWindow().hide()
-  }
-})
-.directive('resultItem', function () {
-  return {
-    link: function (scope, el, attr) {
-
+  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 () {
--- a/electron_src/popup/popup.scss
+++ b/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,12 +63,20 @@ $focused-shadow-color: $brand-primary;
      width: 60%;
      overflow-y: auto;
      overflow-x: hidden;
-      .result-detail-cotent{
-        position: absolute;
-        top: 34px;
-        bottom: 0;
-        width: 100%;
-      }
+
+    }
+
+    .result-detail-control{
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 34px;
+    }
+    .result-detail-content{
+      position: absolute;
+      top: 34px;
+      bottom: 0;
+      width: 100%;
    }
  }

--- a/icon.png
+++ b/icon.png
--- a/main.js
+++ b/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})

--- a/src/directives/ui-ace.js
+++ b/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
+
      }
    };
  }]);