#708 Fix/modal (#278)

* [#528] Improved plan template popup * [#528] Fixes according to PR review * [#708] Fixed modal functionality
maykinmedia · Jun 22, 2022 · 0c60176 · 0c60176
1 parent 392c8f8
commit 0c60176
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/src/open_inwoner/js/components/accessibility/help_modal.js b/src/open_inwoner/js/components/accessibility/help_modal.js
@@ -14,7 +14,8 @@ class HelpModal {
     const modal = new Modal(modalId)
     modal.setTitle(this.modal.dataset.helpTitle)
     modal.setText(this.modal.dataset.helpText)
-    modal.setConfirm(this.modal.dataset.helpClose, (close) => {
+    modal.setClose(this.modal.dataset.helpClose)
+    modal.setModalClosedCallback(() => {
       this.helpButton.classList.remove('accessibility-header__modal--highlight')
     })
     modal.show()

diff --git a/src/open_inwoner/js/components/modal/index.js b/src/open_inwoner/js/components/modal/index.js
@@ -6,17 +6,47 @@ export default class Modal {
     this.actions = this.node.querySelector('.modal__actions')
     this.close = this.node.querySelector('.modal__close')
     this.confirm = this.node.querySelector('.modal__confirm')
+    this.closeTitle = this.node.querySelector('.modal__close-title')
 
+    // This is for the prefilled modals so they will not be emptied
+    if (!this.node.classList.contains('modal--no-reset')) {
+      this.reset()
+    }
+    this.setListeners()
+  }
+
+  reset() {
+    this.modalClosedCallback = null
+    this.setTitle('')
+    this.setText('')
+    if (this.confirm) {
+      this.setConfirm('')
+      this.confirm.className = 'button modal__button modal__confirm'
+    }
+    if (this.close) {
+      this.setClose('')
+      this.close.className = 'button modal__button modal__close'
+    }
+  }
+
+  setListeners() {
     this.node.addEventListener('click', (event) => {
-      if (!event.target.closest('.modal__container')) {
-        this.hide()
-      }
+      event.preventDefault()
+      this.hide()
     })
 
-    this.close.addEventListener('click', () => {
+    this.close.addEventListener('click', (event) => {
+      event.preventDefault()
+
       this.hide()
     })
 
+    if (this.closeTitle) {
+      this.closeTitle.addEventListener('click', () => {
+        this.hide()
+      })
+    }
+
     document.addEventListener('keydown', (event) => {
       if (event.code === 'Escape') {
         this.hide()
@@ -39,20 +69,25 @@ export default class Modal {
 
   setConfirm(text, callback, className = 'button--primary') {
     this.confirm.innerText = text
-    this.confirm.addEventListener('click', (event) => {
+    this.confirm.onclick = (event) => {
       callback(event)
       this.hide()
-    })
+    }
     this.confirm.classList.add(className)
   }
 
+  setModalClosedCallback(callback) {
+    this.modalClosedCallback = callback
+  }
+
   show() {
     this.node.classList.add('modal--open')
-    document.body.style.overflow = 'hidden'
   }
 
   hide() {
     this.node.classList.remove('modal--open')
-    document.body.style.overflow = 'visible'
+    if (this.modalClosedCallback) {
+      this.modalClosedCallback()
+    }
   }
 }
diff --git a/src/open_inwoner/scss/components/modal/_modal.scss b/src/open_inwoner/scss/components/modal/_modal.scss
@@ -63,4 +63,9 @@
   &__button:empty {
     display: none;
   }
+
+  *[class*='icon'],
+  *[class*='Icon'] {
+    font-size: var(--font-size-heading-2);
+  }
 }
diff --git a/src/open_inwoner/templates/pages/plans/create.html b/src/open_inwoner/templates/pages/plans/create.html
@@ -44,9 +44,11 @@ <h1 class="h1">{% trans "Samenwerken" %}</h1>
                                 {% icon icon="visibility" outlined=True %}
                             </div>
                         </div>
-                        <div class="modal" id="template-{{ plan_template.id }}">
+                        <div class="modal modal--no-reset" id="template-{{ plan_template.id }}">
                             <div class="modal__container">
-                                <h2 class="modal__title" id="modal__title">{{ plan_template.name }}</h2>
+                                <h2 class="h2 modal__title" id="modal__title">{{ plan_template.name }}
+                                    {% button text=_("Sluiten") hide_text=True icon="close" extra_classes="modal__button modal__close-title" %}
+                                </h2>
                                 <div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>
                                 <div class="modal__actions modal__actions--align-right" id="modal__actions">
                                     {% spaceless %}