From 38e00d3ff3e9f2ab62736b21f1021004735be53c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Dumanoir?= <kevin.dumanoir@jeu.video>
Date: Fri, 1 May 2020 13:42:54 +0200
Subject: [PATCH] feat: Add option to display joystick before touch in
 semi/static mode

This feature brings new customizations for semi and static mode. In static mode,
you can now choose to hide joystick before touch event. In semi mode, you can
display joystick before touch event, only if position option has been overridden.
This constraint has been implemented to maintain previous behavior.
---
 README.md         | 7 ++++++-
 src/collection.js | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 6cdafde..be46083 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,7 @@
   * [`options.restJoystick` defaults to true](#optionsrestjoystick-defaults-to-true)
   * [`options.restOpacity` defaults to 0.5](#optionsrestopacity-defaults-to-05)
   * [`options.catchDistance` defaults to 200](#optionscatchdistance-defaults-to-200)
+  * [`options.displayBeforeTouch` defaults to true](#optionsdisplaybeforetouch-defaults-to-true)
 - [API](#api)
   * [NippleJS instance (manager)](#nipplejs-instance-manager)
     + [`manager.on(type, handler)`](#managerontype-handler)
@@ -142,7 +143,8 @@ var options = {
     lockY: Boolean,                 // only move on the Y axis
     catchDistance: Number,          // distance to recycle previous joystick in
                                     // 'semi' mode
-    dynamicPage: Boolean,          // Enable if the page has dynamically visible elements
+    dynamicPage: Boolean,           // Enable if the page has dynamically visible elements
+    displayBeforeTouch: Boolean     // Enable joystick display before any touch event
 };
 ```
 
@@ -257,6 +259,9 @@ 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.
 
+### `options.displayBeforeTouch` defaults to true
+Enable joystick display before any touch event. In `semi` mode, make sure `position` option has been overridden. 
+
 ----
 
 ## API
diff --git a/src/collection.js b/src/collection.js
index 95817c8..2dbb733 100644
--- 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,
+        displayBeforeTouch: true,
     };
 
     self.config(options);
@@ -101,7 +102,9 @@ Collection.prototype.begin = function () {
 
     // We place our static nipple
     // if needed.
-    if (opts.mode === 'static') {
+    var isModeReadyForDisplay = opts.mode === 'static' ||
+        opts.mode === 'semi' && opts.position !== self.defaults.position;
+    if (opts.displayBeforeTouch === true && isModeReadyForDisplay === true) {
         var nipple = self.createNipple(
             opts.position,
             self.manager.getIdentifier()