Club Drupal

(function ($) {

/**

 * 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['path'] and

 * #ajax['wrapper'] properties. If set, this file will automatically be included

 * to provide Ajax capabilities.

 */

Drupal.ajax = Drupal.ajax || {};

Drupal.settings.urlIsAjaxTrusted = Drupal.settings.urlIsAjaxTrusted || {};

/**

 * Attaches the Ajax behavior to each Ajax form element.

 */

Drupal.behaviors.AJAX = {

  attach: function (context, settings) {

    // Load all Ajax behaviors specified in the settings.

    for (var base in settings.ajax) {

      if (!$('#' + base + '.ajax-processed').length) {

        var element_settings = settings.ajax[base];

        if (typeof element_settings.selector == 'undefined') {

          element_settings.selector = '#' + base;

        }

        $(element_settings.selector).each(function () {

          element_settings.element = this;

          Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);

        });

        $('#' + base).addClass('ajax-processed');

      }

    }

    // Bind Ajax behaviors to all items showing the class.

    $('.use-ajax:not(.ajax-processed)').addClass('ajax-processed').each(function () {

      var element_settings = {};

      // Clicked links look better with the throbber than the progress bar.

      element_settings.progress = { 'type': 'throbber' };

      // For anchor tags, these will go to the target of the anchor rather

      // than the usual location.

      if ($(this).attr('href')) {

        element_settings.url = $(this).attr('href');

        element_settings.event = 'click';

      }

      var base = $(this).attr('id');

      Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);

    });

    // This class means to submit the form to the action using Ajax.

    $('.use-ajax-submit:not(.ajax-processed)').addClass('ajax-processed').each(function () {

      var element_settings = {};

      // Ajax submits specified in this manner automatically submit to the

      // normal form action.

      element_settings.url = $(this.form).attr('action');

      // Form submit button clicks need to tell the form what was clicked so

      // it gets passed in the POST request.

      element_settings.setClick = true;

      // Form buttons use the 'click' event rather than mousedown.

      element_settings.event = 'click';

      // Clicked form buttons look better with the throbber than the progress bar.

      element_settings.progress = { 'type': 'throbber' };

      var base = $(this).attr('id');

      Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);

    });

  }

};

/**

 * Ajax object.

 *

 * 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.

 *

 * 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) {

 *          new_content = $(response.data);

 *          $('#my-wrapper').append(new_content);

 *          alert('New content was appended to #my-wrapper');

 *        }

 *      }

 *    };

 * @endcode

 */

