From 4016682feb8604b4b91d39868db425ff4f893095 Mon Sep 17 00:00:00 2001
From: Alexis Paques <alexis@thekobi.com>
Date: Fri, 6 Sep 2019 12:12:34 +0200
Subject: [PATCH] Add an options to use with dynamic pages

---
 README.md         |  5 ++++-
 src/collection.js | 12 +++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4d4a0bd..75cc790 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
+    dynamic_page: Boolean,          // Enable if the page has dynamically visible elements
 };
 ```
 
@@ -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.dynamic_page` 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.
 
 ----
 
diff --git a/src/collection.js b/src/collection.js
index 773de10..84816e6 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,
+        dynamic_page: false
     };
 
     self.config(options);
@@ -377,6 +378,15 @@ Collection.prototype.processOnMove = function (evt) {
         return;
     }
 
+    if (opts.dynamic_page) {
+        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;