Modal Component

FNZCM/FNZCM.BlazorWasm/FNZCM.BlazorWasm.csproj

@@ -22,5 +22,5 @@
   <ItemGroup>
     <ProjectReference Include="..\FNZCM.Shared\FNZCM.Shared.csproj" />
   </ItemGroup>
-
+ 
 </Project>

FNZCM/FNZCM.BlazorWasm/UI/App.razor

@@ -1,4 +1,5 @@
 @inherits ViewBase
+
 <div class="container">
     <a style="float:right" href="/classic-index">Back OLD Home Page</a>
     <h3>Blazor WASM UI</h3>

FNZCM/FNZCM.BlazorWasm/UI/Components/Modal.razor

@@ -0,0 +1,61 @@
+@inject IJSRuntime js
+@code {
+    [Parameter] public RenderFragment Title { get; set; }
+    [Parameter] public RenderFragment Body { get; set; }
+    [Parameter] public RenderFragment Footer { get; set; }
+    [Parameter] public bool ShowCloseButton { get; set; } = true;
+    [Parameter] public bool StaticBackDrop { get; set; }
+}
+
+<div class="modal fade" id="@ElementId" data-bs-backdrop="@(StaticBackDrop?"static":"true")">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">@Title</h5>
+                @if (ShowCloseButton)
+                {
+                    <button type="button" class="btn-close" @onclick="Hide"></button>
+                }
+            </div>
+            <div class="modal-body">
+                @Body
+            </div>
+            <div class="modal-footer">
+                @if (Footer == null)
+                {
+                    if (ShowCloseButton)
+                    {
+                        <button class="btn btn-primary" @onclick="Hide">Close</button>
+                    }
+                }
+                else
+                {
+                    @Footer
+                }
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    private const string HTML_ID_PREFIX = "select2-input-";
+    private readonly string inputGuid = Guid.NewGuid().ToString();
+    private string ElementId => HTML_ID_PREFIX + inputGuid;
+
+    private ValueTask ShowInternal() => js.InvokeVoidAsync("BootstrapModal", ElementId, true);
+    private ValueTask HideInternal() => js.InvokeVoidAsync("BootstrapModal", ElementId, false);
+    private ValueTask ToggleInternal() => js.InvokeVoidAsync("BootstrapModal", ElementId);
+    private ValueTask UpdateBackDropInternal() => js.InvokeVoidAsync("BootstrapModalSetBackDrop", ElementId, StaticBackDrop);
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+        UpdateBackDropInternal();
+    }
+
+    private void CloseButton_Click() => HideInternal();
+    public void Show() => ShowInternal();
+    public void Hide() => HideInternal();
+    public void Toggle() => ToggleInternal();
+
+}

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/BrowseView.razor

@@ -37,4 +37,4 @@
     </div>
 </div>
 
-<DiscDialog Disc="CurrentDisc"></DiscDialog>
+<DiscDialog @ref="ModalDisc" Disc="CurrentDisc"></DiscDialog>

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/BrowseView.razor.cs

@@ -1,14 +1,10 @@
 using FNZCM.BlazorWasm.Models;
-using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
 
 namespace FNZCM.BlazorWasm.UI.Views.Browse
 {
     public partial class BrowseView
     {
-        [Inject]
-        private IJSRuntime Js { get; set; }
-
+        private DiscDialog ModalDisc { get; set; }
 
         private FeLibrary CurrentLibrary { get; set; }
         private FeDisc CurrentDisc { get; set; }
@@ -37,7 +33,7 @@ namespace FNZCM.BlazorWasm.UI.Views.Browse
         {
             CurrentDisc = disc;
             StateHasChanged();
-            Js.InvokeVoidAsync("ModalDiscShow");
+            ModalDisc.Show();
         }
     }
 }

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/DiscCard.razor

@@ -1,30 +1,35 @@
 @code {
-    [Parameter, Required] public FeDisc Disc { get; set; }
+    [Parameter, Required] public FeDisc[] Discs { get; set; }
     [Parameter] public EventCallback<FeDisc> OnClick { get; set; } = EventCallback<FeDisc>.Empty;
 }
 
