nitweb: close quick search box when clicking outside

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

diff --git a/share/nitweb/directives/search/field.html b/share/nitweb/directives/search/field.html
new file mode 100644 (file)
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 (file)
--- 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 (file)
--- 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 {