Olympe SDK

Class: InputPopup

olympe.ui.std. InputPopup

An InputPopup panel is a popup panel comprised of a title label, a message label, a text input field, a confirm button and a cancel button. You can access the value in the text field with olympe.ui.std.ConfirmPopup#getInputValue().

Example:

const popup = new olympe.ui.std.InputPopup(new Vector2(400, 150), true)
    .setTitle("Name")
    .setMessage("What is you name?");
popup.onConfirm(() => { console.log(`Hello ${popup.getInputValue()}! `);} );
popup.setVisible(true);

Creates this popup Window:

InputPopup

new InputPopup( [dimension] [, modal] [, alternativeParent] [, themeClass])

Creates an instance of a InputPopup with a given dimension.

Parameters:
Name Type Argument Default Description
dimension olympe.df.PVector2 <optional>

The dimension (w, h) for this popup window.
modal boolean <optional>
 true

true if popup is modal (user can't click outside popup).
alternativeParent olympe.ui.std.AbsoluteLayout <optional>

The parent container.
themeClass olympe.df.POString | string <optional>

The theme class.

Extends

Members

<protected, nullable> anchoredPosition :olympe.df.Vector2

Type:
Inherited From:
Overrides:

<protected> attachedParent :olympe.df.Proxy.<olympe.ui.std.Layer>|olympe.ui.std.Layer

Parent of this popup.

Type:
Inherited From:
Overrides:

<protected> autoHeight :olympe.df.POBoolean

Whether this popup sets its height automatically or not.

Type:
Inherited From:
Overrides:

<protected> autoWidth :olympe.df.POBoolean

Whether this popup sets its width automatically or not.

Type:
Inherited From:
Overrides:

<protected, non-null> container :olympe.ui.std.AbsoluteLayout

Layout used by this popup to render its content.

Type:
Inherited From:
Overrides:

<protected, non-null> content :olympe.df.Proxy.<olympe.ui.std.DockableElement>

Type:
Inherited From:
Overrides:

Whether this popup is modal or not.

Type:
  • boolean
Inherited From:
Overrides:

<protected> visible :olympe.df.POBoolean

Whether this popup is visible or not.

Type:
Inherited From:
Overrides:

Methods

anchorToAttachedParent()

Anchor to attached parent, center in the middle

Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

anchorToElement(element [, horizontalAlign] [, verticalAlign] [, offset])

Anchor the FloatingElement to a screen element.

Parameters:
Name Type Argument Default Description
element olympe.ui.std.DockableElement

The element to use as an anchor.
horizontalAlign olympe.ui.std.FloatingElement.HorizontalAnchorAlignType <optional>
 MIDDLE

The horizontal alignment.
verticalAlign olympe.ui.std.FloatingElement.VerticalAnchorAlignType <optional>
 MIDDLE

The vertical alignment.
offset olympe.df.Vector2 <optional>

The offset (dx, dy) relative to the anchor's position.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

anchorToMouse(mouseEvent [, horizontalAlign] [, verticalAlign] [, offset])

Anchor the FloatingElement to the mouse.

Parameters:
Name Type Argument Default Description
mouseEvent olympe.df.Proxy.<olympe.ui.events.MouseEvent> | olympe.ui.events.MouseEvent

Emitted by a UI element, use getEventMouseMove to follow the mouse
horizontalAlign olympe.ui.std.FloatingElement.HorizontalAnchorAlignType <optional>
 MIDDLE

The horizontal alignment.
verticalAlign olympe.ui.std.FloatingElement.VerticalAnchorAlignType <optional>
 MIDDLE

The vertical alignment.
offset olympe.df.Vector2 <optional>

The offset (dx, dy) relative to the mouse's position.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

<protected> cancel()

Inherited From:
Overrides:

<protected> confirm()

Inherited From:
Overrides:

getAnimateContent()

Checks whether the content is to be animated.

Inherited From:
Overrides:
Returns:

true if the content is animated, false for the element itself.

Type
olympe.df.POBoolean

getAnimateOverlay()

Checks whether the overlay is to be animated.

Inherited From:
Overrides:
Returns:

true if the overlay is to be animated.

Type
olympe.df.POBoolean

getAnimation()

Gets the animation associated with this FloatingElement.

Inherited From:
Overrides:
Returns:

The animation.

Type
olympe.df.Proxy.<olympe.ui.std.TransitionAnimation>

getAutoHeight()

Checks whether the height of this FloatingElement is calculated automatically.

Inherited From:
Overrides:
Returns:

true if height is automatically calculated.

Type
olympe.df.POBoolean

getAutoWidth()

Checks whether the width of this FloatingElement is calculated automatically.

Inherited From:
Overrides:
Returns:

true if width is automatically calculated.

Type
olympe.df.POBoolean

getDimension()

Gets the dimension of this FloatingElement.

Inherited From:
Overrides:
Returns:

The dimension.

Type
olympe.df.PVector2

getInputValue()

Gets the text from the input field of this popup.

Returns:

The text in the text field of this popup.

Type
olympe.df.POString

getOverlayBackgroundColor()

Gets the background color of the overlay when this popup is modal.

Inherited From:
Overrides:
Returns:

The background Color.

Type
olympe.df.Proxy.<olympe.df.Color>

getParent()

Gets the parent container of this element.

Inherited From:
Overrides:
Returns:

The parent.

Type
olympe.df.Proxy.<olympe.ui.std.DockableElement>

getPosition()

Gets the position of this FloatingElement.

Inherited From:
Overrides:
Returns:

Position of this element.

Type
olympe.df.PVector2

isVisible()

Checks whether this FloatingElement is visible.

Inherited From:
Overrides:
Returns:

true if popup is visible

Type
olympe.df.POBoolean

offCancel(key)

Unregisters a callback previously set with olympe.ui.std.PopupPanel#onCancel.

Parameters:
Name Type Description
key string

The ID of the callback.
Inherited From:
Overrides:

offConfirm(key)

Unregisters a callback previously set with olympe.ui.std.PopupPanel#onConfirm.

Parameters:
Name Type Description
key string

The ID of the callback.
Inherited From:
Overrides:

onCancel(callback [, key])

Registers a callback to be executed when the 'Cancel' button of the popup is pressed.

Parameters:
Name Type Argument Description
callback function

Function to call when the 'Cancel' button is pressed.
key string <optional>

Identifier for this event registration. A unique one will be generated if omitted.
Inherited From:
Overrides:
Returns:

the ID of the callback.

Type
string

onCloseAnimationEnd(callbackFunc [, key])

Registers a callback to be called when the 'close' animation ends.

Parameters:
Name Type Argument Description
callbackFunc function

The function to call back.
key string <optional>

The ID of the callback. Generated automatically if omitted.
Inherited From:
Overrides:
Returns:

The ID of the callback.

Type
string

onConfirm(callback [, key])

Registers a callback to be executed when the 'Confirm' button of the popup is pressed.

Parameters:
Name Type Argument Description
callback function

Function to call when the Confirm button is pressed.
key string <optional>

Identifier for this event registration. A unique one will be generated if omitted.
Inherited From:
Overrides:
Returns:

The ID of the callback.

Type
string

onOpenAnimationEnd(callbackFunc [, key])

Registers a callback to be called when the 'open' animation ends.

Parameters:
Name Type Argument Description
callbackFunc function

The function to call back.
key string <optional>

The ID of the callback. Generated automatically if omitted.
Inherited From:
Overrides:
Returns:

The ID of the callback.

Type
string

onOverlayClick(callbackFunc [, key])

Registers a callback to be called when the user clicks in the overlay.

Parameters:
Name Type Argument Description
callbackFunc olympe.ui.events.OnMouseEventCallback

The function to call back.
key string <optional>

The ID of the callback. Generated automatically if omitted.
Inherited From:
Overrides:
Returns:

The ID of the callback.

Type
string

releaseAnchor()

Unties this FloatingElement from its anchor.

Inherited From:
Overrides:
See:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

restoreToAnchor()

Returns to the position set by anchorToElement.

Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setAnimateContent(value)

Sets whether to animate content inside the FloatingElement, or the FloatingElement itself.

Parameters:
Name Type Description
value olympe.df.POBoolean | boolean

true to animate the content, false for the container.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setAnimateOverlay(value)

Sets whether to animate the overlay (for modal elements).

Parameters:
Name Type Description
value olympe.df.POBoolean | boolean

true to animate the overlay.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setAnimation(animation)

Sets the animation to use when this FloatingElement becomes visible.

Parameters:
Name Type Description
animation olympe.df.Proxy.<olympe.ui.std.TransitionAnimation> | olympe.ui.std.TransitionAnimation

The animation.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setAutoHeight(value)

Sets whether the height of this FloatingElement should be calculated automatically.

Parameters:
Name Type Description
value olympe.df.POBoolean | boolean

true to calculate the height automatically.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

<protected> setAutoSizeLogic()

Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setAutoWidth(value)

Sets whether the width of this FloatingElement should be calculated automatically.

Parameters:
Name Type Description
value olympe.df.POBoolean | boolean

true to calculate the width automatically.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setBackgroundColor(color)

Sets the background color for this FloatingElement.

Parameters:
Name Type Description
color olympe.df.PColor

The background color.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setBackgroundImage(url [, size] [, position] [, sizeVector] [, positionVector])

Sets the background image for this FloatingElement.

Parameters:
Name Type Argument Description
url olympe.df.POString | olympe.df.Node | string

URL to image.
size olympe.ui.common.BackgroundImageSize | olympe.df.Proxy | olympe.df.Node <optional>

The sizing model of the image.
position olympe.ui.common.BackgroundImagePosition | olympe.df.Proxy | olympe.df.Node <optional>

The position of the image inside the container.
sizeVector olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node <optional>

Size in pixel (ignored if size is not olympe.ui.common.BackgroundImageSize.MANUAL, vertical scale size automatically adjusted if imageSizeY is missing)
positionVector olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node <optional>

Position of image in pixel (ignored if position is not olympe.ui.common.BackgroundImagePosition.MANUAL)
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setBorder(width, color)

Sets the border width and color of this FloatingElement.

Parameters:
Name Type Description
width number | olympe.df.PONumber

The width, in pixels.
color olympe.df.PColor

The color.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setButtonThemeClass(themeClass)

Sets the theme class for the buttons.

Parameters:
Name Type Description
themeClass olympe.df.POString | string

Name of the theme class.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setCancelBtnLabel( [text])

Sets the text that will be displayed in the cancel button.

Parameters:
Name Type Argument Description
text olympe.df.POString | string <optional>

The text to display in the cancel button.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setClosableByClickingOut(value)

Set whether or not this element should be closed when the user clicks outside of it.

The default behaviour is to not do anything.

Parameters:
Name Type Description
value boolean
Inherited From:
Overrides:

setConfirmBtnLabel( [text])

Sets the text that will be displayed in the confirm button.

Parameters:
Name Type Argument Description
text olympe.df.POString | string <optional>

The text to display in the confirm button.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setContent(content)

Sets the content of this FloatingElement.

Parameters:
Name Type Description
content olympe.df.Proxy.<olympe.ui.std.DockableElement> | olympe.ui.std.DockableElement

The content.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setCornerRadius(radius)

Sets the corner radius for this FloatingElement.

Parameters:
Name Type Description
radius olympe.df.PONumber | olympe.df.Node | number

The corner radius.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setDimension(dimension)

Sets the dimension of this FloatingElement.

Parameters:
Name Type Description
dimension olympe.df.PVector2

The dimension (w, h).
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setInputBackgroundColor(color)

Sets the background color for the input text field.

Parameters:
Name Type Description
color olympe.df.Color | olympe.df.Proxy.<olympe.df.Color>

The background color for the text field.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputBorder(width, color)

Sets the border width & color for the input text field.

Parameters:
Name Type Description
width olympe.df.PONumber | number

Border width.
color olympe.df.Color | olympe.df.Proxy.<olympe.df.Color>

Border color.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputFontFamily(font)

Sets the font family to use in the input text field.

Parameters:
Name Type Description
font olympe.df.POString | string

Name of the font family.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputHeight(height)

Sets the height of the input text field.

Parameters:
Name Type Description
height olympe.df.PONumber | number

Height of the text field.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputPaddingBottom(padding)

Sets the bottom padding for the input text field.

Parameters:
Name Type Description
padding olympe.df.PONumber | number

Padding for the bottom of the text field.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputPaddingLeft(padding)

Sets the left padding for the input text field.

Parameters:
Name Type Description
padding olympe.df.PONumber | number

Padding for the left side of the text field.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputPaddingRight(padding)

Sets the right padding for the input text field.

Parameters:
Name Type Description
padding olympe.df.PONumber | number

Padding for the right side of the text field.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputPaddingTop(padding)

Sets the top padding for the input text field.

Parameters:
Name Type Description
padding olympe.df.PONumber | number

Padding for the top of the text field.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setInputTextColor(color)

Sets the text color for the input text field.

Parameters:
Name Type Description
color olympe.df.PColor

The text color for the text field.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setMessage( [message])

Sets the text that will be displayed in the message label.

Parameters:
Name Type Argument Description
message olympe.df.POString | String <optional>

The text to display in the message label.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setMessageThemeClass(themeClass)

Sets the theme class for the message label.

Parameters:
Name Type Description
themeClass olympe.df.POString | string

Name of the theme class.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setOpacity(opacity)

Sets the opacity for this FloatingElement. It's a value between 0 & 1, 0 meaning transparent and 1 meaning opaque.

Parameters:
Name Type Description
opacity olympe.df.PONumber

The opacity, a value between 0 & 1.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setOverlayBackgroundColor(color)

Sets the overlay background color when this popup is modal.

Parameters:
Name Type Description
color olympe.df.Color | olympe.df.Proxy.<olympe.df.Color>

The overlay background color.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setPadding(padding)

Sets the padding, in pixels, to be applied around the content of this popup.

Parameters:
Name Type Description
padding olympe.df.PONumber | number

Padding, in pixels, around content of this alert.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setPosition(position)

Sets the position of this FloatingElement.

Warning: This method should only be called by Layouts!

Parameters:
Name Type Description
position olympe.df.PVector2

The position of this element.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setScale(scale)

Sets the scale for both axis (x, y) of this FloatingElement.

Parameters:
Name Type Description
scale olympe.df.PVector2

The scale (x,y).
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

setSpacing(spacing)

Sets the spacing, in pixels, to be applied between elements of this panel.

Parameters:
Name Type Description
spacing olympe.df.PONumber | number

Spacing, in pixels, between elements of this popup.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setTextFieldType(type)

Sets the type of the text input field.

Parameters:
Name Type Description
type olympe.df.Proxy.<olympe.ui.common.TextFieldType> | olympe.ui.common.TextFieldType

Type of value in this text field (text, password, number, email, ...)
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setTitle( [title])

Sets the title of this input popup.

Parameters:
Name Type Argument Description
title olympe.df.POString | String <optional>

The text to display in the title label.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

setTitleThemeClass(themeClass)

Sets the theme class for the title label.

Parameters:
Name Type Description
themeClass olympe.df.POString | string

Name of the theme class.
Returns:

This InputPopup.

Type
olympe.ui.std.InputPopup

<protected> setVisibilityLogic()

Inherited From:
Overrides:

setVisible(visible)

Displays or hides this FloatingElement.

Parameters:
Name Type Description
visible olympe.df.POBoolean | boolean

true to display, false to hide.
Inherited From:
Overrides:
Returns:

This FloatingElement.

Type
olympe.ui.std.FloatingElement

unregisterOnCloseAnimationEnd(key)

Unregisters a callback set by olympe.ui.std.FloatingElement#onCloseAnimationEnd.

Parameters:
Name Type Description
key string

The ID of the callback.
Inherited From:
Overrides:

unregisterOnOpenAnimationEnd(key)

Unregisters a callback set by olympe.ui.std.FloatingElement#onOpenAnimationEnd.

Parameters:
Name Type Description
key string

The ID of the callback.
Inherited From:
Overrides:

unregisterOnOverlayClick(key)

Unregisters a callback set by olympe.ui.std.FloatingElement#onOverlayClick.

Parameters:
Name Type Description
key string

The ID of the callback.
Inherited From:
Overrides: