Add overlay package
- Add overlay container that shows any kind of overlay - Add modals and a basic implementation of a requester - Add page with overlay examples - Add shadow color as CSS variable - Remove background color from layout containermaster
parent
8c96378190
commit
a4b921c261
@ -0,0 +1,40 @@
|
||||
package overlay
|
||||
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
|
||||
"github.com/vugu/vugu"
|
||||
)
|
||||
|
||||
// Container can be embedded in your root component and provides a way to show overlays like modals and toasts.
|
||||
type Container struct {
|
||||
modal vugu.Builder `vugu:"data"`
|
||||
modalTitle string
|
||||
}
|
||||
|
||||
func (c *Container) handleModalClose(event vugu.DOMEvent) {
|
||||
c.modal = nil
|
||||
}
|
||||
|
||||
func (c *Container) SetModal(component vugu.Builder) {
|
||||
c.modal = component
|
||||
|
||||
c.modalTitle = ""
|
||||
// Retrieve title from component if it implements the PageTitleGetter interface.
|
||||
if pageInfo, ok := component.(navigation.PageTitleGetter); ok {
|
||||
c.modalTitle, _, _ = pageInfo.PageTitle()
|
||||
}
|
||||
}
|
||||
|
||||
type OverlayContainerRef struct {
|
||||
*Container
|
||||
}
|
||||
|
||||
func (p *OverlayContainerRef) OverlayContainerSet(container *Container) {
|
||||
p.Container = container
|
||||
}
|
||||
|
||||
type OverlayContainerSetter interface {
|
||||
OverlayContainerSet(*Container)
|
||||
}
|
||||
|
||||
var _ OverlayContainerSetter = &OverlayContainerRef{}
|
||||
@ -0,0 +1,64 @@
|
||||
<div class="d3c-1684423938">
|
||||
<div vg-if="c.modal != nil" class="d3c-1684423938-modal-container">
|
||||
<div>
|
||||
<div class="d3c-1684423938-menu d3c-color-accent">
|
||||
<h3 class="d3c-1684423938-title" style="flex-grow:1" vg-content="c.modalTitle"></h3>
|
||||
<input:Button @Click="c.handleModalClose(event)"><vg-slot name="SymbolSlot"><icons:LCancel></icons:LCancel></vg-slot></input:Button>
|
||||
</div>
|
||||
<vg-comp expr="c.modal"></vg-comp>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.d3c-1684423938 {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.d3c-1684423938-modal-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
backdrop-filter: blur(1px) brightness(80%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.d3c-1684423938-modal-container > div {
|
||||
background-color: var(--d3c-color-background);
|
||||
color: var(--d3c-color-text);
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
box-shadow: 0 1em 3em var(--d3c-color-shadow);
|
||||
}
|
||||
|
||||
.d3c-1684423938-menu {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
justify-content: flex-end;
|
||||
align-items: baseline;
|
||||
background-color: var(--d3c-color-background);
|
||||
color: var(--d3c-color-text);
|
||||
}
|
||||
|
||||
.d3c-1684423938-menu > * {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.d3c-1684423938-title {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="application/x-go">
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,131 @@
|
||||
package overlay
|
||||
|
||||
// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
|
||||
|
||||
import "fmt"
|
||||
import "reflect"
|
||||
import "github.com/vugu/vjson"
|
||||
import "github.com/vugu/vugu"
|
||||
import js "github.com/vugu/vugu/js"
|
||||
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
|
||||
)
|
||||
|
||||
func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
|
||||
vgout = &vugu.BuildOut{}
|
||||
|
||||
var vgiterkey interface{}
|
||||
_ = vgiterkey
|
||||
var vgn *vugu.VGNode
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938"}}}
|
||||
vgout.Out = append(vgout.Out, vgn) // root for output
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
if c.modal != nil {
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-modal-container"}}}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-menu d3c-color-accent"}}}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h3", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-title"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "flex-grow:1"}}}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn.SetInnerHTML(c.modalTitle)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0x2DDBBBB22E2345CF^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(input.Button)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleModalClose(event) })
|
||||
vgcomp.SymbolSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0xC5A4AEF7F17F2072^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LCancel)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(icons.LCancel)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
var vgcomp vugu.Builder = c.modal
|
||||
if vgcomp != nil {
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
|
||||
{
|
||||
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684423938 {\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t}\n\n\t.d3c-1684423938-modal-container {\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tbackdrop-filter: blur(1px) brightness(80%);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1684423938-modal-container > div {\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tborder-radius: 4px;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t\toverflow: auto;\n\t\tbox-shadow: 0 1em 3em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-menu {\n\t\tpadding: 0.5em;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tjustify-content: flex-end;\n\t\talign-items: baseline;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-menu > * {\n\t\tmargin: 0 !important;\n\t}\n\n\t.d3c-1684423938-title {\n\t\ttext-align: center;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
|
||||
}
|
||||
vgout.AppendCSS(vgn)
|
||||
return vgout
|
||||
}
|
||||
|
||||
// 'fix' unused imports
|
||||
var _ fmt.Stringer
|
||||
var _ reflect.Type
|
||||
var _ vjson.RawMessage
|
||||
var _ js.Value
|
||||
@ -0,0 +1,3 @@
|
||||
package overlay
|
||||
|
||||
//go:generate vugugen
|
||||
@ -0,0 +1,37 @@
|
||||
package overlay
|
||||
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
"github.com/vugu/vugu"
|
||||
)
|
||||
|
||||
type ModalRequester struct {
|
||||
OverlayContainerRef
|
||||
|
||||
SymbolSlot vugu.Builder `vugu:"data"` // Slot for the symbol.
|
||||
|
||||
Title string `vugu:"data"`
|
||||
Message string `vugu:"data"`
|
||||
|
||||
ClickAbort input.ClickHandler
|
||||
ClickYes input.ClickHandler
|
||||
}
|
||||
|
||||
func (c *ModalRequester) handleClickAbort(event vugu.DOMEvent) {
|
||||
if c.ClickAbort != nil {
|
||||
c.ClickAbort.ClickHandle(input.ClickEvent{DOMEvent: event})
|
||||
}
|
||||
c.SetModal(nil)
|
||||
}
|
||||
|
||||
func (c *ModalRequester) handleClickYes(event vugu.DOMEvent) {
|
||||
if c.ClickYes != nil {
|
||||
c.ClickYes.ClickHandle(input.ClickEvent{DOMEvent: event})
|
||||
}
|
||||
c.SetModal(nil)
|
||||
}
|
||||
|
||||
// PageTitle implements PageTitleGetter which is used by PageInfo.
|
||||
func (c *ModalRequester) PageTitle() (title, longTitle, shortTitle string) {
|
||||
return c.Title, c.Title, c.Title
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
<div>
|
||||
<layout:Container>
|
||||
<div class="d3c-1684441516-flex">
|
||||
<vg-comp expr="c.SymbolSlot"></vg-comp>
|
||||
<p vg-content="c.Message" style="white-space: pre-wrap;"></p>
|
||||
</div>
|
||||
<div class="d3c-1684441516-flex" style="justify-content: flex-end; align-items: baseline;">
|
||||
<input:Button vg-if="c.ClickAbort != nil" @Click="c.handleClickAbort(event)">Abort</input:Button>
|
||||
<input:Button vg-if="c.ClickYes != nil" @Click="c.handleClickYes(event)">Yes</input:Button>
|
||||
</div>
|
||||
</layout:Container>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.d3c-1684441516-flex {
|
||||
margin: 0.5em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.d3c-1684441516-flex > * {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="application/x-go">
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,166 @@
|
||||
package overlay
|
||||
|
||||
// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
|
||||
|
||||
import "fmt"
|
||||
import "reflect"
|
||||
import "github.com/vugu/vjson"
|
||||
import "github.com/vugu/vugu"
|
||||
import js "github.com/vugu/vugu/js"
|
||||
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
|
||||
)
|
||||
|
||||
func (c *ModalRequester) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
|
||||
vgout = &vugu.BuildOut{}
|
||||
|
||||
var vgiterkey interface{}
|
||||
_ = vgiterkey
|
||||
var vgn *vugu.VGNode
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
|
||||
vgout.Out = append(vgout.Out, vgn) // root for output
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0xF4C6D34297449643^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(layout.Container)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684441516-flex"}}}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
var vgcomp vugu.Builder = c.SymbolSlot
|
||||
if vgcomp != nil {
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "style", Val: "white-space: pre-wrap;"}}}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn.SetInnerHTML(c.Message)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684441516-flex"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "justify-content: flex-end; align-items: baseline;"}}}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
if c.ClickAbort != nil {
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0xB665D650E0EEB461^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(input.Button)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleClickAbort(event) })
|
||||
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Abort"}
|
||||
vgparent.AppendChild(vgn)
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
if c.ClickYes != nil {
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0xA272879670486BAE^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(input.Button)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleClickYes(event) })
|
||||
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Yes"}
|
||||
vgparent.AppendChild(vgn)
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
|
||||
{
|
||||
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684441516-flex {\n\t\tmargin: 0.5em 0;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n\n\t.d3c-1684441516-flex > * {\n\t\tmargin: 0;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
|
||||
}
|
||||
vgout.AppendCSS(vgn)
|
||||
return vgout
|
||||
}
|
||||
|
||||
// 'fix' unused imports
|
||||
var _ fmt.Stringer
|
||||
var _ reflect.Type
|
||||
var _ vjson.RawMessage
|
||||
var _ js.Value
|
||||
@ -0,0 +1,22 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/overlay"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
|
||||
"github.com/vugu/vugu"
|
||||
)
|
||||
|
||||
type PageOverlays struct {
|
||||
overlay.OverlayContainerRef
|
||||
}
|
||||
|
||||
func (c *PageOverlays) handleButton(event vugu.DOMEvent) {
|
||||
c.SetModal(&overlay.ModalRequester{
|
||||
SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{"style": "font-size: 2em;"}},
|
||||
Title: "Simple requester",
|
||||
Message: "This is a simple modal requester, are you happy with it?\nIt also supports multi line text!",
|
||||
ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}),
|
||||
ClickYes: input.ClickFunc(func(event input.ClickEvent) {}),
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
<div>
|
||||
<layout:Container>
|
||||
<h1>Modals</h1>
|
||||
<p>If you component or page contains <view:CodeInline>overlay.OverlayContainerRef</view:CodeInline> and is wired correctly, you can create modals very easily.</p>
|
||||
<p>A simple requester modal is already contained in the overlay package. Use it with:</p>
|
||||
<view:Code>
|
||||
<pre vg-content='"func (c *PageOverlays) handleButton(event vugu.DOMEvent) {" +
|
||||
" c.SetModal(&overlay.ModalRequester{\n" +
|
||||
" SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" +
|
||||
" Title: \"Simple requester\",\n" +
|
||||
" Message: \"This is a simple modal requester, are you happy with it?\\nIt also supports multi line text!\",\n" +
|
||||
" ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}),\n" +
|
||||
" ClickYes: input.ClickFunc(func(event input.ClickEvent) {}),\n" +
|
||||
" })\n" +
|
||||
"}"' style="margin: 0;"></pre>
|
||||
</view:Code>
|
||||
<input:Button @Click="c.handleButton(event)">Open simple modal</input:Button>
|
||||
</layout:Container>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script type="application/x-go">
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,186 @@
|
||||
package main
|
||||
|
||||
// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
|
||||
|
||||
import "fmt"
|
||||
import "reflect"
|
||||
import "github.com/vugu/vjson"
|
||||
import "github.com/vugu/vugu"
|
||||
import js "github.com/vugu/vugu/js"
|
||||
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
|
||||
)
|
||||
|
||||
func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
|
||||
vgout = &vugu.BuildOut{}
|
||||
|
||||
var vgiterkey interface{}
|
||||
_ = vgiterkey
|
||||
var vgn *vugu.VGNode
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
|
||||
vgout.Out = append(vgout.Out, vgn) // root for output
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0x8B32FC019648006^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(layout.Container)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h1", Attr: []vugu.VGAttribute(nil)}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn.SetInnerHTML(vugu.HTML("Modals"))
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "If you component or page contains "}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0x1B9CC39770823BF5^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(view.CodeInline)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "overlay.OverlayContainerRef"}
|
||||
vgparent.AppendChild(vgn)
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " and is wired correctly, you can create modals very easily."}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn.SetInnerHTML(vugu.HTML("A simple requester modal is already contained in the overlay package. Use it with:"))
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0x9C5F61CA0305F660^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(view.Code)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "pre", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "style", Val: "margin: 0;"}}}
|
||||
vgparent.AppendChild(vgn)
|
||||
vgn.SetInnerHTML("func (c *PageOverlays) handleButton(event vugu.DOMEvent) {" +
|
||||
" c.SetModal(&overlay.ModalRequester{\n" +
|
||||
" SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" +
|
||||
" Title: \"Simple requester\",\n" +
|
||||
" Message: \"This is a simple modal requester, are you happy with it?\\nIt also supports multi line text!\",\n" +
|
||||
" ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}),\n" +
|
||||
" ClickYes: input.ClickFunc(func(event input.ClickEvent) {}),\n" +
|
||||
" })\n" +
|
||||
"}")
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
{
|
||||
vgcompKey := vugu.MakeCompKey(0x5A0135D77FE2347F^vgin.CurrentPositionHash(), vgiterkey)
|
||||
// ask BuildEnv for prior instance of this specific component
|
||||
vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
|
||||
if vgcomp == nil {
|
||||
// create new one if needed
|
||||
vgcomp = new(input.Button)
|
||||
vgin.BuildEnv.WireComponent(vgcomp)
|
||||
}
|
||||
vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around
|
||||
vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleButton(event) })
|
||||
vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
|
||||
vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
|
||||
vgout = &vugu.BuildOut{}
|
||||
vgout.Out = append(vgout.Out, vgn)
|
||||
vgparent := vgn
|
||||
_ = vgparent
|
||||
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Open simple modal"}
|
||||
vgparent.AppendChild(vgn)
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
|
||||
vgparent.AppendChild(vgn)
|
||||
return
|
||||
})
|
||||
vgout.Components = append(vgout.Components, vgcomp)
|
||||
vgn = &vugu.VGNode{Component: vgcomp}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
|
||||
vgparent.AppendChild(vgn)
|
||||
}
|
||||
vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
|
||||
{
|
||||
vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n", Attr: []vugu.VGAttribute(nil)})
|
||||
}
|
||||
vgout.AppendCSS(vgn)
|
||||
return vgout
|
||||
}
|
||||
|
||||
// 'fix' unused imports
|
||||
var _ fmt.Stringer
|
||||
var _ reflect.Type
|
||||
var _ vjson.RawMessage
|
||||
var _ js.Value
|
||||
@ -1,9 +1,12 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"git.d3nexus.de/Dadido3/D3vugu-components/components/overlay"
|
||||
"github.com/vugu/vugu"
|
||||
)
|
||||
|
||||
type Root struct {
|
||||
Body vugu.Builder
|
||||
Body vugu.Builder `vugu:"data"`
|
||||
|
||||
OverlayContainer *overlay.Container `vugu:"data"`
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue