Add documentation comments in code

smnandre · Jun 3, 2024 · 9de910a · 9de910a
1 parent 9dcbd41
commit 9de910a
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 60 deletions.
diff --git a/ux.symfony.com/assets/styles/components/_ProductGrid.scss b/ux.symfony.com/assets/styles/components/_ProductGrid.scss
@@ -141,14 +141,30 @@
   height: 100%;
   width: 100%;
   background: var(--color);
-  --duration: 10s;
-  animation: productloading linear;
+  --duration: 1s;
+  animation: productloading linear forwards;
   animation-delay: calc(var(--delay) * 0.9 * var(--duration));
   animation-duration: var(--duration);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
   transform: translateX(-100%);
 }
 @keyframes productloading {
   100% { transform: translateX(0) }
 }
+@keyframes productloaded {
+  0% {
+    opacity: 0.2;
+    filter: brightness(0)
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1)
+  }
+}
+.ProductGrid_media.loaded span,
+.ProductGrid_media.loaded svg {
+  opacity: .2;
+  filter: brightness(0);
+  --duration: 1000ms;
+  animation: productloaded var(--duration) linear forwards;
+  animation-delay: calc(var(--delay) * 0.9 * var(--duration));
+}
diff --git a/ux.symfony.com/src/Twig/ProductGrid2.php b/ux.symfony.com/src/Twig/ProductGrid2.php
@@ -25,43 +25,23 @@ class ProductGrid2
     use ComponentToolsTrait;
     use DefaultActionTrait;
 
-    private const PER_PAGE = 9;
-
-    #[LiveProp]
-    public int $hue = 40;
+    private const PER_PAGE = 11;
 
     #[LiveProp]
     public int $page = 1;
 
-    #[LiveProp]
-    public bool $withDelay = true;
-
     public function __construct(private readonly EmojiCollection $emojis)
     {
     }
 
-    #[LiveAction]
-    public function toggleDelay(): void
-    {
-        $this->withDelay = !$this->withDelay;
-    }
-
-    #[LiveAction]
-    public function more(): void
-    {
-        ++$this->page;
-    }
-
     public function getItems(): array
     {
-        $emojis = $this->emojis->paginate($this->page, self::PER_PAGE);
-
         $items = [];
+        $emojis = $this->emojis->paginate($this->page, self::PER_PAGE);
         foreach ($emojis as $i => $emoji) {
             $items[] = [
                 'id' => ($this->page - 1) * self::PER_PAGE + $i,
                 'emoji' => $emoji,
-                'hue' => $this->hue,
             ];
         }
 
@@ -78,4 +58,10 @@ public function hasMore(): bool
     {
         return \count($this->emojis) > ($this->page * self::PER_PAGE);
     }
+
+    #[LiveAction]
+    public function more(): void
+    {
+        ++$this->page;
+    }
 }
diff --git a/ux.symfony.com/templates/components/ProductGrid2.html.twig b/ux.symfony.com/templates/components/ProductGrid2.html.twig
@@ -2,61 +2,84 @@
 
     <div id="results" style="display: flex; gap: 1rem; flex-direction: column;" class="p-4">
         <div class="ProductGrid_items">
