feat(joystick): add lockX and lockY options

yoannmoinet · Jun 6, 2018 · 6baba97 · 6baba97
1 parent 2c541a6
commit 6baba97
Show file tree

Hide file tree

Showing 8 changed files with 176 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -241,6 +241,13 @@ This is only useful in the `semi` mode, and determine at which distance we recyc
 At 200 (px), if you press the zone into a rayon of 200px around the previously displayed joystick,
 it will act as a `static` one.
 
+### `options.lockX` defaults to false
+Locks joystick's movement to the x (horizontal) axis
+
+### `options.lockY` defaults to false
+Locks joystick's movement to the y (vertical) axis
+
+
 ----
 
 ## API

diff --git a/bower.json b/bower.json
@@ -12,4 +12,4 @@
   ],
   "license": "MIT",
   "dependencies": {}
-}
+}
diff --git a/dist/nipplejs.js b/dist/nipplejs.js
@@ -130,14 +130,14 @@ u.getScroll = function () {
 };
 
 u.applyPosition = function (el, pos) {
-    if (pos.x && pos.y) {
-        el.style.left = pos.x + 'px';
-        el.style.top = pos.y + 'px';
-    } else if (pos.top || pos.right || pos.bottom || pos.left) {
+    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';
     }
 };
 
@@ -337,7 +337,9 @@ function Nipple (collection, options) {
         restJoystick: true,
         restOpacity: 0.5,
         mode: 'dynamic',
-        zone: document.body
+        zone: document.body,
+        lockX: false,
+        lockY: false
     };
 
     this.config(options);
