diff --git a/core/misc/ajax.js b/core/misc/ajax.js index e2aeab1..1f320e1 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -3,20 +3,6 @@ "use strict"; /** - * Provides Ajax page updating via jQuery $.ajax (Asynchronous JavaScript and XML). - * - * 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. - */ - - Drupal.ajax = Drupal.ajax || {}; - - /** * Attaches the Ajax behavior to each Ajax form element. */ Drupal.behaviors.AJAX = { @@ -29,7 +15,7 @@ } $(element_settings.selector).once('drupal-ajax').each(function () { element_settings.element = this; - Drupal.ajax[element_settings.selector] = new Drupal.ajax(base, this, element_settings); + Drupal.ajax(element_settings, base, this); }); } @@ -55,7 +41,7 @@ element_settings.accepts = $(this).data('accepts'); element_settings.dialog = $(this).data('dialog-options'); var baseUseAjax = $(this).attr('id'); - Drupal.ajax[baseUseAjax] = new Drupal.ajax(baseUseAjax, this, element_settings); + Drupal.ajax(element_settings, baseUseAjax, this); }); // This class means to submit the form to the action using Ajax. @@ -74,13 +60,13 @@ element_settings.progress = {'type': 'throbber'}; var baseUseAjaxSubmit = $(this).attr('id'); - Drupal.ajax[baseUseAjaxSubmit] = new Drupal.ajax(baseUseAjaxSubmit, this, element_settings); + Drupal.ajax(element_settings, baseUseAjaxSubmit, this); }); } }; /** - * Extends Error to provide handling for Errors in AJAX + * Extends Error to provide handling for Errors in Ajax */ Drupal.AjaxError = function (xmlhttp, uri) { @@ -133,19 +119,22 @@ Drupal.AjaxError.prototype.constructor = Drupal.AjaxError; /** - * Ajax object. + * Provides Ajax page updating via jQuery $.ajax. + * + * 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. * - * All Ajax objects on a page are accessible through the global Drupal.ajax - * object and are keyed by the submit button's ID. You can access them from - * your module's JavaScript file to override properties or functions. + * All Ajax objects on a page are accessible through Drupal.ajax.instances. * - * For example, if your Ajax enabled button has the ID 'edit-submit', you can - * redefine the function that is called to insert the new content like this - * (inside a Drupal.behaviors attach block): * @code * Drupal.behaviors.myCustomAJAXStuff = { * attach: function (context, settings) { - * Drupal.ajax['edit-submit'].commands.insert = function (ajax, response, status) { + * var myAjaxObject = Drupal.ajax(ajaxSettings); + * myAjaxObject.commands.insert = function (ajax, response, status) { * new_content = $(response.data); * $('#my-wrapper').append(new_content); * alert('New content was appended to #my-wrapper'); @@ -153,12 +142,41 @@ * } * }; * @endcode + * + * @see Drupal.AjaxCommands + * + * @return {Drupal.Ajax} + */ + Drupal.ajax = function (settings, base, element) { + if (typeof settings !== 'object') { + throw new Error('Ajax settings are required.'); + } + if (arguments.length === 1) { + base = null; + element = null; + } + 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.instances = []; + + /** + * Ajax constructor. */ - Drupal.ajax = function (base, element, element_settings) { + Drupal.Ajax = function (base, element, element_settings) { var defaults = { - event: 'mousedown', + event: element ? 'mousedown' : null, keypress: true, - selector: '#' + base, + selector: base ? '#' + base : null, effect: 'none', speed: 'none', method: 'replaceWith', @@ -174,6 +192,7 @@ $.extend(this, defaults, element_settings); this.commands = new Drupal.AjaxCommands(); + this.instanceIndex = false; // @todo Remove this after refactoring the PHP code to: // - Call this 'selector'. @@ -188,24 +207,25 @@ // If there isn't a form, jQuery.ajax() will be used instead, allowing us to // bind Ajax to links as well. - if (this.element.form) { + if (this.element && this.element.form) { this.$form = $(this.element.form); } // If no Ajax callback URL was given, use the link href or form action. if (!this.url) { - if ($(element).is('a')) { - this.url = $(element).attr('href'); + var $element = $(this.element); + if ($element.is('a')) { + this.url = $element.attr('href'); } - else if (element.form) { + else if (this.element && element.form) { this.url = this.$form.attr('action'); // @todo If there's a file input on this form, then jQuery will submit the - // AJAX response with a hidden Iframe rather than the XHR object. If the + // Ajax response with a hidden Iframe rather than the XHR object. If the // response to the submission is an HTTP redirect, then the Iframe will // follow it, but the server won't content negotiate it correctly, // because there won't be an ajax_iframe_upload POST variable. Until we - // figure out a work around to this problem, we prevent AJAX-enabling + // figure out a work around to this problem, we prevent Ajax-enabling // elements that submit to the same URL as the form when there's a file // input. For example, this means the Delete button on the edit form of // an Article node doesn't open its confirmation form in a dialog. @@ -282,13 +302,37 @@ // 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. + // Ajax behavior binds to mousedown. if (element_settings.prevent) { $(ajax.element).on(element_settings.prevent, false); } }; /** + * 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 @@ -298,7 +342,7 @@ * 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. */ - Drupal.ajax.prototype.keypressResponse = function (element, event) { + Drupal.Ajax.prototype.keypressResponse = function (element, event) { // Create a synonym for this to reduce code confusion. var ajax = this; @@ -321,16 +365,16 @@ * 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. + * Ajax object. */ - Drupal.ajax.prototype.eventResponse = function (element, 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. + // Do not perform another Ajax command if one is already in progress. if (ajax.ajaxing) { return; } @@ -368,7 +412,7 @@ * Runs before the beforeSend() handler (see below), and unlike that one, runs * before field data is collected. */ - Drupal.ajax.prototype.beforeSerialize = function (element, 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 @@ -404,7 +448,7 @@ /** * Modify form values prior to form submission. */ - Drupal.ajax.prototype.beforeSubmit = function (form_values, element, 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. }; @@ -412,7 +456,7 @@ /** * Prepare the Ajax request before it is sent. */ - Drupal.ajax.prototype.beforeSend = function (xmlhttprequest, 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 @@ -447,36 +491,57 @@ // from changing its value. $(this.element).prop('disabled', true); - // Insert progressbar or throbber. - if (this.progress.type === 'bar') { - 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); + if (!this.progress || !this.progress.type) { + return; } - else if (this.progress.type === 'throbber') { - this.progress.element = $('
 