-            {# 🐯 #}
+
+            {# 🐯- Last result from previous page #}
+            {# Fake item (with same id) #}
+            {# This allow the addition of new elements after the existing ones #}
             {% if page > 1 %}
                 <article id="item--{{ page - 1 }}-{{ per_page }}"></article>
             {% endif %}
 
+            {# 🦊 - Current page #}
+            {# Current items (with data-live-ignore) #}
+            {# This allow the conservation of previous elements in the DOM #}
             {% for item in this.items %}
-                {# 🦊 #}
-                <article  id="item--{{ page }}-{{ loop.index }}" data-live-ignore
-                    class="ProductGrid_item" style="--i: {{ item.id }};">
+                <article
+                    id="item--{{ page }}-{{ loop.index }}"
+                    class="ProductGrid_item"
+                    style="--i: {{ item.id }};"
+                    data-live-ignore
+                >
                     <div class="ProductGrid_media">
                         <svg><use href="#svg-tshirt"/></svg>
                         <span>{{ item.emoji }}</span>
                     </div>
-                    <data class="ProductGrid_price" value="{{ item.id + 0.99 }}">
+                    <data class="ProductGrid_price">
                         {{ item.id }}<small>.99</small>
                     </data>
                 </article>
             {% endfor %}
 
-            {% block hasMore %}
             {% if this.hasMore %}
+                {# 🐼 - Next page #}
+                {# Next items placeholders (with id) #}
+                {# This allow nice items animations during next page load #}
                 {% for i in 1..per_page %}
                     <div id="item--{{ page + 1 }}-{{ i }}"
-                        class="ProductGrid_item" style="--i: {{ (page * per_page) + i - 1 }};"
-                          {% if loop.first %}
-                              data-appear-target="loader"
-                              data-action="appear->live#action"
-                              data-live-action-param="debounce({{ this.withDelay ? '2000'}})|more"
-                          {% endif %}
+                         class="ProductGrid_item" style="--i: {{ (page * per_page) + i - 1 }};"
+
+                        {# 🦁 - The trigger #}
+                        {# First item of the next page will trigger the next page load #}
+                        {% if loop.first %}
+                            data-appear-target="loader"
+                            data-action="appear->live#action"
+                            data-live-action-param="debounce(750)|more"
+                        {% endif %}
                     >
                         <div class="ProductGrid_media">
                             <svg><use href="#svg-tshirt"/></svg>
                         </div>
                         <span class="ProductGrid_price">
-                            <span class="ProductGrid_loader" style="--delay: {{ (loop.index + 1) / per_page }};"></span>
+                            {# 🐹 - Loading bar #}
+                            {# Animated progress bar shown during page load #}
+                            <span class="ProductGrid_loader" style="--delay: {{ (loop.index+1) / per_page }};"></span>
                         </span>
                     </div>
                 {% endfor %}
             {% endif %}
-            {% endblock %}
 
         </div>
 
         {% if not this.hasMore %}
             <div style="display: grid; place-content: center;padding-block: 2rem;">
-                <span class="code">The End</span>
+                <div style="max-width: 36rem;">
+                    <h4>Did you know?</h4>
+                    <p>
+                        This demo adds a fixed delay of <code>750ms</code> before each page load to simulate slow
+                        network conditions. Or maybe just to let you enjoy the sweet animations... 🍿
+                    </p>
+                    <p>Wonder how it would feel without? Why not get the code and try it yourself?</p>
+                </div>
             </div>
         {% endif %}
     </div>
 
     {# Custom style - Retro TShirt #}
     <style>
       .ProductGrid_item {
-        --color: hsl(calc(var(--i)*{{ this.hue }}deg + 200deg), 77%, 80%);
+        --color: hsl(calc(var(--i) * 40deg + 200deg), 77%, 80%);
       }
+
       .ProductGrid_media span {
         top: 20%;
         font-size: 3rem;

diff --git a/ux.symfony.com/templates/demos/live_component/infinite_scroll_2.html.twig b/ux.symfony.com/templates/demos/live_component/infinite_scroll_2.html.twig
@@ -2,26 +2,27 @@
 
 {% block demo_container %}
 
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" display="none">
-        <symbol id="svg-tshirt" viewBox="0 0 1068 1032">
-            <style>
-              #svg-tshirt .retro {
-                stroke: rgba(0 0 0 / 0.5);
-                stroke-width: 2px;
-                fill: color-mix(in lch, currentColor 50%, #fff 75%);
-              }
-            </style>
-            <path
-                d="M397 5c-1 2-5 3-8 3-3 1-7 2-11 5-11 6-58 24-95 35-25 8-39 14-47 19-8 6-39 38-51 54l-26 34-25 35-65 87a1267 1267 0 0 1-65 78c0 2 11 13 31 28a1375 1375 0 0 1 51 43 704 704 0 0 1 69 59l3 1 10-9a772.9 772.9 0 0 0 41-39c15.6-15.5 32-30.1 49-44 1 0 1 1-1 51l-3 77c-3.8 109-5.1 218-4 327-2.1 56.3-2.8 112.7-2 169 2 6 24 9 81 9 36.7-.4 73.5 1.3 110 5l14-1 23-1 25-1c27-2 36-2 48-1 13 2 32 2 83 0l106-2c77-1 82-1 87-4 1.3-25.3 2-50.7 2-76-2.2-148-6.6-296-13-444-2-70-2-98 0-99 1-1 3 1 11 8a261 261 0 0 0 32 27 323 323 0 0 1 44 39l8 6 3 4 4-3 10-7c9.3-9.1 19-17.8 29-26a766.8 766.8 0 0 1 81-66 279 279 0 0 1 28-24l-3-3c-4-3-16-18-33-40l-20-26-37-53A760 760 0 0 0 821 67c-4-5-20-12-36-17l-35-10A1330 1330 0 0 1 650 6c-6-3-11-3-15 1a224 224 0 0 1-119 27c-24-1-52-4-65-8-7-2-26-11-33-16-5-4-13-7-16-7l-5 2Z"/>
-            <path class="retro"
-                  d="M1042.5 335.4 944.9 422l-51.7 47 20 18.8L995 416l68.1-55.5-20.5-25ZM24.5 332l100.4 85.2 54.1 49.3-21 20.5-73.5-64.9-79.9-67L24.5 332ZM657.9 9 650 6c-6-3-11-3-15 1a224 224 0 0 1-119 27c-24-1-52-4-65-8-7-2-26-11-33-16-5-4-13-7-16-7l-5 2c-1 2-5 3-8 3l-1.3.4-1.6.6c17.6 29 71.8 50 135.9 50 64 0 118.2-21 135.9-50Z"/>
-            <path class="retro"
-                  d="m1042.8 331.1 24.4 29.8-70.3 57.4-83.7 73.5-24.4-22.7 54-49.3 100-88.7ZM995 416l68.1-55.5-20.5-25L945 422l-51.7 47 20 18.8L995 416ZM24.2 327.8l102.7 87.1 56.5 51.5-25.3 24.7-75.6-66.7-82.1-69 23.8-27.6ZM84.5 422l73.5 65 21-20.5-54-49.3L24.4 332 4.6 355l79.9 67.1ZM662.3 7.5l-1.8 3c-9.4 15.4-28 28.2-52.1 37.2-24.1 9-54 14.3-86.4 14.3-32.4 0-62.3-5.3-86.4-14.4-24.1-9-42.8-21.8-52.1-37l-2-3.3 3.6-1.2 1.7-.5 1.3-.4.4-.2h.5c1.2 0 2.6-.2 3.8-.6a4.3 4.3 0 0 0 1.5-.7l.5-1 6.6-2.7h.6c2.1 0 5.4 1 8.4 2.2 3.1 1.3 6.6 3.2 9.4 5.4a128 128 0 0 0 16 8.8c6.5 3.1 12.8 5.8 16 6.7 12.7 4 40.3 6.9 64.3 7.9A221 221 0 0 0 633.3 4.6c2.4-2.3 5.2-3.6 8.4-3.7a19 19 0 0 1 9.6 2.4l7.8 2.9 3.3 1.3ZM650 6c-6-3-11-3-15 1a224 224 0 0 1-119 27c-24-1-52-4-65-8-7-2-26-11-33-16-5-4-13-7-16-7l-5 2c-1 2-5 3-8 3l-1.3.4-1.6.6 1.7 2.6C407 39.2 459.8 59 522 59c62.1 0 115-19.8 134.2-47.4L658 9a1291.2 1291.2 0 0 1-7.9-3Z"/>
-        </symbol>
-    </svg>
-
     <div class="container container-xl mb-5">
         <twig:Browser url="/foo" class="shadow-blur shadow-blur--rainbow">
+
+            {# Retro Tshirt SVG code #}
+            {# Used as external ref in ProductGrid2 (to improve code readability) #}
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" display="none">
+                <symbol id="svg-tshirt" viewBox="0 0 1068 1032">
+                    <style>
+                      #svg-tshirt .retro {
+                        stroke: rgba(0 0 0 / 0.5);
+                        stroke-width: 2px;
+                        fill: color-mix(in lch, currentColor 50%, #fff 75%);
+                      }
+                    </style>
+                    <path d="M397 5c-1 2-5 3-8 3-3 1-7 2-11 5-11 6-58 24-95 35-25 8-39 14-47 19-8 6-39 38-51 54l-26 34-25 35-65 87a1267 1267 0 0 1-65 78c0 2 11 13 31 28a1375 1375 0 0 1 51 43 704 704 0 0 1 69 59l3 1 10-9a772.9 772.9 0 0 0 41-39c15.6-15.5 32-30.1 49-44 1 0 1 1-1 51l-3 77c-3.8 109-5.1 218-4 327-2.1 56.3-2.8 112.7-2 169 2 6 24 9 81 9 36.7-.4 73.5 1.3 110 5l14-1 23-1 25-1c27-2 36-2 48-1 13 2 32 2 83 0l106-2c77-1 82-1 87-4 1.3-25.3 2-50.7 2-76-2.2-148-6.6-296-13-444-2-70-2-98 0-99 1-1 3 1 11 8a261 261 0 0 0 32 27 323 323 0 0 1 44 39l8 6 3 4 4-3 10-7c9.3-9.1 19-17.8 29-26a766.8 766.8 0 0 1 81-66 279 279 0 0 1 28-24l-3-3c-4-3-16-18-33-40l-20-26-37-53A760 760 0 0 0 821 67c-4-5-20-12-36-17l-35-10A1330 1330 0 0 1 650 6c-6-3-11-3-15 1a224 224 0 0 1-119 27c-24-1-52-4-65-8-7-2-26-11-33-16-5-4-13-7-16-7l-5 2Z"/>
+                    <path class="retro" d="M1042.5 335.4 944.9 422l-51.7 47 20 18.8L995 416l68.1-55.5-20.5-25ZM24.5 332l100.4 85.2 54.1 49.3-21 20.5-73.5-64.9-79.9-67L24.5 332ZM657.9 9 650 6c-6-3-11-3-15 1a224 224 0 0 1-119 27c-24-1-52-4-65-8-7-2-26-11-33-16-5-4-13-7-16-7l-5 2c-1 2-5 3-8 3l-1.3.4-1.6.6c17.6 29 71.8 50 135.9 50 64 0 118.2-21 135.9-50Z"/>
+                    <path class="retro" d="m1042.8 331.1 24.4 29.8-70.3 57.4-83.7 73.5-24.4-22.7 54-49.3 100-88.7ZM995 416l68.1-55.5-20.5-25L945 422l-51.7 47 20 18.8L995 416ZM24.2 327.8l102.7 87.1 56.5 51.5-25.3 24.7-75.6-66.7-82.1-69 23.8-27.6ZM84.5 422l73.5 65 21-20.5-54-49.3L24.4 332 4.6 355l79.9 67.1ZM662.3 7.5l-1.8 3c-9.4 15.4-28 28.2-52.1 37.2-24.1 9-54 14.3-86.4 14.3-32.4 0-62.3-5.3-86.4-14.4-24.1-9-42.8-21.8-52.1-37l-2-3.3 3.6-1.2 1.7-.5 1.3-.4.4-.2h.5c1.2 0 2.6-.2 3.8-.6a4.3 4.3 0 0 0 1.5-.7l.5-1 6.6-2.7h.6c2.1 0 5.4 1 8.4 2.2 3.1 1.3 6.6 3.2 9.4 5.4a128 128 0 0 0 16 8.8c6.5 3.1 12.8 5.8 16 6.7 12.7 4 40.3 6.9 64.3 7.9A221 221 0 0 0 633.3 4.6c2.4-2.3 5.2-3.6 8.4-3.7a19 19 0 0 1 9.6 2.4l7.8 2.9 3.3 1.3ZM650 6c-6-3-11-3-15 1a224 224 0 0 1-119 27c-24-1-52-4-65-8-7-2-26-11-33-16-5-4-13-7-16-7l-5 2c-1 2-5 3-8 3l-1.3.4-1.6.6 1.7 2.6C407 39.2 459.8 59 522 59c62.1 0 115-19.8 134.2-47.4L658 9a1291.2 1291.2 0 0 1-7.9-3Z"/>
+                </symbol>
+            </svg>
+
+            {# Retro Tshirt (live) collection #}
             <twig:ProductGrid2/>
         </twig:Browser>
     </div>
@@ -84,6 +85,19 @@
             </div>
         </section>
 
+        <section>
+            <div class="container container-xxl text-center">
+                <div class="code-description">
+                    <h2>What's next?</h2>
+                    <p>
+                        The demo continues on the next page...
+                        <code><a href="{{ url('app_demo_live_component_infinite_scroll_2') }}">Infinite Scroll - Part 2/2</a></code>
+                    </p>
+                </div>
+            </div>
+        </section>
+
+
     </div>
 
 {% endblock %}