Skip to content

Commit 00f6b17

Browse files
author
Adam Bradley
committed
toggle/checkbox tap improvements
1 parent 3996ce1 commit 00f6b17

File tree

13 files changed

+75
-54
lines changed

13 files changed

+75
-54
lines changed

‎dist/css/ionic.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6440,6 +6440,9 @@ a.button {
64406440
.disable-pointer-events {
64416441
pointer-events: none; }
64426442

6443+
.enable-pointer-events {
6444+
pointer-events: auto; }
6445+
64436446
.block {
64446447
display: block;
64456448
clear: both; }

‎dist/css/ionic.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/ionic-angular.js‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1259,11 +1259,11 @@ angular.module('ionic.ui.checkbox', [])
12591259
},
12601260
transclude: true,
12611261

1262-
template: '<div class="item item-checkbox">' +
1263-
'<label class="checkbox">' +
1262+
template: '<div class="item item-checkbox disable-pointer-events">' +
1263+
'<label class="checkbox enable-pointer-events">' +
12641264
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
12651265
'</label>' +
1266-
'<div class="item-content disable-pointer-events" ng-transclude></div>' +
1266+
'<div class="item-content" ng-transclude></div>' +
12671267
'</div>',
12681268

12691269
compile: function(element, attr) {
@@ -2526,12 +2526,12 @@ angular.module('ionic.ui.toggle', [])
25262526
ngChange: '&'
25272527
},
25282528
transclude: true,
2529-
template: '<div class="item item-toggle">' +
2530-
'<div class="disable-pointer-events" ng-transclude></div>' +
2531-
'<label class="toggle">' +
2529+
template: '<div class="item item-toggle disable-pointer-events">' +
2530+
'<div ng-transclude></div>' +
2531+
'<label class="toggle enable-pointer-events">' +
25322532
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
25332533
'<div class="track disable-pointer-events">' +
2534-
'<div class="handle disable-pointer-events"></div>' +
2534+
'<div class="handle"></div>' +
25352535
'</div>' +
25362536
'</label>' +
25372537
'</div>',
@@ -2590,22 +2590,16 @@ angular.module('ionic.ui.touch', [])
25902590

