Commit 332b6aec authored by Mark Quirvien Cristobal's avatar Mark Quirvien Cristobal
Browse files

Bug fixes and readme updates 

- Issue #3256345: Add example of altering existing modal links to ReadMe
- Issue #3263028: How should I specify footer buttons?
- Create test module
- Fix issue on footer rendering
- Fix issue on ajax modal close
- Fix custom button rendering
parent 25269b23

README.md

+60 −0
Original line number Diff line number Diff line
@@ -31,6 +31,66 @@ No special configuration needed. 
</a>

```



## Buttons from dialog options

```twig

<a

  class="use-ajax"

  data-dialog-options="{&quot;dialogClasses&quot;:&quot;modal-dialog-centered&quot;,&quot;dialogShowHeader&quot;:false,&quot;buttons&quot;:[{&quot;text&quot;:&quot;Test&quot;}]}"

  data-dialog-type="bootstrap4_modal"

  href="[some-links]"

>

  Open in Bootstrap 4 Modal with buttons

</a>

```



## Buttons from form actions

All the buttons inside form #type "actions" will be added to the footer automatically.

```twig

...

$form['actions']['#type'] = 'actions';

$form['actions']['submit'] = [

  '#type' => 'submit',

  '#value' => t('Save'),

];

...

```

Give the form a route so we can link it to our ajax link

```twig

...

test_module.test_bootstrap4_modal_footer_buttons:

  path: '/test-modal-form'

  defaults:

    _form: 'Drupal\test_module\Form\TestModalForm'

  requirements:

    _permission: 'access content'

...

```

Ajax link

```twig

<a

  href="/test-modal-form"

  class="use-ajax"

  data-dialog-type="bootstrap4_modal"

  data-dialog-options="{&quot;dialogClasses&quot;:&quot;modal-dialog-centered&quot;,&quot;dialogShowHeader&quot;:false}"

>

  Open form in Bootstrap 4 Modal

</a>

```



See bootstrap4_modal_test.routing.yml and Drupal\bootstrap4_modal_test\Form\Bootstrap4ModalTestForm for an example



Convert all dialog type modal ajax links to bootstrap4_modal

```php

/**

 * Implements hook_link_alter().

 */

function my_module_link_alter(&$variables) {

  if (($variables['options']['attributes']['data-dialog-type'] ?? '') == 'modal') {

    $variables['options']['attributes']['data-dialog-type'] = 'bootstrap4_modal';

  }

}

```



## Maintainers



- Mark Quirvien Cristobal ([vhin0210](https://www.drupal.org/u/vhin0210))

js/bs4_modal.dialog.ajax.js

+3 −4
Original line number Diff line number Diff line
@@ -80,7 +80,9 @@ 


    if (!response.dialogOptions.drupalAutoButtons || response.dialogOptions.drupalAutoButtons !== 'false') {

      response.dialogOptions.drupalAutoButtons = true;

      if (response.dialogOptions.buttons === undefined || response.dialogOptions.buttons.length <= 0) {

        response.dialogOptions.buttons = Drupal.behaviors.bs4_modal.prepareDialogButtons($dialog);

      }

    } else {

      response.dialogOptions.drupalAutoButtons = false;

    }
@@ -107,9 +109,6 @@ 
    var $dialog = $(response.selector);

    if ($dialog.length) {

      Drupal.bs4_modal($dialog.get(0)).close();

      if (!response.persist) {

        $dialog.remove();

      }

    }



    $dialog.off('dialogButtonsChange');

js/bs4_modal.dialog.js

+8 −6
Original line number Diff line number Diff line
@@ -88,7 +88,7 @@ 
          })

          .html(buttonObject.text);



        if (!$(button).attr("class").match(/\bbtn-.*/)) {

        if ($(button).attr("class") && !$(button).attr("class").match(/\bbtn-.*/)) {

          $(button)

            .addClass(classes.join(' '));

        }
@@ -98,17 +98,17 @@ 
      if ($('.modal-dialog .modal-content .modal-footer', $element).length > 0) {

        $('.modal-dialog .modal-content .modal-footer', $element).remove();

      }

      if ($(modalFooter).html().length > 0) {

        $(modalFooter).appendTo($('.modal-dialog .modal-content', $element));

      }

    }



    function closeDialog(value) {

      $(window).trigger('dialog:beforeclose', [dialog, $element]);

      if ($element.modal !== undefined) {

        $element.modal('hide');

      }

      dialog.returnValue = value;

      dialog.open = false;

      $(window).trigger('dialog:afterclose', [dialog, $element]);

    }



    function settingIsTrue(setting) {
@@ -125,13 +125,15 @@ 
    dialog.showModal = function () {

      openDialog({ modal: true });

    };

    dialog.close = closeDialog;

    dialog.close = function () {

      closeDialog({});

    }



    $element.on('hide.bs.modal', function (e) {

      $(window).trigger('dialog:beforeclose', [dialog, $element]);

    });



    $element.on('hide.bs.modal', function (e) {

    $element.on('hidden.bs.modal', function (e) {

      $(window).trigger('dialog:afterclose', [dialog, $element]);

    });

modules/bootstrap4_modal_test/bootstrap4_modal_test.info.yml

0 → 100644
+6 −0
Original line number Diff line number Diff line 
name: 'Bootstrap 4 Modal'

type: module

description: 'Test module for Bootstrap 4 Modal.'

package: Testing

dependencies:

  - bootstrap4_modal

modules/bootstrap4_modal_test/bootstrap4_modal_test.module

0 → 100644
+10 −0
Original line number Diff line number Diff line 
<?php



/**

 * Implements hook_link_alter().

 */

function bootstrap4_modal_test_link_alter(&$variables) {

  if (($variables['options']['attributes']['data-dialog-type'] ?? '') == 'modal') {

    $variables['options']['attributes']['data-dialog-type'] = 'bootstrap4_modal';

  }

}