Add more examples

src/tutorial/_02_bulk_update.py

@@ -7,7 +7,7 @@ css = """\
 
 #toast {
   opacity: 0;
-  transition: opacity 3s ease-out;
+  transition: opacity 3s ease-out !important;
   background: blue;
   color: orange;
 }

src/tutorial/_06_lazy_loading.py

@@ -7,7 +7,7 @@ css = """
   opacity: 0;
 }
 img {
- transition: opacity 300ms ease-in;
+ transition: opacity 300ms ease-in !important;
 }
 """
 

src/tutorial/_10_progress_bar.py

@@ -22,7 +22,7 @@ css = """
     box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
     -webkit-transition: width .6s ease;
     -o-transition: width .6s ease;
-    transition: width .6s ease;
+    transition: width .6s ease !important;
 }
 """
 

src/tutorial/_11_cascading_select.py

@@ -5,21 +5,19 @@ from fasthtml.common import H3, Div, Form, Img, Label, Option, Select, fast_app
 app, rt = fast_app()
 
 
-@app.get("/page")
-def main_page():
+@app.get
+def page():
     return Div(
         H3("Pick A Make/Model"),
         Form(
             Div(
                 Label("Make"),
                 Select(
+                    name="make", hx_get=load_models.rt(sleep=1), hx_target="#models", hx_indicator=".htmx-indicator"
+                )(
                     Option("Audi", value="audi"),
                     Option("Toyota", value="toyota"),
                     Option("BMW", value="bmw"),
-                    name="make",
-                    hx_get="/models?sleep=1",
-                    hx_target="#models",
-                    hx_indicator=".htmx-indicator",
                 ),
             ),
             Div(
@@ -51,7 +49,7 @@ In this example we show how to make the values in one select depend on the value
 To begin we start with a default value for the make select: Audi. We render the model select for this make. We then have the make select trigger a GET to /models to retrieve the models options and target the models select.
 
 Here is the code:
-::main_page::
+::page::
 
 When a request is made to the /models end point, we return the models for that make:
 ::load_models::

src/tutorial/_12_animations.py

@@ -0,0 +1,166 @@
+import time
+
+from fasthtml.common import Button, Div, Form, Hr, Input, Script, Style, fast_app
+
+css_demo1 = """
+.smooth {
+  transition: all 1s ease-in !important;
+}
+"""
+css_demo2 = """
+.fade-me-out.htmx-swapping {
+  transition: opacity 2s ease-out !important;
+  opacity: 0;
+}
+"""
+css_demo3 = """
+#demo3.htmx-added {
+  opacity: 0;
+}
+#demo3 {
+  opacity: 1;
+  transition: opacity 1s ease-out !important;
+}
+"""
+css_demo4 = """
+form.htmx-request {
+    opacity: .5;
+    transition: opacity 300ms linear !important;
+}
+"""
+css_demo5 = """
+.demo5.faded {
+    opacity:.3;
+}
+.demo5 {
+    opacity:1;
+    transition: opacity ease-in 900ms !important;
+}
+"""
+
+app, rt = fast_app(
+    hdrs=[
+        Style(css_demo1 + css_demo2 + css_demo3 + css_demo4 + css_demo5),
+        Script(src="https://unpkg.com/htmx-ext-class-tools@2.0.1/class-tools.js"),
+    ],
+    pico=False,
+)
+
+
+@app.get
+def page():
+    return Div(
+        Div(Div("Example 1: Color Swap"), demo1()),
+        Hr(),
+        Div(Div("Example 2: Fade Out On Swap"), demo2()),
+        Hr(),
+        Div(Div("Example 3: Fade In On Addition"), demo3()),
+        Hr(),
+        Div(Div("Example 4: Request In Flight Animation"), demo4()),
+        Hr(),
+        Div(Div("Example 5: Class-tools Extension"), demo5()),
+        cls="container",
+    )
+
+
+@app.get
+def demo1(idx: int = 0):
+    palette = ["red", "blue", "green", "orange"]
+    next_idx = (idx + 1) % len(palette)
+    return Div(
+        "Color Swap Demo",
+        id="color-demo",
+        style=f"color:{palette[idx]}",
+        hx_get=demo1.rt(idx=next_idx),
+        hx_swap="outerHTML",
+        hx_trigger="every 1s",
+        cls="smooth",
+    )
+
+
+@app.get
+def demo2():
+    return Button("Fade Me Out", cls="fade-me-out", hx_delete=demo2_delete.rt(), hx_swap="outerHTML swap:2s")
+
+
+@app.delete
+def demo2_delete():
+    return None
+
+
+@app.get
+def demo3():
+    return Button("Fade Me In", hx_get=demo3.rt(), hx_swap="outerHTML settle:1s", id="demo3")
+
+
+@app.get
+def demo4():
+    return Form(hx_post=demo4_form.rt(), hx_swap="outerHTML")(
+        Input(name="name", placeholder="Your name here..."), Button("Submit", cls="btn primary")
+    )
+
+
+@app.post
+def demo4_form():
+    time.sleep(1)
+    return Div("Submitted!")
+
+
+@app.get
+def demo5():
+    return Div(Div("Toggle Demo", cls="demo5", classes="toggle faded:1s"), hx_ext="class-tools")
+
+
+DESC = "Demonstrates making the values of a select dependent on another select"
+HTMX_URL = "https://htmx.org/examples/value-select/"
+DOC = """
+htmx is designed to allow you to use CSS transitions to add smooth animations and transitions to your web page using only CSS and HTML. Below are a few examples of various animation techniques.
+
+htmx also allows you to use the new View Transitions API for creating animations.
+
+<blockquote>
+We have use <code>!important</code> in css to bypass <code>(prefers-reduced-motion: reduce)</code> setup by picocss
+</blockquote>
+
+### Basic CSS Animations
+
+#### Color Throb
+The simplest animation technique in htmx is to keep the id of an element stable across a content swap. If the id of an element is kept stable, htmx will swap it in such a way that CSS transitions can be written between the old version of the element and the new one.
+
+Consider this div:
+::css_demo1 demo1::
+
+This div will poll every second and will get replaced with new content which changes the color style to a new value (e.g. blue):
+
+Because the div has a stable id, color-demo, htmx will structure the swap such that a CSS transition, defined on the .smooth class, applies to the style update from red to blue, and smoothly transitions between them.
+
+Color Swap Demo
+#### Smooth Progress Bar
+The [Progress Bar demo](/progress-bar) uses this basic CSS animation technique as well, by updating the length property of a progress bar element, allowing for a smooth animation.
+
+### Swap Transitions
+#### Fade Out On Swap
+If you want to fade out an element that is going to be removed when the request ends, you want to take advantage of the htmx-swapping class with some CSS and extend the swap phase to be long enough for your animation to complete. This can be done like so:
+::css_demo2 demo2 demo2_delete::
+
+### Settling Transitions
+#### Fade In On Addition
+Building on the last example, we can fade in the new content by using the htmx-added class during the settle phase. You can also write CSS transitions against the target, rather than the new content, by using the htmx-settling class.
+::css_demo3 demo3::
+
+### Request In Flight Animation
+You can also take advantage of the htmx-request class, which is applied to the element that triggers a request. Below is a form that on submit will change its look to indicate that a request is being processed:
+::css_demo4 demo4::
+
+### Using the htmx class-tools Extension
+Many interesting animations can be created by using the [class-tools](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/class-tools/README.md) extension.
+
+Here is an example that toggles the opacity of a div. Note that we set the toggle time to be a bit longer than the transition time. This avoids flickering that can happen if the transition is interrupted by a class change.
+::css_demo5 demo5::
+
+#### Using the View Transition API
+TODO
+
+### Conclusion
+You can use the techniques above to create quite a few interesting and pleasing effects with plain old HTML while using htmx.
+"""

src/tutorial/_13_file_upload.py

@@ -0,0 +1,81 @@
+from fasthtml.common import H3, Button, Div, Form, Hr, Input, Progress, Script, fast_app
+from starlette.datastructures import UploadFile
+
+app, rt = fast_app(hdrs=[Script(src="https://unpkg.com/hyperscript.org@0.9.12")])
+
+
+@app.get
+def page():
+    return Div(
+        Div(H3("Method 1: Pure JS"), Div(method1())),
+        Hr(),
+        Div(H3("Method 2: Hyperscript"), Div(method2())),
+        cls="container",
+    )
+
+
+@app.get
+def method1():
+    js = """
+    htmx.on('#form', 'htmx:xhr:progress', function(evt) {
+        htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
+    });
+    """
+    form = Form(
+        Input(type="file", name="file"),
+        Button("Upload"),
+        Progress(id="progress", value="0", max="100"),
+        Div(id="output"),
+        hx_target="#output",
+        hx_post=upload.rt(),
+        id="form",
+    )
+    return form, Script(js)
+
+
+@app.get
+def method2():
+    return Form(
+        Input(type="file", name="file"),
+        Button("Upload"),
+        Progress(id="progress2", value="0", max="100"),
+        Div(id="output2"),
+        hx_target="#output2",
+        hx_encoding="multipart/form-data",
+        hx_post=upload.rt(),
+        _="on htmx:xhr:progress(loaded, total) set #progress2.value to (loaded/total)*100",
+    )
+
+
+@app.post
+async def upload(file: UploadFile):
+    # print(len(await file.read()))
+    return Div(f"Uploaded! Filename: {file.filename}. Filesize: {file.size}")
+
+
+DESC = "Demonstrates how to upload a file via ajax with a progress bar"
+DOC = """
+In this example we show how to create a file upload form that will be submitted via ajax, along with a progress bar.
+
+We will show two different implementation, one in pure javascript (using some utility methods in htmx) and one in hyperscript
+
+First the pure javascript version.
+
+ - We have a form of type multipart/form-data so that the file will be properly encoded
+ - We post the form to /upload
+ - We have a progress element
+ - We listen for the htmx:xhr:progress event and update the value attribute of the progress bar based on the loaded and total properties in the event detail.
+
+::method1::
+
+The Hyperscript version is very similar, except:
+
+The script is embedded directly on the form element
+Hyperscript offers nicer syntax (although the htmx API is pretty nice too!)
+```python
+app, rt = fast_app(hdrs=[Script(src="https://unpkg.com/hyperscript.org@0.9.12")])
+```
+::method2::
+
+Note that hyperscript allows you to destructure properties from details directly into variables
+"""