From 74fe4ca4a11bcd839b8d6c411fe19618c2202bd0 Mon Sep 17 00:00:00 2001
From: klappstuhl24 <t.kleipsties@web.de>
Date: Thu, 16 Nov 2023 22:47:03 +0100
Subject: [PATCH] Fancy animation zur image section wenn generate butten
 gepresst wurde.

---
 KIKunstKirstenKlöckner/Pages/AiArt.razor      | 132 ++++++++++--------
 KIKunstKirstenKlöckner/wwwroot/js/animator.js |   8 +-
 2 files changed, 82 insertions(+), 58 deletions(-)

diff --git a/KIKunstKirstenKlöckner/Pages/AiArt.razor b/KIKunstKirstenKlöckner/Pages/AiArt.razor
index 4aed877..cb053f5 100644
--- a/KIKunstKirstenKlöckner/Pages/AiArt.razor
+++ b/KIKunstKirstenKlöckner/Pages/AiArt.razor
@@ -8,6 +8,7 @@
 @using KIKunstKirstenKlöckner.Data
 @using System.Diagnostics
 
+@inject IJSRuntime JSRuntime
 @inject IConfiguration Config
 @inject TooltipService TooltipService
 @inject NotificationService NotificationService
@@ -64,67 +65,74 @@
             </ChildContent>
         </RadzenPanel>
 
-        <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>Generate</RadzenButton>
+            <RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
 
-        <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
+        @if (_imageSectionVisible)
+            {
+                <section id="imageSection">
+                            <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
+                        <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
 
-        <RadzenCard class="rz-mt-4" Style="width: 800px;">
-                <RadzenText>@_imageIdea</RadzenText>
-        </RadzenCard>
-    
-        <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
-        <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
-    
-        <RadzenImage Path=@_imageUrl></RadzenImage>
+                        <RadzenCard class="rz-mt-4" Style="width: 800px;">
+                            <RadzenText>@_imageIdea</RadzenText>
+                        </RadzenCard>
 
-        <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
-        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
-        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
+                        <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
+                        <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
 
-        <RadzenCard>
-            <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
-                <RadzenColumn Size="6">
-                    <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false" 
-                                   Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
-                                   Click="() => ShowImageDialog(_imageUrls[0])" />
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-                        @_imagePromts[0]
-                        <br/>
-                        Model: @_bildInfos[0]?.ImageModel
-                    </RadzenPanel>
-                </RadzenColumn>
-                <RadzenColumn Size="6">
-                    <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false" 
-                                   Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
-                                       Click="() => ShowImageDialog(_imageUrls[1])" />
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-                            @_imagePromts[1]
-                            <br />
-                            Model: @_bildInfos[1]?.ImageModel
-                        </RadzenPanel>
-                </RadzenColumn>
-                <RadzenColumn Size="6">
-                    <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false" 
-                                   Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
-                                       Click="() => ShowImageDialog(_imageUrls[2])" />
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-                            @_imagePromts[2]
-                            <br />
-                            Model: @_bildInfos[2]?.ImageModel
-                        </RadzenPanel>
-                </RadzenColumn>
-                <RadzenColumn Size="6">
-                    <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false" 
-                                   Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
-                                       Click="() => ShowImageDialog(_imageUrls[3])" />
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-                            @_imagePromts[3]
-                            <br/>
-                            Model: @_bildInfos[3]?.ImageModel
-                        </RadzenPanel>
-                </RadzenColumn>
-            </RadzenRow>
-        </RadzenCard>
+                        <RadzenImage Path=@_imageUrl></RadzenImage>
+
+                        <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
+                        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
+                        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
+
+                        <RadzenCard>
+                            <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
+                                <RadzenColumn Size="6">
+                                    <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
+                                                    Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
+                                                    Click="() => ShowImageDialog(_imageUrls[0])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                                        @_imagePromts[0]
+                                        <br />
+                                        Model: @_bildInfos[0]?.ImageModel
+                                    </RadzenPanel>
+                                </RadzenColumn>
+                                <RadzenColumn Size="6">
+                                    <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false"
+                                                    Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
+                                                    Click="() => ShowImageDialog(_imageUrls[1])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                                        @_imagePromts[1]
+                                        <br />
+                                        Model: @_bildInfos[1]?.ImageModel
+                                    </RadzenPanel>
+                                </RadzenColumn>
+                                <RadzenColumn Size="6">
+                                    <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false"
+                                                    Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
+                                                    Click="() => ShowImageDialog(_imageUrls[2])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                                        @_imagePromts[2]
+                                        <br />
+                                        Model: @_bildInfos[2]?.ImageModel
+                                    </RadzenPanel>
+                                </RadzenColumn>
+                                <RadzenColumn Size="6">
+                                    <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false"
+                                                    Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
+                                                    Click="() => ShowImageDialog(_imageUrls[3])" />
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                                        @_imagePromts[3]
+                                        <br />
+                                        Model: @_bildInfos[3]?.ImageModel
+                                    </RadzenPanel>
+                                </RadzenColumn>
+                            </RadzenRow>
+                        </RadzenCard>
+                    </RadzenStack>
+                </section>
+            }
     
     </RadzenStack>
 </div>
@@ -142,6 +150,7 @@
     private bool _buttonVisible = true;
     private bool _addonsVisible = false;
     private bool _bothVisible = false;
+    private bool _imageSectionVisible = false;
 
     public string BusyMessage { get; set; } = "Initial Message";
 
@@ -156,6 +165,15 @@
         FadeIn
     }
 
+    private async Task OnGenerateButtonClickAsync()
+    {
+        _imageSectionVisible = true;
+        StateHasChanged();
+        await Task.Delay(100);
+        await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
+        await GenerateImagesAsync();
+    }
+
     async Task ShowImageDialog(string imageUrl)
     {
         var result = await DialogService.OpenAsync("", ds =>
diff --git a/KIKunstKirstenKlöckner/wwwroot/js/animator.js b/KIKunstKirstenKlöckner/wwwroot/js/animator.js
index 45719dc..3006527 100644
--- a/KIKunstKirstenKlöckner/wwwroot/js/animator.js
+++ b/KIKunstKirstenKlöckner/wwwroot/js/animator.js
@@ -14,6 +14,12 @@
 
     window.addEventListener('scroll', animateElements);
 
-    // Initialer Aufruf für den Fall, dass Elemente bereits sichtbar sind
     animateElements();
 }
+
+function scrollToElement(elementId) {
+    var element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+    }
+}