vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Start on new interactive search

Browse source
This commit is contained in:
Joseph Schorr 2015-04-06 19:17:18 -04:00
parent 2ece1170a1
commit 951b0cbab8
7 changed files with 505 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

89
static/js/directives/ui/header-bar.js
View file

@ -12,14 +12,42 @@ angular.module('quay').directive('headerBar', function () {
restrict: 'C',
scope: {
},
controller: function($scope, $element, $location, UserService, PlanService, ApiService, NotificationService, Config) {
controller: function($scope, $element, $location, $timeout, UserService, PlanService, ApiService, NotificationService, Config) {
$scope.notificationService = NotificationService;
$scope.searchVisible = false;
$scope.currentSearchQuery = null;
$scope.searchResultState = null;
// Monitor any user changes and place the current user into the scope.
UserService.updateUserIn($scope);
$scope.isNewLayout = Config.isNewLayout();
var conductSearch = function(query) {
if (!query) { $scope.searchResultState = null; return; }
$scope.searchResultState = {
'state': 'loading'
};
var params = {
'query': query
};
ApiService.conductSearch(null, params).then(function(resp) {
if (!$scope.searchVisible) { return; }
$scope.searchResultState = {
'state': resp.results.length ? 'results' : 'no-results',
'results': resp.results,
'current': -1
};
}, /* background */ true);
};
$scope.$watch('currentSearchQuery', conductSearch);
$scope.signout = function() {
ApiService.logout().then(function() {
UserService.load();
@ -41,6 +69,65 @@ angular.module('quay').directive('headerBar', function () {
return Config.ENTERPRISE_LOGO_URL;
};
$scope.toggleSearch = function() {
$scope.searchVisible = !$scope.searchVisible;
if ($scope.searchVisible) {
$('#search-box-input').focus();
if ($scope.currentSearchQuery) {
conductSearch($scope.currentSearchQuery);
}
} else {
$scope.searchResultState = null;
}
};
$scope.getSearchBoxClasses = function(searchVisible, searchResultState) {
var classes = searchVisible ? 'search-visible ' : '';
if (searchResultState) {
classes += 'results-visible';
}
return classes;
};
$scope.handleSearchKeyDown = function(e) {
if (!$scope.searchResultState) { return; }
if (e.keyCode == 40) {
$scope.searchResultState['current']++;
e.preventDefault();
} else if (e.keyCode == 38) {
$scope.searchResultState['current']--;
e.preventDefault();
} else if (e.keyCode == 13) {
var current = $scope.searchResultState['current'];
if (current >= 0 &&
current < $scope.searchResultState['results'].length) {
$scope.showResult($scope.searchResultState['results'][current]);
}
e.preventDefault();
}
if (!$scope.searchResultState) { return; }
if ($scope.searchResultState['current'] < -1) {
$scope.searchResultState['current'] = $scope.searchResultState['results'].length - 1;
} else if ($scope.searchResultState['current'] >= $scope.searchResultState['results'].length) {
$scope.searchResultState['current'] = 0;
}
};
$scope.showResult = function(result) {
$scope.toggleSearch();
$timeout(function() {
$location.url(result['href'])
}, 500);
};
$scope.setCurrentResult = function(result) {
if (!$scope.searchResultState) { return; }
$scope.searchResultState['current'] = result;
};
}
};
return directiveDefinitionObject;