Merge pull request #30 from orange-games/dev

v2 release

Author: AleBles

README.md

@@ -12,7 +12,9 @@ Key features:
 * Easy configurable
 * Production hardened
 
-
+*Imporant*
+From here on this library will be published and updated under [@orange-games/phaser-input](https://www.npmjs.com/package/@orange-games/phaser-input) at NPM, the old [phaser-input](https://www.npmjs.com/package/phaser-input) will no longer be maintained.
+If you are comming from v1 you can read the migration guide at the bottom
 Getting Started
 ---------------
 First you want to get a fresh copy of the plugin. You can get it from this repo or from npm, ain't that handy.
@@ -27,7 +29,7 @@ Next up you'd want to add it to your list of js sources you load into your game
 
 After adding the script to the page you can activate it by enabling the plugin:
 ```javascript
-game.add.plugin(Fabrique.Plugins.InputField);
+game.add.plugin(PhaserInput.Plugin);
 ```
 
 Usage
@@ -51,7 +53,7 @@ var password = game.add.inputField(10, 90, {
     borderColor: '#000',
     borderRadius: 6,
     placeHolder: 'Password',
-    type: Fabrique.InputType.password
+    type: PhaserInput.InputType.password
 });
 ```
 ### Using zoom
@@ -61,17 +63,17 @@ First of all, it's only meant for mobile. Second; it modifies the scale and pivo
 
 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.
+Ideally you use a custom resize event, check for the static property `PhaserInput.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();
-                });
+PhaserInput.onKeyboardClose.addOnce(function() {
+    this.resizeBackgroundImage();
+});
 ```
 
 ### Capture input events
@@ -125,6 +127,17 @@ Tested on:
   * Chrome 48+
   * iOS 9+
 
+Migrating from v1
+-----------------
+the API of the objects is the same as before but the namespace changed. We decided to remove the Fabrique namespace, and house the plugin in it's own (PhaserInput).
+so:
+Fabrique.Plugins.Input
+becomes:
+PhaserInput.Plugin
+
+and all other references of Fabrique.Plugins can be replaced with PhaserInput.
+If you are still unsure how or what, both the example and this readme have been adjusted to work with the new namespace.
+
 FAQ
 ---
 ### I Don't see the cursor blinking!
@@ -138,6 +151,25 @@ update: function () {
 },
 ```
 
+### How do I focus on the element!
+Normally the element is only focused trough user interaction (due to mobile limitations) you can get around this by manually calling the focus method yourself:
+```javascript
+var input = game.add.inputField(10, 90);
+//start with focus on the element
+input.startFocus();
+
+//and then end the focus
+input.endFocus();
+```
+Please note that this will not work on mobile wihtout a  user interaction
+
+### Can I change the width later on in the code?
+Well thanks for asking, yes you can!
+```javascript
+var input = game.add.inputField(10, 90);
+input.width = 200;
+```
+
 Credits
 -------
 phaser-input is inspired by [CanvasInput](https://github.com/goldfire/CanvasInput)

build/phaser-input.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../node_modules/phaser/typescript/pixi.d.ts" />
 /// <reference path="../node_modules/phaser/typescript/phaser.d.ts" />
-declare module Fabrique {
+declare module PhaserInput {
     enum InputType {
         text = 0,
         password = 1,
@@ -32,7 +32,7 @@ declare module Fabrique {
         setCaretPosition(pos: number): void;
     }
 }
-declare module Fabrique {
+declare module PhaserInput {
     interface InputOptions extends Phaser.PhaserTextStyle {
         x?: number;
         y?: number;
@@ -68,7 +68,9 @@ declare module Fabrique {
         private selection;
         private windowScale;
         blockInput: boolean;
+        width: number;
         constructor(game: Phaser.Game, x: number, y: number, inputOptions?: InputOptions);
+        private updateTextAlignment();
         private checkDown(e);
         private blink;
         private cnt;
@@ -89,12 +91,22 @@ declare module Fabrique {
         setText(text?: string): void;
     }
 }
-declare module Fabrique {
+declare module PhaserInput {
     class InputBox extends Phaser.Graphics {
+        private bgColor;
+        private borderRadius;
+        private borderColor;
+        private borderWidth;
+        private boxAlpha;
+        private boxHeight;
+        private padding;
+        private boxWidth;
         constructor(game: Phaser.Game, inputOptions: InputOptions);
+        resize(newWidth: number): void;
+        private drawBox();
     }
 }
-declare module Fabrique {
+declare module PhaserInput {
     class SelectionHighlight extends Phaser.Graphics {
         private inputOptions;
         constructor(game: Phaser.Game, inputOptions: InputOptions);
@@ -107,30 +119,36 @@ declare module Fabrique {
         }): number;
     }
 }
-declare module Fabrique {
+declare module PhaserInput {
     class TextMask extends Phaser.Graphics {
+        private maskWidth;
+        private maskHeight;
         constructor(game: Phaser.Game, inputOptions: InputOptions);
+        resize(newWidth: number): void;
+        private drawMask();
     }
 }
-declare module Fabrique {
-    module Plugins {
-        interface InputFieldObjectFactory extends Phaser.GameObjectFactory {
-            inputField: (x: number, y: number, inputOptions?: Fabrique.InputOptions, group?: Phaser.Group) => Fabrique.InputField;
-        }
-        interface InputFieldObjectCreator extends Phaser.GameObjectCreator {
-            inputField: (x: number, y: number, inputOptions?: Fabrique.InputOptions) => Fabrique.InputField;
-        }
-        interface InputFieldGame extends Phaser.Game {
-            add: InputFieldObjectFactory;
-            make: InputFieldObjectCreator;
-        }
-        class InputField extends Phaser.Plugin {
-            static Zoomed: boolean;
-            static KeyboardOpen: boolean;
-            static onKeyboardOpen: Phaser.Signal;
-            static onKeyboardClose: Phaser.Signal;
-            constructor(game: Phaser.Game, parent: Phaser.PluginManager);
-            private addInputFieldFactory();
-        }
+declare module PhaserInput {
+    var Zoomed: boolean;
+    var KeyboardOpen: boolean;
+    const onKeyboardOpen: Phaser.Signal;
+    const onKeyboardClose: Phaser.Signal;
+    interface InputFieldObjectFactory extends Phaser.GameObjectFactory {
+        inputField: (x: number, y: number, inputOptions?: PhaserInput.InputOptions, group?: Phaser.Group) => PhaserInput.InputField;
+    }
+    interface InputFieldObjectCreator extends Phaser.GameObjectCreator {
+        inputField: (x: number, y: number, inputOptions?: PhaserInput.InputOptions) => PhaserInput.InputField;
+    }
+    interface InputFieldGame extends Phaser.Game {
+        add: InputFieldObjectFactory;
+        make: InputFieldObjectCreator;
+    }
+    class Plugin extends Phaser.Plugin {
+        static Zoomed: boolean;
+        static KeyboardOpen: boolean;
+        static onKeyboardOpen: Phaser.Signal;
+        static onKeyboardClose: Phaser.Signal;
+        constructor(game: Phaser.Game, parent: Phaser.PluginManager);
+        private addInputFieldFactory();
     }
 }