Fix issues caused by upgrade to Bootstrap v5

Fixes #54.
EtchUK · Jan 20, 2023 · 0285d66 · 0285d66
1 parent 2cb47d0
commit 0285d66
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/Assets/Scripts/admin/components/galleryEditor/sources/helpers/modal.ts b/Assets/Scripts/admin/components/galleryEditor/sources/helpers/modal.ts
@@ -1,3 +1,4 @@
+import bootstrap from 'bootstrap';
 import selectors from './selectors';
 
 export interface IShowModalOptions {
@@ -7,16 +8,16 @@ export interface IShowModalOptions {
     onComplete: () => Promise<boolean>;
 }
 
-export const hide = (modal: JQuery<HTMLElement> | null) => {
+export const hide = (modal: bootstrap.Modal | null) => {
     if (modal !== null) {
-        modal.modal('hide');
+        modal.hide();
     }
 };
 
 export const show = ($modal: JQuery, options: IShowModalOptions) => {
     const $cancelButtons = $modal.find(selectors.modalCancelButton);
     const $okButton = $modal.find(selectors.modalSubmitButton).first();
-    let modal: JQuery<HTMLElement> | null = null;
+    const modal = new bootstrap.Modal($modal[0]);
 
     $modal.find(selectors.modalDialog).removeClass('media-modal');
 
@@ -26,22 +27,21 @@ export const show = ($modal: JQuery, options: IShowModalOptions) => {
     $cancelButtons.each((index: number) => {
         const $cancelButton = $($cancelButtons[index]);
         $cancelButton.off('click').on('click', () => {
-            hide(modal);
+            modal.hide();
         });
     });
 
     $okButton.off('click').on('click', () => {
         if (!options.onComplete) {
-            hide(modal);
+            modal.hide();
         }
 
         options.onComplete().then((isSuccess: boolean) => {
             if (isSuccess) {
-                hide(modal);
+                modal.hide();
             }
         });
     });
 
-    $modal.show();
-    modal = $modal.modal();
+    modal.show();
 };
diff --git a/Assets/Scripts/admin/components/galleryEditor/sources/helpers/selectors.ts b/Assets/Scripts/admin/components/galleryEditor/sources/helpers/selectors.ts
@@ -1,8 +1,8 @@
 export default {
     mediaApp: '#mediaApp',
     modalBody: '.modal-body',
-    modalCancelButton: 'button[data-dismiss="modal"]',
+    modalCancelButton: 'button[data-bs-dismiss="modal"]',
     modalDialog: '.modal-dialog',
-    modalSubmitButton: 'button[data-accept="modal"]',
+    modalSubmitButton: 'button[data-bs-accept="modal"]',
     modalTitle: '.modal-title',
 };
diff --git a/Assets/Scripts/admin/components/galleryEditor/sources/mediaPicker/index.ts b/Assets/Scripts/admin/components/galleryEditor/sources/mediaPicker/index.ts
@@ -1,3 +1,4 @@
+import bootstrap from 'bootstrap';
 import {
     EnumGalleryItemType,
     GalleryItemType,
@@ -32,12 +33,17 @@ export default (id: string): IGallerySource => {
 
         $(selectors.mediaApp).show();
 
-        const modal = $modal.modal();
+        const modal = new bootstrap.Modal($modal[0]);
+        modal.show();
+
+        window.console.log($modal.find(selectors.modalSubmitButton));
 
         $modal
             .find(selectors.modalSubmitButton)
             .off('click')
             .on('click', async () => {
+                window.console.log('here?!?');
+
                 if (window.mediaApp.selectedMedias.length) {
                     let items: IGalleryItem[] = [];
                     let isValidImage = true;
@@ -72,7 +78,7 @@ export default (id: string): IGallerySource => {
 
                 window.mediaApp.selectedMedias = [];
 
-                modal.modal('hide');
+                modal.hide();
                 return true;
             });
     };

diff --git a/Views/GalleryPart.Edit.cshtml b/Views/GalleryPart.Edit.cshtml
@@ -1,4 +1,5 @@
-@using Etch.OrchardCore.Gallery.ViewModels;
+@using Etch.OrchardCore.Gallery.ViewModels;
+
 @model GalleryPartEditViewModel
 
 <script asp-src="~/OrchardCore.Media/Scripts/media.js" asp-name="media" at="Foot" depends-on="admin, vuejs, sortable, vuedraggable, jQuery-ui"></script>
@@ -11,13 +12,13 @@
     initializeGalleryEditor(document.getElementById('@Html.IdFor(m => m)'));
 </script>
 
-<fieldset class="form-group gallery" id="@Html.IdFor(m => m)" data-for="@Html.IdFor(m => m.MediaItems)">
-    <div class="btn-group form-group">
-        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<fieldset class="mb-3 pt-3 gallery" id="@Html.IdFor(m => m)" data-for="@Html.IdFor(m => m.MediaItems)">
+    <div class="btn-group mb-3">
+        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Add Media
         </button>
 
-        <div class="dropdown-menu">
+        <div class="dropdown-menu mb-3">
             <button type="button" class="dropdown-item btn-sm" v-for="source in sources" v-on:click="action(source)">{{source.label}}</button>
         </div>
     </div>
@@ -45,18 +46,16 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title"></h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
 
                 <div class="modal-body"></div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-primary js-modal-ok" data-accept="modal">@T["OK"]</button>
-                    <button type="button" class="btn btn-secondary js-modal-cancel" data-dismiss="modal">@T["Cancel"]</button>
+                    <button type="button" class="btn btn-primary js-modal-ok" data-bs-accept="modal">@T["OK"]</button>
+                    <button type="button" class="btn btn-secondary js-modal-cancel" data-bs-dismiss="modal">@T["Cancel"]</button>
                 </div>
             </div>
         </div>
     </div>
-</fieldset>
+</fieldset>