Remote searching with custom behaviours on backdrop and cancel button

README.md

@@ -31,6 +31,29 @@ Run the following ommands:
     bower install
     gulp
 
+## Remote Searching
+The default behaviour supports searching locally with a given list of items. In case you need to implement your own searching which connects to a remote server of retrieving data, you need to disable `hideBackdropOnTyping`. Also depending on your implementation, you might different behaviours for events such as user clicks on cancel button or taps on backdrop. The following example gives you the idea on how this can be implemented.
+
+```javascript
+    var filterBarInstanceTerminator = $ionicFilterBar.show({
+        update: function (filteredItems, filterText) {
+            console.log(filterText);
+        },
+        cancelText: 'Search',
+        backdrop: true,
+        hideBackdropOnTyping: false,
+        cancelClick: function (items, text) {
+            console.log('cancelClick:' + text);
+            filterBarInstanceTerminator();
+        },
+        backdropClick: function (items, text) {
+            console.log('backdropClick:' + text);
+            filterBarInstanceTerminator();
+        }
+    });
+
+```
+
 ## Setup
 
 #### Install
@@ -225,6 +248,36 @@ A service you can inject in your controller to show the filter bar
     Called after the filterBar is removed.  This can happen when the cancel button is pressed, the backdrop is
     tapped or swiped, or the back button is pressed.
 
+  - `{function=}` `cancelClick`
+    Called when user clicks on cancel button. When you use this option, backdrop will not disappear
+    automatically. Instead you have to close it manually by calling the filter bar instance.
+    ```javascript
+        var filterBarInstanceTerminator = $ionicFilterBar.show({
+            update: function (filteredItems, filterText) {
+                console.log(filterText);
+            },
+            cancelText: 'Search',
+            backdrop: true,
+            hideBackdropOnTyping: false,
+            cancelClick: function (items, text) {
+                console.log('cancelClick:' + text);
+                filterBarInstanceTerminator();
+            },
+            backdropClick: function (items, text) {
+                console.log('backdropClick:' + text);
+                filterBarInstanceTerminator();
+            }
+        });
+
+    ```
+
+  - `{function=}` `backdropClick`
+    Called when user taps on backdrop. When you use this option, backdrop will not disappear
+    automatically. Instead you have to close it manually by calling the filter bar instance.
+    You can have a look at the example given for `cancelClick` option
+
+  - `{boolean=}` `hideBackdropOnTyping`
+    The default value is true. When user types into the search box, backdrop is hidden automatically.
 
   - `{function=}` `done`
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-filter-bar",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "A filter directive UI for Ionic apps that animates over the header bar",
   "author": "Devin Jett <[email protected]> (https://github.com/djett41)",
   "main": [
@@ -39,5 +39,8 @@
     "angular"
   ],
   "license": "MIT",
-  "private": false
+  "private": false,
+  "resolutions": {
+    "angular": "1.5.3"
+  }
 }

dist/ionic.filter.bar.js

@@ -63,7 +63,12 @@ angular.module('jett.ionic.filter.bar', ['ionic']);
 
               backdropClick = function(e) {
                 if (e.target == backdrop[0]) {
-                  cancelFilterBar();
+                    if ($scope.backdropClick !== angular.noop) {
+                        $scope.backdropClick($scope.data.filterItems,
+                            $scope.data.filterText);
+                    } else {
+                        cancelFilterBar();
+                    }
                 }
               };
 
@@ -108,15 +113,26 @@ angular.module('jett.ionic.filter.bar', ['ionic']);
             var keyUp = function(e) {
               if (e.which == 27) {
                 cancelFilterBar();
-              } else if ($scope.data.filterText && $scope.data.filterText.length) {
+              } else if ($scope.data.filterText 
+                      && $scope.data.filterText.length
+                      && $scope.hideBackdropOnTyping) {
                 $scope.hideBackdrop();
               } else {
                 $scope.showBackdrop();
               }
             };
 
+            var cancelElClickEvent = function() {
+                if ($scope.cancelClick !== angular.noop) {
+                    $scope.cancelClick($scope.data.filterItems,
+                            $scope.data.filterText);
+                } else {
+                    cancelFilterBar();
+                }
+            };
+
             //Event Listeners
-            cancelEl.addEventListener('click', cancelFilterBar);
+            cancelEl.addEventListener('click', cancelElClickEvent);
             // Since we are wrapping with label, need to bind touchstart rather than click.
             // Even if we use div instead of label need to bind touchstart.  Click isn't allowing input to regain focus quickly
             clearEl.addEventListener('touchstart', clearClick);
@@ -424,6 +440,9 @@ angular.module('jett.ionic.filter.bar', ['ionic']);
             $deregisterBackButton: angular.noop,
             update: angular.noop,
             cancel: angular.noop,
+            cancelClick: angular.noop,
+            backdropClick: angular.noop,
+            hideBackdropOnTyping: true,
             done: angular.noop,
             scrollDelegate: $ionicScrollDelegate,
             filter: $filter('filter'),

