1078 lines
36 KiB
JavaScript
1078 lines
36 KiB
JavaScript
/**
|
|
* @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) {
|
|
|
|
"use strict";
|
|
|
|
/**
|
|
* Attaches the Ajax behavior to each Ajax form element.
|
|
*
|
|
* @type {Drupal~behavior}
|
|
*/
|
|
Drupal.behaviors.AJAX = {
|
|
attach: function (context, settings) {
|
|
|
|
function loadAjaxBehavior(base) {
|
|
var element_settings = settings.ajax[base];
|
|
if (typeof element_settings.selector === 'undefined') {
|
|
element_settings.selector = '#' + base;
|
|
}
|
|
$(element_settings.selector).once('drupal-ajax').each(function () {
|
|
element_settings.element = this;
|
|
element_settings.base = base;
|
|
Drupal.ajax(element_settings);
|
|
});
|
|
}
|
|
|
|
// Load all Ajax behaviors specified in the settings.
|
|
for (var base in settings.ajax) {
|
|
if (settings.ajax.hasOwnProperty(base)) {
|
|
loadAjaxBehavior(base);
|
|
}
|
|
}
|
|
|
|
// Bind Ajax behaviors to all items showing the class.
|
|
$('.use-ajax').once('ajax').each(function () {
|
|
var 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.
|
|
if ($(this).attr('href')) {
|
|
element_settings.url = $(this).attr('href');
|
|
element_settings.event = 'click';
|
|
}
|
|
element_settings.dialogType = $(this).data('dialog-type');
|
|
element_settings.dialog = $(this).data('dialog-options');
|
|
element_settings.base = $(this).attr('id');
|
|
element_settings.element = this;
|
|
Drupal.ajax(element_settings);
|
|
});
|
|
|
|
// This class means to submit the form to the action using Ajax.
|
|
$('.use-ajax-submit').once('ajax').each(function () {
|
|
var element_settings = {};
|
|
|
|
// Ajax submits specified in this manner automatically submit to the
|
|
// normal form action.
|
|
element_settings.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.
|
|
element_settings.setClick = true;
|
|
// Form buttons use the 'click' event rather than mousedown.
|
|
element_settings.event = 'click';
|
|
// Clicked form buttons look better with the throbber than the progress
|
|
// bar.
|
|
element_settings.progress = {'type': 'throbber'};
|
|
element_settings.base = $(this).attr('id');
|
|
element_settings.element = this;
|
|
|
|
Drupal.ajax(element_settings);
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
Drupal.AjaxError = function (xmlhttp, uri) {
|
|
|
|
var statusCode;
|
|
var statusText;
|
|
var pathText;
|
|
var responseText;
|
|
var readyStateText;
|
|
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.");
|
|
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.
|
|
readyStateText = xmlhttp.status === 0 ? ("\n" + Drupal.t("ReadyState: !readyState", {'!readyState': xmlhttp.readyState})) : "";
|
|
|
|
/**
|
|
* Formatted and translated error message.
|
|
*
|
|
* @type {string}
|
|
*/
|
|
this.message = statusCode + pathText + statusText + 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}
|
|
*
|
|
* @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.
|
|
var base = settings.base || false;
|
|
var 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;
|
|
}
|
|
|
|
var 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>}
|
|
*/
|
|
Drupal.ajax.instances = [];
|
|
|
|
/**
|
|
* 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 {object} element_settings
|
|
* @param {string} element_settings.url
|
|
* Target of the Ajax request.
|
|
* @param {string} [element_settings.event]
|
|
* Event bound to settings.element which will trigger the Ajax request.
|
|
* @param {string} [element_settings.method]
|
|
* Name of the jQuery method used to insert new content in the targeted
|
|
* element.
|
|
*/
|
|
Drupal.Ajax = function (base, element, element_settings) {
|
|
var 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, element_settings);
|
|
|
|
/**
|
|
* @type {Drupal.AjaxCommands}
|
|
*/
|
|
this.commands = new Drupal.AjaxCommands();
|
|
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;
|
|
|
|
/**
|
|
* @type {object}
|
|
*/
|
|
this.element_settings = element_settings;
|
|
|
|
// 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) {
|
|
var $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).
|
|
this.url = this.url.replace(/\/nojs(\/|$|\?|#)/g, '/ajax$1');
|
|
|
|
// Set the options for the ajaxSubmit function.
|
|
// The 'this' variable will not persist inside of the options object.
|
|
var ajax = this;
|
|
|
|
/**
|
|
* Options for the ajaxSubmit function.
|
|
*
|
|
* @name Drupal.Ajax#options
|
|
*
|
|
* @type {object}
|
|
*
|
|
* @prop {string} url
|
|
* @prop {object} data
|
|
* @prop {function} beforeSerialize
|
|
* @prop {function} beforeSubmit
|
|
* @prop {function} beforeSend
|
|
* @prop {function} success
|
|
* @prop {function} complete
|
|
* @prop {string} dataType
|
|
* @prop {object} accepts
|
|
* @prop {string} accepts.json
|
|
* @prop {string} type
|
|
*/
|
|
ajax.options = {
|
|
url: ajax.url,
|
|
data: ajax.submit,
|
|
beforeSerialize: function (element_settings, options) {
|
|
return ajax.beforeSerialize(element_settings, options);
|
|
},
|
|
beforeSubmit: function (form_values, element_settings, options) {
|
|
ajax.ajaxing = true;
|
|
return ajax.beforeSubmit(form_values, element_settings, options);
|
|
},
|
|
beforeSend: function (xmlhttprequest, options) {
|
|
ajax.ajaxing = true;
|
|
return ajax.beforeSend(xmlhttprequest, options);
|
|
},
|
|
success: function (response, status) {
|
|
// 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);
|
|
}
|
|
return ajax.success(response, status);
|
|
},
|
|
complete: function (response, status) {
|
|
ajax.ajaxing = false;
|
|
if (status === 'error' || status === 'parsererror') {
|
|
return ajax.error(response, ajax.url);
|
|
}
|
|
},
|
|
dataType: 'json',
|
|
type: 'POST'
|
|
};
|
|
|
|
if (element_settings.dialog) {
|
|
ajax.options.data.dialogOptions = element_settings.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 += '&';
|
|
}
|
|
ajax.options.url += Drupal.ajax.WRAPPER_FORMAT + '=drupal_' + (element_settings.dialogType || 'ajax');
|
|
|
|
// Bind the ajaxSubmit function to the element event.
|
|
$(ajax.element).on(element_settings.event, function (event) {
|
|
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 (element_settings.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 (element_settings.prevent) {
|
|
$(ajax.element).on(element_settings.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}
|
|
*/
|
|
Drupal.ajax.WRAPPER_FORMAT = '_wrapper_format';
|
|
|
|
/**
|
|
* Request parameter to indicate that a request is a Drupal Ajax request.
|
|
*
|
|
* @const
|
|
*/
|
|
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.
|
|
*/
|
|
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);
|
|
$.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);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
Drupal.Ajax.prototype.keypressResponse = function (element, event) {
|
|
// Create a synonym for this to reduce code confusion.
|
|
var 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();
|
|
$(ajax.element_settings.element).trigger(ajax.element_settings.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
|
|
* @param {jQuery.Event} event
|
|
*/
|
|
Drupal.Ajax.prototype.eventResponse = function (element, event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
// Create a synonym for this to reduce code confusion.
|
|
var 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 {HTMLElement} element
|
|
* @param {object} options
|
|
* @param {object} options.data
|
|
*/
|
|
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) {
|
|
var 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()
|
|
var 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 {object} form_values
|
|
* @param {HTMLElement} element
|
|
* @param {object} options
|
|
*/
|
|
Drupal.Ajax.prototype.beforeSubmit = function (form_values, 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
|
|
* @param {object} options
|
|
* @param {object} options.extraData
|
|
*/
|
|
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.
|
|
var 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.
|
|
var 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);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the progress bar progress indicator.
|
|
*/
|
|
Drupal.Ajax.prototype.setProgressIndicatorBar = function () {
|
|
var 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 = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber"> </div></div>');
|
|
if (this.progress.message) {
|
|
this.progress.element.find('.throbber').after('<div class="message">' + this.progress.message + '</div>');
|
|
}
|
|
$(this.element).after(this.progress.element);
|
|
};
|
|
|
|
/**
|
|
* Sets the fullscreen progress indicator.
|
|
*/
|
|
Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function () {
|
|
this.progress.element = $('<div class="ajax-progress ajax-progress-fullscreen"> </div>');
|
|
$('body').after(this.progress.element);
|
|
};
|
|
|
|
/**
|
|
* Handler for the form redirection completion.
|
|
*
|
|
* @param {Array.<Drupal.AjaxCommands~commandDefinition>} response
|
|
* @param {number} 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);
|
|
|
|
for (var i in response) {
|
|
if (response.hasOwnProperty(i) && response[i].command && this.commands[response[i].command]) {
|
|
this.commands[response[i].command](this, response[i], status);
|
|
}
|
|
}
|
|
|
|
// 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) {
|
|
var 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
|
|
* @param {string} [response.effect]
|
|
* @param {string|number} [response.speed]
|
|
*
|
|
* @return {object}
|
|
*/
|
|
Drupal.Ajax.prototype.getEffect = function (response) {
|
|
var type = response.effect || this.effect;
|
|
var speed = response.speed || this.speed;
|
|
|
|
var 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} response
|
|
* @param {string} uri
|
|
*/
|
|
Drupal.Ajax.prototype.error = function (response, uri) {
|
|
// 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) {
|
|
var settings = response.settings || this.settings || drupalSettings;
|
|
Drupal.attachBehaviors(this.$form.get(0), settings);
|
|
}
|
|
throw new Drupal.AjaxError(response, uri);
|
|
};
|
|
|
|
/**
|
|
* @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
|
|
* @param {object} response
|
|
* @param {string} response.data
|
|
* @param {string} [response.method]
|
|
* @param {string} [response.selector]
|
|
* @param {object} [response.settings]
|
|
* @param {number} [status]
|
|
*/
|
|
insert: function (ajax, response, status) {
|
|
// Get information from the response. If it is not there, default to
|
|
// our presets.
|
|
var wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
|
|
var method = response.method || ajax.method;
|
|
var effect = ajax.getEffect(response);
|
|
var settings;
|
|
|
|
// We don't know what response.data contains: it might be a string of text
|
|
// without HTML, so don't rely on jQuery correctly interpreting
|
|
// $(response.data) as new HTML rather than a CSS selector. Also, if
|
|
// response.data contains top-level text nodes, they get lost with either
|
|
// $(response.data) or $('<div></div>').replaceWith(response.data).
|
|
var new_content_wrapped = $('<div></div>').html(response.data);
|
|
var new_content = new_content_wrapped.contents();
|
|
|
|
// For legacy reasons, the effects processing code assumes that
|
|
// new_content consists of a single top-level element. Also, it has not
|
|
// been sufficiently tested whether attachBehaviors() can be successfully
|
|
// called with a context object that includes top-level text nodes.
|
|
// However, to give developers full control of the HTML appearing in the
|
|
// page, and to enable Ajax content to be inserted in places where DIV
|
|
// elements are not allowed (e.g., within TABLE, TR, and SPAN parents),
|
|
// we check if the new content satisfies the requirement of a single
|
|
// top-level element, and only use the container DIV created above when
|
|
// it doesn't. For more information, please see
|
|
// https://www.drupal.org/node/736066.
|
|
if (new_content.length !== 1 || new_content.get(0).nodeType !== 1) {
|
|
new_content = new_content_wrapped;
|
|
}
|
|
|
|
// If removing content from the wrapper, detach behaviors first.
|
|
switch (method) {
|
|
case 'html':
|
|
case 'replaceWith':
|
|
case 'replaceAll':
|
|
case 'empty':
|
|
case 'remove':
|
|
settings = response.settings || ajax.settings || drupalSettings;
|
|
Drupal.detachBehaviors(wrapper.get(0), settings);
|
|
}
|
|
|
|
// Add the new content to the page.
|
|
wrapper[method](new_content);
|
|
|
|
// Immediately hide the new content if we're using any effects.
|
|
if (effect.showEffect !== 'show') {
|
|
new_content.hide();
|
|
}
|
|
|
|
// Determine which effect to use and what content will receive the
|
|
// effect, then show the new content.
|
|
if (new_content.find('.ajax-new-content').length > 0) {
|
|
new_content.find('.ajax-new-content').hide();
|
|
new_content.show();
|
|
new_content.find('.ajax-new-content')[effect.showEffect](effect.showSpeed);
|
|
}
|
|
else if (effect.showEffect !== 'show') {
|
|
new_content[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 (new_content.parents('html').length > 0) {
|
|
// Apply any settings from the returned JSON if available.
|
|
settings = response.settings || ajax.settings || drupalSettings;
|
|
Drupal.attachBehaviors(new_content.get(0), settings);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Command to remove a chunk from the page.
|
|
*
|
|
* @param {Drupal.Ajax} [ajax]
|
|
* @param {object} response
|
|
* @param {string} response.selector
|
|
* @param {object} [response.settings]
|
|
* @param {number} [status]
|
|
*/
|
|
remove: function (ajax, response, status) {
|
|
var 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]
|
|
* @param {object} response
|
|
* @param {string} response.selector
|
|
* @param {bool} [response.asterisk]
|
|
* @param {number} [status]
|
|
*/
|
|
changed: function (ajax, response, status) {
|
|
if (!$(response.selector).hasClass('ajax-changed')) {
|
|
$(response.selector).addClass('ajax-changed');
|
|
if (response.asterisk) {
|
|
$(response.selector).find(response.asterisk).append(' <abbr class="ajax-changed" title="' + Drupal.t('Changed') + '">*</abbr> ');
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Command to provide an alert.
|
|
*
|
|
* @param {Drupal.Ajax} [ajax]
|
|
* @param {object} response
|
|
* @param {string} response.text
|
|
* @param {string} response.title
|
|
* @param {number} [status]
|
|
*/
|
|
alert: function (ajax, response, status) {
|
|
window.alert(response.text, response.title);
|
|
},
|
|
|
|
/**
|
|
* Command to set the window.location, redirecting the browser.
|
|
*
|
|
* @param {Drupal.Ajax} [ajax]
|
|
* @param {object} response
|
|
* @param {string} response.url
|
|
* @param {number} [status]
|
|
*/
|
|
redirect: function (ajax, response, status) {
|
|
window.location = response.url;
|
|
},
|
|
|
|
/**
|
|
* Command to provide the jQuery css() function.
|
|
*
|
|
* @param {Drupal.Ajax} [ajax]
|
|
* @param {object} response
|
|
* @param {object} response.argument
|
|
* @param {number} [status]
|
|
*/
|
|
css: function (ajax, response, status) {
|
|
$(response.selector).css(response.argument);
|
|
},
|
|
|
|
/**
|
|
* Command to set the settings used for other commands in this response.
|
|
*
|
|
* @param {Drupal.Ajax} [ajax]
|
|
* @param {object} response
|
|
* @param {bool} response.merge
|
|
* @param {object} response.settings
|
|
* @param {number} [status]
|
|
*/
|
|
settings: function (ajax, response, status) {
|
|
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]
|
|
* @param {object} response
|
|
* @param {string} response.name
|
|
* @param {string} response.selector
|
|
* @param {string|object} response.value
|
|
* @param {number} [status]
|
|
*/
|
|
data: function (ajax, response, status) {
|
|
$(response.selector).data(response.name, response.value);
|
|
},
|
|
|
|
/**
|
|
* Command to apply a jQuery method.
|
|
*
|
|
* @param {Drupal.Ajax} [ajax]
|
|
* @param {object} response
|
|
* @param {Array} response.args
|
|
* @param {string} response.method
|
|
* @param {string} response.selector
|
|
* @param {number} [status]
|
|
*/
|
|
invoke: function (ajax, response, status) {
|
|
var $element = $(response.selector);
|
|
$element[response.method].apply($element, response.args);
|
|
},
|
|
|
|
/**
|
|
* Command to restripe a table.
|
|
*
|
|
* @param {Drupal.Ajax} [ajax]
|
|
* @param {object} response
|
|
* @param {string} response.selector
|
|
* @param {number} [status]
|
|
*/
|
|
restripe: function (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]
|
|
* @param {object} response
|
|
* @param {string} response.old
|
|
* @param {string} response.new
|
|
* @param {number} [status]
|
|
*/
|
|
update_build_id: function (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]
|
|
* @param {object} response
|
|
* @param {string} response.data
|
|
* @param {number} [status]
|
|
*/
|
|
add_css: function (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.
|
|
var match;
|
|
var importMatch = /^@import url\("(.*)"\);$/igm;
|
|
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, this, Drupal, drupalSettings);
|