From faf7a0bac9a65b78c7356d9d7f5cf0ca8a29fb20 Mon Sep 17 00:00:00 2001
From: Alexandre Terrasa <alexandre@moz-code.org>
Date: Tue, 17 Jan 2017 15:53:46 -0500
Subject: [PATCH] nitweb: close quick search box when clicking outside

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>
---
 share/nitweb/directives/search/field.html |   13 +++++++++++++
 share/nitweb/index.html                   |   14 +-------------
 share/nitweb/javascripts/ui.js            |   26 ++++++++++++++++++++++++--
 3 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 share/nitweb/directives/search/field.html

diff --git a/share/nitweb/directives/search/field.html b/share/nitweb/directives/search/field.html
new file mode 100644
index 0000000..d9ee5f1
--- /dev/null
+++ b/share/nitweb/directives/search/field.html
@@ -0,0 +1,13 @@
+<form>
+	<div class='form-group has-icon'>
+		<input placeholder='Search...' type='text' class='form-control search-input'
+			ng-model-options='{ debounce: 300 }' 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'>
+			<search-card ng-click='selectEnter()' ng-class='{active: activeItem == $index}' ng-mouseover='setActive($index)' mentity='mentity' ng-repeat='mentity in results' />
+		</div>
+	</div>
+</form>
diff --git a/share/nitweb/index.html b/share/nitweb/index.html
index 1117ae7..138955b 100644
--- a/share/nitweb/index.html
+++ b/share/nitweb/index.html
@@ -44,19 +44,7 @@
 					</div>
 				</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: 300 }' 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'>
-								<search-card ng-click='selectEnter()' ng-class='{active: activeItem == $index}' ng-mouseover='setActive($index)' mentity='mentity' ng-repeat='mentity in results' />
-							</div>
-						</div>
-					</form>
+					<search-field />
 				</div>
 				<div class='col-xs-2'>
 					<user-menu />
diff --git a/share/nitweb/javascripts/ui.js b/share/nitweb/javascripts/ui.js
index e9f91d2..f6f5eca 100644
--- a/share/nitweb/javascripts/ui.js
+++ b/share/nitweb/javascripts/ui.js
@@ -18,7 +18,8 @@
 	angular
 		.module('ui', [ 'model' ])
 
-		.controller('SearchCtrl', ['Model', '$routeParams', '$scope', '$location', function(Model, $routeParams, $scope, $location) {
+		.controller('SearchCtrl', function(Model, $routeParams, $scope, $location, $document) {
+
 			$scope.query = '';
 
 			$scope.reset = function() {
@@ -79,7 +80,28 @@
 			}
 
 			$scope.reset();
-		}])
+		})
+
+		.directive('searchField', function($document) {
+			return {
+				restrict: 'E',
+				replace: true,
+				controller: 'SearchCtrl',
+				controllerAs: 'searchCtrl',
+				templateUrl: '/directives/search/field.html',
+				link: function ($scope, element, attrs) {
+					$document.bind('click', function (event) {
+						var isChild = $(element).has(event.target).length > 0;
+						var isSelf = element[0] == event.target;
+						var isInside = isChild || isSelf;
+						if (!isInside) {
+							$scope.reset();
+							$scope.$apply();
+						}
+					});
+				}
+			};
+		})
 
 		.directive('searchCard', function() {
 			return {
-- 
1.7.9.5