feat(collection): add initial frontPosition option

Add the option to be able to indicate the initial position of the joystick front Currently the position is set to x: 0 and: 0 and does not allow modification via options when creating the nipple close yoannmoinet#133
bolollo · Mar 3, 2020 · a6580dd · a6580dd
1 parent d3bea82
commit a6580dd
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 5 deletions.
diff --git a/example/joystick-frontPosition.html b/example/joystick-frontPosition.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>NippleJS</title>
+        <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
+        <style>
+        html, body {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            padding: 0;
+            margin: 0;
+        }
+
+        #left {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            background: rgba(1,77,129, 0.1);
+        }
+        </style>
+    </head>
+    <body>
+        <div id="left"></div>
+        <script src="/dist/nipplejs.js"></script>
+        <script>
+            var joystickL = nipplejs.create({
+                zone: document.getElementById('left'),
+                mode: 'static',
+                position: { left: '50%', top: '50%' },
+                color: '#014d81',
+                size: 200,
+                restJoystick: false,
+                frontPosition: {x: 25, y: -35},
+                restJoystick: false
+            });
+        </script>
+    </body>
+</html>
diff --git a/src/collection.js b/src/collection.js
@@ -34,7 +34,8 @@ function Collection (manager, options) {
         restOpacity: 0.5,
         lockX: false,
         lockY: false,
-        dynamicPage: false
+        dynamicPage: false,
+        frontPosition: {x: 0, y: 0}
     };
 
     self.config(options);
@@ -154,6 +155,20 @@ Collection.prototype.createNipple = function (position, identifier) {
         };
     }
 
+    //limit the position of the front to the size of the joystick.
+    var size = opts.size / 2;
+    var frontPosition = opts.frontPosition;
+    var defaultFrontPostion =  self.defaults.frontPosition;
+    var dist = u.distance(frontPosition, defaultFrontPostion);
+    var angle = u.angle(frontPosition, defaultFrontPostion);
+
+    // If distance is bigger than nipple's size
+    // we clamp the position.
+    if (dist > size) {
+        dist = size;
+        frontPosition = u.findCoord(defaultFrontPostion, dist, angle);
+    }
+
     var nipple = new Nipple(self, {
         color: opts.color,
         size: opts.size,
@@ -166,10 +181,7 @@ Collection.prototype.createNipple = function (position, identifier) {
         identifier: identifier,
         position: position,
         zone: opts.zone,
-        frontPosition: {
-            x: 0,
-            y: 0
-        }
+        frontPosition: frontPosition
     });
 
     if (!opts.dataOnly) {