javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Toggle with unit test

Browse Source
This commit is contained in:
Max Lynch
2013-10-11 12:56:59 -05:00
parent 0b375d4eb9
commit 094af5fe2e
12 changed files with 137 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/css/ionic-ios7.css vendored
View File

@ -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; }

4
dist/css/ionic.css vendored
View File

@ -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; }

36
dist/js/ionic-angular.js vendored
View File

@ -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;
$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);
};
}
}
})

6
example/toderp2/index.html
View File

@ -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/ionic-angular.js"></script>
<script src="../../dist/js/ionic.js"></script>
<script src="../../dist/js/ionic-angular.js"></script>
<script src="js/app.js"></script>
<script src="js/filters.js"></script>

4
ionic.conf.js
View File

@ -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',

32
js/ext/angular/src/directive/ionicToggle.js vendored
View File

@ -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;
$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);
};
}
}
})

4
js/ext/angular/src/ionicAngular.js vendored
View File

@ -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'
]);

26
js/ext/angular/test/directive/ionicToggle.unit.js Normal file
View File

@ -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);
});
});

94
js/ext/angular/test/ionicTabBar.unit.js
View File

@ -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();
});
})

2
js/ext/angular/test/service/ionicModal.unit.js
View File

@ -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;

36
js/ext/angular/test/toggle.html Normal file
View File

@ -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>

9
scss/ionic/_listview.scss
View File

@ -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 {