Popup

Popup is an interface that allows you to display an arbitrary View as a popup window.To create the Popup interface, use the function

NewPopup(view View, param Params) Popup

where view - View of popup content (cannot be nil);params - parameters of the popup window (may be nil). As parameters of the pop-up window, either any View propertiesor a number of additional properties (they will be described below) can be used.

Once a Popup has been created, it needs to be displayed. To do this, use the Show() method of the Popup interface.To simplify the code, you can use the ShowPopup function, which is defined as

func ShowPopup(view View, param Params) Popup {
	popup := NewPopup(view, param)
	if popup != nil {
		popup.Show()
	}
	return popup
}

To close a popup window, use the Dismiss() method of the Popup interface.

In addition to the Show() and Dismiss() methods, the Popup interface has the following methods:

• Session() Session - returns the current session;
• View() View - returns the contents of the popup window.

Popup header

The popup window can have a title. In order to add a title, you need to add title text.For this, the "title" property (Title constant) is used, which can take two types of values:

• string
• view

The "title-style" string property (TitleStyle constant) is used to set the title style.The default title style is "ruiPopupTitle". If you want all your popups to have the same style, it's betternot to use the "title-style" property, but to override the "ruiPopupTitle" style.

The header can also have a window close button. To add it to the header, use the "close-button" bool property.Setting this property to "true" adds a window close button to the title bar (the default value is "false").

Arrow Popup

A pop-up window can have an arrow on one side. An arrow is specified using the "arrow" int property (Arrow constant).The "arrow" property can take the following values

The size of the arrow is specified using the "arrow-size" (ArrowSize constant) and "arrow-width" (ArrowWidth constant) SizeUnit properties.They specify the length ("arrow-size") and width ("arrow-width") of the arrow.If these properties are not set, then the constants "@ruiArrowSize" (the default value is 16px)and "@ruiArrowWidth" (the default value is 16px) are used.

The alignment of the arrow relative to the popup is set using the "arrow-align" int property (ArrowAlign constant).The "arrow-align" property can take the following values

You can also set an additional offset for the arrow. For this, the "arrow-offset" SizeUnit property (ArrowOffset constant) is used.

If the value of the "arrow-align" property is TopAlign/LeftAlign, then the offset is relative to the top/left side.If the value of the "arrow-align" property is BottomAlign/RightAlign, then the offset is relative to the bottom/right side.If the value of the "arrow-align" property is CenterAlign, then an offset (can be either positive or negative) is added as an arrow padding.That is, the arrow is aligned in the center with an offset

If "arrow-offset" is not set, then the default value for "arrow-align" equal to CenterAlign is 0.For other "arrow-align" values, the default value is the appropriate corner radius of the popup.

Close Popup

As it was said above, the Dismiss() method of the Popup interface is used to close the popup window.

If a close button is added to the window title, clicking on it automatically calls the Dismiss() method.You cannot override the behavior of the window's close button.If you still need to redefine the behavior of this button, then this can be done by creating a custom header and creating your own close button in it.

There is another way to automatically call the Dismiss() method. This is the "outside-close" bool property (OutsideClose constant).If this property is set to "true", then clicking outside the popup window automatically calls the Dismiss() method.

The "dismiss-event" event (DismissEvent constant) is used to track the closing of the popup.It occurs after the Popup disappears from the screen.The main listener for this event has the following format:

func(Popup)

Button area

It is often necessary to add buttons such as "OK", "Cancel", etc. to the popup window.Using the "buttons" property (Buttons constant) you can add buttons that will be placed at the bottom of the window.The "buttons" property can be assigned the following data types:

• PopupButton
• []PopupButton

Where the PopupButton structure is declared as

type PopupButton struct {
	Title   string
	OnClick func(Popup)
}

where Title is the text of the button, OnClick is the function called when the button is clicked.

By default, buttons are aligned to the right edge of the popup window. However, this behavior can be overridden.For this, the "buttons-align" int property (ButtonsAlign constant) is used, which can take the following values:

The distance between the buttons is set using the "ruiPopupButtonGap" constant of the SizeUnit type. You can override it in your theme.

Popup alignment

By default, the popup is positioned in the center of the browser window. You can change this behavior usingthe "vertical-align" (VerticalAlign constant) and "horizontal-align" (HorizontalAlign constant) int properties.

The "vertical-align" property can take the following values:

The "horizontal-align" property can take the following values:

The "margin" property can be used to move the window.

For example, you can organize a popup window attached to a button like this

rui.ShowPopup(myPopupView, rui.Params{
	rui.HorizontalAlign: rui.LeftAlign,
	rui.VerticalAlign:   rui.TopAlign,
	rui.MarginLeft:      rui.Px(myButton.Frame().Left),
	rui.MarginTop:       rui.Px(myButton.Frame().Bottom()),
})

Standard Popup

The rui library already implements some standard popups.The following functions are used to display them.

func ShowMessage(title, text string, session Session)

This function displays a message with the title given in the "title" argument and the message text given in the "text" argument.

func ShowQuestion(title, text string, session Session, onYes func(), onNo func())

This function displays a message with the given title and text and two buttons "Yes" and "No".When the "Yes" button is clicked, the message is closed and the onYes function is called (if it is not nil).When the "No" button is pressed, the message is closed and the onNo function is called (if it is not nil).

func ShowCancellableQuestion(title, text string, session Session, onYes func(), onNo func(), onCancel func())

This function displays a message with the given title and text and three buttons "Yes", "No" and "Cancel".When the "Yes", "No" or "Cancel" button is pressed, the message is closed and the onYes, onNo or onCancel function(if it is not nil) is called, respectively.

func ShowMenu(session Session, params Params) Popup

This function displays the menu. Menu items are set using the Items property.The property is identical to Items and is identical to the ListView property of the same name.The "popup-menu-result" property (PopupMenuResult constant) sets the function to be called when a menu item is selected.Its format:

func(int)

Menu example:

rui.ShowMenu(session, rui.Params{
	rui.OutsideClose:    true,
	rui.Items:           []string{"Item 1", "Item 2", "Item 3"},
	rui.PopupMenuResult: func(index int) {
		// ...
	},
})