diff --git a/core/misc/ajax.es6.js b/core/misc/ajax.es6.js index 6248e46efe..d9c549dd19 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($('body')); // This class means to submit the form to the action using Ajax. $('.use-ajax-submit').once('ajax').each(function () { @@ -269,6 +250,38 @@ Drupal.ajax.expired = function () { 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 {jQuery} $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 +1351,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..81d9ad02ac 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($('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/settings_tray/js/settings_tray.es6.js b/core/modules/settings_tray/js/settings_tray.es6.js index b4edd840c5..db9c3042ed 100644 --- a/core/modules/settings_tray/js/settings_tray.es6.js +++ b/core/modules/settings_tray/js/settings_tray.es6.js @@ -148,6 +148,30 @@ setEditModeState(!isInEditMode()); } + /** + * Prepare Ajax links to work with off-canvas and Settings Tray module. + * + * @todo Remove logic dealing with 'data-dialog-renderer' in + * https://www.drupal.org/node/2844261 + */ + 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 +184,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 +198,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 +236,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' }; - }); } };