diff --git a/README.md b/README.md
index c441bc5..5e3b114 100644
--- a/README.md
+++ b/README.md
@@ -139,8 +139,9 @@ var options = {
restOpacity: Number, // opacity when not 'dynamic' and rested
lockX: Boolean, // only move on the X axis
lockY: Boolean, // only move on the Y axis
- catchDistance: Number // distance to recycle previous joystick in
+ catchDistance: Number, // distance to recycle previous joystick in
// 'semi' mode
+ dynamicPage: Boolean, // Enable if the page has dynamically visible elements
};
```
@@ -155,7 +156,7 @@ The dom element in which all your joysticks will be injected.
@@ -252,6 +253,8 @@ Locks joystick's movement to the x (horizontal) axis
### `options.lockY` defaults to false
Locks joystick's movement to the y (vertical) axis
+### `options.dynamicPage` defaults to true
+Enable if the page has dynamically visible elements such as for Vue, React, Angular or simply some CSS hiding or showing some DOM.
----
@@ -526,6 +529,10 @@ Comes with data :
radian: 1.5707963268, // angle in radian
degree: 90
},
+ vector: { // force unit vector
+ x: 0.508,
+ y: 3.110602869834277e-17
+ },
raw: { // note: angle is the same, beyond the 50 pixel limit
distance: 25.4, // distance which continues beyond the 50 pixel limit
position: { // position of the finger/mouse in pixels, beyond joystick limits
diff --git a/src/collection.js b/src/collection.js
index 0097f5d..95817c8 100644
--- a/src/collection.js
+++ b/src/collection.js
@@ -33,7 +33,8 @@ function Collection (manager, options) {
restJoystick: true,
restOpacity: 0.5,
lockX: false,
- lockY: false
+ lockY: false,
+ dynamicPage: false
};
self.config(options);
@@ -377,6 +378,15 @@ Collection.prototype.processOnMove = function (evt) {
return;
}
+ if (opts.dynamicPage) {
+ var scroll = u.getScroll();
+ pos = nipple.el.getBoundingClientRect();
+ nipple.position = {
+ x: scroll.x + pos.left,
+ y: scroll.y + pos.top
+ };
+ }
+
nipple.identifier = identifier;
var size = nipple.options.size / 2;
@@ -432,6 +442,10 @@ Collection.prototype.processOnMove = function (evt) {
radian: rAngle,
degree: angle
},
+ vector: {
+ x: xPosition / size,
+ y: - yPosition / size
+ },
raw: raw,
instance: nipple,
lockX: opts.lockX,
diff --git a/src/utils.js b/src/utils.js
index dc863d5..abe28b2 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -33,6 +33,9 @@ export const degrees = (a) => {
};
export const isPressed = (evt) => {
+ if (evt.type === 'pointerdown' || evt.type === 'pointermove') {
+ return true;
+ }
if (isNaN(evt.buttons)) {
return evt.pressure !== 0;
}
diff --git a/types/index.d.ts b/types/index.d.ts
index 577bde5..390bbba 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -159,6 +159,10 @@ export interface JoystickOutputData {
x: string;
y: string;
};
+ vector: {
+ x: number;
+ y: number;
+ };
raw: {
distance: number;
position: Position;