js/ionic.filter.bar.directive.js

@@ -62,7 +62,12 @@
 
               backdropClick = function(e) {
                 if (e.target == backdrop[0]) {
-                  cancelFilterBar();
+                    if ($scope.backdropClick !== angular.noop) {
+                        $scope.backdropClick($scope.data.filterItems,
+                            $scope.data.filterText);
+                    } else {
+                        cancelFilterBar();
+                    }
                 }
               };
 
@@ -107,15 +112,26 @@
             var keyUp = function(e) {
               if (e.which == 27) {
                 cancelFilterBar();
-              } else if ($scope.data.filterText && $scope.data.filterText.length) {
+              } else if ($scope.data.filterText 
+                      && $scope.data.filterText.length
+                      && $scope.hideBackdropOnTyping) {
                 $scope.hideBackdrop();
               } else {
                 $scope.showBackdrop();
               }
             };
 
+            var cancelElClickEvent = function() {
+                if ($scope.cancelClick !== angular.noop) {
+                    $scope.cancelClick($scope.data.filterItems,
+                            $scope.data.filterText);
+                } else {
+                    cancelFilterBar();
+                }
+            };
+
             //Event Listeners
-            cancelEl.addEventListener('click', cancelFilterBar);
+            cancelEl.addEventListener('click', cancelElClickEvent);
             // Since we are wrapping with label, need to bind touchstart rather than click.
             // Even if we use div instead of label need to bind touchstart.  Click isn't allowing input to regain focus quickly
             clearEl.addEventListener('touchstart', clearClick);

js/ionic.filter.bar.service.js

@@ -111,6 +111,9 @@
             $deregisterBackButton: angular.noop,
             update: angular.noop,
             cancel: angular.noop,
+            cancelClick: angular.noop,
+            backdropClick: angular.noop,
+            hideBackdropOnTyping: true,
             done: angular.noop,
             scrollDelegate: $ionicScrollDelegate,
             filter: $filter('filter'),

karma.conf.js

@@ -33,5 +33,5 @@ module.exports = {
   // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
   // - PhantomJS
   // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
-  browsers: ['PhantomJS']
+  browsers: ['Chrome']
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-filter-bar",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "A filter directive UI for Ionic apps that animates over the header bar",
   "author": "Devin Jett <[email protected]> (https://github.com/djett41)",
   "main": "./dist/ionic-filter-bar.js",
@@ -13,19 +13,19 @@
     "url": "https://github.com/djett41/ionic-filter-bar.git"
   },
   "devDependencies": {
+    "bower": "^1.3.3",
     "gulp": "^3.5.6",
-    "gulp-sass": "^1.3.3",
     "gulp-concat": "^2.2.0",
     "gulp-minify-css": "^0.3.0",
     "gulp-rename": "^1.2.0",
-    "bower": "^1.3.3",
+    "gulp-sass": "^2.3.2",
     "gulp-uglify": "^0.2.1",
     "gulp-util": "^2.2.14",
-    "shelljs": "^0.3.0",
     "karma": "^0.12.23",
     "karma-chrome-launcher": "^0.1.4",
     "karma-jasmine": "~0.1.5",
-    "karma-phantomjs-launcher": "~0.1.2"
+    "karma-phantomjs-launcher": "~0.1.2",
+    "shelljs": "^0.3.0"
   },
   "scripts": {
     "test": "gulp test"

test/unit/ionic.filter.bar.service.unit.js

@@ -47,6 +47,9 @@ describe('Ionic FilterBar Service', function() {
 
     expect(scope.update).toEqual(angular.noop);
     expect(scope.cancel).toEqual(angular.noop);
+    expect(scope.cancelClick).toEqual(angular.noop);
+    expect(scope.hideBackdropOnTyping).toEqual(true);
+    expect(scope.backdropClick).toEqual(angular.noop);
     expect(scope.done).toEqual(angular.noop);
     expect(scope.filterProperties).toBeNull();
     expect(scope.debounce).toBe(true);
@@ -182,11 +185,16 @@ describe('Ionic FilterBar Service', function() {
       var update = function () {};
       var cancel = function () {};
       var done = function () {};
+      var cancelClick = function() {};
+      var backdropClick = function() {};
 
       var scope = setup({
         update: update,
+        cancelClick: cancelClick,
+        backdropClick: backdropClick,
         cancel: cancel,
         done: done,
+        hideBackdropOnTyping: false,
         filterProperties: ['propA', 'propB'],
         debounce: false,
         delay: 0,
@@ -213,6 +221,9 @@ describe('Ionic FilterBar Service', function() {
 
       expect(scope.update).toEqual(update);
       expect(scope.cancel).toEqual(cancel);
+      expect(scope.cancelClick).toEqual(cancelClick);
+      expect(scope.hideBackdropOnTyping).toEqual(false);
+      expect(scope.backdropClick).toEqual(backdropClick);
       expect(scope.done).toEqual(done);
       expect(scope.filterProperties).toEqual(['propA', 'propB']);
       expect(scope.debounce).toBe(false);