'); - if (this.progress.message) { - this.progress.element.find('.throbber').after('
' + this.progress.message + '
'); - } + + // 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); $(this.element).after(this.progress.element); } - else if (this.progress.type === 'fullscreen') { - this.progress.element = $('
 
'); - $('body').after(this.progress.element); + }; + + /** + * 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 = $('
 
'); + if (this.progress.message) { + this.progress.element.find('.throbber').after('
' + this.progress.message + '
'); + } + $(this.element).after(this.progress.element); + }; + + /** + * Sets the fullscreen progress indicator. + */ + Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function() { + this.progress.element = $('
 
'); + $('body').after(this.progress.element); }; /** * Handler for the form redirection completion. */ - Drupal.ajax.prototype.success = function (response, status) { + Drupal.Ajax.prototype.success = function (response, status) { // Remove the progress element. if (this.progress.element) { $(this.progress.element).remove(); @@ -509,7 +574,7 @@ /** * Build an effect object which tells us how to apply the effect when adding new HTML. */ - Drupal.ajax.prototype.getEffect = function (response) { + Drupal.Ajax.prototype.getEffect = function (response) { var type = response.effect || this.effect; var speed = response.speed || this.speed; @@ -536,7 +601,7 @@ /** * Handler for the form redirection error. */ - Drupal.ajax.prototype.error = function (response, uri) { + Drupal.Ajax.prototype.error = function (response, uri) { // Remove the progress element. if (this.progress.element) { $(this.progress.element).remove(); diff --git a/core/modules/ckeditor/js/ckeditor.js b/core/modules/ckeditor/js/ckeditor.js index 1596808..3046884 100644 --- a/core/modules/ckeditor/js/ckeditor.js +++ b/core/modules/ckeditor/js/ckeditor.js @@ -158,22 +158,19 @@ // Add a "Loading…" message, hide it underneath the CKEditor toolbar, create // a Drupal.ajax instance to load the dialog and trigger it. - var $content = $('
' + Drupal.t('Loading...') + '
'); + var $content = $('
' + Drupal.t('Loading...') + '
'); $content.appendTo($target); - new Drupal.ajax('ckeditor-dialog', $content.find('a').get(0), { + var ckeditorAjaxDialog = Drupal.ajax({ accepts: 'application/vnd.drupal-modal', dialog: dialogSettings, selector: '.ckeditor-dialog-loading-link', url: url, - event: 'ckeditor-internal.ckeditor', progress: {'type': 'throbber'}, submit: { editor_object: existingValues } }); - $content.find('a') - .on('click', function () { return false; }) - .trigger('ckeditor-internal.ckeditor'); + ckeditorAjaxDialog.execute(); // After a short delay, show "Loading…" message. window.setTimeout(function () { diff --git a/core/modules/editor/js/editor.formattedTextEditor.js b/core/modules/editor/js/editor.formattedTextEditor.js index faf4a6d..1d4639f 100644 --- a/core/modules/editor/js/editor.formattedTextEditor.js +++ b/core/modules/editor/js/editor.formattedTextEditor.js @@ -171,9 +171,8 @@ var fieldID = this.fieldModel.get('fieldID'); // Create a Drupal.ajax instance to load the form. - var textLoaderAjax = new Drupal.ajax(fieldID, this.$el, { + var textLoaderAjax = Drupal.ajax({ url: Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('editor/!entity_type/!id/!field_name/!langcode/!view_mode')), - event: 'editor-internal.editor', submit: {nocssjs: true}, progress: {type: null} // No progress indicator. }); @@ -186,7 +185,7 @@ // This will ensure our scoped editorGetUntransformedText AJAX command // gets called. - this.$el.trigger('editor-internal.editor'); + textLoaderAjax.execute(); } }); diff --git a/core/modules/quickedit/js/models/EntityModel.js b/core/modules/quickedit/js/models/EntityModel.js index e850065..75b3bea 100644 --- a/core/modules/quickedit/js/models/EntityModel.js +++ b/core/modules/quickedit/js/models/EntityModel.js @@ -362,18 +362,11 @@ save: function (options) { var entityModel = this; - // @todo Simplify this once https://drupal.org/node/1533366 lands. - // @see https://drupal.org/node/2029999. - var id = 'quickedit-save-entity'; - // Create a temporary element to be able to use Drupal.ajax. - var $el = $('#quickedit-entity-toolbar').find('.action-save'); // This is the span element inside the button. // Create a Drupal.ajax instance to save the entity. - var entitySaverAjax = new Drupal.ajax(id, $el, { + var entitySaverAjax = Drupal.ajax({ url: Drupal.url('quickedit/entity/' + entityModel.get('entityID')), - event: 'quickedit-save.quickedit', progress: {type: 'none'}, error: function () { - $el.off('quickedit-save.quickedit'); // Let the Drupal.quickedit.EntityModel Backbone model's error()= // method handle errors. options.error.call(entityModel); @@ -381,8 +374,6 @@ }); // Entity saved successfully. entitySaverAjax.commands.quickeditEntitySaved = function (ajax, response, status) { - // Clean up. - $(ajax.element).off('quickedit-save.quickedit'); // All fields have been moved from PrivateTempStore to permanent // storage, update the "inTempStore" attribute on FieldModels, on the // EntityModel and clear EntityModel's "fieldInTempStore" attribute. @@ -399,7 +390,7 @@ }; // Trigger the AJAX request, which will will return the // quickeditEntitySaved AJAX command to which we then react. - $el.trigger('quickedit-save.quickedit'); + entitySaverAjax.execute(); }, /** diff --git a/core/modules/quickedit/js/quickedit.js b/core/modules/quickedit/js/quickedit.js index 238ba0d..5a0e043 100644 --- a/core/modules/quickedit/js/quickedit.js +++ b/core/modules/quickedit/js/quickedit.js @@ -408,15 +408,10 @@ return; } - // @todo Simplify this once https://drupal.org/node/1533366 lands. // @see https://drupal.org/node/2029999. - var id = 'quickedit-load-editors'; - // Create a temporary element to be able to use Drupal.ajax. - var $el = $('').appendTo('body'); - // Create a Drupal.ajax instance to load the form. - var loadEditorsAjax = new Drupal.ajax(id, $el, { + // Create a Drupal.Ajax instance to load the form. + var loadEditorsAjax = Drupal.ajax({ url: Drupal.url('quickedit/attachments'), - event: 'quickedit-internal.quickedit', submit: {'editors[]': missingEditors}, // No progress indicator. progress: {type: null} @@ -427,12 +422,10 @@ loadEditorsAjax.commands.insert = function (ajax, response, status) { _.defer(callback); realInsert(ajax, response, status); - $el.off('quickedit-internal.quickedit'); - $el.remove(); }; // Trigger the AJAX request, which will should return AJAX commands to insert // any missing attachments. - $el.trigger('quickedit-internal.quickedit'); + loadEditorsAjax.execute(); } /** diff --git a/core/modules/quickedit/js/util.js b/core/modules/quickedit/js/util.js index 2f76665..3648d80 100644 --- a/core/modules/quickedit/js/util.js +++ b/core/modules/quickedit/js/util.js @@ -89,21 +89,17 @@ * commands. */ load: function (options, callback) { - var $el = options.$el; var fieldID = options.fieldID; // Create a Drupal.ajax instance to load the form. - var formLoaderAjax = new Drupal.ajax(fieldID, $el, { + var formLoaderAjax = Drupal.ajax({ url: Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/form/!entity_type/!id/!field_name/!langcode/!view_mode')), - event: 'quickedit-internal.quickedit', submit: { nocssjs: options.nocssjs, reset: options.reset }, progress: {type: null}, // No progress indicator. error: function (xhr, url) { - $el.off('quickedit-internal.quickedit'); - // Show a modal to inform the user of the network error. var fieldLabel = Drupal.quickedit.metadata.get(fieldID, 'label'); var message = Drupal.t('Could not load the form for @field-label, either due to a website problem or a network connection problem.
Please try again.', {'@field-label': fieldLabel}); @@ -118,11 +114,10 @@ // Implement a scoped quickeditFieldForm AJAX command: calls the callback. formLoaderAjax.commands.quickeditFieldForm = function (ajax, response, status) { callback(response.data, ajax); - $el.off('quickedit-internal.quickedit'); - formLoaderAjax = null; + Drupal.ajax.instances[this.instanceIndex] = null; }; // This will ensure our scoped quickeditFieldForm AJAX command gets called. - $el.trigger('quickedit-internal.quickedit'); + formLoaderAjax.execute(); }, /** @@ -159,7 +154,7 @@ } }; - return new Drupal.ajax($submit.attr('id'), $submit[0], settings); + return Drupal.ajax(settings, $submit.attr('id'), $submit[0]); }, /** diff --git a/core/modules/views/js/ajax_view.js b/core/modules/views/js/ajax_view.js index 3e0b680..74393de 100644 --- a/core/modules/views/js/ajax_view.js +++ b/core/modules/views/js/ajax_view.js @@ -80,14 +80,14 @@ // @endcode var self_settings = this.element_settings; self_settings.event = 'RefreshView'; - this.refreshViewAjax = new Drupal.ajax(this.selector, this.$view, self_settings); + this.refreshViewAjax = Drupal.ajax(self_settings, this.selector, this.$view); }; Drupal.views.ajaxView.prototype.attachExposedFormAjax = function () { var button = $('input[type=submit], input[type=image]', this.$exposed_form); button = button[0]; - this.exposedFormAjax = new Drupal.ajax($(button).attr('id'), button, this.element_settings); + this.exposedFormAjax = Drupal.ajax(this.element_settings, $(button).attr('id'), button); }; Drupal.views.ajaxView.prototype.filterNestedViews = function () { @@ -126,7 +126,7 @@ $.extend(viewData, Drupal.Views.parseViewArgs(href, this.settings.view_base_path)); this.element_settings.submit = viewData; - this.pagerAjax = new Drupal.ajax(false, $link, this.element_settings); + this.pagerAjax = Drupal.ajax(this.element_settings, false, $link); }; Drupal.AjaxCommands.prototype.viewsScrollTop = function (ajax, response) { diff --git a/core/modules/views_ui/js/ajax.js b/core/modules/views_ui/js/ajax.js index e693493..932aa3f 100644 --- a/core/modules/views_ui/js/ajax.js +++ b/core/modules/views_ui/js/ajax.js @@ -89,7 +89,7 @@ element_settings.url = $(this).attr('href'); } var base = $(this).attr('id'); - Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings); + Drupal.ajax(element_settings, base, this); }); $('div#views-live-preview a') @@ -109,7 +109,7 @@ element_settings.wrapper = 'views-preview-wrapper'; element_settings.method = 'replaceWith'; var base = $(this).attr('id'); - Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings); + Drupal.ajax(element_settings, base, this); }); // Within a live preview, make exposed widget form buttons re-trigger the @@ -134,7 +134,7 @@ element_settings.event = 'click'; var base = $(this).attr('id'); - Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings); + Drupal.ajax(element_settings, base, this); }); }