Class: Scrollable

Extends

• GOWN.Skinable

Members

static,readonlyGOWN.Scrollable.DESKTOP_MODEString

In desktop mode mouse wheel support is added (default)

static,readonlyGOWN.Scrollable.HORIZONTALString

Show horizontal scrollbar/slider

static,readonlyGOWN.Scrollable.MOBILE_MODEString

In mobile mode mouse wheel support is disabled

static,readonlyGOWN.Scrollable.VERTICALString

Show vertical scrollbar/slider

allowDestroyCachebool

Will destroy the skin cache when the skinable gets destroyed

Default Value:

• true

directionString

The scrollable direction

Default Value:

• Scrollable.HORIZONTAL

enabledBoolean

Enables/Disables the control. (not implemented yet)

heightNumber

The height of the Scrollable, setting this will redraw the track and thumb.

inverseBoolean

Inverse the progress bar

maximumNumber

Set maximum and update value if necessary

Default Value:

• 100

minimumNumber

Set minimum and update value if necessary

Default Value:

• 0

modeString

The scrollable mode

Default Value:

• Scrollable.DESKTOP_MODE

scrolldeltaNumber

Number of pixels you scroll at a time (if the event delta is 1 / -1)

Default Value:

• 10

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.

valueNumber

Set value (between minimum and maximum)

Default Value:

• 0

widthNumber

The width of the Scrollable, setting this will redraw the track and thumb.

Methods

inherited changeSkin(skin)

core/Skinable.js, line 110

Remove old skin and add new one

Name	Type	Description
skin	DisplayObject

inherited destroy()

core/Skinable.js, line 221

Destroy the Skinable and empty the skin cache

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

protectedhandleDown(mouseData)

controls/Scrollable.js, line 208

Handle mouse down/touch start. Move scroll thumb.

Name	Type	Description
mouseData		mouse data provided by PIXI

protectedhandleMove(mouseData)

controls/Scrollable.js, line 250

Handle mouse move. Moves the thumb.

Name	Type	Description
mouseData		mouse data provided by PIXI

protectedhandleUp()

controls/Scrollable.js, line 240

Handle mouse up/touch end

protectedhandleWheel(event)

controls/Scrollable.js, line 271

Handle mouse wheel. Moves thumb on track.

Name	Type	Description
event		mouse wheel event from browser

maxHeight(){Number}

controls/Scrollable.js, line 341

Returns the max. height in pixel (normally this.height - thumb height)

Returns:

Type	Description
Number

maxWidth(){Number}

controls/Scrollable.js, line 331

Returns the max. width in pixel (normally this.width - thumb width)

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

moveThumb(x, y){boolean}

controls/Scrollable.js, line 353

Move the thumb on the scroll bar within its bounds

Name	Type	Description
x	Number	New x position of the thumb
y	Number	New y position of the thumb

Returns:

Type	Description
boolean	Returns true if the position of the thumb has been moved

pixelToValue(position){Number}

controls/Scrollable.js, line 432

Calculate value of slider based on the current pixel position of the thumb

Name	Type	Description
position	Number	current pixel position of the thumb

Returns:

Type	Description
Number	Value between minimum and maximum

positionThumb(value)

controls/Scrollable.js, line 470

Position the thumb to a given value

Name	Type	Description
value	Number	The value to which the thumb gets moved

inherited preloadSkins()

core/Skinable.js, line 124

Initiate all skins first

protectedredraw()

controls/Scrollable.js, line 407

Update before draw call. Redraw track and progressbar and create thumb.

scrollToPosition()

controls/Scrollable.js, line 198

Scroll to a specific position (not implemented yet)

inherited setTheme(theme)

core/Skinable.js, line 83

Change the theme

Name	Type	Description
theme	GOWN.Theme	the new theme

thumbMoved(x, y)

controls/Scrollable.js, line 285

Thumb has new x/y position

Name	Type	Description
x	Number	x-position that has been scrolled to (ignored when vertical)
y	Number	y-position that has been scrolled to (ignored when horizontal)

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

valueToPixel(value){Number}

controls/Scrollable.js, line 451

Calculate current pixel position of thumb based on given value

Name	Type	Description
value	Number	The value of the thumb position

Returns:

Type	Description
Number	Position of the scroll thumb in pixel