diff --git a/core/misc/ajax.es6.js b/core/misc/ajax.es6.js index 6248e46efe..74b04c9d72 100644 --- a/core/misc/ajax.es6.js +++ b/core/misc/ajax.es6.js @@ -46,26 +46,7 @@ } } - // Bind Ajax behaviors to all items showing the class. - $('.use-ajax').once('ajax').each(function () { - const element_settings = {}; - // Clicked links look better with the throbber than the progress bar. - element_settings.progress = { type: 'throbber' }; - - // For anchor tags, these will go to the target of the anchor rather - // than the usual location. - const href = $(this).attr('href'); - if (href) { - element_settings.url = href; - element_settings.event = 'click'; - } - element_settings.dialogType = $(this).data('dialog-type'); - element_settings.dialogRenderer = $(this).data('dialog-renderer'); - element_settings.dialog = $(this).data('dialog-options'); - element_settings.base = $(this).attr('id'); - element_settings.element = this; - Drupal.ajax(element_settings); - }); + Drupal.ajax.bindAjaxLinks(document.body); // This class means to submit the form to the action using Ajax. $('.use-ajax-submit').once('ajax').each(function () { @@ -270,6 +251,39 @@ return Drupal.ajax.instances.filter(instance => instance && instance.element !== false && !document.body.contains(instance.element)); }; + /** + * Bind Ajax functionality to links that use the 'use-ajax' class. + * + * @param {HTMLElement} element + * Element to enable Ajax functionality for. + */ + Drupal.ajax.bindAjaxLinks = (element) => { + // Bind Ajax behaviors to all items showing the class. + $(element).find('.use-ajax').once('ajax').each((i, ajaxLink) => { + const $linkElement = $(ajaxLink); + + const elementSettings = { + // Clicked links look better with the throbber than the progress bar. + progress: { type: 'throbber' }, + dialogType: $linkElement.data('dialog-type'), + dialog: $linkElement.data('dialog-options'), + dialogRenderer: $linkElement.data('dialog-renderer'), + base: $linkElement.attr('id'), + element: ajaxLink, + }; + const href = $linkElement.attr('href'); + /** + * For anchor tags, these will go to the target of the anchor rather + * than the usual location. + */ + if (href) { + elementSettings.url = href; + elementSettings.event = 'click'; + } + Drupal.ajax(elementSettings); + }); + }; + /** * Settings for an Ajax object. * @@ -1338,4 +1352,18 @@ } }, }; + + /** + * Bind Ajax contextual links when added. + * + * @param {jQuery.Event} event + * The `drupalContextualLinkAdded` event. + * @param {object} data + * An object containing the data relevant to the event. + * + * @listens event:drupalContextualLinkAdded + */ + $(document).on('drupalContextualLinkAdded', (event, data) => { + Drupal.ajax.bindAjaxLinks(data.$el[0]); + }); }(jQuery, window, Drupal, drupalSettings)); diff --git a/core/misc/ajax.js b/core/misc/ajax.js index 5ea52425be..ebdb35ad09 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -27,23 +27,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr } } - $('.use-ajax').once('ajax').each(function () { - var element_settings = {}; - - element_settings.progress = { type: 'throbber' }; - - var href = $(this).attr('href'); - if (href) { - element_settings.url = href; - element_settings.event = 'click'; - } - element_settings.dialogType = $(this).data('dialog-type'); - element_settings.dialogRenderer = $(this).data('dialog-renderer'); - element_settings.dialog = $(this).data('dialog-options'); - element_settings.base = $(this).attr('id'); - element_settings.element = this; - Drupal.ajax(element_settings); - }); + Drupal.ajax.bindAjaxLinks(document.body); $('.use-ajax-submit').once('ajax').each(function () { var element_settings = {}; @@ -139,6 +123,28 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr }); }; + Drupal.ajax.bindAjaxLinks = function (element) { + $(element).find('.use-ajax').once('ajax').each(function (i, ajaxLink) { + var $linkElement = $(ajaxLink); + + var elementSettings = { + progress: { type: 'throbber' }, + dialogType: $linkElement.data('dialog-type'), + dialog: $linkElement.data('dialog-options'), + dialogRenderer: $linkElement.data('dialog-renderer'), + base: $linkElement.attr('id'), + element: ajaxLink + }; + var href = $linkElement.attr('href'); + + if (href) { + elementSettings.url = href; + elementSettings.event = 'click'; + } + Drupal.ajax(elementSettings); + }); + }; + Drupal.Ajax = function (base, element, element_settings) { var defaults = { event: element ? 'mousedown' : null, @@ -588,4 +594,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr } } }; + + $(document).on('drupalContextualLinkAdded', function (event, data) { + Drupal.ajax.bindAjaxLinks(data.$el[0]); + }); })(jQuery, window, Drupal, drupalSettings); \ No newline at end of file diff --git a/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml b/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml index 35e03b7333..1738756a12 100644 --- a/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml +++ b/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml @@ -2,3 +2,11 @@ contextual_test: title: 'Test Link' route_name: 'contextual_test' group: 'contextual_test' +contextual_test_ajax: + title: 'Test Link with Ajax' + route_name: 'contextual_test' + group: 'contextual_test' + options: + attributes: + class: ['use-ajax'] + data-dialog-type: 'modal' diff --git a/core/modules/contextual/tests/modules/contextual_test/contextual_test.module b/core/modules/contextual/tests/modules/contextual_test/contextual_test.module index b8f2e60f51..d57255cf10 100644 --- a/core/modules/contextual/tests/modules/contextual_test/contextual_test.module +++ b/core/modules/contextual/tests/modules/contextual_test/contextual_test.module @@ -15,3 +15,23 @@ function contextual_test_block_view_alter(array &$build, BlockPluginInterface $b 'route_parameters' => [], ]; } + +/** + * Implements hook_contextual_links_view_alter(). + * + * @todo Apparently this too late to attach the library? + * It won't work without contextual_test_page_attachments_alter() + * Is that a problem? Should the contextual module itself do the attaching? + */ +function contextual_test_contextual_links_view_alter(&$element, $items) { + if (isset($element['#links']['contextual-test-ajax'])) { + $element['#attached']['library'][] = 'core/drupal.dialog.ajax'; + } +} + +/** + * Implements hook_page_attachments_alter(). + */ +function contextual_test_page_attachments_alter(array &$attachments) { + $attachments['#attached']['library'][] = 'core/drupal.dialog.ajax'; +} diff --git a/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php b/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php index a24d2bae59..1c381c7fa6 100644 --- a/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php +++ b/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php @@ -65,15 +65,23 @@ public function testContextualLinksClick() { $this->container->get('module_installer')->install(['contextual_test']); // Test clicking contextual link without toolbar. $this->drupalGet('user'); - $this->assertSession()->assertWaitOnAjaxRequest(); $this->clickContextualLink('#block-branding', 'Test Link'); $this->assertSession()->pageTextContains('Everything is contextual!'); + // Test click a contextual link that uses ajax. + $this->drupalGet('user'); + $current_page_string = 'NOT_RELOADED_IF_ON_PAGE'; + $this->getSession()->executeScript('document.body.appendChild(document.createTextNode("' . $current_page_string . '"));'); + $this->clickContextualLink('#block-branding', 'Test Link with Ajax'); + $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '#drupal-modal')); + $this->assertSession()->elementContains('css', '#drupal-modal', 'Everything is contextual!'); + // Check to make sure that page was not reloaded. + $this->assertSession()->pageTextContains($current_page_string); + // Test clicking contextual link with toolbar. $this->container->get('module_installer')->install(['toolbar']); $this->grantPermissions(Role::load(Role::AUTHENTICATED_ID), ['access toolbar']); $this->drupalGet('user'); - $this->assertSession()->assertWaitOnAjaxRequest(); // Click "Edit" in toolbar to show contextual links. $this->getSession()->getPage()->find('css', '.contextual-toolbar-tab button')->press(); @@ -81,4 +89,13 @@ public function testContextualLinksClick() { $this->assertSession()->pageTextContains('Everything is contextual!'); } + /** + * {@inheritdoc} + */ + protected function drupalGet($path, array $options = [], array $headers = []) { + $get = parent::drupalGet($path, $options, $headers); + $this->assertSession()->assertWaitOnAjaxRequest(); + return $get; + } + } diff --git a/core/modules/settings_tray/js/settings_tray.es6.js b/core/modules/settings_tray/js/settings_tray.es6.js index b4edd840c5..1c648ab946 100644 --- a/core/modules/settings_tray/js/settings_tray.es6.js +++ b/core/modules/settings_tray/js/settings_tray.es6.js @@ -148,6 +148,27 @@ setEditModeState(!isInEditMode()); } + /** + * Prepare Ajax links to work with off-canvas and Settings Tray module.q + */ + function prepareAjaxLinks() { + // Find all Ajax instances that use the 'off_canvas' renderer. + Drupal.ajax.instances + // If there is an element and the renderer is 'off_canvas' then we want + // to add our changes. + .filter(instance => instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas') + // Loop through all Ajax instances that use the 'off_canvas' renderer to + // set active editable ID. + .forEach((instance) => { + // Check to make sure existing dialogOptions aren't overridden. + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; + } + instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id'); + instance.progress = { type: 'fullscreen' }; + }); + } + /** * Reacts to contextual links being added. * @@ -160,6 +181,12 @@ */ $(document).on('drupalContextualLinkAdded', (event, data) => { + /** + * When contextual links are add we need to set extra properties on the + * instances in Drupal.ajax.instances for them to work with Edit Mode. + */ + prepareAjaxLinks(); + // When the first contextual link is added to the page set Edit Mode. $('body').once('settings_tray.edit_mode_init').each(() => { const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; @@ -168,12 +195,6 @@ } }); - /** - * Bind Ajax behaviors to all items showing the class. - * @todo Fix contextual links to work with use-ajax links in - * https://www.drupal.org/node/2764931. - */ - Drupal.attachBehaviors(data.$el[0]); /** * Bind a listener to all 'Quick edit' links for blocks. Click "Edit" button * in toolbar to force Contextual Edit which starts Settings Tray edit @@ -212,21 +233,6 @@ Drupal.behaviors.toggleEditMode = { attach() { $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode); - // Find all Ajax instances that use the 'off_canvas' renderer. - Drupal.ajax.instances - // If there is an element and the renderer is 'off_canvas' then we want - // to add our changes. - .filter(instance => instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas') - // Loop through all Ajax instances that use the 'off_canvas' renderer to - // set active editable ID. - .forEach((instance) => { - // Check to make sure existing dialogOptions aren't overridden. - if (!('dialogOptions' in instance.options.data)) { - instance.options.data.dialogOptions = {}; - } - instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id'); - instance.progress = { type: 'fullscreen' }; - }); }, }; diff --git a/core/modules/settings_tray/js/settings_tray.js b/core/modules/settings_tray/js/settings_tray.js index 88cbb0eb6e..78c5b60382 100644 --- a/core/modules/settings_tray/js/settings_tray.js +++ b/core/modules/settings_tray/js/settings_tray.js @@ -93,7 +93,21 @@ setEditModeState(!isInEditMode()); } + function prepareAjaxLinks() { + Drupal.ajax.instances.filter(function (instance) { + return instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; + }).forEach(function (instance) { + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; + } + instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id'); + instance.progress = { type: 'fullscreen' }; + }); + } + $(document).on('drupalContextualLinkAdded', function (event, data) { + prepareAjaxLinks(); + $('body').once('settings_tray.edit_mode_init').each(function () { var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; if (editMode) { @@ -101,8 +115,6 @@ } }); - Drupal.attachBehaviors(data.$el[0]); - data.$el.find(blockConfigureSelector).on('click.settingstray', function () { if (!isInEditMode()) { $(toggleEditSelector).trigger('click').trigger('click.settings_tray'); @@ -122,16 +134,6 @@ Drupal.behaviors.toggleEditMode = { attach: function attach() { $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode); - - Drupal.ajax.instances.filter(function (instance) { - return instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; - }).forEach(function (instance) { - if (!('dialogOptions' in instance.options.data)) { - instance.options.data.dialogOptions = {}; - } - instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id'); - instance.progress = { type: 'fullscreen' }; - }); } };