public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

popup window added

Browse Source
This commit is contained in:
Rokt33r
2015-06-04 19:49:13 +09:00
parent 8bcfac70b2
commit c3ed69a712
11 changed files with 664 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
/build /build
/node_modules /node_modules
/electron_build

4
Gulpfile.js
View File

@@ -47,7 +47,7 @@ gulp.task('tpls', function(){
}) })
gulp.task('index', 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) { var filter = function (files, ext) {
return files.filter(function (file) { return files.filter(function (file) {
@@ -118,3 +118,5 @@ gulp.task('default', function (cb) {
runSequence('del', 'build', 'watch', cb) runSequence('del', 'build', 'watch', cb)
}) })
require('./gulp-electron')(gulp)

4
build.config.js
View File

@@ -44,6 +44,10 @@ module.exports = {
name:'moment', name:'moment',
src:'node_modules/moment/moment.js', src:'node_modules/moment/moment.js',
cdn:'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.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'
} }
] ]
} }

55
electron_src/popup/index.html Normal file
View File

@@ -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>

149
electron_src/popup/popup.js Normal file
View File

@@ -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()
}
})
}
}
})

75
electron_src/popup/popup.scss Normal file
View File

@@ -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%;
}
}
}
}

55
electron_src/popup/services/snippet.js Normal file
View File

@@ -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
}
})

125
gulp-electron.js Normal file
View File

@@ -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)
})
}

201
main.js
View File

@@ -8,20 +8,209 @@ require('crash-reporter').start()
// be closed automatically when the javascript object is GCed. // be closed automatically when the javascript object is GCed.
var mainWindow = null var mainWindow = null
console.log(process.platform)
// Quit when all windows are closed.
app.on('window-all-closed', function () { app.on('window-all-closed', function () {
if (process.platform !== 'darwin') if (process.platform !== 'darwin') app.quit()
app.quit()
}) })
app.on('ready', function () { app.on('ready', function () {
mainWindow = new BrowserWindow({width: 800, height: 600}) 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 () { mainWindow.on('closed', function () {
console.log('main closed')
mainWindow = null 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);
}) })

1
package.json
View File

@@ -29,6 +29,7 @@
"@rokt33r/angular-ui-ace": "^0.2.3", "@rokt33r/angular-ui-ace": "^0.2.3",
"angular": "^1.3.15", "angular": "^1.3.15",
"angular-bootstrap": "^0.12.0", "angular-bootstrap": "^0.12.0",
"angular-hotkeys": "^1.4.5",
"angular-md5": "^0.1.7", "angular-md5": "^0.1.7",
"angular-sanitize": "^1.3.15", "angular-sanitize": "^1.3.15",
"angular-ui-router": "^0.2.15", "angular-ui-router": "^0.2.15",

2
src/index.html
View File

@@ -7,7 +7,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8"> <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"> <meta name="description" content="CodeXen - Short code storage service">
<title>Codexen!</title> <title>Codexen!</title>