Fixes javascript issue with eventhandler.

Fixes toggling between modals. Adds support for modal long scrolling. Bump for Preview Release Updates Docs naming issue
chanan · Dec 27, 2021 · fbf1752 · fbf1752
1 parent 018a26c
commit fbf1752
Show file tree

Hide file tree

Showing 41 changed files with 79 additions and 30 deletions.
diff --git a/docs/V5/_content/BlazorStrap/blazorstrap.js b/docs/V5/_content/BlazorStrap/blazorstrap.js
@@ -12,8 +12,10 @@ window.blazorStrap = {
             if (blazorStrap.EventHandlers[id] === undefined) {
                 blazorStrap.EventHandlers[id] = {};
             }
-            blazorStrap.EventHandlers[id][name] = {
-                [type]: {
+            if(blazorStrap.EventHandlers[id][name] === undefined) {
+                blazorStrap.EventHandlers[id][name] = {};
+            }
+            blazorStrap.EventHandlers[id][name][type] = {
                     Callback: function (event) {
                         if (name === "documentDropdown") {
                             let parent = document.querySelector("[data-blazorstrap='" + id + "']");
@@ -41,7 +43,7 @@ window.blazorStrap = {
                         }
                     }
                 }
-            }
+
 
             element.addEventListener(type, blazorStrap.EventHandlers[id][name][type].Callback, false);
             resolve();
@@ -212,6 +214,11 @@ window.blazorStrap = {
             resolve(element.offsetHeight);
         });
     },
+    GetInnerHeight: async function () {
+        return new Promise(function (resolve) {
+            resolve(window.innerHeight);
+        });
+    },
     SetBodyStyle: async function (style, value) {
         return new Promise(function (resolve) {
             document.body.style[style] = value;

diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll b/docs/V5/_framework/BlazorStrap-Docs.dll
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll.br b/docs/V5/_framework/BlazorStrap-Docs.dll.br
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll.gz b/docs/V5/_framework/BlazorStrap-Docs.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap-Docs.pdb.gz b/docs/V5/_framework/BlazorStrap-Docs.pdb.gz
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll b/docs/V5/_framework/BlazorStrap.WASM.dll
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll.br b/docs/V5/_framework/BlazorStrap.WASM.dll.br
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll.gz b/docs/V5/_framework/BlazorStrap.WASM.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap.WASM.pdb.gz b/docs/V5/_framework/BlazorStrap.WASM.pdb.gz
diff --git a/docs/V5/_framework/BlazorStrap.dll b/docs/V5/_framework/BlazorStrap.dll
diff --git a/docs/V5/_framework/BlazorStrap.dll.br b/docs/V5/_framework/BlazorStrap.dll.br
diff --git a/docs/V5/_framework/BlazorStrap.dll.gz b/docs/V5/_framework/BlazorStrap.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap.pdb.gz b/docs/V5/_framework/BlazorStrap.pdb.gz
diff --git a/docs/V5/_framework/System.Console.dll b/docs/V5/_framework/System.Console.dll
diff --git a/docs/V5/_framework/System.Console.dll.br b/docs/V5/_framework/System.Console.dll.br
diff --git a/docs/V5/_framework/System.Console.dll.gz b/docs/V5/_framework/System.Console.dll.gz
diff --git a/docs/V5/_framework/System.Private.CoreLib.dll b/docs/V5/_framework/System.Private.CoreLib.dll
diff --git a/docs/V5/_framework/System.Private.CoreLib.dll.br b/docs/V5/_framework/System.Private.CoreLib.dll.br
diff --git a/docs/V5/_framework/System.Private.CoreLib.dll.gz b/docs/V5/_framework/System.Private.CoreLib.dll.gz
diff --git a/docs/V5/_framework/blazor.boot.json b/docs/V5/_framework/blazor.boot.json
@@ -8,9 +8,9 @@
   "resources": {
     "assembly": {
       "BlazorComponentUtilities.dll": "sha256-UapksNiQg3lu5QM9uVSLyjEuzRH\/7o22fmcmxcLAAeI=",
-      "BlazorStrap-Docs.dll": "sha256-QPsBBm3ID+Ljd1DXCkbxx19xTCFvPARHwxrFFoJWA68=",
-      "BlazorStrap.dll": "sha256-zhaNXMlq591uel9LGwiLg1mg74cxKGP1GaZXWQT95qk=",
-      "BlazorStrap.WASM.dll": "sha256-1Obwaj0xMRDR3w8Fsc+SNIzL+\/0DDD9chAumFXbWLpc=",
+      "BlazorStrap-Docs.dll": "sha256-0OzYgHCvuBU86\/k\/TawVqZ00CqCfpLW3emZ37nqCN3E=",
+      "BlazorStrap.dll": "sha256-oxVqtCugIyTriWvxvKQ1e9Vq\/5v59yJghzbq0zD7aNw=",
+      "BlazorStrap.WASM.dll": "sha256-n4f8T\/vC7ddIJ\/9AohQInkFy2OZyMhiv9hIoJDdE\/kg=",
       "ColorCode.dll": "sha256-hF07ps23in9mbwaN4uSoZklQVfyJIw2Ep4R448bfkOk=",
       "Markdig.dll": "sha256-9\/ICq2gSL+hjhMdZXNoIRs8wyZFtZpr3yFSW+RQVdoQ=",
       "Markdig.SyntaxHighlighting.dll": "sha256-qkuHEt7805bTVSkNsvDi5CT5M3Q4VSK619BHVC+FdKs=",
@@ -38,7 +38,7 @@
       "System.ComponentModel.dll": "sha256-\/eQi+z1IrCQXONcPmrGod6Bu2pAFpr1LGFdW7i52bF8=",
       "System.ComponentModel.Primitives.dll": "sha256-yN2PcPE475CTFMg3wQM4XM+thL3INF\/yOuPJ4uP+ZR4=",
       "System.ComponentModel.TypeConverter.dll": "sha256-+AV0djVTWMh6MsReQpKk4ZMSlQ0MDjWXBy5zISm0o9E=",
-      "System.Console.dll": "sha256-RvZJFwiaFmb5z9G0xtjiaVkeYaNdVk9heydTZXzp2sk=",
+      "System.Console.dll": "sha256-uKoz\/t+y8GAFonO2Bi0okxm4r5F5UJ6m+TRioPnP2ds=",
       "System.Diagnostics.Debug.dll": "sha256-ZN03o0OTamcF8miD4XDkeM6vu4b5Wo+iQRTucJw6hdI=",
       "System.Diagnostics.Tools.dll": "sha256-qlSoBzpCyTcZ7a0UBwVIcqTmG+Zj1ozZhwgt8F4SyY8=",
       "System.dll": "sha256-rFMZGggawTEgR+1\/wxo6rVc33DGl6yRKgeobdnLzUmQ=",
@@ -48,7 +48,7 @@
       "System.Net.Http.dll": "sha256-SG1ErxalwWL+oTNjRbGYkVXkuk1onIlIJTlyaGj\/d44=",
       "System.Net.Primitives.dll": "sha256-3sI1NNIqa\/NbsiwoB9ge3te+b4FnMCiOJO1UBN3PeUA=",
       "System.ObjectModel.dll": "sha256-UG4O9ciL695mY+vsFCa\/RG7XLv2tIXBQF2ChiVBasFE=",
-      "System.Private.CoreLib.dll": "sha256-BssDLPaUB6rCJJ2BEhbhF71aPR\/00S4IiunH18MN0E4=",
+      "System.Private.CoreLib.dll": "sha256-nFwq6vHxCw2w+IyxLLUlsPjz2bmR7dp9eptPj\/txYhY=",
       "System.Private.Runtime.InteropServices.JavaScript.dll": "sha256-C00EjhH1PgivSevy5JGkGQ6O6iWgPnZ6YYi9\/nQBPa4=",
       "System.Private.Uri.dll": "sha256-S5HrTdUD7cIVcEOhVBdvWtQkO2n5w9JKWvt0tJQJHeQ=",
       "System.Resources.ResourceManager.dll": "sha256-gzbrKVMiTK1iPLy43DV1yztdRJ7ai4r7P0dbHJgXLjE=",

diff --git a/docs/V5/_framework/blazor.boot.json.br b/docs/V5/_framework/blazor.boot.json.br
diff --git a/docs/V5/_framework/blazor.boot.json.gz b/docs/V5/_framework/blazor.boot.json.gz
diff --git a/docs/V5/docs/Samples/Components/Carousel/Carousel8.md b/docs/V5/docs/Samples/Components/Carousel/Carousel8.md
@@ -17,7 +17,7 @@
             <p>Some representative placeholder content for the second slide.</p>
         </BSCarouselCaption>
     </BSCarouselItem>
-    <BSCarouselItem>
+    <BSCarouselItem Interval="0">
         <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false">
             <rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="50%" y="50%" fill="#999" dy=".3em">Third slide</text>
         </svg>

diff --git a/docs/V5/docs/Samples/Components/Modal/Modal3.md b/docs/V5/docs/Samples/Components/Modal/Modal3.md
@@ -1 +1,11 @@
-<!-- Not yet Supported -->
+<BSModal DataId="modal3" >
+    <Header>Modal Title</Header>
+    <Content>
+        <p style="min-height:1200px;">This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+    </Content>
+    <Footer Context="modal">
+        <BSButton MarginStart="Margins.Auto" Color="BSColor.Secondary" @onclick="modal.HideAsync">Close</BSButton>
+        <BSButton Color="BSColor.Primary">Understood</BSButton>
+    </Footer>
+</BSModal>
+<BSButton Color="BSColor.Primary" Target="modal3">Launch demo modal</BSButton>
diff --git a/docs/V5/docs/Samples/Components/Modal/Modal7.md b/docs/V5/docs/Samples/Components/Modal/Modal7.md
@@ -5,7 +5,7 @@
         <BSButton MarginStart="Margins.Auto" Color="BSColor.Secondary" Target="modal7b">Open second modal</BSButton>
     </Footer>
 </BSModal>
-<BSModal id="modal7b" IsCentered="true">
+<BSModal DataId="modal7b" IsCentered="true">
     <Header>Modal 2</Header>
     <Content>Hide this modal and show the first with the button below.</Content>
     <Footer>

diff --git a/docs/V5/docs/Static/Components/ListGroup.md → docs/V5/docs/Static/Components/Listgroup.md b/docs/V5/docs/Static/Components/ListGroup.md → docs/V5/docs/Static/Components/Listgroup.md
diff --git a/docs/V5/docs/Static/Forms/FormControls.md → docs/V5/docs/Static/Forms/Formcontrols.md b/docs/V5/docs/Static/Forms/FormControls.md → docs/V5/docs/Static/Forms/Formcontrols.md
diff --git a/docs/V5/docs/Static/Forms/InputFile.md → docs/V5/docs/Static/Forms/Inputfile.md b/docs/V5/docs/Static/Forms/InputFile.md → docs/V5/docs/Static/Forms/Inputfile.md
diff --git a/docs/V5/docs/Static/Forms/InputGroup.md → docs/V5/docs/Static/Forms/Inputgroup.md b/docs/V5/docs/Static/Forms/InputGroup.md → docs/V5/docs/Static/Forms/Inputgroup.md
diff --git a/src/BlazorStrap-Docs/Samples/Components/Carousel/Carousel8.razor b/src/BlazorStrap-Docs/Samples/Components/Carousel/Carousel8.razor
@@ -17,7 +17,7 @@
             <p>Some representative placeholder content for the second slide.</p>
         </BSCarouselCaption>
     </BSCarouselItem>
-    <BSCarouselItem>
+    <BSCarouselItem Interval="0">
         <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false">
             <rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="50%" y="50%" fill="#999" dy=".3em">Third slide</text>
         </svg>

diff --git a/src/BlazorStrap-Docs/Samples/Components/Modal/Modal3.razor b/src/BlazorStrap-Docs/Samples/Components/Modal/Modal3.razor
@@ -1 +1,11 @@
-<!-- Not yet Supported -->
+<BSModal DataId="modal3" >
+    <Header>Modal Title</Header>
+    <Content>
+        <p style="min-height:1200px;">This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+    </Content>
+    <Footer Context="modal">
+        <BSButton MarginStart="Margins.Auto" Color="BSColor.Secondary" @onclick="modal.HideAsync">Close</BSButton>
+        <BSButton Color="BSColor.Primary">Understood</BSButton>
+    </Footer>
+</BSModal>
+<BSButton Color="BSColor.Primary" Target="modal3">Launch demo modal</BSButton>
diff --git a/src/BlazorStrap-Docs/Samples/Components/Modal/Modal7.razor b/src/BlazorStrap-Docs/Samples/Components/Modal/Modal7.razor
@@ -5,7 +5,7 @@
         <BSButton MarginStart="Margins.Auto" Color="BSColor.Secondary" Target="modal7b">Open second modal</BSButton>
     </Footer>
 </BSModal>
-<BSModal id="modal7b" IsCentered="true">
+<BSModal DataId="modal7b" IsCentered="true">
     <Header>Modal 2</Header>
     <Content>Hide this modal and show the first with the button below.</Content>
     <Footer>

diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/Components/Carousel/Carousel8.md b/src/BlazorStrap-Docs/wwwroot/Samples/Components/Carousel/Carousel8.md
@@ -17,7 +17,7 @@
             <p>Some representative placeholder content for the second slide.</p>
         </BSCarouselCaption>
     </BSCarouselItem>
-    <BSCarouselItem>
+    <BSCarouselItem Interval="0">
         <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false">
             <rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="50%" y="50%" fill="#999" dy=".3em">Third slide</text>
         </svg>

diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/Components/Modal/Modal3.md b/src/BlazorStrap-Docs/wwwroot/Samples/Components/Modal/Modal3.md
@@ -1 +1,11 @@
-<!-- Not yet Supported -->
+<BSModal DataId="modal3" >
+    <Header>Modal Title</Header>
+    <Content>
+        <p style="min-height:1200px;">This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+    </Content>
+    <Footer Context="modal">
+        <BSButton MarginStart="Margins.Auto" Color="BSColor.Secondary" @onclick="modal.HideAsync">Close</BSButton>
+        <BSButton Color="BSColor.Primary">Understood</BSButton>
+    </Footer>
+</BSModal>
+<BSButton Color="BSColor.Primary" Target="modal3">Launch demo modal</BSButton>
diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/Components/Modal/Modal7.md b/src/BlazorStrap-Docs/wwwroot/Samples/Components/Modal/Modal7.md
@@ -5,7 +5,7 @@
         <BSButton MarginStart="Margins.Auto" Color="BSColor.Secondary" Target="modal7b">Open second modal</BSButton>
     </Footer>
 </BSModal>
-<BSModal id="modal7b" IsCentered="true">
+<BSModal DataId="modal7b" IsCentered="true">
     <Header>Modal 2</Header>
     <Content>Hide this modal and show the first with the button below.</Content>
     <Footer>

diff --git a/...Docs/wwwroot/Static/Forms/FormControls.md → ...Docs/wwwroot/Static/Forms/Formcontrols.md b/...Docs/wwwroot/Static/Forms/FormControls.md → ...Docs/wwwroot/Static/Forms/Formcontrols.md
diff --git a/src/BlazorStrap/BlazorStrap.csproj b/src/BlazorStrap/BlazorStrap.csproj
@@ -14,6 +14,7 @@
 		<PackageProjectUrl>https://blazorstrap.io/</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/chanan/BlazorStrap</RepositoryUrl>
 		<RootNamespace>BlazorStrap</RootNamespace>
+		<PackageVersion>5.0.000-Preview-1</PackageVersion>
 	</PropertyGroup>
 
 	<ItemGroup>

diff --git a/src/BlazorStrap/Components/BootstrapComponents/BSAccordionItem.razor.cs b/src/BlazorStrap/Components/BootstrapComponents/BSAccordionItem.razor.cs
@@ -108,7 +108,6 @@ private async Task TransitionEndAsync()
                 await Js.InvokeVoidAsync("blazorStrap.AddClass", MyRef, "show");
             }
             Shown = !Shown;
-            Console.WriteLine(Shown);
             await InvokeAsync(StateHasChanged);
         }
 

diff --git a/src/BlazorStrap/Components/BootstrapComponents/BSModal.razor.cs b/src/BlazorStrap/Components/BootstrapComponents/BSModal.razor.cs
@@ -79,7 +79,6 @@ public async Task HideAsync()
             {
                 if (!_leaveBodyAlone)
                 {
-                    _leaveBodyAlone = false;
                     await Js.InvokeVoidAsync("blazorStrap.RemoveBodyClass", "modal-open");
                     await Js.InvokeVoidAsync("blazorStrap.SetBodyStyle", "overflow", "");
                     await Js.InvokeVoidAsync("blazorStrap.SetBodyStyle", "paddingRight", "");
@@ -94,6 +93,7 @@ public async Task HideAsync()
                     await TransitionEndAsync();
                 }
             }
+            _leaveBodyAlone = false;
         }
 
         public async Task ShowAsync()
@@ -113,10 +113,17 @@ public async Task ShowAsync()
 
                 if (!AllowScroll)
                 {
+
                     var scrollWidth = await Js.InvokeAsync<int>("blazorStrap.GetScrollBarWidth");
-                    await Js.InvokeVoidAsync("blazorStrap.SetBodyStyle", "overflow", "hidden");
-                    if (scrollWidth != 0)
-                        await Js.InvokeVoidAsync("blazorStrap.SetBodyStyle", "paddingRight", $"{scrollWidth}px");
+                    var viewportheight = await Js.InvokeAsync<int>("blazorStrap.GetInnerHeight");
+                    var peakHeight = await Js.InvokeAsync<int>("blazorStrap.PeakHeight", MyRef);
+
+                    if (viewportheight > peakHeight)
+                    {
+                        await Js.InvokeVoidAsync("blazorStrap.SetBodyStyle", "overflow", "hidden");
+                        if (scrollWidth != 0)
+                            await Js.InvokeVoidAsync("blazorStrap.SetBodyStyle", "paddingRight", $"{scrollWidth}px");
+                    }
                 }
             }
             BlazorStrapService.ModalChanged(this);
@@ -220,14 +227,13 @@ private async void OnModalChange(BSModal? model, bool fromJs)
                 }
 
                 if (_shown)
-                    await ToggleAsync();
+                    await HideAsync();
                 return;
             }
