phaser-input - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

build/phaser-input.d.ts

@@ -12,3 +12,6 @@ declare module Fabrique {
         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;
@@ -20,2 +23,3 @@ removeEventListener(): void;
         focus(): void;
+        blur(): void;
         hasSelection: boolean;
@@ -47,2 +51,3 @@ caretStart: number;
         selectionColor?: string;
+        zoom?: boolean;
     }
@@ -112,6 +117,8 @@ class InputField extends Phaser.Sprite {
         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);
         /**
@@ -163,2 +170,4 @@ * We overwrite the destroy method because we want to delete the (hidden) dom element when the inputField was removed
         class InputField extends Phaser.Plugin {
+            static Zoomed: boolean;
+            static KeyboardOpen: boolean;
             constructor(game: Phaser.Game, parent: PIXI.DisplayObject);
@@ -165,0 +174,0 @@ /**

build/phaser-input.js

@@ -1,10 +0,1 @@
-/*!
- * phaser-input - version 1.0.0 
- * Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
- *
- * OrangeGames
- * Build at 01-03-2016
- * Released under MIT License 
- */
-
 var Fabrique;
@@ -19,7 +10,11 @@ (function (Fabrique) {
     var InputElement = (function () {
-        function InputElement(id, type, value) {
+        function InputElement(game, id, type, value) {
+            var _this = this;
             if (type === void 0) { type = InputType.text; }
             if (value === void 0) { value = ''; }
+            this.focusIn = new Phaser.Signal();
+            this.focusOut = new Phaser.Signal();
             this.id = id;
             this.type = type;
+            this.game = game;
             this.element = document.createElement('input');
@@ -32,2 +27,8 @@ this.element.id = id;
             this.element.type = InputType[type];
+            this.element.addEventListener('focusin', function () {
+                _this.focusIn.dispatch();
+            });
+            this.element.addEventListener('focusout', function () {
+                _this.focusOut.dispatch();
+            });
             document.body.appendChild(this.element);
@@ -71,4 +72,23 @@ }
         InputElement.prototype.focus = function () {
+            var _this = this;
             this.element.focus();
+            console.log('focussing');
+            if (!this.game.device.desktop && this.game.device.chrome) {
+                var originalWidth = window.innerWidth, originalHeight = window.innerHeight;
+                var kbAppeared = false;
+                var interval = setInterval(function () {
+                    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);
+            }
         };
+        InputElement.prototype.blur = function () {
+            this.element.blur();
+        };
         Object.defineProperty(InputElement.prototype, "hasSelection", {
@@ -124,2 +144,3 @@ get: function () {
         function InputField(game, x, y, inputOptions) {
+            var _this = this;
             if (inputOptions === void 0) { inputOptions = {}; }
@@ -148,2 +169,3 @@ _super.call(this, game, x, y);
             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
@@ -156,3 +178,3 @@ this.box = new Fabrique.InputBox(this.game, inputOptions);
             //Create the hidden dom elements
-            this.domElement = new Fabrique.InputElement('phaser-input-' + (Math.random() * 10000 | 0).toString(), this.inputOptions.type, this.value);
+            this.domElement = new Fabrique.InputElement(this.game, 'phaser-input-' + (Math.random() * 10000 | 0).toString(), this.inputOptions.type, this.value);
             this.domElement.setMax(this.inputOptions.max, this.inputOptions.min);
@@ -208,2 +230,10 @@ this.selection = new Fabrique.SelectionHighlight(this.game, this.inputOptions);
             this.game.input.onDown.add(this.checkDown, this);
+            this.domElement.focusOut.add(function () {
+                if (Fabrique.Plugins.InputField.KeyboardOpen) {
+                    _this.endFocus();
+                    if (_this.inputOptions.zoom) {
+                        _this.zoomOut();
+                    }
+                }
+            });
         }
@@ -230,2 +260,5 @@ /**
                 this.startFocus();
+                if (this.inputOptions.zoom) {
+                    this.zoomIn();
+                }
             }
@@ -235,2 +268,5 @@ else {
                     this.endFocus();
+                    if (this.inputOptions.zoom) {
+                        this.zoomOut();
+                    }
                 }
@@ -254,2 +290,3 @@ }
         InputField.prototype.endFocus = function () {
+            var _this = this;
             this.domElement.removeEventListener();
@@ -261,2 +298,14 @@ this.focus = false;
             this.cursor.visible = false;
+            if (this.game.device.desktop) {
+                //Timeout is a chrome hack
+                setTimeout(function () {
+                    _this.domElement.blur();
+                }, 0);
+            }
+            else {
+                this.domElement.blur();
+            }
+            if (!this.game.device.desktop) {
+                Fabrique.Plugins.InputField.KeyboardOpen = false;
+            }
         };
@@ -278,2 +327,5 @@ /**
             }
+            if (!this.game.device.desktop) {
+                Fabrique.Plugins.InputField.KeyboardOpen = true;
+            }
         };
@@ -418,7 +470,35 @@ /**
         };
+        InputField.prototype.zoomIn = function () {
+            if (Fabrique.Plugins.InputField.Zoomed) {
+                return;
+            }
+            var windowScale;
+            if (window.innerHeight > window.innerWidth) {
+                windowScale = this.game.width / (this.width * 1.5);
+            }
+            else {
+                windowScale = (this.game.width / 2) / (this.width * 1.5);
+            }
+            var offsetX = ((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);
+            Fabrique.Plugins.InputField.Zoomed = true;
+        };
+        InputField.prototype.zoomOut = function () {
+            if (!Fabrique.Plugins.InputField.Zoomed) {
+                return;
+            }
+            this.game.world.scale.set(1);
+            this.game.world.pivot.set(0, 0);
+            Fabrique.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
          */
-        InputField.prototype.keyListener = function () {
+        InputField.prototype.keyListener = function (evt) {
             this.value = this.domElement.value;
+            if (evt.keyCode === 13) {
+                this.endFocus();
+                return;
+            }
             this.updateText();
@@ -549,2 +629,4 @@ this.updateCursor();
             };
+            InputField.Zoomed = false;
+            InputField.KeyboardOpen = false;
             return InputField;
@@ -551,0 +633,0 @@ })(Phaser.Plugin);

package.json

 {
   "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.",
@@ -6,0 +6,0 @@ "contributors": [

README.md

@@ -6,3 +6,12 @@ Phaser Input
 
+Key features:
 
+* Works on mobile and Desktop
+* Included TypeScript support
+* Also runs under WebGL renderer
+* Pure Phaser implementation
+* Easy configurable
+* Production hardened
+
+
 Getting Started
@@ -25,4 +34,5 @@ ---------------
 
-Adding a InputField
--------------------
+Usage
+-----
+### Adding a InputField
 The simpelest way of adding a input field is:
@@ -49,9 +59,17 @@ ```javascript
 ```
+### 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:
 
-Current Limitations
--------------------
+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.
+
+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
@@ -76,5 +94,5 @@ - **y**: number (0 by default) The Y-coordinate in the game
  - **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:
@@ -89,34 +107,6 @@ - Desktop
 
-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
+Credits
+-------
+phaser-input is inspired by [CanvasInput](https://github.com/goldfire/CanvasInput)
 
-### 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
-
 Disclaimer
@@ -126,2 +116,3 @@ ----------
 
-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.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78891

increased by12.09%

Lines of code

807

increased by12.87%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

113

decreased by-6.61%

No dependency changes