From b686fd5285ccc0af450e1f7db90d1c883441d36d Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 18 Mar 2022 16:56:30 +0100
Subject: [PATCH] add blur when several modals are opened

---
 src/core/Resources/assets/css/admin.scss      |  4 +++
 src/core/Resources/assets/js/modules/modal.js | 32 +++++++++++++++----
 .../views/file_manager/info.html.twig         |  4 +--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index fcc9cc1..a054ff8 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -540,6 +540,10 @@ form {
     margin-right: auto;
 }
 
+.modal.show.blur {
+    filter: blur(4px);
+}
+
 .output {
     &-console {
         background: #073642;
diff --git a/src/core/Resources/assets/js/modules/modal.js b/src/core/Resources/assets/js/modules/modal.js
index 6609b00..adb57ef 100644
--- a/src/core/Resources/assets/js/modules/modal.js
+++ b/src/core/Resources/assets/js/modules/modal.js
@@ -9,10 +9,10 @@ const openModal = function (url, createModal) {
 
   let container = $(`#${id}`)
   const body = $('body')
-  let doTrigger = true
+  const doTrigger = true
 
   if (!container.length) {
-    let doTrigger = false
+    const doTrigger = false
     container = $(`<div id="${id}" class="modal">`)
 
     body.append(container)
@@ -30,19 +30,39 @@ const openModal = function (url, createModal) {
     loader.remove()
 
     if (doTrigger) {
-       container.trigger('shown.bs.modal')
+      container.trigger('shown.bs.modal')
     }
   })
 }
 
+const onShownAndHide = () => {
+  $('.modal-backdrop.show').each((key, value) => {
+    if (key) {
+      $(value).remove()
+    }
+  })
+
+  const modals = $('.modal.show')
+
+  modals.each((key, value) => {
+    value.classList.toggle('blur', (key + 1) < modals.length)
+  })
+}
+
 module.exports = function () {
   let click = 0
   const body = $('body')
 
+  body.on('shown.bs.modal', '.modal', onShownAndHide)
+
   body.on('hidden.bs.modal', '.modal', (e) => {
+    $(e.target).remove()
+
     if ($('.modal.show').length) {
       $('body').addClass('modal-open')
     }
+
+    onShownAndHide()
   })
 
   body.on('click', '*[data-modal]', (e) => {
@@ -60,9 +80,9 @@ module.exports = function () {
 
       click = 0
 
-      let element = $(e.target).is('[data-modal]') ? $(e.target) : $(e.target).parents('*[data-modal]').first()
-      let url = element.attr('data-modal')
-      let createModal = element.is('[data-modal-create]')
+      const element = $(e.target).is('[data-modal]') ? $(e.target) : $(e.target).parents('*[data-modal]').first()
+      const url = element.attr('data-modal')
+      const createModal = element.is('[data-modal-create]')
 
       openModal(url, createModal)
     }, 250)
diff --git a/src/core/Resources/views/file_manager/info.html.twig b/src/core/Resources/views/file_manager/info.html.twig
index 816896f..eefadfe 100644
--- a/src/core/Resources/views/file_manager/info.html.twig
+++ b/src/core/Resources/views/file_manager/info.html.twig
@@ -134,11 +134,11 @@
             {% if context == 'tinymce' %}
                 {% if not isLocked %}
                     {% if splInfo.isDir %}
-                        <button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_directory_rename', {file: splInfo.relativePathname, ajax: ajax}) }}">
+                        <button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_directory_rename', {file: splInfo.relativePathname, ajax: ajax}) }}" data-modal-create>
                             {{ 'Rename'|trans }}
                         </button>
                     {% else %}
-                        <button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_file_rename', {file: splInfo.relativePathname, ajax: ajax}) }}">
+                        <button form="form-file-delete" class="btn btn-sm btn-primary" data-modal="{{ path('admin_file_manager_file_rename', {file: splInfo.relativePathname, ajax: ajax}) }}" data-modal-create>
                             {{ 'Rename'|trans }}
                         </button>
                     {% endif %}