Added keyboard close/open signals

Author: amyg

README.md

@@ -63,6 +63,16 @@ Also, when the keyboard is shown, sometimes a resize event will be triggered.
 
 Ideally you use a custom resize event, check for the static property `Fabrique.Plugins.InputField.KeyboardOpen` and don't resize when it's set to true.
 
+### Using keyboard open/close signals
+Current version includes two event dispatchers that notify when a device keyboard is opened or closed.
+
+You can add listeners which trigger events based on this feedback.
+
+```javascript
+Fabrique.Plugins.InputField.onKeyboardClose.addOnce(function() {
+                    this.resizeBackgroundImage();
+                });
+```
 
 ### Current Limitations
  - Updates are slow when typing fast (type slower you!!)

build/phaser-input.d.ts

@@ -166,6 +166,8 @@ declare module Fabrique {
         class InputField extends Phaser.Plugin {
             static Zoomed: boolean;
             static KeyboardOpen: boolean;
+            static onKeyboardOpen: Phaser.Signal;
+            static onKeyboardClose: Phaser.Signal;
             constructor(game: Phaser.Game, parent: PIXI.DisplayObject);
             /**
              * Extends the GameObjectFactory prototype with the support of adding InputField. this allows us to add InputField methods to the game just like any other object:

build/phaser-input.js

@@ -143,6 +143,14 @@
                 password.resetText();
                 age.resetText();
             });
+
+            Fabrique.Plugins.InputField.onKeyboardOpen.add(function () {
+                console.error("keyboard open", Fabrique.Plugins.InputField.KeyboardOpen)
+            });
+            Fabrique.Plugins.InputField.onKeyboardClose.add(function () {
+                console.error("keyboard close", Fabrique.Plugins.InputField.KeyboardOpen)
+            });
+
         }
     </script>
 </head>

build/phaser-input.js.map

@@ -1,7 +1,7 @@
 {
   "name": "phaser-input",
   "author": "OrangeGames",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.",
   "contributors": [
     {
@@ -28,6 +28,7 @@
     "grunt-contrib-watch": "^0.6.1",
     "grunt-typescript": "0.8.0",
     "phaser": "2.4.6",
+    "phaser-nineslice": "^1.0.0",
     "typescript": "1.8.x"
   },
   "engines": {

build/phaser-input.min.js

@@ -92,7 +92,7 @@ module Fabrique {
 
                 let kbAppeared: boolean = false;
                 let interval: number = setInterval((): void => {
-                    console.log(originalWidth, window.innerWidth, originalHeight, window.innerHeight)
+                    //console.log(originalWidth, window.innerWidth, originalHeight, window.innerHeight)
                     if (originalWidth > window.innerWidth || originalHeight > window.innerHeight) {
                         kbAppeared = true;
                     }

example/index.html

@@ -130,13 +130,15 @@ module Fabrique {
 
             this.game.input.onDown.add(this.checkDown, this);
             this.domElement.focusOut.add((): void => {
+
                 if (Plugins.InputField.KeyboardOpen) {
+
                     this.endFocus();
                     if (this.inputOptions.zoom) {
                         this.zoomOut();
                     }
                 }
-            })
+            });
         }
 
         /**
@@ -219,6 +221,7 @@ module Fabrique {
 
             if (!this.game.device.desktop) {
                 Plugins.InputField.KeyboardOpen = false;
+                Plugins.InputField.onKeyboardClose.dispatch();
             }
         }
 
@@ -239,6 +242,7 @@ module Fabrique {
 
             if (!this.game.device.desktop) {
                 Plugins.InputField.KeyboardOpen = true;
+                Plugins.InputField.onKeyboardOpen.dispatch();
             }
         }
 

package.json

@@ -16,6 +16,8 @@ module Fabrique {
         export class InputField extends Phaser.Plugin {
             public static Zoomed: boolean = false;
             public static KeyboardOpen: boolean = false;
+            public static onKeyboardOpen: Phaser.Signal = new Phaser.Signal();
+            public static onKeyboardClose: Phaser.Signal = new Phaser.Signal();
 
             constructor(game:Phaser.Game, parent:PIXI.DisplayObject) {
                 super(game, parent);