diff --git a/core/misc/ajax.es6.js b/core/misc/ajax.es6.js index daa62548a0..aadd44383c 100644 --- a/core/misc/ajax.es6.js +++ b/core/misc/ajax.es6.js @@ -60,6 +60,7 @@ element_settings.event = 'click'; } element_settings.dialogType = $(this).data('dialog-type'); + element_settings.drupalDialogRenderer = $(this).data('dialog-renderer'); element_settings.dialog = $(this).data('dialog-options'); element_settings.base = $(this).attr('id'); element_settings.element = this; diff --git a/core/misc/ajax.es6.js.orig b/core/misc/ajax.es6.js.orig new file mode 100644 index 0000000000..daa62548a0 --- /dev/null +++ b/core/misc/ajax.es6.js.orig @@ -0,0 +1,1334 @@ +/** + * @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 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 (const 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 () { + const element_settings = {}; + // Clicked links look better with the throbber than the progress bar. + element_settings.progress = { type: 'throbber' }; + + // For anchor tags, these will go to the target of the anchor rather + // than the usual location. + const href = $(this).attr('href'); + if (href) { + element_settings.url = href; + element_settings.event = 'click'; + } + element_settings.dialogType = $(this).data('dialog-type'); + element_settings.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 () { + const 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); + }); + }, + + 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 pathText; + let responseText; + let 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 })}`) : ''; + + 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)); + }; + + /** + * Settings for an Ajax object. + * + * @typedef {object} Drupal.Ajax~element_settings + * + * @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~element_settings} element_settings + * Settings for this Ajax object. + */ + Drupal.Ajax = function (base, element, element_settings) { + 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, element_settings); + + /** + * @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; + + /** + * @type {Drupal.Ajax~element_settings} + */ + 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) { + 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(\/|$|\?|#)/g, '/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(element_settings, options) { + return ajax.beforeSerialize(element_settings, options); + }, + beforeSubmit(form_values, element_settings, options) { + ajax.ajaxing = true; + return ajax.beforeSubmit(form_values, element_settings, 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 (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) { + 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 (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} + * + * @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.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 + * 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 `element_settings`. + * @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.} form_values + * Processed form values. + * @param {jQuery} element + * The form node as a jQuery object. + * @param {object} options + * jQuery.ajax 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 + * 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); + } + }; + + /** + * 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 = $('
 
'); + 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. + * + * @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; + for (const i in response) { + if (response.hasOwnProperty(i) && 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#element_settings}. + * @param {string|number} [response.speed] + * Override the default value of {@link Drupal.Ajax#element_settings}. + * + * @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); + }; + + /** + * @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. + * @param {number} [status] + * The XMLHttpRequest status. + */ + insert(ajax, response, status) { + // 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); + let 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 $('
').replaceWith(response.data). + const $new_content_wrapped = $('
').html(response.data); + let $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
+ // elements are not allowed (e.g., within , , and + // parents), we check if the new content satisfies the requirement + // of a single top-level element, and only use the container
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] + * {@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\("(.*)"\);$/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, window, Drupal, drupalSettings)); diff --git a/core/misc/ajax.es6.js.rej b/core/misc/ajax.es6.js.rej new file mode 100644 index 0000000000..db01fa6bcb --- /dev/null +++ b/core/misc/ajax.es6.js.rej @@ -0,0 +1,22 @@ +*************** +*** 522,528 **** + 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) { +--- 523,534 ---- + else { + ajax.options.url += '&'; + } ++ // If this element has a dialog type use if for the wrapper if not use 'ajax' ++ let wrapper = `drupal_${(element_settings.dialogType || 'ajax')}`; ++ if (element_settings.drupalDialogRenderer) { ++ wrapper += `.${element_settings.drupalDialogRenderer}`; ++ } ++ ajax.options.url += `${Drupal.ajax.WRAPPER_FORMAT}=${wrapper}`; + + // Bind the ajaxSubmit function to the element event. + $(ajax.element).on(element_settings.event, function (event) { diff --git a/core/misc/ajax.js b/core/misc/ajax.js index 1e15175edd..b84cfb1964 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -38,6 +38,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr element_settings.event = 'click'; } element_settings.dialogType = $(this).data('dialog-type'); + element_settings.drupalDialogRenderer = $(this).data('dialog-renderer'); element_settings.dialog = $(this).data('dialog-options'); element_settings.base = $(this).attr('id'); element_settings.element = this; @@ -240,7 +241,12 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr } else { ajax.options.url += '&'; } - ajax.options.url += Drupal.ajax.WRAPPER_FORMAT + '=drupal_' + (element_settings.dialogType || 'ajax'); + + var wrapper = 'drupal_' + (element_settings.dialogType || 'ajax'); + if (element_settings.drupalDialogRenderer) { + wrapper += '.' + element_settings.drupalDialogRenderer; + } + ajax.options.url += Drupal.ajax.WRAPPER_FORMAT + '=' + wrapper; $(ajax.element).on(element_settings.event, function (event) { if (!drupalSettings.ajaxTrustedUrl[ajax.url] && !Drupal.url.isLocal(ajax.url)) { diff --git a/core/misc/ajax.js.orig b/core/misc/ajax.js.orig new file mode 100644 index 0000000000..1e15175edd --- /dev/null +++ b/core/misc/ajax.js.orig @@ -0,0 +1,585 @@ +/** +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ +function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } + +(function ($, window, Drupal, drupalSettings) { + Drupal.behaviors.AJAX = { + attach: function attach(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); + }); + } + + for (var base in settings.ajax) { + if (settings.ajax.hasOwnProperty(base)) { + loadAjaxBehavior(base); + } + } + + $('.use-ajax').once('ajax').each(function () { + var element_settings = {}; + + element_settings.progress = { type: 'throbber' }; + + var href = $(this).attr('href'); + if (href) { + element_settings.url = href; + element_settings.event = 'click'; + } + element_settings.dialogType = $(this).data('dialog-type'); + element_settings.dialog = $(this).data('dialog-options'); + element_settings.base = $(this).attr('id'); + element_settings.element = this; + Drupal.ajax(element_settings); + }); + + $('.use-ajax-submit').once('ajax').each(function () { + var element_settings = {}; + + element_settings.url = $(this.form).attr('action'); + + element_settings.setClick = true; + + element_settings.event = 'click'; + + element_settings.progress = { type: 'throbber' }; + element_settings.base = $(this).attr('id'); + element_settings.element = this; + + Drupal.ajax(element_settings); + }); + }, + detach: function detach(context, settings, trigger) { + if (trigger === 'unload') { + Drupal.ajax.expired().forEach(function (instance) { + Drupal.ajax.instances[instance.instanceIndex] = null; + }); + } + } + }; + + Drupal.AjaxError = function (xmlhttp, uri, customMessage) { + var statusCode = void 0; + var statusText = void 0; + var pathText = void 0; + var responseText = void 0; + var readyStateText = void 0; + 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 = ''; + + try { + statusText = '\n' + Drupal.t('StatusText: !statusText', { '!statusText': $.trim(xmlhttp.statusText) }); + } catch (e) {} + + responseText = ''; + + try { + responseText = '\n' + Drupal.t('ResponseText: !responseText', { '!responseText': $.trim(xmlhttp.responseText) }); + } catch (e) {} + + responseText = responseText.replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, ''); + responseText = responseText.replace(/[\n]+\s+/g, '\n'); + + 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'); + } + + var base = settings.base || false; + var element = settings.element || false; + delete settings.base; + delete settings.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; + }; + + Drupal.ajax.instances = []; + + Drupal.ajax.expired = function () { + return Drupal.ajax.instances.filter(function (instance) { + return instance && instance.element !== false && !document.body.contains(instance.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); + + this.commands = new Drupal.AjaxCommands(); + + this.instanceIndex = false; + + if (this.wrapper) { + this.wrapper = '#' + this.wrapper; + } + + this.element = element; + + this.element_settings = element_settings; + + if (this.element && this.element.form) { + this.$form = $(this.element.form); + } + + 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'); + } + } + + var originalUrl = this.url; + + this.url = this.url.replace(/\/nojs(\/|$|\?|#)/g, '/ajax$1'); + + if (drupalSettings.ajaxTrustedUrl[originalUrl]) { + drupalSettings.ajaxTrustedUrl[this.url] = true; + } + + var ajax = this; + + ajax.options = { + url: ajax.url, + data: ajax.submit, + beforeSerialize: function beforeSerialize(element_settings, options) { + return ajax.beforeSerialize(element_settings, options); + }, + beforeSubmit: function beforeSubmit(form_values, element_settings, options) { + ajax.ajaxing = true; + return ajax.beforeSubmit(form_values, element_settings, options); + }, + beforeSend: function beforeSend(xmlhttprequest, options) { + ajax.ajaxing = true; + return ajax.beforeSend(xmlhttprequest, options); + }, + success: function 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') { + var 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: function complete(xmlhttprequest, status) { + ajax.ajaxing = false; + if (status === 'error' || status === 'parsererror') { + return ajax.error(xmlhttprequest, ajax.url); + } + }, + + dataType: 'json', + type: 'POST' + }; + + if (element_settings.dialog) { + ajax.options.data.dialogOptions = element_settings.dialog; + } + + 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'); + + $(ajax.element).on(element_settings.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 (element_settings.keypress) { + $(ajax.element).on('keypress', function (event) { + return ajax.keypressResponse(this, event); + }); + } + + if (element_settings.prevent) { + $(ajax.element).on(element_settings.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) { + var 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.element_settings.event); + } + }; + + Drupal.Ajax.prototype.eventResponse = function (element, event) { + event.preventDefault(); + event.stopPropagation(); + + var 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) { + var settings = this.settings || drupalSettings; + Drupal.detachBehaviors(this.$form.get(0), settings, 'serialize'); + } + + options.data[Drupal.Ajax.AJAX_REQUEST_PARAMETER] = 1; + + 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; + }; + + Drupal.Ajax.prototype.beforeSubmit = function (form_values, element, options) {}; + + Drupal.Ajax.prototype.beforeSend = function (xmlhttprequest, options) { + if (this.$form) { + options.extraData = options.extraData || {}; + + options.extraData.ajax_iframe_upload = '1'; + + var 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; + } + + 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); + } + }; + + 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); + }; + + 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); + }; + + Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function () { + this.progress.element = $('
 
'); + $('body').after(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); + + var elementParents = $(this.element).parents('[data-drupal-selector]').addBack().toArray(); + + var focusChanged = 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); + if (response[i].command === 'invoke' && response[i].method === 'focus') { + focusChanged = true; + } + } + } + + if (!focusChanged && this.element && !$(this.element).data('disable-refocus')) { + var target = false; + + for (var 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) { + var settings = this.settings || drupalSettings; + Drupal.attachBehaviors(this.$form.get(0), settings); + } + + this.settings = null; + }; + + 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; + }; + + 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) { + var settings = this.settings || drupalSettings; + Drupal.attachBehaviors(this.$form.get(0), settings); + } + throw new Drupal.AjaxError(xmlhttprequest, uri, customMessage); + }; + + Drupal.AjaxCommands = function () {}; + Drupal.AjaxCommands.prototype = { + insert: function insert(ajax, response, status) { + var $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper); + var method = response.method || ajax.method; + var effect = ajax.getEffect(response); + var settings = void 0; + + var $new_content_wrapped = $('
').html(response.data); + var $new_content = $new_content_wrapped.contents(); + + if ($new_content.length !== 1 || $new_content.get(0).nodeType !== 1) { + $new_content = $new_content_wrapped; + } + + switch (method) { + case 'html': + case 'replaceWith': + case 'replaceAll': + case 'empty': + case 'remove': + settings = response.settings || ajax.settings || drupalSettings; + Drupal.detachBehaviors($wrapper.get(0), settings); + } + + $wrapper[method]($new_content); + + if (effect.showEffect !== 'show') { + $new_content.hide(); + } + + 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); + } + + if ($new_content.parents('html').length > 0) { + settings = response.settings || ajax.settings || drupalSettings; + Drupal.attachBehaviors($new_content.get(0), settings); + } + }, + remove: function remove(ajax, response, status) { + var settings = response.settings || ajax.settings || drupalSettings; + $(response.selector).each(function () { + Drupal.detachBehaviors(this, settings); + }).remove(); + }, + changed: function changed(ajax, response, status) { + var $element = $(response.selector); + if (!$element.hasClass('ajax-changed')) { + $element.addClass('ajax-changed'); + if (response.asterisk) { + $element.find(response.asterisk).append(' * '); + } + } + }, + alert: function alert(ajax, response, status) { + window.alert(response.text, response.title); + }, + redirect: function redirect(ajax, response, status) { + window.location = response.url; + }, + css: function css(ajax, response, status) { + $(response.selector).css(response.argument); + }, + settings: function settings(ajax, response, status) { + var ajaxSettings = drupalSettings.ajax; + + if (ajaxSettings) { + Drupal.ajax.expired().forEach(function (instance) { + + if (instance.selector) { + var 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: function data(ajax, response, status) { + $(response.selector).data(response.name, response.value); + }, + invoke: function invoke(ajax, response, status) { + var $element = $(response.selector); + $element[response.method].apply($element, _toConsumableArray(response.args)); + }, + restripe: function 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: function update_build_id(ajax, response, status) { + $('input[name="form_build_id"][value="' + response.old + '"]').val(response.new); + }, + add_css: function add_css(ajax, response, status) { + $('head').prepend(response.data); + + var match = void 0; + 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, window, Drupal, drupalSettings); \ No newline at end of file diff --git a/core/modules/outside_in/js/outside_in.es6.js.orig b/core/modules/outside_in/js/outside_in.es6.js.orig new file mode 100644 index 0000000000..66708cea0d --- /dev/null +++ b/core/modules/outside_in/js/outside_in.es6.js.orig @@ -0,0 +1,260 @@ +/** + * @file + * Drupal's Settings Tray library. + */ + +(function ($, Drupal) { + const blockConfigureSelector = '[data-outside-in-edit]'; + const toggleEditSelector = '[data-drupal-outsidein="toggle"]'; + const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button'; + const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button'; + const quickEditItemSelector = '[data-quickedit-entity-id]'; + + /** + * Reacts to contextual links being added. + * + * @param {jQuery.Event} event + * The `drupalContextualLinkAdded` event. + * @param {object} data + * An object containing the data relevant to the event. + * + * @listens event:drupalContextualLinkAdded + */ + $(document).on('drupalContextualLinkAdded', (event, data) => { + // Bind Ajax behaviors to all items showing the class. + // @todo Fix contextual links to work with use-ajax links in + // https://www.drupal.org/node/2764931. + Drupal.attachBehaviors(data.$el[0]); + + // Bind a listener to all 'Quick edit' links for blocks + // Click "Edit" button in toolbar to force Contextual Edit which starts + // Settings Tray edit mode also. + data.$el.find(blockConfigureSelector) + .on('click.outsidein', () => { + if (!isInEditMode()) { + $(toggleEditSelector).trigger('click').trigger('click.outside_in'); + } + // Always disable QuickEdit regardless of whether "EditMode" was just enabled. + disableQuickEdit(); + }); + }); + + $(document).on('keyup.outsidein', (e) => { + if (isInEditMode() && e.keyCode === 27) { + Drupal.announce( + Drupal.t('Exited edit mode.'), + ); + toggleEditMode(); + } + }); + + /** + * Gets all items that should be toggled with class during edit mode. + * + * @return {jQuery} + * Items that should be toggled. + */ + function getItemsToToggle() { + return $(itemsToToggleSelector).not(contextualItemsSelector); + } + + /** + * Helper to check the state of the outside-in mode. + * + * @todo don't use a class for this. + * + * @return {boolean} + * State of the outside-in edit mode. + */ + function isInEditMode() { + return $('#toolbar-bar').hasClass('js-outside-in-edit-mode'); + } + + /** + * Helper to toggle Edit mode. + */ + function toggleEditMode() { + setEditModeState(!isInEditMode()); + } + + /** + * Prevent default click events except contextual links. + * + * In edit mode the default action of click events is suppressed. + * + * @param {jQuery.Event} event + * The click event. + */ + function preventClick(event) { + // Do not prevent contextual links. + if ($(event.target).closest('.contextual-links').length) { + return; + } + event.preventDefault(); + } + + /** + * Close any active toolbar tray before entering edit mode. + */ + function closeToolbarTrays() { + $(Drupal.toolbar.models.toolbarModel.get('activeTab')).trigger('click'); + } + + /** + * Disables the QuickEdit module editor if open. + */ + function disableQuickEdit() { + $('.quickedit-toolbar button.action-cancel').trigger('click'); + } + + /** + * Closes/removes off-canvas. + */ + function closeOffCanvas() { + $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click'); + } + + /** + * Helper to switch edit mode state. + * + * @param {boolean} editMode + * True enable edit mode, false disable edit mode. + */ + function setEditModeState(editMode) { + if (!document.querySelector('[data-off-canvas-main-canvas]')) { + throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig'); + } + editMode = !!editMode; + const $editButton = $(toggleEditSelector); + let $editables; + // Turn on edit mode. + if (editMode) { + $editButton.text(Drupal.t('Editing')); + closeToolbarTrays(); + + $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); + if ($editables.length) { + // Use event capture to prevent clicks on links. + document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true); + + // When a click occurs try and find the outside-in edit link + // and click it. + $editables + .not(contextualItemsSelector) + .on('click.outsidein', (e) => { + // Contextual links are allowed to function in Edit mode. + if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) { + return; + } + $(e.currentTarget).find(blockConfigureSelector).trigger('click'); + disableQuickEdit(); + }); + $(quickEditItemSelector) + .not(contextualItemsSelector) + .on('click.outsidein', (e) => { + // For all non-contextual links or the contextual QuickEdit link close the off-canvas dialog. + if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) { + closeOffCanvas(); + } + // Do not trigger if target is quick edit link to avoid loop. + if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) { + return; + } + $(e.currentTarget).find('li.quickedit a').trigger('click'); + }); + } + } + // Disable edit mode. + else { + $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein'); + if ($editables.length) { + document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true); + $editables.off('.outsidein'); + $(quickEditItemSelector).off('.outsidein'); + } + + $editButton.text(Drupal.t('Edit')); + closeOffCanvas(); + disableQuickEdit(); + } + getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode); + $('.edit-mode-inactive').toggleClass('visually-hidden', editMode); + } + + /** + * Attaches contextual's edit toolbar tab behavior. + * + * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Attaches contextual toolbar behavior on a contextualToolbar-init event. + */ + Drupal.behaviors.outsideInEdit = { + attach() { + const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; + if (editMode) { + setEditModeState(true); + } + }, + }; + + /** + * Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode. + * + * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Toggle the js-outside-edit-mode class. + */ + Drupal.behaviors.toggleEditMode = { + attach() { + $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); + + const search = `${Drupal.ajax.WRAPPER_FORMAT}=drupal_dialog`; + const replace = `${Drupal.ajax.WRAPPER_FORMAT}=drupal_dialog_off_canvas`; + // Loop through all Ajax links and change the format to dialog-off-canvas when + // needed. + Drupal.ajax.instances + .filter((instance) => { + const hasElement = instance && !!instance.element; + let rendererOffCanvas = false; + let wrapperOffCanvas = false; + if (hasElement) { + rendererOffCanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; + wrapperOffCanvas = instance.options.url.indexOf('drupal_dialog_off_canvas') === -1; + } + return hasElement && rendererOffCanvas && wrapperOffCanvas; + }) + .forEach((instance) => { + // @todo Move logic for data-dialog-renderer attribute into ajax.js + // https://www.drupal.org/node/2784443 + instance.options.url = instance.options.url.replace(search, replace); + // Check to make sure existing dialogOptions aren't overridden. + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; + } + instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id'); + instance.progress = { type: 'fullscreen' }; + }); + }, + }; + + // Manage Active editable class on opening and closing of the dialog. + $(window).on({ + 'dialog:beforecreate': function (event, dialog, $element, settings) { + if ($element.is('#drupal-off-canvas')) { + $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); + const $activeElement = $(`#${settings.outsideInActiveEditableId}`); + if ($activeElement.length) { + $activeElement.addClass('outside-in-active-editable'); + settings.dialogClass += ' ui-dialog-outside-in'; + } + } + }, + 'dialog:beforeclose': function (event, dialog, $element) { + if ($element.is('#drupal-off-canvas')) { + $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); + } + }, + }); +}(jQuery, Drupal)); diff --git a/core/modules/outside_in/js/outside_in.es6.js.rej b/core/modules/outside_in/js/outside_in.es6.js.rej new file mode 100644 index 0000000000..20ba81af6a --- /dev/null +++ b/core/modules/outside_in/js/outside_in.es6.js.rej @@ -0,0 +1,49 @@ +*************** +*** 211,238 **** + */ + Drupal.behaviors.toggleEditMode = { + attach: function () { +- + $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); +- +- var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog'; +- var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_off_canvas'; +- // Loop through all Ajax links and change the format to dialog-off-canvas when +- // needed. + Drupal.ajax.instances + .filter(function (instance) { + var hasElement = instance && !!instance.element; +- var rendererOffCanvas = false; +- var wrapperOffCanvas = false; + if (hasElement) { +- rendererOffCanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; +- wrapperOffCanvas = instance.options.url.indexOf('drupal_dialog_off_canvas') === -1; + } +- return hasElement && rendererOffCanvas && wrapperOffCanvas; + }) + .forEach(function (instance) { +- // @todo Move logic for data-dialog-renderer attribute into ajax.js +- // https://www.drupal.org/node/2784443 +- instance.options.url = instance.options.url.replace(search, replace); + // Check to make sure existing dialogOptions aren't overridden. + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; +--- 211,228 ---- + */ + Drupal.behaviors.toggleEditMode = { + attach: function () { + $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); ++ // Find all Ajax instances that use the 'off_canvas' renderer. + Drupal.ajax.instances + .filter(function (instance) { + var hasElement = instance && !!instance.element; + if (hasElement) { ++ // If there is an element and the renderer is 'off_canvas' then we want to add our changes. ++ return $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; + } + }) ++ // Loop through all Ajax instances that use the 'off_canvas' renderer to set active editable ID. + .forEach(function (instance) { + // Check to make sure existing dialogOptions aren't overridden. + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; diff --git a/core/modules/outside_in/js/outside_in.js.orig b/core/modules/outside_in/js/outside_in.js.orig new file mode 100644 index 0000000000..635196d88f --- /dev/null +++ b/core/modules/outside_in/js/outside_in.js.orig @@ -0,0 +1,169 @@ +/** +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ + +(function ($, Drupal) { + var blockConfigureSelector = '[data-outside-in-edit]'; + var toggleEditSelector = '[data-drupal-outsidein="toggle"]'; + var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button'; + var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button'; + var quickEditItemSelector = '[data-quickedit-entity-id]'; + + $(document).on('drupalContextualLinkAdded', function (event, data) { + Drupal.attachBehaviors(data.$el[0]); + + data.$el.find(blockConfigureSelector).on('click.outsidein', function () { + if (!isInEditMode()) { + $(toggleEditSelector).trigger('click').trigger('click.outside_in'); + } + + disableQuickEdit(); + }); + }); + + $(document).on('keyup.outsidein', function (e) { + if (isInEditMode() && e.keyCode === 27) { + Drupal.announce(Drupal.t('Exited edit mode.')); + toggleEditMode(); + } + }); + + function getItemsToToggle() { + return $(itemsToToggleSelector).not(contextualItemsSelector); + } + + function isInEditMode() { + return $('#toolbar-bar').hasClass('js-outside-in-edit-mode'); + } + + function toggleEditMode() { + setEditModeState(!isInEditMode()); + } + + function preventClick(event) { + if ($(event.target).closest('.contextual-links').length) { + return; + } + event.preventDefault(); + } + + function closeToolbarTrays() { + $(Drupal.toolbar.models.toolbarModel.get('activeTab')).trigger('click'); + } + + function disableQuickEdit() { + $('.quickedit-toolbar button.action-cancel').trigger('click'); + } + + function closeOffCanvas() { + $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click'); + } + + function setEditModeState(editMode) { + if (!document.querySelector('[data-off-canvas-main-canvas]')) { + throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig'); + } + editMode = !!editMode; + var $editButton = $(toggleEditSelector); + var $editables = void 0; + + if (editMode) { + $editButton.text(Drupal.t('Editing')); + closeToolbarTrays(); + + $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); + if ($editables.length) { + document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true); + + $editables.not(contextualItemsSelector).on('click.outsidein', function (e) { + if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) { + return; + } + $(e.currentTarget).find(blockConfigureSelector).trigger('click'); + disableQuickEdit(); + }); + $(quickEditItemSelector).not(contextualItemsSelector).on('click.outsidein', function (e) { + if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) { + closeOffCanvas(); + } + + if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) { + return; + } + $(e.currentTarget).find('li.quickedit a').trigger('click'); + }); + } + } else { + $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein'); + if ($editables.length) { + document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true); + $editables.off('.outsidein'); + $(quickEditItemSelector).off('.outsidein'); + } + + $editButton.text(Drupal.t('Edit')); + closeOffCanvas(); + disableQuickEdit(); + } + getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode); + $('.edit-mode-inactive').toggleClass('visually-hidden', editMode); + } + + Drupal.behaviors.outsideInEdit = { + attach: function attach() { + var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; + if (editMode) { + setEditModeState(true); + } + } + }; + + Drupal.behaviors.toggleEditMode = { + attach: function attach() { + $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); + + var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog'; + var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_off_canvas'; + + Drupal.ajax.instances.filter(function (instance) { + var hasElement = instance && !!instance.element; + var rendererOffCanvas = false; + var wrapperOffCanvas = false; + if (hasElement) { + rendererOffCanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; + wrapperOffCanvas = instance.options.url.indexOf('drupal_dialog_off_canvas') === -1; + } + return hasElement && rendererOffCanvas && wrapperOffCanvas; + }).forEach(function (instance) { + instance.options.url = instance.options.url.replace(search, replace); + + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; + } + instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id'); + instance.progress = { type: 'fullscreen' }; + }); + } + }; + + $(window).on({ + 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) { + if ($element.is('#drupal-off-canvas')) { + $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); + var $activeElement = $('#' + settings.outsideInActiveEditableId); + if ($activeElement.length) { + $activeElement.addClass('outside-in-active-editable'); + settings.dialogClass += ' ui-dialog-outside-in'; + } + } + }, + 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) { + if ($element.is('#drupal-off-canvas')) { + $('body .outside-in-active-editable').removeClass('outside-in-active-editable'); + } + } + }); +})(jQuery, Drupal); \ No newline at end of file diff --git a/core/modules/outside_in/js/outside_in.js.rej b/core/modules/outside_in/js/outside_in.js.rej new file mode 100644 index 0000000000..55f2ca66aa --- /dev/null +++ b/core/modules/outside_in/js/outside_in.js.rej @@ -0,0 +1,41 @@ +*************** +*** 126,149 **** + + Drupal.behaviors.toggleEditMode = { + attach: function attach() { +- + $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); + +- var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog'; +- var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_off_canvas'; +- + Drupal.ajax.instances.filter(function (instance) { + var hasElement = instance && !!instance.element; +- var rendererOffCanvas = false; +- var wrapperOffCanvas = false; + if (hasElement) { +- rendererOffCanvas = $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; +- wrapperOffCanvas = instance.options.url.indexOf('drupal_dialog_off_canvas') === -1; + } +- return hasElement && rendererOffCanvas && wrapperOffCanvas; + }).forEach(function (instance) { +- instance.options.url = instance.options.url.replace(search, replace); +- + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; + } +--- 126,139 ---- + + Drupal.behaviors.toggleEditMode = { + attach: function attach() { + $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); + + Drupal.ajax.instances.filter(function (instance) { + var hasElement = instance && !!instance.element; + if (hasElement) { ++ return $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; + } + }).forEach(function (instance) { + if (!('dialogOptions' in instance.options.data)) { + instance.options.data.dialogOptions = {}; + } diff --git a/core/modules/outside_in/outside_in.services.yml b/core/modules/outside_in/outside_in.services.yml index 37ba1b351a..d68bdb2fc3 100644 --- a/core/modules/outside_in/outside_in.services.yml +++ b/core/modules/outside_in/outside_in.services.yml @@ -3,7 +3,7 @@ services: class: Drupal\outside_in\Render\MainContent\OffCanvasRender arguments: ['@title_resolver', '@renderer'] tags: - - { name: render.main_content_renderer, format: drupal_dialog_off_canvas } + - { name: render.main_content_renderer, format: drupal_dialog.off_canvas } outside_in.manager: class: Drupal\outside_in\OutsideInManager diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php index e2b451e1a7..edf055b577 100644 --- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php +++ b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php @@ -53,7 +53,7 @@ public function testDialog() { ]; // Emulate going to the JS version of the page and check the JSON response. - $ajax_result = $this->drupalGetAjax('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_dialog_off_canvas']]); + $ajax_result = $this->drupalGetAjax('ajax-test/dialog-contents', ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_dialog.off_canvas']]); $this->assertEqual($off_canvas_expected_response, $ajax_result[3], 'off-canvas dialog JSON response matches.'); } diff --git a/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.info.yml b/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.info.yml new file mode 100644 index 0000000000..8dde142ae3 --- /dev/null +++ b/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.info.yml @@ -0,0 +1,6 @@ +name: 'Dialog Renderer Test' +type: module +description: 'Support module for Dialog Renderer tests.' +core: 8.x +package: Testing +version: VERSION diff --git a/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.routing.yml b/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.routing.yml new file mode 100644 index 0000000000..3cfbde0d7e --- /dev/null +++ b/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.routing.yml @@ -0,0 +1,15 @@ +dialog_renderer_test.links: + path: '/dialog_renderer-test-links' + defaults: + _controller: '\Drupal\dialog_renderer_test\Controller\TestController::linksDisplay' + _title: 'Links' + requirements: + _access: 'TRUE' + +dialog_renderer_test.modal_content: + path: '/dialog_renderer-content' + defaults: + _controller: '\Drupal\dialog_renderer_test\Controller\TestController::modalContent' + _title: 'Thing 1' + requirements: + _access: 'TRUE' diff --git a/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.services.yml b/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.services.yml new file mode 100644 index 0000000000..20c1b8c785 --- /dev/null +++ b/core/modules/system/tests/modules/dialog_renderer_test/dialog_renderer_test.services.yml @@ -0,0 +1,13 @@ +services: +# Provide 2 render services that use the same class but behave differently +# depending on the 2nd argument. + main_content_renderer.wide_modal: + class: Drupal\dialog_renderer_test\Render\MainContent\WideModalRenderer + arguments: ['@title_resolver', 'wide'] + tags: + - { name: render.main_content_renderer, format: drupal_modal.wide } + main_content_renderer.extra_wide_modal: + class: Drupal\dialog_renderer_test\Render\MainContent\WideModalRenderer + arguments: ['@title_resolver', 'extra_wide'] + tags: + - { name: render.main_content_renderer, format: drupal_modal.extra_wide } diff --git a/core/modules/system/tests/modules/dialog_renderer_test/src/Controller/TestController.php b/core/modules/system/tests/modules/dialog_renderer_test/src/Controller/TestController.php new file mode 100644 index 0000000000..853c620dc2 --- /dev/null +++ b/core/modules/system/tests/modules/dialog_renderer_test/src/Controller/TestController.php @@ -0,0 +1,80 @@ + 'markup', + '#markup' => 'Look at me in a modal!', + ]; + } + + /** + * Displays test links that will open in the modal dialog. + * + * @return array + * Render array with links. + */ + public function linksDisplay() { + return [ + 'normal_modal' => [ + '#title' => 'Normal Modal!', + '#type' => 'link', + '#url' => Url::fromRoute('dialog_renderer_test.modal_content'), + '#attributes' => [ + 'class' => ['use-ajax'], + 'data-dialog-type' => 'modal', + ], + '#attached' => [ + 'library' => [ + 'core/drupal.ajax', + ], + ], + ], + 'wide_modal' => [ + '#title' => 'Wide Modal!', + '#type' => 'link', + '#url' => Url::fromRoute('dialog_renderer_test.modal_content'), + '#attributes' => [ + 'class' => ['use-ajax'], + 'data-dialog-type' => 'modal', + 'data-dialog-renderer' => 'wide', + ], + '#attached' => [ + 'library' => [ + 'core/drupal.ajax', + ], + ], + ], + 'extra_wide_modal' => [ + '#title' => 'Extra Wide Modal!', + '#type' => 'link', + '#url' => Url::fromRoute('dialog_renderer_test.modal_content'), + '#attributes' => [ + 'class' => ['use-ajax'], + 'data-dialog-type' => 'modal', + 'data-dialog-renderer' => 'extra_wide', + ], + '#attached' => [ + 'library' => [ + 'core/drupal.ajax', + ], + ], + ], + ]; + } + +} diff --git a/core/modules/system/tests/modules/dialog_renderer_test/src/Render/MainContent/WideModalRenderer.php b/core/modules/system/tests/modules/dialog_renderer_test/src/Render/MainContent/WideModalRenderer.php new file mode 100644 index 0000000000..707226e496 --- /dev/null +++ b/core/modules/system/tests/modules/dialog_renderer_test/src/Render/MainContent/WideModalRenderer.php @@ -0,0 +1,78 @@ +mode = $mode; + } + + + /** + * {@inheritdoc} + */ + public function renderResponse(array $main_content, Request $request, RouteMatchInterface $route_match) { + $response = new AjaxResponse(); + + // First render the main content, because it might provide a title. + $content = drupal_render_root($main_content); + + // Attach the library necessary for using the OpenModalDialogCommand and set + // the attachments for this Ajax response. + $main_content['#attached']['library'][] = 'core/drupal.dialog.ajax'; + $response->setAttachments($main_content['#attached']); + + // If the main content doesn't provide a title, use the title resolver. + $title = isset($main_content['#title']) ? $main_content['#title'] : $this->titleResolver->getTitle($request, $route_match->getRouteObject()); + + // Determine the title: use the title provided by the main content if any, + // otherwise get it from the routing information. + $options = $request->request->get('dialogOptions', []); + // Override width option. + switch ($this->mode) { + case 'wide': + $options['width'] = 700; + break; + + case 'extra_wide': + $options['width'] = 1000; + break; + } + + + $response->addCommand(new OpenModalDialogCommand($title, $content, $options)); + return $response; + } + +} diff --git a/core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php b/core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php new file mode 100644 index 0000000000..7c0aec022c --- /dev/null +++ b/core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php @@ -0,0 +1,38 @@ +assertSession(); + $this->drupalGet('/dialog_renderer-test-links'); + $this->clickLink('Normal Modal!'); + // Neither of the wide modals should have been used. + $style = $session_assert->waitForElementVisible('css', '.ui-dialog')->getAttribute('style'); + $this->assertNotContains('700px', $style); + $this->assertNotContains('1000px', $style); + $this->drupalGet('/dialog_renderer-test-links'); + $this->clickLink('Wide Modal!'); + $this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 700px;"]')); + $this->drupalGet('/dialog_renderer-test-links'); + $this->clickLink('Extra Wide Modal!'); + $this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 1000px;"]')); + } + +}