#321 - Close modal when navigation occurs.

neptuo · Sep 22, 2024 · 19d7774 · 19d7774
1 parent 54f31d8
commit 19d7774
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git a/src/Recollections.Blazor.Components/Components/Modal.razor.cs b/src/Recollections.Blazor.Components/Components/Modal.razor.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
 using Neptuo.Logging;
 using System;
 using System.Collections.Generic;
@@ -9,11 +10,16 @@
 
 namespace Neptuo.Recollections.Components
 {
- public partial class Modal
+ public partial class Modal : IDisposable
  {
+ private IDisposable locationChangingToken;
+
  [Inject]
  internal ModalInterop Interop { get; set; }
 
+ [Inject]
+ internal NavigationManager NavigationManager { get; set; }
+
  [Inject]
  internal ILog<Modal> Log { get; set; }
 
@@ -48,6 +54,27 @@ public partial class Modal
 
  protected ElementReference Container { get; set; }
 
+ protected override void OnInitialized()
+ {
+ base.OnInitialized();
+ locationChangingToken = NavigationManager.RegisterLocationChangingHandler(OnLocationChanging);
+ }
+
+ public void Dispose()
+ {
+ Hide();
+ locationChangingToken.Dispose();
+ }
+
+ private async ValueTask OnLocationChanging(LocationChangingContext context)
+ {
+ if (await Interop.IsOpenAsync(Container))
+ {
+ context.PreventNavigation();
+ Hide();
+ }
+ }
+
  protected override void OnParametersSet()
  {
  base.OnParametersSet();

diff --git a/src/Recollections.Blazor.Components/Components/ModalInterop.cs b/src/Recollections.Blazor.Components/Components/ModalInterop.cs
@@ -24,5 +24,11 @@ internal void Show(ElementReference element)
 
  internal void Hide(ElementReference element)
  => jsRuntime.InvokeVoidAsync("Bootstrap.Modal.Hide", element);
+
+ internal void Dispose(ElementReference element)
+ => jsRuntime.InvokeVoidAsync("Bootstrap.Modal.Dispose", element);
+
+ internal ValueTask<bool> IsOpenAsync(ElementReference element)
+ => jsRuntime.InvokeAsync<bool>("Bootstrap.Modal.IsOpen", element);
  }
 }
diff --git a/src/Recollections.Blazor.UI/wwwroot/js/site.js b/src/Recollections.Blazor.UI/wwwroot/js/site.js
@@ -1,31 +1,36 @@
 window.Bootstrap = {
  Modal: {
  Show: function (container) {
- var modal = bootstrap.Modal.getInstance(container);
- if (modal == null) {
- modal = new bootstrap.Modal(container, {
- "show": true,
- "focus": true
- });
-
- container.addEventListener('shown.bs.modal', function () {
- $(container).find("input").first().trigger('focus');
+ var $container = $(container);
+ if (!$container.data("modal-initialized")) {
+ var modal = new bootstrap.Modal(container, {});
+ $container.data("modal", modal);
+
+ $container.data("modal-initialized", true).on('shown.bs.modal', function () {
+ var $select = $container.find("[data-select]");
+ if ($select.length > 0) {
+ $select[0].setSelectionRange(0, $select[0].value.length)
+ }
+
+ const autofocus = $container.find('[data-autofocus]');
+ if (autofocus.length > 0) {
+ autofocus.first().trigger('focus');
+ } else {
+ $container.find("input").first().trigger('focus');
+ }
  });
  }
 
- modal.show();
+ $container.data("modal").show();
  },
  Hide: function (container) {
- var modal = bootstrap.Modal.getInstance(container);
-  if (modal != null) {
-  modal.hide();
- }
+ $(container).data("modal").hide();
+ },
+ IsOpen: function (container) {
+ return $(container).hasClass("show");
  },
  Dispose: function (container) {
- var modal = bootstrap.Modal.getInstance(container);
- if (modal != null) {
- modal.dispose();
- }
+ $(container).data("modal").dispose();
  }
  },
  Offcanvas: {