Drupal.ajax = function (base, element, element_settings) {

  var defaults = {

    url: 'system/ajax',

    event: 'mousedown',

    keypress: true,

    selector: '#' + base,

    effect: 'none',

    speed: 'none',

    method: 'replaceWith',

    progress: {

      type: 'throbber',

      message: Drupal.t('Please wait...')

    },

    submit: {

      'js': true

    }

  };

  $.extend(this, defaults, element_settings);

  this.element = element;

  this.element_settings = element_settings;

  // 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 five scenarios to check for:

  // 1. /nojs/

  // 2. /nojs$ - The end of a URL string.

  // 3. /nojs? - Followed by a query (with clean URLs enabled).

  //      E.g.: path/nojs?destination=foobar

  // 4. /nojs& - Followed by a query (without clean URLs enabled).

  //      E.g.: ?q=path/nojs&destination=foobar

  // 5. /nojs# - Followed by a fragment.

  //      E.g.: path/nojs#myfragment

  this.url = element_settings.url.replace(/\/nojs(\/|$|\?|&|#)/g, '/ajax$1');

  // If the 'nojs' version of the URL is trusted, also trust the 'ajax' version.

  if (Drupal.settings.urlIsAjaxTrusted[element_settings.url]) {

    Drupal.settings.urlIsAjaxTrusted[this.url] = true;

  }

  this.wrapper = '#' + element_settings.wrapper;

  // 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) {

    this.form = $(this.element.form);

  }

  // Set the options for the ajaxSubmit function.

  // The 'this' variable will not persist inside of the options object.

  var ajax = this;

  ajax.options = {

    url: Drupal.sanitizeAjaxUrl(ajax.url),

    data: ajax.submit,

    beforeSerialize: function (element_settings, options) {

      return ajax.beforeSerialize(element_settings, options);

    },

    beforeSubmit: function (form_values, element_settings, options) {

      ajax.ajaxing = true;

      return ajax.beforeSubmit(form_values, element_settings, options);

    },

    beforeSend: function (xmlhttprequest, options) {

      ajax.ajaxing = true;

      return ajax.beforeSend(xmlhttprequest, options);

    },

    success: function (response, status, 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

      // ajax_set_verification_header() 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 && !Drupal.settings.urlIsAjaxTrusted[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 (xmlhttprequest, status) {

      ajax.ajaxing = false;

      if (status == 'error' || status == 'parsererror') {

        return ajax.error(xmlhttprequest, ajax.url);

      }

    },

    dataType: 'json',

    jsonp: false,

    type: 'POST'

  };

  // For multipart forms (e.g., file uploads), jQuery Form targets the form

  // submission to an iframe instead of using an XHR object. The initial "src"

  // of the iframe, prior to the form submission, is set to options.iframeSrc.

  // "about:blank" is the semantically correct, standards-compliant, way to

  // initialize a blank iframe; however, some old IE versions (possibly only 6)

  // incorrectly report a mixed content warning when iframes with an

  // "about:blank" src are added to a parent document with an https:// origin.

  // jQuery Form works around this by defaulting to "javascript:false" instead,

  // but that breaks on Chrome 83, so here we force the semantically correct

  // behavior for all browsers except old IE.

  // @see https://www.drupal.org/project/drupal/issues/3143016

  // @see https://github.com/jquery-form/form/blob/df9cb101b9c9c085c8d75ad980c7ff1cf62063a1/jquery.form.js#L68

  // @see https://bugs.chromium.org/p/chromium/issues/detail?id=1084874

  // @see https://html.spec.whatwg.org/multipage/browsers.html#creating-browsing-contexts

  // @see https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

  if (navigator.userAgent.indexOf("MSIE") === -1) {

    ajax.options.iframeSrc = 'about:blank';

  }

  // Bind the ajaxSubmit function to the element event.

  $(ajax.element).bind(element_settings.event, function (event) {

    if (!Drupal.settings.urlIsAjaxTrusted[ajax.url] && !Drupal.urlIsLocal(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).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).bind(element_settings.prevent, false);

  }

};

/**

 * 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. 

 */

Drupal.ajax.prototype.keypressResponse = function (element, event) {

  // Create a synonym for this to reduce code confusion.

  var ajax = this;

  // Detect enter key and space bar and allow the standard response for them,

  // except for form elements of type 'text' 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')) {

    $(ajax.element_settings.element).trigger(ajax.element_settings.event);

    return false;

  }

};

/**

 * 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.

 */

Drupal.ajax.prototype.eventResponse = function (element, event) {

  // Create a synonym for this to reduce code confusion.

  var ajax = this;

  // Do not perform another ajax command if one is already in progress.

  if (ajax.ajaxing) {

    return false;

  }

  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;

    alert("An error occurred while attempting to process " + ajax.options.url + ": " + e.message);

  }

  // For radio/checkbox, allow the default event. On IE, this means letting

  // it actually check the box.

  if (typeof element.type != 'undefined' && (element.type == 'checkbox' || element.type == 'radio')) {

    return true;

  }

  else {

    return false;

  }

};

/**

 * Handler for the form serialization.

 *

 * Runs before the beforeSend() handler (see below), and unlike that one, runs

 * before field data is collected.

 */

Drupal.ajax.prototype.beforeSerialize = function (element, options) {

  // Allow detaching behaviors to update field values before collecting them.

  // This is only needed when field values are added to the POST data, so only

  // when there is a form such that this.form.ajaxSubmit() is used instead of

  // $.ajax(). When there is no form and $.ajax() is used, beforeSerialize()

  // isn't called, but don't rely on that: explicitly check this.form.

  if (this.form) {

    var settings = this.settings || Drupal.settings;

    Drupal.detachBehaviors(this.form, settings, 'serialize');

  }

  // Prevent duplicate HTML ids in the returned markup.

  // @see drupal_html_id()

  options.data['ajax_html_ids[]'] = [];

  $('[id]').each(function () {

    options.data['ajax_html_ids[]'].push(this.id);

  });

  // Allow Drupal to return new JavaScript and CSS files to load without

  // returning the ones already loaded.

  // @see ajax_base_page_theme()

  // @see drupal_get_css()

  // @see drupal_get_js()

  options.data['ajax_page_state[theme]'] = Drupal.settings.ajaxPageState.theme;

  options.data['ajax_page_state[theme_token]'] = Drupal.settings.ajaxPageState.theme_token;

  for (var key in Drupal.settings.ajaxPageState.css) {

    options.data['ajax_page_state[css][' + key + ']'] = 1;

  }

  for (var key in Drupal.settings.ajaxPageState.js) {

    options.data['ajax_page_state[js][' + key + ']'] = 1;

  }

};