-<div class="card mb-3 shadow-sm" @onclick="()=>{ if (Disc!=null) OnClick.InvokeAsync(Disc); }">
-    <div class="card-img-top disc-card-cover" style="background-image:url('@Disc.CoverPath.UrlEscape()')">
-    </div>
-    <div class="card-body d-flex align-content-between flex-wrap p-2">
-        <p class="card-text position-relative">
-            @Disc?.Name
-            @if (Disc?.Bks != null)
-            {
-                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">BK</span>
-            }
-        </p>
-        <div class="w-100">
-            <div class="w-100 text-center">
-                <small class="font-monospace text-muted">Track @Disc.TrackSets.First().Tracks.Length</small>
+ @foreach (var disc in (Discs).KeepNoEmpty())
+{
+    <div class="col-md-3 d-flex align-items-stretch">
+        <div class="card mb-3 shadow-sm" @onclick="()=>{ if (disc!=null) OnClick.InvokeAsync(disc); }">
+            <div class="card-img-top disc-card-cover" style="background-image:url('@disc.CoverPath.UrlEscape()')">
             </div>
-            @foreach (var tSet in (Disc?.TrackSets).KeepNoEmpty())
-            {
-                <div class="d-flex justify-content-between w-100">
-                    <span class="align-self-center">@(tSet?.Name.StartsWith("AAC_Q1.00") == true ? "Q1" + tSet?.Name.Substring(9) : tSet?.Name)</span>
-                    <small class="text-nowrap font-monospace text-muted align-self-center">@tSet?.TotalDuration.SecondToDur() @tSet?.TotalBytes.BytesToFileSize()</small>
+            <div class="card-body d-flex align-content-between flex-wrap p-2">
+                <p class="card-text position-relative">
+                    @disc?.Name
+                    @if (disc?.Bks != null)
+                    {
+                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">BK</span>
+                    }
+                </p>
+                <div class="w-100">
+                    <div class="w-100 text-center">
+                        <small class="font-monospace text-muted">Track @disc.TrackSets.First().Tracks.Length</small>
+                    </div>
+                    @foreach (var tSet in (disc?.TrackSets).KeepNoEmpty())
+                    {
+                        <div class="d-flex justify-content-between w-100">
+                            <span class="align-self-center">@(tSet?.Name.StartsWith("AAC_Q1.00") == true ? "Q1" + tSet?.Name.Substring(9) : tSet?.Name)</span>
+                            <small class="text-nowrap font-monospace text-muted align-self-center">@tSet?.TotalDuration.SecondToDur() @tSet?.TotalBytes.BytesToFileSize()</small>
+                        </div>
+                    }
                 </div>
-            }
+            </div>
         </div>
     </div>
-</div>
+}

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/DiscDialog.razor