@@ -619,13 +621,25 @@ Nipple.prototype.computeDirection = function (obj) {
     //      /   \
     //     /DOWN \
     //
-    if (rAngle > angle45 && rAngle < (angle45 * 3)) {
+    if (
+        rAngle > angle45 &&
+        rAngle < (angle45 * 3) &&
+        !obj.lockX
+    ) {
         direction = 'up';
-    } else if (rAngle > -angle45 && rAngle <= angle45) {
+    } else if (
+        rAngle > -angle45 &&
+        rAngle <= angle45 &&
+        !obj.lockY
+    ) {
         direction = 'left';
-    } else if (rAngle > (-angle45 * 3) && rAngle <= -angle45) {
+    } else if (
+        rAngle > (-angle45 * 3) &&
+        rAngle <= -angle45 &&
+        !obj.lockX
+    ) {
         direction = 'down';
-    } else {
+    } else if (!obj.lockY) {
         direction = 'right';
     }
 
@@ -634,16 +648,20 @@ Nipple.prototype.computeDirection = function (obj) {
     // _______               | RIGHT
     //                  LEFT |
     //   DOWN                |
-    if (rAngle > -angle90 && rAngle < angle90) {
-        directionX = 'left';
-    } else {
-        directionX = 'right';
+    if (!obj.lockY) {
+        if (rAngle > -angle90 && rAngle < angle90) {
+            directionX = 'left';
+        } else {
+            directionX = 'right';
+        }
     }
 
-    if (rAngle > 0) {
-        directionY = 'up';
-    } else {
-        directionY = 'down';
+    if (!obj.lockX) {
+        if (rAngle > 0) {
+            directionY = 'up';
+        } else {
+            directionY = 'down';
+        }
     }
 
     if (obj.force > this.options.threshold) {
@@ -725,7 +743,9 @@ function Collection (manager, options) {
         fadeTime: 250,
         dataOnly: false,
         restJoystick: true,
-        restOpacity: 0.5
+        restOpacity: 0.5,
+        lockX: false,
+        lockY: false
     };
 
     self.config(options);
@@ -1063,9 +1083,19 @@ Collection.prototype.processOnMove = function (evt) {
         pos = u.findCoord(nipple.position, dist, angle);
     }
 
+    var xPosition = pos.x - nipple.position.x
+    var yPosition = pos.y - nipple.position.y
+
+    if (opts.lockX){
+        yPosition = 0
+    }
+    if (opts.lockY) {
+        xPosition = 0
+    }
+
     nipple.frontPosition = {
-        x: pos.x - nipple.position.x,
-        y: pos.y - nipple.position.y
+        x: xPosition,
+        y: yPosition
     };
 
     if (!opts.dataOnly) {
@@ -1083,7 +1113,9 @@ Collection.prototype.processOnMove = function (evt) {
             radian: rAngle,
             degree: angle
         },
-        instance: nipple
+        instance: nipple,
+        lockX: opts.lockX,
+        lockY: opts.lockY
     };
 
     // Compute the direction's datas.
@@ -1443,4 +1475,3 @@ return {
 };
 
 });
-
diff --git a/dist/nipplejs.min.js b/dist/nipplejs.min.js
diff --git a/src/collection.js b/src/collection.js
@@ -29,7 +29,9 @@ function Collection (manager, options) {
         fadeTime: 250,
         dataOnly: false,
         restJoystick: true,
-        restOpacity: 0.5
+        restOpacity: 0.5,
+        lockX: false,
+        lockY: false
     };
 
     self.config(options);
@@ -367,9 +369,19 @@ Collection.prototype.processOnMove = function (evt) {
         pos = u.findCoord(nipple.position, dist, angle);
     }
 
+    var xPosition = pos.x - nipple.position.x
+    var yPosition = pos.y - nipple.position.y
+
+    if (opts.lockX){
+        yPosition = 0
+    }
+    if (opts.lockY) {
+        xPosition = 0
+    }
+
     nipple.frontPosition = {
-        x: pos.x - nipple.position.x,
-        y: pos.y - nipple.position.y
+        x: xPosition,
+        y: yPosition
     };
 
     if (!opts.dataOnly) {
@@ -387,7 +399,9 @@ Collection.prototype.processOnMove = function (evt) {
             radian: rAngle,
             degree: angle
         },
-        instance: nipple
+        instance: nipple,
+        lockX: opts.lockX,
+        lockY: opts.lockY
     };
 
     // Compute the direction's datas.

diff --git a/src/nipple.js b/src/nipple.js
@@ -18,7 +18,9 @@ function Nipple (collection, options) {
         restJoystick: true,
         restOpacity: 0.5,
         mode: 'dynamic',
-        zone: document.body
+        zone: document.body,
+        lockX: false,
+        lockY: false
     };
 
     this.config(options);
@@ -300,13 +302,25 @@ Nipple.prototype.computeDirection = function (obj) {
     //      /   \
     //     /DOWN \
     //
-    if (rAngle > angle45 && rAngle < (angle45 * 3)) {
+    if (
+        rAngle > angle45 &&
+        rAngle < (angle45 * 3) &&
+        !obj.lockX
+    ) {
         direction = 'up';
-    } else if (rAngle > -angle45 && rAngle <= angle45) {
+    } else if (
+        rAngle > -angle45 &&
+        rAngle <= angle45 &&
+        !obj.lockY
+    ) {
         direction = 'left';
-    } else if (rAngle > (-angle45 * 3) && rAngle <= -angle45) {
+    } else if (
+        rAngle > (-angle45 * 3) &&
+        rAngle <= -angle45 &&
+        !obj.lockX
+    ) {
         direction = 'down';
-    } else {
+    } else if (!obj.lockY) {
         direction = 'right';
     }
 
@@ -315,16 +329,20 @@ Nipple.prototype.computeDirection = function (obj) {
     // _______               | RIGHT
     //                  LEFT |
     //   DOWN                |
-    if (rAngle > -angle90 && rAngle < angle90) {
-        directionX = 'left';
-    } else {
-        directionX = 'right';
+    if (!obj.lockY) {
+        if (rAngle > -angle90 && rAngle < angle90) {
+            directionX = 'left';
+        } else {
+            directionX = 'right';
+        }
     }
 
-    if (rAngle > 0) {
-        directionY = 'up';
-    } else {
-        directionY = 'down';
+    if (!obj.lockX) {
+        if (rAngle > 0) {
+            directionY = 'up';
+        } else {
+            directionY = 'down';
+        }
     }
 
     if (obj.force > this.options.threshold) {

diff --git a/src/utils.js b/src/utils.js
@@ -86,14 +86,14 @@ u.getScroll = function () {
 };
 
 u.applyPosition = function (el, pos) {
-    if (pos.x && pos.y) {
-        el.style.left = pos.x + 'px';
-        el.style.top = pos.y + 'px';
-    } else if (pos.top || pos.right || pos.bottom || pos.left) {
+    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';
     }
 };
 

diff --git a/test/index3.html b/test/index3.html
@@ -0,0 +1,61 @@
+<!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: 50%;
+            background: rgba(0, 255, 0, 0.1);
+        }
+
+        #right {
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+            width: 50%;
+            background: rgba(0, 0, 255, 0.1);
+        }
+        </style>
+    </head>
+    <body>
+        <div id="left"></div>
+        <div id="right"></div>
+        <script src="../dist/nipplejs.js" charset="utf-8"></script>
+        <script>
+        var joystickL = nipplejs.create({
+            zone: document.getElementById('left'),
+            mode: 'static',
+            position: { left: '20%', top: '50%' },
+            color: 'green',
+            size: 200,
+            lockX: true
+        });
+
+        var joystickR = nipplejs.create({
+            zone: document.getElementById('right'),
+            mode: 'static',
+            position: { left: '80%', top: '50%' },
+            color: 'red',
+            size: 200,
+            lockY: true
+        });
+        </script>
+    </body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,4 @@ @@
       ],
       "license": "MIT",
       "dependencies": {}
-    }
+    }