Class: InputControl

Extends

• GOWN.Skinable

Members

staticGOWN.InputControl.currentInputGOWN.InputControl

Currently selected input control (used for tab index)

static,readonlyGOWN.InputControl.DOWNString

Down state: mouse button is pressed or finger touches the screen

static,readonlyGOWN.InputControl.HOVERString

Hover state: mouse pointer hovers over the button (ignored on mobile)

static,readonlyGOWN.InputControl.OUTString

Hover state: mouse pointer hovers over the button (ignored on mobile)

static,readonlyGOWN.InputControl.UPString

Up state: mouse button is released or finger is removed from the screen

allowDestroyCachebool

Will destroy the skin cache when the skinable gets destroyed

Default Value:

• true

autoPreventInteractionbool

Prevent other interaction (touch/move) on this component

Default Value:

• false

blinkIntervalNumber

Interval for the cursor (in milliseconds)

Default Value:

• 500

currentStateString

The current state TODO: move to skinable?

Default Value:

• InputControl.UP

enabledBoolean

Enables/Disables the control. (not implemented yet)

hasFocusbool

Determine if the input has the focus

Default Value:

• false

maxCharsString

The maximum number of characters that may be entered. If 0, any number of characters may be entered. (same as maxLength for DOM inputs)

Default Value:

• 0

receiveKeysbool

TODO

Default Value:

• true

selectionBgPIXI.Graphics

Text selection background

skinFallbackString

The fallback skin if the other skin does not exist (e.g. if a mobile theme that does not provide a "hover" state is used on a desktop system) (normally the default "up"-state skin)

Default Value:

• 'up'

skinNameString

Change the skin name. You normally set the skin name as constant in your control, but if you want you can set another skin name to change skins for single components at runtime.

stylePIXI.TextStyle

Set the text style (size, font etc.) for text and cursor

textString

Set the text that is shown inside the input field. Calls onTextChange callback if text changes.

Default Value:

• ''

Methods

blur()

controls/InputControl.js, line 428

Blur the text input (remove focus)

inherited changeSkin(skin)

core/Skinable.js, line 110

Remove old skin and add new one

Name	Type	Description
skin	DisplayObject

deleteSelection()

controls/InputControl.js, line 280

Delete the selected text

deleteText(fromPos, toPos){String}

controls/InputControl.js, line 300

Delete text from a start position to an end position

Name	Type	Description
fromPos	Number	start position
toPos	Number	end position

Returns:

Type	Description
String

inherited destroy()

core/Skinable.js, line 221

Destroy the Skinable and empty the skin cache

focus()

controls/InputControl.js, line 376

Focus on this input and set it as current

inherited fromSkin(name, callback)

core/Skinable.js, line 134

Get image from skin (will execute a callback with the loaded skin when it is loaded or call it directly when it already is loaded)

Name	Type	Description
name	String	name of the state
callback	function	callback that is executed if the skin is loaded

insertChar(char)

controls/InputControl.js, line 267

Insert a char at the current cursor position

Name	Type	Description
char	String	The char that gets inserted

lineHeight(){Number}

controls/InputControl.js, line 455

Height of the line in pixel (assume that every character of pixi text has the same line height)

Returns:

Type	Description
Number

inherited mousePos(){PIXI.Point}

core/Control.js, line 69

Get the local mouse position from PIXI.InteractionData

Returns:

Type	Description
PIXI.Point

moveCursorLeft()

controls/InputControl.js, line 249

Move the cursor left

moveCursorRight()

controls/InputControl.js, line 257

Move the cursor right

protectedonblur()

controls/InputControl.js, line 666

Callback that will be executed once the text input is blurred

protectedonDown()

controls/InputControl.js, line 518

onDown callback

protectedonfocus()

controls/InputControl.js, line 422

Callback to execute code on focus

protectedonInputChanged()

controls/InputControl.js, line 227

Input changed callback

protectedonMouseUpOutside()

controls/InputControl.js, line 411

Blurs the input when the mouse is released outside

protectedonMove()

controls/InputControl.js, line 492

onMove callback

protectedonUp()

controls/InputControl.js, line 561

onUp callback

pixelToTextPos(pixelPos){Number}

controls/InputControl.js, line 630

From pixel position on the text to character position inside the text (used when clicked on the text)

Name	Type	Description
pixelPos		Pixel position of the mouse on the text

Returns:

Type	Description
Number	Position in the text

inherited preloadSkins()

core/Skinable.js, line 124

Initiate all skins first

protectedredraw()

controls/InputControl.js, line 682

Update before draw call (draw cursor and selection)

setCursorPos()

controls/InputControl.js, line 443

Set the cursor position on the text

setText(text)

controls/InputControl.js, line 332

Set the input control text.

Name	Type	Description
text	String	The text to set

setTheme(theme)

controls/InputControl.js, line 318

Change the theme

Name	Type	Description
theme	GOWN.Theme	the new theme

textToPixelPos(textPos, position){PIXI.Point}

controls/InputControl.js, line 600

From position in the text to pixel position (for cursor/selection positioning)

Name	Type	Description
textPos	Number	Current character position in the text
position	PIXI.Point	optional point that will be set with the pixel position and returned

Returns:

Type	Description
PIXI.Point	Pixel position

textWidth(text){Number}

controls/InputControl.js, line 367

Get the width of a text

Name	Type	Description
text	String	The text to get the width from

Returns:

Type	Description
Number

updateSelection(start, end){boolean}

controls/InputControl.js, line 350

Set the selected text

Name	Type	Description
start	Number	Start position in the text
end	Number	End position in the text

Returns:

Type	Description
boolean

inherited updateTheme(data)

core/Skinable.js, line 100

Overwrite data from theme for this specific component. (usable if you want to change e.g. background color based on selected items)

Name	Type	Description
data		updated skin data