make toasts disappear after dur seconds.

Author: comhar

.gitignore

@@ -163,4 +163,4 @@ cython_debug/
 #  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
-#.idea/
+.idea/

docs/api_reference/api_reference.py

@@ -434,6 +434,7 @@ def ex_toasts2():
     fn2code_string(ex_toasts1), 
     P("To define toast colors, set the class of the alert wrapped by the toast:"),
     fn2code_string(ex_toasts2),
+    P("Toasts will disappear automatically after 5 seconds. To change the duration of the toast set the `dur` param like this `Toast('Content', dur=10)`."),
     Toast, ToastHT, ToastVT,
     title="Alerts & Toasts")
 

monsterui/daisy.py

@@ -109,8 +109,11 @@ def _generate_next_value_(name, start, count, last_values): return f'toast-{name
 def Toast(*c, # Content for toast (often test)
           cls='', # Classes for toast (often `ToastHT` and `ToastVT` options)
           alert_cls='', # classes for altert (often `AlertT` options)
+          dur=5.0, # no. of seconds before the toast disappears
           **kwargs # Additional args for outer container (`Div` tag)
          )->FT: # Div(Alert(...), cls='toast')
     "Toasts are stacked announcements, positioned on the corner of page."
     a = Alert(*c, cls=alert_cls)
-    return Div(a, cls=('toast', stringify(cls)), **kwargs)
+    _id = fh.unqid()
+    js = Script('''(()=>setTimeout(()=>document.querySelector('[data-mui="%s"]').remove(),%s))()'''%(_id,dur*1000))
+    return Div(a, js, data_mui=_id, cls=('toast', stringify(cls)), **kwargs)

nbs/03_daisy.ipynb

@@ -351,11 +351,14 @@
     "def Toast(*c, # Content for toast (often test)\n",
     "          cls='', # Classes for toast (often `ToastHT` and `ToastVT` options)\n",
     "          alert_cls='', # classes for altert (often `AlertT` options)\n",
+    "          dur=5.0, # no. of seconds before the toast disappears\n",
     "          **kwargs # Additional args for outer container (`Div` tag)\n",
     "         )->FT: # Div(Alert(...), cls='toast')\n",
     "    \"Toasts are stacked announcements, positioned on the corner of page.\"\n",
     "    a = Alert(*c, cls=alert_cls)\n",
-    "    return Div(a, cls=('toast', stringify(cls)), **kwargs)"
+    "    _id = fh.unqid()\n",
+    "    js = Script('''(()=>setTimeout(()=>document.querySelector('[data-mui=\"%s\"]').remove(),%s))()'''%(_id,dur*1000))\n",
+    "    return Div(a, js, data_mui=_id, cls=('toast', stringify(cls)), **kwargs)"
    ]
   },
   {
@@ -376,15 +379,15 @@
      "data": {
       "text/markdown": [
        "```html\n",
-       "<div class=\"toast toast-start toast-middle\">\n",
+       "<div data-mui=\"_yRjKNgMBRCah1Xnjm5yP-w\" class=\"toast toast-start toast-middle\">\n",
        "  <div class=\"alert \" role=\"alert\">\n",
        "<span>New message arrived.</span>  </div>\n",
-       "</div>\n",
+       "<script>(()=&gt;setTimeout(()=&gt;document.querySelector(&#x27;[data-mui=&quot;_yRjKNgMBRCah1Xnjm5yP-w&quot;]&#x27;).remove(),5000.0))()</script></div>\n",
        "\n",
        "```"
       ],
       "text/plain": [
-       "div((div((span(('New message arrived.',),{}),),{'class': 'alert ', 'role': 'alert'}),),{'class': 'toast toast-start toast-middle'})"
+       "div((div((span(('New message arrived.',),{}),),{'class': 'alert ', 'role': 'alert'}), script(('(()=>setTimeout(()=>document.querySelector(\\'[data-mui=\"_yRjKNgMBRCah1Xnjm5yP-w\"]\\').remove(),5000.0))()',),{})),{'data-mui': '_yRjKNgMBRCah1Xnjm5yP-w', 'class': 'toast toast-start toast-middle'})"
       ]
      },
      "execution_count": null,
@@ -414,15 +417,15 @@
      "data": {
       "text/markdown": [
        "```html\n",
-       "<div class=\"toast \">\n",
+       "<div data-mui=\"_HJB8HS8NTsOSXq5TJbCaWA\" class=\"toast \">\n",
        "  <div class=\"alert alert-info\" role=\"alert\">\n",
        "<span>New message arrived.</span>  </div>\n",
-       "</div>\n",
+       "<script>(()=&gt;setTimeout(()=&gt;document.querySelector(&#x27;[data-mui=&quot;_HJB8HS8NTsOSXq5TJbCaWA&quot;]&#x27;).remove(),5000.0))()</script></div>\n",
        "\n",
        "```"
       ],
       "text/plain": [
-       "div((div((span(('New message arrived.',),{}),),{'class': 'alert alert-info', 'role': 'alert'}),),{'class': 'toast '})"
+       "div((div((span(('New message arrived.',),{}),),{'class': 'alert alert-info', 'role': 'alert'}), script(('(()=>setTimeout(()=>document.querySelector(\\'[data-mui=\"_HJB8HS8NTsOSXq5TJbCaWA\"]\\').remove(),5000.0))()',),{})),{'data-mui': '_HJB8HS8NTsOSXq5TJbCaWA', 'class': 'toast '})"
       ]
      },
      "execution_count": null,
@@ -434,6 +437,44 @@
     "Toast(\"New message arrived.\", alert_cls=AlertT.info)"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "b380807d",
+   "metadata": {},
+   "source": [
+    "Set the Toast duration to 10 seconds."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "180451d1",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div data-mui=\"_Wjau44fWRlSG_WP73WgL6w\" class=\"toast \">\n",
+       "  <div class=\"alert alert-info\" role=\"alert\">\n",
+       "<span>New message arrived.</span>  </div>\n",
+       "<script>(()=&gt;setTimeout(()=&gt;document.querySelector(&#x27;[data-mui=&quot;_Wjau44fWRlSG_WP73WgL6w&quot;]&#x27;).remove(),10000.0))()</script></div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((span(('New message arrived.',),{}),),{'class': 'alert alert-info', 'role': 'alert'}), script(('(()=>setTimeout(()=>document.querySelector(\\'[data-mui=\"_Wjau44fWRlSG_WP73WgL6w\"]\\').remove(),10000.0))()',),{})),{'data-mui': '_Wjau44fWRlSG_WP73WgL6w', 'class': 'toast '})"
+      ]
+     },
+     "execution_count": null,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Toast(\"New message arrived.\", alert_cls=AlertT.info, dur=10.0)"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -456,9 +497,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "python3",
+   "display_name": "python",
    "language": "python",
-   "name": "python3"
+   "name": "python"
   }
  },
  "nbformat": 4,