phaser-input - npm Package Compare versions

Comparing version 0.0.6 to 0.1.0

build/phaser-input.d.ts

@@ -21,7 +21,7 @@ declare module Fabrique {
     class InputField extends Phaser.Sprite {
-        placeHolder: Phaser.Text;
-        box: Phaser.Graphics;
+        private placeHolder;
+        private box;
         private focus;
         private cursor;
-        text: Phaser.Text;
+        private text;
         type: InputType;
@@ -34,3 +34,8 @@ value: string;
         private id;
-        constructor(game: Phaser.Game, x: number, y: number, inputOptions: InputOptions);
+        constructor(game: Phaser.Game, x: number, y: number, inputOptions?: InputOptions);
+        /**
+         * Creates the nice box for the input field
+         *
+         * @param inputOptions
+         */
         private createBox(inputOptions);
@@ -70,2 +75,3 @@ /**
         private endFocus();
+        private startFocus();
         /**
@@ -79,2 +85,6 @@ * Update the text value in the box, and make sure the cursor is positioned correctly
         private keyListener();
+        /**
+         * We overwrite the destroy method because we want to delete the (hidden) dom element when the inputField was removed
+         */
+        destroy(): void;
     }
@@ -81,0 +91,0 @@ }

build/phaser-input.js

 /*!
- * phaser-input - version 0.0.6 
- * Adds input boxes to Phaser like CanvasInput, but also works for WebGL.
+ * phaser-input - version 0.1.0 
+ * Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
  *
  * OrangeGames
- * Build at 10-02-2016
+ * Build at 11-02-2016
  * Released under MIT License 
@@ -25,2 +25,3 @@ */
         function InputField(game, x, y, inputOptions) {
+            if (inputOptions === void 0) { inputOptions = {}; }
             _super.call(this, game, x, y);
@@ -69,8 +70,11 @@ this.placeHolder = null;
             this.game.input.onDown.add(this.checkDown, this);
+            this.createDomElement();
         }
+        /**
+         * Creates the nice box for the input field
+         *
+         * @param inputOptions
+         */
         InputField.prototype.createBox = function (inputOptions) {
-            var bgColor = (inputOptions.backgroundColor) ? parseInt(inputOptions.backgroundColor.slice(1), 16) : 0xffffff;
-            var borderColor = (inputOptions.borderColor) ? parseInt(inputOptions.borderColor.slice(1), 16) : 0x959595;
-            var alpha = (inputOptions.fillAlpha !== undefined) ? inputOptions.fillAlpha : 1;
-            var height = inputOptions.height || 14;
+            var bgColor = (inputOptions.backgroundColor) ? parseInt(inputOptions.backgroundColor.slice(1), 16) : 0xffffff, borderRadius = inputOptions.borderRadius || 0, borderColor = (inputOptions.borderColor) ? parseInt(inputOptions.borderColor.slice(1), 16) : 0x959595, alpha = (inputOptions.fillAlpha !== undefined) ? inputOptions.fillAlpha : 1, height = inputOptions.height || 14;
             if (inputOptions.font) {
@@ -85,4 +89,9 @@ //fetch height from font;
             this.box.beginFill(bgColor, alpha)
-                .lineStyle(inputOptions.borderWidth || 1, borderColor, alpha)
-                .drawRoundedRect(0, 0, width, height, inputOptions.borderRadius || 0);
+                .lineStyle(inputOptions.borderWidth || 1, borderColor, alpha);
+            if (borderRadius > 0) {
+                this.box.drawRoundedRect(0, 0, width, height, borderRadius);
+            }
+            else {
+                this.box.drawRect(0, 0, width, height);
+            }
             this.addChild(this.box);
@@ -102,4 +111,6 @@ };
                 this.focus = true;
-                this.placeHolder.visible = false;
-                this.createDomElement();
+                if (null !== this.placeHolder) {
+                    this.placeHolder.visible = false;
+                }
+                this.startFocus();
             }
@@ -127,3 +138,2 @@ else {
             input.id = this.id;
-            //input.id = 'hack';
             input.style.position = 'absolute';
@@ -142,6 +152,2 @@ input.style.top = (-100).toString() + 'px';
             }
-            //chrome/safari hack/bugfix
-            setTimeout(function () {
-                input.focus();
-            }, 10);
             this.callback = function () { return _this.keyListener(); };
@@ -178,4 +184,15 @@ document.addEventListener('keyup', this.callback);
             this.cursor.visible = false;
