popup window added

2025-12-12 17:26:17 +00:00 · 2015-06-04 19:49:13 +09:00
parent 8bcfac70b2
commit c3ed69a712
11 changed files with 664 additions and 8 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /build
 /node_modules
+/electron_build
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -47,7 +47,7 @@ gulp.task('tpls', function(){
 })

 gulp.task('index', function () {
-  var files = globby.sync(['build/**/*', '!build/vendor/**/*'])
+  var files = globby.sync(['build/**/*', '!build/vendor/**/*', '!build/electron/**/*'])

  var filter = function (files, ext) {
    return files.filter(function (file) {
@@ -118,3 +118,5 @@ gulp.task('default', function (cb) {

  runSequence('del', 'build', 'watch', cb)
 })
+
+require('./gulp-electron')(gulp)
--- a/build.config.js
+++ b/build.config.js
@@ -44,6 +44,10 @@ module.exports = {
      name:'moment',
      src:'node_modules/moment/moment.js',
      cdn:'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js'
+    },
+    {
+      name:'angular-hotkeys',
+      src:'node_modules/angular-hotkeys/build/hotkeys.js'
    }
  ]
 }
--- a/electron_src/popup/index.html
+++ b/electron_src/popup/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html ng-app="codexen.popup">
+  <head>
+    <title>
+      CodeXen App
+    </title>
+
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta charset="utf-8">
+    <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">
+  </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 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}">
+        <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>
+        <div class="result-detail-cotent"
+          ui-ace="{
+            showGutter: false,
+            useWrapMode: true,
+            mode:selectedItem.mode.toLowerCase()
+          }"
+
+          readonly
+          ng-model="selectedItem.content"
+        ></div>
+      </div>
+    </div>
+    <script src="../../vendor/ace.js"></script>
+    <script src="../../vendor/angular.js" charset="utf-8"></script>
+    <script src="../../directives/ui-ace.js"></script>
+    <script src="../../vendor/satellizer.js"></script>
+    <script src="../../vendor/hotkeys.js" charset="utf-8"></script>
+    <script src="popup.js" charset="utf-8"></script>
+    <script src="services/snippet.js" charset="utf-8"></script>
+  </body>
+</html>
--- a/electron_src/popup/popup.js
+++ b/electron_src/popup/popup.js
@@ -0,0 +1,149 @@
+// 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()
+        }
+      })
+    }
+  }
+})
--- a/electron_src/popup/popup.scss
+++ b/electron_src/popup/popup.scss
@@ -0,0 +1,75 @@
+@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;
+    .result-list{
+      margin: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 40%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      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;
+    }
+    .result-detail{
+      &.focused{
+        border: solid 1px $brand-primary;
+      }
+      position: absolute;
+      left: 40%;
+      top: 0;
+      bottom: 0;
+      width: 60%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      .result-detail-cotent{
+        position: absolute;
+        top: 34px;
+        bottom: 0;
+        width: 100%;
+      }
+    }
+  }
+
+}
--- a/electron_src/popup/services/snippet.js
+++ b/electron_src/popup/services/snippet.js
@@ -0,0 +1,55 @@
+/* global angular */
+angular.module('codexen.popup')
+  .constant('apiUrl', 'http://localhost:8000/')
+  .config(function ($authProvider, $httpProvider) {
+    $authProvider.baseUrl = 'http://localhost:8000/'
+
+    $httpProvider.defaults.useXDomain = true
+    delete $httpProvider.defaults.headers.common['X-Requested-With']
+  })
+
+
+angular.module('codexen.popup')
+  .factory('Snippet', function ($http, apiUrl) {
+    var findByUser = function (user) {
+      var url = apiUrl + 'snippets/search'
+
+      return $http.get(url, {
+        params: {
+          user: user
+        }
+      })
+    }
+
+    var create = function (params) {
+      var url = apiUrl + 'snippets/create'
+
+      return $http.post(url, params)
+    }
+
+    var show = function (id) {
+      var url = apiUrl + 'snippets/id/' + id
+
+      return $http.get(url)
+    }
+
+    var update = function (id, params) {
+      var url = apiUrl + 'snippets/id/' + id
+
+      return $http.put(url, params)
+    }
+
+    var destroy = function (id) {
+      var url = apiUrl + 'snippets/id/' + id
+
+      return $http.delete(url)
+    }
+
+    return {
+      findByUser: findByUser,
+      create: create,
+      show: show,
+      delete: destroy,
+      update: update
+    }
+  })
--- a/gulp-electron.js
+++ b/gulp-electron.js
@@ -0,0 +1,125 @@
+var sass = require('gulp-sass')
+var autoprefixer = require('gulp-autoprefixer')
+var templateCache = require('gulp-angular-templatecache')
+var globby = require('globby')
+var template = require('gulp-template')
+var concat = require('gulp-concat')
+var del = require('del')
+var runSequence = require('run-sequence')
+var merge = require('merge-stream')
+
+var changed = require('gulp-changed')
+var cached = require('gulp-cached')
+var remember = require('gulp-remember')
+var livereload = require('gulp-livereload')
+var childProcess = require('child_process')
+
+var config = require('./build.config.js')
+
+// for Dist
+var rev = require('gulp-rev')
+var ngAnnotate = require('gulp-ng-annotate')
+var uglify = require('gulp-uglify')
+var minifyCss = require('gulp-minify-css')
+
+module.exports = function (gulp) {
+
+
+  /*
+  * Electron build
+  */
+  gulp.task('elec-js', function(){
+    var src = gulp.src(['src/**/*.js'])
+      .pipe(changed('electron_build'))
+      .pipe(gulp.dest('electron_build'))
+    var elecSrc = gulp.src(['electron_src/**/*.js'])
+      .pipe(changed('electron_build/electron'))
+      .pipe(gulp.dest('electron_build/electron'))
+    var elecHtml = gulp.src(['electron_src/**/*.html'])
+      .pipe(changed('electron_build/electron'))
+      .pipe(gulp.dest('electron_build/electron'))
+
+    return merge(src, elecSrc, elecHtml)
+  })
+
+  gulp.task('elec-sass', function () {
+    return gulp.src(['src/**/*.scss', 'electron_src/**/*.scss'])
+      .pipe(cached('styles'))
+      .pipe(sass().on('error', sass.logError))
+      .pipe(autoprefixer())
+      .pipe(remember('styles'))
+      .pipe(concat('all.css'))
+      .pipe(gulp.dest('electron_build'))
+  })
+
+  gulp.task('elec-tpls', function(){
+    return gulp.src('src/**/*.tpl.html')
+      .pipe(templateCache())
+      .pipe(gulp.dest('electron_build'))
+  })
+
+  gulp.task('elec-index', function () {
+    var files = globby.sync(['electron_build/**/*', '!electron_build/vendor/**/*', '!electron_build/electron/**/*'])
+
+    var filter = function (files, ext) {
+      return files.filter(function (file) {
+        var reg = new RegExp('.+\.' + ext + '$')
+        return file.match(reg)
+      }).map(function (file) {
+        return file.replace('electron_build/', '')
+      })
+    }
+    var scripts = filter(files, 'js')
+    var styles = filter(files, 'css')
+
+    return gulp.src('src/index.html')
+      .pipe(template({
+        scripts: scripts,
+        styles: styles,
+        env: 'build'
+      }))
+      .pipe(gulp.dest('electron_build'))
+  })
+
+  gulp.task('elec-vendor', function () {
+    var vendors = config.vendors
+
+    var vendorFiles = vendors.map(function (vendor) {
+      return vendor.src
+    })
+
+    return gulp.src(vendorFiles)
+      .pipe(gulp.dest('electron_build/vendor'))
+  })
+
+  gulp.task('elec-resources', function () {
+    return gulp.src('resources/**/*')
+      .pipe(changed('electron_build/resources'))
+      .pipe(gulp.dest('electron_build/resources'))
+  })
+
+  gulp.task('elec-build', function (cb) {
+    runSequence(['elec-js', 'elec-sass', 'elec-tpls', 'elec-vendor', 'elec-resources'], 'elec-index', cb)
+  })
+
+  gulp.task('elec-watch', function (cb) {
+    gulp.watch(['src/**/*.js', 'electron_src/**/*.js', 'electron_src/**/*.html'], ['elec-js'])
+
+    gulp.watch(['src/**/*.scss', 'electron_src/**/*.scss'], ['elec-sass'])
+
+    gulp.watch('src/**/*.tpl.html', ['elec-tpls'])
+
+    gulp.watch(['electron_build/**/*', '!electron_build/vendor/**/*', '!electron_build/electron/**/*'], ['elec-index'])
+
+    livereload.listen()
+  })
+
+  gulp.task('elec-del', function (cb) {
+    del(['electron_build/**/*'], cb)
+  })
+
+  gulp.task('elec', function (cb) {
+    runSequence('elec-del', 'elec-build', 'elec-watch', cb)
+  })
+
+}
--- a/main.js
+++ b/main.js
@@ -8,20 +8,209 @@ require('crash-reporter').start()
 // be closed automatically when the javascript object is GCed.
 var mainWindow = null

