diff --git a/config/build.config.js b/config/build.config.js index c30c4ff155..800d8a48ec 100644 --- a/config/build.config.js +++ b/config/build.config.js @@ -36,6 +36,7 @@ module.exports = { 'js/utils/gestures.js', 'js/utils/platform.js', 'js/utils/poly.js', + 'js/utils/tap.js', 'js/utils/utils.js', 'js/utils/keyboard.js', diff --git a/js/utils/poly.js b/js/utils/poly.js index 83f5e46f79..95b18df100 100644 --- a/js/utils/poly.js +++ b/js/utils/poly.js @@ -1,4 +1,4 @@ -(function(window, document, ionic) { +(function(document, ionic) { 'use strict'; // Ionic CSS polyfills @@ -72,222 +72,4 @@ }); } - // polyfill use to simulate native "tap" - ionic.tapElement = function(target, e) { - // simulate a normal click by running the element's click method then focus on it - - var ele = target.control || target; - - if(ele.disabled || ele.type === 'file') return; - - console.debug('tapElement', ele.tagName, ele.className); - - var c = getCoordinates(e); - - // using initMouseEvent instead of MouseEvent for our Android friends - var clickEvent = document.createEvent("MouseEvents"); - clickEvent.initMouseEvent('click', true, true, window, - 1, 0, 0, c.x, c.y, - false, false, false, false, 0, null); - - ele.dispatchEvent(clickEvent); - - if(ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA' || ele.tagName === 'SELECT') { - ele.focus(); - e.preventDefault(); - } else { - blurActive(); - } - - // remember the coordinates of this tap so if it happens again we can ignore it - // but only if the coordinates are not already being actively disabled - if( !isRecentTap(e) ) { - recordCoordinates(e); - } - - if(target.control) { - console.debug('tapElement, target.control, stop'); - return stopEvent(e); - } - }; - - function tapPolyfill(orgEvent) { - // if the source event wasn't from a touch event then don't use this polyfill - if(!orgEvent.gesture || !orgEvent.gesture.srcEvent) return; - - var e = orgEvent.gesture.srcEvent; // evaluate the actual source event, not the created event by gestures.js - var ele = e.target; - - if( isRecentTap(e) ) { - // if a tap in the same area just happened, don't continue - console.debug('tapPolyfill', 'isRecentTap', ele.tagName); - return stopEvent(e); - } - - for(var x=0; x<5; x++) { - // climb up the DOM looking to see if the tapped element is, or has a parent, of one of these - // only climb up a max of 5 parents, anything more probably isn't beneficial - if(!ele) break; - - if( ele.tagName === "INPUT" || - ele.tagName === "A" || - ele.tagName === "BUTTON" || - ele.tagName === "LABEL" || - ele.tagName === "TEXTAREA" || - ele.tagName === "SELECT" ) { - - return ionic.tapElement(ele, e); - } - ele = ele.parentElement; - } - - // they didn't tap one of the above elements - // if the currently active element is an input, and they tapped outside - // of the current input, then unset its focus (blur) so the keyboard goes away - blurActive(); - } - - function preventGhostClick(e) { - - console.debug((function(){ - // Great for debugging, and thankfully this gets removed from the build, OMG it's ugly - - if(e.target.control) { - // this is a label that has an associated input - // the native layer will send the actual event, so stop this one - console.debug('preventGhostClick', 'label'); - - } else if(isRecentTap(e)) { - // a tap has already happened at these coordinates recently, ignore this event - console.debug('preventGhostClick', 'isRecentTap', e.target.tagName); - - } else if(isScrolledSinceStart(e)) { - // this click's coordinates are different than its touchstart/mousedown, must have been scrolling - console.debug('preventGhostClick', 'isScrolledSinceStart, startCoordinates, x:' + startCoordinates.x + ' y:' + startCoordinates.y); - } - - var c = getCoordinates(e); - return 'click at x:' + c.x + ', y:' + c.y; - })()); - - - if(e.target.control || isRecentTap(e) || isScrolledSinceStart(e)) { - return stopEvent(e); - } - - // remember the coordinates of this click so if a tap or click in the - // same area quickly happened again we can ignore it - recordCoordinates(e); - } - - function isRecentTap(event) { - // loop through the tap coordinates and see if the same area has been tapped recently - var tapId, existingCoordinates, currentCoordinates; - - for(tapId in tapCoordinates) { - existingCoordinates = tapCoordinates[tapId]; - if(!currentCoordinates) currentCoordinates = getCoordinates(event); // lazy load it when needed - - if(currentCoordinates.x > existingCoordinates.x - HIT_RADIUS && - currentCoordinates.x < existingCoordinates.x + HIT_RADIUS && - currentCoordinates.y > existingCoordinates.y - HIT_RADIUS && - currentCoordinates.y < existingCoordinates.y + HIT_RADIUS) { - // the current tap coordinates are in the same area as a recent tap - return existingCoordinates; - } - } - } - - function isScrolledSinceStart(event) { - // check if this click's coordinates are different than its touchstart/mousedown - var c = getCoordinates(event); - - return (c.x > startCoordinates.x + HIT_RADIUS || - c.x < startCoordinates.x - HIT_RADIUS || - c.y > startCoordinates.y + HIT_RADIUS || - c.y < startCoordinates.y - HIT_RADIUS); - } - - function recordCoordinates(event) { - var c = getCoordinates(event); - if(c.x && c.y) { - var tapId = Date.now(); - - // only record tap coordinates if we have valid ones - tapCoordinates[tapId] = { x: c.x, y: c.y, id: tapId }; - - setTimeout(function() { - // delete the tap coordinates after X milliseconds, basically allowing - // it so a tap can happen again in the same area in the future - delete tapCoordinates[tapId]; - }, CLICK_PREVENT_DURATION); - } - } - - function getCoordinates(event) { - // This method can get coordinates for both a mouse click - // or a touch depending on the given event - var gesture = (event.gesture ? event.gesture : event); - - if(gesture) { - var touches = gesture.touches && gesture.touches.length ? gesture.touches : [gesture]; - var e = (gesture.changedTouches && gesture.changedTouches[0]) || - (gesture.originalEvent && gesture.originalEvent.changedTouches && - gesture.originalEvent.changedTouches[0]) || - touches[0].originalEvent || touches[0]; - - if(e) return { x: e.clientX, y: e.clientY }; - } - return { x:0, y:0 }; - } - - function removeClickPrevent(e) { - setTimeout(function(){ - var tap = isRecentTap(e); - if(tap) delete tapCoordinates[tap.id]; - }, REMOVE_PREVENT_DELAY); - } - - function stopEvent(e){ - e.stopPropagation(); - e.preventDefault(); - return false; - } - - function blurActive() { - var ele = document.activeElement; - if(ele && (ele.tagName === "INPUT" || - ele.tagName === "TEXTAREA" || - ele.tagName === "SELECT")) { - // using a timeout to prevent funky scrolling while a keyboard hides - setTimeout(function(){ - ele.blur(); - }, 400); - } - } - - function recordStartCoordinates(e) { - startCoordinates = getCoordinates(e); - } - - var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly - var startCoordinates = {}; // used to remember where the coordinates of the start of the tap - var CLICK_PREVENT_DURATION = 1500; // max milliseconds ghostclicks in the same area should be prevented - var REMOVE_PREVENT_DELAY = 375; // delay after a touchend/mouseup before removing the ghostclick prevent - var HIT_RADIUS = 15; - - // set global click handler and check if the event should stop or not - document.addEventListener('click', preventGhostClick, true); - - // global tap event listener polyfill for HTML elements that were "tapped" by the user - ionic.on("tap", tapPolyfill, document); - - // listeners used to remove ghostclick prevention - document.addEventListener('touchend', removeClickPrevent, false); - document.addEventListener('mouseup', removeClickPrevent, false); - - // in the case the user touched the screen, then scrolled, it shouldn't fire the click - document.addEventListener('touchstart', recordStartCoordinates, false); - document.addEventListener('mousedown', recordStartCoordinates, false); - -})(this, document, ionic); +})(document, ionic); diff --git a/js/utils/tap.js b/js/utils/tap.js new file mode 100644 index 0000000000..341e1e1b5b --- /dev/null +++ b/js/utils/tap.js @@ -0,0 +1,222 @@ +(function(window, document, ionic) { + 'use strict'; + + // polyfill use to simulate native "tap" + ionic.tapElement = function(target, e) { + // simulate a normal click by running the element's click method then focus on it + + var ele = target.control || target; + + if(ele.disabled || ele.type === 'file') return; + + console.debug('tapElement', ele.tagName, ele.className); + + var c = getCoordinates(e); + + // using initMouseEvent instead of MouseEvent for our Android friends + var clickEvent = document.createEvent("MouseEvents"); + clickEvent.initMouseEvent('click', true, true, window, + 1, 0, 0, c.x, c.y, + false, false, false, false, 0, null); + + ele.dispatchEvent(clickEvent); + + if(ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA' || ele.tagName === 'SELECT') { + ele.focus(); + e.preventDefault(); + } else { + blurActive(); + } + + // remember the coordinates of this tap so if it happens again we can ignore it + // but only if the coordinates are not already being actively disabled + if( !isRecentTap(e) ) { + recordCoordinates(e); + } + + if(target.control) { + console.debug('tapElement, target.control, stop'); + return stopEvent(e); + } + }; + + function tapPolyfill(orgEvent) { + // if the source event wasn't from a touch event then don't use this polyfill + if(!orgEvent.gesture || !orgEvent.gesture.srcEvent) return; + + var e = orgEvent.gesture.srcEvent; // evaluate the actual source event, not the created event by gestures.js + var ele = e.target; + + if( isRecentTap(e) ) { + // if a tap in the same area just happened, don't continue + console.debug('tapPolyfill', 'isRecentTap', ele.tagName); + return stopEvent(e); + } + + for(var x=0; x<5; x++) { + // climb up the DOM looking to see if the tapped element is, or has a parent, of one of these + // only climb up a max of 5 parents, anything more probably isn't beneficial + if(!ele) break; + + if( ele.tagName === "INPUT" || + ele.tagName === "A" || + ele.tagName === "BUTTON" || + ele.tagName === "LABEL" || + ele.tagName === "TEXTAREA" || + ele.tagName === "SELECT" ) { + + return ionic.tapElement(ele, e); + } + ele = ele.parentElement; + } + + // they didn't tap one of the above elements + // if the currently active element is an input, and they tapped outside + // of the current input, then unset its focus (blur) so the keyboard goes away + blurActive(); + } + + function preventGhostClick(e) { + + console.debug((function(){ + // Great for debugging, and thankfully this gets removed from the build, OMG it's ugly + + if(e.target.control) { + // this is a label that has an associated input + // the native layer will send the actual event, so stop this one + console.debug('preventGhostClick', 'label'); + + } else if(isRecentTap(e)) { + // a tap has already happened at these coordinates recently, ignore this event + console.debug('preventGhostClick', 'isRecentTap', e.target.tagName); + + } else if(isScrolledSinceStart(e)) { + // this click's coordinates are different than its touchstart/mousedown, must have been scrolling + console.debug('preventGhostClick', 'isScrolledSinceStart, startCoordinates, x:' + startCoordinates.x + ' y:' + startCoordinates.y); + } + + var c = getCoordinates(e); + return 'click at x:' + c.x + ', y:' + c.y; + })()); + + + if(e.target.control || isRecentTap(e) || isScrolledSinceStart(e)) { + return stopEvent(e); + } + + // remember the coordinates of this click so if a tap or click in the + // same area quickly happened again we can ignore it + recordCoordinates(e); + } + + function isRecentTap(event) { + // loop through the tap coordinates and see if the same area has been tapped recently + var tapId, existingCoordinates, currentCoordinates; + + for(tapId in tapCoordinates) { + existingCoordinates = tapCoordinates[tapId]; + if(!currentCoordinates) currentCoordinates = getCoordinates(event); // lazy load it when needed + + if(currentCoordinates.x > existingCoordinates.x - HIT_RADIUS && + currentCoordinates.x < existingCoordinates.x + HIT_RADIUS && + currentCoordinates.y > existingCoordinates.y - HIT_RADIUS && + currentCoordinates.y < existingCoordinates.y + HIT_RADIUS) { + // the current tap coordinates are in the same area as a recent tap + return existingCoordinates; + } + } + } + + function isScrolledSinceStart(event) { + // check if this click's coordinates are different than its touchstart/mousedown + var c = getCoordinates(event); + + return (c.x > startCoordinates.x + HIT_RADIUS || + c.x < startCoordinates.x - HIT_RADIUS || + c.y > startCoordinates.y + HIT_RADIUS || + c.y < startCoordinates.y - HIT_RADIUS); + } + + function recordCoordinates(event) { + var c = getCoordinates(event); + if(c.x && c.y) { + var tapId = Date.now(); + + // only record tap coordinates if we have valid ones + tapCoordinates[tapId] = { x: c.x, y: c.y, id: tapId }; + + setTimeout(function() { + // delete the tap coordinates after X milliseconds, basically allowing + // it so a tap can happen again in the same area in the future + delete tapCoordinates[tapId]; + }, CLICK_PREVENT_DURATION); + } + } + + function getCoordinates(event) { + // This method can get coordinates for both a mouse click + // or a touch depending on the given event + var gesture = (event.gesture ? event.gesture : event); + + if(gesture) { + var touches = gesture.touches && gesture.touches.length ? gesture.touches : [gesture]; + var e = (gesture.changedTouches && gesture.changedTouches[0]) || + (gesture.originalEvent && gesture.originalEvent.changedTouches && + gesture.originalEvent.changedTouches[0]) || + touches[0].originalEvent || touches[0]; + + if(e) return { x: e.clientX, y: e.clientY }; + } + return { x:0, y:0 }; + } + + function removeClickPrevent(e) { + setTimeout(function(){ + var tap = isRecentTap(e); + if(tap) delete tapCoordinates[tap.id]; + }, REMOVE_PREVENT_DELAY); + } + + function stopEvent(e){ + e.stopPropagation(); + e.preventDefault(); + return false; + } + + function blurActive() { + var ele = document.activeElement; + if(ele && (ele.tagName === "INPUT" || + ele.tagName === "TEXTAREA" || + ele.tagName === "SELECT")) { + // using a timeout to prevent funky scrolling while a keyboard hides + setTimeout(function(){ + ele.blur(); + }, 400); + } + } + + function recordStartCoordinates(e) { + startCoordinates = getCoordinates(e); + } + + var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly + var startCoordinates = {}; // used to remember where the coordinates of the start of the tap + var CLICK_PREVENT_DURATION = 1500; // max milliseconds ghostclicks in the same area should be prevented + var REMOVE_PREVENT_DELAY = 375; // delay after a touchend/mouseup before removing the ghostclick prevent + var HIT_RADIUS = 15; + + // set global click handler and check if the event should stop or not + document.addEventListener('click', preventGhostClick, true); + + // global tap event listener polyfill for HTML elements that were "tapped" by the user + ionic.on("tap", tapPolyfill, document); + + // listeners used to remove ghostclick prevention + document.addEventListener('touchend', removeClickPrevent, false); + document.addEventListener('mouseup', removeClickPrevent, false); + + // in the case the user touched the screen, then scrolled, it shouldn't fire the click + document.addEventListener('touchstart', recordStartCoordinates, false); + document.addEventListener('mousedown', recordStartCoordinates, false); + +})(this, document, ionic);