-            this.removeDomElement();
         };
+        InputField.prototype.startFocus = function () {
+            var input = document.getElementById(this.id);
+            if (this.game.device.chrome === true) {
+                //Timeout is a chrome hack
+                setTimeout(function () {
+                    input.focus();
+                }, 0);
+            }
+            else {
+                input.focus();
+            }
+        };
         /**
@@ -204,2 +221,9 @@ * Update the text value in the box, and make sure the cursor is positioned correctly
         };
+        /**
+         * We overwrite the destroy method because we want to delete the (hidden) dom element when the inputField was removed
+         */
+        InputField.prototype.destroy = function () {
+            this.removeDomElement();
+            _super.prototype.destroy.call(this);
+        };
         return InputField;
@@ -206,0 +230,0 @@ })(Phaser.Sprite);

build/phaser-input.min.js

 /*!
- * phaser-input - version 0.0.6 
- * Adds input boxes to Phaser like CanvasInput, but also works for WebGL.
+ * phaser-input - version 0.1.0 
+ * Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
  *
  * OrangeGames
- * Build at 10-02-2016
+ * Build at 11-02-2016
  * Released under MIT License 
  */
 
-var __extends=this&&this.__extends||function(a,b){function c(){this.constructor=a}for(var d in b)b.hasOwnProperty(d)&&(a[d]=b[d]);a.prototype=null===b?Object.create(b):(c.prototype=b.prototype,new c)},Fabrique;!function(a){!function(a){a[a.text=0]="text",a[a.password=1]="password"}(a.InputType||(a.InputType={}));var b=a.InputType,c=function(a){function c(c,d,e,f){a.call(this,c,d,e),this.placeHolder=null,this.box=null,this.focus=!1,this.type=b.text,this.value="",this.id="phaser-input-"+(1e4*Math.random()|0).toString(),this.blink=!0,this.cnt=0,this.padding=f.padding||0,this.createBox(f),f.placeHolder&&f.placeHolder.length>0&&(this.placeHolder=new Phaser.Text(c,this.padding,this.padding,f.placeHolder,{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.placeHolderColor||"#bfbebd"}),this.addChild(this.placeHolder)),this.cursor=new Phaser.Text(c,this.padding,this.padding-2,"|",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.fill||"#000000"}),this.cursor.visible=!1,this.addChild(this.cursor),this.text=new Phaser.Text(c,this.padding,this.padding,"",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.placeHolderColor||"#000000"}),this.addChild(this.text),f.type&&(this.type=f.type),this.inputEnabled=!0,this.input.useHandCursor=!0,this.game.input.onDown.add(this.checkDown,this)}return __extends(c,a),c.prototype.createBox=function(a){var b=a.backgroundColor?parseInt(a.backgroundColor.slice(1),16):16777215,c=a.borderColor?parseInt(a.borderColor.slice(1),16):9803157,d=void 0!==a.fillAlpha?a.fillAlpha:1,e=a.height||14;a.font&&(e=Math.max(parseInt(a.font.substr(0,a.font.indexOf("px")),10),e)),e=2*this.padding+e;var f=a.width||150;f=2*this.padding+f,this.box=new Phaser.Graphics(this.game,0,0),this.box.beginFill(b,d).lineStyle(a.borderWidth||1,c,d).drawRoundedRect(0,0,f,e,a.borderRadius||0),this.addChild(this.box)},c.prototype.checkDown=function(a){this.input.checkPointerOver(a)?(this.focus=!0,this.placeHolder.visible=!1,this.createDomElement()):this.focus===!0&&this.endFocus()},c.prototype.createDomElement=function(){var a=this,c=document.getElementById(this.id),d=!1;null===c&&(c=document.createElement("input"),d=!0),c.id=this.id,c.style.position="absolute",c.style.top=(-100).toString()+"px",c.style.left=(-100).toString()+"px",c.value=this.value,this.type===b.password?c.type="password":c.type="text",d&&document.body.appendChild(c),setTimeout(function(){c.focus()},10),this.callback=function(){return a.keyListener()},document.addEventListener("keyup",this.callback)},c.prototype.removeDomElement=function(){var a=document.getElementById(this.id);document.body.removeChild(a),document.removeEventListener("keyup",this.callback)},c.prototype.update=function(){if(this.focus){if(30!==this.cnt)return this.cnt++;this.cursor.visible=this.blink,this.blink=!this.blink,this.cnt=0}},c.prototype.endFocus=function(){this.focus=!1,0===this.value.length&&(this.placeHolder.visible=!0),this.cursor.visible=!1,this.removeDomElement()},c.prototype.updateText=function(){var a="";if(this.type===b.password)for(var c=0;c<this.value.length;c++)a+="*";else a=this.value;this.text.setText(a),this.cursor.x=this.text.width+this.padding},c.prototype.keyListener=function(){this.value=document.getElementById(this.id).value,this.updateText()},c}(Phaser.Sprite);a.InputField=c}(Fabrique||(Fabrique={}));var Fabrique;!function(a){var b;!function(b){var c=function(b){function c(a,c){b.call(this,a,c),this.addInputFieldFactory()}return __extends(c,b),c.prototype.addInputFieldFactory=function(){Phaser.GameObjectFactory.prototype.inputField=function(b,c,d,e){void 0===e&&(e=this.world);var f=new a.InputField(this.game,b,c,d);return e.add(f)},Phaser.GameObjectCreator.prototype.inputField=function(b,c,d){return new a.InputField(this.game,b,c,d)}},c}(Phaser.Plugin);b.InputField=c}(b=a.Plugins||(a.Plugins={}))}(Fabrique||(Fabrique={}));
+var __extends=this&&this.__extends||function(a,b){function c(){this.constructor=a}for(var d in b)b.hasOwnProperty(d)&&(a[d]=b[d]);a.prototype=null===b?Object.create(b):(c.prototype=b.prototype,new c)},Fabrique;!function(a){!function(a){a[a.text=0]="text",a[a.password=1]="password"}(a.InputType||(a.InputType={}));var b=a.InputType,c=function(a){function c(c,d,e,f){void 0===f&&(f={}),a.call(this,c,d,e),this.placeHolder=null,this.box=null,this.focus=!1,this.type=b.text,this.value="",this.id="phaser-input-"+(1e4*Math.random()|0).toString(),this.blink=!0,this.cnt=0,this.padding=f.padding||0,this.createBox(f),f.placeHolder&&f.placeHolder.length>0&&(this.placeHolder=new Phaser.Text(c,this.padding,this.padding,f.placeHolder,{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.placeHolderColor||"#bfbebd"}),this.addChild(this.placeHolder)),this.cursor=new Phaser.Text(c,this.padding,this.padding-2,"|",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.fill||"#000000"}),this.cursor.visible=!1,this.addChild(this.cursor),this.text=new Phaser.Text(c,this.padding,this.padding,"",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.placeHolderColor||"#000000"}),this.addChild(this.text),f.type&&(this.type=f.type),this.inputEnabled=!0,this.input.useHandCursor=!0,this.game.input.onDown.add(this.checkDown,this),this.createDomElement()}return __extends(c,a),c.prototype.createBox=function(a){var b=a.backgroundColor?parseInt(a.backgroundColor.slice(1),16):16777215,c=a.borderRadius||0,d=a.borderColor?parseInt(a.borderColor.slice(1),16):9803157,e=void 0!==a.fillAlpha?a.fillAlpha:1,f=a.height||14;a.font&&(f=Math.max(parseInt(a.font.substr(0,a.font.indexOf("px")),10),f)),f=2*this.padding+f;var g=a.width||150;g=2*this.padding+g,this.box=new Phaser.Graphics(this.game,0,0),this.box.beginFill(b,e).lineStyle(a.borderWidth||1,d,e),c>0?this.box.drawRoundedRect(0,0,g,f,c):this.box.drawRect(0,0,g,f),this.addChild(this.box)},c.prototype.checkDown=function(a){this.input.checkPointerOver(a)?(this.focus=!0,null!==this.placeHolder&&(this.placeHolder.visible=!1),this.startFocus()):this.focus===!0&&this.endFocus()},c.prototype.createDomElement=function(){var a=this,c=document.getElementById(this.id),d=!1;null===c&&(c=document.createElement("input"),d=!0),c.id=this.id,c.style.position="absolute",c.style.top=(-100).toString()+"px",c.style.left=(-100).toString()+"px",c.value=this.value,this.type===b.password?c.type="password":c.type="text",d&&document.body.appendChild(c),this.callback=function(){return a.keyListener()},document.addEventListener("keyup",this.callback)},c.prototype.removeDomElement=function(){var a=document.getElementById(this.id);document.body.removeChild(a),document.removeEventListener("keyup",this.callback)},c.prototype.update=function(){if(this.focus){if(30!==this.cnt)return this.cnt++;this.cursor.visible=this.blink,this.blink=!this.blink,this.cnt=0}},c.prototype.endFocus=function(){this.focus=!1,0===this.value.length&&(this.placeHolder.visible=!0),this.cursor.visible=!1},c.prototype.startFocus=function(){var a=document.getElementById(this.id);this.game.device.chrome===!0?setTimeout(function(){a.focus()},0):a.focus()},c.prototype.updateText=function(){var a="";if(this.type===b.password)for(var c=0;c<this.value.length;c++)a+="*";else a=this.value;this.text.setText(a),this.cursor.x=this.text.width+this.padding},c.prototype.keyListener=function(){this.value=document.getElementById(this.id).value,this.updateText()},c.prototype.destroy=function(){this.removeDomElement(),a.prototype.destroy.call(this)},c}(Phaser.Sprite);a.InputField=c}(Fabrique||(Fabrique={}));var Fabrique;!function(a){var b;!function(b){var c=function(b){function c(a,c){b.call(this,a,c),this.addInputFieldFactory()}return __extends(c,b),c.prototype.addInputFieldFactory=function(){Phaser.GameObjectFactory.prototype.inputField=function(b,c,d,e){void 0===e&&(e=this.world);var f=new a.InputField(this.game,b,c,d);return e.add(f)},Phaser.GameObjectCreator.prototype.inputField=function(b,c,d){return new a.InputField(this.game,b,c,d)}},c}(Phaser.Plugin);b.InputField=c}(b=a.Plugins||(a.Plugins={}))}(Fabrique||(Fabrique={}));

