Dialog creation with htmx replaces jQuery UI Dialog & AJAX modal commands

A new approach to triggering dialogs using htmx is added. The content that is to be presented in the dialog must be available on a path.

Dialog style is indicated by a path parameter

Four styles of dialog are provided:

1. default
2. modal
3. off canvas (side positioned)
4. off canvas (top positioned)

Triggering a dialog is accomplished by making an htmx get request to a path that indicates the style of dialog and the source of the markup to insert into the dialog. The path /htmx/dialog/{dialog_type}/path/to/content will open a dialog that contains the markup returned by /path/to/content.

The dialog_type parameters are:

1. default
2. modal
3. off-canvas
4. off-canvas-top

Example

A render element such as:

$defaultUrl = Url::fromUri('base:/htmx/dialog/default/htmx-dialog-content');
    $build['normal_dialog'] = [
      '#title' => 'Default dialog',
      '#type' => 'checkbox',
      '#name' => 'normal_dialog',
    ];
    (new Htmx())->get($defaultUrl)
      ->applyTo($build['normal_dialog']);

Generates:

  <input data-hx-get="/htmx/dialog/default/htmx-dialog-content" type="checkbox" name="normal_dialog" value="1" class="form-checkbox form-boolean form-boolean--type-checkbox" data-htmx-powered="true">
  <label class="form-item__label option">Default dialog</label>

Which triggers a standard dialog when the checkbox is clicked.

Styling

The dialog dimensions are defined via regular CSS. A custom class can be added to these dialogs to be used by themes for custom styling. The class name is passed as a query parameter in the request back to Drupal, which is easily added as an additional htmx attribute.

    $build['styled_modal_single_class'] = [
      '#title' => 'Modal with single additional class',
      '#type' => 'checkbox',
      '#name' => 'styled_modal_single_class',
    ];
    (new Htmx())->get($modalUrl)
      ->vals(['class' => 'dialog--wide'])
      ->applyTo($build['styled_modal_single_class']);

Results in:

  <input data-hx-get="/htmx/dialog/modal/htmx-dialog-content" data-hx-vals="{&quot;class&quot;:&quot;dialog--wide&quot;}" type="checkbox" name="styled_modal_single_class" value="1" class="form-checkbox form-boolean form-boolean--type-checkbox" data-htmx-powered="true">
  <label class="form-item__label option">Modal with single additional class</label>

And adds dialog--wide as a class on the dialog.

The new dialog is rendered using an single directory component: system:drupal-dialog which provides three styling classes, dialog--narrow, dialog--wide, and dialog--x-wide, that also serve as examples.

jQuery continues to load on pages that use this method until #3446855: Get rid of jQuery in displace event is resolved.