Add origEvent Property to Expose Original DOM Events

example/codepen-demo.html

@@ -165,6 +165,15 @@
                             <li class="angle">angle : <span class='data'></span></li>
                         </ul>
                     </li>
+                    <li class="origEvent">
+                        origEvent :
+                        <ul>
+                            <li class="type">type : <span class='data'></span></li>
+                            <li class="buttons">buttons : <span class='data'></span></li>
+                            <li class="clientX">clientX : <span class='data'></span></li>
+                            <li class="clientY">clientY : <span class='data'></span></li>
+                        </ul>
+                    </li>
                 </ul>
                 <div class="dump"></div>
             </div>
@@ -223,6 +232,12 @@
                     x: elDebug.querySelector('.direction .x .data'),
                     y: elDebug.querySelector('.direction .y .data'),
                     angle: elDebug.querySelector('.direction .angle .data')
+                },
+                origEvent: {
+                    type: elDebug.querySelector('.origEvent .type .data'),
+                    buttons: elDebug.querySelector('.origEvent .buttons .data'),
+                    clientX: elDebug.querySelector('.origEvent .clientX .data'),
+                    clientY: elDebug.querySelector('.origEvent .clientY .data')
                 }
             };
 
@@ -238,6 +253,11 @@
 
             createNipple('dynamic');
 
+            // Disable context menu
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
+
             function bindNipple () {
                 joystick.on('start end', function (evt, data) {
                     dump(evt.type);

example/dual-joysticks.html

@@ -54,6 +54,11 @@
                 color: 'red',
                 size: 200
             });
+
+            // Disable context menu
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
         </script>
     </body>
 </html>

example/lock-axes.html

@@ -56,6 +56,11 @@
                 size: 200,
                 lockY: true
             });
+
+            // Disable context menu
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
         </script>
     </body>
 </html>

example/reset-joystick.html

@@ -60,6 +60,11 @@
                 size: 200,
                 restJoystick: false
             });
+
+            // Disable context menu
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
         </script>
     </body>
 </html>

example/square-dual-joysticks.html

@@ -60,6 +60,11 @@
                 size: 200,
                 shape: "square"
             });
+
+            // Disable context menu
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
         </script>
     </body>
 </html>

src/collection.js

@@ -294,6 +294,7 @@ Collection.prototype.processOnStart = function (evt) {
         self.manager.removeIdentifier(nipple.identifier);
     }
     nipple.identifier = identifier;
+    nipple.origEvent = evt;
 
     var process = function (nip) {
         // Trigger the start.
@@ -372,6 +373,8 @@ Collection.prototype.processOnMove = function (evt) {
     var nipple = self.nipples.get(identifier);
     var scroll = self.manager.scroll;
 
+    nipple.origEvent = evt;
+
     // If we're moving without pressing
     // it's that we went out the active zone
     if (!u.isPressed(evt)) {
@@ -397,6 +400,7 @@ Collection.prototype.processOnMove = function (evt) {
     }
 
     nipple.identifier = identifier;
+    nipple.origEvent = evt;
 
     var size = nipple.options.size / 2;
     var pos = {
@@ -482,7 +486,8 @@ Collection.prototype.processOnMove = function (evt) {
         raw: raw,
         instance: nipple,
         lockX: opts.lockX,
-        lockY: opts.lockY
+        lockY: opts.lockY,
+        origEvent: nipple.origEvent
     };
 
     // Compute the direction's datas.
@@ -510,6 +515,9 @@ Collection.prototype.processOnEnd = function (evt) {
         return;
     }
 
+    // Store the original event
+    nipple.origEvent = evt;
+
     if (!opts.dataOnly) {
         nipple.hide(function () {
             if (opts.mode === 'dynamic') {

types/index.d.ts

@@ -208,6 +208,7 @@ export interface JoystickOutputData {
     instance: Joystick;
     position: Position;
     pressure: number;
+    origEvent: Event;
 }
 
 export type JoystickEventTypes =
@@ -314,11 +315,11 @@ export class JoystickManager {
 
     on(
         type: JoystickManagerEventTypes | JoystickManagerEventTypes[],
-        handler: (evt: EventData, data: JoystickOutputData) => void
+        handler: (evt: EventData, data: JoystickOutputData | Joystick) => void
     ): void;
     off(
         type: JoystickManagerEventTypes | JoystickManagerEventTypes[],
-        handler: (evt: EventData, data: JoystickOutputData) => void
+        handler: (evt: EventData, data: JoystickOutputData | Joystick) => void
     ): void;
     get(identifier: number): Joystick;
     destroy(): void;
@@ -341,11 +342,11 @@ export interface Collection {
 export interface Joystick {
     on(
         type: JoystickEventTypes | JoystickEventTypes[],
-        handler: (evt: EventData, data: JoystickOutputData) => void
+        handler: (evt: EventData, data: JoystickOutputData | Joystick) => void
     ): void;
     off(
         type: JoystickEventTypes | JoystickEventTypes[],
-        handler: (evt: EventData, data: JoystickOutputData) => void
+        handler: (evt: EventData, data: JoystickOutputData | Joystick) => void
     ): void;
     el: HTMLElement;
     show(cb?: () => void): void;
@@ -367,6 +368,7 @@ export interface Joystick {
         back: HTMLElement;
     };
     options: JoystickManagerOptions;
+    origEvent: Event;
 }
 
 /**