Confirmation Window Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require aldaflux/confirmation-window-bundle
   

   Enable the bundle in config/bundles.php:

   Aldaflux\ConfirmationWindowBundle\AldafluxConfirmationWindowBundle::class => ['all' => true],
   

2. Basic Configuration Update aldaflux_confirmation_window.yaml (Symfony) or aldaflux_confirmation_window.php (Laravel port equivalent) with a template (e.g., bootstrap4):

   aldaflux_confirmation_window:
       template: bootstrap4
       delete: true  # Enable for delete actions
   

3. First Use Case Add a confirmation trigger to a link in Twig:

   <a href="{{ path('delete_item', {'id': item.id}) }}" class="delete-link">Delete</a>
   

   Ensure the link has a class matching your config (e.g., delete for delete: true).

Implementation Patterns

Workflow Integration

1. Link-Based Triggers

   • Use predefined classes (delete, customs.*) to auto-attach confirmation windows.
   • Example for a custom action:

     <a href="{{ path('publish_post') }}" class="modif">Publish</a>
     

     Configure in customs.modify with a title and selector.

2. Dynamic Titles/Buttons Override titles/buttons via JavaScript or Twig:

   <script>
       document.addEventListener('confirmationInit', function(e) {
           if (e.detail.selector === '.modif') {
               e.detail.title = "Are you sure?";
           }
       });
   </script>
   

3. Alerts for Non-Destructive Actions Use the alerts section for non-link confirmations (e.g., form submissions):

   alerts:
       alert:
           selector: ".submit-form"
           title: "Confirm submission?"
   

   Trigger via JavaScript:

   document.querySelector('.submit-form').addEventListener('click', () => {
       window.confirmationWindow.show('.submit-form');
   });
   

4. Laravel Blade Adaptation

   • Replace Twig classes with Blade directives (e.g., @confirmationLink).
   • Example:

     @confirmationLink('delete_item', ['id' => $item->id], 'Delete', 'delete')
     

Gotchas and Tips

Pitfalls

1. Selector Specificity

   • Overlapping selectors (e.g., .modif vs .modif2) may cause unintended triggers. Use unique classes or IDs.

2. Template Mismatches

   • The bootstrap4 template assumes Bootstrap CSS. For custom templates, ensure the JS matches the HTML structure.

3. Event Conflicts

   • If using delete: true, ensure no other JS handlers interfere with the confirmation dialog’s preventDefault().

4. Symfony vs. Laravel Porting

   • The bundle is Symfony-native. For Laravel, expect to:
     • Manually register the JS/CSS assets in resources/views/vendor/aldaflux/confirmation-window.blade.php.
     • Override the aldaflux_confirmation_window.php config file in config/aldaflux.php.

Debugging

1. Check Console Logs Look for errors like Uncaught ReferenceError: confirmationWindow is not defined (missing JS load).

2. Verify Selectors Use browser dev tools to confirm selectors (e.g., .delete-link) match the config.

3. Fallback for Missing JS Add a no-JS fallback in Twig/Blade:

   {% if app.request.isXmlHttpRequest %}
       <a href="{{ path('delete_item') }}" class="delete-link no-js-fallback">Delete</a>
   {% else %}
       <form method="post" action="{{ path('delete_item') }}">
           {{ csrf_field() }}
           <button type="submit" class="delete-link">Delete</button>
       </form>
   {% endif %}
   

Extension Points

1. Custom Templates Extend the default template by copying vendor/aldaflux/confirmation-window-bundle/Resources/views/confirmation_window.html.twig to your theme and overriding it.

2. Dynamic Configuration Load config via PHP for runtime changes:

   # config/aldaflux.php
   'customs' => [
       'modify' => [
           'title' => env('CONFIRM_MODIFY_TITLE', 'Default Title'),
       ],
   ],
   

3. Event Listeners Hook into the confirmation.window.init event (if the bundle emits it) to modify behavior dynamically:

   document.addEventListener('confirmation.window.init', (e) => {
       e.detail.options.class = 'custom-class';
   });