phaser-input - npm Package Compare versions

Comparing version 0.1.4 to 1.0.0

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 {

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

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={}));

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": {

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

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

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70380

increased by80.08%

Lines of code

715

increased by74.82%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

121

increased by6.14%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes