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

Updated toggle and moved to view inheritance

Browse Source
This commit is contained in:
Max Lynch
2013-11-08 17:57:04 -06:00
parent 6058afeb51
commit c73cc43c21
7 changed files with 74 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
dist/js/ionic.js vendored
View File

@ -3465,33 +3465,33 @@ window.ionic = {
(function(ionic) { (function(ionic) {
'use strict'; 'use strict';
ionic.views.SlideBox = function(opts) { ionic.views.SlideBox = ionic.views.View.inherit({
var _this = this; initialize: function(opts) {
var _this = this;
this.el = opts.el; this.el = opts.el;
this.pager = this.el.querySelector('.slide-box-pager'); this.pager = this.el.querySelector('.slide-box-pager');
// The drag threshold is the pixel delta that will trigger a drag (to // The drag threshold is the pixel delta that will trigger a drag (to
// avoid accidental dragging) // avoid accidental dragging)
this.dragThresholdX = opts.dragThresholdX || 10; this.dragThresholdX = opts.dragThresholdX || 10;
// The velocity threshold is a velocity of drag that indicates a "swipe". This // The velocity threshold is a velocity of drag that indicates a "swipe". This
// number is taken from hammer.js's calculations // number is taken from hammer.js's calculations
this.velocityXThreshold = opts.velocityXThreshold || 0.3; this.velocityXThreshold = opts.velocityXThreshold || 0.3;
// Initialize the slide index to the first page and update the pager // Initialize the slide index to the first page and update the pager
this.slideIndex = 0; this.slideIndex = 0;
this._updatePager(); this._updatePager();
// Listen for drag and release events // Listen for drag and release events
window.ionic.onGesture('drag', function(e) { window.ionic.onGesture('drag', function(e) {
_this._handleDrag(e); _this._handleDrag(e);
}, this.el); }, this.el);
window.ionic.onGesture('release', function(e) { window.ionic.onGesture('release', function(e) {
_this._handleEndDrag(e); _this._handleEndDrag(e);
}, this.el); }, this.el);
}; },
ionic.views.SlideBox.prototype = {
/** /**
* Tell the pager to update itself if content is added or * Tell the pager to update itself if content is added or
* removed. * removed.
@ -3780,7 +3780,7 @@ window.ionic = {
} }
}); });
} }
}; });
})(window.ionic); })(window.ionic);
; ;
@ -3989,14 +3989,13 @@ ionic.views.TabBar.prototype = {
(function(ionic) { (function(ionic) {
'use strict'; 'use strict';
ionic.views.Toggle = function(opts) { ionic.views.Toggle = ionic.views.View.inherit({
this.el = opts.el; initialize: function(opts) {
this.checkbox = opts.checkbox; this.el = opts.el;
this.handle = opts.handle; this.checkbox = opts.checkbox;
this.openPercent = -1; this.handle = opts.handle;
}; this.openPercent = -1;
},
ionic.views.Toggle.prototype = {
tap: function(e) { tap: function(e) {
this.val( !this.checkbox.checked ); this.val( !this.checkbox.checked );
@ -4047,7 +4046,7 @@ ionic.views.TabBar.prototype = {
return this.checkbox.checked; return this.checkbox.checked;
} }
}; });
})(ionic); })(ionic);
; ;

6
js/ext/angular/test/slideBox.html
View File

@ -7,9 +7,9 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <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 href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../../dist/css/ionic.css"> <link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="/vendor/angular/angular-touch.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
<script src="/vendor/angular/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
<style> <style>
.box { .box {
width: 100%; width: 100%;

2
js/ext/angular/test/tabs.html
View File

@ -3,7 +3,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Tab Bars</title> <title>Tab Bars</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css"> <link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>

9
js/ext/angular/test/toggle.html
View File

@ -13,9 +13,11 @@
<body> <body>
<content has-header="true" ng-controller="TestCtrl" class="reveal-animation"> <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
<form ng-submit="doIt()"> <form>
<toggle ng-model="data.isLovely"></toggle> <toggle ng-model="data.isLovely"></toggle>
<button type="submit" class="button button-danger">Do it</button> <button ng-click="toggle()" class="button button-danger">Toggle</button>
<button ng-click="doIt()" class="button button-warning">Print</button>
</form>
</content> </content>
<script src="../../../../dist/js/ionic.js"></script> <script src="../../../../dist/js/ionic.js"></script>
@ -28,6 +30,9 @@
$scope.doIt = function() { $scope.doIt = function() {
console.log('DOIT', $scope.data); console.log('DOIT', $scope.data);
} }
$scope.toggle = function() {
$scope.data.isLovely = !$scope.data.isLovely;
};
}); });
</script> </script>

46
js/views/slideBox.js
View File

@ -8,33 +8,33 @@
(function(ionic) { (function(ionic) {
'use strict'; 'use strict';
ionic.views.SlideBox = function(opts) { ionic.views.SlideBox = ionic.views.View.inherit({
var _this = this; initialize: function(opts) {
var _this = this;
this.el = opts.el; this.el = opts.el;
this.pager = this.el.querySelector('.slide-box-pager'); this.pager = this.el.querySelector('.slide-box-pager');
// The drag threshold is the pixel delta that will trigger a drag (to // The drag threshold is the pixel delta that will trigger a drag (to
// avoid accidental dragging) // avoid accidental dragging)
this.dragThresholdX = opts.dragThresholdX || 10; this.dragThresholdX = opts.dragThresholdX || 10;
// The velocity threshold is a velocity of drag that indicates a "swipe". This // The velocity threshold is a velocity of drag that indicates a "swipe". This
// number is taken from hammer.js's calculations // number is taken from hammer.js's calculations
this.velocityXThreshold = opts.velocityXThreshold || 0.3; this.velocityXThreshold = opts.velocityXThreshold || 0.3;
// Initialize the slide index to the first page and update the pager // Initialize the slide index to the first page and update the pager
this.slideIndex = 0; this.slideIndex = 0;
this._updatePager(); this._updatePager();
// Listen for drag and release events // Listen for drag and release events
window.ionic.onGesture('drag', function(e) { window.ionic.onGesture('drag', function(e) {
_this._handleDrag(e); _this._handleDrag(e);
}, this.el); }, this.el);
window.ionic.onGesture('release', function(e) { window.ionic.onGesture('release', function(e) {
_this._handleEndDrag(e); _this._handleEndDrag(e);
}, this.el); }, this.el);
}; },
ionic.views.SlideBox.prototype = {
/** /**
* Tell the pager to update itself if content is added or * Tell the pager to update itself if content is added or
* removed. * removed.
@ -323,6 +323,6 @@
} }
}); });
} }
}; });
})(window.ionic); })(window.ionic);

17
js/views/toggleView.js
View File

@ -1,14 +1,13 @@
(function(ionic) { (function(ionic) {
'use strict'; 'use strict';
ionic.views.Toggle = function(opts) { ionic.views.Toggle = ionic.views.View.inherit({
this.el = opts.el; initialize: function(opts) {
this.checkbox = opts.checkbox; this.el = opts.el;
this.handle = opts.handle; this.checkbox = opts.checkbox;
this.openPercent = -1; this.handle = opts.handle;
}; this.openPercent = -1;
},
ionic.views.Toggle.prototype = {
tap: function(e) { tap: function(e) {
this.val( !this.checkbox.checked ); this.val( !this.checkbox.checked );
@ -59,6 +58,6 @@
return this.checkbox.checked; return this.checkbox.checked;
} }
}; });
})(ionic); })(ionic);

2
test/slideBox.html
View File

@ -8,7 +8,7 @@
<link href="../dist/css/ionic.css" rel="stylesheet"> <link href="../dist/css/ionic.css" rel="stylesheet">
<style> <style>
#slide-box { #slide-box {
max-height: 200px; max-height: 400px;
} }
</style> </style>
</head> </head>