package rui import ( "strings" ) const ( // Title is the constant for the "title" property tag. // The "title" property is defined the Popup/Tabs title 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. 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"). 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. 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) 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) DismissEvent = "dismiss-event" // 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. // The "arrow-align" int property is used for set the horizontal alignment of the Popup arrow. // 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. // The "arrow-size" SizeUnit property is used for set the size (length) of the Popup arrow. ArrowSize = "arrow-size" // 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" // ArrowOffset is the constant for the "arrow-offset" property tag. // The "arrow-offset" SizeUnit property is used for set the offset of the Popup arrow. ArrowOffset = "arrow-offset" // 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 BottomArrow = 3 // LeftArrow is value of the popup "arrow" property: // Arrow on the left side of the pop-up window LeftArrow = 4 ) // PopupButton describes a button that will be placed at the bottom of the window. type PopupButton struct { Title string OnClick func(Popup) } // Popup interface type Popup interface { View() View Session() Session Show() Dismiss() onDismiss() html(buffer *strings.Builder) viewByHTMLID(id string) View } type popupData struct { layerView View view View dismissListener []func(Popup) } type popupManager struct { popups []Popup } 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)) } params := Params{BackgroundColor: GetBackgroundColor(popupView)} if shadow := GetViewShadows(popupView); shadow != nil { params[Shadow] = shadow } if filter := GetBackdropFilter(popupView); filter != nil { params[BackdropFilter] = filter } switch arrow.location { case TopArrow: params[Row] = 0 params[Column] = 1 params[Clip] = PolygonClip([]any{"0%", "100%", "50%", "0%", "100%", "100%"}) params[Width] = arrow.width params[Height] = arrow.size case RightArrow: params[Row] = 1 params[Column] = 0 params[Clip] = PolygonClip([]any{"0%", "0%", "100%", "50%", "0%", "100%"}) params[Width] = arrow.size params[Height] = arrow.width case BottomArrow: params[Row] = 0 params[Column] = 1 params[Clip] = PolygonClip([]any{"0%", "0%", "50%", "100%", "100%", "0%"}) params[Width] = arrow.width params[Height] = arrow.size case LeftArrow: params[Row] = 1 params[Column] = 0 params[Clip] = PolygonClip([]any{"100%", "0%", "0%", "50%", "100%", "100%"}) params[Width] = arrow.size params[Height] = arrow.width } 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) } func (popup *popupData) init(view View, popupParams Params) { popup.view = view session := view.Session() 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, } params := Params{ Style: "ruiPopup", Row: popupRow, Column: popupColumn, MaxWidth: Percent(100), MaxHeight: Percent(100), CellVerticalAlign: StretchAlign, CellHorizontalAlign: StretchAlign, ClickEvent: func(View) {}, Shadow: NewShadowWithParams(Params{ SpreadRadius: Px(4), Blur: Px(16), ColorTag: "@ruiPopupShadow", }), } var closeButton View = nil outsideClose := false buttons := []PopupButton{} titleStyle := "ruiPopupTitle" var title View = nil for tag, value := range popupParams { if value != nil { switch tag { 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 case CloseButton: 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() }, }) case OutsideClose: outsideClose, _ = boolProperty(popupParams, OutsideClose, session) case Buttons: switch value := value.(type) { case PopupButton: buttons = []PopupButton{value} case []PopupButton: buttons = value } case Title: switch value := value.(type) { case string: title = NewTextView(view.Session(), Params{Text: value}) case View: title = value default: notCompatibleType(Title, value) } case TitleStyle: switch value := value.(type) { case string: titleStyle = value default: notCompatibleType(TitleStyle, value) } case DismissEvent: if listeners, ok := valueToNoParamListeners[Popup](value); ok { if listeners != nil { popup.dismissListener = listeners } } else { notCompatibleType(tag, value) } case ArrowAlign: switch text := value.(type) { case string: switch text { case "top": value = "left" case "bottom": value = "right" } } arrow.align, _ = enumProperty(popupParams, ArrowAlign, session, CenterAlign) case ArrowSize: arrow.size, _ = sizeProperty(popupParams, ArrowSize, session) case ArrowOffset: arrow.off, _ = sizeProperty(popupParams, ArrowOffset, session) default: params[tag] = value } } } popupView := NewGridLayout(view.Session(), params) var popupCellHeight []SizeUnit viewRow := 0 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{ Row: 0, Style: titleStyle, CellWidth: []any{Fr(1), AutoSize()}, CellVerticalAlign: CenterAlign, PaddingLeft: Px(12), Content: titleContent, })) viewRow = 1 popupCellHeight = []SizeUnit{AutoSize(), Fr(1)} } else { popupCellHeight = []SizeUnit{Fr(1)} } view.Set(Row, viewRow) popupView.Append(view) if buttonCount := len(buttons); buttonCount > 0 { buttonsAlign, _ := enumProperty(params, ButtonsAlign, session, RightAlign) popupCellHeight = append(popupCellHeight, AutoSize()) gap, _ := sizeConstant(session, "ruiPopupButtonGap") 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, })) } 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) 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) for _, listener := range popup.dismissListener { listener(popup) } // 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) } } // 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 } 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();`) manager.updatePopupLayerInnerHTML(session) updateCSSProperty("ruiPopupLayer", "visibility", "visible", session) updateCSSProperty("ruiRoot", "pointer-events", "none", session) } 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{} updateCSSProperty("ruiRoot", "pointer-events", "auto", session) updateCSSProperty("ruiPopupLayer", "visibility", "hidden", session) session.runScript(`updateInnerHTML('ruiPopupLayer', '');`) } else { manager.popups = manager.popups[:count-1] manager.updatePopupLayerInnerHTML(session) } popup.onDismiss() 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() return } } }