Updates to Modals

Author: mitchelsellers

src/AspNetCore.Utilities.Bootstrap5TagHelpers.Sample/Views/Home/Index.cshtml

@@ -336,7 +336,7 @@
                     Launch Demo
                 </modal-toggle>
 
-                <modal id="testing" class="im-weird">
+                <modal id="testing" class="im-weird" vertically-centered="true" >
                     <modal-header Title="Testing Modal Header">
                         <modal-header-dismiss></modal-header-dismiss>
                     </modal-header>
@@ -367,7 +367,45 @@
                     &lt;/modal&gt;
                 </code>
             </td>
-        </tr>
+        </tr>      
+    <tr>
+        <td>
+            <modal-toggle Target="testing-secondary">
+                Launch Demo
+            </modal-toggle>
+
+            <modal id="testing-secondary" class="im-weird" vertically-centered="true" static-backdrop="true" >
+                <modal-header Title="Testing Modal Header">
+                    <modal-header-dismiss></modal-header-dismiss>
+                </modal-header>
+                <modal-body>
+                    <form-input asp-for="FirstName"></form-input>
+                </modal-body>
+                <modal-footer>
+                    <bs-button bs-color="Secondary" dismisses="modal">Close</bs-button>
+                </modal-footer>
+            </modal>
+        </td>
+        <td>
+            <code>
+                &lt;modal-toggle Target=&quot;testing&quot;&gt;
+                Launch Demo
+                &lt;/modal-toggle&gt;
+
+                &lt;modal id=&quot;testing&quot;&gt;
+                &lt;modal-header Title=&quot;Testing Modal Header&quot;&gt;
+                &lt;modal-header-dismiss&gt;&lt;/modal-header-dismiss&gt;
+                &lt;/modal-header&gt;
+                &lt;modal-body&gt;
+                &lt;form-input asp-for=&quot;FirstName&quot;&gt;&lt;/form-input&gt;
+                &lt;/modal-body&gt;
+                &lt;modal-footer&gt;
+                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
+                &lt;/modal-footer&gt;
+                &lt;/modal&gt;
+            </code>
+        </td>
+    </tr>      
     </tbody>
 </table>
 

src/AspNetCore.Utilities.Bootstrap5TagHelpers.Tests/Modal/ModalTagHelperTests.cs

@@ -139,6 +139,7 @@ public async Task Should_Render_Static_Backdrop_Attribute_When_Flagged(bool stat
         }
     }
 
+    
     [Fact]
     public async Task Should_Render_Proper_InnerHtmlStructure_WithNoChildContent()
     {
@@ -153,4 +154,36 @@ public async Task Should_Render_Proper_InnerHtmlStructure_WithNoChildContent()
         //Assert
         Assert.Equal(expectedContent, output.Content.GetContent());
     }
+
+    [Fact]
+    public async Task Should_Render_Centered_Class_When_Flagged()
+    {
+        //Arrange
+        TagHelperContext context = MakeTagHelperContext();
+        TagHelperOutput output = MakeTagHelperOutput(" ");
+        var expectedContent = "<div class=\"modal-dialog modal-dialog-centered\"><div class=\"modal-content\"></div></div>";
+
+        //Act
+        var helper = new ModalTagHelper { VerticallyCentered = true };
+        await helper.ProcessAsync(context, output);
+
+        //Assert
+        Assert.Equal(expectedContent, output.Content.GetContent());
+    }
+
+    [Fact]
+    public async Task Should_Render_Scrollable_Class_When_Flagged()
+    {
+        //Arrange
+        TagHelperContext context = MakeTagHelperContext();
+        TagHelperOutput output = MakeTagHelperOutput(" ");
+        var expectedContent = "<div class=\"modal-dialog modal-dialog-scrollable\"><div class=\"modal-content\"></div></div>";
+
+        //Act
+        var helper = new ModalTagHelper { Scrollable = true };
+        await helper.ProcessAsync(context, output);
+
+        //Assert
+        Assert.Equal(expectedContent, output.Content.GetContent());
+    }
 }

src/AspNetCore.Utilities.Bootstrap5TagHelpers/Modal/ModalTagHelper.cs

@@ -18,6 +18,23 @@ public class ModalTagHelper : TagHelper
     /// </summary>
     public bool StaticBackdrop { get; set; } = false;
 
+    /// <summary>
+    /// If set to true the modal will have the added class of modal-dialog-centered
+    /// </summary>
+    public bool VerticallyCentered { get; set; } = false;
+
+    /// <summary>
+    /// If set to true the modal will have the added class of modal-dialog-scrollable
+    /// </summary>
+    public bool Scrollable { get; set; } = false;
+
+    public override void Init(TagHelperContext context)
+    {
+        //Reset
+        if(context.Items.ContainsKey(typeof(ModalContext)))
+            context.Items.Remove(typeof(ModalContext));
+    }
+
     /// <summary>
     ///     Renders the tag helper
     /// </summary>
@@ -53,6 +70,10 @@ public override async Task ProcessAsync(TagHelperContext context, TagHelperOutpu
         output.Attributes.Add("tabindex", "-1");
         var dialogWrapper = new TagBuilder("div");
         dialogWrapper.AddCssClass("modal-dialog");
+        if (VerticallyCentered)
+            dialogWrapper.AddCssClass("modal-dialog-centered");
+        if (Scrollable)
+            dialogWrapper.AddCssClass("modal-dialog-scrollable");
         var dialogContent = new TagBuilder("div");
         dialogContent.AddCssClass("modal-content");
         dialogContent.InnerHtml.AppendHtml(body);