feat(improvement): restJoystick now accepts an object (#162)

* feat(improvement): restJoystick now accepts an object * fix: style fixes and removed duplicated restJoystick logic
yoannmoinet · Jun 28, 2021 · ce3a67d · ce3a67d
1 parent 92b627d
commit ce3a67d
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -140,7 +140,7 @@ var options = {
     dataOnly: Boolean,              // no dom element whatsoever
     position: Object,               // preset position for 'static' mode
     mode: String,                   // 'dynamic', 'static' or 'semi'
-    restJoystick: Boolean,
+    restJoystick: Boolean|Object,   // Re-center joystick on rest state
     restOpacity: Number,            // opacity when not 'dynamic' and rested
     lockX: Boolean,                 // only move on the X axis
     lockY: Boolean,                 // only move on the Y axis
@@ -245,6 +245,29 @@ Three modes are possible :
 ### `options.restJoystick` defaults to true
 Reset the joystick's position when it enters the rest state.
 
+You can pass a boolean value to reset the joystick's position for both the axis.
+```js
+var joystick = nipplejs.create({
+    restJoystick: true,
+    // This is converted to {x: true, y: true}
+
+    // OR
+    restJoystick: false,
+    // This is converted to {x: false, y: false}
+});
+```
+
+Or you can pass an object to specify which axis should be reset.
+```js
+var joystick = nipplejs.create({
+    restJoystick: {x: false},
+    // This is converted to {x: false, y: true}
+
+    // OR
+    restJoystick: {x: false, y: true},
+});
+```
+
 ### `options.restOpacity` defaults to 0.5
 The opacity to apply when the joystick is in a rest position.
 

diff --git a/example/reset-joystick.html b/example/reset-joystick.html
@@ -0,0 +1,65 @@
+<!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"></script>
+        <script>
+            var joystickL = nipplejs.create({
+                zone: document.getElementById("left"),
+                mode: "static",
+                position: { left: "30%", top: "50%" },
+                color: "green",
+                size: 200,
+                restJoystick: { y: false }
+            });
+
+            var joystickR = nipplejs.create({
+                zone: document.getElementById("right"),
+                mode: "static",
+                position: { left: "70%", top: "50%" },
+                color: "red",
+                size: 200,
+                restJoystick: false
+            });
+        </script>
+    </body>
+</html>
diff --git a/src/nipple.js b/src/nipple.js
@@ -240,8 +240,15 @@ Nipple.prototype.hide = function (cb) {
         },
         self.options.fadeTime
     );
+
     if (self.options.restJoystick) {
-        self.setPosition(cb, { x: 0, y: 0 });
+        const rest = self.options.restJoystick;
+        const newPosition = {};
+
+        newPosition.x = rest === true || rest.x !== false ? 0 : self.instance.frontPosition.x;
+        newPosition.y = rest === true || rest.y !== false ? 0 : self.instance.frontPosition.y;
+
+        self.setPosition(cb, newPosition);
     }
 
     return self;

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -114,7 +114,7 @@ export interface JoystickManagerOptions {
      *
      * Reset the joystick’s position when it enters the rest state.
      */
-    restJoystick?: boolean;
+    restJoystick?: boolean | RestJoystickOption;
 
     /**
      * Defaults to `0.5`
@@ -166,6 +166,17 @@ export interface JoystickManagerOptions {
     follow?: boolean;
 }
 
+export interface RestJoystickOption {
+    /**
+     * Defaults to `true`
+     */
+    x?: boolean,
+    /**
+     * Defaults to `true`
+     */
+    y?: boolean,
+}
+
 export interface Position {
     x: number;
     y: number;