|
1
|
|
|
define(function(require) { |
|
2
|
|
|
'use strict'; |
|
3
|
|
|
|
|
4
|
|
|
var SwipeActionsManager; |
|
5
|
|
|
var $ = require('jquery'); |
|
6
|
|
|
var _ = require('underscore'); |
|
7
|
|
|
var mediator = require('oroui/js/mediator'); |
|
8
|
|
|
var error = require('oroui/js/error'); |
|
9
|
|
|
|
|
10
|
|
|
var DEFAULT_OPTIONS = { |
|
11
|
|
|
minDistanceXAxis: 30, |
|
12
|
|
|
maxDistanceYAxis: 30, |
|
13
|
|
|
maxAllowedTime: 1000 |
|
14
|
|
|
}; |
|
15
|
|
|
|
|
16
|
|
|
/** |
|
17
|
|
|
* Swipe actions on mobile devices |
|
18
|
|
|
* |
|
19
|
|
|
* @param {String} elementSelector |
|
20
|
|
|
* @param {Object} options |
|
21
|
|
|
* @returns {*} |
|
22
|
|
|
* @constructor |
|
23
|
|
|
*/ |
|
24
|
|
|
SwipeActionsManager = function(elementSelector, options) { |
|
25
|
|
|
if (!elementSelector) { |
|
26
|
|
|
return error.showErrorInConsole('"elementSelector" should be defined'); |
|
27
|
|
|
} |
|
28
|
|
|
|
|
29
|
|
|
this.direction = null; |
|
30
|
|
|
this.touchStartCoords = null; |
|
31
|
|
|
this.touchEndCoords = null; |
|
32
|
|
|
this.elapsedTime = 0; |
|
33
|
|
|
this.startTime = 0; |
|
34
|
|
|
|
|
35
|
|
|
this.$el = $(elementSelector); |
|
36
|
|
|
|
|
37
|
|
|
this.swipeInitialize(options); |
|
|
|
|
|
|
38
|
|
|
}; |
|
39
|
|
|
|
|
40
|
|
|
SwipeActionsManager.prototype = { |
|
41
|
|
|
/** |
|
42
|
|
|
* Initialize, merge options |
|
43
|
|
|
* |
|
44
|
|
|
* @param {Object} options |
|
45
|
|
|
*/ |
|
46
|
|
|
swipeInitialize: function(options) { |
|
47
|
|
|
_.extend(this, _.defaults(_.pick(options, |
|
48
|
|
|
['minDistanceXAxis', 'maxDistanceYAxis', 'maxAllowedTime'] |
|
49
|
|
|
), DEFAULT_OPTIONS)); |
|
50
|
|
|
|
|
51
|
|
|
this._bindEvents(); |
|
52
|
|
|
}, |
|
53
|
|
|
|
|
54
|
|
|
/** |
|
55
|
|
|
* Bind touch events |
|
56
|
|
|
* @private |
|
57
|
|
|
*/ |
|
58
|
|
|
_bindEvents: function() { |
|
59
|
|
|
this.$el.on('touchstart', _.bind(this._swipeStart, this)); |
|
60
|
|
|
this.$el.on('touchmove', _.bind(this._swipeMove, this)); |
|
61
|
|
|
this.$el.on('touchend', _.bind(this._swipeEnd, this)); |
|
62
|
|
|
}, |
|
63
|
|
|
|
|
64
|
|
|
/** |
|
65
|
|
|
* Handler for start touch |
|
66
|
|
|
* |
|
67
|
|
|
* @param {jQuery.Event} event |
|
68
|
|
|
* @private |
|
69
|
|
|
*/ |
|
70
|
|
|
_swipeStart: function(event) { |
|
71
|
|
|
event = ('changedTouches' in event) ? event.changedTouches[0] : event; |
|
72
|
|
|
|
|
73
|
|
|
this.touchStartCoords = { |
|
74
|
|
|
x: event.pageX, |
|
75
|
|
|
y: event.pageY |
|
76
|
|
|
}; |
|
77
|
|
|
|
|
78
|
|
|
this.startTime = new Date().getTime(); |
|
79
|
|
|
|
|
80
|
|
|
mediator.trigger('swipe-action-start', {}, event.target); |
|
81
|
|
|
}, |
|
82
|
|
|
|
|
83
|
|
|
/** |
|
84
|
|
|
* Handler for start move |
|
85
|
|
|
* |
|
86
|
|
|
* @param {jQuery.Event} event |
|
87
|
|
|
* @private |
|
88
|
|
|
*/ |
|
89
|
|
|
_swipeMove: function(event) { |
|
90
|
|
|
event = ('changedTouches' in event) ? event.changedTouches[0] : event; |
|
91
|
|
|
|
|
92
|
|
|
var touchEndCoords = { |
|
93
|
|
|
x: event.pageX - this.touchStartCoords.x, |
|
94
|
|
|
y: event.pageY - this.touchStartCoords.y |
|
95
|
|
|
}; |
|
96
|
|
|
|
|
97
|
|
|
mediator.trigger('swipe-action-move', this._collectOptions(touchEndCoords), event.target); |
|
98
|
|
|
}, |
|
99
|
|
|
|
|
100
|
|
|
/** |
|
101
|
|
|
* Handler for end touch and fire external mediator event |
|
102
|
|
|
* |
|
103
|
|
|
* @param {jQuery.Event} event |
|
104
|
|
|
* @private |
|
105
|
|
|
*/ |
|
106
|
|
|
_swipeEnd: function(event) { |
|
107
|
|
|
event = ('changedTouches' in event) ? event.changedTouches[0] : event; |
|
108
|
|
|
|
|
109
|
|
|
this.touchEndCoords = { |
|
110
|
|
|
x: event.pageX - this.touchStartCoords.x, |
|
111
|
|
|
y: event.pageY - this.touchStartCoords.y |
|
112
|
|
|
}; |
|
113
|
|
|
this.elapsedTime = new Date().getTime() - this.startTime; |
|
114
|
|
|
|
|
115
|
|
|
if (this.elapsedTime <= this.maxAllowedTime) { |
|
116
|
|
|
if ( |
|
117
|
|
|
Math.abs(this.touchEndCoords.x) >= this.minDistanceXAxis && |
|
118
|
|
|
Math.abs(this.touchEndCoords.y) <= this.maxDistanceYAxis |
|
119
|
|
|
) { |
|
120
|
|
|
this.direction = this._getDirection(this.touchEndCoords.x); |
|
121
|
|
|
mediator.trigger('swipe-action-' + this.direction, this.touchEndCoords, event.target); |
|
122
|
|
|
} |
|
123
|
|
|
} |
|
124
|
|
|
|
|
125
|
|
|
mediator.trigger('swipe-action-end', this._collectOptions(this.touchEndCoords), event.target); |
|
126
|
|
|
}, |
|
127
|
|
|
|
|
128
|
|
|
_getDirection: function(coords) { |
|
129
|
|
|
return (coords < 0) ? 'left' : 'right'; |
|
130
|
|
|
}, |
|
131
|
|
|
|
|
132
|
|
|
_collectOptions: function(options) { |
|
133
|
|
|
return _.extend({}, options, { |
|
134
|
|
|
direction: this._getDirection(options.x) |
|
135
|
|
|
}); |
|
136
|
|
|
} |
|
137
|
|
|
}; |
|
138
|
|
|
|
|
139
|
|
|
return SwipeActionsManager; |
|
140
|
|
|
}); |
|
141
|
|
|
|
oroinc /
platform
Loading history...