🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

phaser-input

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

phaser-input - npm Package Compare versions

Comparing version

0.1.4
to
1.0.0

106

build/phaser-input.d.ts
declare module Fabrique {
enum InputType {
text = 0,
password = 1,
number = 2,
}
class InputElement {
private element;
private callback;
private type;
private id;
constructor(id: string, type?: InputType, value?: string);
addKeyUpListener(callback: () => void): void;
removeEventListener(): void;
destroy(): void;
setMax(max: string, min?: string): void;
value: string;
focus(): void;
hasSelection: boolean;
caretStart: number;
caretEnd: number;
getCaretPosition(): number;
setCaretPosition(pos: number): void;
}
}
declare module Fabrique {
interface InputOptions extends Phaser.PhaserTextStyle {

@@ -16,33 +41,21 @@ x?: number;

type?: InputType;
maxLength?: number;
min?: string;
max?: string;
textAlign?: string;
selectionColor?: string;
}
enum InputType {
text = 0,
password = 1,
number = 2,
}
class InputField extends Phaser.Sprite {
private placeHolder;
private box;
private textMask;
private focus;
private cursor;
private text;
type: InputType;
private offscreenText;
value: string;
private registered;
private shift;
private padding;
private callback;
private id;
private inputOptions;
private domElement;
private selection;
constructor(game: Phaser.Game, x: number, y: number, inputOptions?: InputOptions);
/**
* Creates the nice box for the input field
*
* @param inputOptions
*/
private createBox(inputOptions);
/**
* This is a generic input down handler for the game.

@@ -58,13 +71,2 @@ * if the input object is clicked, we gain focus on it and create the dom element

/**
* Creates a hidden input field, makes sure focus is added to it.
* This is all to ensure mobile keyboard are also opened
*
* And last, but not least, we register an event handler
*/
private createDomElement();
/**
* Removes the hidden input field and the key eventlistener
*/
private removeDomElement();
/**
* Update function makes the cursor blink, it uses two private properties to make it toggle

@@ -81,2 +83,5 @@ *

private endFocus();
/**
*
*/
private startFocus();

@@ -88,2 +93,22 @@ /**

/**
* Updates the position of the caret in the phaser input field
*/
private updateCursor();
/**
* Fetches the carrot position from the dom element. This one changes when you use the keyboard to navigate the element
*
* @returns {number}
*/
private getCaretPosition();
/**
* Set the caret when a click was made in the input field
*
* @param e
*/
private setCaretOnclick(e);
/**
* This checks if a select has been made, and if so highlight it with blue
*/
private updateSelection();
/**
* Event fired when a key is pressed, it takes the value from the hidden input field and adds it as its own

@@ -103,2 +128,25 @@ */

declare module Fabrique {
class InputBox extends Phaser.Graphics {
constructor(game: Phaser.Game, inputOptions: InputOptions);
}
}
declare module Fabrique {
class SelectionHighlight extends Phaser.Graphics {
private inputOptions;
constructor(game: Phaser.Game, inputOptions: InputOptions);
updateSelection(rect: PIXI.Rectangle): void;
static rgb2hex(color: {
r: number;
g: number;
b: number;
a: number;
}): number;
}
}
declare module Fabrique {
class TextMask extends Phaser.Graphics {
constructor(game: Phaser.Game, inputOptions: InputOptions);
}
}
declare module Fabrique {
module Plugins {

@@ -105,0 +153,0 @@ interface InputFieldObjectFactory extends Phaser.GameObjectFactory {

446

build/phaser-input.js
/*!
* phaser-input - version 0.1.4
* 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 26-02-2016
* Build at 01-03-2016
* Released under MIT License
*/
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Fabrique;

@@ -23,2 +18,102 @@ (function (Fabrique) {

var InputType = Fabrique.InputType;
var InputElement = (function () {
function InputElement(id, type, value) {
if (type === void 0) { type = InputType.text; }
if (value === void 0) { value = ''; }
this.id = id;
this.type = type;
this.element = document.createElement('input');
this.element.id = id;
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 = InputType[type];
document.body.appendChild(this.element);
}
InputElement.prototype.addKeyUpListener = function (callback) {
this.callback = callback;
document.addEventListener('keyup', this.callback);
};
InputElement.prototype.removeEventListener = function () {
document.removeEventListener('keyup', this.callback);
};
InputElement.prototype.destroy = function () {
document.body.removeChild(this.element);
};
InputElement.prototype.setMax = function (max, min) {
if (max === undefined) {
return;
}
if (this.type === InputType.text || this.type === InputType.password) {
this.element.maxLength = parseInt(max, 10);
}
else if (this.type === InputType.number) {
this.element.max = max;
if (min === undefined) {
return;
}
this.element.min = min;
}
};
Object.defineProperty(InputElement.prototype, "value", {
get: function () {
return this.element.value;
},
set: function (value) {
this.element.value = value;
},
enumerable: true,
configurable: true
});
InputElement.prototype.focus = function () {
this.element.focus();
};
Object.defineProperty(InputElement.prototype, "hasSelection", {
get: function () {
if (this.type === InputType.number) {
return false;
}
return this.element.selectionStart !== this.element.selectionEnd;
},
enumerable: true,
configurable: true
});
Object.defineProperty(InputElement.prototype, "caretStart", {
get: function () {
return this.element.selectionEnd;
},
enumerable: true,
configurable: true
});
Object.defineProperty(InputElement.prototype, "caretEnd", {
get: function () {
return this.element.selectionStart;
},
enumerable: true,
configurable: true
});
InputElement.prototype.getCaretPosition = function () {
if (this.type === InputType.number) {
return -1;
}
return this.element.selectionStart;
};
InputElement.prototype.setCaretPosition = function (pos) {
if (this.type === InputType.number) {
return;
}
this.element.setSelectionRange(pos, pos);
};
return InputElement;
})();
Fabrique.InputElement = InputElement;
})(Fabrique || (Fabrique = {}));
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Fabrique;
(function (Fabrique) {
var InputField = (function (_super) {

@@ -32,5 +127,3 @@ __extends(InputField, _super);

this.focus = false;
this.type = InputType.text;
this.value = '';
this.id = 'phaser-input-' + (Math.random() * 10000 | 0).toString();
/**

@@ -43,7 +136,25 @@ * Update function makes the cursor blink, it uses two private properties to make it toggle

this.cnt = 0;
//Parse the options
this.inputOptions = inputOptions;
this.padding = inputOptions.padding || 0;
this.createBox(inputOptions);
this.inputOptions.width = inputOptions.width || 150;
this.inputOptions.padding = inputOptions.padding || 0;
this.inputOptions.textAlign = inputOptions.textAlign || 'left';
this.inputOptions.type = inputOptions.type || Fabrique.InputType.text;
this.inputOptions.borderRadius = inputOptions.borderRadius || 0;
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)';
//create the input box
this.box = new Fabrique.InputBox(this.game, inputOptions);
this.setTexture(this.box.generateTexture());
//create the mask that will be used for the texts
this.textMask = new Fabrique.TextMask(this.game, inputOptions);
this.addChild(this.textMask);
//Create the hidden dom elements
this.domElement = new Fabrique.InputElement('phaser-input-' + (Math.random() * 10000 | 0).toString(), this.inputOptions.type, this.value);
this.domElement.setMax(this.inputOptions.max, this.inputOptions.min);
this.selection = new Fabrique.SelectionHighlight(this.game, this.inputOptions);
this.addChild(this.selection);
if (inputOptions.placeHolder && inputOptions.placeHolder.length > 0) {
this.placeHolder = new Phaser.Text(game, this.padding, this.padding, inputOptions.placeHolder, {
this.placeHolder = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding, inputOptions.placeHolder, {
font: inputOptions.font || '14px Arial',

@@ -53,5 +164,6 @@ fontWeight: inputOptions.fontWeight || 'normal',

});
this.placeHolder.mask = this.textMask;
this.addChild(this.placeHolder);
}
this.cursor = new Phaser.Text(game, this.padding, this.padding - 2, '|', {
this.cursor = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding - 2, '|', {
font: inputOptions.font || '14px Arial',

@@ -63,3 +175,3 @@ fontWeight: inputOptions.fontWeight || 'normal',

this.addChild(this.cursor);
this.text = new Phaser.Text(game, this.padding, this.padding, '', {
this.text = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding, '', {
font: inputOptions.font || '14px Arial',

@@ -69,5 +181,24 @@ fontWeight: inputOptions.fontWeight || 'normal',

});
this.text.mask = this.textMask;
this.addChild(this.text);
if (inputOptions.type) {
this.type = inputOptions.type;
this.offscreenText = new Phaser.Text(game, this.inputOptions.padding, this.inputOptions.padding, '', {
font: inputOptions.font || '14px Arial',
fontWeight: inputOptions.fontWeight || 'normal',
fill: inputOptions.fill || '#000000'
});
switch (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(0.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;
break;
}

@@ -77,30 +208,4 @@ this.inputEnabled = true;

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, 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) {
//fetch height from font;
height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
}
height = this.padding * 2 + height;
var width = inputOptions.width || 150;
width = this.padding * 2 + width;
this.box = new Phaser.Graphics(this.game, 0, 0);
this.box.beginFill(bgColor, alpha)
.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.setTexture(this.box.generateTexture());
};
/**
* This is a generic input down handler for the game.

@@ -116,2 +221,6 @@ * if the input object is clicked, we gain focus on it and create the dom element

if (this.input.checkPointerOver(e)) {
if (this.focus) {
this.setCaretOnclick(e);
return;
}
this.focus = true;

@@ -129,45 +238,2 @@ if (null !== this.placeHolder) {

};
/**
* Creates a hidden input field, makes sure focus is added to it.
* This is all to ensure mobile keyboard are also opened
*
* And last, but not least, we register an event handler
*/
InputField.prototype.createDomElement = function () {
var _this = this;
var input = document.getElementById(this.id);
var created = false;
if (null === input) {
input = document.createElement('input');
created = true;
}
input.id = this.id;
input.style.position = 'absolute';
input.style.top = (-100).toString() + 'px';
input.style.left = (-100).toString() + 'px';
input.value = this.value;
input.type = InputType[this.type];
if (this.inputOptions.maxLength && (this.type === InputType.text || this.type === InputType.password)) {
input.maxLength = this.inputOptions.maxLength;
}
if (this.inputOptions.min && this.type === InputType.number) {
input.min = this.inputOptions.min;
}
if (this.inputOptions.min && this.type === InputType.number) {
input.max = this.inputOptions.max;
}
if (created) {
document.body.appendChild(input);
}
this.callback = function () { return _this.keyListener(); };
document.addEventListener('keyup', this.callback);
};
/**
* Removes the hidden input field and the key eventlistener
*/
InputField.prototype.removeDomElement = function () {
var input = document.getElementById(this.id);
document.body.removeChild(input);
document.removeEventListener('keyup', this.callback);
};
InputField.prototype.update = function () {

@@ -188,2 +254,3 @@ if (!this.focus) {

InputField.prototype.endFocus = function () {
this.domElement.removeEventListener();
this.focus = false;

@@ -195,12 +262,16 @@ if (this.value.length === 0 && null !== this.placeHolder) {

};
/**
*
*/
InputField.prototype.startFocus = function () {
var input = document.getElementById(this.id);
var _this = this;
this.domElement.addKeyUpListener(this.keyListener.bind(this));
if (this.game.device.desktop) {
//Timeout is a chrome hack
setTimeout(function () {
input.focus();
_this.domElement.focus();
}, 0);
}
else {
input.focus();
this.domElement.focus();
}

@@ -213,3 +284,3 @@ };

var text = '';
if (this.type === InputType.password) {
if (this.inputOptions.type === Fabrique.InputType.password) {
for (var i = 0; i < this.value.length; i++) {

@@ -219,3 +290,3 @@ text += '*';

}
else if (this.type === InputType.number) {
else if (this.inputOptions.type === Fabrique.InputType.number) {
var val = parseInt(this.value);

@@ -236,10 +307,122 @@ if (val < parseInt(this.inputOptions.min)) {

this.text.setText(text);
this.cursor.x = this.text.width + this.padding;
if (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(0.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;
break;
}
}
};
/**
* Updates the position of the caret in the phaser input field
*/
InputField.prototype.updateCursor = function () {
if (this.text.width > this.inputOptions.width || this.inputOptions.textAlign === 'right') {
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();
break;
}
}
};
/**
* Fetches the carrot position from the dom element. This one changes when you use the keyboard to navigate the element
*
* @returns {number}
*/
InputField.prototype.getCaretPosition = function () {
var caretPosition = this.domElement.getCaretPosition();
if (-1 === caretPosition) {
return this.text.width;
}
var text = this.value;
if (this.inputOptions.type === Fabrique.InputType.password) {
text = '';
for (var i = 0; i < this.value.length; i++) {
text += '*';
}
}
this.offscreenText.setText(text.slice(0, caretPosition));
return this.offscreenText.width;
};
/**
* Set the caret when a click was made in the input field
*
* @param e
*/
InputField.prototype.setCaretOnclick = function (e) {
var localX = (this.text.toLocal(new PIXI.Point(e.x, e.y), this.game.stage)).x;
if (this.inputOptions.textAlign && this.inputOptions.textAlign === 'center') {
localX += this.text.width / 2;
}
var characterWidth = this.text.width / this.value.length;
var index = 0;
for (var i = 0; i < this.value.length; i++) {
if (localX >= i * characterWidth && localX <= (i + 1) * characterWidth) {
index = i;
break;
}
}
if (localX > (this.value.length - 1) * characterWidth) {
index = this.value.length;
}
this.startFocus();
this.domElement.setCaretPosition(index);
this.updateCursor();
};
/**
* This checks if a select has been made, and if so highlight it with blue
*/
InputField.prototype.updateSelection = function () {
if (this.domElement.hasSelection) {
var text = this.value;
if (this.inputOptions.type === Fabrique.InputType.password) {
text = '';
for (var i = 0; i < this.value.length; i++) {
text += '*';
}
}
text = text.substring(this.domElement.caretStart, this.domElement.caretEnd);
this.offscreenText.setText(text);
this.selection.updateSelection(this.offscreenText.getBounds());
switch (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;
break;
}
}
else {
this.selection.clear();
}
};
/**
* 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 () {
this.value = document.getElementById(this.id).value;
this.value = this.domElement.value;
this.updateText();
this.updateCursor();
this.updateSelection();
};

@@ -250,3 +433,3 @@ /**

InputField.prototype.destroy = function () {
this.removeDomElement();
this.domElement.destroy();
_super.prototype.destroy.call(this);

@@ -259,4 +442,5 @@ };

this.value = "";
document.getElementById(this.id).value = this.value;
this.domElement.value = this.value;
this.updateText();
this.updateCursor();
this.endFocus();

@@ -270,2 +454,76 @@ };

(function (Fabrique) {
var InputBox = (function (_super) {
__extends(InputBox, _super);
function InputBox(game, inputOptions) {
_super.call(this, game, 0, 0);
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, height = inputOptions.height;
if (inputOptions.font) {
//fetch height from font;
height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
}
height = inputOptions.padding * 2 + height;
var width = inputOptions.width;
width = inputOptions.padding * 2 + width;
this.beginFill(bgColor, alpha)
.lineStyle(inputOptions.borderWidth || 1, borderColor, alpha);
if (borderRadius > 0) {
this.drawRoundedRect(0, 0, width, height, borderRadius);
}
else {
this.drawRect(0, 0, width, height);
}
}
return InputBox;
})(Phaser.Graphics);
Fabrique.InputBox = InputBox;
})(Fabrique || (Fabrique = {}));
var Fabrique;
(function (Fabrique) {
var SelectionHighlight = (function (_super) {
__extends(SelectionHighlight, _super);
function SelectionHighlight(game, inputOptions) {
_super.call(this, game, inputOptions.padding, inputOptions.padding);
this.inputOptions = inputOptions;
}
SelectionHighlight.prototype.updateSelection = function (rect) {
var color = Phaser.Color.webToColor(this.inputOptions.selectionColor);
this.clear();
this.beginFill(SelectionHighlight.rgb2hex(color), color.a);
this.drawRect(rect.x, rect.y, rect.width, rect.height - this.inputOptions.padding);
};
SelectionHighlight.rgb2hex = function (color) {
return parseInt(("0" + color.r.toString(16)).slice(-2) +
("0" + color.g.toString(16)).slice(-2) +
("0" + color.b.toString(16)).slice(-2), 16);
};
return SelectionHighlight;
})(Phaser.Graphics);
Fabrique.SelectionHighlight = SelectionHighlight;
})(Fabrique || (Fabrique = {}));
var Fabrique;
(function (Fabrique) {
var TextMask = (function (_super) {
__extends(TextMask, _super);
function TextMask(game, inputOptions) {
_super.call(this, game, inputOptions.padding, inputOptions.padding);
var borderRadius = inputOptions.borderRadius, height = inputOptions.height;
if (inputOptions.font) {
//fetch height from font;
height = Math.max(parseInt(inputOptions.font.substr(0, inputOptions.font.indexOf('px')), 10), height);
}
var width = inputOptions.width;
this.beginFill(0x000000);
if (borderRadius > 0) {
this.drawRoundedRect(0, 0, width, height, borderRadius);
}
else {
this.drawRect(0, 0, width, height);
}
}
return TextMask;
})(Phaser.Graphics);
Fabrique.TextMask = TextMask;
})(Fabrique || (Fabrique = {}));
var Fabrique;
(function (Fabrique) {
var Plugins;

@@ -272,0 +530,0 @@ (function (Plugins) {

6

build/phaser-input.min.js
/*!
* phaser-input - version 0.1.4
* 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 26-02-2016
* Build at 01-03-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[a.number=2]="number"}(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.inputOptions=f,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.cursorColor||"#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.fill||"#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.setTexture(this.box.generateTexture())},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,c.type=b[this.type],!this.inputOptions.maxLength||this.type!==b.text&&this.type!==b.password||(c.maxLength=this.inputOptions.maxLength),this.inputOptions.min&&this.type===b.number&&(c.min=this.inputOptions.min),this.inputOptions.min&&this.type===b.number&&(c.max=this.inputOptions.max),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&&null!==this.placeHolder&&(this.placeHolder.visible=!0),this.cursor.visible=!1},c.prototype.startFocus=function(){var a=document.getElementById(this.id);this.game.device.desktop?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 if(this.type===b.number){var d=parseInt(this.value);a=d<parseInt(this.inputOptions.min)?this.inputOptions.min:d>parseInt(this.inputOptions.max)?this.inputOptions.max:this.value}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.prototype.resetText=function(){this.value="",document.getElementById(this.id).value=this.value,this.updateText(),this.endFocus()},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 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){void 0===c&&(c=b.text),void 0===d&&(d=""),this.id=a,this.type=c,this.element=document.createElement("input"),this.element.id=a,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[c],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(){this.element.focus()},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){switch(void 0===f&&(f={}),b.call(this,c,d,e),this.placeHolder=null,this.box=null,this.focus=!1,this.value="",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.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("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)}return __extends(c,b),c.prototype.checkDown=function(a){if(this.input.checkPointerOver(a)){if(this.focus)return void this.setCaretOnclick(a);this.focus=!0,null!==this.placeHolder&&(this.placeHolder.visible=!1),this.startFocus()}else this.focus===!0&&this.endFocus()},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.domElement.removeEventListener(),this.focus=!1,0===this.value.length&&null!==this.placeHolder&&(this.placeHolder.visible=!0),this.cursor.visible=!1},c.prototype.startFocus=function(){var a=this;this.domElement.addKeyUpListener(this.keyListener.bind(this)),this.game.device.desktop?setTimeout(function(){a.domElement.focus()},0):this.domElement.focus()},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.stage).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.keyListener=function(){this.value=this.domElement.value,this.updateText(),this.updateCursor(),this.updateSelection()},c.prototype.destroy=function(){this.domElement.destroy(),b.prototype.destroy.call(this)},c.prototype.resetText=function(){this.value="",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}(Phaser.Plugin);b.InputField=c}(b=a.Plugins||(a.Plugins={}))}(Fabrique||(Fabrique={}));

4

package.json
{
"name": "phaser-input",
"author": "OrangeGames",
"version": "0.1.4",
"version": "1.0.0",
"description": "Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.",

@@ -31,3 +31,3 @@ "contributors": [

"phaser": "2.4.6",
"typescript": "1.6.x"
"typescript": "1.8.x"
},

@@ -34,0 +34,0 @@ "engines": {

17

README.md

@@ -50,5 +50,2 @@ Phaser Input

-------------------
- 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!!)

@@ -74,5 +71,5 @@

- **font**: string (14px Arial by default) The font that is used for the input box, covers the input text, placeholder and cursor
- **maxLength**: number (none by default) The maximum amount of characters allowed, not for number input fields
- **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 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.

@@ -92,2 +89,12 @@ Browser Support

---------
### 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

@@ -94,0 +101,0 @@ * You can now reset text

build/phaser-input.js.map

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet