Add the possibility to set a unit for the size of the stick

README.md

@@ -16,7 +16,7 @@
 - [Options](#options)
   * [`options.zone` defaults to 'body'](#optionszone-defaults-to-body)
   * [`options.color` defaults to 'white'](#optionscolor-defaults-to-white)
-  * [`options.size` defaults to 100](#optionssize-defaults-to-100)
+  * [`options.size` defaults to {val: 100, unit: "px"}](#optionssize-defaults-to-val-100-unit-px)
   * [`options.threshold` defaults to 0.1](#optionsthreshold-defaults-to-01)
   * [`options.fadeTime` defaults to 250](#optionsfadetime-defaults-to-250)
   * [`options.multitouch` defaults to false](#optionsmultitouch-defaults-to-false)
@@ -127,7 +127,7 @@ You can configure your joystick in different ways :
 var options = {
     zone: Element,                  // active zone
     color: String,
-    size: Integer,
+    size: {val: Integer, unit: String},
     threshold: Float,               // before triggering a directional event
     fadeTime: Integer,              // transition time
     multitouch: Boolean,
@@ -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.
 <script type="text/javascript" src="./nipplejs.js"></script>
 <script type="text/javascript">
     var options = {
-        zone: document.getElementById('zone_joystick');
+        zone: document.getElementById('zone_joystick'),
     };
     var manager = nipplejs.create(options);
 </script>
@@ -170,8 +171,12 @@ The background color of your joystick's elements.
 
 Can be any valid CSS color.
 
-### `options.size` defaults to 100
-The size in pixel of the outer circle.
+### `options.size` defaults to `{val: 100, unit: "px"}`
+An object that determine the size of the outer circle.
+
+You can pass css unit like : `px`, `vh`, `vmin`
+
+`%` doesn't work if you doesn't set `nipple collection` height and width before
 
 The inner circle is 50% of this size.
 
@@ -252,6 +257,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.
 
 ----
 
@@ -276,7 +283,7 @@ Your manager has the following signature :
         mode: String,
         position: Object,
         catchDistance: Number,
-        size: Number,
+        size: {val: Number, unit: String},
         threshold: Number,
         color: String,
         fadeTime: Number,
@@ -368,7 +375,7 @@ Each joystick has the following signature :
     },
     options: {
         color: String,
-        size: Number,
+        size: {val: Number, unit: String},
         threshold: Number,
         fadeTime: Number
     }
@@ -526,6 +533,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

example/dual-joysticks.html

@@ -44,15 +44,15 @@
                 mode: 'static',
                 position: { left: '20%', top: '50%' },
                 color: 'green',
-                size: 200
+                size: {val: 200, unit: "px"}
             });
 
             var joystickR = nipplejs.create({
                 zone: document.getElementById('right'),
                 mode: 'static',
                 position: { left: '80%', top: '50%' },
                 color: 'red',
-                size: 200
+                size: {val: 200, unit: "px"}
             });
         </script>
     </body>

example/lock-axes.html

@@ -44,7 +44,7 @@
                 mode: 'static',
                 position: { left: '20%', top: '50%' },
                 color: 'green',
-                size: 200,
+                size: {val: 200, unit: "px"},
                 lockX: true
             });
 
@@ -53,7 +53,7 @@
                 mode: 'static',
                 position: { left: '80%', top: '50%' },
                 color: 'red',
-                size: 200,
+                size: {val: 200, unit: "px"},
                 lockY: true
             });
         </script>

src/collection.js

@@ -25,15 +25,19 @@ function Collection (manager, options) {
         mode: 'dynamic',
         position: {top: 0, left: 0},
         catchDistance: 200,
-        size: 100,
+        size: {
+            val: 100,
+            unit: 'px'
+        },
         threshold: 0.1,
         color: 'white',
         fadeTime: 250,
         dataOnly: false,
         restJoystick: true,
         restOpacity: 0.5,
         lockX: false,
-        lockY: false
+        lockY: false,
+        dynamicPage: false
     };
 
     self.config(options);
@@ -172,8 +176,8 @@ Collection.prototype.createNipple = function (position, identifier) {
     });
 
     if (!opts.dataOnly) {
-        u.applyPosition(nipple.ui.el, toPutOn);
-        u.applyPosition(nipple.ui.front, nipple.frontPosition);
+        u.applyPosition(nipple.ui.el, toPutOn, opts.size.unit);
+        u.applyPosition(nipple.ui.front, nipple.frontPosition, opts.size.unit);
     }
     self.nipples.push(nipple);
     self.trigger('added ' + nipple.identifier + ':added', nipple);
@@ -377,9 +381,18 @@ 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;
+    var size = nipple.options.size.val / 2;
     var pos = {
         x: evt.pageX,
         y: evt.pageY
@@ -418,7 +431,7 @@ Collection.prototype.processOnMove = function (evt) {
     };
 
     if (!opts.dataOnly) {
-        u.applyPosition(nipple.ui.front, nipple.frontPosition);
+        u.applyPosition(nipple.ui.front, nipple.frontPosition, opts.size.unit);
     }
 
     // Prepare event's datas.
@@ -432,6 +445,10 @@ Collection.prototype.processOnMove = function (evt) {
             radian: rAngle,
             degree: angle
         },
+        vector: {
+            x: xPosition / size,
+            y: - yPosition / size
+        },
         raw: raw,
         instance: nipple,
         lockX: opts.lockX,

src/nipple.js

@@ -13,7 +13,10 @@ function Nipple (collection, options) {
 
     // Defaults
     this.defaults = {
-        size: 100,
+        size: {
+            val: 100,
+            unit: 'px'
+        },
         threshold: 0.1,
         color: 'white',
         fadeTime: 250,
@@ -110,21 +113,21 @@ Nipple.prototype.stylize = function () {
     styles.back = {
         position: 'absolute',
         display: 'block',
-        width: this.options.size + 'px',
-        height: this.options.size + 'px',
-        marginLeft: -this.options.size / 2 + 'px',
-        marginTop: -this.options.size / 2 + 'px',
+        width: this.options.size.val + this.options.size.unit ,
+        height: this.options.size.val + this.options.size.unit,
+        marginLeft: -this.options.size.val / 2 + this.options.size.unit,
+        marginTop: -this.options.size.val / 2 + this.options.size.unit,
         background: this.options.color,
         'opacity': '.5'
     };
 
     styles.front = {
-        width: this.options.size / 2 + 'px',
-        height: this.options.size / 2 + 'px',
+        width: this.options.size.val / 2 + this.options.size.unit,
+        height: this.options.size.val / 2 + this.options.size.unit,
         position: 'absolute',
         display: 'block',
-        marginLeft: -this.options.size / 4 + 'px',
-        marginTop: -this.options.size / 4 + 'px',
+        marginLeft: -this.options.size.val / 4 + this.options.size.unit,
+        marginTop: -this.options.size.val / 4 + this.options.size.unit,
         background: this.options.color,
         'opacity': '.5'
     };

src/utils.js

@@ -91,15 +91,15 @@ export const getScroll = () => {
     };
 };
 
-export const applyPosition = (el, pos) => {
+export const applyPosition = (el, pos, unit) => {
     if (pos.top || pos.right || pos.bottom || pos.left) {
         el.style.top = pos.top;
         el.style.right = pos.right;
         el.style.bottom = pos.bottom;
         el.style.left = pos.left;
     } else {
-        el.style.left = pos.x + 'px';
-        el.style.top = pos.y + 'px';
+        el.style.left = pos.x + unit;
+        el.style.top = pos.y + unit;
     }
 };
 

types/index.d.ts

@@ -18,12 +18,12 @@ export interface JoystickManagerOptions {
     color?: string;
 
     /**
-     * Defaults to `100`
-     * The size in pixel of the outer circle.
+     * Defaults to { val: `100`, unit: px}
+     * The size of the outer circle.
      *
      * The inner circle is 50% of this size.
      */
-    size?: number;
+    size?: {val: number, unit: string};
 
     /**
      * This is the strength needed to trigger a directional event.
@@ -159,6 +159,10 @@ export interface JoystickOutputData {
         x: string;
         y: string;
     };
+    vector: {
+        x: number;
+        y: number;
+    };
     raw: {
       distance: number;
       position: Position;