@@ -1,58 +1,59 @@
-@code {
+@inject IJSRuntime js;
+@code {
     [Parameter, Required] public FeDisc Disc { get; set; }
 }
 
-<div class="modal fade" id="ModalDisc" aria-hidden="true" aria-labelledby="ModalDiscLabel" tabindex="-1">
-    <div class="modal-dialog modal-dialog-centered modal-xl">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="ModalDiscLabel">@Disc?.Name</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="container-fluid">
-                    <div class="row">
-                        <div class="col-md-4 mb-1"><img class="card-img-top" src="@Disc?.CoverPath" onerror="this.src='blazor-192.png'"></div>
-                        <div class="col-md-8">
-                            <ul class="nav nav-tabs justify-content-center nav-fill" id="ModalDiscTab" role="tablist">
-                                @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
-                                {
-                                    <li class="nav-item " role="presentation">
-                                        <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index" type="button">
-                                            @subSet.item?.Name
-                                        </button>
-                                    </li>
-                                }
-                                @if (Disc?.Bks != null)
-                                {
-                                    <li class="nav-item " role="presentation">
-                                        <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-BK" type="button">
-                                            BK
-                                        </button>
-                                    </li>
-                                }
-                            </ul>
-                            <div class="tab-content" id="ModalDiscTabContent">
-                                @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
-                                {
-                                    <div class="tab-pane fade" id="tracks-@subSet.index" role="tabpanel">
-                                        <DiscDialogTrackSetTable TrackSet="subSet.item"></DiscDialogTrackSetTable>
-                                    </div>
-                                }
-                                @if (Disc?.Bks != null)
-                                {
-                                    <div class="tab-pane fade p-2" id="tracks-BK" role="tabpanel">
-                                        <DiscDialogBkSilder Bks="Disc.Bks"></DiscDialogBkSilder>
-                                    </div>
-                                }
+<Modal @ref="modal">
+    <Title>@Disc?.Name</Title>
+    <Body>
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-md-4 mb-1"><img class="card-img-top" src="@Disc?.CoverPath" onerror="this.src='blazor-192.png'"></div>
+                <div class="col-md-8">
+                    <ul class="nav nav-tabs justify-content-center nav-fill" id="ModalDiscTab" role="tablist">
+                        @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
+                        {
+                            <li class="nav-item " role="presentation">
+                                <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index" type="button">
+                                    @subSet.item?.Name
+                                </button>
+                            </li>
+                        }
+                        @if (Disc?.Bks != null)
+                        {
+                            <li class="nav-item " role="presentation">
+                                <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-BK" type="button">
+                                    BK
+                                </button>
+                            </li>
+                        }
+                    </ul>
+                    <div class="tab-content" id="ModalDiscTabContent">
+                        @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
+                        {
+                            <div class="tab-pane fade" id="tracks-@subSet.index" role="tabpanel">
+                                <DiscDialogTrackSetTable TrackSet="subSet.item"></DiscDialogTrackSetTable>
+                            </div>
+                        }
+                        @if (Disc?.Bks != null)
+                        {
+                            <div class="tab-pane fade p-2" id="tracks-BK" role="tabpanel">
+                                <DiscDialogBkSilder Bks="Disc.Bks"></DiscDialogBkSilder>
                             </div>
-                        </div>
+                        }
                     </div>
                 </div>
             </div>
-            <div class="modal-footer">
-                <button class="btn btn-primary" data-bs-dismiss="modal">Close</button>
-            </div>
         </div>
-    </div>
-</div>
+
+    </Body>
+</Modal>
+
+@code {
+    private Modal modal { get; set; }
+    public void Show()
+    {
+        js.InvokeVoidAsync("ResetModalDisc");
+        modal.Show();
+    }
+}

FNZCM/FNZCM.BlazorWasm/UI/_Imports.razor

@@ -12,8 +12,6 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 
-@using KeudellCoding.Blazor.AdvancedBlazorSelect2
-
 @using FNZCM.Shared
 @using FNZCM.Shared.Helpers
 @using FNZCM.Shared.MediaModels

FNZCM/FNZCM.BlazorWasm/wwwroot/fnz.js

@@ -14,40 +14,39 @@ function ShowLibSelectorList(s) {
         var elememt = document.querySelector("#LibSelectorList");
         CollapseLibSelectorList = new bootstrap.Collapse(elememt, { toggle: false });
     }
-     
+
     if (s === true) CollapseLibSelectorList.show();
     else if (s === false) CollapseLibSelectorList.hide();
     else CollapseLibSelectorList.toggle();
 }
 
-// ModalDisc
-
-var objModalDisc = null;
+// Modal
 
-function GetModalDisc() {
-    if (objModalDisc == null) {
-        var elModalDisc = document.querySelector('#ModalDisc');
-        objModalDisc = new bootstrap.Modal(elModalDisc);
+var dicModal = {};
 
-        elModalDisc.addEventListener('show.bs.modal', function (event) {
-            ResetModalDiscTab();
-            ResetModalDiscBkSilder();
-        })
+function GetModal(id) {
+    if (dicModal[id] == null) {
+        var elModalDisc = document.getElementById(id);
+        dicModal[id] = new bootstrap.Modal(elModalDisc);
     }
-    return objModalDisc;
+    return dicModal[id];
 }
 
-function ModalDiscShow() {
-    GetModalDisc().show();
+function BootstrapModal(id, s) {
+    var mdl = GetModal(id);
+    if (s === true) mdl.show();
+    else if (s === false) mdl.hide();
+    else mdl.toggle();
 }
 
-function ModalDiscHide() {
-    GetModalDisc().hide();
+function BootstrapModalSetBackDrop(id, b) {
+    GetModal(id)._config.backdrop = b ? 'static' : true;
 }
 
-// ModalDisc Tab
 
-function ResetModalDiscTab() {
+// ModalDisc
+
+function ResetModalDisc() {
     var arrTabs = Array.from(document.querySelectorAll("#ModalDiscTab>.nav-item>.nav-link"));
     if (arrTabs.length > 0) {
         arrTabs.forEach(p => p.classList.remove("active"))
@@ -59,13 +58,6 @@ function ResetModalDiscTab() {
         arrTabContents[0].classList.add("active")
         arrTabContents[0].classList.add("show")
     }
-}
-
-// ModalDisc Tab Bk Silder
-
-function ResetModalDiscBkSilder() {
     var id = "DiscBkSlider";
     $("#" + id).carousel(0);
 }
-
-//