[Summary view] [Print] [Text view]

   1  // $Id: ahah.js,v 1.1.2.1 2009/03/21 19:43:51 mfer Exp $
   2  
   3  /**
   4   * Provides AJAX-like page updating via AHAH (Asynchronous HTML and HTTP).
   5   *
   6   * AHAH is a method of making a request via Javascript while viewing an HTML
   7   * page. The request returns a small chunk of HTML, which is then directly
   8   * injected into the page.
   9   *
  10   * Drupal uses this file to enhance form elements with #ahah[path] and
  11   * #ahah[wrapper] properties. If set, this file will automatically be included
  12   * to provide AHAH capabilities.
  13   */
  14  
  15  /**
  16   * Attaches the ahah behavior to each ahah form element.
  17   */
  18  Drupal.behaviors.ahah = function(context) {
  19    for (var base in Drupal.settings.ahah) {
  20      if (!$('#'+ base + '.ahah-processed').size()) {
  21        var element_settings = Drupal.settings.ahah[base];
  22  
  23        $(element_settings.selector).each(function() {
  24          element_settings.element = this;
  25          var ahah = new Drupal.ahah(base, element_settings);
  26        });
  27  
  28        $('#'+ base).addClass('ahah-processed');
  29      }
  30    }
  31  };
  32  
  33  /**
  34   * AHAH object.
  35   */
  36  Drupal.ahah = function(base, element_settings) {
  37    // Set the properties for this object.
  38    this.element = element_settings.element;
  39    this.selector = element_settings.selector;
  40    this.event = element_settings.event;
  41    this.keypress = element_settings.keypress;
  42    this.url = element_settings.url;
  43    this.wrapper = '#'+ element_settings.wrapper;
  44    this.effect = element_settings.effect;
  45    this.method = element_settings.method;
  46    this.progress = element_settings.progress;
  47    this.button = element_settings.button || { };
  48  
  49    if (this.effect == 'none') {
  50      this.showEffect = 'show';
  51      this.hideEffect = 'hide';
  52      this.showSpeed = '';
  53    }
  54    else if (this.effect == 'fade') {
  55      this.showEffect = 'fadeIn';
  56      this.hideEffect = 'fadeOut';
  57      this.showSpeed = 'slow';
  58    }
  59    else {
  60      this.showEffect = this.effect + 'Toggle';
  61      this.hideEffect = this.effect + 'Toggle';
  62      this.showSpeed = 'slow';
  63    }
  64  
  65    // Record the form action and target, needed for iFrame file uploads.
  66    var form = $(this.element).parents('form');
  67    this.form_action = form.attr('action');
  68    this.form_target = form.attr('target');
  69    this.form_encattr = form.attr('encattr');
  70  
  71    // Set the options for the ajaxSubmit function.
  72    // The 'this' variable will not persist inside of the options object.
  73    var ahah = this;
  74    var options = {
  75      url: ahah.url,
  76      data: ahah.button,
  77      beforeSubmit: function(form_values, element_settings, options) {
  78        return ahah.beforeSubmit(form_values, element_settings, options);
  79      },
  80      success: function(response, status) {
  81        // Sanity check for browser support (object expected).
  82        // When using iFrame uploads, responses must be returned as a string.
  83        if (typeof(response) == 'string') {
  84          response = Drupal.parseJson(response);
  85        }
  86        return ahah.success(response, status);
  87      },
  88      complete: function(response, status) {
  89        if (status == 'error' || status == 'parsererror') {
  90          return ahah.error(response, ahah.url);
  91        }
  92      },
  93      dataType: 'json',
  94      type: 'POST'
  95    };
  96  
  97    // Bind the ajaxSubmit function to the element event.
  98    $(element_settings.element).bind(element_settings.event, function() {
  99      $(element_settings.element).parents('form').ajaxSubmit(options);
 100      return false;
 101    });
 102    // If necessary, enable keyboard submission so that AHAH behaviors
 103    // can be triggered through keyboard input as well as e.g. a mousedown
 104    // action.
 105    if (element_settings.keypress) {
 106      $(element_settings.element).keypress(function(event) {
 107        // Detect enter key.
 108        if (event.keyCode == 13) {
 109          $(element_settings.element).trigger(element_settings.event);
 110          return false;
 111        }
 112      });
 113    }
 114  };
 115  
 116  /**
 117   * Handler for the form redirection submission.
 118   */
 119  Drupal.ahah.prototype.beforeSubmit = function (form_values, element, options) {
 120    // Disable the element that received the change.
 121    $(this.element).addClass('progress-disabled').attr('disabled', true);
 122  
 123    // Insert progressbar or throbber.
 124    if (this.progress.type == 'bar') {
 125      var progressBar = new Drupal.progressBar('ahah-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));
 126      if (this.progress.message) {
 127        progressBar.setProgress(-1, this.progress.message);
 128      }
 129      if (this.progress.url) {
 130        progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
 131      }
 132      this.progress.element = $(progressBar.element).addClass('ahah-progress ahah-progress-bar');
 133      this.progress.object = progressBar;
 134      $(this.element).after(this.progress.element);
 135    }
 136    else if (this.progress.type == 'throbber') {
 137      this.progress.element = $('<div class="ahah-progress ahah-progress-throbber"><div class="throbber">&nbsp;</div></div>');
 138      if (this.progress.message) {
 139        $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>')
 140      }
 141      $(this.element).after(this.progress.element);
 142    }
 143  };
 144  
 145  /**
 146   * Handler for the form redirection completion.
 147   */
 148  Drupal.ahah.prototype.success = function (response, status) {
 149    var wrapper = $(this.wrapper);
 150    var form = $(this.element).parents('form');
 151    // Manually insert HTML into the jQuery object, using $() directly crashes
 152    // Safari with long string lengths. http://dev.jquery.com/ticket/1152
 153    var new_content = $('<div></div>').html(response.data);
 154  
 155    // Restore the previous action and target to the form.
 156    form.attr('action', this.form_action);
 157    this.form_target ? form.attr('target', this.form_target) : form.removeAttr('target');
 158    this.form_encattr ? form.attr('target', this.form_encattr) : form.removeAttr('encattr');
 159  
 160    // Remove the progress element.
 161    if (this.progress.element) {
 162      $(this.progress.element).remove();
 163    }
 164    if (this.progress.object) {
 165      this.progress.object.stopMonitoring();
 166    }
 167    $(this.element).removeClass('progress-disabled').attr('disabled', false);
 168  
 169    // Add the new content to the page.
 170    Drupal.freezeHeight();
 171    if (this.method == 'replace') {
 172      wrapper.empty().append(new_content);
 173    }
 174    else {
 175      wrapper[this.method](new_content);
 176    }
 177  
 178    // Immediately hide the new content if we're using any effects.
 179    if (this.showEffect != 'show') {
 180      new_content.hide();
 181    }
 182  
 183    // Determine what effect use and what content will receive the effect, then
 184    // show the new content.
 185    if ($('.ahah-new-content', new_content).size() > 0) {
 186      $('.ahah-new-content', new_content).hide();
 187      new_content.show();
 188      $(".ahah-new-content", new_content)[this.showEffect](this.showSpeed);
 189    }
 190    else if (this.showEffect != 'show') {
 191      new_content[this.showEffect](this.showSpeed);
 192    }
 193  
 194    // Attach all javascript behaviors to the new content, if it was successfully
 195    // added to the page, this if statement allows #ahah[wrapper] to be optional.
 196    if (new_content.parents('html').length > 0) {
 197      Drupal.attachBehaviors(new_content);
 198    }
 199  
 200    Drupal.unfreezeHeight();
 201  };
 202  
 203  /**
 204   * Handler for the form redirection error.
 205   */
 206  Drupal.ahah.prototype.error = function (response, uri) {
 207    alert(Drupal.ahahError(response, uri));
 208    // Resore the previous action and target to the form.
 209    $(this.element).parent('form').attr( { action: this.form_action, target: this.form_target} );
 210    // Remove the progress element.
 211    if (this.progress.element) {
 212      $(this.progress.element).remove();
 213    }
 214    if (this.progress.object) {
 215      this.progress.object.stopMonitoring();
 216    }
 217    // Undo hide.
 218    $(this.wrapper).show();
 219    // Re-enable the element.
 220    $(this.element).removeClass('progess-disabled').attr('disabled', false);
 221  };