mirror of https://github.com/BTCPrivate/copay.git
add customr swipe
This commit is contained in:
parent
e44780379a
commit
5b88b82623
|
@ -10,7 +10,6 @@
|
|||
"angular": "~1.3.13",
|
||||
"angular-foundation": "*",
|
||||
"angular-animate": "~1.3.13",
|
||||
"angular-touch": "~1.3.0",
|
||||
"angular-qrcode": "~5.1.0",
|
||||
"angular-gettext": "~2.0.5",
|
||||
"animate.css": "~3.2.0",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<nav ng-controller="topbarController as topbar" class="tab-bar">
|
||||
<section class="left-small">
|
||||
<a class="p10 ng-animate-disabled" ng-show="!goBackToState && !closeToHome && !index.noFocusedWallet"
|
||||
<a id="hamburger" class="p10 ng-animate-disabled" ng-show="!goBackToState && !closeToHome && !index.noFocusedWallet"
|
||||
ng-click="index.openMenu()"><i class="fi-list size-24"></i>
|
||||
</a>
|
||||
<a ng-show="goBackToState" class="ng-animate-disabled"
|
||||
|
|
|
@ -39,8 +39,8 @@ body, div, .row {
|
|||
/* END disabling text selection */
|
||||
|
||||
.inner-wrap {
|
||||
-webkit-transition-duration: 250ms;
|
||||
transition-duration: 250ms;
|
||||
-webkit-transition-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
@ -7,7 +7,6 @@ var modules = [
|
|||
'monospaced.qrcode',
|
||||
'gettext',
|
||||
'ngAnimate',
|
||||
'ngTouch',
|
||||
'ngLodash',
|
||||
'uiSwitch',
|
||||
'bwcModule',
|
||||
|
|
|
@ -112,7 +112,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
|
||||
if (! document.getElementById('menu-' + tab) && ++tries<5) {
|
||||
return $timeout(function() {
|
||||
self.setTab(tab,reset);
|
||||
self.setTab(tab,reset, tries);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
|
|
|
@ -379,7 +379,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
|
|||
|
||||
// on touchdown elements
|
||||
$log.debug('Binding touchstart elements...');
|
||||
['menu-walletHome', 'menu-send', 'menu-receive', 'menu-history'].forEach(function(id) {
|
||||
['hamburger', 'menu-walletHome', 'menu-send', 'menu-receive', 'menu-history'].forEach(function(id) {
|
||||
var e = document.getElementById(id);
|
||||
if (e) e.addEventListener('touchstart', function() {
|
||||
angular.element(e).triggerHandler('click');
|
||||
|
|
|
@ -15,10 +15,7 @@ function selectText(element) {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
angular.module('copayApp.directives')
|
||||
|
||||
.directive('validAddress', ['$rootScope', 'bitcore', 'profileService',
|
||||
function($rootScope, bitcore, profileService) {
|
||||
return {
|
||||
|
|
|
@ -0,0 +1,67 @@
|
|||
'use strict';
|
||||
|
||||
/*
|
||||
* This is a modification from https://github.com/angular/angular.js/blob/master/src/ngTouch/swipe.js
|
||||
*/
|
||||
|
||||
|
||||
function makeSwipeDirective(directiveName, direction, eventName) {
|
||||
angular.module('copayApp.directives')
|
||||
.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 = 25;
|
||||
|
||||
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'];
|
||||
$swipe.bind(element, {
|
||||
'start': function(coords, event) {
|
||||
startCoords = coords;
|
||||
valid = true;
|
||||
},
|
||||
'move': 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');
|
|
@ -18,8 +18,6 @@ angular.element(document).ready(function() {
|
|||
}, false);
|
||||
|
||||
document.addEventListener('resume', function() {
|
||||
|
||||
console.log('[init.js.21] RESUME'); //TODO
|
||||
if (!window.ignoreMobilePause) {
|
||||
window.location = '#/cordova/resume';
|
||||
}
|
||||
|
|
|
@ -0,0 +1,150 @@
|
|||
'use strict';
|
||||
|
||||
/*
|
||||
* This is a modification from https://github.com/angular/angular.js/blob/master/src/ngTouch/swipe.js
|
||||
*/
|
||||
|
||||
|
||||
angular.module('copayApp.services')
|
||||
.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 = {
|
||||
'touch': {
|
||||
start: 'touchstart',
|
||||
move: 'touchmove',
|
||||
end: 'touchend',
|
||||
cancel: 'touchcancel'
|
||||
}
|
||||
};
|
||||
|
||||
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'` and `'touch'`. By default,
|
||||
* `$swipe` will listen for `mouse` and `touch` 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 }`.
|
||||
*
|
||||
* `start` is called on either `mousedown` or `touchstart`. After this event, `$swipe` is
|
||||
* watching for `touchmove` or `mousemove` 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` and `touchmove` after the above logic has determined that
|
||||
* a swipe is in progress.
|
||||
*
|
||||
* `end` is called when a swipe is successfully completed with a `touchend` or `mouseup`.
|
||||
*
|
||||
* `cancel` is called either on a `touchcancel` 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 || ['touch'];
|
||||
element.on(getEvents(pointerTypes, 'start'), function(event) {
|
||||
startCoords = getCoordinates(event);
|
||||
active = true;
|
||||
totalX = 0;
|
||||
totalY = 0;
|
||||
lastPos = startCoords;
|
||||
eventHandlers['start'] && eventHandlers['start'](startCoords, event);
|
||||
});
|
||||
var events = getEvents(pointerTypes, 'cancel');
|
||||
if (events) {
|
||||
element.on(events, function(event) {
|
||||
active = false;
|
||||
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;
|
||||
eventHandlers['cancel'] && eventHandlers['cancel'](event);
|
||||
return;
|
||||
} else {
|
||||
|
||||
// Prevent the browser from scrolling.
|
||||
event.preventDefault();
|
||||
eventHandlers['move'] && eventHandlers['move'](coords, event);
|
||||
}
|
||||
});
|
||||
|
||||
element.on(getEvents(pointerTypes, 'end'), function(event) {
|
||||
if (!active) return;
|
||||
active = false;
|
||||
eventHandlers['end'] && eventHandlers['end'](getCoordinates(event), event);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
]);
|
||||
|
||||
|
Loading…
Reference in New Issue