update electron window

2025-12-21 13:41:40 +00:00 · 2015-06-12 17:36:43 +09:00
parent c81bddad2a
commit bcec0c665a
9 changed files with 268 additions and 327 deletions
--- a/electron_src/popup/index.html
+++ b/electron_src/popup/index.html
@@ -10,34 +10,33 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <meta name="description" content="CodeXen - Short code storage service">

-    <link rel="stylesheet" href="../../all.css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="../../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="../../main.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body class="popup-body" ng-controller="PopUpController">

-    <!-- Dev!!-->
-    <button style="position:fixed;bottom:0;right:0;padding:5px;z-index:1000;" type="button" name="button" ng-click="toggleDev()">DEV!</button>
-
-    <div ng-click="focusSearchInput()" class="search-block">
+    <div 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 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 class="result-list left-pane" ng-class="{focused:isFocusing == 2}">
+        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#">{{snippet.description}}</a></li>
      </ul>

      <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 class="result-detail-control">
+          <button id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
+          <button id="btnEdit" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
+          <button id="btnShare" type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button>
        </div>
-        <div ng-click="focusContent()" id="aceView" class="result-detail-content"
+        <div id="aceView" class="result-detail-content"
          ui-ace="{
            showGutter: false,
            useWrapMode: true,
            mode:selectedItem.mode.toLowerCase(),
-            onLoad : aceLoaded
+            onLoad: aceLoaded,
+            theme: 'solarized_dark'
          }"

          readonly
--- a/electron_src/popup/popup.js
+++ b/electron_src/popup/popup.js
@@ -3,15 +3,6 @@
 var remote = require('remote')
 var ipc = require('ipc')

-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',
@@ -27,214 +18,146 @@ angular.module('codexen.popup', [
  // Setup Events
  remote.getCurrentWindow().on('focus', function () {
    $scope.$apply(focusSearchInput)
+    loadSnippets()
  })

  hotkeys.bindTo($scope)
    .add('down', function (e) {
-      switch ($scope.isFocusing) {
-        case RESULT_LIST:
-          selectNextItem()
-          break
-        case RESULT_CONTROL:
-          focusContent()
-          break
-      }
+      nextSnippet()
      e.preventDefault()
    })
    .add('up', function (e) {
-      switch ($scope.isFocusing) {
-        case RESULT_LIST:
-          selectPriorItem()
-          break
-        case RESULT_CONTENT:
-          focusControl()
-          break
-      }
+      priorSnippet()
      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()
-      }
+      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)
-          ipc.send('writeCode', $scope.selectedItem.content)
-          break
-      }
+      console.log($scope.selectedItem.content)
+      ipc.send('writeCode', $scope.selectedItem.content)
      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
    })
  }

+  $scope.$on('nextSnippetRequested', function (e) {
+    e.stopPropagation()
+    nextSnippet()
+  })
+
+  $scope.$on('priorSnippetRequested', function (e) {
+    e.stopPropagation()
+    priorSnippet()
+  })
+
+  $scope.$on('snippetSubmitted', function (e) {
+    if ($scope.filteredSnippets.length > 0) ipc.send('writeCode', $scope.selectedItem.content)
+    else console.log('\x07')
+    e.stopPropagation()
+  })
+
  // Init Data
  $scope.snippets = []

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

-  // Functions
+  // Result Item control
+  $scope.selectIndex = 0
+
+  $scope.selectSnippet = selectSnippet
+  $scope.filterList = filterList
+  $scope.focusSearchInput = focusSearchInput

  // Search Filter