-console.log(process.platform)
-// Quit when all windows are closed.
 app.on('window-all-closed', function () {
-  if (process.platform !== 'darwin')
-    app.quit()
+  if (process.platform !== 'darwin') app.quit()
 })
+
 app.on('ready', function () {
+
  mainWindow = new BrowserWindow({width: 800, height: 600})

-  mainWindow.loadUrl('file://' + __dirname + '/build/index.html')
+  mainWindow.loadUrl('file://' + __dirname + '/electron_build/index.html')

-  mainWindow.openDevTools()
+  // mainWindow.openDevTools()

  mainWindow.on('closed', function () {
+    console.log('main closed')
    mainWindow = null
  })
+
+  var globalShortcut = require('global-shortcut')
+
+  var popUpWindow = new BrowserWindow({
+    width: 600,
+    height: 400,
+    show: false,
+    frame: false
+  })
+
+  popUpWindow.loadUrl('file://' + __dirname + '/electron_build/electron/popup/index.html')
+
+  app.on('activate-with-no-open-windows', function () {
+    if (mainWindow == null) {
+      console.log('new WIndow!')
+      mainWindow = new BrowserWindow({width: 800, height: 600})
+
+      mainWindow.loadUrl('file://' + __dirname + '/electron_build/index.html')
+
+      mainWindow.on('closed', function () {
+        mainWindow = null
+      })
+    }
+    mainWindow.show()
+  })
+
+  popUpWindow.on('blur', function () {
+    popUpWindow.hide()
+  })
+
+  var hidePopUp = function () {
+    if(fromMain){
+
+    } else {
+      mainWindow.hide()
+      Menu.sendActionToFirstResponder('hide:');
+    }
+
+    popUpWindow.hide()
+  }
+
+  var ipc = require('ipc')
+  ipc.on('hidePopUp', function () {
+    hidePopUp()
+  })
+
+  var fromMain
+  // Register a 'ctrl+x' shortcut listener.
+  var ret = globalShortcut.register('ctrl+tab+shift', function () {
+
+    if (popUpWindow.isVisible()) {
+      hidePopUp()
+      return
+    }
+    fromMain = mainWindow.isFocused()
+    popUpWindow.show()
+
+  })
+  if (!ret) console.log('registerion fails')
+
+
+  // MENU
+  var Menu = require('menu')
+  var template = [
+    {
+      label: 'Electron',
+      submenu: [
+        {
+          label: 'About Electron',
+          selector: 'orderFrontStandardAboutPanel:'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Services',
+          submenu: []
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Hide Electron',
+          accelerator: 'Command+H',
+          selector: 'hide:'
+        },
+        {
+          label: 'Hide Others',
+          accelerator: 'Command+Shift+H',
+          selector: 'hideOtherApplications:'
+        },
+        {
+          label: 'Show All',
+          selector: 'unhideAllApplications:'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Quit',
+          accelerator: 'Command+Q',
+          click: function() { app.quit(); }
+        },
+      ]
+    },
+    {
+      label: 'Edit',
+      submenu: [
+        {
+          label: 'Undo',
+          accelerator: 'Command+Z',
+          selector: 'undo:'
+        },
+        {
+          label: 'Redo',
+          accelerator: 'Shift+Command+Z',
+          selector: 'redo:'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Cut',
+          accelerator: 'Command+X',
+          selector: 'cut:'
+        },
+        {
+          label: 'Copy',
+          accelerator: 'Command+C',
+          selector: 'copy:'
+        },
+        {
+          label: 'Paste',
+          accelerator: 'Command+V',
+          selector: 'paste:'
+        },
+        {
+          label: 'Select All',
+          accelerator: 'Command+A',
+          selector: 'selectAll:'
+        },
+      ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Reload',
+          accelerator: 'Command+R',
+          click: function() { BrowserWindow.getFocusedWindow().reloadIgnoringCache(); }
+        },
+        {
+          label: 'Toggle DevTools',
+          accelerator: 'Alt+Command+I',
+          click: function() { BrowserWindow.getFocusedWindow().toggleDevTools(); }
+        },
+      ]
+    },
+    {
+      label: 'Window',
+      submenu: [
+        {
+          label: 'Minimize',
+          accelerator: 'Command+M',
+          selector: 'performMiniaturize:'
+        },
+        {
+          label: 'Close',
+          accelerator: 'Command+W',
+          selector: 'performClose:'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Bring All to Front',
+          selector: 'arrangeInFront:'
+        },
+      ]
+    },
+    {
+      label: 'Help',
+      submenu: []
+    },
+  ];
+
+  menu = Menu.buildFromTemplate(template);
+
+  Menu.setApplicationMenu(menu);
 })
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
    "@rokt33r/angular-ui-ace": "^0.2.3",
    "angular": "^1.3.15",
    "angular-bootstrap": "^0.12.0",
+    "angular-hotkeys": "^1.4.5",
    "angular-md5": "^0.1.7",
    "angular-sanitize": "^1.3.15",
    "angular-ui-router": "^0.2.15",
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,7 @@

    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta charset="utf-8">
-    <meta name=viewport content="width=device-width, initial-scale=1">
+    <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">

    <title>Codexen!</title>