/** * @file * Provides Ajax page updating via jQuery $.ajax. * * Ajax is a method of making a request via JavaScript while viewing an HTML * page. The request returns an array of commands encoded in JSON, which is * then executed to make any changes that are necessary to the page. * * Drupal uses this file to enhance form elements with `#ajax['url']` and * `#ajax['wrapper']` properties. If set, this file will automatically be * included to provide Ajax capabilities. */ (function($, window, Drupal, drupalSettings) { /** * Attaches the Ajax behavior to each Ajax form element. * * @type {Drupal~behavior} * * @prop {Drupal~behaviorAttach} attach * Initialize all {@link Drupal.Ajax} objects declared in * `drupalSettings.ajax` or initialize {@link Drupal.Ajax} objects from * DOM elements having the `use-ajax-submit` or `use-ajax` css class. * @prop {Drupal~behaviorDetach} detach * During `unload` remove all {@link Drupal.Ajax} objects related to * the removed content. */ Drupal.behaviors.AJAX = { attach(context, settings) { function loadAjaxBehavior(base) { const elementSettings = settings.ajax[base]; if (typeof elementSettings.selector === 'undefined') { elementSettings.selector = `#${base}`; } $(elementSettings.selector) .once('drupal-ajax') .each(function() { elementSettings.element = this; elementSettings.base = base; Drupal.ajax(elementSettings); }); } // Load all Ajax behaviors specified in the settings. Object.keys(settings.ajax || {}).forEach(base => loadAjaxBehavior(base)); Drupal.ajax.bindAjaxLinks(document.body); // This class means to submit the form to the action using Ajax. $('.use-ajax-submit') .once('ajax') .each(function() { const elementSettings = {}; // Ajax submits specified in this manner automatically submit to the // normal form action. elementSettings.url = $(this.form).attr('action'); // Form submit button clicks need to tell the form what was clicked so // it gets passed in the POST request. elementSettings.setClick = true; // Form buttons use the 'click' event rather than mousedown. elementSettings.event = 'click'; // Clicked form buttons look better with the throbber than the progress // bar. elementSettings.progress = { type: 'throbber' }; elementSettings.base = $(this).attr('id'); elementSettings.element = this; Drupal.ajax(elementSettings); }); }, detach(context, settings, trigger) { if (trigger === 'unload') { Drupal.ajax.expired().forEach(instance => { // Set this to null and allow garbage collection to reclaim // the memory. Drupal.ajax.instances[instance.instanceIndex] = null; }); } }, }; /** * Extends Error to provide handling for Errors in Ajax. * * @constructor * * @augments Error * * @param {XMLHttpRequest} xmlhttp * XMLHttpRequest object used for the failed request. * @param {string} uri * The URI where the error occurred. * @param {string} customMessage * The custom message. */ Drupal.AjaxError = function(xmlhttp, uri, customMessage) { let statusCode; let statusText; let responseText; if (xmlhttp.status) { statusCode = `\n${Drupal.t('An AJAX HTTP error occurred.')}\n${Drupal.t( 'HTTP Result Code: !status', { '!status': xmlhttp.status }, )}`; } else { statusCode = `\n${Drupal.t( 'An AJAX HTTP request terminated abnormally.', )}`; } statusCode += `\n${Drupal.t('Debugging information follows.')}`; const pathText = `\n${Drupal.t('Path: !uri', { '!uri': uri })}`; statusText = ''; // In some cases, when statusCode === 0, xmlhttp.statusText may not be // defined. Unfortunately, testing for it with typeof, etc, doesn't seem to // catch that and the test causes an exception. So we need to catch the // exception here. try { statusText = `\n${Drupal.t('StatusText: !statusText', { '!statusText': $.trim(xmlhttp.statusText), })}`; } catch (e) { // Empty. } responseText = ''; // Again, we don't have a way to know for sure whether accessing // xmlhttp.responseText is going to throw an exception. So we'll catch it. try { responseText = `\n${Drupal.t('ResponseText: !responseText', { '!responseText': $.trim(xmlhttp.responseText), })}`; } catch (e) { // Empty. } // Make the responseText more readable by stripping HTML tags and newlines. responseText = responseText.replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, ''); responseText = responseText.replace(/[\n]+\s+/g, '\n'); // We don't need readyState except for status == 0. const readyStateText = xmlhttp.status === 0 ? `\n${Drupal.t('ReadyState: !readyState', { '!readyState': xmlhttp.readyState, })}` : ''; customMessage = customMessage ? `\n${Drupal.t('CustomMessage: !customMessage', { '!customMessage': customMessage, })}` : ''; /** * Formatted and translated error message. * * @type {string} */ this.message = statusCode + pathText + statusText + customMessage + responseText + readyStateText; /** * Used by some browsers to display a more accurate stack trace. * * @type {string} */ this.name = 'AjaxError'; }; Drupal.AjaxError.prototype = new Error(); Drupal.AjaxError.prototype.constructor = Drupal.AjaxError; /** * Provides Ajax page updating via jQuery $.ajax. * * This function is designed to improve developer experience by wrapping the * initialization of {@link Drupal.Ajax} objects and storing all created * objects in the {@link Drupal.ajax.instances} array. * * @example * Drupal.behaviors.myCustomAJAXStuff = { * attach: function (context, settings) { * * var ajaxSettings = { * url: 'my/url/path', * // If the old version of Drupal.ajax() needs to be used those * // properties can be added * base: 'myBase', * element: $(context).find('.someElement') * }; * * var myAjaxObject = Drupal.ajax(ajaxSettings); * * // Declare a new Ajax command specifically for this Ajax object. * myAjaxObject.commands.insert = function (ajax, response, status) { * $('#my-wrapper').append(response.data); * alert('New content was appended to #my-wrapper'); * }; * * // This command will remove this Ajax object from the page. * myAjaxObject.commands.destroyObject = function (ajax, response, status) { * Drupal.ajax.instances[this.instanceIndex] = null; * }; * * // Programmatically trigger the Ajax request. * myAjaxObject.execute(); * } * }; * * @param {object} settings * The settings object passed to {@link Drupal.Ajax} constructor. * @param {string} [settings.base] * Base is passed to {@link Drupal.Ajax} constructor as the 'base' * parameter. * @param {HTMLElement} [settings.element] * Element parameter of {@link Drupal.Ajax} constructor, element on which * event listeners will be bound. * * @return {Drupal.Ajax} * The created Ajax object. * * @see Drupal.AjaxCommands */ Drupal.ajax = function(settings) { if (arguments.length !== 1) { throw new Error( 'Drupal.ajax() function must be called with one configuration object only', ); } // Map those config keys to variables for the old Drupal.ajax function. const base = settings.base || false; const element = settings.element || false; delete settings.base; delete settings.element; // By default do not display progress for ajax calls without an element. if (!settings.progress && !element) { settings.progress = false; } const ajax = new Drupal.Ajax(base, element, settings); ajax.instanceIndex = Drupal.ajax.instances.length; Drupal.ajax.instances.push(ajax); return ajax; }; /** * Contains all created Ajax objects. * * @type {Array.} */ Drupal.ajax.instances = []; /** * List all objects where the associated element is not in the DOM * * This method ignores {@link Drupal.Ajax} objects not bound to DOM elements * when created with {@link Drupal.ajax}. * * @return {Array.} * The list of expired {@link Drupal.Ajax} objects. */ 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 {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. * * @typedef {object} Drupal.Ajax~elementSettings * * @prop {string} url * Target of the Ajax request. * @prop {?string} [event] * Event bound to settings.element which will trigger the Ajax request. * @prop {bool} [keypress=true] * Triggers a request on keypress events. * @prop {?string} selector * jQuery selector targeting the element to bind events to or used with * {@link Drupal.AjaxCommands}. * @prop {string} [effect='none'] * Name of the jQuery method to use for displaying new Ajax content. * @prop {string|number} [speed='none'] * Speed with which to apply the effect. * @prop {string} [method] * Name of the jQuery method used to insert new content in the targeted * element. * @prop {object} [progress] * Settings for the display of a user-friendly loader. * @prop {string} [progress.type='throbber'] * Type of progress element, core provides `'bar'`, `'throbber'` and * `'fullscreen'`. * @prop {string} [progress.message=Drupal.t('Please wait...')] * Custom message to be used with the bar indicator. * @prop {object} [submit] * Extra data to be sent with the Ajax request. * @prop {bool} [submit.js=true] * Allows the PHP side to know this comes from an Ajax request. * @prop {object} [dialog] * Options for {@link Drupal.dialog}. * @prop {string} [dialogType] * One of `'modal'` or `'dialog'`. * @prop {string} [prevent] * List of events on which to stop default action and stop propagation. */ /** * Ajax constructor. * * The Ajax request returns an array of commands encoded in JSON, which is * then executed to make any changes that are necessary to the page. * * Drupal uses this file to enhance form elements with `#ajax['url']` and * `#ajax['wrapper']` properties. If set, this file will automatically be * included to provide Ajax capabilities. * * @constructor * * @param {string} [base] * Base parameter of {@link Drupal.Ajax} constructor * @param {HTMLElement} [element] * Element parameter of {@link Drupal.Ajax} constructor, element on which * event listeners will be bound. * @param {Drupal.Ajax~elementSettings} elementSettings * Settings for this Ajax object. */ Drupal.Ajax = function(base, element, elementSettings) { const defaults = { event: element ? 'mousedown' : null, keypress: true, selector: base ? `#${base}` : null, effect: 'none', speed: 'none', method: 'replaceWith', progress: { type: 'throbber', message: Drupal.t('Please wait...'), }, submit: { js: true, }, }; $.extend(this, defaults, elementSettings); /** * @type {Drupal.AjaxCommands} */ this.commands = new Drupal.AjaxCommands(); /** * @type {bool|number} */ this.instanceIndex = false; // @todo Remove this after refactoring the PHP code to: // - Call this 'selector'. // - Include the '#' for ID-based selectors. // - Support non-ID-based selectors. if (this.wrapper) { /** * @type {string} */ this.wrapper = `#${this.wrapper}`; } /** * @type {HTMLElement} */ this.element = element; /** * @deprecated in Drupal 8.5.0 and will be removed before Drupal 9.0.0. * Use elementSettings. * * @type {Drupal.Ajax~elementSettings} */ this.element_settings = elementSettings; /** * @type {Drupal.Ajax~elementSettings} */ this.elementSettings = elementSettings; // If there isn't a form, jQuery.ajax() will be used instead, allowing us to // bind Ajax to links as well. if (this.element && this.element.form) { /** * @type {jQuery} */ this.$form = $(this.element.form); } // If no Ajax callback URL was given, use the link href or form action. if (!this.url) { const $element = $(this.element); if ($element.is('a')) { this.url = $element.attr('href'); } else if (this.element && element.form) { this.url = this.$form.attr('action'); } } // Replacing 'nojs' with 'ajax' in the URL allows for an easy method to let // the server detect when it needs to degrade gracefully. // There are four scenarios to check for: // 1. /nojs/ // 2. /nojs$ - The end of a URL string. // 3. /nojs? - Followed by a query (e.g. path/nojs?destination=foobar). // 4. /nojs# - Followed by a fragment (e.g.: path/nojs#myfragment). const originalUrl = this.url; /** * Processed Ajax URL. * * @type {string} */ this.url = this.url.replace(/\/nojs(\/|$|\?|#)/, '/ajax$1'); // If the 'nojs' version of the URL is trusted, also trust the 'ajax' // version. if (drupalSettings.ajaxTrustedUrl[originalUrl]) { drupalSettings.ajaxTrustedUrl[this.url] = true; } // Set the options for the ajaxSubmit function. // The 'this' variable will not persist inside of the options object. const ajax = this; /** * Options for the jQuery.ajax function. * * @name Drupal.Ajax#options * * @type {object} * * @prop {string} url * Ajax URL to be called. * @prop {object} data * Ajax payload. * @prop {function} beforeSerialize * Implement jQuery beforeSerialize function to call * {@link Drupal.Ajax#beforeSerialize}. * @prop {function} beforeSubmit * Implement jQuery beforeSubmit function to call * {@link Drupal.Ajax#beforeSubmit}. * @prop {function} beforeSend * Implement jQuery beforeSend function to call * {@link Drupal.Ajax#beforeSend}. * @prop {function} success * Implement jQuery success function to call * {@link Drupal.Ajax#success}. * @prop {function} complete * Implement jQuery success function to clean up ajax state and trigger an * error if needed. * @prop {string} dataType='json' * Type of the response expected. * @prop {string} type='POST' * HTTP method to use for the Ajax request. */ ajax.options = { url: ajax.url, data: ajax.submit, beforeSerialize(elementSettings, options) { return ajax.beforeSerialize(elementSettings, options); }, beforeSubmit(formValues, elementSettings, options) { ajax.ajaxing = true; return ajax.beforeSubmit(formValues, elementSettings, options); }, beforeSend(xmlhttprequest, options) { ajax.ajaxing = true; return ajax.beforeSend(xmlhttprequest, options); }, success(response, status, xmlhttprequest) { // Sanity check for browser support (object expected). // When using iFrame uploads, responses must be returned as a string. if (typeof response === 'string') { response = $.parseJSON(response); } // Prior to invoking the response's commands, verify that they can be // trusted by checking for a response header. See // \Drupal\Core\EventSubscriber\AjaxResponseSubscriber for details. // - Empty responses are harmless so can bypass verification. This // avoids an alert message for server-generated no-op responses that // skip Ajax rendering. // - Ajax objects with trusted URLs (e.g., ones defined server-side via // #ajax) can bypass header verification. This is especially useful // for Ajax with multipart forms. Because IFRAME transport is used, // the response headers cannot be accessed for verification. if (response !== null && !drupalSettings.ajaxTrustedUrl[ajax.url]) { if (xmlhttprequest.getResponseHeader('X-Drupal-Ajax-Token') !== '1') { const customMessage = Drupal.t( 'The response failed verification so will not be processed.', ); return ajax.error(xmlhttprequest, ajax.url, customMessage); } } return ajax.success(response, status); }, complete(xmlhttprequest, status) { ajax.ajaxing = false; if (status === 'error' || status === 'parsererror') { return ajax.error(xmlhttprequest, ajax.url); } }, dataType: 'json', type: 'POST', }; if (elementSettings.dialog) { ajax.options.data.dialogOptions = elementSettings.dialog; } // Ensure that we have a valid URL by adding ? when no query parameter is // yet available, otherwise append using &. if (ajax.options.url.indexOf('?') === -1) { ajax.options.url += '?'; } else { ajax.options.url += '&'; } // If this element has a dialog type use if for the wrapper if not use 'ajax'. let wrapper = `drupal_${elementSettings.dialogType || 'ajax'}`; if (elementSettings.dialogRenderer) { wrapper += `.${elementSettings.dialogRenderer}`; } ajax.options.url += `${Drupal.ajax.WRAPPER_FORMAT}=${wrapper}`; // Bind the ajaxSubmit function to the element event. $(ajax.element).on(elementSettings.event, function(event) { if ( !drupalSettings.ajaxTrustedUrl[ajax.url] && !Drupal.url.isLocal(ajax.url) ) { throw new Error( Drupal.t('The callback URL is not local and not trusted: !url', { '!url': ajax.url, }), ); } return ajax.eventResponse(this, event); }); // If necessary, enable keyboard submission so that Ajax behaviors // can be triggered through keyboard input as well as e.g. a mousedown // action. if (elementSettings.keypress) { $(ajax.element).on('keypress', function(event) { return ajax.keypressResponse(this, event); }); } // If necessary, prevent the browser default action of an additional event. // For example, prevent the browser default action of a click, even if the // Ajax behavior binds to mousedown. if (elementSettings.prevent) { $(ajax.element).on(elementSettings.prevent, false); } }; /** * URL query attribute to indicate the wrapper used to render a request. * * The wrapper format determines how the HTML is wrapped, for example in a * modal dialog. * * @const {string} * * @default */ Drupal.ajax.WRAPPER_FORMAT = '_wrapper_format'; /** * Request parameter to indicate that a request is a Drupal Ajax request. * * @const {string} * * @default */ Drupal.Ajax.AJAX_REQUEST_PARAMETER = '_drupal_ajax'; /** * Execute the ajax request. * * Allows developers to execute an Ajax request manually without specifying * an event to respond to. * * @return {object} * Returns the jQuery.Deferred object underlying the Ajax request. If * pre-serialization fails, the Deferred will be returned in the rejected * state. */ Drupal.Ajax.prototype.execute = function() { // Do not perform another ajax command if one is already in progress. if (this.ajaxing) { return; } try { this.beforeSerialize(this.element, this.options); // Return the jqXHR so that external code can hook into the Deferred API. return $.ajax(this.options); } catch (e) { // Unset the ajax.ajaxing flag here because it won't be unset during // the complete response. this.ajaxing = false; window.alert( `An error occurred while attempting to process ${this.options.url}: ${ e.message }`, ); // For consistency, return a rejected Deferred (i.e., jqXHR's superclass) // so that calling code can take appropriate action. return $.Deferred().reject(); } }; /** * Handle a key press. * * The Ajax object will, if instructed, bind to a key press response. This * will test to see if the key press is valid to trigger this event and * if it is, trigger it for us and prevent other keypresses from triggering. * In this case we're handling RETURN and SPACEBAR keypresses (event codes 13 * and 32. RETURN is often used to submit a form when in a textfield, and * SPACE is often used to activate an element without submitting. * * @param {HTMLElement} element * Element the event was triggered on. * @param {jQuery.Event} event * Triggered event. */ Drupal.Ajax.prototype.keypressResponse = function(element, event) { // Create a synonym for this to reduce code confusion. const ajax = this; // Detect enter key and space bar and allow the standard response for them, // except for form elements of type 'text', 'tel', 'number' and 'textarea', // where the spacebar activation causes inappropriate activation if // #ajax['keypress'] is TRUE. On a text-type widget a space should always // be a space. if ( event.which === 13 || (event.which === 32 && element.type !== 'text' && element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number') ) { event.preventDefault(); event.stopPropagation(); $(element).trigger(ajax.elementSettings.event); } }; /** * Handle an event that triggers an Ajax response. * * When an event that triggers an Ajax response happens, this method will * perform the actual Ajax call. It is bound to the event using * bind() in the constructor, and it uses the options specified on the * Ajax object. * * @param {HTMLElement} element * Element the event was triggered on. * @param {jQuery.Event} event * Triggered event. */ Drupal.Ajax.prototype.eventResponse = function(element, event) { event.preventDefault(); event.stopPropagation(); // Create a synonym for this to reduce code confusion. const ajax = this; // Do not perform another Ajax command if one is already in progress. if (ajax.ajaxing) { return; } try { if (ajax.$form) { // If setClick is set, we must set this to ensure that the button's // value is passed. if (ajax.setClick) { // Mark the clicked button. 'form.clk' is a special variable for // ajaxSubmit that tells the system which element got clicked to // trigger the submit. Without it there would be no 'op' or // equivalent. element.form.clk = element; } ajax.$form.ajaxSubmit(ajax.options); } else { ajax.beforeSerialize(ajax.element, ajax.options); $.ajax(ajax.options); } } catch (e) { // Unset the ajax.ajaxing flag here because it won't be unset during // the complete response. ajax.ajaxing = false; window.alert( `An error occurred while attempting to process ${ajax.options.url}: ${ e.message }`, ); } }; /** * Handler for the form serialization. * * Runs before the beforeSend() handler (see below), and unlike that one, runs * before field data is collected. * * @param {object} [element] * Ajax object's `elementSettings`. * @param {object} options * jQuery.ajax options. */ Drupal.Ajax.prototype.beforeSerialize = function(element, options) { // Allow detaching behaviors to update field values before collecting them. // This is only needed when field values are added to the POST data, so only // when there is a form such that this.$form.ajaxSubmit() is used instead of // $.ajax(). When there is no form and $.ajax() is used, beforeSerialize() // isn't called, but don't rely on that: explicitly check this.$form. if (this.$form) { const settings = this.settings || drupalSettings; Drupal.detachBehaviors(this.$form.get(0), settings, 'serialize'); } // Inform Drupal that this is an AJAX request. options.data[Drupal.Ajax.AJAX_REQUEST_PARAMETER] = 1; // Allow Drupal to return new JavaScript and CSS files to load without // returning the ones already loaded. // @see \Drupal\Core\Theme\AjaxBasePageNegotiator // @see \Drupal\Core\Asset\LibraryDependencyResolverInterface::getMinimalRepresentativeSubset() // @see system_js_settings_alter() const pageState = drupalSettings.ajaxPageState; options.data['ajax_page_state[theme]'] = pageState.theme; options.data['ajax_page_state[theme_token]'] = pageState.theme_token; options.data['ajax_page_state[libraries]'] = pageState.libraries; }; /** * Modify form values prior to form submission. * * @param {Array.} formValues * Processed form values. * @param {jQuery} element * The form node as a jQuery object. * @param {object} options * jQuery.ajax options. */ Drupal.Ajax.prototype.beforeSubmit = function(formValues, element, options) { // This function is left empty to make it simple to override for modules // that wish to add functionality here. }; /** * Prepare the Ajax request before it is sent. * * @param {XMLHttpRequest} xmlhttprequest * Native Ajax object. * @param {object} options * jQuery.ajax options. */ Drupal.Ajax.prototype.beforeSend = function(xmlhttprequest, options) { // For forms without file inputs, the jQuery Form plugin serializes the // form values, and then calls jQuery's $.ajax() function, which invokes // this handler. In this circumstance, options.extraData is never used. For // forms with file inputs, the jQuery Form plugin uses the browser's normal // form submission mechanism, but captures the response in a hidden IFRAME. // In this circumstance, it calls this handler first, and then appends // hidden fields to the form to submit the values in options.extraData. // There is no simple way to know which submission mechanism will be used, // so we add to extraData regardless, and allow it to be ignored in the // former case. if (this.$form) { options.extraData = options.extraData || {}; // Let the server know when the IFRAME submission mechanism is used. The // server can use this information to wrap the JSON response in a // TEXTAREA, as per http://jquery.malsup.com/form/#file-upload. options.extraData.ajax_iframe_upload = '1'; // The triggering element is about to be disabled (see below), but if it // contains a value (e.g., a checkbox, textfield, select, etc.), ensure // that value is included in the submission. As per above, submissions // that use $.ajax() are already serialized prior to the element being // disabled, so this is only needed for IFRAME submissions. const v = $.fieldValue(this.element); if (v !== null) { options.extraData[this.element.name] = v; } } // Disable the element that received the change to prevent user interface // interaction while the Ajax request is in progress. ajax.ajaxing prevents // the element from triggering a new request, but does not prevent the user // from changing its value. $(this.element).prop('disabled', true); if (!this.progress || !this.progress.type) { return; } // Insert progress indicator. const progressIndicatorMethod = `setProgressIndicator${this.progress.type .slice(0, 1) .toUpperCase()}${this.progress.type.slice(1).toLowerCase()}`; if ( progressIndicatorMethod in this && typeof this[progressIndicatorMethod] === 'function' ) { this[progressIndicatorMethod].call(this); } }; /** * An animated progress throbber and container element for AJAX operations. * * @param {string} [message] * (optional) The message shown on the UI. * @return {string} * The HTML markup for the throbber. */ Drupal.theme.ajaxProgressThrobber = message => { // Build markup without adding extra white space since it affects rendering. const messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : ''; const throbber = '
 
'; return `
${throbber}${messageMarkup}
`; }; /** * An animated progress throbber and container element for AJAX operations. * * @return {string} * The HTML markup for the throbber. */ Drupal.theme.ajaxProgressIndicatorFullscreen = () => '
 
'; /** * Formats text accompanying the AJAX progress throbber. * * @param {string} message * The message shown on the UI. * @return {string} * The HTML markup for the throbber. */ Drupal.theme.ajaxProgressMessage = message => `
${message}
`; /** * Sets the progress bar progress indicator. */ Drupal.Ajax.prototype.setProgressIndicatorBar = function() { const progressBar = new Drupal.ProgressBar( `ajax-progress-${this.element.id}`, $.noop, this.progress.method, $.noop, ); if (this.progress.message) { progressBar.setProgress(-1, this.progress.message); } if (this.progress.url) { progressBar.startMonitoring( this.progress.url, this.progress.interval || 1500, ); } this.progress.element = $(progressBar.element).addClass( 'ajax-progress ajax-progress-bar', ); this.progress.object = progressBar; $(this.element).after(this.progress.element); }; /** * Sets the throbber progress indicator. */ Drupal.Ajax.prototype.setProgressIndicatorThrobber = function() { this.progress.element = $( Drupal.theme('ajaxProgressThrobber', this.progress.message), ); $(this.element).after(this.progress.element); }; /** * Sets the fullscreen progress indicator. */ Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function() { this.progress.element = $(Drupal.theme('ajaxProgressIndicatorFullscreen')); $('body').after(this.progress.element); }; /** * Handler for the form redirection completion. * * @param {Array.} response * Drupal Ajax response. * @param {number} status * XMLHttpRequest status. */ Drupal.Ajax.prototype.success = function(response, status) { // Remove the progress element. if (this.progress.element) { $(this.progress.element).remove(); } if (this.progress.object) { this.progress.object.stopMonitoring(); } $(this.element).prop('disabled', false); // Save element's ancestors tree so if the element is removed from the dom // we can try to refocus one of its parents. Using addBack reverse the // result array, meaning that index 0 is the highest parent in the hierarchy // in this situation it is usually a
element. const elementParents = $(this.element) .parents('[data-drupal-selector]') .addBack() .toArray(); // Track if any command is altering the focus so we can avoid changing the // focus set by the Ajax command. let focusChanged = false; Object.keys(response || {}).forEach(i => { if (response[i].command && this.commands[response[i].command]) { this.commands[response[i].command](this, response[i], status); if ( response[i].command === 'invoke' && response[i].method === 'focus' ) { focusChanged = true; } } }); // If the focus hasn't be changed by the ajax commands, try to refocus the // triggering element or one of its parents if that element does not exist // anymore. if ( !focusChanged && this.element && !$(this.element).data('disable-refocus') ) { let target = false; for (let n = elementParents.length - 1; !target && n >= 0; n--) { target = document.querySelector( `[data-drupal-selector="${elementParents[n].getAttribute( 'data-drupal-selector', )}"]`, ); } if (target) { $(target).trigger('focus'); } } // Reattach behaviors, if they were detached in beforeSerialize(). The // attachBehaviors() called on the new content from processing the response // commands is not sufficient, because behaviors from the entire form need // to be reattached. if (this.$form) { const settings = this.settings || drupalSettings; Drupal.attachBehaviors(this.$form.get(0), settings); } // Remove any response-specific settings so they don't get used on the next // call by mistake. this.settings = null; }; /** * Build an effect object to apply an effect when adding new HTML. * * @param {object} response * Drupal Ajax response. * @param {string} [response.effect] * Override the default value of {@link Drupal.Ajax#elementSettings}. * @param {string|number} [response.speed] * Override the default value of {@link Drupal.Ajax#elementSettings}. * * @return {object} * Returns an object with `showEffect`, `hideEffect` and `showSpeed` * properties. */ Drupal.Ajax.prototype.getEffect = function(response) { const type = response.effect || this.effect; const speed = response.speed || this.speed; const effect = {}; if (type === 'none') { effect.showEffect = 'show'; effect.hideEffect = 'hide'; effect.showSpeed = ''; } else if (type === 'fade') { effect.showEffect = 'fadeIn'; effect.hideEffect = 'fadeOut'; effect.showSpeed = speed; } else { effect.showEffect = `${type}Toggle`; effect.hideEffect = `${type}Toggle`; effect.showSpeed = speed; } return effect; }; /** * Handler for the form redirection error. * * @param {object} xmlhttprequest * Native XMLHttpRequest object. * @param {string} uri * Ajax Request URI. * @param {string} [customMessage] * Extra message to print with the Ajax error. */ Drupal.Ajax.prototype.error = function(xmlhttprequest, uri, customMessage) { // Remove the progress element. if (this.progress.element) { $(this.progress.element).remove(); } if (this.progress.object) { this.progress.object.stopMonitoring(); } // Undo hide. $(this.wrapper).show(); // Re-enable the element. $(this.element).prop('disabled', false); // Reattach behaviors, if they were detached in beforeSerialize(). if (this.$form) { const settings = this.settings || drupalSettings; Drupal.attachBehaviors(this.$form.get(0), settings); } throw new Drupal.AjaxError(xmlhttprequest, uri, customMessage); }; /** * Provide a wrapper for new content via Ajax. * * Wrap the inserted markup when inserting multiple root elements with an * ajax effect. * * @param {jQuery} $newContent * Response elements after parsing. * @param {Drupal.Ajax} ajax * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * * @deprecated in Drupal 8.6.x and will be removed before Drupal 9.0.0. * Use data with desired wrapper. See https://www.drupal.org/node/2974880. * * @todo Add deprecation warning after it is possible. For more information * see: https://www.drupal.org/project/drupal/issues/2973400 * * @see https://www.drupal.org/node/2940704 */ Drupal.theme.ajaxWrapperNewContent = ($newContent, ajax, response) => (response.effect || ajax.effect) !== 'none' && $newContent.filter( i => !// We can not consider HTML comments or whitespace text as separate // roots, since they do not cause visual regression with effect. ( $newContent[i].nodeName === '#comment' || ($newContent[i].nodeName === '#text' && /^(\s|\n|\r)*$/.test($newContent[i].textContent)) ), ).length > 1 ? Drupal.theme('ajaxWrapperMultipleRootElements', $newContent) : $newContent; /** * Provide a wrapper for multiple root elements via Ajax. * * @param {jQuery} $elements * Response elements after parsing. * * @deprecated in Drupal 8.6.x and will be removed before Drupal 9.0.0. * Use data with desired wrapper. See https://www.drupal.org/node/2974880. * * @todo Add deprecation warning after it is possible. For more information * see: https://www.drupal.org/project/drupal/issues/2973400 * * @see https://www.drupal.org/node/2940704 */ Drupal.theme.ajaxWrapperMultipleRootElements = $elements => $('
').append($elements); /** * @typedef {object} Drupal.AjaxCommands~commandDefinition * * @prop {string} command * @prop {string} [method] * @prop {string} [selector] * @prop {string} [data] * @prop {object} [settings] * @prop {bool} [asterisk] * @prop {string} [text] * @prop {string} [title] * @prop {string} [url] * @prop {object} [argument] * @prop {string} [name] * @prop {string} [value] * @prop {string} [old] * @prop {string} [new] * @prop {bool} [merge] * @prop {Array} [args] * * @see Drupal.AjaxCommands */ /** * Provide a series of commands that the client will perform. * * @constructor */ Drupal.AjaxCommands = function() {}; Drupal.AjaxCommands.prototype = { /** * Command to insert new content into the DOM. * * @param {Drupal.Ajax} ajax * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.data * The data to use with the jQuery method. * @param {string} [response.method] * The jQuery DOM manipulation method to be used. * @param {string} [response.selector] * A optional jQuery selector string. * @param {object} [response.settings] * An optional array of settings that will be used. */ insert(ajax, response) { // Get information from the response. If it is not there, default to // our presets. const $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper); const method = response.method || ajax.method; const effect = ajax.getEffect(response); // Apply any settings from the returned JSON if available. const settings = response.settings || ajax.settings || drupalSettings; // Parse response.data into an element collection. let $newContent = $($.parseHTML(response.data, document, true)); // For backward compatibility, in some cases a wrapper will be added. This // behavior will be removed before Drupal 9.0.0. If different behavior is // needed, the theme functions can be overriden. // @see https://www.drupal.org/node/2940704 $newContent = Drupal.theme( 'ajaxWrapperNewContent', $newContent, ajax, response, ); // If removing content from the wrapper, detach behaviors first. switch (method) { case 'html': case 'replaceWith': case 'replaceAll': case 'empty': case 'remove': Drupal.detachBehaviors($wrapper.get(0), settings); break; default: break; } // Add the new content to the page. $wrapper[method]($newContent); // Immediately hide the new content if we're using any effects. if (effect.showEffect !== 'show') { $newContent.hide(); } // Determine which effect to use and what content will receive the // effect, then show the new content. const $ajaxNewContent = $newContent.find('.ajax-new-content'); if ($ajaxNewContent.length) { $ajaxNewContent.hide(); $newContent.show(); $ajaxNewContent[effect.showEffect](effect.showSpeed); } else if (effect.showEffect !== 'show') { $newContent[effect.showEffect](effect.showSpeed); } // Attach all JavaScript behaviors to the new content, if it was // successfully added to the page, this if statement allows // `#ajax['wrapper']` to be optional. if ($newContent.parents('html').length) { // Attach behaviors to all element nodes. $newContent.each((index, element) => { if (element.nodeType === Node.ELEMENT_NODE) { Drupal.attachBehaviors(element, settings); } }); } }, /** * Command to remove a chunk from the page. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.selector * A jQuery selector string. * @param {object} [response.settings] * An optional array of settings that will be used. * @param {number} [status] * The XMLHttpRequest status. */ remove(ajax, response, status) { const settings = response.settings || ajax.settings || drupalSettings; $(response.selector) .each(function() { Drupal.detachBehaviors(this, settings); }) .remove(); }, /** * Command to mark a chunk changed. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The JSON response object from the Ajax request. * @param {string} response.selector * A jQuery selector string. * @param {bool} [response.asterisk] * An optional CSS selector. If specified, an asterisk will be * appended to the HTML inside the provided selector. * @param {number} [status] * The request status. */ changed(ajax, response, status) { const $element = $(response.selector); if (!$element.hasClass('ajax-changed')) { $element.addClass('ajax-changed'); if (response.asterisk) { $element .find(response.asterisk) .append( ` * `, ); } } }, /** * Command to provide an alert. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The JSON response from the Ajax request. * @param {string} response.text * The text that will be displayed in an alert dialog. * @param {number} [status] * The XMLHttpRequest status. */ alert(ajax, response, status) { window.alert(response.text, response.title); }, /** * Command to set the window.location, redirecting the browser. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.url * The URL to redirect to. * @param {number} [status] * The XMLHttpRequest status. */ redirect(ajax, response, status) { window.location = response.url; }, /** * Command to provide the jQuery css() function. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.selector * A jQuery selector string. * @param {object} response.argument * An array of key/value pairs to set in the CSS for the selector. * @param {number} [status] * The XMLHttpRequest status. */ css(ajax, response, status) { $(response.selector).css(response.argument); }, /** * Command to set the settings used for other commands in this response. * * This method will also remove expired `drupalSettings.ajax` settings. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {bool} response.merge * Determines whether the additional settings should be merged to the * global settings. * @param {object} response.settings * Contains additional settings to add to the global settings. * @param {number} [status] * The XMLHttpRequest status. */ settings(ajax, response, status) { const ajaxSettings = drupalSettings.ajax; // Clean up drupalSettings.ajax. if (ajaxSettings) { Drupal.ajax.expired().forEach(instance => { // If the Ajax object has been created through drupalSettings.ajax // it will have a selector. When there is no selector the object // has been initialized with a special class name picked up by the // Ajax behavior. if (instance.selector) { const selector = instance.selector.replace('#', ''); if (selector in ajaxSettings) { delete ajaxSettings[selector]; } } }); } if (response.merge) { $.extend(true, drupalSettings, response.settings); } else { ajax.settings = response.settings; } }, /** * Command to attach data using jQuery's data API. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.name * The name or key (in the key value pair) of the data attached to this * selector. * @param {string} response.selector * A jQuery selector string. * @param {string|object} response.value * The value of to be attached. * @param {number} [status] * The XMLHttpRequest status. */ data(ajax, response, status) { $(response.selector).data(response.name, response.value); }, /** * Command to apply a jQuery method. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {Array} response.args * An array of arguments to the jQuery method, if any. * @param {string} response.method * The jQuery method to invoke. * @param {string} response.selector * A jQuery selector string. * @param {number} [status] * The XMLHttpRequest status. */ invoke(ajax, response, status) { const $element = $(response.selector); $element[response.method](...response.args); }, /** * Command to restripe a table. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.selector * A jQuery selector string. * @param {number} [status] * The XMLHttpRequest status. */ restripe(ajax, response, status) { // :even and :odd are reversed because jQuery counts from 0 and // we count from 1, so we're out of sync. // Match immediate children of the parent element to allow nesting. $(response.selector) .find('> tbody > tr:visible, > tr:visible') .removeClass('odd even') .filter(':even') .addClass('odd') .end() .filter(':odd') .addClass('even'); }, /** * Command to update a form's build ID. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.old * The old form build ID. * @param {string} response.new * The new form build ID. * @param {number} [status] * The XMLHttpRequest status. */ update_build_id(ajax, response, status) { $(`input[name="form_build_id"][value="${response.old}"]`).val( response.new, ); }, /** * Command to add css. * * Uses the proprietary addImport method if available as browsers which * support that method ignore @import statements in dynamically added * stylesheets. * * @param {Drupal.Ajax} [ajax] * {@link Drupal.Ajax} object created by {@link Drupal.ajax}. * @param {object} response * The response from the Ajax request. * @param {string} response.data * A string that contains the styles to be added. * @param {number} [status] * The XMLHttpRequest status. */ add_css(ajax, response, status) { // Add the styles in the normal way. $('head').prepend(response.data); // Add imports in the styles using the addImport method if available. let match; const importMatch = /^@import url\("(.*)"\);$/gim; if ( document.styleSheets[0].addImport && importMatch.test(response.data) ) { importMatch.lastIndex = 0; do { match = importMatch.exec(response.data); document.styleSheets[0].addImport(match[1]); } while (match); } }, }; })(jQuery, window, Drupal, drupalSettings);