Drupal 8 Modal Dialog mit Field Group Tabs (Details)

21 Okt 2020

Kürzlich stand ich in einem Drupal-Kundenprojekt vor folgendem Problem:

In Drupal 8 wurde ein Entity Browser als Modal verwendet. Im Entity Browser wurden die Entities bei der Bearbeitung in einem Form View Mode dargestellt bei dem auch Field Groups (Typ Tab) zum Einsatz kamen um Felder zu gruppieren. Die Tabs waren per Default eingeklappt. Wenn man nun einen Tab ausgeklappt hat, rutschte der Speichern-Button unter Umständen außerhalb des Browser-Viewports und war nur noch erreichbar wenn man den Tab wieder einklappte. Dieses Verhalten liegt daran, dass die CSS-Größenwerte (max-height) beim Öffnen des Modals basierend auf dem sichtbaren Inhalte kalkuliert werden. Wenn ein Tab ausgeklappt wird verändert sich die Größe des sichtbaren Inhalts und dann müsste die Kalkulation eigentlich aktualisiert werden. Das ist allerdings nicht der Fall.

Als Lösung stoße ich das Resizing über ein kleines Javascript beim Togglen der Tabs neu an. Die einfachen Tabs der Field Groups stellen sich als HTML details-Tags dar. Daher hob ich auf die details-Tags ab. Prinzipiell könnte das Problem vermutlich auch bei anderen ausklappbaren Fieldgroup-Elementen auftauchen. Dann sollte sich das Javascript entsprechend anpassen lassen. Ich wollte möglichst gezielt eingreifen, gleichzeitig aber auch alle "details"-Fälle im Modal abdecken.

Meine Lösung sieht wie folgt aus:

javascript als Library in mymodule.libraries.yml definieren:

details_dialog_resize:
  version: VERSION
  js:
    js/details_dialog_resize.js: {}

Die Library in hook_preprocess_HOOK (details für HOOK) anhängen:

/**
 * Implements hook_preprocess_HOOK() for details element.
 *   add small js to resize a modal dialog if details element
 *   in the dialog is triggered/toggled
 */
function mymodule_preprocess_details(&$variables) {
  if (isset($variables['element']['#attached']['library'])) {
    $variables['#attached']['library'][] = 'mymodule/details_dialog_resize';
  }
}

Das Javascript sieht so aus:

(function ($, Drupal) {
  Drupal.behaviors.detailsDialogResize = {
    attach: function (context, settings) {
      $('.ui-dialog-content details').click(function() {
        $(window).trigger('resize.dialogResize');
      });
    }
  };
})(jQuery, Drupal);

Tags:

Drupal