/**

 * Modify form values prior to form submission.

 */

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.

 */

Drupal.ajax.prototype.beforeSend = function (xmlhttprequest, options) {

  // For forms without file inputs, the jQuery Form plugin serializes the form

  // values, and then calls jQuery's $.ajax() function, which invokes this

  // handler. In this circumstance, options.extraData is never used. For forms

  // with file inputs, the jQuery Form plugin uses the browser's normal form

  // submission mechanism, but captures the response in a hidden IFRAME. In this

  // circumstance, it calls this handler first, and then appends hidden fields

  // to the form to submit the values in options.extraData. There is no simple

  // way to know which submission mechanism will be used, so we add to extraData

  // regardless, and allow it to be ignored in the former case.

  if (this.form) {

    options.extraData = options.extraData || {};

    // Let the server know when the IFRAME submission mechanism is used. The

    // server can use this information to wrap the JSON response in a TEXTAREA,

    // as per http://jquery.malsup.com/form/#file-upload.

    options.extraData.ajax_iframe_upload = '1';

    // The triggering element is about to be disabled (see below), but if it

    // contains a value (e.g., a checkbox, textfield, select, etc.), ensure that

    // value is included in the submission. As per above, submissions that use

    // $.ajax() are already serialized prior to the element being disabled, so

    // this is only needed for IFRAME submissions.

    var v = $.fieldValue(this.element);

    if (v !== null) {

      options.extraData[this.element.name] = Drupal.checkPlain(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).addClass('progress-disabled').attr('disabled', true);

  // Insert progressbar or throbber.

  if (this.progress.type == 'bar') {

    var progressBar = new Drupal.progressBar('ajax-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));

    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);

  }

  else if (this.progress.type == 'throbber') {

    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');

    if (this.progress.message) {

      $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>');

    }

    $(this.element).after(this.progress.element);

  }

};

/**

 * Handler for the form redirection completion.

 */

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).removeClass('progress-disabled').removeAttr('disabled');

  Drupal.freezeHeight();

  for (var i in response) {

    if (response.hasOwnProperty(i) && response[i]['command'] && this.commands[response[i]['command']]) {

      this.commands[response[i]['command']](this, response[i], status);

    }

  }

  // Reattach behaviors, if they were detached in beforeSerialize(). The

  // attachBehaviors() called on the new content from processing the response

  // commands is not sufficient, because behaviors from the entire form need

  // to be reattached.

  if (this.form) {

    var settings = this.settings || Drupal.settings;

    Drupal.attachBehaviors(this.form, settings);

  }

  Drupal.unfreezeHeight();

  // Remove any response-specific settings so they don't get used on the next

  // call by mistake.

  this.settings = null;

};

/**

 * Build an effect object which tells us how to apply the effect when adding new HTML.

 */

Drupal.ajax.prototype.getEffect = function (response) {

  var type = response.effect || this.effect;

  var speed = response.speed || this.speed;

  var effect = {};

  if (type == 'none') {

    effect.showEffect = 'show';

    effect.hideEffect = 'hide';

    effect.showSpeed = '';

  }

  else if (type == 'fade') {

    effect.showEffect = 'fadeIn';

    effect.hideEffect = 'fadeOut';

    effect.showSpeed = speed;

  }

  else {

    effect.showEffect = type + 'Toggle';

    effect.hideEffect = type + 'Toggle';

    effect.showSpeed = speed;

  }

  return effect;

};

/**

 * Handler for the form redirection error.

 */

