phaser-input - npm Package Compare versions

Comparing version 1.1.4 to 1.2.1

build/phaser-input.d.ts

@@ -17,2 +17,14 @@ declare module Fabrique {
         addKeyUpListener(callback: () => void): void;
+        /**
+         * Captures the keyboard event on keydown, used to prevent it going from input field to sprite
+         **/
+        blockKeyDownEvents(): void;
+        /**
+        * To prevent bubbling of keyboard event from input field to sprite
+        **/
+        private preventKeyPropagation(evt);
+        /**
+         * Remove listener that captures keydown keyboard events
+         **/
+        unblockKeyDownEvents(): void;
         removeEventListener(): void;
@@ -53,2 +65,3 @@ destroy(): void;
     class InputField extends Phaser.Sprite {
+        focusOutOnEnter: boolean;
         private placeHolder;
@@ -66,2 +79,3 @@ private box;
         private windowScale;
+        blockInput: boolean;
         constructor(game: Phaser.Game, x: number, y: number, inputOptions?: InputOptions);
@@ -94,2 +108,3 @@ /**
         private startFocus();
+        private keyUpProcessor();
         /**
@@ -136,2 +151,4 @@ * Update the text value in the box, and make sure the cursor is positioned correctly
 }
+declare var define: (object: any) => {};
+declare var module: any;
 declare module Fabrique {
@@ -138,0 +155,0 @@ class InputBox extends Phaser.Graphics {

build/phaser-input.js

 /*!
- * phaser-input - version 1.1.4 
+ * phaser-input - version 1.2.1 
  * Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
  *
  * OrangeGames
- * Build at 14-05-2016
+ * Build at 25-07-2016
  * Released under MIT License 
@@ -47,2 +47,26 @@ */
         };
+        /**
+         * Captures the keyboard event on keydown, used to prevent it going from input field to sprite
+         **/
+        InputElement.prototype.blockKeyDownEvents = function () {
+            document.addEventListener('keydown', this.preventKeyPropagation);
+        };
+        /**
+        * To prevent bubbling of keyboard event from input field to sprite
+        **/
+        InputElement.prototype.preventKeyPropagation = function (evt) {
+            if (evt.stopPropagation) {
+                evt.stopPropagation();
+            }
+            else {
+                //for IE < 9
+                event.cancelBubble = true;
+            }
+        };
+        /**
+         * Remove listener that captures keydown keyboard events
+         **/
+        InputElement.prototype.unblockKeyDownEvents = function () {
+            document.removeEventListener('keydown', this.preventKeyPropagation);
+        };
         InputElement.prototype.removeEventListener = function () {
@@ -86,3 +110,2 @@ document.removeEventListener('keyup', this.callback);
                 var interval = setInterval(function () {
-                    //console.log(originalWidth, window.innerWidth, originalHeight, window.innerHeight)
                     if (originalWidth > window.innerWidth || originalHeight > window.innerHeight) {
@@ -154,2 +177,3 @@ kbAppeared = true;
             _super.call(this, game, x, y);
+            this.focusOutOnEnter = true;
             this.placeHolder = null;
@@ -160,2 +184,3 @@ this.box = null;
             this.windowScale = 1;
+            this.blockInput = true;
             /**
@@ -256,2 +281,5 @@ * Update function makes the cursor blink, it uses two private properties to make it toggle
         InputField.prototype.checkDown = function (e) {
+            if (!this.value) {
+                this.resetText();
+            }
             if (this.input.checkPointerOver(e)) {
@@ -296,2 +324,5 @@ if (this.focus) {
             this.domElement.removeEventListener();
+            if (this.blockInput === true) {
+                this.domElement.unblockKeyDownEvents();
+            }
             this.focus = false;
@@ -322,11 +353,10 @@ if (this.value.length === 0 && null !== this.placeHolder) {
             this.focus = true;
-            this.domElement.addKeyUpListener(this.keyListener.bind(this));
             if (this.game.device.desktop) {
                 //Timeout is a chrome hack
                 setTimeout(function () {
-                    _this.domElement.focus();
+                    _this.keyUpProcessor();
                 }, 0);
             }
             else {
-                this.domElement.focus();
+                this.keyUpProcessor();
             }
@@ -338,2 +368,9 @@ if (!this.game.device.desktop) {
         };
+        InputField.prototype.keyUpProcessor = function () {
+            this.domElement.addKeyUpListener(this.keyListener.bind(this));
+            this.domElement.focus();
+            if (this.blockInput === true) {
+                this.domElement.blockKeyDownEvents();
+            }
+        };
         /**
@@ -507,3 +544,5 @@ * Update the text value in the box, and make sure the cursor is positioned correctly
             if (evt.keyCode === 13) {
-                this.endFocus();
+                if (this.focusOutOnEnter) {
+                    this.endFocus();
+                }
                 return;
@@ -514,2 +553,3 @@ }
             this.updateSelection();
+            evt.preventDefault();
         };
@@ -547,2 +587,11 @@ /**
 })(Fabrique || (Fabrique = {}));
+if (typeof define === "function" && define.amd) {
+    this.Fabrique = Fabrique, define(Fabrique);
+}
+else if (typeof module === "object" && module.exports) {
+    module.exports = Fabrique;
+}
+else {
+    this.Fabrique = Fabrique;
+}
 var Fabrique;
@@ -549,0 +598,0 @@ (function (Fabrique) {

build/phaser-input.min.js

 /*!
- * phaser-input - version 1.1.4 
+ * phaser-input - version 1.2.1 
  * Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
  *
  * OrangeGames
- * Build at 14-05-2016
+ * Build at 25-07-2016
  * Released under MIT License 
  */
 
-var Fabrique;!function(a){!function(a){a[a.text=0]="text",a[a.password=1]="password",a[a.number=2]="number"}(a.InputType||(a.InputType={}));var b=a.InputType,c=function(){function a(a,c,d,e){var f=this;void 0===d&&(d=b.text),void 0===e&&(e=""),this.focusIn=new Phaser.Signal,this.focusOut=new Phaser.Signal,this.id=c,this.type=d,this.game=a,this.element=document.createElement("input"),this.element.id=c,this.element.style.position="absolute",this.element.style.top=(-100).toString()+"px",this.element.style.left=(-100).toString()+"px",this.element.value=this.value,this.element.type=b[d],this.element.addEventListener("focusin",function(){f.focusIn.dispatch()}),this.element.addEventListener("focusout",function(){f.focusOut.dispatch()}),document.body.appendChild(this.element)}return a.prototype.addKeyUpListener=function(a){this.callback=a,document.addEventListener("keyup",this.callback)},a.prototype.removeEventListener=function(){document.removeEventListener("keyup",this.callback)},a.prototype.destroy=function(){document.body.removeChild(this.element)},a.prototype.setMax=function(a,c){if(void 0!==a)if(this.type===b.text||this.type===b.password)this.element.maxLength=parseInt(a,10);else if(this.type===b.number){if(this.element.max=a,void 0===c)return;this.element.min=c}},Object.defineProperty(a.prototype,"value",{get:function(){return this.element.value},set:function(a){this.element.value=a},enumerable:!0,configurable:!0}),a.prototype.focus=function(){var a=this;if(this.element.focus(),!this.game.device.desktop&&this.game.device.chrome)var b=window.innerWidth,c=window.innerHeight,d=!1,e=setInterval(function(){(b>window.innerWidth||c>window.innerHeight)&&(d=!0),d&&b===window.innerWidth&&c===window.innerHeight&&(a.focusOut.dispatch(),clearInterval(e))},50)},a.prototype.blur=function(){this.element.blur()},Object.defineProperty(a.prototype,"hasSelection",{get:function(){return this.type===b.number?!1:this.element.selectionStart!==this.element.selectionEnd},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"caretStart",{get:function(){return this.element.selectionEnd},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"caretEnd",{get:function(){return this.element.selectionStart},enumerable:!0,configurable:!0}),a.prototype.getCaretPosition=function(){return this.type===b.number?-1:this.element.selectionStart},a.prototype.setCaretPosition=function(a){this.type!==b.number&&this.element.setSelectionRange(a,a)},a}();a.InputElement=c}(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){var b=function(b){function c(c,d,e,f){var g=this;switch(void 0===f&&(f={}),b.call(this,c,d,e),this.placeHolder=null,this.box=null,this.focus=!1,this.value="",this.windowScale=1,this.blink=!0,this.cnt=0,this.inputOptions=f,this.inputOptions.width=f.width||150,this.inputOptions.padding=f.padding||0,this.inputOptions.textAlign=f.textAlign||"left",this.inputOptions.type=f.type||a.InputType.text,this.inputOptions.borderRadius=f.borderRadius||0,this.inputOptions.height=f.height||14,this.inputOptions.fillAlpha=void 0===f.fillAlpha?1:f.fillAlpha,this.inputOptions.selectionColor=f.selectionColor||"rgba(179, 212, 253, 0.8)",this.inputOptions.zoom=c.device.desktop?!1:f.zoom||!1,this.box=new a.InputBox(this.game,f),this.setTexture(this.box.generateTexture()),this.textMask=new a.TextMask(this.game,f),this.addChild(this.textMask),this.domElement=new a.InputElement(this.game,"phaser-input-"+(1e4*Math.random()|0).toString(),this.inputOptions.type,this.value),this.domElement.setMax(this.inputOptions.max,this.inputOptions.min),this.selection=new a.SelectionHighlight(this.game,this.inputOptions),this.addChild(this.selection),f.placeHolder&&f.placeHolder.length>0&&(this.placeHolder=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding,f.placeHolder,{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.placeHolderColor||"#bfbebd"}),this.placeHolder.mask=this.textMask,this.addChild(this.placeHolder)),this.cursor=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding-2,"|",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.cursorColor||"#000000"}),this.cursor.visible=!1,this.addChild(this.cursor),this.text=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding,"",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.fill||"#000000"}),this.text.mask=this.textMask,this.addChild(this.text),this.offscreenText=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding,"",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.fill||"#000000"}),this.inputOptions.textAlign){case"left":this.text.anchor.set(0,0),this.cursor.x=this.inputOptions.padding+this.getCaretPosition();break;case"center":this.text.anchor.set(.5,0),this.text.x+=this.inputOptions.width/2,this.cursor.x=this.inputOptions.padding+this.inputOptions.width/2-this.text.width/2+this.getCaretPosition();break;case"right":this.text.anchor.set(1,0),this.text.x+=this.inputOptions.width,this.cursor.x=this.inputOptions.padding+this.inputOptions.width}this.inputEnabled=!0,this.input.useHandCursor=!0,this.game.input.onDown.add(this.checkDown,this),this.domElement.focusOut.add(function(){a.Plugins.InputField.KeyboardOpen&&(g.endFocus(),g.inputOptions.zoom&&g.zoomOut())})}return __extends(c,b),c.prototype.checkDown=function(b){if(this.input.checkPointerOver(b)){if(this.focus)return void this.setCaretOnclick(b);null!==this.placeHolder&&(this.placeHolder.visible=!1),this.inputOptions.zoom&&!a.Plugins.InputField.Zoomed&&this.zoomIn(),this.startFocus()}else this.focus===!0&&(this.endFocus(),this.inputOptions.zoom&&this.zoomOut())},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(){var b=this;this.domElement.removeEventListener(),this.focus=!1,0===this.value.length&&null!==this.placeHolder&&(this.placeHolder.visible=!0),this.cursor.visible=!1,this.game.device.desktop?setTimeout(function(){b.domElement.blur()},0):this.domElement.blur(),this.game.device.desktop||(a.Plugins.InputField.KeyboardOpen=!1,a.Plugins.InputField.onKeyboardClose.dispatch())},c.prototype.startFocus=function(){var b=this;this.focus=!0,this.domElement.addKeyUpListener(this.keyListener.bind(this)),this.game.device.desktop?setTimeout(function(){b.domElement.focus()},0):this.domElement.focus(),this.game.device.desktop||(a.Plugins.InputField.KeyboardOpen=!0,a.Plugins.InputField.onKeyboardOpen.dispatch())},c.prototype.updateText=function(){var b="";if(this.inputOptions.type===a.InputType.password)for(var c=0;c<this.value.length;c++)b+="*";else if(this.inputOptions.type===a.InputType.number){var d=parseInt(this.value);b=d<parseInt(this.inputOptions.min)?this.inputOptions.min:d>parseInt(this.inputOptions.max)?this.inputOptions.max:this.value}else b=this.value;if(this.text.setText(b),this.text.width>this.inputOptions.width)this.text.anchor.x=1,this.text.x=this.inputOptions.padding+this.inputOptions.width;else switch(this.inputOptions.textAlign){case"left":this.text.anchor.set(0,0),this.text.x=this.inputOptions.padding;break;case"center":this.text.anchor.set(.5,0),this.text.x=this.inputOptions.padding+this.inputOptions.width/2;break;case"right":this.text.anchor.set(1,0),this.text.x=this.inputOptions.padding+this.inputOptions.width}},c.prototype.updateCursor=function(){if(this.text.width>this.inputOptions.width||"right"===this.inputOptions.textAlign)this.cursor.x=this.inputOptions.padding+this.inputOptions.width;else switch(this.inputOptions.textAlign){case"left":this.cursor.x=this.inputOptions.padding+this.getCaretPosition();break;case"center":this.cursor.x=this.inputOptions.padding+this.inputOptions.width/2-this.text.width/2+this.getCaretPosition()}},c.prototype.getCaretPosition=function(){var b=this.domElement.getCaretPosition();if(-1===b)return this.text.width;var c=this.value;if(this.inputOptions.type===a.InputType.password){c="";for(var d=0;d<this.value.length;d++)c+="*"}return this.offscreenText.setText(c.slice(0,b)),this.offscreenText.width},c.prototype.setCaretOnclick=function(a){var b=this.text.toLocal(new PIXI.Point(a.x,a.y),this.game.world).x;this.inputOptions.textAlign&&"center"===this.inputOptions.textAlign&&(b+=this.text.width/2);for(var c=this.text.width/this.value.length,d=0,e=0;e<this.value.length;e++)if(b>=e*c&&(e+1)*c>=b){d=e;break}b>(this.value.length-1)*c&&(d=this.value.length),this.startFocus(),this.domElement.setCaretPosition(d),this.updateCursor()},c.prototype.updateSelection=function(){if(this.domElement.hasSelection){var b=this.value;if(this.inputOptions.type===a.InputType.password){b="";for(var c=0;c<this.value.length;c++)b+="*"}switch(b=b.substring(this.domElement.caretStart,this.domElement.caretEnd),this.offscreenText.setText(b),this.selection.updateSelection(this.offscreenText.getBounds()),this.inputOptions.textAlign){case"left":this.selection.x=this.inputOptions.padding;break;case"center":this.selection.x=this.inputOptions.padding+this.inputOptions.width/2-this.text.width/2}}else this.selection.clear()},c.prototype.zoomIn=function(){if(!a.Plugins.InputField.Zoomed){var b=this.getBounds();window.innerHeight>window.innerWidth?this.windowScale=this.game.width/(1.5*b.width):this.windowScale=this.game.width/2/(1.5*b.width);var c=(this.game.width-1.5*b.width)/2/this.windowScale;this.game.world.scale.set(this.game.world.scale.x*this.windowScale,this.game.world.scale.y*this.windowScale),this.game.world.pivot.set(b.x-c,b.y-2*this.inputOptions.padding),a.Plugins.InputField.Zoomed=!0}},c.prototype.zoomOut=function(){a.Plugins.InputField.Zoomed&&(this.game.world.scale.set(this.game.world.scale.x/this.windowScale,this.game.world.scale.y/this.windowScale),this.game.world.pivot.set(0,0),a.Plugins.InputField.Zoomed=!1)},c.prototype.keyListener=function(a){return this.value=this.domElement.value,13===a.keyCode?void this.endFocus():(this.updateText(),this.updateCursor(),void this.updateSelection())},c.prototype.destroy=function(){this.domElement.destroy(),b.prototype.destroy.call(this)},c.prototype.resetText=function(){this.setText()},c.prototype.setText=function(a){void 0===a&&(a=""),a.length>0?this.placeHolder.visible=!1:this.placeHolder.visible=!0,this.value=a,this.domElement.value=this.value,this.updateText(),this.updateCursor(),this.endFocus()},c}(Phaser.Sprite);a.InputField=b}(Fabrique||(Fabrique={}));var Fabrique;!function(a){var b=function(a){function b(b,c){a.call(this,b,0,0);var d=c.backgroundColor?parseInt(c.backgroundColor.slice(1),16):16777215,e=c.borderRadius||0,f=c.borderColor?parseInt(c.borderColor.slice(1),16):9803157,g=c.fillAlpha,h=c.height;c.font&&(h=Math.max(parseInt(c.font.substr(0,c.font.indexOf("px")),10),h)),h=2*c.padding+h;var i=c.width;i=2*c.padding+i,this.beginFill(d,g).lineStyle(c.borderWidth||1,f,g),e>0?this.drawRoundedRect(0,0,i,h,e):this.drawRect(0,0,i,h)}return __extends(b,a),b}(Phaser.Graphics);a.InputBox=b}(Fabrique||(Fabrique={}));var Fabrique;!function(a){var b=function(a){function b(b,c){a.call(this,b,c.padding,c.padding),this.inputOptions=c}return __extends(b,a),b.prototype.updateSelection=function(a){var c=Phaser.Color.webToColor(this.inputOptions.selectionColor);this.clear(),this.beginFill(b.rgb2hex(c),c.a),this.drawRect(a.x,a.y,a.width,a.height-this.inputOptions.padding)},b.rgb2hex=function(a){return parseInt(("0"+a.r.toString(16)).slice(-2)+("0"+a.g.toString(16)).slice(-2)+("0"+a.b.toString(16)).slice(-2),16)},b}(Phaser.Graphics);a.SelectionHighlight=b}(Fabrique||(Fabrique={}));var Fabrique;!function(a){var b=function(a){function b(b,c){a.call(this,b,c.padding,c.padding);var d=c.borderRadius,e=c.height;c.font&&(e=Math.max(parseInt(c.font.substr(0,c.font.indexOf("px")),10),e));var f=c.width;this.beginFill(0),d>0?this.drawRoundedRect(0,0,f,e,d):this.drawRect(0,0,f,e)}return __extends(b,a),b}(Phaser.Graphics);a.TextMask=b}(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.Zoomed=!1,c.KeyboardOpen=!1,c.onKeyboardOpen=new Phaser.Signal,c.onKeyboardClose=new Phaser.Signal,c}(Phaser.Plugin);b.InputField=c}(b=a.Plugins||(a.Plugins={}))}(Fabrique||(Fabrique={}));
+var Fabrique;!function(a){!function(a){a[a.text=0]="text",a[a.password=1]="password",a[a.number=2]="number"}(a.InputType||(a.InputType={}));var b=a.InputType,c=function(){function a(a,c,d,e){var f=this;void 0===d&&(d=b.text),void 0===e&&(e=""),this.focusIn=new Phaser.Signal,this.focusOut=new Phaser.Signal,this.id=c,this.type=d,this.game=a,this.element=document.createElement("input"),this.element.id=c,this.element.style.position="absolute",this.element.style.top=(-100).toString()+"px",this.element.style.left=(-100).toString()+"px",this.element.value=this.value,this.element.type=b[d],this.element.addEventListener("focusin",function(){f.focusIn.dispatch()}),this.element.addEventListener("focusout",function(){f.focusOut.dispatch()}),document.body.appendChild(this.element)}return a.prototype.addKeyUpListener=function(a){this.callback=a,document.addEventListener("keyup",this.callback)},a.prototype.blockKeyDownEvents=function(){document.addEventListener("keydown",this.preventKeyPropagation)},a.prototype.preventKeyPropagation=function(a){a.stopPropagation?a.stopPropagation():event.cancelBubble=!0},a.prototype.unblockKeyDownEvents=function(){document.removeEventListener("keydown",this.preventKeyPropagation)},a.prototype.removeEventListener=function(){document.removeEventListener("keyup",this.callback)},a.prototype.destroy=function(){document.body.removeChild(this.element)},a.prototype.setMax=function(a,c){if(void 0!==a)if(this.type===b.text||this.type===b.password)this.element.maxLength=parseInt(a,10);else if(this.type===b.number){if(this.element.max=a,void 0===c)return;this.element.min=c}},Object.defineProperty(a.prototype,"value",{get:function(){return this.element.value},set:function(a){this.element.value=a},enumerable:!0,configurable:!0}),a.prototype.focus=function(){var a=this;if(this.element.focus(),!this.game.device.desktop&&this.game.device.chrome)var b=window.innerWidth,c=window.innerHeight,d=!1,e=setInterval(function(){(b>window.innerWidth||c>window.innerHeight)&&(d=!0),d&&b===window.innerWidth&&c===window.innerHeight&&(a.focusOut.dispatch(),clearInterval(e))},50)},a.prototype.blur=function(){this.element.blur()},Object.defineProperty(a.prototype,"hasSelection",{get:function(){return this.type===b.number?!1:this.element.selectionStart!==this.element.selectionEnd},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"caretStart",{get:function(){return this.element.selectionEnd},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"caretEnd",{get:function(){return this.element.selectionStart},enumerable:!0,configurable:!0}),a.prototype.getCaretPosition=function(){return this.type===b.number?-1:this.element.selectionStart},a.prototype.setCaretPosition=function(a){this.type!==b.number&&this.element.setSelectionRange(a,a)},a}();a.InputElement=c}(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){var b=function(b){function c(c,d,e,f){var g=this;switch(void 0===f&&(f={}),b.call(this,c,d,e),this.focusOutOnEnter=!0,this.placeHolder=null,this.box=null,this.focus=!1,this.value="",this.windowScale=1,this.blockInput=!0,this.blink=!0,this.cnt=0,this.inputOptions=f,this.inputOptions.width=f.width||150,this.inputOptions.padding=f.padding||0,this.inputOptions.textAlign=f.textAlign||"left",this.inputOptions.type=f.type||a.InputType.text,this.inputOptions.borderRadius=f.borderRadius||0,this.inputOptions.height=f.height||14,this.inputOptions.fillAlpha=void 0===f.fillAlpha?1:f.fillAlpha,this.inputOptions.selectionColor=f.selectionColor||"rgba(179, 212, 253, 0.8)",this.inputOptions.zoom=c.device.desktop?!1:f.zoom||!1,this.box=new a.InputBox(this.game,f),this.setTexture(this.box.generateTexture()),this.textMask=new a.TextMask(this.game,f),this.addChild(this.textMask),this.domElement=new a.InputElement(this.game,"phaser-input-"+(1e4*Math.random()|0).toString(),this.inputOptions.type,this.value),this.domElement.setMax(this.inputOptions.max,this.inputOptions.min),this.selection=new a.SelectionHighlight(this.game,this.inputOptions),this.addChild(this.selection),f.placeHolder&&f.placeHolder.length>0&&(this.placeHolder=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding,f.placeHolder,{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.placeHolderColor||"#bfbebd"}),this.placeHolder.mask=this.textMask,this.addChild(this.placeHolder)),this.cursor=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding-2,"|",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.cursorColor||"#000000"}),this.cursor.visible=!1,this.addChild(this.cursor),this.text=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding,"",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.fill||"#000000"}),this.text.mask=this.textMask,this.addChild(this.text),this.offscreenText=new Phaser.Text(c,this.inputOptions.padding,this.inputOptions.padding,"",{font:f.font||"14px Arial",fontWeight:f.fontWeight||"normal",fill:f.fill||"#000000"}),this.inputOptions.textAlign){case"left":this.text.anchor.set(0,0),this.cursor.x=this.inputOptions.padding+this.getCaretPosition();break;case"center":this.text.anchor.set(.5,0),this.text.x+=this.inputOptions.width/2,this.cursor.x=this.inputOptions.padding+this.inputOptions.width/2-this.text.width/2+this.getCaretPosition();break;case"right":this.text.anchor.set(1,0),this.text.x+=this.inputOptions.width,this.cursor.x=this.inputOptions.padding+this.inputOptions.width}this.inputEnabled=!0,this.input.useHandCursor=!0,this.game.input.onDown.add(this.checkDown,this),this.domElement.focusOut.add(function(){a.Plugins.InputField.KeyboardOpen&&(g.endFocus(),g.inputOptions.zoom&&g.zoomOut())})}return __extends(c,b),c.prototype.checkDown=function(b){if(this.value||this.resetText(),this.input.checkPointerOver(b)){if(this.focus)return void this.setCaretOnclick(b);null!==this.placeHolder&&(this.placeHolder.visible=!1),this.inputOptions.zoom&&!a.Plugins.InputField.Zoomed&&this.zoomIn(),this.startFocus()}else this.focus===!0&&(this.endFocus(),this.inputOptions.zoom&&this.zoomOut())},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(){var b=this;this.domElement.removeEventListener(),this.blockInput===!0&&this.domElement.unblockKeyDownEvents(),this.focus=!1,0===this.value.length&&null!==this.placeHolder&&(this.placeHolder.visible=!0),this.cursor.visible=!1,this.game.device.desktop?setTimeout(function(){b.domElement.blur()},0):this.domElement.blur(),this.game.device.desktop||(a.Plugins.InputField.KeyboardOpen=!1,a.Plugins.InputField.onKeyboardClose.dispatch())},c.prototype.startFocus=function(){var b=this;this.focus=!0,this.game.device.desktop?setTimeout(function(){b.keyUpProcessor()},0):this.keyUpProcessor(),this.game.device.desktop||(a.Plugins.InputField.KeyboardOpen=!0,a.Plugins.InputField.onKeyboardOpen.dispatch())},c.prototype.keyUpProcessor=function(){this.domElement.addKeyUpListener(this.keyListener.bind(this)),this.domElement.focus(),this.blockInput===!0&&this.domElement.blockKeyDownEvents()},c.prototype.updateText=function(){var b="";if(this.inputOptions.type===a.InputType.password)for(var c=0;c<this.value.length;c++)b+="*";else if(this.inputOptions.type===a.InputType.number){var d=parseInt(this.value);b=d<parseInt(this.inputOptions.min)?this.inputOptions.min:d>parseInt(this.inputOptions.max)?this.inputOptions.max:this.value}else b=this.value;if(this.text.setText(b),this.text.width>this.inputOptions.width)this.text.anchor.x=1,this.text.x=this.inputOptions.padding+this.inputOptions.width;else switch(this.inputOptions.textAlign){case"left":this.text.anchor.set(0,0),this.text.x=this.inputOptions.padding;break;case"center":this.text.anchor.set(.5,0),this.text.x=this.inputOptions.padding+this.inputOptions.width/2;break;case"right":this.text.anchor.set(1,0),this.text.x=this.inputOptions.padding+this.inputOptions.width}},c.prototype.updateCursor=function(){if(this.text.width>this.inputOptions.width||"right"===this.inputOptions.textAlign)this.cursor.x=this.inputOptions.padding+this.inputOptions.width;else switch(this.inputOptions.textAlign){case"left":this.cursor.x=this.inputOptions.padding+this.getCaretPosition();break;case"center":this.cursor.x=this.inputOptions.padding+this.inputOptions.width/2-this.text.width/2+this.getCaretPosition()}},c.prototype.getCaretPosition=function(){var b=this.domElement.getCaretPosition();if(-1===b)return this.text.width;var c=this.value;if(this.inputOptions.type===a.InputType.password){c="";for(var d=0;d<this.value.length;d++)c+="*"}return this.offscreenText.setText(c.slice(0,b)),this.offscreenText.width},c.prototype.setCaretOnclick=function(a){var b=this.text.toLocal(new PIXI.Point(a.x,a.y),this.game.world).x;this.inputOptions.textAlign&&"center"===this.inputOptions.textAlign&&(b+=this.text.width/2);for(var c=this.text.width/this.value.length,d=0,e=0;e<this.value.length;e++)if(b>=e*c&&(e+1)*c>=b){d=e;break}b>(this.value.length-1)*c&&(d=this.value.length),this.startFocus(),this.domElement.setCaretPosition(d),this.updateCursor()},c.prototype.updateSelection=function(){if(this.domElement.hasSelection){var b=this.value;if(this.inputOptions.type===a.InputType.password){b="";for(var c=0;c<this.value.length;c++)b+="*"}switch(b=b.substring(this.domElement.caretStart,this.domElement.caretEnd),this.offscreenText.setText(b),this.selection.updateSelection(this.offscreenText.getBounds()),this.inputOptions.textAlign){case"left":this.selection.x=this.inputOptions.padding;break;case"center":this.selection.x=this.inputOptions.padding+this.inputOptions.width/2-this.text.width/2}}else this.selection.clear()},c.prototype.zoomIn=function(){if(!a.Plugins.InputField.Zoomed){var b=this.getBounds();window.innerHeight>window.innerWidth?this.windowScale=this.game.width/(1.5*b.width):this.windowScale=this.game.width/2/(1.5*b.width);var c=(this.game.width-1.5*b.width)/2/this.windowScale;this.game.world.scale.set(this.game.world.scale.x*this.windowScale,this.game.world.scale.y*this.windowScale),this.game.world.pivot.set(b.x-c,b.y-2*this.inputOptions.padding),a.Plugins.InputField.Zoomed=!0}},c.prototype.zoomOut=function(){a.Plugins.InputField.Zoomed&&(this.game.world.scale.set(this.game.world.scale.x/this.windowScale,this.game.world.scale.y/this.windowScale),this.game.world.pivot.set(0,0),a.Plugins.InputField.Zoomed=!1)},c.prototype.keyListener=function(a){return this.value=this.domElement.value,13===a.keyCode?void(this.focusOutOnEnter&&this.endFocus()):(this.updateText(),this.updateCursor(),this.updateSelection(),void a.preventDefault())},c.prototype.destroy=function(){this.domElement.destroy(),b.prototype.destroy.call(this)},c.prototype.resetText=function(){this.setText()},c.prototype.setText=function(a){void 0===a&&(a=""),a.length>0?this.placeHolder.visible=!1:this.placeHolder.visible=!0,this.value=a,this.domElement.value=this.value,this.updateText(),this.updateCursor(),this.endFocus()},c}(Phaser.Sprite);a.InputField=b}(Fabrique||(Fabrique={})),"function"==typeof define&&define.amd?(this.Fabrique=Fabrique,define(Fabrique)):"object"==typeof module&&module.exports?module.exports=Fabrique:this.Fabrique=Fabrique;var Fabrique;!function(a){var b=function(a){function b(b,c){a.call(this,b,0,0);var d=c.backgroundColor?parseInt(c.backgroundColor.slice(1),16):16777215,e=c.borderRadius||0,f=c.borderColor?parseInt(c.borderColor.slice(1),16):9803157,g=c.fillAlpha,h=c.height;c.font&&(h=Math.max(parseInt(c.font.substr(0,c.font.indexOf("px")),10),h)),h=2*c.padding+h;var i=c.width;i=2*c.padding+i,this.beginFill(d,g).lineStyle(c.borderWidth||1,f,g),e>0?this.drawRoundedRect(0,0,i,h,e):this.drawRect(0,0,i,h)}return __extends(b,a),b}(Phaser.Graphics);a.InputBox=b}(Fabrique||(Fabrique={}));var Fabrique;!function(a){var b=function(a){function b(b,c){a.call(this,b,c.padding,c.padding),this.inputOptions=c}return __extends(b,a),b.prototype.updateSelection=function(a){var c=Phaser.Color.webToColor(this.inputOptions.selectionColor);this.clear(),this.beginFill(b.rgb2hex(c),c.a),this.drawRect(a.x,a.y,a.width,a.height-this.inputOptions.padding)},b.rgb2hex=function(a){return parseInt(("0"+a.r.toString(16)).slice(-2)+("0"+a.g.toString(16)).slice(-2)+("0"+a.b.toString(16)).slice(-2),16)},b}(Phaser.Graphics);a.SelectionHighlight=b}(Fabrique||(Fabrique={}));var Fabrique;!function(a){var b=function(a){function b(b,c){a.call(this,b,c.padding,c.padding);var d=c.borderRadius,e=c.height;c.font&&(e=Math.max(parseInt(c.font.substr(0,c.font.indexOf("px")),10),e));var f=c.width;this.beginFill(0),d>0?this.drawRoundedRect(0,0,f,e,d):this.drawRect(0,0,f,e)}return __extends(b,a),b}(Phaser.Graphics);a.TextMask=b}(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.Zoomed=!1,c.KeyboardOpen=!1,c.onKeyboardOpen=new Phaser.Signal,c.onKeyboardClose=new Phaser.Signal,c}(Phaser.Plugin);b.InputField=c}(b=a.Plugins||(a.Plugins={}))}(Fabrique||(Fabrique={}));

