Addresses Issue #5, but having issues on mobile due to double-firing events. i

See related: angular/angular.js#6251

Author: infomofo

app/index.html

@@ -59,6 +59,7 @@
 <script src="scripts/controllers/global.js"></script>
 <script src="scripts/controllers/main.js"></script>
 <script src="scripts/controllers/about.js"></script>
+<script src="scripts/controllers/search.js"></script>
 <!-- endbuild -->
 </body>
 </html>

app/scripts/app.js

@@ -51,6 +51,10 @@ app
       .when('/tabs', {
         templateUrl: 'views/tabs.html'
       })
+      .when('/search/:query', {
+        templateUrl: 'views/search.html',
+        controller: 'SearchCtrl'
+      })
       .otherwise({
         redirectTo: '/'
       });

app/scripts/controllers/global.js

@@ -10,7 +10,10 @@
 angular.module('yoAngularCordovaApp')
   .controller('GlobalCtrl', function ($scope, $rootScope, $mdSidenav, $mdToast){
 
-  $scope.searchActive = false;
+  $scope.searchModel = {
+    searchActive: false,
+    searchQuery: null
+  };
 
   $scope.clickNav = function() {
     // Publish an event that can be handled by directives
@@ -48,10 +51,19 @@ angular.module('yoAngularCordovaApp')
       });
   };
 
+  $scope.executeSearch = function() {
+    var path = '/search/' + $scope.searchModel.searchQuery;
+    console.debug('go to path ' + path);
+    $scope.disableSearch();
+    // lose focus on search bar
+    $rootScope.go(path);
+  };
+
   $scope.disableSearch = function() {
     //var searchBox = angular.element('#searchBox');
     //searchBox.blur();
-    $scope.searchActive = false;
+    $scope.searchModel.searchActive = false;
+    $scope.searchModel.searchQuery = null;
   };
 
   /**
@@ -93,7 +105,15 @@ angular.module('yoAngularCordovaApp')
   $scope.showSearch = function() {
     //var searchBox = angular.element('#searchBox');
     //searchBox.focus();
-    $scope.searchActive = true;
+    $scope.searchModel.searchActive = true;
+  };
+
+  $scope.toggleSearch = function() {
+    if ($scope.searchModel.searchActive) {
+      $scope.disableSearch();
+    } else {
+      $scope.showSearch();
+    }
   };
 
   /**

app/scripts/controllers/search.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name yoAngularCordovaApp.controller:SearchCtrl
+ * @description
+ * # SearchCtrl
+ * Controller of the yoAngularCordovaApp
+ */
+angular.module('yoAngularCordovaApp')
+  .controller('SearchCtrl', function ($scope, $routeParams) {
+
+    $scope.searchModel = {
+      query: null
+    };
+
+    $scope.searchModel.query = $routeParams.query;
+
+  });

app/scripts/directives/scrolltotoponnavclick.js

@@ -13,7 +13,7 @@ angular.module('yoAngularCordovaApp')
       link: function (scope, element) {
         $rootScope.$on('NavClicked', function () {
           $timeout(function () {
-            console.debug('NavClicked detected on ' + element[0].outerHTML + ' has scrollTop ' + element[0].scrollTop);
+            //console.debug('NavClicked detected on ' + element[0].outerHTML + ' has scrollTop ' + element[0].scrollTop);
             element[0].scrollTop = 0;
             //$window.scrollTo(0,0);
           });

app/styles/main.css

@@ -1,3 +1,31 @@
 .noscroll {
   overflow: hidden;
 }
+
+.toolbar-item {
+  -webkit-transition: all linear 0.5s;
+  transition: all linear 0.5s;
+  max-width:100%;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.toolbar-item.ng-hide {
+  max-width:0;
+}
+
+.toolbar-item.ng-enter, .toolbar-item.ng-leave {
+  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+}
+
+.toolbar-item.ng-enter,
+.toolbar-item.ng-leave.ng-leave-active {
+  max-width:0;
+}
+
+.toolbar-item.ng-leave,
+.toolbar-item.ng-enter.ng-enter-active {
+  opacity:1;
+  max-width:100%;
+}

app/views/search.html

@@ -0,0 +1,2 @@
+<p>This is the search view.</p>
+<p>{{searchModel.query}}</p>

app/views/toolbar.html

@@ -1,10 +1,24 @@
 <md-toolbar class="md-primary" md-scroll-shrink="false" layout-align="center center" ng-click="clickNav()">
-  <h2 class="md-toolbar-tools" layout="row" layout-align="start end">
-    <div layout-align="center center">
+  <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
+    <div layout-align="center center" ng-if="!searchModel.searchActive" class="toolbar-item">
       <md-button ng-click="openSidenav()" class="md-accent" hide-gt-md aria-label="toggles the sidenav">
         <i class="fa fa-2x fa-align-justify"></i>
       </md-button>
+      <span>Cordova Angular MD App</span>
     </div>
-    <span> Toolbar</span>
-  </h2>
+    <md-button ng-click="toggleSearch()" class="md-accent" aria-label="toggles the search field">
+      <i class="fa fa-2x fa-search"></i>
+    </md-button>
+    <div class="toolbar-item" ng-if="searchModel.searchActive" layout-fill flex layout="row" md-no-ink>
+      <form ng-submit="executeSearch()" layout-fill flex>
+        <md-input-container flex class="md-accent">
+          <label>Search term</label>
+          <input id="searchBox" autofocus type="search" ng-model="searchModel.searchQuery" class="md-accent"/>
+        </md-input-container>
+      </form>
+      <md-button ng-show="searchModel.searchQuery" class="md-accent" ng-click="searchModel.searchQuery=null">
+        <i class="fa fa-2x fa-times"></i>
+      </md-button>
+    </div>
+  </div>
 </md-toolbar>

test/spec/controllers/global.js

@@ -1,6 +1,6 @@
 'use strict';
 
-describe('Controller: MainCtrl', function () {
+describe('Controller: GlobalCtrl', function () {
 
   // load the controller's module
   beforeEach(module('yoAngularCordovaApp'));
@@ -17,10 +17,10 @@ describe('Controller: MainCtrl', function () {
   }));
 
   it('should attach a list of awesomeThings to the scope', function () {
-    expect(scope.searchActive).toBe(false);
+    expect(scope.searchModel.searchActive).toBe(false);
     scope.showSearch();
-    expect(scope.searchActive).toBe(true);
+    expect(scope.searchModel.searchActive).toBe(true);
     scope.disableSearch();
-    expect(scope.searchActive).toBe(false);
+    expect(scope.searchModel.searchActive).toBe(false);
   });
 });

test/spec/controllers/main.js

@@ -16,7 +16,4 @@ describe('Controller: MainCtrl', function () {
     });
   }));
 
-  it('should attach a list of awesomeThings to the scope', function () {
-    expect(scope.awesomeThings.length).toBe(3);
-  });
 });

test/spec/controllers/search.js

@@ -0,0 +1,19 @@
+'use strict';
+
+describe('Controller: SearchCtrl', function () {
+
+  // load the controller's module
+  beforeEach(module('yoAngularCordovaApp'));
+
+  var SearchCtrl,
+    scope;
+
+  // Initialize the controller and a mock scope
+  beforeEach(inject(function ($controller, $rootScope) {
+    scope = $rootScope.$new();
+    SearchCtrl = $controller('SearchCtrl', {
+      $scope: scope
+    });
+  }));
+
+});