From 69160e02c4d2a3b03b6a288745981d542da2b168 Mon Sep 17 00:00:00 2001
From: David Vogel <Dadido3@aol.com>
Date: Sun, 28 May 2023 15:04:18 +0200
Subject: [PATCH] Add timeout/duration option to toasts

- Rename overlay-classes.go to interfaces.go
- Add event parameter to AddToast method
- Update overlay example page
---
 components/overlay/container.go               |  14 +-
 .../{overlay-classes.go => interfaces.go}     |   7 +
 components/overlay/toast-message.go           |   7 +
 components/overlay/toast-simple.go            |   9 +-
 page-overlays.go                              |  10 +-
 page-overlays.vugu                            |  11 +-
 page-overlays_vgen.go                         | 137 +++++++++++++++---
 7 files changed, 169 insertions(+), 26 deletions(-)
 rename components/overlay/{overlay-classes.go => interfaces.go} (63%)

diff --git a/components/overlay/container.go b/components/overlay/container.go
index e1d992c..a2fcd2f 100644
--- a/components/overlay/container.go
+++ b/components/overlay/container.go
@@ -1,6 +1,8 @@
 package overlay
 
 import (
+	"time"
+
 	"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
 	"github.com/vugu/vugu"
 	"golang.org/x/exp/slices"
@@ -47,7 +49,7 @@ func (c *Container) handleToastClose(event vugu.DOMEvent, toast vugu.Builder) {
 	c.CloseToast(toast)
 }
 
-func (c *Container) AddToast(component vugu.Builder) {
+func (c *Container) AddToast(event vugu.DOMEvent, component vugu.Builder) {
 	toast := ContainerToast{
 		body:          component,
 		signalClasses: "d3c-color-accent",
@@ -58,6 +60,16 @@ func (c *Container) AddToast(component vugu.Builder) {
 		toast.signalClasses, toast.containerClasses = overlayClassesGetter.OverlayClasses()
 	}
 
+	// Handle auto close after a given amount of time.
+	if durationGetter, ok := component.(ToastDurationGetter); ok && durationGetter.ToastDuration() > 0 {
+		go func(component vugu.Builder) {
+			time.Sleep(durationGetter.ToastDuration())
+			event.EventEnv().Lock()
+			defer event.EventEnv().UnlockRender()
+			c.CloseToast(component)
+		}(component)
+	}
+
 	c.toasts = append(c.toasts, toast)
 }
 
diff --git a/components/overlay/overlay-classes.go b/components/overlay/interfaces.go
similarity index 63%
rename from components/overlay/overlay-classes.go
rename to components/overlay/interfaces.go
index 67b35ff..38ab018 100644
--- a/components/overlay/overlay-classes.go
+++ b/components/overlay/interfaces.go
@@ -1,8 +1,15 @@
 package overlay
 
+import "time"
+
 // OverlayClassesGetter can be implemented by components that are used in overlays.
 // With this mechanic these components can set additional CSS classes to the modal or toast container.
 // One use case is to give a toast or modal some other color with the `d3c-color-*` classes.
 type OverlayClassesGetter interface {
 	OverlayClasses() (signalClasses, containerClasses string)
 }
+
+// ToastDurationGetter can be implemented by toast components to signal that the toast should close automatically after some given duration.
+type ToastDurationGetter interface {
+	ToastDuration() time.Duration
+}
diff --git a/components/overlay/toast-message.go b/components/overlay/toast-message.go
index 1870e6f..0132c09 100644
--- a/components/overlay/toast-message.go
+++ b/components/overlay/toast-message.go
@@ -1,5 +1,7 @@
 package overlay
 
+import "time"
+
 type ToastMessageType int
 
 const (
@@ -12,6 +14,7 @@ const (
 type ToastMessage struct {
 	MessageType ToastMessageType `vugu:"data"`
 	Message     string           `vugu:"data"`
+	Duration    time.Duration    // Auto close toast after this duration.
 }
 
 func (c *ToastMessage) OverlayClasses() (signalClasses, containerClasses string) {
@@ -28,3 +31,7 @@ func (c *ToastMessage) OverlayClasses() (signalClasses, containerClasses string)
 
 	return "", ""
 }
+
+func (c *ToastMessage) ToastDuration() time.Duration {
+	return c.Duration
+}
diff --git a/components/overlay/toast-simple.go b/components/overlay/toast-simple.go
index 8e18886..07a6cff 100644
--- a/components/overlay/toast-simple.go
+++ b/components/overlay/toast-simple.go
@@ -1,13 +1,16 @@
 package overlay
 
 import (
+	"time"
+
 	"github.com/vugu/vugu"
 )
 
 type ToastSimple struct {
 	IconSlot vugu.Builder `vugu:"data"` // Slot for the symbol.
 
-	Message string `vugu:"data"`
+	Message  string        `vugu:"data"`
+	Duration time.Duration // Auto close toast after this duration.
 
 	SignalColor string // A d3c CSS class for the color scheme of the small bar.
 }
@@ -15,3 +18,7 @@ type ToastSimple struct {
 func (c *ToastSimple) OverlayClasses() (signalClasses, containerClasses string) {
 	return c.SignalColor, ""
 }
+
+func (c *ToastSimple) ToastDuration() time.Duration {
+	return c.Duration
+}
diff --git a/page-overlays.go b/page-overlays.go
index 6eab70a..39f657a 100644
--- a/page-overlays.go
+++ b/page-overlays.go
@@ -25,7 +25,7 @@ func (c *PageOverlays) handleSimpleModalButton(event vugu.DOMEvent) {
 }
 
 func (c *PageOverlays) handleSimpleToastButton(event vugu.DOMEvent) {
-	c.AddToast(&overlay.ToastSimple{
+	c.AddToast(event, &overlay.ToastSimple{
 		IconSlot:    &icons.LInfoCircle{AttrMap: vugu.AttrMap{"style": "font-size: 2em;"}},
 		Message:     "This is a simple toast!\nIt supports multiple lines and has an icon slot.\nThere also can be multiple of it at the same time, this one was opened at " + time.Now().Format(time.TimeOnly) + ".",
 		SignalColor: "d3c-color-attention",
@@ -33,7 +33,7 @@ func (c *PageOverlays) handleSimpleToastButton(event vugu.DOMEvent) {
 }
 
 func (c *PageOverlays) handleWarningToastButton(event vugu.DOMEvent) {
-	c.AddToast(&overlay.ToastSimple{
+	c.AddToast(event, &overlay.ToastSimple{
 		IconSlot:    &icons.LWarning{AttrMap: vugu.AttrMap{"style": "font-size: 2em;", "class": "d3c-color-caution d3c-icon-use-color"}},
 		Message:     "This is a warning, be careful!",
 		SignalColor: "d3c-color-caution",
@@ -41,5 +41,9 @@ func (c *PageOverlays) handleWarningToastButton(event vugu.DOMEvent) {
 }
 
 func (c *PageOverlays) handleToastMessageButton(event vugu.DOMEvent) {
-	c.AddToast(&overlay.ToastMessage{MessageType: overlay.ToastMessageTypeCritical, Message: "Uh oh!"})
+	c.AddToast(event, &overlay.ToastMessage{MessageType: overlay.ToastMessageTypeCritical, Message: "Uh oh!"})
+}
+
+func (c *PageOverlays) handleToastMessageTimeoutButton(event vugu.DOMEvent) {
+	c.AddToast(event, &overlay.ToastMessage{MessageType: overlay.ToastMessageTypeSuccess, Message: "That worked!", Duration: 5 * time.Second})
 }
diff --git a/page-overlays.vugu b/page-overlays.vugu
index eb83d41..8c4b697 100644
--- a/page-overlays.vugu
+++ b/page-overlays.vugu
@@ -24,7 +24,7 @@
 		<p>A simple toast with an icon slot and custom color setting can be found in the overlay package. Use it with:</p>
 		<view:Code>
 			<pre vg-content='"func (c *PageOverlays) handleButton(event vugu.DOMEvent) {\n" +
-							"	c.AddToast(&overlay.ToastSimple{\n" +
+							"	c.AddToast(event, &overlay.ToastSimple{\n" +
 							"		IconSlot:    &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" +
 							"		Message:     \"This is a simple toast!\\nIt supports multiple lines and has an icon slot.\\nThere also can be multiple of it at the same time, this one was opened at \" + time.Now().Format(time.TimeOnly) + \".\",\n" +
 							"		SignalColor: \"d3c-color-accent\",\n" +
@@ -44,10 +44,17 @@
 		</ul>
 		<view:Code>
 			<pre vg-content='"func (c *PageOverlays) handleButton(event vugu.DOMEvent) {\n" +
-							"	c.AddToast(&overlay.ToastMessage{MessageType: overlay.ToastMessageTypeCritical, Message: \"Uh oh!\"})\n" +
+							"	c.AddToast(event, &overlay.ToastMessage{MessageType: overlay.ToastMessageTypeCritical, Message: \"Uh oh!\"})\n" +
 							"}"' style="margin: 0;"></pre>
 		</view:Code>
 		<input:Button @Click="c.handleToastMessageButton(event)">Open message toast</input:Button>
+		<p>To let the toast close itself after some time, you can use the <view:CodeInline>duration</view:CodeInline> field:</p>
+		<view:Code>
+			<pre vg-content='"func (c *PageOverlays) handleButton(event vugu.DOMEvent) {\n" +
+							"	c.AddToast(event, &overlay.ToastMessage{MessageType: overlay.ToastMessageTypeSuccess, Message: \"That worked!\", Duration: 5 * time.Second})\n" +
+							"}"' style="margin: 0;"></pre>
+		</view:Code>
+		<input:Button @Click="c.handleToastMessageTimeoutButton(event)">Open self closing message toast</input:Button>
 	</layout:Container>
 </div>
 
diff --git a/page-overlays_vgen.go b/page-overlays_vgen.go
index 8657b41..eb70972 100644
--- a/page-overlays_vgen.go
+++ b/page-overlays_vgen.go
@@ -29,7 +29,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
 		vgparent.AppendChild(vgn)
 		{
-			vgcompKey := vugu.MakeCompKey(0x4259B5437ED85B00^vgin.CurrentPositionHash(), vgiterkey)
+			vgcompKey := vugu.MakeCompKey(0x39023F0CDBACD966^vgin.CurrentPositionHash(), vgiterkey)
 			// ask BuildEnv for prior instance of this specific component
 			vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
 			if vgcomp == nil {
@@ -60,7 +60,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Overlays are handled by the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x847F13BFC8F180A^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xB9DE577442910F7F^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -97,7 +97,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Every page or component that creates overlays has to embed the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x11597539355F8078^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xBE6722F0749B5217^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -124,7 +124,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " structure. Your wiring function also needs to set the reference to your "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0xE17ED7F11D89B9CE^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xCAD94AC17E6E5B74^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -164,7 +164,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xDF14E85915FF331E^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x2E967CD9233EB11B^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -205,7 +205,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x91259EFC8AFAADC7^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xD16C8563CD69BC62^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -243,7 +243,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x9E888D62321BFAB^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xC09B140F2D9BB51D^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -264,7 +264,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						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) {\n" +
-							"	c.AddToast(&overlay.ToastSimple{\n" +
+							"	c.AddToast(event, &overlay.ToastSimple{\n" +
 							"		IconSlot:    &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" +
 							"		Message:     \"This is a simple toast!\\nIt supports multiple lines and has an icon slot.\\nThere also can be multiple of it at the same time, this one was opened at \" + time.Now().Format(time.TimeOnly) + \".\",\n" +
 							"		SignalColor: \"d3c-color-accent\",\n" +
@@ -281,7 +281,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xF0ED0ED27EF42994^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xCDDB62C2B0EDDA4D^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.ContainerHorizontal)
 					if vgcomp == nil {
@@ -300,7 +300,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xB1222E40FFE80BA6^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x2AD22AAFDE078627^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -328,7 +328,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xB774FA1DAD6A06B1^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xAF384B6BFDDE9052^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -371,7 +371,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "A shorter version of this is "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x2008FD3859753FBA^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x2E896CD80369149D^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -413,7 +413,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x4F0C4E3C8478E528^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x65CF0DB4D3D649DD^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -446,7 +446,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0xFF67905442723348^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x448A597BAE8DDE71^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -479,7 +479,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x9191C8062B221604^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x9827A06ADED88FEF^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -512,7 +512,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x7285F93CF5D54FFA^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xACC46AE85C7B6DA7^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -543,7 +543,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xB141CFD7553FCCCC^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x1B1D06940120CF81^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -564,7 +564,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						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) {\n" +
-							"	c.AddToast(&overlay.ToastMessage{MessageType: overlay.ToastMessageTypeCritical, Message: \"Uh oh!\"})\n" +
+							"	c.AddToast(event, &overlay.ToastMessage{MessageType: overlay.ToastMessageTypeCritical, Message: \"Uh oh!\"})\n" +
 							"}")
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 						vgparent.AppendChild(vgn)
@@ -577,7 +577,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x5A0135D77FE2347F^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x71D988D384981F90^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -602,6 +602,105 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					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(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				{
+					vgparent := vgn
+					_ = vgparent
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "To let the toast close itself after some time, you can use the "}
+					vgparent.AppendChild(vgn)
+					{
+						vgcompKey := vugu.MakeCompKey(0xF5B1D1CAC9C72095^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: "duration"}
+							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: " field:"}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0x77D7C4A8AA214DCF^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) {\n" +
+							"	c.AddToast(event, &overlay.ToastMessage{MessageType: overlay.ToastMessageTypeSuccess, Message: \"That worked!\", Duration: 5 * time.Second})\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(0xD9ECCD7398AA380A^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.handleToastMessageTimeoutButton(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 self closing message toast"}
+						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