Mouse Scroll Events - device separation

- The wheel event type is now determined in by Device

- The various input checking in Device have been moved to a new function

Author: pnstickne

src/input/Mouse.js

@@ -245,24 +245,19 @@ Phaser.Mouse.prototype = {
             window.addEventListener('mouseup', this._onMouseUpGlobal, true);
             this.game.canvas.addEventListener('mouseover', this._onMouseOver, true);
             this.game.canvas.addEventListener('mouseout', this._onMouseOut, true);
+        }
 
-            // (These can probably be moved out of the cocoonJS check)
-            // See https://developer.mozilla.org/en-US/docs/Web/Events/wheel
-            if ('onwheel' in window || 'WindowEvent' in window)
-            {
-                // DOM3 Wheel Event: FF 17+, IE 9+, Chrome 31+, Safari 7+
-                this.game.canvas.addEventListener('wheel', this._onMouseWheel, true);
-            }
-            else if ('onmousewheel' in window)
+        var wheelEvent = this.game.device.wheelEvent;
+        if (wheelEvent)
+        {
+            this.game.canvas.addEventListener(wheelEvent, this._onMouseWheel, true);
+
+            if (wheelEvent === 'mousewheel')
             {
-                // Non-FF legacy: IE 6-9, Chrome 1-31, Safari 5-7.
-                this.game.canvas.addEventListener('mousewheel', this._onMouseWheel, true);
                 this._wheelEvent = new WheelEventProxy(-1/40, 1);
             }
-            else if ('MouseScrollEvent' in window)
+            else if (wheelEvent === 'DOMMouseScroll')
             {
-                // FF prior to 17. This should probably be scrubbed.
-                this.game.canvas.addEventListener('DOMMouseScroll', this._onMouseWheel, true);
                 this._wheelEvent = new WheelEventProxy(1, 1);
             }
         }
@@ -563,9 +558,11 @@ Phaser.Mouse.prototype = {
         this.game.canvas.removeEventListener('mouseover', this._onMouseOver, true);
         this.game.canvas.removeEventListener('mouseout', this._onMouseOut, true);
 
-        this.game.canvas.removeEventListener('wheel', this._onMouseWheel, true);
-        this.game.canvas.removeEventListener('mousewheel', this._onMouseWheel, true);
-        this.game.canvas.removeEventListener('DOMMouseScroll', this._onMouseWheel, true);
+        var wheelEvent = this.game.device.wheelEvent;
+        if (wheelEvent)
+        {
+            this.game.canvas.removeEventListener(wheelEvent, this._onMouseWheel, true);
+        }
 
         window.removeEventListener('mouseup', this._onMouseUpGlobal, true);
 
@@ -656,12 +653,12 @@ Object.defineProperties(WheelEventProxy.prototype, {
     "deltaMode": { get: function () { return this._deltaMode; } },
     "deltaY": {
         get: function () {
-            return this._scaleFactor * (this.originalEvent.detail || this.originalEvent.wheelDelta || 0);
+            return (this._scaleFactor * (this.originalEvent.wheelDelta || this.originalEvent.detail)) || 0;
         }
     },
     "deltaX": {
         get: function () {
-            return this._scaleFactor * (this.originalEvent.wheelDeltaX || 0);
+            return (this._scaleFactor * this.originalEvent.wheelDeltaX) || 0;
         }
     },
     "deltaZ": { value: 0 }

src/system/Device.js

@@ -147,18 +147,6 @@ Phaser.Device = function (game) {
     */
     this.worker = false;
 
-    /**
-    * @property {boolean} touch - Is touch available?
-    * @default
-    */
-    this.touch = false;
-
-    /**
-    * @property {boolean} mspointer - Is mspointer available?
-    * @default
-    */
-    this.mspointer = false;
-
     /**
     * @property {boolean} css3D - Is css3D available?
     * @default
@@ -195,6 +183,27 @@ Phaser.Device = function (game) {
     */
     this.quirksMode = false;
 
+    //  Input
+
+    /**
+    * @property {boolean} touch - Is touch available?
+    * @default
+    */
+    this.touch = false;
+
+    /**
+    * @property {boolean} mspointer - Is mspointer available?
+    * @default
+    */
+    this.mspointer = false;
+
+    /**
+    * @property {string|null} wheelType - The newest type of Wheel/Scroll event supported: 'wheel', 'mousewheel', 'DOMMouseScroll'
+    * @default
+    * @protected
+    */
+    this.wheelEvent = null;
+
     //  Browser
 
     /**
@@ -401,6 +410,7 @@ Phaser.Device = function (game) {
     this._checkCSS3D();
     this._checkDevice();
     this._checkFeatures();
+    this._checkInput();
 
 };
 
@@ -500,7 +510,24 @@ Phaser.Device.prototype = {
 
         this.worker = !!window['Worker'];
 
-        if ('ontouchstart' in document.documentElement || (window.navigator.maxTouchPoints && window.navigator.maxTouchPoints > 1))
+        this.pointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
+
+        this.quirksMode = (document.compatMode === 'CSS1Compat') ? false : true;
+
+        this.getUserMedia = !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+
+    },
+
+    /**
+    * Checks/configures various input.
+    *
+    * @method Phaser.Device#checkInput
+    * @private
+    */
+    _checkInput: function () {
+
+        if ('ontouchstart' in document.documentElement ||
+            (window.navigator.maxTouchPoints && window.navigator.maxTouchPoints > 1))
         {
             this.touch = true;
         }
@@ -510,11 +537,25 @@ Phaser.Device.prototype = {
             this.mspointer = true;
         }
 
-        this.pointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
-
-        this.quirksMode = (document.compatMode === 'CSS1Compat') ? false : true;
-
-        this.getUserMedia = !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+        if (!this.cocoonJS)
+        {
+            // See https://developer.mozilla.org/en-US/docs/Web/Events/wheel
+            if ('onwheel' in window || (this.ie && 'WheelEvent' in window))
+            {
+                // DOM3 Wheel Event: FF 17+, IE 9+, Chrome 31+, Safari 7+
+                this.wheelEvent = 'wheel';
+            }
+            else if ('onmousewheel' in window)
+            {
+                // Non-FF legacy: IE 6-9, Chrome 1-31, Safari 5-7.
+                this.wheelEvent = 'mousewheel';
+            }
+            else if (this.firefox && 'MouseScrollEvent' in window)
+            {
+                // FF prior to 17. This should probably be scrubbed.
+                this.wheelEvent = 'DOMMouseScroll';
+            }
+        }
 
     },