-
             if (model == this || !_shown) return;
             _leaveBodyAlone = true;
-            await Task.Delay(50);
-            await ToggleAsync();
+            if(_shown)
+            await HideAsync();
         }
 
         public async ValueTask DisposeAsync()

diff --git a/src/BlazorStrap/Components/Forms/BSInputFile.cs b/src/BlazorStrap/Components/Forms/BSInputFile.cs
@@ -82,7 +82,6 @@ private async Task OnFileChange(InputFileChangeEventArgs e)
 
             if (EditContext is not null)
             {
-                Console.WriteLine(FieldIdentifier.FieldName);
                 EditContext.NotifyFieldChanged(FieldIdentifier);
                 EditContext.NotifyValidationStateChanged();
             }

diff --git a/src/BlazorStrap/wwwroot/blazorstrap.js b/src/BlazorStrap/wwwroot/blazorstrap.js
@@ -12,8 +12,10 @@ window.blazorStrap = {
             if (blazorStrap.EventHandlers[id] === undefined) {
                 blazorStrap.EventHandlers[id] = {};
             }
-            blazorStrap.EventHandlers[id][name] = {
-                [type]: {
+            if(blazorStrap.EventHandlers[id][name] === undefined) {
+                blazorStrap.EventHandlers[id][name] = {};
+            }
+            blazorStrap.EventHandlers[id][name][type] = {
                     Callback: function (event) {
                         if (name === "documentDropdown") {
                             let parent = document.querySelector("[data-blazorstrap='" + id + "']");
@@ -41,7 +43,7 @@ window.blazorStrap = {
                         }
                     }
                 }
-            }
+
 
             element.addEventListener(type, blazorStrap.EventHandlers[id][name][type].Callback, false);
             resolve();
@@ -212,6 +214,11 @@ window.blazorStrap = {
             resolve(element.offsetHeight);
         });
     },
+    GetInnerHeight: async function () {
+        return new Promise(function (resolve) {
+            resolve(window.innerHeight);
+        });
+    },
     SetBodyStyle: async function (style, value) {
         return new Promise(function (resolve) {
             document.body.style[style] = value;