25912591
.directive('ngClick', ['$parse', function($parse) {
25922592

2593-
function onTap(e) {
2594-
// wire this up to Ionic's tap/click simulation
2595-
ionic.clickElement(e.target, e);
2596-
}
2597-
25982593
// Actual linking function.
25992594
return function(scope, element, attr) {
26002595

26012596
var clickHandler = $parse(attr.ngClick);
26022597

2603-
element.on('click', function(event) {
2598+
function onTap(e) {
26042599
scope.$apply(function() {
2605-
clickHandler(scope, {$event: (event)});
2606-
});
2607-
});
2608-
2600+
clickHandler(scope, {$event: (e)});
2601+
});
2602+
}
26092603
ionic.on('tap', onTap, element[0]);
26102604

26112605
// Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click

‎dist/js/ionic-angular.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/ionic.js‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,23 @@ window.ionic = {
134134
;
135135
(function(ionic) {
136136

137+
var readyCallbacks = [],
138+
domReady = function() {
139+
for(var x=0; x<readyCallbacks.length; x++) {
140+
window.rAF(readyCallbacks[x]);
141+
}
142+
readyCallbacks = [];
143+
document.removeEventListener('DOMContentLoaded', domReady);
144+
};
145+
document.addEventListener('DOMContentLoaded', domReady);
146+
137147
ionic.DomUtil = {
138148

139149
ready: function(cb) {
140150
if(document.readyState === "complete") {
141-
setTimeout(cb, 1);
151+
window.rAF(cb);
142152
} else {
143-
document.addEventListener('DOMContentLoaded', cb);
153+
readyCallbacks.push(cb);
144154
}
145155
},
146156

@@ -1949,7 +1959,7 @@ window.ionic = {
19491959
window.webkitRequestAnimationFrame ||
19501960
window.mozRequestAnimationFrame ||
19511961
function( callback ){
1952-
window.setTimeout(callback, 1000 / 60);
1962+
window.setTimeout(callback, 16);
19531963
};
19541964
})();
19551965

@@ -1970,7 +1980,7 @@ window.ionic = {
19701980
})();
19711981

19721982
// polyfill use to simulate native "tap"
1973-
ionic.clickElement = function(ele, e) {
1983+
ionic.tapElement = function(ele, e) {
19741984
// simulate a normal click by running the element's click method then focus on it
19751985
if(ele.disabled) return;
19761986

@@ -2023,12 +2033,12 @@ window.ionic = {
20232033
ele.tagName === "TEXTAREA" ||
20242034
ele.tagName === "SELECT" ) {
20252035

2026-
return ionic.clickElement(ele, e);
2036+
return ionic.tapElement(ele, e);
20272037

20282038
} else if( ele.tagName === "LABEL" ) {
20292039
// check if the tapped label has an input associated to it
20302040
if(ele.control) {
2031-
return ionic.clickElement(ele.control, e);
2041+
return ionic.tapElement(ele.control, e);
20322042
}
20332043
}
20342044
ele = ele.parentElement;
@@ -2142,7 +2152,7 @@ window.ionic = {
21422152
}
21432153

21442154
var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly
2145-
var CLICK_PREVENT_DURATION = 400; // amount of milliseconds to check for ghostclicks
2155+
var CLICK_PREVENT_DURATION = 450; // amount of milliseconds to check for ghostclicks
21462156

21472157
// set global click handler and check if the event should stop or not
21482158
document.addEventListener('click', preventGhostClick, true);

‎dist/js/ionic.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/ext/angular/src/directive/ionicCheckbox.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ angular.module('ionic.ui.checkbox', [])
1717
},
1818
transclude: true,
1919

20-
template: '<div class="item item-checkbox">' +
21-
'<label class="checkbox">' +
20+
template: '<div class="item item-checkbox disable-pointer-events">' +
21+
'<label class="checkbox enable-pointer-events">' +
2222
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
2323
'</label>' +
24-
'<div class="item-content disable-pointer-events" ng-transclude></div>' +
24+
'<div class="item-content" ng-transclude></div>' +
2525
'</div>',
2626

2727
compile: function(element, attr) {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ angular.module('ionic.ui.toggle', [])
1818
ngChange: '&'
1919
},
2020
transclude: true,
21-
template: '<div class="item item-toggle">' +
22-
'<div class="disable-pointer-events" ng-transclude></div>' +
23-
'<label class="toggle">' +
21+
template: '<div class="item item-toggle disable-pointer-events">' +
22+
'<div ng-transclude></div>' +
23+
'<label class="toggle enable-pointer-events">' +
2424
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
2525
'<div class="track disable-pointer-events">' +
26-
'<div class="handle disable-pointer-events"></div>' +
26+
'<div class="handle"></div>' +
2727
'</div>' +
2828
'</label>' +
2929
'</div>',

‎js/ext/angular/src/directive/ionicTouch.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,16 @@ angular.module('ionic.ui.touch', [])
1717

1818
.directive('ngClick', ['$parse', function($parse) {
1919

20-
function onTap(e) {
21-
// wire this up to Ionic's tap/click simulation
22-
ionic.clickElement(e.target, e);
23-
}
24-
2520
// Actual linking function.
2621
return function(scope, element, attr) {
2722

2823
var clickHandler = $parse(attr.ngClick);
2924

30-
element.on('click', function(event) {
25+
function onTap(e) {
3126
scope.$apply(function() {
32-
clickHandler(scope, {$event: (event)});
33-
});
34-
});
35-
27+
clickHandler(scope, {$event: (e)});
28+
});
29+
}
3630
ionic.on('tap', onTap, element[0]);
3731

3832
// Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click

‎js/ext/angular/test/clickTests.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="../../../../dist/js/angular-ui/angular-ui-router.min.js"></script>
1616
<script src="../../../../dist/js/ionic-angular.js"></script>
1717
<style>
18-
.item-content {
18+
.item-content, .item {
1919
padding: 8px !important;
2020
}
2121
.list {
@@ -33,6 +33,12 @@
3333
z-index: 1000;
3434
pointer-events: none;
3535
}
36+
.touch-pointer {
37+
background: #CCFFFF;
38+
}
39+
.mouse-pointer {
40+
background: #FFFFCC;
41+
}
3642
</style>
3743
</head>
3844

@@ -47,7 +53,7 @@
4753

4854
<item ng-repeat="item in menuItems" item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</item>
4955

50-
<toggle>Toggle with no ng-click</toggle>
56+
<checkbox>checkbox with no ng-click</checkbox>
5157

5258
<toggle ng-click="{{ stringClick }}">Toggle with ng-click="{{ stringClick }]"</toggle>
5359

0 commit comments

Comments
 (0)