Toggle with unit test

dist/css/ionic-ios7.css

@@ -1096,6 +1096,10 @@ a.list-item {
   -webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
+  .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
+    float: right; }
+  .list-item-content > .toggle:last-child {
+    margin-top: -5px; }
 
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }

dist/css/ionic.css

@@ -2183,6 +2183,10 @@ a.list-item {
   -webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
+  .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
+    float: right; }
+  .list-item-content > .toggle:last-child {
+    margin-top: -5px; }
 
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }

dist/js/ionic-angular.js

@@ -6,8 +6,10 @@ angular.module('ionic.ui', ['ionic.ui.content',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
                             'ionic.ui.sideMenu',
-                            'ionic.ui.list'
+                            'ionic.ui.list',
+                            'ionic.ui.toggle'
                            ]);
+
 ;
 angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSheet'])
 
@@ -572,7 +574,7 @@ angular.module('ionic.ui.tabs', [])
   }
 });
 ;
-angular.module('ionic.ui.content', [])
+angular.module('ionic.ui.toggle', [])
 
 // The content directive is a core scrollable content area
 // that is part of many View hierarchies
@@ -580,30 +582,42 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    scope: {},
     require: '?ngModel',
     template: '<div class="toggle">' +
               ' <input type="checkbox">'+
               ' <div class="track">' +
               '   <div class="handle"></div>' +
+              ' </div>' +
               '</div>',
 
     link: function($scope, $element, $attr, ngModel) {
-      var checkbox;
+      var checkbox, track, handle;
-
-      $scope.toggle = new ionic.views.Toggle({ el: $element[0] });
 
       if(!ngModel) { return; }
 
-      checkbox = $element.children()[0];
+      checkbox = $element.children().eq(0);
+      track = $element.children().eq(1);
+      handle = track.children().eq(0);
 
-      if(!checkbox) { return; }
+      if(!checkbox.length || !track.length || !handle.length) { return; }
+
+      $scope.toggle = new ionic.views.Toggle({ 
+        el: $element[0],
+        checkbox: checkbox[0],
+        track: track[0],
+        handle: handle[0]
+      });
+
+      $element.bind('click', function(e) {
+        $scope.toggle.tap(e);
+        $scope.$apply(function() {
+          ngModel.$setViewValue(checkbox[0].checked);
+        });
+      });
 
       ngModel.$render = function() {
-        checkbox.checked = ngModel.$viewValue;
+        $scope.toggle.val(ngModel.$viewValue);
       };
-
-
     }
   }
 })

example/toderp2/index.html

@@ -6,7 +6,7 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/ionic.css">
+    <link rel="stylesheet" href="../../dist/css/ionic.css">
     <link rel="stylesheet" href="css/app.css">
     
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
@@ -19,8 +19,8 @@
     <script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
     <script src='https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js'></script>
 
-    <script src="../../dist/ionic.js"></script>
+    <script src="../../dist/js/ionic.js"></script>
-    <script src="../../dist/ionic-angular.js"></script>
+    <script src="../../dist/js/ionic-angular.js"></script>
     
     <script src="js/app.js"></script>
     <script src="js/filters.js"></script>

ionic.conf.js

@@ -22,8 +22,8 @@ module.exports = function(config) {
       'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js',
       'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js',
 
-      'dist/ionic.js',
+      'dist/js/ionic.js',
-      'dist/ionic-angular.js',
+      'dist/js/ionic-angular.js',
 
       'test/**/*.js',
 

js/ext/angular/src/directive/ionicToggle.js

@@ -1,4 +1,4 @@
-angular.module('ionic.ui.content', [])
+angular.module('ionic.ui.toggle', [])
 
 // The content directive is a core scrollable content area
 // that is part of many View hierarchies
@@ -6,30 +6,42 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    scope: {},
     require: '?ngModel',
     template: '<div class="toggle">' +
               ' <input type="checkbox">'+
               ' <div class="track">' +
               '   <div class="handle"></div>' +
+              ' </div>' +
               '</div>',
 
     link: function($scope, $element, $attr, ngModel) {
-      var checkbox;
+      var checkbox, track, handle;
-
-      $scope.toggle = new ionic.views.Toggle({ el: $element[0] });
 
       if(!ngModel) { return; }
 
-      checkbox = $element.children()[0];
+      checkbox = $element.children().eq(0);
+      track = $element.children().eq(1);
+      handle = track.children().eq(0);
 
-      if(!checkbox) { return; }
+      if(!checkbox.length || !track.length || !handle.length) { return; }
+
+      $scope.toggle = new ionic.views.Toggle({ 
+        el: $element[0],
+        checkbox: checkbox[0],
+        track: track[0],
+        handle: handle[0]
+      });
+
+      $element.bind('click', function(e) {
+        $scope.toggle.tap(e);
+        $scope.$apply(function() {
+          ngModel.$setViewValue(checkbox[0].checked);
+        });
+      });
 
       ngModel.$render = function() {
-        checkbox.checked = ngModel.$viewValue;
+        $scope.toggle.val(ngModel.$viewValue);
       };
-
-
     }
   }
 })

js/ext/angular/src/ionicAngular.js

@@ -6,5 +6,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
                             'ionic.ui.sideMenu',
-                            'ionic.ui.list'
+                            'ionic.ui.list',
+                            'ionic.ui.toggle'
                            ]);
+

js/ext/angular/test/directive/ionicToggle.unit.js

