IBX-10555: Added blured loader for modal

Author: OstafinL

src/bundle/Resources/public/js/scripts/helpers/modal.helper.js

@@ -50,4 +50,54 @@ const controlManyZIndexes = (items, listenerContainer) => {
     };
 };
 
-export { controlZIndex, controlManyZIndexes };
+const showModalLoader = ({ headerText, descriptionText, modalNode }) => {
+    if (!modalNode) {
+        return;
+    }
+
+    const modalDialog = modalNode.querySelector('.modal-dialog');
+    const headerNode = modalNode.querySelector('.modal-header');
+    const loaderNode = modalNode.querySelector('.ibexa-modal__loader');
+    const headerRect = headerNode ? headerNode.getBoundingClientRect() : { height: 0 };
+    const dialogRect = modalDialog.getBoundingClientRect();
+    const { height: dialogHeight, width: dialogWidth } = dialogRect;
+    const { height: headerHeight } = headerRect;
+
+    loaderNode.style.height = `${dialogHeight - headerHeight}px`;
+    loaderNode.style.width = `${dialogWidth}px`;
+    loaderNode.style.top = `${headerHeight}px`;
+
+    if (headerText) {
+        const headerTextNode = modalNode.querySelector('.ibexa-modal__loader-header-text');
+
+        headerTextNode.innerText = headerText;
+    }
+
+    if (descriptionText) {
+        const descriptionTextNode = modalNode.querySelector('.ibexa-modal__loader-description-text');
+
+        descriptionTextNode.innerText = descriptionText;
+    }
+
+    modalNode.classList.add('ibexa-modal--with-blurred-loader');
+};
+
+const hideModalLoader = ({ modalNode }) => {
+    if (!modalNode) {
+        return;
+    }
+
+    const headerTextNode = modalNode.querySelector('.ibexa-modal__loader-header-text');
+    const descriptionTextNode = modalNode.querySelector('.ibexa-modal__loader-description-text');
+
+    headerTextNode.innerText = '';
+    descriptionTextNode.innerText = '';
+
+    modalNode.classList.remove('ibexa-modal--with-blurred-loader');
+};
+
+document.body.addEventListener('hidden.bs.modal', (event) => {
+    hideModalLoader({ modalNode: event.target });
+});
+
+export { controlZIndex, controlManyZIndexes, showModalLoader, hideModalLoader };

src/bundle/Resources/public/scss/_modals.scss

@@ -46,6 +46,38 @@
         @include modal-footer();
     }
 
+    &__loader {
+        position: absolute;
+        left: 0;
+        z-index: 1;
+        display: none;
+        backdrop-filter: blur(8px);
+        pointer-events: none;
+        border-radius: 0 0 $ibexa-border-radius $ibexa-border-radius;
+    }
+
+    &__loader-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__loader-header-text:not(:empty) {
+        margin-top: calculateRem(24px);
+        font-weight: bold;
+    }
+
+    &__loader-description-text:not(:empty) {
+        margin-top: calculateRem(8px);
+    }
+
+    &__loader-spinner {
+        @include spinner(calculateRem(48px), calculateRem(6px), $ibexa-color-primary);
+    }
+
+    &__loader-header-text {
+    }
+
     &--no-header {
         .close {
             @include close-button();
@@ -96,4 +128,12 @@
             }
         }
     }
+
+    &--with-blurred-loader {
+        .ibexa-modal__loader {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
 }

src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig

@@ -96,6 +96,13 @@
                         {% endif %}
                     {% endblock %}
                     {% block body %}
+                        <div class="ibexa-modal__loader">
+                            <div class="ibexa-modal__loader-content">
+                                <div class="ibexa-modal__loader-spinner"></div>
+                                <div class="ibexa-modal__loader-header-text"></div>
+                                <div class="ibexa-modal__loader-description-text"></div>
+                            </div>
+                        </div>
                         {% if block('body_content') is defined %}
                             <div class="modal-body">
                                 {{ block('body_content') }}