mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-19 20:51:42 +00:00
popup window added
This commit is contained in:
Rokt33r
55
electron_src/popup/index.html
Normal file
55
electron_src/popup/index.html
Normal 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
149
electron_src/popup/popup.js
Normal 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
75
electron_src/popup/popup.scss
Normal 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
55
electron_src/popup/services/snippet.js
Normal 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
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user