rui_orig/popup.go

685 lines
16 KiB
Go
Raw Normal View History

2021-09-07 17:36:50 +03:00
package rui
2022-07-31 15:37:26 +03:00
import (
"strings"
)
2021-09-07 17:36:50 +03:00
const (
// Title is the constant for the "title" property tag.
// The "title" property is defined the Popup/Tabs title
2021-09-07 17:36:50 +03:00
Title = "title"
// TitleStyle is the constant for the "title-style" property tag.
// The "title-style" string property is used to set the title style of the Popup.
2021-09-07 17:36:50 +03:00
TitleStyle = "title-style"
// CloseButton is the constant for the "close-button" property tag.
// The "close-button" bool property allow to add the close button to the Popup.
// Setting this property to "true" adds a window close button to the title bar (the default value is "false").
2021-09-07 17:36:50 +03:00
CloseButton = "close-button"
// OutsideClose is the constant for the "outside-close" property tag.
// The "outside-close" is a bool property. If it is set to "true",
// then clicking outside the popup window automatically calls the Dismiss() method.
2021-09-07 17:36:50 +03:00
OutsideClose = "outside-close"
// Buttons is the constant for the "buttons" property tag.
// Using the "buttons" property you can add buttons that will be placed at the bottom of the Popup.
// The "buttons" property can be assigned the following data types: PopupButton and []PopupButton
Buttons = "buttons"
// ButtonsAlign is the constant for the "buttons-align" property tag.
// The "buttons-align" int property is used for set the horizontal alignment of Popup buttons.
// Valid values: LeftAlign (0), RightAlign (1), CenterAlign (2), and StretchAlign (3)
2021-09-07 17:36:50 +03:00
ButtonsAlign = "buttons-align"
// DismissEvent is the constant for the "dismiss-event" property tag.
// The "dismiss-event" event 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)
2021-11-17 12:32:37 +03:00
DismissEvent = "dismiss-event"
2022-07-27 20:31:57 +03:00
2022-07-31 15:37:26 +03:00
// Arrow is the constant for the "arrow" property tag.
// Using the "popup-arrow" int property you can add ...
Arrow = "arrow"
// ArrowAlign is the constant for the "arrow-align" property tag.
2022-08-07 18:59:56 +03:00
// The "arrow-align" int property is used for set the horizontal alignment of the Popup arrow.
2022-07-31 15:37:26 +03:00
// Valid values: LeftAlign (0), RightAlign (1), TopAlign (0), BottomAlign (1), CenterAlign (2)
ArrowAlign = "arrow-align"
// ArrowSize is the constant for the "arrow-size" property tag.
2022-08-07 18:59:56 +03:00
// The "arrow-size" SizeUnit property is used for set the size (length) of the Popup arrow.
2022-07-31 15:37:26 +03:00
ArrowSize = "arrow-size"
2022-08-07 18:59:56 +03:00
// ArrowWidth is the constant for the "arrow-width" property tag.
// The "arrow-width" SizeUnit property is used for set the width of the Popup arrow.
ArrowWidth = "arrow-width"
2022-07-31 15:37:26 +03:00
// ArrowOffset is the constant for the "arrow-offset" property tag.
2022-08-07 18:59:56 +03:00
// The "arrow-offset" SizeUnit property is used for set the offset of the Popup arrow.
2022-07-31 15:37:26 +03:00
ArrowOffset = "arrow-offset"
2022-08-07 18:59:56 +03:00
// NoneArrow is value of the popup "arrow" property: no arrow
NoneArrow = 0
// TopArrow is value of the popup "arrow" property:
// Arrow at the top side of the pop-up window
TopArrow = 1
// RightArrow is value of the popup "arrow" property:
// Arrow on the right side of the pop-up window
RightArrow = 2
// BottomArrow is value of the popup "arrow" property:
// Arrow at the bottom of the pop-up window
2022-07-31 15:37:26 +03:00
BottomArrow = 3
2022-08-07 18:59:56 +03:00
// LeftArrow is value of the popup "arrow" property:
// Arrow on the left side of the pop-up window
LeftArrow = 4
2021-09-07 17:36:50 +03:00
)
// PopupButton describes a button that will be placed at the bottom of the window.
2021-09-07 17:36:50 +03:00
type PopupButton struct {
Title string
OnClick func(Popup)
}
// Popup interface
type Popup interface {
View() View
Session() Session
Show()
Dismiss()
onDismiss()
2021-09-07 17:36:50 +03:00
html(buffer *strings.Builder)
viewByHTMLID(id string) View
}
type popupData struct {
2021-11-17 12:32:37 +03:00
layerView View
view View
dismissListener []func(Popup)
2021-09-07 17:36:50 +03:00
}
type popupManager struct {
popups []Popup
}
2022-08-07 18:59:56 +03:00
type popupArrow struct {
column, row int
location, align int
size, width, off SizeUnit
}
func (arrow *popupArrow) fixOff(popupView View) {
if arrow.align == CenterAlign && arrow.off.Type == Auto {
r := GetRadius(popupView, "")
switch arrow.location {
case TopArrow:
switch arrow.align {
case LeftAlign:
arrow.off = r.TopLeftX
case RightAlign:
arrow.off = r.TopRightX
}
case BottomArrow:
switch arrow.align {
case LeftAlign:
arrow.off = r.BottomLeftX
case RightAlign:
arrow.off = r.BottomRightX
}
case RightArrow:
switch arrow.align {
case TopAlign:
arrow.off = r.TopRightY
case BottomAlign:
arrow.off = r.BottomRightY
}
case LeftArrow:
switch arrow.align {
case TopAlign:
arrow.off = r.TopLeftY
case BottomAlign:
arrow.off = r.BottomLeftY
}
}
}
}
func (arrow *popupArrow) createView(popupView View) View {
session := popupView.Session()
defaultSize := func(constTag string, defValue SizeUnit) SizeUnit {
if value, ok := session.Constant(constTag); ok {
if size, ok := StringToSizeUnit(value); ok && size.Type != Auto && size.Value != 0 {
return size
}
}
return defValue
}
if arrow.size.Type == Auto || arrow.size.Value == 0 {
arrow.size = defaultSize("ruiArrowSize", Px(16))
}
if arrow.width.Type == Auto || arrow.width.Value == 0 {
arrow.width = defaultSize("ruiArrowWidth", Px(16))
}
2022-08-08 17:00:49 +03:00
params := Params{BackgroundColor: GetBackgroundColor(popupView, "")}
if shadow := GetViewShadows(popupView, ""); shadow != nil {
params[Shadow] = shadow
}
if filter := GetBackdropFilter(popupView, ""); filter != nil {
params[BackdropFilter] = filter
}
2022-08-07 18:59:56 +03:00
switch arrow.location {
case TopArrow:
params[Row] = 0
params[Column] = 1
2022-08-08 17:00:49 +03:00
params[Clip] = PolygonClip([]any{"0%", "100%", "50%", "0%", "100%", "100%"})
params[Width] = arrow.width
params[Height] = arrow.size
2022-08-07 18:59:56 +03:00
case RightArrow:
params[Row] = 1
params[Column] = 0
2022-08-08 17:00:49 +03:00
params[Clip] = PolygonClip([]any{"0%", "0%", "100%", "50%", "0%", "100%"})
params[Width] = arrow.size
params[Height] = arrow.width
2022-08-07 18:59:56 +03:00
case BottomArrow:
params[Row] = 0
params[Column] = 1
2022-08-08 17:00:49 +03:00
params[Clip] = PolygonClip([]any{"0%", "0%", "50%", "100%", "100%", "0%"})
params[Width] = arrow.width
params[Height] = arrow.size
2022-08-07 18:59:56 +03:00
case LeftArrow:
params[Row] = 1
params[Column] = 0
2022-08-08 17:00:49 +03:00
params[Clip] = PolygonClip([]any{"100%", "0%", "0%", "50%", "100%", "100%"})
params[Width] = arrow.size
params[Height] = arrow.width
2022-08-07 18:59:56 +03:00
}
arrowView := NewView(session, params)
params = Params{
Row: arrow.row,
Column: arrow.column,
Content: arrowView,
}
arrow.fixOff(popupView)
switch arrow.location {
case TopArrow, BottomArrow:
cellWidth := make([]SizeUnit, 3)
switch arrow.align {
case LeftAlign:
cellWidth[0] = arrow.off
cellWidth[2] = Fr(1)
case RightAlign:
cellWidth[0] = Fr(1)
cellWidth[2] = arrow.off
default:
cellWidth[0] = Fr(1)
cellWidth[2] = Fr(1)
if arrow.off.Type != Auto && arrow.off.Value != 0 {
arrowView.Set(MarginLeft, arrow.off)
}
}
params[CellWidth] = cellWidth
case RightArrow, LeftArrow:
cellHeight := make([]SizeUnit, 3)
switch arrow.align {
case TopAlign:
cellHeight[0] = arrow.off
cellHeight[2] = Fr(1)
case BottomAlign:
cellHeight[0] = Fr(1)
cellHeight[2] = arrow.off
default:
cellHeight[0] = Fr(1)
cellHeight[2] = Fr(1)
if arrow.off.Type != Auto && arrow.off.Value != 0 {
arrowView.Set(MarginTop, arrow.off)
}
}
params[CellHeight] = cellHeight
}
return NewGridLayout(session, params)
}
2022-07-31 15:37:26 +03:00
func (popup *popupData) init(view View, popupParams Params) {
2021-09-07 17:36:50 +03:00
popup.view = view
session := view.Session()
2022-08-07 18:59:56 +03:00
columnCount := 3
rowCount := 3
popupRow := 1
popupColumn := 1
arrow := popupArrow{
row: 1,
column: 1,
align: CenterAlign,
}
switch arrow.location, _ = enumProperty(popupParams, Arrow, session, NoneArrow); arrow.location {
case TopArrow:
rowCount = 4
popupRow = 2
case BottomArrow:
rowCount = 4
arrow.row = 2
case LeftArrow:
columnCount = 4
popupColumn = 2
case RightArrow:
columnCount = 4
arrow.column = 2
default:
}
cellWidth := make([]SizeUnit, columnCount)
switch hAlign, _ := enumProperty(popupParams, HorizontalAlign, session, CenterAlign); hAlign {
case LeftAlign:
cellWidth[columnCount-1] = Fr(1)
case RightAlign:
cellWidth[0] = Fr(1)
default:
cellWidth[0] = Fr(1)
cellWidth[columnCount-1] = Fr(1)
}
cellHeight := make([]SizeUnit, rowCount)
switch vAlign, _ := enumProperty(popupParams, VerticalAlign, session, CenterAlign); vAlign {
case LeftAlign:
cellHeight[rowCount-1] = Fr(1)
case RightAlign:
cellHeight[0] = Fr(1)
default:
cellHeight[0] = Fr(1)
cellHeight[rowCount-1] = Fr(1)
}
layerParams := Params{
Style: "ruiPopupLayer",
MaxWidth: Percent(100),
MaxHeight: Percent(100),
CellWidth: cellWidth,
CellHeight: cellHeight,
}
2022-07-31 15:37:26 +03:00
params := Params{
Style: "ruiPopup",
2022-08-07 18:59:56 +03:00
Row: popupRow,
Column: popupColumn,
2022-07-31 15:37:26 +03:00
MaxWidth: Percent(100),
MaxHeight: Percent(100),
CellVerticalAlign: StretchAlign,
CellHorizontalAlign: StretchAlign,
ClickEvent: func(View) {},
2022-08-07 18:59:56 +03:00
Shadow: NewShadowWithParams(Params{
SpreadRadius: Px(4),
Blur: Px(16),
ColorTag: "@ruiPopupShadow",
}),
}
2022-08-07 18:59:56 +03:00
var closeButton View = nil
2022-07-31 15:37:26 +03:00
outsideClose := false
buttons := []PopupButton{}
titleStyle := "ruiPopupTitle"
var title View = nil
2021-11-17 12:32:37 +03:00
2022-07-31 15:37:26 +03:00
for tag, value := range popupParams {
if value != nil {
switch tag {
2022-08-07 18:59:56 +03:00
case VerticalAlign, HorizontalAlign, Arrow, Row, Column:
// Do nothing
case Margin:
layerParams[Padding] = value
case MarginLeft:
layerParams[PaddingLeft] = value
case MarginRight:
layerParams[PaddingRight] = value
case MarginTop:
layerParams[PaddingTop] = value
case MarginBottom:
layerParams[PaddingBottom] = value
2022-07-31 15:37:26 +03:00
case CloseButton:
2022-08-07 18:59:56 +03:00
closeButton = NewGridLayout(session, Params{
Column: 1,
Height: "@ruiPopupTitleHeight",
Width: "@ruiPopupTitleHeight",
CellHorizontalAlign: CenterAlign,
CellVerticalAlign: CenterAlign,
TextSize: Px(20),
Content: "✕",
NotTranslate: true,
ClickEvent: func(View) {
popup.Dismiss()
},
})
2021-11-17 12:32:37 +03:00
2022-07-31 15:37:26 +03:00
case OutsideClose:
outsideClose, _ = boolProperty(popupParams, OutsideClose, session)
case Buttons:
switch value := value.(type) {
case PopupButton:
buttons = []PopupButton{value}
2021-11-17 12:32:37 +03:00
2022-07-31 15:37:26 +03:00
case []PopupButton:
buttons = value
2021-11-17 12:32:37 +03:00
}
2022-07-31 15:37:26 +03:00
case Title:
switch value := value.(type) {
case string:
title = NewTextView(view.Session(), Params{Text: value})
case View:
title = value
default:
notCompatibleType(Title, value)
2021-11-17 12:32:37 +03:00
}
2022-07-31 15:37:26 +03:00
case TitleStyle:
switch value := value.(type) {
case string:
titleStyle = value
2021-09-07 17:36:50 +03:00
2022-07-31 15:37:26 +03:00
default:
notCompatibleType(TitleStyle, value)
}
2021-09-07 17:36:50 +03:00
2022-07-31 15:37:26 +03:00
case DismissEvent:
if listeners, ok := valueToNoParamListeners[Popup](value); ok {
if listeners != nil {
popup.dismissListener = listeners
}
} else {
notCompatibleType(tag, value)
}
2021-09-07 17:36:50 +03:00
2022-07-31 15:37:26 +03:00
case ArrowAlign:
switch text := value.(type) {
case string:
switch text {
case "top":
value = "left"
2021-09-07 17:36:50 +03:00
2022-07-31 15:37:26 +03:00
case "bottom":
value = "right"
}
}
2022-08-07 18:59:56 +03:00
arrow.align, _ = enumProperty(popupParams, ArrowAlign, session, CenterAlign)
2021-09-07 17:36:50 +03:00
2022-07-31 15:37:26 +03:00
case ArrowSize:
2022-08-07 18:59:56 +03:00
arrow.size, _ = sizeProperty(popupParams, ArrowSize, session)
2021-09-07 17:36:50 +03:00
2022-07-31 15:37:26 +03:00
case ArrowOffset:
2022-08-07 18:59:56 +03:00
arrow.off, _ = sizeProperty(popupParams, ArrowOffset, session)
2021-09-07 17:36:50 +03:00
default:
2022-07-31 15:37:26 +03:00
params[tag] = value
2021-09-07 17:36:50 +03:00
}
}
}
2022-07-31 15:37:26 +03:00
popupView := NewGridLayout(view.Session(), params)
2022-08-07 18:59:56 +03:00
var popupCellHeight []SizeUnit
2021-09-07 17:36:50 +03:00
viewRow := 0
2022-08-07 18:59:56 +03:00
if title != nil || closeButton != nil {
titleContent := []View{}
if title != nil {
titleContent = append(titleContent, title)
}
if closeButton != nil {
titleContent = append(titleContent, closeButton)
}
popupView.Append(NewGridLayout(session, Params{
2021-09-07 17:36:50 +03:00
Row: 0,
Style: titleStyle,
2022-08-07 18:59:56 +03:00
CellWidth: []any{Fr(1), AutoSize()},
2021-09-07 17:36:50 +03:00
CellVerticalAlign: CenterAlign,
PaddingLeft: Px(12),
2022-08-07 18:59:56 +03:00
Content: titleContent,
}))
2021-09-07 17:36:50 +03:00
2022-08-07 18:59:56 +03:00
viewRow = 1
popupCellHeight = []SizeUnit{AutoSize(), Fr(1)}
2021-09-07 17:36:50 +03:00
} else {
2022-08-07 18:59:56 +03:00
popupCellHeight = []SizeUnit{Fr(1)}
2021-09-07 17:36:50 +03:00
}
view.Set(Row, viewRow)
popupView.Append(view)
if buttonCount := len(buttons); buttonCount > 0 {
buttonsAlign, _ := enumProperty(params, ButtonsAlign, session, RightAlign)
2022-08-07 18:59:56 +03:00
popupCellHeight = append(popupCellHeight, AutoSize())
2021-11-17 12:32:37 +03:00
gap, _ := sizeConstant(session, "ruiPopupButtonGap")
2021-09-07 17:36:50 +03:00
cellWidth := []SizeUnit{}
for i := 0; i < buttonCount; i++ {
cellWidth = append(cellWidth, Fr(1))
}
buttonsPanel := NewGridLayout(session, Params{
CellWidth: cellWidth,
})
if gap.Type != Auto && gap.Value > 0 {
buttonsPanel.Set(Gap, gap)
buttonsPanel.Set(Margin, gap)
}
createButton := func(n int, button PopupButton) Button {
return NewButton(session, Params{
Column: n,
Content: button.Title,
ClickEvent: func() {
if button.OnClick != nil {
button.OnClick(popup)
} else {
popup.Dismiss()
}
},
})
}
for i, button := range buttons {
buttonsPanel.Append(createButton(i, button))
}
popupView.Append(NewGridLayout(session, Params{
Row: viewRow + 1,
CellHorizontalAlign: buttonsAlign,
Content: buttonsPanel,
}))
}
2022-08-07 18:59:56 +03:00
popupView.Set(CellHeight, popupCellHeight)
if arrow.location != NoneArrow {
layerParams[Content] = []View{popupView, arrow.createView(popupView)}
} else {
layerParams[Content] = []View{popupView}
}
popup.layerView = NewGridLayout(session, layerParams)
2021-09-07 17:36:50 +03:00
if outsideClose {
popup.layerView.Set(ClickEvent, func(View) {
popup.Dismiss()
})
}
}
func (popup popupData) View() View {
return popup.view
}
func (popup *popupData) Session() Session {
return popup.view.Session()
}
func (popup *popupData) Dismiss() {
popup.Session().popupManager().dismissPopup(popup)
2021-11-17 12:32:37 +03:00
for _, listener := range popup.dismissListener {
listener(popup)
}
2021-09-07 17:36:50 +03:00
// TODO
}
func (popup *popupData) Show() {
popup.Session().popupManager().showPopup(popup)
}
func (popup *popupData) html(buffer *strings.Builder) {
viewHTML(popup.layerView, buffer)
}
func (popup *popupData) viewByHTMLID(id string) View {
return viewByHTMLID(id, popup.layerView)
}
func (popup *popupData) onDismiss() {
for _, listener := range popup.dismissListener {
listener(popup)
}
}
2021-09-07 17:36:50 +03:00
// NewPopup creates a new Popup
func NewPopup(view View, param Params) Popup {
if view == nil {
return nil
}
popup := new(popupData)
popup.init(view, param)
return popup
}
// ShowPopup creates a new Popup and shows it
func ShowPopup(view View, param Params) Popup {
popup := NewPopup(view, param)
if popup != nil {
popup.Show()
}
return popup
}
2021-09-07 17:36:50 +03:00
func (manager *popupManager) updatePopupLayerInnerHTML(session Session) {
if manager.popups == nil {
manager.popups = []Popup{}
session.runScript(`updateInnerHTML('ruiPopupLayer', '');`)
return
}
buffer := allocStringBuilder()
defer freeStringBuilder(buffer)
buffer.WriteString(`updateInnerHTML('ruiPopupLayer', '`)
for _, p := range manager.popups {
p.html(buffer)
}
buffer.WriteString(`');`)
session.runScript(buffer.String())
}
func (manager *popupManager) showPopup(popup Popup) {
if popup == nil {
return
}
session := popup.Session()
if manager.popups == nil || len(manager.popups) == 0 {
manager.popups = []Popup{popup}
} else {
manager.popups = append(manager.popups, popup)
}
session.runScript(`if (document.activeElement != document.body) document.activeElement.blur();`)
2021-09-07 17:36:50 +03:00
manager.updatePopupLayerInnerHTML(session)
updateCSSProperty("ruiPopupLayer", "visibility", "visible", session)
2022-07-09 13:45:10 +03:00
updateCSSProperty("ruiRoot", "pointer-events", "none", session)
2021-09-07 17:36:50 +03:00
}
func (manager *popupManager) dismissPopup(popup Popup) {
if manager.popups == nil {
manager.popups = []Popup{}
return
}
count := len(manager.popups)
if count <= 0 || popup == nil {
return
}
session := popup.Session()
if manager.popups[count-1] == popup {
if count == 1 {
manager.popups = []Popup{}
2022-07-09 13:45:10 +03:00
updateCSSProperty("ruiRoot", "pointer-events", "auto", session)
2021-09-07 17:36:50 +03:00
updateCSSProperty("ruiPopupLayer", "visibility", "hidden", session)
session.runScript(`updateInnerHTML('ruiPopupLayer', '');`)
} else {
manager.popups = manager.popups[:count-1]
manager.updatePopupLayerInnerHTML(session)
}
popup.onDismiss()
2021-09-07 17:36:50 +03:00
return
}
for n, p := range manager.popups {
if p == popup {
if n == 0 {
manager.popups = manager.popups[1:]
} else {
manager.popups = append(manager.popups[:n], manager.popups[n+1:]...)
}
manager.updatePopupLayerInnerHTML(session)
popup.onDismiss()
2021-09-07 17:36:50 +03:00
return
}
}
}