drupal/core/misc/ajax.js

670 lines
20 KiB
JavaScript

/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function ($, window, Drupal, drupalSettings, _ref) {
let {
isFocusable,
tabbable
} = _ref;
Drupal.behaviors.AJAX = {
attach(context, settings) {
function loadAjaxBehavior(base) {
const elementSettings = settings.ajax[base];
if (typeof elementSettings.selector === 'undefined') {
elementSettings.selector = `#${base}`;
}
once('drupal-ajax', $(elementSettings.selector)).forEach(el => {
elementSettings.element = el;
elementSettings.base = base;
Drupal.ajax(elementSettings);
});
}
Object.keys(settings.ajax || {}).forEach(base => loadAjaxBehavior(base));
Drupal.ajax.bindAjaxLinks(document.body);
once('ajax', '.use-ajax-submit').forEach(el => {
const elementSettings = {};
elementSettings.url = $(el.form).attr('action');
elementSettings.setClick = true;
elementSettings.event = 'click';
elementSettings.progress = {
type: 'throbber'
};
elementSettings.base = el.id;
elementSettings.element = el;
Drupal.ajax(elementSettings);
});
},
detach(context, settings, trigger) {
if (trigger === 'unload') {
Drupal.ajax.expired().forEach(instance => {
Drupal.ajax.instances[instance.instanceIndex] = null;
});
}
}
};
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 = '';
try {
statusText = `\n${Drupal.t('StatusText: !statusText', {
'!statusText': xmlhttp.statusText.trim()
})}`;
} catch (e) {}
responseText = '';
try {
responseText = `\n${Drupal.t('ResponseText: !responseText', {
'!responseText': xmlhttp.responseText.trim()
})}`;
} catch (e) {}
responseText = responseText.replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, '');
responseText = responseText.replace(/[\n]+\s+/g, '\n');
const readyStateText = xmlhttp.status === 0 ? `\n${Drupal.t('ReadyState: !readyState', {
'!readyState': xmlhttp.readyState
})}` : '';
customMessage = customMessage ? `\n${Drupal.t('CustomMessage: !customMessage', {
'!customMessage': customMessage
})}` : '';
this.message = statusCode + pathText + statusText + customMessage + responseText + readyStateText;
this.name = 'AjaxError';
};
Drupal.AjaxError.prototype = new Error();
Drupal.AjaxError.prototype.constructor = Drupal.AjaxError;
Drupal.ajax = function (settings) {
if (arguments.length !== 1) {
throw new Error('Drupal.ajax() function must be called with one configuration object only');
}
const base = settings.base || false;
const element = settings.element || false;
delete settings.base;
delete settings.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;
};
Drupal.ajax.instances = [];
Drupal.ajax.expired = function () {
return Drupal.ajax.instances.filter(instance => instance && instance.element !== false && !document.body.contains(instance.element));
};
Drupal.ajax.bindAjaxLinks = element => {
once('ajax', '.use-ajax', element).forEach(ajaxLink => {
const $linkElement = $(ajaxLink);
const 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
};
const href = $linkElement.attr('href');
if (href) {
elementSettings.url = href;
elementSettings.event = 'click';
}
Drupal.ajax(elementSettings);
});
};
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);
this.commands = new Drupal.AjaxCommands();
this.instanceIndex = false;
if (this.wrapper) {
this.wrapper = `#${this.wrapper}`;
}
this.element = element;
this.elementSettings = elementSettings;
if (this.element && this.element.form) {
this.$form = $(this.element.form);
}
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');
}
}
const originalUrl = this.url;
this.url = this.url.replace(/\/nojs(\/|$|\?|#)/, '/ajax$1');
if (drupalSettings.ajaxTrustedUrl[originalUrl]) {
drupalSettings.ajaxTrustedUrl[this.url] = true;
}
const ajax = this;
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) {
if (typeof response === 'string') {
response = $.parseJSON(response);
}
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',
jsonp: false,
type: 'POST'
};
if (elementSettings.dialog) {
ajax.options.data.dialogOptions = elementSettings.dialog;
}
if (ajax.options.url.indexOf('?') === -1) {
ajax.options.url += '?';
} else {
ajax.options.url += '&';
}
let wrapper = `drupal_${elementSettings.dialogType || 'ajax'}`;
if (elementSettings.dialogRenderer) {
wrapper += `.${elementSettings.dialogRenderer}`;
}
ajax.options.url += `${Drupal.ajax.WRAPPER_FORMAT}=${wrapper}`;
$(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 (elementSettings.keypress) {
$(ajax.element).on('keypress', function (event) {
return ajax.keypressResponse(this, event);
});
}
if (elementSettings.prevent) {
$(ajax.element).on(elementSettings.prevent, false);
}
};
Drupal.ajax.WRAPPER_FORMAT = '_wrapper_format';
Drupal.Ajax.AJAX_REQUEST_PARAMETER = '_drupal_ajax';
Drupal.Ajax.prototype.execute = function () {
if (this.ajaxing) {
return;
}
try {
this.beforeSerialize(this.element, this.options);
return $.ajax(this.options);
} catch (e) {
this.ajaxing = false;
window.alert(`An error occurred while attempting to process ${this.options.url}: ${e.message}`);
return $.Deferred().reject();
}
};
Drupal.Ajax.prototype.keypressResponse = function (element, event) {
const ajax = this;
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);
}
};
Drupal.Ajax.prototype.eventResponse = function (element, event) {
event.preventDefault();
event.stopPropagation();
const ajax = this;
if (ajax.ajaxing) {
return;
}
try {
if (ajax.$form) {
if (ajax.setClick) {
element.form.clk = element;
}
ajax.$form.ajaxSubmit(ajax.options);
} else {
ajax.beforeSerialize(ajax.element, ajax.options);
$.ajax(ajax.options);
}
} catch (e) {
ajax.ajaxing = false;
window.alert(`An error occurred while attempting to process ${ajax.options.url}: ${e.message}`);
}
};
Drupal.Ajax.prototype.beforeSerialize = function (element, options) {
if (this.$form && document.body.contains(this.$form.get(0))) {
const settings = this.settings || drupalSettings;
Drupal.detachBehaviors(this.$form.get(0), settings, 'serialize');
}
options.data[Drupal.Ajax.AJAX_REQUEST_PARAMETER] = 1;
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;
};
Drupal.Ajax.prototype.beforeSubmit = function (formValues, element, options) {};
Drupal.Ajax.prototype.beforeSend = function (xmlhttprequest, options) {
if (this.$form) {
options.extraData = options.extraData || {};
options.extraData.ajax_iframe_upload = '1';
const v = $.fieldValue(this.element);
if (v !== null) {
options.extraData[this.element.name] = v;
}
}
$(this.element).prop('disabled', true);
if (!this.progress || !this.progress.type) {
return;
}
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);
}
};
Drupal.theme.ajaxProgressThrobber = message => {
const messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : '';
const throbber = '<div class="throbber">&nbsp;</div>';
return `<div class="ajax-progress ajax-progress-throbber">${throbber}${messageMarkup}</div>`;
};
Drupal.theme.ajaxProgressIndicatorFullscreen = () => '<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>';
Drupal.theme.ajaxProgressMessage = message => `<div class="message">${message}</div>`;
Drupal.theme.ajaxProgressBar = $element => $('<div class="ajax-progress ajax-progress-bar"></div>').append($element);
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 = $(Drupal.theme('ajaxProgressBar', progressBar.element));
this.progress.object = progressBar;
$(this.element).after(this.progress.element);
};
Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () {
this.progress.element = $(Drupal.theme('ajaxProgressThrobber', this.progress.message));
$(this.element).after(this.progress.element);
};
Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function () {
this.progress.element = $(Drupal.theme('ajaxProgressIndicatorFullscreen'));
$('body').append(this.progress.element);
};
Drupal.Ajax.prototype.success = function (response, status) {
if (this.progress.element) {
$(this.progress.element).remove();
}
if (this.progress.object) {
this.progress.object.stopMonitoring();
}
$(this.element).prop('disabled', false);
const elementParents = $(this.element).parents('[data-drupal-selector]').addBack().toArray();
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' || response[i].command === 'focusFirst') {
focusChanged = true;
}
}
});
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');
}
}
if (this.$form && document.body.contains(this.$form.get(0))) {
const settings = this.settings || drupalSettings;
Drupal.attachBehaviors(this.$form.get(0), settings);
}
this.settings = null;
};
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;
};
Drupal.Ajax.prototype.error = function (xmlhttprequest, uri, customMessage) {
if (this.progress.element) {
$(this.progress.element).remove();
}
if (this.progress.object) {
this.progress.object.stopMonitoring();
}
$(this.wrapper).show();
$(this.element).prop('disabled', false);
if (this.$form && document.body.contains(this.$form.get(0))) {
const settings = this.settings || drupalSettings;
Drupal.attachBehaviors(this.$form.get(0), settings);
}
throw new Drupal.AjaxError(xmlhttprequest, uri, customMessage);
};
Drupal.theme.ajaxWrapperNewContent = ($newContent, ajax, response) => (response.effect || ajax.effect) !== 'none' && $newContent.filter(i => !($newContent[i].nodeName === '#comment' || $newContent[i].nodeName === '#text' && /^(\s|\n|\r)*$/.test($newContent[i].textContent))).length > 1 ? Drupal.theme('ajaxWrapperMultipleRootElements', $newContent) : $newContent;
Drupal.theme.ajaxWrapperMultipleRootElements = $elements => $('<div></div>').append($elements);
Drupal.AjaxCommands = function () {};
Drupal.AjaxCommands.prototype = {
insert(ajax, response) {
const $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
const method = response.method || ajax.method;
const effect = ajax.getEffect(response);
const settings = response.settings || ajax.settings || drupalSettings;
let $newContent = $($.parseHTML(response.data, document, true));
$newContent = Drupal.theme('ajaxWrapperNewContent', $newContent, ajax, response);
switch (method) {
case 'html':
case 'replaceWith':
case 'replaceAll':
case 'empty':
case 'remove':
Drupal.detachBehaviors($wrapper.get(0), settings);
break;
default:
break;
}
$wrapper[method]($newContent);
if (effect.showEffect !== 'show') {
$newContent.hide();
}
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);
}
if ($newContent.parents('html').length) {
$newContent.each((index, element) => {
if (element.nodeType === Node.ELEMENT_NODE) {
Drupal.attachBehaviors(element, settings);
}
});
}
},
remove(ajax, response, status) {
const settings = response.settings || ajax.settings || drupalSettings;
$(response.selector).each(function () {
Drupal.detachBehaviors(this, settings);
}).remove();
},
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(` <abbr class="ajax-changed" title="${Drupal.t('Changed')}">*</abbr> `);
}
}
},
alert(ajax, response, status) {
window.alert(response.text);
},
announce(ajax, response) {
if (response.priority) {
Drupal.announce(response.text, response.priority);
} else {
Drupal.announce(response.text);
}
},
redirect(ajax, response, status) {
window.location = response.url;
},
css(ajax, response, status) {
$(response.selector).css(response.argument);
},
settings(ajax, response, status) {
const ajaxSettings = drupalSettings.ajax;
if (ajaxSettings) {
Drupal.ajax.expired().forEach(instance => {
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;
}
},
data(ajax, response, status) {
$(response.selector).data(response.name, response.value);
},
focusFirst(ajax, response, status) {
let focusChanged = false;
const container = document.querySelector(response.selector);
if (container) {
const tabbableElements = tabbable(container);
if (tabbableElements.length) {
tabbableElements[0].focus();
focusChanged = true;
} else if (isFocusable(container)) {
container.focus();
focusChanged = true;
}
}
if (ajax.hasOwnProperty('element') && !focusChanged) {
ajax.element.focus();
}
},
invoke(ajax, response, status) {
const $element = $(response.selector);
$element[response.method](...response.args);
},
restripe(ajax, response, status) {
$(response.selector).find('> tbody > tr:visible, > tr:visible').removeClass('odd even').filter(':even').addClass('odd').end().filter(':odd').addClass('even');
},
update_build_id(ajax, response, status) {
document.querySelectorAll(`input[name="form_build_id"][value="${response.old}"]`).forEach(item => {
item.value = response.new;
});
},
add_css(ajax, response, status) {
$('head').prepend(response.data);
},
message(ajax, response) {
const messages = new Drupal.Message(document.querySelector(response.messageWrapperQuerySelector));
if (response.clearPrevious) {
messages.clear();
}
messages.add(response.message, response.messageOptions);
}
};
})(jQuery, window, Drupal, drupalSettings, window.tabbable);