diff --git a/js/entity_browser.modal.js b/js/entity_browser.modal.js index 920c015..a06e348 100644 --- a/js/entity_browser.modal.js +++ b/js/entity_browser.modal.js @@ -37,4 +37,60 @@ }); } }; + + Drupal.behaviors.fluidModal = { + attach: function (context) { + + // on window resize run function + $(window).resize(function (context) { + fluidDialog(); + }); + + // catch dialog if opened within a viewport smaller than the dialog width + // run function on all dialog opens + $(document).on("dialogopen", ".ui-dialog", function (event, ui) { + fluidDialog(); + }); + } + }; + + var fluidDialog = function fluidDialog() { + var $visible = $(".ui-dialog:visible"); + // each open dialog + $visible.each(function () { + var $this = $(this); + var dialog = $this.find(".ui-dialog-content").data("ui-dialog"); + // if fluid option == true + if (dialog.options.fluid) { + var wWidth = $(window).width(); + // check window width against dialog width + if (wWidth < (dialog.options.maxWidth + 50)) { + //if there is a maxWidth, don't allow a bigger size + dialog.option("width", dialog.options.maxWidth); + } else { + // if no maxWidth is defined, make it responsive + dialog.option("width", '92%'); + } + + var vHeight = $(window).height(); + // check window width against dialog width + if (vHeight < (dialog.options.maxHeight + 50)) { + //if there is a maxHeight, don't allow a bigger size + dialog.option("height", dialog.options.maxHeight); + } else { + // if no maxHeight is defined, make it responsive + dialog.option("height", vHeight-100); + + // Because there is no iframe height 100% in HTML 5, we have to set the height of the iframe as well + var contentHeight = $this.find('.ui-dialog-content').height() - 20; + $this.find("iframe").css("height", contentHeight); + } + + //reposition dialog + dialog.option("position", dialog.options.position); + } + }); + }; + + }(jQuery, Drupal, drupalSettings)); diff --git a/src/Plugin/EntityBrowser/Display/Modal.php b/src/Plugin/EntityBrowser/Display/Modal.php index 5e4e95b..e5a70bd 100644 --- a/src/Plugin/EntityBrowser/Display/Modal.php +++ b/src/Plugin/EntityBrowser/Display/Modal.php @@ -210,7 +210,7 @@ public function openModal(array &$form, FormStateInterface $form_state) { 'width' => '100%', 'height' => $this->configuration['height'] - 90, 'frameborder' => 0, - 'style' => 'padding:', + 'style' => 'padding:0', 'name' => Html::cleanCssIdentifier('entity-browser-iframe-' . $this->configuration['entity_browser_id']) ], ]; @@ -218,8 +218,13 @@ public function openModal(array &$form, FormStateInterface $form_state) { $response = new AjaxResponse(); $response->addCommand(new OpenModalDialogCommand($this->configuration['link_text'], $html, [ - 'width' => $this->configuration['width'], - 'height' => $this->configuration['height'], + 'width' => 'auto', + 'height' => 'auto', + 'maxWidth' => $this->configuration['width'], + 'maxHeight' => $this->configuration['height'], + 'fluid' => true, + 'autoResize' => false, + 'resizable' => false, ])); return $response; } @@ -364,14 +369,14 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta $form['width'] = [ '#type' => 'number', '#title' => $this->t('Width of the modal'), - '#min' => 1, '#default_value' => $configuration['width'], + '#description' => t('Empty value for responsive width'), ]; $form['height'] = [ '#type' => 'number', '#title' => $this->t('Height of the modal'), - '#min' => 1, '#default_value' => $configuration['height'], + '#description' => t('Empty value for responsive width'), ]; $form['link_text'] = [ '#type' => 'textfield',