diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 56bae7ba8b..a7732791bb 100644
--- a/dist/css/ionic-ios7.css
+++ b/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; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 8fcf065fb4..6b1b7e3d59 100644
--- a/dist/css/ionic.css
+++ b/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; }
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index a125a1f470..c02714da2f 100644
--- a/dist/js/ionic-angular.js
+++ b/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: '
',
link: function($scope, $element, $attr, ngModel) {
- var checkbox;
-
- $scope.toggle = new ionic.views.Toggle({ el: $element[0] });
+ var checkbox, track, handle;
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);
};
-
-
}
}
})
diff --git a/example/toderp2/index.html b/example/toderp2/index.html
index a6d8388a1d..fc6ee8a1ce 100644
--- a/example/toderp2/index.html
+++ b/example/toderp2/index.html
@@ -6,7 +6,7 @@
-
+
@@ -19,8 +19,8 @@
-
-
+
+
diff --git a/ionic.conf.js b/ionic.conf.js
index e80b880401..5c6911ab3b 100644
--- a/ionic.conf.js
+++ b/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/ionic-angular.js',
+ 'dist/js/ionic.js',
+ 'dist/js/ionic-angular.js',
'test/**/*.js',
diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js
index 1fc093279c..165a7fc40d 100644
--- a/js/ext/angular/src/directive/ionicToggle.js
+++ b/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: '',
link: function($scope, $element, $attr, ngModel) {
- var checkbox;
-
- $scope.toggle = new ionic.views.Toggle({ el: $element[0] });
+ var checkbox, track, handle;
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);
};
-
-
}
}
})
diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js
index b9e9f1b02e..553e67229d 100644
--- a/js/ext/angular/src/ionicAngular.js
+++ b/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'
]);
+
diff --git a/js/ext/angular/test/directive/ionicToggle.unit.js b/js/ext/angular/test/directive/ionicToggle.unit.js
new file mode 100644
index 0000000000..d63d4b9ecd
--- /dev/null
+++ b/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('')($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);
+ });
+});
diff --git a/js/ext/angular/test/ionicTabBar.unit.js b/js/ext/angular/test/ionicTabBar.unit.js
deleted file mode 100644
index 96766c0318..0000000000
--- a/js/ext/angular/test/ionicTabBar.unit.js
+++ /dev/null
@@ -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('')(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('')(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('')(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('' +
- '' +
- '')(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();
- });
-})
diff --git a/js/ext/angular/test/service/ionicModal.unit.js b/js/ext/angular/test/service/ionicModal.unit.js
index 438e6020fd..0f96ee7b54 100644
--- a/js/ext/angular/test/service/ionicModal.unit.js
+++ b/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 = '';
var done = false;
diff --git a/js/ext/angular/test/toggle.html b/js/ext/angular/test/toggle.html
new file mode 100644
index 0000000000..08103b4107
--- /dev/null
+++ b/js/ext/angular/test/toggle.html
@@ -0,0 +1,36 @@
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index fcb402d00c..b2433fdd0d 100644
--- a/scss/ionic/_listview.scss
+++ b/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 {