templates/bundles/SyliusAdminBundle/Script/_confirmation_modals.html.twig line 1

Open in your IDE?
  1. <script>
  2. /**
  3.  * Global confirmation modal handler
  4.  */
  5. (function() {
  6.     'use strict';
  8.     // Initialize confirmation modals when DOM is ready
  9.     document.addEventListener('DOMContentLoaded', function() {
  10.         initializeConfirmationModals();
  11.     });
  13.     function initializeConfirmationModals() {
  14.         // Handle buttons with data-confirm attribute
  15.         document.querySelectorAll('[data-confirm]').forEach(function(button) {
  16.             button.addEventListener('click', function(e) {
  17.                 e.preventDefault();
  18.                 showConfirmationModal(
  19.                     this.getAttribute('data-confirm') || 'Are you sure?',
  20.                     function() {
  21.                         // If it's a form submit
  22.                         if (button.type === 'submit' && button.closest('form')) {
  23.                             button.closest('form').submit();
  24.                         }
  25.                         // If it's a link
  26.                         else if (button.tagName === 'A' && button.href) {
  27.                             window.location.href = button.href;
  28.                         }
  29.                         // If it's a button with form action
  30.                         else if (button.closest('form')) {
  31.                             button.closest('form').submit();
  32.                         }
  33.                     }
  34.                 );
  35.             });
  36.         });
  37.     }
  39.     function showConfirmationModal(message, onConfirm) {
  40.         // Create modal HTML
  41.         const modalHtml = `
  42.             <div class="ui small basic modal confirmation-modal">
  43.                 <div class="ui icon header">
  44.                     <i class="warning sign icon"></i>
  45.                     {{ 'sylius.ui.confirm_your_action'|trans }}
  46.                 </div>
  47.                 <div class="content">
  48.                     <p>${message}</p>
  49.                 </div>
  50.                 <div class="actions">
  51.                     <div class="ui red basic cancel inverted button">
  52.                         <i class="remove icon"></i>
  53.                         {{ 'sylius.ui.no_label'|trans }}
  54.                     </div>
  55.                     <div class="ui green ok inverted button confirm-action-btn">
  56.                         <i class="checkmark icon"></i>
  57.                         {{ 'sylius.ui.yes_label'|trans }}
  58.                     </div>
  59.                 </div>
  60.             </div>
  61.         `;
  63.         // Add modal to body
  64.         document.body.insertAdjacentHTML('beforeend', modalHtml);
  65.         const modal = document.querySelector('.confirmation-modal');
  67.         // Handle confirmation
  68.         modal.querySelector('.confirm-action-btn').addEventListener('click', function() {
  69.             onConfirm();
  70.             $(modal).modal('hide');
  71.             // Remove modal from DOM after hiding
  72.             setTimeout(function() {
  73.                 modal.remove();
  74.             }, 300);
  75.         });
  77.         // Show modal
  78.         $(modal).modal('show');
  80.         // Remove modal from DOM when hidden
  81.         $(modal).on('hidden.bs.modal', function() {
  82.             modal.remove();
  83.         });
  84.     }
  86.     // Make functions globally available
  87.     window.ConfirmationModals = {
  88.         show: showConfirmationModal,
  89.         init: initializeConfirmationModals
  90.     };
  91. })();
  92. </script>