Drupal.ajax.prototype.error = function (xmlhttprequest, uri, customMessage) {

  Drupal.displayAjaxError(Drupal.ajaxError(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).removeClass('progress-disabled').removeAttr('disabled');

  // Reattach behaviors, if they were detached in beforeSerialize().

  if (this.form) {

    var settings = this.settings || Drupal.settings;

    Drupal.attachBehaviors(this.form, settings);

  }

};

/**

 * Provide a series of commands that the server can request the client perform.

 */

Drupal.ajax.prototype.commands = {

  /**

   * Command to insert new content into the DOM.

   */

  insert: function (ajax, response, status) {

    // Get information from the response. If it is not there, default to

    // our presets.

    var wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);

    var method = response.method || ajax.method;

    var effect = ajax.getEffect(response);

    // We don't know what response.data contains: it might be a string of text

    // without HTML, so don't rely on jQuery correctly iterpreting

    // $(response.data) as new HTML rather than a CSS selector. Also, if

    // response.data contains top-level text nodes, they get lost with either

    // $(response.data) or $('<div></div>').replaceWith(response.data).

    var new_content_wrapped = $('<div></div>').html(response.data);

    var new_content = new_content_wrapped.contents();

    // For legacy reasons, the effects processing code assumes that new_content

    // consists of a single top-level element. Also, it has not been

    // sufficiently tested whether attachBehaviors() can be successfully called

    // with a context object that includes top-level text nodes. However, to

    // give developers full control of the HTML appearing in the page, and to

    // enable Ajax content to be inserted in places where DIV elements are not

    // allowed (e.g., within TABLE, TR, and SPAN parents), we check if the new

    // content satisfies the requirement of a single top-level element, and

    // only use the container DIV created above when it doesn't. For more

    // information, please see http://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':

        var settings = response.settings || ajax.settings || Drupal.settings;

        Drupal.detachBehaviors(wrapper, 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 ($('.ajax-new-content', new_content).length > 0) {

      $('.ajax-new-content', new_content).hide();

      new_content.show();

      $('.ajax-new-content', 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.

      var settings = response.settings || ajax.settings || Drupal.settings;

      Drupal.attachBehaviors(new_content, settings);

    }

  },

  /**

   * Command to remove a chunk from the page.

   */

  remove: function (ajax, response, status) {

    var settings = response.settings || ajax.settings || Drupal.settings;

    Drupal.detachBehaviors($(response.selector), settings);

    $(response.selector).remove();

  },

  /**

   * Command to mark a chunk changed.

   */

  changed: function (ajax, response, status) {

    if (!$(response.selector).hasClass('ajax-changed')) {

      $(response.selector).addClass('ajax-changed');

      if (response.asterisk) {

        $(response.selector).find(response.asterisk).append(' <span class="ajax-changed">*</span> ');

      }

    }

  },

  /**

   * Command to provide an alert.

   */

  alert: function (ajax, response, status) {

    alert(response.text, response.title);

  },

  /**

   * Command to provide the jQuery css() function.

   */

  css: function (ajax, response, status) {

    $(response.selector).css(response.argument);

  },

  /**

   * Command to set the settings that will be used for other commands in this response.

   */

  settings: function (ajax, response, status) {

    if (response.merge) {

      $.extend(true, Drupal.settings, response.settings);

    }

    else {

      ajax.settings = response.settings;

    }

  },

  /**

   * Command to attach data using jQuery's data API.

   */

  data: function (ajax, response, status) {

    $(response.selector).data(response.name, response.value);

  },

  /**

   * Command to apply a jQuery method.

   */

  invoke: function (ajax, response, status) {

    var $element = $(response.selector);

    $element[response.method].apply($element, response.arguments);

  },

  /**

   * Command to restripe a table.

   */

  restripe: function (ajax, response, status) {

    // :even and :odd are reversed because jQuery counts from 0 and

    // we count from 1, so we're out of sync.

    // Match immediate children of the parent element to allow nesting.

    $('> tbody > tr:visible, > tr:visible', $(response.selector))

      .removeClass('odd even')

      .filter(':even').addClass('odd').end()

      .filter(':odd').addClass('even');

  },

  /**

   * Command to add css.

   *

   * Uses the proprietary addImport method if available as browsers which

   * support that method ignore @import statements in dynamically added

   * stylesheets.

   */

  add_css: function (ajax, response, status) {

    // Add the styles in the normal way.

    $('head').prepend(response.data);

    // Add imports in the styles using the addImport method if available.

    var match, importMatch = /^@import url\("(.*)"\);$/igm;

    if (document.styleSheets[0].addImport && importMatch.test(response.data)) {

      importMatch.lastIndex = 0;

      while (match = importMatch.exec(response.data)) {

        document.styleSheets[0].addImport(match[1]);

      }

    }

  },

  /**

   * Command to update a form's build ID.

   */

  updateBuildId: function(ajax, response, status) {

    $('input[name="form_build_id"][value="' + response['old'] + '"]').val(response['new']);

  }

};

})(jQuery);