-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
43afa08
commit a059520
Showing
374 changed files
with
141,371 additions
and
2,482 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,368 @@ | ||
/** | ||
* @license AngularJS v1.8.2 | ||
* (c) 2010-2020 Google LLC. http://angularjs.org | ||
* License: MIT | ||
*/ | ||
(function(window, angular) {'use strict'; | ||
|
||
/** | ||
* @ngdoc module | ||
* @name ngTouch | ||
* @description | ||
* | ||
* The `ngTouch` module provides helpers for touch-enabled devices. | ||
* The implementation is based on jQuery Mobile touch event handling | ||
* ([jquerymobile.com](http://jquerymobile.com/)). * | ||
* | ||
* See {@link ngTouch.$swipe `$swipe`} for usage. | ||
* | ||
* @deprecated | ||
* sinceVersion="1.7.0" | ||
* The ngTouch module with the {@link ngTouch.$swipe `$swipe`} service and | ||
* the {@link ngTouch.ngSwipeLeft} and {@link ngTouch.ngSwipeRight} directives are | ||
* deprecated. Instead, stand-alone libraries for touch handling and gesture interaction | ||
* should be used, for example [HammerJS](https://hammerjs.github.io/) (which is also used by | ||
* Angular). | ||
*/ | ||
|
||
// define ngTouch module | ||
/* global ngTouch */ | ||
var ngTouch = angular.module('ngTouch', []); | ||
|
||
ngTouch.info({ angularVersion: '1.8.2' }); | ||
|
||
function nodeName_(element) { | ||
return angular.$$lowercase(element.nodeName || (element[0] && element[0].nodeName)); | ||
} | ||
|
||
/* global ngTouch: false */ | ||
|
||
/** | ||
* @ngdoc service | ||
* @name $swipe | ||
* | ||
* @deprecated | ||
* sinceVersion="1.7.0" | ||
* | ||
* See the {@link ngTouch module} documentation for more information. | ||
* | ||
* @description | ||
* The `$swipe` service is a service that abstracts the messier details of hold-and-drag swipe | ||
* behavior, to make implementing swipe-related directives more convenient. | ||
* | ||
* Requires the {@link ngTouch `ngTouch`} module to be installed. | ||
* | ||
* `$swipe` is used by the `ngSwipeLeft` and `ngSwipeRight` directives in `ngTouch`. | ||
* | ||
* # Usage | ||
* The `$swipe` service is an object with a single method: `bind`. `bind` takes an element | ||
* which is to be watched for swipes, and an object with four handler functions. See the | ||
* documentation for `bind` below. | ||
*/ | ||
|
||
ngTouch.factory('$swipe', [function() { | ||
// The total distance in any direction before we make the call on swipe vs. scroll. | ||
var MOVE_BUFFER_RADIUS = 10; | ||
|
||
var POINTER_EVENTS = { | ||
'mouse': { | ||
start: 'mousedown', | ||
move: 'mousemove', | ||
end: 'mouseup' | ||
}, | ||
'touch': { | ||
start: 'touchstart', | ||
move: 'touchmove', | ||
end: 'touchend', | ||
cancel: 'touchcancel' | ||
}, | ||
'pointer': { | ||
start: 'pointerdown', | ||
move: 'pointermove', | ||
end: 'pointerup', | ||
cancel: 'pointercancel' | ||
} | ||
}; | ||
|
||
function getCoordinates(event) { | ||
var originalEvent = event.originalEvent || event; | ||
var touches = originalEvent.touches && originalEvent.touches.length ? originalEvent.touches : [originalEvent]; | ||
var e = (originalEvent.changedTouches && originalEvent.changedTouches[0]) || touches[0]; | ||
|
||
return { | ||
x: e.clientX, | ||
y: e.clientY | ||
}; | ||
} | ||
|
||
function getEvents(pointerTypes, eventType) { | ||
var res = []; | ||
angular.forEach(pointerTypes, function(pointerType) { | ||
var eventName = POINTER_EVENTS[pointerType][eventType]; | ||
if (eventName) { | ||
res.push(eventName); | ||
} | ||
}); | ||
return res.join(' '); | ||
} | ||
|
||
return { | ||
/** | ||
* @ngdoc method | ||
* @name $swipe#bind | ||
* | ||
* @description | ||
* The main method of `$swipe`. It takes an element to be watched for swipe motions, and an | ||
* object containing event handlers. | ||
* The pointer types that should be used can be specified via the optional | ||
* third argument, which is an array of strings `'mouse'`, `'touch'` and `'pointer'`. By default, | ||
* `$swipe` will listen for `mouse`, `touch` and `pointer` events. | ||
* | ||
* The four events are `start`, `move`, `end`, and `cancel`. `start`, `move`, and `end` | ||
* receive as a parameter a coordinates object of the form `{ x: 150, y: 310 }` and the raw | ||
* `event`. `cancel` receives the raw `event` as its single parameter. | ||
* | ||
* `start` is called on either `mousedown`, `touchstart` or `pointerdown`. After this event, `$swipe` is | ||
* watching for `touchmove`, `mousemove` or `pointermove` events. These events are ignored until the total | ||
* distance moved in either dimension exceeds a small threshold. | ||
* | ||
* Once this threshold is exceeded, either the horizontal or vertical delta is greater. | ||
* - If the horizontal distance is greater, this is a swipe and `move` and `end` events follow. | ||
* - If the vertical distance is greater, this is a scroll, and we let the browser take over. | ||
* A `cancel` event is sent. | ||
* | ||
* `move` is called on `mousemove`, `touchmove` and `pointermove` after the above logic has determined that | ||
* a swipe is in progress. | ||
* | ||
* `end` is called when a swipe is successfully completed with a `touchend`, `mouseup` or `pointerup`. | ||
* | ||
* `cancel` is called either on a `touchcancel` or `pointercancel` from the browser, or when we begin scrolling | ||
* as described above. | ||
* | ||
*/ | ||
bind: function(element, eventHandlers, pointerTypes) { | ||
// 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; | ||
|
||
pointerTypes = pointerTypes || ['mouse', 'touch', 'pointer']; | ||
element.on(getEvents(pointerTypes, 'start'), function(event) { | ||
startCoords = getCoordinates(event); | ||
active = true; | ||
totalX = 0; | ||
totalY = 0; | ||
lastPos = startCoords; | ||
if (eventHandlers['start']) { | ||
eventHandlers['start'](startCoords, event); | ||
} | ||
}); | ||
var events = getEvents(pointerTypes, 'cancel'); | ||
if (events) { | ||
element.on(events, function(event) { | ||
active = false; | ||
if (eventHandlers['cancel']) { | ||
eventHandlers['cancel'](event); | ||
} | ||
}); | ||
} | ||
|
||
element.on(getEvents(pointerTypes, 'move'), 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; | ||
if (eventHandlers['cancel']) { | ||
eventHandlers['cancel'](event); | ||
} | ||
return; | ||
} else { | ||
// Prevent the browser from scrolling. | ||
event.preventDefault(); | ||
if (eventHandlers['move']) { | ||
eventHandlers['move'](coords, event); | ||
} | ||
} | ||
}); | ||
|
||
element.on(getEvents(pointerTypes, 'end'), function(event) { | ||
if (!active) return; | ||
active = false; | ||
if (eventHandlers['end']) { | ||
eventHandlers['end'](getCoordinates(event), event); | ||
} | ||
}); | ||
} | ||
}; | ||
}]); | ||
|
||
/* global ngTouch: false */ | ||
|
||
/** | ||
* @ngdoc directive | ||
* @name ngSwipeLeft | ||
* | ||
* @deprecated | ||
* sinceVersion="1.7.0" | ||
* | ||
* See the {@link ngTouch module} documentation for more information. | ||
* | ||
* @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. | ||
* | ||
* To disable the mouse click and drag functionality, add `ng-swipe-disable-mouse` to | ||
* the `ng-swipe-left` or `ng-swipe-right` DOM Element. | ||
* | ||
* Requires the {@link ngTouch `ngTouch`} module to be installed. | ||
* | ||
* @element ANY | ||
* @param {expression} ngSwipeLeft {@link guide/expression Expression} to evaluate | ||
* upon left swipe. (Event object is available as `$event`) | ||
* | ||
* @example | ||
<example module="ngSwipeLeftExample" deps="angular-touch.js" name="ng-swipe-left"> | ||
<file name="index.html"> | ||
<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> | ||
</file> | ||
<file name="script.js"> | ||
angular.module('ngSwipeLeftExample', ['ngTouch']); | ||
</file> | ||
</example> | ||
*/ | ||
|
||
/** | ||
* @ngdoc directive | ||
* @name ngSwipeRight | ||
* | ||
* @deprecated | ||
* sinceVersion="1.7.0" | ||
* | ||
* See the {@link ngTouch module} documentation for more information. | ||
* | ||
* @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. | ||
* | ||
* Requires the {@link ngTouch `ngTouch`} module to be installed. | ||
* | ||
* @element ANY | ||
* @param {expression} ngSwipeRight {@link guide/expression Expression} to evaluate | ||
* upon right swipe. (Event object is available as `$event`) | ||
* | ||
* @example | ||
<example module="ngSwipeRightExample" deps="angular-touch.js" name="ng-swipe-right"> | ||
<file name="index.html"> | ||
<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> | ||
</file> | ||
<file name="script.js"> | ||
angular.module('ngSwipeRightExample', ['ngTouch']); | ||
</file> | ||
</example> | ||
*/ | ||
|
||
function makeSwipeDirective(directiveName, direction, eventName) { | ||
ngTouch.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; | ||
} | ||
|
||
var pointerTypes = ['touch']; | ||
if (!angular.isDefined(attr['ngSwipeDisableMouse'])) { | ||
pointerTypes.push('mouse'); | ||
} | ||
$swipe.bind(element, { | ||
'start': function(coords, event) { | ||
startCoords = coords; | ||
valid = true; | ||
}, | ||
'cancel': function(event) { | ||
valid = false; | ||
}, | ||
'end': function(coords, event) { | ||
if (validSwipe(coords)) { | ||
scope.$apply(function() { | ||
element.triggerHandler(eventName); | ||
swipeHandler(scope, {$event: event}); | ||
}); | ||
} | ||
} | ||
}, pointerTypes); | ||
}; | ||
}]); | ||
} | ||
|
||
// Left is negative X-coordinate, right is positive. | ||
makeSwipeDirective('ngSwipeLeft', -1, 'swipeleft'); | ||
makeSwipeDirective('ngSwipeRight', 1, 'swiperight'); | ||
|
||
|
||
|
||
})(window, window.angular); |
Oops, something went wrong.