+  function loadSnippets () {
+    Snippet.findMine()
+      .success(function (data) {
+        $scope.snippets = data
+        filterList()
+      })
+  }
+
  function filterList (needle) {
    $scope.filteredSnippets = $filter('filter')($scope.snippets, needle)
-    $scope.selectIndex = 0
-    selectItem($scope.selectIndex)
+    firstSnippet()
+  }
+
+  function selectSnippet (index) {
+    if (index !== undefined) $scope.selectIndex = index
+    $scope.selectedItem = $scope.filteredSnippets[$scope.selectIndex]
+  }
+
+  function firstSnippet () {
+    $scope.selectIndex = 0
+    selectSnippet($scope.selectIndex)
+  }
+
+  function priorSnippet () {
+    if ($scope.selectIndex > 0) $scope.selectIndex -= 1
+    selectSnippet()
+  }
+
+  function nextSnippet () {
+    if ($scope.selectIndex < $scope.filteredSnippets.length - 1) {
+      $scope.selectIndex += 1
+    }
+    selectSnippet()
+  }
+
+  // Focusing Search Input
+  function focusSearchInput () {
+    document.getElementById('search-input').focus()
  }
-  $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()
+          scope.$emit('nextSnippetRequested')
+          // e.preventDefault()
+        }
+
+        // Up key => Focus on Result list
+        if (e.keyCode === 38) {
+          scope.$emit('priorSnippetRequested')
+          // e.preventDefault()
+        }
+
+        // Up key => Focus on Result list
+        if (e.keyCode === 13) {
+          scope.$emit('snippetSubmitted')
        }

        // Esc key => Dismiss popup
--- a/electron_src/popup/popup.scss
+++ b/electron_src/popup/popup.scss
@@ -1,83 +0,0 @@
-@import "../../src/variables";
-@import "../../src/mixins";
-
-$selected-color: white;
-$selected-bg: $brand-primary;
-
-$focused-shadow-color: $brand-primary;
-
-
-.popup-body{
-  .search-block{
-    padding: 5px;
-    height:44px;
-    position:absolute;
-    top: 0;
-    width: 100%;
-  }
-  .result-block{
-    position:absolute;
-    top: 44px;
-    bottom: 0;
-    width: 100%;
-    overflow: hidden;
-    .left-pane{
-      margin: 0;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 40%;
-      overflow-y: auto;
-      overflow-x: hidden;
-
-    }
-    .result-list{
-      list-style:none;
-      padding: 0;
-      &.focused{
-        border: solid 1px $brand-primary;
-      }
-      li{
-        a{
-          display:block;
-          padding: 5px 10px;
-          border-bottom: 1px solid $border-color;
-
-          &.selected{
-            color: $selected-color;
-            background-color: $selected-bg;
-          }
-
-          &:hover{
-          }
-        }
-      }
-      border-right: 1px solid $border-color;
-    }
-    .right-pane{
-      position: absolute;
-      left: 40%;
-      top: 0;
-      bottom: 0;
-      width: 60%;
-      overflow-y: auto;
-      overflow-x: hidden;
-
-    }
-
-    .result-detail-control{
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 34px;
-    }
-    .result-detail-content{
-      position: absolute;
-      top: 34px;
-      bottom: 0;
-      width: 100%;
-    }
-  }
-
-}
--- a/electron_src/popup/services/snippet.js
+++ b/electron_src/popup/services/snippet.js
@@ -10,7 +10,7 @@ angular.module('codexen.popup')


 angular.module('codexen.popup')
-  .factory('Snippet', function ($http, apiUrl) {
+  .factory('Snippet', function ($http, $auth, apiUrl) {
    var findByUser = function (user) {
      var url = apiUrl + 'snippets/search'

@@ -21,16 +21,22 @@ angular.module('codexen.popup')
      })
    }

+    var findMine = function (params) {
+      var url = apiUrl + 'snippets/my'
+
+      return $http.get(url, {params: params})
+    }
+
    var create = function (params) {
      var url = apiUrl + 'snippets/create'

      return $http.post(url, params)
    }

-    var show = function (id) {
+    var show = function (id, params) {
      var url = apiUrl + 'snippets/id/' + id

-      return $http.get(url)
+      return $http.get(url, {params: params})
    }

    var update = function (id, params) {
@@ -47,6 +53,7 @@ angular.module('codexen.popup')

    return {
      findByUser: findByUser,
+      findMine: findMine,
      create: create,
      show: show,
      delete: destroy,