package.json

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

README.md

 Phaser Input
 ============
 
-This needs some more text ;)
+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..
 
-Describing 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..
 
-
 Getting Started
@@ -21,12 +19,72 @@ ---------------
 
+After adding the script to the page you can activate it by enabling the plugin:
+```javascript
+game.add.plugin(Fabrique.Plugins.Input);
+```
 
+Adding a InputField
+-------------------
+The simpelest way of adding a input field is:
+```javascript
+var input = game.add.inputField(10, 90);
+```
+
+Ofcourse there are options available that can be used to style the input. They can be passes as an object as the third parameter.
+
+```javascript
+var password = game.add.inputField(10, 90, {
+    font: '18px Arial',
+    fill: '#212121',
+    fontWeight: 'bold',
+    width: 150,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: '#000',
+    borderRadius: 6,
+    placeHolder: 'Password',
+    type: Fabrique.InputType.password
+});
+```
+
+Current Limitations
+-------------------
+ - Cursor position doesn't get correctly updated after using the arrow key's
+ - ctrl+a works, but isn't visible
+ - Clicking in the box doesn't update the cursor position
+ - Updates are slow when typing fast (type slower you!!)
+
+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 textbox
+ - **fillAlpha**: number (1 by default) Alpha of the textbox, 0 will hide the textbox and only show the text/placeholder/cursor
+ - **width**: number (150 by default) The width of the text box (just like in the DOM, padding, borders add onto this width)
+ - **height**: number (14 by default) The height of the text box (just like in the DOM, padding, borders add onto this height)
+ - **padding**: number (0 by default) The padding in pixels around all 4 sides of the text input area.
+ - **borderWidth**: number (1 by default) Size of the border
+ - **borderColor**: string (#000 by default) Color of the border
+ - **borderRadius**: number (0 by default) Create rounded corners by setting a border radius
+ - **placeHolder**: string ('' by default) Text that will be shown before the user input's anything
+ - **placeHolderColor**: string (#000 by default) The color of the placeholder text
+ - **type**: InputType (text by default) Either text or password
+
+Browser Support
+---------------
+Tested on:
+ - Desktop
+  * Chrome 48+
+ - Mobile
+  * Chrome 48+
+  * iOS 9+
+
 Changelog
 ---------
-### 0.0.2
-* Changed from PhaserInput handling to regular HTML input, this way mobile also works
-### 0.0.1
-* Initial release
+### 0.1.0
+* Full Android/iOS support
 
 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!
+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

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

Improved metrics

Total package byte prevSize

34245

increased by15.53%

Lines of code

372

increased by10.39%

Number of lines in readme file

89

increased by187.1%

No dependency changes