@@ -0,0 +1,26 @@
+describe('Ionic Toggle', function() {
+  var el;
+
+  beforeEach(module('ionic.ui.toggle'));
+
+  beforeEach(inject(function($compile, $rootScope) {
+    el = $compile('<toggle ng-model="data.name"></toggle>')($rootScope);
+  }));
+
+  iit('Should load', function() {
+    var toggleView = el.scope().toggle;
+    expect(toggleView).not.toEqual(null);
+    expect(toggleView.checkbox).not.toEqual(null);
+    expect(toggleView.track).not.toEqual(null);
+    expect(toggleView.handle).not.toEqual(null);
+  });
+
+  iit('Should toggle', function() {
+    var toggle = el.scope().toggle;
+    expect(toggle.val()).toBe(false);
+    el.click();
+    expect(toggle.val()).toBe(true);
+    el.click();
+    expect(toggle.val()).toBe(false);
+  });
+});

js/ext/angular/test/ionicTabBar.unit.js

@@ -1,94 +0,0 @@
-describe('Tab Bar Controller', function() {
-  var compile, element, scope, ctrl;
-
-  beforeEach(module('ionic.ui.tabbar'));
-  
-  beforeEach(inject(function($compile, $rootScope, $controller) {
-    compile = $compile;
-    scope = $rootScope;
-    ctrl = $controller('TabBarCtrl', { $scope: scope, $element: null });
-  }));
-
-  it('Select item in controller works', function() {
-    ctrl.selectTabAtIndex(1);
-    expect(ctrl.getSelectedTabIndex()).toEqual(1);
-  });
-});
-
-describe('Tab Bar directive', function() {
-  var compile, element, scope;
-
-  beforeEach(module('ionic.ui.tabbar'));
-  
-  beforeEach(inject(function($compile, $rootScope) {
-    compile = $compile;
-    scope = $rootScope;
-  }));
-
-  it('Has section wrapper class', function() {
-    element = compile('<tab-bar></tab-bar>')(scope);
-    expect(element.hasClass('view-wrapper')).toBe(true);
-  });
-});
-
-describe('Tabs directive', function() {
-  var compile, element, scope;
-  
-  beforeEach(module('ionic.ui.tabbar'));
-
-  beforeEach(inject(function($compile, $rootScope) {
-    compile = $compile;
-    scope = $rootScope;
-  }));
-  
-  it('Has tab class', function() {
-    element = compile('<tab-bar><tabs></tabs></tab-bar>')(scope);
-    scope.$digest();
-    console.log(element);
-    expect(element.find('.bar').hasClass('bar-tabs')).toBe(true);
-  });
-  
-  it('Has tab children', function() {
-    scope.tabs = [
-      { text: 'Home', icon: 'icon-home' },
-      { text: 'Fun', icon: 'icon-fun' },
-      { text: 'Beer', icon: 'icon-beer' },
-    ];
-    element = compile('<tab-bar><tabs></tabs></tab-bar>')(scope);
-    scope.$digest();
-    expect(element.find('li').length).toBe(3);
-  });
-});
-
-describe('Tab Item directive', function() {
-  var compile, element, scope, ctrl;
-  
-  beforeEach(module('ionic.ui.tabbar'));
-
-  beforeEach(inject(function($compile, $rootScope, $controller) {
-    compile = $compile;
-    scope = $rootScope;
-    //ctrl = $controller('TabBarCtrl', { $scope: scope, $element: null });
-
-    element = compile('<tab-bar><tabs>' +
-      '<tab-item active="true" text="Item" icon="icon-default"></tab-item>' + 
-      '</tabs></tab-bar>')(scope);
-    scope.$digest();
-  }));
-  
-  it('Default text works', function() {
-    expect(element.find('a').first().text()).toEqual('Item');
-  });
-
-  it('Default icon works', function() {
-    expect(element.find('i').hasClass('icon-default')).toEqual(true);
-  });
-
-  it('Click sets correct tab index', function() {
-    var a = element.find('a:eq(2)');
-    //spyOn(a, 'click');
-    spyOn(scope, 'selectTab');
-    a.click();
-    expect(scope.selectTab).toHaveBeenCalled();
-  });
-})

js/ext/angular/test/service/ionicModal.unit.js

@@ -18,7 +18,7 @@ describe('Ionic Modal', function() {
     expect(modalInstance.el.classList.contains('active')).toBe(true);
   });
 
-  iit('Should show for dynamic template', function() {
+  it('Should show for dynamic template', function() {
     var template = '<div class="modal"></div>';
 
     var done = false;

js/ext/angular/test/toggle.html

@@ -0,0 +1,36 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Toggle</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+  </head>
+  <body>
+
+    <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
+      <form ng-submit="doIt()">
+        <toggle ng-model="data.isLovely"></toggle>
+        <button type="submit" class="button button-danger">Do it</button>
+    </content>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('navTest', ['ionic.ui.toggle', 'ngAnimate', 'ngTouch'])
+
+      .controller('TestCtrl', function($scope) {
+        $scope.data = {};
+        $scope.doIt = function() {
+          console.log('DOIT', $scope.data);
+        }
+      });
+
+    </script>
+  </body>
+</html>
+

scss/ionic/_listview.scss

@@ -125,6 +125,15 @@ a.list-item {
   > i:last-child {
     float: right;
   }
+
+  // Make every last form element go to the right of the item
+
+  > .toggle:last-child, input:last-child, > button:last-child {
+    float: right;
+  }
+  > .toggle:last-child {
+    margin-top: -5px;
+  }
 }
 
 .list-item-sliding {