mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-18 19:02:00 +02:00
Code Issues Releases Wiki Activity

Zoom - pinch gesture

Browse Source
This commit is contained in:
Luis
2017-04-13 18:47:01 +02:00
parent 5a7c84891a
commit 04bb9145a9
4 changed files with 139 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
npm-debug.log.3319379681 Normal file
View File

86
src/js/plugins/touch.js
View File

@@ -64,6 +64,27 @@ export default class Touch {
*/
this.isEnabled = false;
/**
* Whether is a gesture or not.
* @type {boolean}
* @private
*/
this.isGesture = false;
/**
* Stores start touch event (x, y).
* @type {array}
* @private
*/
this.startTouches = [];
/**
* Stores end touch event (x, y).
* @type {array}
* @private
*/
this.endTouches = [];
let events;
if (MobileDetector.isAny()) {
@@ -78,7 +99,6 @@ export default class Touch {
this.isEnabled = true;
document.addEventListener(events.START, this.onStart_.bind(this), false);
document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
document.addEventListener(events.END, this.onStop_.bind(this), false);
}
}
@@ -95,10 +115,16 @@ export default class Touch {
const info = Touch.normalizeEventInfo(event);
this.startX_ = info.x;
this.startY_ = info.y;
this.endX_ = info.x;
this.endY_ = info.y;
if (event.touches.length == 1) {
this.startX_ = info.x;
this.startY_ = info.y;
this.endX_ = info.x;
this.endY_ = info.y;
} else if (event.touches.length > 1) {
this.startTouches = this.getTouchCoorinates(event);
this.endTouches = this.startTouches;
this.isGesture = true;
}
}
/**
@@ -113,8 +139,12 @@ export default class Touch {
const info = Touch.normalizeEventInfo(event);
this.endX_ = info.x;
this.endY_ = info.y;
if (this.isGesture) {
this.endTouches = this.getTouchCoorinates(event);
} else {
this.endX_ = info.x;
this.endY_ = info.y;
}
}
/**
@@ -126,19 +156,45 @@ export default class Touch {
return;
}
const diffX = this.startX_ - this.endX_;
const diffY = this.startY_ - this.endY_;
if (this.isGesture) {
const startDistance = Math.sqrt(
Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) +
Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2)
);
const endDistance = Math.sqrt(
Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) +
Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2)
);
if (startDistance > endDistance) {
// Pinch gesture
this.ws_.toggleZoom();
}
this.isGesture = false;
} else {
const diffX = this.startX_ - this.endX_;
const diffY = this.startY_ - this.endY_;
// It's an horizontal drag
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX < -this.ws_.options.slideOffset) {
this.ws_.goPrev();
} else if(diffX > this.ws_.options.slideOffset) {
this.ws_.goNext();
// It's an horizontal drag
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX < -this.ws_.options.slideOffset) {
this.ws_.goPrev();
} else if(diffX > this.ws_.options.slideOffset) {
this.ws_.goNext();
}
}
}
}
/**
* Get X,Y coordinates from touchs pointers
* @param {Event} event
* @return {array}
*/
getTouchCoorinates(event) {
return [{x: event.touches[0].clientX, y: event.touches[0].clientY},
{x: event.touches[1].clientX, y: event.touches[1].clientY}];
}
/**
* Normalizes an event to deal with differences between PointerEvent and
* TouchEvent.

82
static/js/webslides.js
View File

@@ -2034,6 +2034,27 @@ var Touch = function () {
*/
this.isEnabled = false;
/**
* Whether is a gesture or not.
* @type {boolean}
* @private
*/
this.isGesture = false;
/**
* Stores start touch event (x, y).
* @type {array}
* @private
*/
this.startTouches = [];
/**
* Stores end touch event (x, y).
* @type {array}
* @private
*/
this.endTouches = [];
var events = void 0;
if (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) {
@@ -2047,7 +2068,6 @@ var Touch = function () {
this.isEnabled = true;
document.addEventListener(events.START, this.onStart_.bind(this), false);
document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
document.addEventListener(events.END, this.onStop_.bind(this), false);
}
}
@@ -2068,10 +2088,16 @@ var Touch = function () {
var info = Touch.normalizeEventInfo(event);
this.startX_ = info.x;
this.startY_ = info.y;
this.endX_ = info.x;
this.endY_ = info.y;
if (event.touches.length == 1) {
this.startX_ = info.x;
this.startY_ = info.y;
this.endX_ = info.x;
this.endY_ = info.y;
} else if (event.touches.length > 1) {
this.startTouches = this.getTouchCoorinates(event);
this.endTouches = this.startTouches;
this.isGesture = true;
}
}
/**
@@ -2089,8 +2115,12 @@ var Touch = function () {
var info = Touch.normalizeEventInfo(event);
this.endX_ = info.x;
this.endY_ = info.y;
if (this.isGesture) {
this.endTouches = this.getTouchCoorinates(event);
} else {
this.endX_ = info.x;
this.endY_ = info.y;
}
}
/**
@@ -2105,19 +2135,41 @@ var Touch = function () {
return;
}
var diffX = this.startX_ - this.endX_;
var diffY = this.startY_ - this.endY_;
if (this.isGesture) {
var startDistance = Math.sqrt(Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) + Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2));
var endDistance = Math.sqrt(Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) + Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2));
if (startDistance > endDistance) {
// Pinch gesture
this.ws_.toggleZoom();
}
this.isGesture = false;
} else {
var diffX = this.startX_ - this.endX_;
var diffY = this.startY_ - this.endY_;
// It's an horizontal drag
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX < -this.ws_.options.slideOffset) {
this.ws_.goPrev();
} else if (diffX > this.ws_.options.slideOffset) {
this.ws_.goNext();
// It's an horizontal drag
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX < -this.ws_.options.slideOffset) {
this.ws_.goPrev();
} else if (diffX > this.ws_.options.slideOffset) {
this.ws_.goNext();
}
}
}
}
/**
* Get X,Y coordinates from touchs pointers
* @param {Event} event
* @return {array}
*/
}, {
key: 'getTouchCoorinates',
value: function getTouchCoorinates(event) {
return [{ x: event.touches[0].clientX, y: event.touches[0].clientY }, { x: event.touches[1].clientX, y: event.touches[1].clientY }];
}
/**
* Normalizes an event to deal with differences between PointerEvent and
* TouchEvent.

2
static/js/webslides.min.js vendored
View File

File diff suppressed because one or more lines are too long