Allow OffCanvas Dialog to disallow resizing

Created on 1 June 2023, over 1 year ago
Updated 14 August 2024, 25 days ago

Problem/Motivation

In working on Same Page Preview, I have noticed that when a user resizes the off-canvas dialog by adjusting the left border of the panel, the javascript that drives how the the panel's width / proportions sometimes has errors. This problem was made worse by our choice to have a "full screen" button that programmatically sets the width of the panel to be 100%.

Instead of fiddling with the logic (that is also in core and would have to be overridden), I'd like to have the ability to turn resizing off.

I discover that it currently isn't possible because the OpenOffCanvasDialogCommand ALWAYS sets the jQuery driven dialog to be resizable.

With a small code change we could fix that.

Steps to reproduce

Create an off screen dialog like this:

$form['toggle_preview_link'] = [
      '#type' => 'link',
      '#title' => t('Launch preview'),
      '#url' => Url::fromRoute('same_page_preview.preview_pane', $route_parameters),
      '#attributes' => [
        'style' => 'display: none;',
        'class' => ['use-ajax', 'button','button--primary', 'visually-hidden'],
        'data-dialog-type' => 'dialog',
        'data-dialog-renderer' => 'off_canvas',
        'data-dialog-options' => Json::encode([
          'width' => '50%',
          'resizable' => false, // <= This option should allow the dialog to not be resizable
          'classes' => [
            // @todo figure out how to override more than just this one.
            'ui-dialog' => 'same-page-preview-dialog',
          ],
        ]),
      ],
      '#attached' => [
        'library' => [
          'core/drupal.dialog.ajax',
        ],
      ],
    ];

Proposed resolution

Add a conditional in OpenOffCanvasDialogCommand to see if the caller has provided a value for the dialog option, resizable. Use it instead of overriding that choice.

User interface changes

Allows off-canvas dialogs to not be resizable.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Javascript 

Last updated 1 day ago

Created by

🇺🇸United States cosmicdreams Minneapolis/St. Paul

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @cosmicdreams
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,400 pass
  • @cosmicdreams opened merge request.
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,400 pass
  • Status changed to Needs review over 1 year ago
  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    @lauriii let's talk this through.

    The proposed test is :

    if (empty($this->dialogOptions['resizable'])) {
    

    And you suggest that it should be:

    if (!array_key_exists('resizable', $this->dialogOptions)) {
    

    What cases would the suggested change cover differently?

    1. using empty assumes that dialogOptions has a key named 'resizable' already.
    2. using !array_key_exists only makes an impact if dialogOptions hasn't already included a 'resizble' key.

    So I guess this depends on whether the parent::__construct('#drupal-off-canvas', $title, $content, $dialog_options, $settings); includes the 'resizable' key. The parent's code is

    public function __construct($selector, $title, $content, array $dialog_options = [], $settings = NULL) {
        $title = PlainTextOutput::renderFromHtml($title);
        $dialog_options += ['title' => $title];
        $this->selector = $selector;
        $this->content = $content;
        $this->dialogOptions = $dialog_options;
        $this->settings = $settings;
      }
    

    So the answer is, yes, the parent defines a 'resizable' key if it is included a 'data-dialog-options' as my code sample does.

    This sounds like a good change then.

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,406 pass, 1 fail
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,406 pass, 1 fail
  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    Ah sorry, it appears you made a change too. I reorganized the code a bit to make a clear separation between unconditional and conditional defaults.

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,405 pass, 3 fail
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,406 pass, 1 fail
  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    Some open threads in the MR

    also as a bug can we get a test case please

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,406 pass, 1 fail
  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    I'll get working on that test.

  • 🇩🇪Germany Anybody Porta Westfalica

    Still valid

  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    Looks like the bit that is still needed is for a test to be written. I might have time for that tomorrow.

  • First commit to issue fork.
  • Pipeline finished with Failed
    3 months ago
    Total: 201s
    #196984
  • Pipeline finished with Failed
    3 months ago
    Total: 606s
    #196994
  • Pipeline finished with Success
    3 months ago
    Total: 539s
    #197009
  • Status changed to Needs review 3 months ago
  • 🇺🇸United States smustgrave

    smustgrave changed the visibility of the branch 3364302-allow-offcanvas-dialog to hidden.

  • Pipeline finished with Canceled
    about 2 months ago
    Total: 55s
    #232356
  • Pipeline finished with Failed
    about 2 months ago
    Total: 536s
    #232357
  • Status changed to RTBC about 2 months ago
  • 🇺🇸United States smustgrave
    1) Drupal\Tests\system\FunctionalJavascript\OffCanvasTest::testOffCanvasNotResizable
    Failed asserting that a NULL is not empty.
    /builds/issue/drupal-3364302/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php:196
    FAILURES!
    

    Know there is that thread about the test but coverage is there.

    I reverted the change OffCanvasDialogTest but then see a test failure so that's my mistake.

    Self applied a nitpicky :void return.

    Believe this could be ready.

  • Pipeline finished with Success
    about 2 months ago
    Total: 450s
    #232367
  • Status changed to Needs work 25 days ago
  • 🇫🇷France nod_ Lille

    Few problems with the code, the whole thing might make more sense to have in the opendialog command, not just offcanvas.

Production build 0.71.5 2024