added support for zoom/focus on input field, added support for the return/enter key.

Author: AleBles

README.md

@@ -3,6 +3,15 @@ Phaser Input
 
 Some description here about how awesome this Phaser Input library is, because it works on Canvas AND WebGL. Oh did I mention mobile to? no? Well it supports mobile..
 
+Key features:
+
+* Works on mobile and Desktop
+* Included TypeScript support
+* Also runs under WebGL renderer
+* Pure Phaser implementation
+* Easy configurable
+* Production hardened
+
 
 Getting Started
 ---------------
@@ -21,8 +30,9 @@ After adding the script to the page you can activate it by enabling the plugin:
 game.add.plugin(Fabrique.Plugins.Input);
 ```
 
-Adding a InputField
--------------------
+Usage
+-----
+### Adding a InputField
 The simpelest way of adding a input field is:
 ```javascript
 var input = game.add.inputField(10, 90);
@@ -44,13 +54,21 @@ var password = game.add.inputField(10, 90, {
     type: Fabrique.InputType.password
 });
 ```
+### Using zoom
+Zooming is easy to enable on an input field, it can be passed to the InputField as a setting. But there are some caveats:
+
+First of all, it's only meant for mobile. Second; it modifies the scale and pivot of the world, and that might interfere with your resize.
+
+Also, when the keyboard is shown, sometimes a resize event will be triggered.
 
-Current Limitations
--------------------
+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.
+
+
+### Current Limitations
  - Updates are slow when typing fast (type slower you!!)
+ - Zoom modifies the pivot and scal eof the world, so it might interfere with some stuff
 
-Properties
-----------
+## Properties
  - **x**: number (0 by default) The X-coordinate in the game
  - **y**: number (0 by default) The Y-coordinate in the game
  - **fill**: string (#fff by default) The color of the inputted text
@@ -70,9 +88,9 @@ Properties
  - **min**: string (none by default) The minimum number for the input field, only for number input fields
  - **max**: string (none by default) The maximum number for the number input field, or the maxLength for other input fields
  - **selectionColor**: string (rgba(179, 212, 253, 0.8) by default) The default color for the text selection highlight.
+ - **zoom**: boolean (false by default) if we need to  zoom onto the input field (mobile only).
 
-Browser Support
----------------
+### Browser Support
 Tested on:
  - Desktop
   * Chrome 48+
@@ -82,40 +100,13 @@ Tested on:
   * Chrome 48+
   * iOS 9+
 
-Changelog
----------
-### 1.0.0
-* Updated example
-* Added masking for texts so they don't overflow the box anymore
-* Combined max/maxLength
-* Moved dom manipulation to seperate class
-* Added option for aligning texts
-* Keyboard can now be used to update caret position
-* Clicking in the input field now changes the caret position
-* ctrl+a can be used to select text
-
-### 0.1.4
-* You can now reset text
-* Only nummeric input now also possible as type
-* You can now specify a max length (text/password) or min/max (number)
-
-### 0.1.3
-* Fixed an issue where input wouldn't appear on Desktop Firefox and Safari
-
-### 0.1.2
-* Fixed a small issue when no placeHolder was set
-
-### 0.1.1
-* Fixed sprite texture glitch in WebGL renderers
-* Appended properties with the inherited Phaser.PhaserTextStyle properties that are used
-* added the possibility to change the cursor color
-* made the options parameter optional
-
-### 0.1.0
-* Full Android/iOS support
+Credits
+-------
+phaser-input is inspired by [CanvasInput](https://github.com/goldfire/CanvasInput)
 
 Disclaimer
 ----------
 We at OrangeGames just love playing and creating awesome games. We aren't affiliated with Phaser.io. We just needed some awesome input boxes in our awesome HTML5 games. Feel free to use it for enhancing your own awesome games!
 
-Released under the MIT license
+Phaser Input is distributed under the MIT license. All 3rd party libraries and components are distributed under their
+respective license terms.

build/phaser-input.d.ts

@@ -9,13 +9,17 @@ declare module Fabrique {
         private callback;
         private type;
         private id;
-        constructor(id: string, type?: InputType, value?: string);
+        private game;
+        focusIn: Phaser.Signal;
+        focusOut: Phaser.Signal;
+        constructor(game: Phaser.Game, id: string, type?: InputType, value?: string);
         addKeyUpListener(callback: () => void): void;
         removeEventListener(): void;
         destroy(): void;
         setMax(max: string, min?: string): void;
         value: string;
         focus(): void;
+        blur(): void;
         hasSelection: boolean;
         caretStart: number;
         caretEnd: number;
@@ -42,6 +46,7 @@ declare module Fabrique {
         max?: string;
         textAlign?: string;
         selectionColor?: string;
+        zoom?: boolean;
     }
     class InputField extends Phaser.Sprite {
         private placeHolder;
@@ -106,10 +111,12 @@ declare module Fabrique {
          * This checks if a select has been made, and if so highlight it with blue
          */
         private updateSelection();
+        private zoomIn();
+        private zoomOut();
         /**
          * Event fired when a key is pressed, it takes the value from the hidden input field and adds it as its own
          */
-        private keyListener();
+        private keyListener(evt);
         /**
          * We overwrite the destroy method because we want to delete the (hidden) dom element when the inputField was removed
          */
@@ -156,6 +163,8 @@ declare module Fabrique {
             make: InputFieldObjectCreator;
         }
         class InputField extends Phaser.Plugin {
+            static Zoomed: boolean;
+            static KeyboardOpen: boolean;
             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

@@ -39,6 +39,10 @@
         }
 
         function create(){
+            if (!game.device.desktop) {
+                game.scale.setGameSize(window.innerWidth, window.innerHeight);
+            }
+
             //let's add a nice background
             game.add.image(0, 0, 'bg');
 
@@ -64,7 +68,8 @@
                 borderColor: '#000',
                 borderRadius: 6,
                 placeHolder: 'Username',
-                textAlign: 'center'
+                textAlign: 'center',
+                zoom: true
             });
 
             //We'd need a password too
@@ -81,7 +86,8 @@
                 borderColor: '#000',
                 borderRadius: 6,
                 placeHolder: 'Password',
-                type: Fabrique.InputType.password
+                type: Fabrique.InputType.password,
+                zoom: true
             });
 
             //Let's not forget about age?!
@@ -100,7 +106,8 @@
                 min: '18',
                 max: '99',
                 placeHolder: 'Your age',
-                type: Fabrique.InputType.number
+                type: Fabrique.InputType.number,
+                zoom: true
             });
 
             var submitBtn = game.add.nineSlice(game.width / 2 - 100, 360, 'btn', 100, 70);

build/phaser-input.js.map

@@ -1,7 +1,7 @@
 {
   "name": "phaser-input",
   "author": "OrangeGames",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.",
   "contributors": [
     {

example/index.html

@@ -15,9 +15,16 @@ module Fabrique {
 
         private id: string;
 
-        constructor(id: string, type: InputType = InputType.text, value: string = '') {
+        private game: Phaser.Game;
+
+        public focusIn: Phaser.Signal = new Phaser.Signal();
+
+        public focusOut: Phaser.Signal = new Phaser.Signal();
+
+        constructor(game: Phaser.Game, id: string, type: InputType = InputType.text, value: string = '') {
             this.id = id;
             this.type = type;
+            this.game = game;
 
             this.element = document.createElement('input');
 
@@ -28,6 +35,14 @@ module Fabrique {
             this.element.value = this.value;
             this.element.type = InputType[type];
 
+
+            this.element.addEventListener('focusin', (): void => {
+                this.focusIn.dispatch();
+            });
+            this.element.addEventListener('focusout', (): void => {
+                this.focusOut.dispatch()
+            });
+
             document.body.appendChild(this.element);
         }
 
@@ -71,6 +86,28 @@ module Fabrique {
 
         public focus(): void {
             this.element.focus();
+            console.log('focussing');
+            if (!this.game.device.desktop && this.game.device.chrome) {
+                let originalWidth = window.innerWidth,
+                    originalHeight = window.innerHeight;
+
+                let kbAppeared: boolean = false;
+                let interval: number = setInterval((): void => {
+                    console.log(originalWidth, window.innerWidth, originalHeight, window.innerHeight)
+                    if (originalWidth > window.innerWidth || originalHeight > window.innerHeight) {
+                        kbAppeared = true;
+                    }
+
+                    if (kbAppeared && originalWidth === window.innerWidth && originalHeight === window.innerHeight) {
+                        this.focusOut.dispatch();
+                        clearInterval(interval);
+                    }
+                }, 50);
+            }
+        }
+
+        public blur(): void {
+            this.element.blur();
         }
 
         get hasSelection () {

package.json

@@ -18,6 +18,7 @@ module Fabrique {
         max?: string;
         textAlign?: string;
         selectionColor?: string;
+        zoom?: boolean;
     }
 
     export class InputField extends Phaser.Sprite {
@@ -56,6 +57,7 @@ module Fabrique {
             this.inputOptions.height = inputOptions.height || 14;
             this.inputOptions.fillAlpha = (inputOptions.fillAlpha === undefined) ? 1 : inputOptions.fillAlpha;
             this.inputOptions.selectionColor = inputOptions.selectionColor || 'rgba(179, 212, 253, 0.8)';
+            this.inputOptions.zoom = (!game.device.desktop) ? inputOptions.zoom || false : false;
 
             //create the input box
             this.box = new InputBox(this.game, inputOptions);
@@ -66,7 +68,7 @@ module Fabrique {
             this.addChild(this.textMask);
 
             //Create the hidden dom elements
-            this.domElement = new InputElement('phaser-input-' + (Math.random() * 10000 | 0).toString(), this.inputOptions.type, this.value);
+            this.domElement = new InputElement(this.game, 'phaser-input-' + (Math.random() * 10000 | 0).toString(), this.inputOptions.type, this.value);
             this.domElement.setMax(this.inputOptions.max, this.inputOptions.min);
 
             this.selection = new SelectionHighlight(this.game, this.inputOptions);
@@ -125,6 +127,14 @@ module Fabrique {
             this.input.useHandCursor = true;
 
             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();
+                    }
+                }
+            })
         }
 
         /**
@@ -150,9 +160,15 @@ module Fabrique {
                 }
 
                 this.startFocus();
+                if (this.inputOptions.zoom) {
+                    this.zoomIn();
+                }
             } else {
                 if (this.focus === true) {
-                    this.endFocus()
+                    this.endFocus();
+                    if (this.inputOptions.zoom) {
+                        this.zoomOut();
+                    }
                 }
             }
         }
@@ -190,6 +206,19 @@ module Fabrique {
                 this.placeHolder.visible = true;
             }
             this.cursor.visible = false;
+
+            if (this.game.device.desktop) {
+                //Timeout is a chrome hack
+                setTimeout(() => {
+                    this.domElement.blur();
+                }, 0);
+            } else {
+                this.domElement.blur();
+            }
+
+            if (!this.game.device.desktop) {
+                Plugins.InputField.KeyboardOpen = false;
+            }
         }
 
         /**
@@ -207,6 +236,9 @@ module Fabrique {
                 this.domElement.focus();
             }
 
+            if (!this.game.device.desktop) {
+                Plugins.InputField.KeyboardOpen = true;
+            }
         }
 
         /**
@@ -357,14 +389,47 @@ module Fabrique {
                 this.selection.clear();
             }
         }
+        
+        private zoomIn(): void {
+            if (Plugins.InputField.Zoomed) {
+                return;
+            }
+
+            let windowScale: number;
+            if (window.innerHeight > window.innerWidth) {
+                windowScale = this.game.width / (this.width * 1.5);
+            } else {
+                windowScale = (this.game.width / 2) / (this.width * 1.5);
+            }
+
+            let offsetX: number = ((this.game.width - this.width * 1.5) / 2) / windowScale;
+            this.game.world.scale.set(windowScale);
+            this.game.world.pivot.set(this.x - offsetX, this.y - this.inputOptions.padding * 2);
+            Plugins.InputField.Zoomed = true;
+        }
+
+        private zoomOut(): void {
+            if (!Plugins.InputField.Zoomed) {
+                return;
+            }
+
+            this.game.world.scale.set(1);
+            this.game.world.pivot.set(0, 0);
+            Plugins.InputField.Zoomed = false;
+        }
 
         /**
          * Event fired when a key is pressed, it takes the value from the hidden input field and adds it as its own
          */
-        private keyListener()
+        private keyListener(evt: KeyboardEvent)
         {
             this.value = this.domElement.value;
 
+            if (evt.keyCode === 13) {
+                this.endFocus();
+                return;
+            }
+
             this.updateText();
             this.updateCursor();
             this.updateSelection();

ts/InputElement.ts

@@ -14,6 +14,9 @@ module Fabrique {
         }
 
         export class InputField extends Phaser.Plugin {
+            public static Zoomed: boolean = false;
+            public static KeyboardOpen: boolean = false;
+
             constructor(game:Phaser.Game, parent:PIXI.DisplayObject) {
                 super(game, parent);