From: Alexandre Terrasa <alexandre@moz-code.org>
Date: Thu, 2 Jun 2016 23:41:19 +0000 (-0400)
Subject: nitweb/angular: add search field
X-Git-Url: http://nitlanguage.org

nitweb/angular: add search field

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>
---

diff --git a/share/nitweb/index.html b/share/nitweb/index.html
index f2a54c5..17bcd23 100644
--- a/share/nitweb/index.html
+++ b/share/nitweb/index.html
@@ -20,6 +20,21 @@
 				<div class='col-xs-3 navbar-header'>
 					<a class='navbar-brand' ng-href='/'>Nitdoc</a>
 				</div>
+				<div class='col-xs-7'>
+					<form ng-controller='SearchCtrl as searchCtrl' >
+						<div class='form-group has-icon'>
+							<input placeholder='Search...' type='text' class='form-control search-input'
+								ng-model-options='{ debounce: 150 }' ng-model='query'
+								ng-keydown='update($event)' ng-change='search()'>
+							<span class='glyphicon glyphicon-search form-control-icon text-muted'></span>
+						</div>
+						<div ng-if='results.length > 0' class='search-results'>
+							<div class='card-list'>
+								<entity-card ng-click='reset()' ng-class='{active: activeItem == $index}' mentity='mentity' ng-repeat='mentity in results' />
+							</div>
+						</div>
+					</form>
+				</div>
 			</div>
 		</nav>
 		<div ng-view></div>
diff --git a/share/nitweb/javascripts/model.js b/share/nitweb/javascripts/model.js
index b5e8bbf..7d5051b 100644
--- a/share/nitweb/javascripts/model.js
+++ b/share/nitweb/javascripts/model.js
@@ -26,8 +26,13 @@
 					$http.get(apiUrl + '/entity/' + id)
 						.success(cb)
 						.error(cbErr);
-				}
+				},
 
+				search: function(q, n, cb, cbErr) {
+					$http.get(apiUrl + '/search?q=' + q + '&n=' + n)
+						.success(cb)
+						.error(cbErr);
+				}
 			};
 		}])
 })();
diff --git a/share/nitweb/javascripts/ui.js b/share/nitweb/javascripts/ui.js
index aae0234..cd30d06 100644
--- a/share/nitweb/javascripts/ui.js
+++ b/share/nitweb/javascripts/ui.js
@@ -18,6 +18,65 @@
 	angular
 		.module('ui', [ 'model' ])
 
+		.controller('SearchCtrl', ['Model', '$routeParams', '$scope', '$window', function(Model, $routeParams, $scope, $window) {
+			$scope.query = '';
+
+			$scope.reset = function() {
+				$scope.activeItem = 0;
+				$scope.results = [];
+			}
+
+			$scope.update = function(e) {
+				if(e.keyCode == 38) {
+					$scope.selectUp();
+				} else if(e.keyCode == 40) {
+					$scope.selectDown();
+				} else if(e.keyCode == 27) {
+					$scope.selectEscape();
+				} else if(e.keyCode == 13) {
+					$scope.selectEnter();
+				}
+			}
+
+			$scope.selectUp = function() {
+				if($scope.activeItem > 0) {
+					$scope.activeItem -= 1;
+				}
+			}
+
+			$scope.selectDown = function() {
+				if($scope.activeItem < $scope.results.length - 1) {
+					$scope.activeItem += 1;
+				}
+			}
+
+			$scope.selectEnter = function() {
+				$window.location.href = $scope.results[$scope.activeItem].web_url;
+				$scope.reset();
+			}
+
+			$scope.selectEscape = function() {
+				$scope.reset();
+			}
+
+			$scope.search = function() {
+				if(!$scope.query) {
+					$scope.reset();
+					return;
+				}
+				Model.search($scope.query, 10,
+					function(data) {
+						$scope.reset();
+						$scope.results = data;
+					}, function(err) {
+						$scope.reset();
+						$scope.error = err;
+					});
+			}
+
+			$scope.reset();
+		}])
+
 		.directive('uiFilters', function() {
 			return {
 				restrict: 'E',
diff --git a/share/nitweb/stylesheets/nitweb.css b/share/nitweb/stylesheets/nitweb.css
index eca9c48..2d38457 100644
--- a/share/nitweb/stylesheets/nitweb.css
+++ b/share/nitweb/stylesheets/nitweb.css
@@ -145,6 +145,66 @@ entity-list:hover .btn-filter {
     pointer-events: none;
 }
 
+/* search */
+
+.search-input {
+	width: 100%;
+}
+
+.search-results {
+	position: absolute;
+	right: 0;
+}
+
+.search-results .card.active {
+	background: #eee;
+	border-color: #eee;
+}
+
+/* navs */
+
+.nav-tabs li { cursor: pointer; }
+
+.navbar-fixed-top {
+	background-color: #1E9431;
+	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
+}
+
+.navbar-fixed-top .form-control:hover, .navbar-fixed-top .form-control:focus {
+	background: rgba(255, 255, 255, 0.2);
+}
+
+.navbar-fixed-top .form-control {
+	background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: #fff;
+    box-shadow: none;
+}
+
+.navbar-fixed-top .form-control-icon {
+	color: #fff;
+}
+
+.navbar-fixed-top *::-webkit-input-placeholder {
+    color: #fff;
+}
+.navbar-fixed-top *:-moz-placeholder {
+    /* FF 4-18 */
+    color: #fff;
+}
+.navbar-fixed-top *::-moz-placeholder {
+    /* FF 19+ */
+    color: #fff;
+}
+.navbar-fixed-top *:-ms-input-placeholder {
+    /* IE 10+ */
+    color: #fff;
+}
+
+.navbar-fixed-top .form-group {
+	margin-top: 8px;
+	margin-bottom: 0px;
+}
 /*
  * Code Highlighting
  */