javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

toggle/checkbox tap improvements

Browse Source
This commit is contained in:
Adam Bradley
2014-02-01 00:15:10 -06:00
parent 3996ce1fa2
commit 00f6b17b7f
13 changed files with 75 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dist/css/ionic.css vendored
View File

@@ -6440,6 +6440,9 @@ a.button {
.disable-pointer-events {
pointer-events: none; }
.enable-pointer-events {
pointer-events: auto; }
.block {
display: block;
clear: both; }

2
dist/css/ionic.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -1259,11 +1259,11 @@ angular.module('ionic.ui.checkbox', [])
},
transclude: true,
template: '<div class="item item-checkbox">' +
'<label class="checkbox">' +
template: '<div class="item item-checkbox disable-pointer-events">' +
'<label class="checkbox enable-pointer-events">' +
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
'</label>' +
'<div class="item-content disable-pointer-events" ng-transclude></div>' +
'<div class="item-content" ng-transclude></div>' +
'</div>',
compile: function(element, attr) {
@@ -2526,12 +2526,12 @@ angular.module('ionic.ui.toggle', [])
ngChange: '&'
},
transclude: true,
template: '<div class="item item-toggle">' +
'<div class="disable-pointer-events" ng-transclude></div>' +
'<label class="toggle">' +
template: '<div class="item item-toggle disable-pointer-events">' +
'<div ng-transclude></div>' +
'<label class="toggle enable-pointer-events">' +
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
'<div class="track disable-pointer-events">' +
'<div class="handle disable-pointer-events"></div>' +
'<div class="handle"></div>' +
'</div>' +
'</label>' +
'</div>',
@@ -2590,22 +2590,16 @@ angular.module('ionic.ui.touch', [])
.directive('ngClick', ['$parse', function($parse) {
function onTap(e) {
// wire this up to Ionic's tap/click simulation
ionic.clickElement(e.target, e);
}
// Actual linking function.
return function(scope, element, attr) {
var clickHandler = $parse(attr.ngClick);
element.on('click', function(event) {
function onTap(e) {
scope.$apply(function() {
clickHandler(scope, {$event: (event)});
});
});
clickHandler(scope, {$event: (e)});
});
}
ionic.on('tap', onTap, element[0]);
// Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click

4
dist/js/ionic-angular.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
dist/js/ionic.js vendored
View File

@@ -134,13 +134,23 @@ window.ionic = {
;
(function(ionic) {
var readyCallbacks = [],
domReady = function() {
for(var x=0; x<readyCallbacks.length; x++) {
window.rAF(readyCallbacks[x]);
}
readyCallbacks = [];
document.removeEventListener('DOMContentLoaded', domReady);
};
document.addEventListener('DOMContentLoaded', domReady);
ionic.DomUtil = {
ready: function(cb) {
if(document.readyState === "complete") {
setTimeout(cb, 1);
window.rAF(cb);
} else {
document.addEventListener('DOMContentLoaded', cb);
readyCallbacks.push(cb);
}
},
@@ -1949,7 +1959,7 @@ window.ionic = {
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
window.setTimeout(callback, 16);
};
})();
@@ -1970,7 +1980,7 @@ window.ionic = {
})();
// polyfill use to simulate native "tap"
ionic.clickElement = function(ele, e) {
ionic.tapElement = function(ele, e) {
// simulate a normal click by running the element's click method then focus on it
if(ele.disabled) return;
@@ -2023,12 +2033,12 @@ window.ionic = {
ele.tagName === "TEXTAREA" ||
ele.tagName === "SELECT" ) {
return ionic.clickElement(ele, e);
return ionic.tapElement(ele, e);
} else if( ele.tagName === "LABEL" ) {
// check if the tapped label has an input associated to it
if(ele.control) {
return ionic.clickElement(ele.control, e);
return ionic.tapElement(ele.control, e);
}
}
ele = ele.parentElement;
@@ -2142,7 +2152,7 @@ window.ionic = {
}
var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly
var CLICK_PREVENT_DURATION = 400; // amount of milliseconds to check for ghostclicks
var CLICK_PREVENT_DURATION = 450; // amount of milliseconds to check for ghostclicks
// set global click handler and check if the event should stop or not
document.addEventListener('click', preventGhostClick, true);

2
dist/js/ionic.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
js/ext/angular/src/directive/ionicCheckbox.js vendored
View File

@@ -17,11 +17,11 @@ angular.module('ionic.ui.checkbox', [])
},
transclude: true,
template: '<div class="item item-checkbox">' +
'<label class="checkbox">' +
template: '<div class="item item-checkbox disable-pointer-events">' +
'<label class="checkbox enable-pointer-events">' +
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
'</label>' +
'<div class="item-content disable-pointer-events" ng-transclude></div>' +
'<div class="item-content" ng-transclude></div>' +
'</div>',
compile: function(element, attr) {

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

@@ -18,12 +18,12 @@ angular.module('ionic.ui.toggle', [])
ngChange: '&'
},
transclude: true,
template: '<div class="item item-toggle">' +
'<div class="disable-pointer-events" ng-transclude></div>' +
'<label class="toggle">' +
template: '<div class="item item-toggle disable-pointer-events">' +
'<div ng-transclude></div>' +
'<label class="toggle enable-pointer-events">' +
'<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
'<div class="track disable-pointer-events">' +
'<div class="handle disable-pointer-events"></div>' +
'<div class="handle"></div>' +
'</div>' +
'</label>' +
'</div>',

14
js/ext/angular/src/directive/ionicTouch.js vendored
View File

@@ -17,22 +17,16 @@ angular.module('ionic.ui.touch', [])
.directive('ngClick', ['$parse', function($parse) {
function onTap(e) {
// wire this up to Ionic's tap/click simulation
ionic.clickElement(e.target, e);
}
// Actual linking function.
return function(scope, element, attr) {
var clickHandler = $parse(attr.ngClick);
element.on('click', function(event) {
function onTap(e) {
scope.$apply(function() {
clickHandler(scope, {$event: (event)});
});
});
clickHandler(scope, {$event: (e)});
});
}
ionic.on('tap', onTap, element[0]);
// Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click

10
js/ext/angular/test/clickTests.html
View File

@@ -15,7 +15,7 @@
<script src="../../../../dist/js/angular-ui/angular-ui-router.min.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.item-content {
.item-content, .item {
padding: 8px !important;
}
.list {
@@ -33,6 +33,12 @@
z-index: 1000;
pointer-events: none;
}
.touch-pointer {
background: #CCFFFF;
}
.mouse-pointer {
background: #FFFFCC;
}
</style>
</head>
@@ -47,7 +53,7 @@
<item ng-repeat="item in menuItems" item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</item>
<toggle>Toggle with no ng-click</toggle>
<checkbox>checkbox with no ng-click</checkbox>
<toggle ng-click="{{ stringClick }}">Toggle with ng-click="{{ stringClick }]"</toggle>

14
js/utils/dom.js
View File

@@ -1,12 +1,22 @@
(function(ionic) {
var readyCallbacks = [],
domReady = function() {
for(var x=0; x<readyCallbacks.length; x++) {
window.rAF(readyCallbacks[x]);
}
readyCallbacks = [];
document.removeEventListener('DOMContentLoaded', domReady);
};
document.addEventListener('DOMContentLoaded', domReady);
ionic.DomUtil = {
ready: function(cb) {
if(document.readyState === "complete") {
setTimeout(cb, 1);
window.rAF(cb);
} else {
document.addEventListener('DOMContentLoaded', cb);
readyCallbacks.push(cb);
}
},

10
js/utils/poly.js
View File

@@ -8,7 +8,7 @@
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
window.setTimeout(callback, 16);
};
})();
@@ -29,7 +29,7 @@
})();
// polyfill use to simulate native "tap"
ionic.clickElement = function(ele, e) {
ionic.tapElement = function(ele, e) {
// simulate a normal click by running the element's click method then focus on it
if(ele.disabled) return;
@@ -82,12 +82,12 @@
ele.tagName === "TEXTAREA" ||
ele.tagName === "SELECT" ) {
return ionic.clickElement(ele, e);
return ionic.tapElement(ele, e);
} else if( ele.tagName === "LABEL" ) {
// check if the tapped label has an input associated to it
if(ele.control) {
return ionic.clickElement(ele.control, e);
return ionic.tapElement(ele.control, e);
}
}
ele = ele.parentElement;
@@ -201,7 +201,7 @@
}
var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly
var CLICK_PREVENT_DURATION = 400; // amount of milliseconds to check for ghostclicks
var CLICK_PREVENT_DURATION = 450; // amount of milliseconds to check for ghostclicks
// set global click handler and check if the event should stop or not
document.addEventListener('click', preventGhostClick, true);

4
scss/_util.scss
View File

@@ -23,6 +23,10 @@
pointer-events: none;
}
.enable-pointer-events {
pointer-events: auto;
}
.block {
display: block;
clear: both;