package.json

 {
   "name": "phaser-input",
   "author": "OrangeGames",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "description": "Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.",
@@ -30,3 +30,3 @@ "contributors": [
     "grunt-typescript": "0.8.0",
-    "phaser": "2.4.6",
+    "phaser": "2.6.1",
     "phaser-nineslice": "^1.0.0",
@@ -33,0 +33,0 @@ "typescript": "1.8.x"

README.md

@@ -77,2 +77,17 @@ Phaser Input
 
+### Capture input events
+By default, input event will not bubble up to other elements
+This is controlled by an InputField property called `blockInput`.
+When set to false, the input event will trigger on the input element and move up to other elements listening for the event.
+
+e.g. An in-game sprite might be listening for keyboard events (W, A, S, D).
+If set to false, typing in input field will not trigger keyboard events for the sprite.
+So the sprite will not move when typing into input field.
+
+
+### Toggle Enter key
+InputField has a property (`focusOutOnEnter`) that controls whether the input field will lose focus on pressing Enter.
+If set to true, pressing enter will end focus on the field (default is true).
+
+
 ### Current Limitations
@@ -79,0 +94,0 @@ - Updates are slow when typing fast (type slower you!!)

No alert changes

Improved metrics

Total package byte prevSize

89042

increased by6.41%

Lines of code

899

increased by7.92%

Number of lines in readme file

138

increased by12.2%

No dependency changes