diff options
Diffstat (limited to 'www/lib/angular-carousel/lib/angular-mobile.js')
| -rw-r--r-- | www/lib/angular-carousel/lib/angular-mobile.js | 470 |
1 files changed, 0 insertions, 470 deletions
diff --git a/www/lib/angular-carousel/lib/angular-mobile.js b/www/lib/angular-carousel/lib/angular-mobile.js deleted file mode 100644 index e2c56b55..00000000 --- a/www/lib/angular-carousel/lib/angular-mobile.js +++ /dev/null @@ -1,470 +0,0 @@ -/** - * @license AngularJS v1.1.5-3814986 - * (c) 2010-2012 Google, Inc. http://angularjs.org - * License: MIT - */ -(function(window, angular, undefined) { -'use strict'; - -/** - * @ngdoc overview - * @name ngMobile - * @description - * Touch events and other mobile helpers. - * Based on jQuery Mobile touch event handling (jquerymobile.com) - */ - -// define ngMobile module -var ngMobile = angular.module('ngMobile', []); - -/** - * A service for abstracting swipe behavior. Deliberately internal; it is only intended for use in - * ngSwipeLeft/Right and ngCarousel. - * - * Determining whether the user is swiping or scrolling, and handling both mouse and touch events, - * make writing swipe code challenging. This service allows setting callbacks on the start, - * movement and completion of a swipe gesture, without worrying about the complications. - * - */ - -ngMobile.factory('$swipe', [function() { - // The total distance in any direction before we make the call on swipe vs. scroll. - var MOVE_BUFFER_RADIUS = 10; - - // Absolute total movement, used to control swipe vs. scroll. - var totalX, totalY; - // Coordinates of the start position. - var startCoords; - // Last event's position. - var lastPos; - // Whether a swipe is active. - var active = false; - - function getCoordinates(event) { - var touches = event.touches && event.touches.length ? event.touches : [event]; - var e = (event.changedTouches && event.changedTouches[0]) || - (event.originalEvent && event.originalEvent.changedTouches && - event.originalEvent.changedTouches[0]) || - touches[0].originalEvent || touches[0]; - - return { - x: e.clientX, - y: e.clientY - }; - } - - return { - bind: function(element, events) { - element.bind('touchstart mousedown', function(event) { - startCoords = getCoordinates(event); - active = true; - totalX = 0; - totalY = 0; - lastPos = startCoords; - events['start'] && events['start'](startCoords); - }); - - element.bind('touchcancel', function(event) { - active = false; - events['cancel'] && events['cancel'](); - }); - - element.bind('touchmove mousemove', function(event) { - if (!active) return; - - // Android will send a touchcancel if it thinks we're starting to scroll. - // So when the total distance (+ or - or both) exceeds 10px in either direction, - // we either: - // - On totalX > totalY, we send preventDefault() and treat this as a swipe. - // - On totalY > totalX, we let the browser handle it as a scroll. - - if (!startCoords) return; - var coords = getCoordinates(event); - - totalX += Math.abs(coords.x - lastPos.x); - totalY += Math.abs(coords.y - lastPos.y); - - lastPos = coords; - - if (totalX < MOVE_BUFFER_RADIUS && totalY < MOVE_BUFFER_RADIUS) { - return; - } - - // One of totalX or totalY has exceeded the buffer, so decide on swipe vs. scroll. - if (totalY > totalX) { - // Allow native scrolling to take over. - active = false; - return; - } else { - // Prevent the browser from scrolling. - event.preventDefault(); - - events['move'] && events['move'](coords); - } - }); - - element.bind('touchend mouseup', function(event) { - if (!active) return; - active = false; - events['end'] && events['end'](getCoordinates(event)); - }); - } - }; -}]); - -/** - * @ngdoc directive - * @name ngMobile.directive:ngTap - * - * @description - * Specify custom behavior when element is tapped on a touchscreen device. - * A tap is a brief, down-and-up touch without much motion. - * - * @element ANY - * @param {expression} ngClick {@link guide/expression Expression} to evaluate - * upon tap. (Event object is available as `$event`) - * - * @example - <doc:example> - <doc:source> - <button ng-tap="count = count + 1" ng-init="count=0"> - Increment - </button> - count: {{ count }} - </doc:source> - </doc:example> - */ - -ngMobile.config(['$provide', function($provide) { - $provide.decorator('ngClickDirective', ['$delegate', function($delegate) { - // drop the default ngClick directive - $delegate.shift(); - return $delegate; - }]); -}]); - -ngMobile.directive('ngClick', ['$parse', '$timeout', '$rootElement', - function($parse, $timeout, $rootElement) { - var TAP_DURATION = 750; // Shorter than 750ms is a tap, longer is a taphold or drag. - var MOVE_TOLERANCE = 12; // 12px seems to work in most mobile browsers. - var PREVENT_DURATION = 2500; // 2.5 seconds maximum from preventGhostClick call to click - var CLICKBUSTER_THRESHOLD = 25; // 25 pixels in any dimension is the limit for busting clicks. - var lastPreventedTime; - var touchCoordinates; - - - // TAP EVENTS AND GHOST CLICKS - // - // Why tap events? - // Mobile browsers detect a tap, then wait a moment (usually ~300ms) to see if you're - // double-tapping, and then fire a click event. - // - // This delay sucks and makes mobile apps feel unresponsive. - // So we detect touchstart, touchmove, touchcancel and touchend ourselves and determine when - // the user has tapped on something. - // - // What happens when the browser then generates a click event? - // The browser, of course, also detects the tap and fires a click after a delay. This results in - // tapping/clicking twice. So we do "clickbusting" to prevent it. - // - // How does it work? - // We attach global touchstart and click handlers, that run during the capture (early) phase. - // So the sequence for a tap is: - // - global touchstart: Sets an "allowable region" at the point touched. - // - element's touchstart: Starts a touch - // (- touchmove or touchcancel ends the touch, no click follows) - // - element's touchend: Determines if the tap is valid (didn't move too far away, didn't hold - // too long) and fires the user's tap handler. The touchend also calls preventGhostClick(). - // - preventGhostClick() removes the allowable region the global touchstart created. - // - The browser generates a click event. - // - The global click handler catches the click, and checks whether it was in an allowable region. - // - If preventGhostClick was called, the region will have been removed, the click is busted. - // - If the region is still there, the click proceeds normally. Therefore clicks on links and - // other elements without ngTap on them work normally. - // - // This is an ugly, terrible hack! - // Yeah, tell me about it. The alternatives are using the slow click events, or making our users - // deal with the ghost clicks, so I consider this the least of evils. Fortunately Angular - // encapsulates this ugly logic away from the user. - // - // Why not just put click handlers on the element? - // We do that too, just to be sure. The problem is that the tap event might have caused the DOM - // to change, so that the click fires in the same position but something else is there now. So - // the handlers are global and care only about coordinates and not elements. - - // Checks if the coordinates are close enough to be within the region. - function hit(x1, y1, x2, y2) { - return Math.abs(x1 - x2) < CLICKBUSTER_THRESHOLD && Math.abs(y1 - y2) < CLICKBUSTER_THRESHOLD; - } - - // Checks a list of allowable regions against a click location. - // Returns true if the click should be allowed. - // Splices out the allowable region from the list after it has been used. - function checkAllowableRegions(touchCoordinates, x, y) { - for (var i = 0; i < touchCoordinates.length; i += 2) { - if (hit(touchCoordinates[i], touchCoordinates[i+1], x, y)) { - touchCoordinates.splice(i, i + 2); - return true; // allowable region - } - } - return false; // No allowable region; bust it. - } - - // Global click handler that prevents the click if it's in a bustable zone and preventGhostClick - // was called recently. - function onClick(event) { - if (Date.now() - lastPreventedTime > PREVENT_DURATION) { - return; // Too old. - } - - var touches = event.touches && event.touches.length ? event.touches : [event]; - var x = touches[0].clientX; - var y = touches[0].clientY; - // Work around desktop Webkit quirk where clicking a label will fire two clicks (on the label - // and on the input element). Depending on the exact browser, this second click we don't want - // to bust has either (0,0) or negative coordinates. - if (x < 1 && y < 1) { - return; // offscreen - } - - // Look for an allowable region containing this click. - // If we find one, that means it was created by touchstart and not removed by - // preventGhostClick, so we don't bust it. - if (checkAllowableRegions(touchCoordinates, x, y)) { - return; - } - - // If we didn't find an allowable region, bust the click. - event.stopPropagation(); - event.preventDefault(); - } - - - // Global touchstart handler that creates an allowable region for a click event. - // This allowable region can be removed by preventGhostClick if we want to bust it. - function onTouchStart(event) { - var touches = event.touches && event.touches.length ? event.touches : [event]; - var x = touches[0].clientX; - var y = touches[0].clientY; - touchCoordinates.push(x, y); - - $timeout(function() { - // Remove the allowable region. - for (var i = 0; i < touchCoordinates.length; i += 2) { - if (touchCoordinates[i] == x && touchCoordinates[i+1] == y) { - touchCoordinates.splice(i, i + 2); - return; - } - } - }, PREVENT_DURATION, false); - } - - // On the first call, attaches some event handlers. Then whenever it gets called, it creates a - // zone around the touchstart where clicks will get busted. - function preventGhostClick(x, y) { - if (!touchCoordinates) { - $rootElement[0].addEventListener('click', onClick, true); - $rootElement[0].addEventListener('touchstart', onTouchStart, true); - touchCoordinates = []; - } - - lastPreventedTime = Date.now(); - - checkAllowableRegions(touchCoordinates, x, y); - } - - // Actual linking function. - return function(scope, element, attr) { - var clickHandler = $parse(attr.ngClick), - tapping = false, - tapElement, // Used to blur the element after a tap. - startTime, // Used to check if the tap was held too long. - touchStartX, - touchStartY; - - function resetState() { - tapping = false; - } - - element.bind('touchstart', function(event) { - tapping = true; - tapElement = event.target ? event.target : event.srcElement; // IE uses srcElement. - // Hack for Safari, which can target text nodes instead of containers. - if(tapElement.nodeType == 3) { - tapElement = tapElement.parentNode; - } - - startTime = Date.now(); - - var touches = event.touches && event.touches.length ? event.touches : [event]; - var e = touches[0].originalEvent || touches[0]; - touchStartX = e.clientX; - touchStartY = e.clientY; - }); - - element.bind('touchmove', function(event) { - resetState(); - }); - - element.bind('touchcancel', function(event) { - resetState(); - }); - - element.bind('touchend', function(event) { - var diff = Date.now() - startTime; - - var touches = (event.changedTouches && event.changedTouches.length) ? event.changedTouches : - ((event.touches && event.touches.length) ? event.touches : [event]); - var e = touches[0].originalEvent || touches[0]; - var x = e.clientX; - var y = e.clientY; - var dist = Math.sqrt( Math.pow(x - touchStartX, 2) + Math.pow(y - touchStartY, 2) ); - - if (tapping && diff < TAP_DURATION && dist < MOVE_TOLERANCE) { - // Call preventGhostClick so the clickbuster will catch the corresponding click. - preventGhostClick(x, y); - - // Blur the focused element (the button, probably) before firing the callback. - // This doesn't work perfectly on Android Chrome, but seems to work elsewhere. - // I couldn't get anything to work reliably on Android Chrome. - if (tapElement) { - tapElement.blur(); - } - - scope.$apply(function() { - // TODO(braden): This is sending the touchend, not a tap or click. Is that kosher? - clickHandler(scope, {$event: event}); - }); - } - tapping = false; - }); - - // Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click - // something else nearby. - element.onclick = function(event) { }; - - // Fallback click handler. - // Busted clicks don't get this far, and adding this handler allows ng-tap to be used on - // desktop as well, to allow more portable sites. - element.bind('click', function(event) { - scope.$apply(function() { - clickHandler(scope, {$event: event}); - }); - }); - }; -}]); - -/** - * @ngdoc directive - * @name ngMobile.directive:ngSwipeLeft - * - * @description - * Specify custom behavior when an element is swiped to the left on a touchscreen device. - * A leftward swipe is a quick, right-to-left slide of the finger. - * Though ngSwipeLeft is designed for touch-based devices, it will work with a mouse click and drag too. - * - * @element ANY - * @param {expression} ngSwipeLeft {@link guide/expression Expression} to evaluate - * upon left swipe. (Event object is available as `$event`) - * - * @example - <doc:example> - <doc:source> - <div ng-show="!showActions" ng-swipe-left="showActions = true"> - Some list content, like an email in the inbox - </div> - <div ng-show="showActions" ng-swipe-right="showActions = false"> - <button ng-click="reply()">Reply</button> - <button ng-click="delete()">Delete</button> - </div> - </doc:source> - </doc:example> - */ - -/** - * @ngdoc directive - * @name ngMobile.directive:ngSwipeRight - * - * @description - * Specify custom behavior when an element is swiped to the right on a touchscreen device. - * A rightward swipe is a quick, left-to-right slide of the finger. - * Though ngSwipeRight is designed for touch-based devices, it will work with a mouse click and drag too. - * - * @element ANY - * @param {expression} ngSwipeRight {@link guide/expression Expression} to evaluate - * upon right swipe. (Event object is available as `$event`) - * - * @example - <doc:example> - <doc:source> - <div ng-show="!showActions" ng-swipe-left="showActions = true"> - Some list content, like an email in the inbox - </div> - <div ng-show="showActions" ng-swipe-right="showActions = false"> - <button ng-click="reply()">Reply</button> - <button ng-click="delete()">Delete</button> - </div> - </doc:source> - </doc:example> - */ - -function makeSwipeDirective(directiveName, direction) { - ngMobile.directive(directiveName, ['$parse', '$swipe', function($parse, $swipe) { - // The maximum vertical delta for a swipe should be less than 75px. - var MAX_VERTICAL_DISTANCE = 75; - // Vertical distance should not be more than a fraction of the horizontal distance. - var MAX_VERTICAL_RATIO = 0.3; - // At least a 30px lateral motion is necessary for a swipe. - var MIN_HORIZONTAL_DISTANCE = 30; - - return function(scope, element, attr) { - var swipeHandler = $parse(attr[directiveName]); - - var startCoords, valid; - - function validSwipe(coords) { - // Check that it's within the coordinates. - // Absolute vertical distance must be within tolerances. - // Horizontal distance, we take the current X - the starting X. - // This is negative for leftward swipes and positive for rightward swipes. - // After multiplying by the direction (-1 for left, +1 for right), legal swipes - // (ie. same direction as the directive wants) will have a positive delta and - // illegal ones a negative delta. - // Therefore this delta must be positive, and larger than the minimum. - if (!startCoords) return false; - var deltaY = Math.abs(coords.y - startCoords.y); - var deltaX = (coords.x - startCoords.x) * direction; - return valid && // Short circuit for already-invalidated swipes. - deltaY < MAX_VERTICAL_DISTANCE && - deltaX > 0 && - deltaX > MIN_HORIZONTAL_DISTANCE && - deltaY / deltaX < MAX_VERTICAL_RATIO; - } - - $swipe.bind(element, { - 'start': function(coords) { - startCoords = coords; - valid = true; - }, - 'cancel': function() { - valid = false; - }, - 'end': function(coords) { - if (validSwipe(coords)) { - scope.$apply(function() { - swipeHandler(scope); - }); - } - } - }); - }; - }]); -} - -// Left is negative X-coordinate, right is positive. -makeSwipeDirective('ngSwipeLeft', -1); -makeSwipeDirective('ngSwipeRight', 1); - - - -})(window, window.angular); |
