[Summary view] [Print] [Text view]

   1  // $Id: dialog.js,v 1.1.2.5 2011/01/31 21:03:40 drewish Exp $
   2  /**
   3   * @file
   4   *
   5   * Display ajax content in a Dialog window.
   6   *
   7   * This javascript relies on the CTools ajax responder and jQueryUI Dialog.
   8   */
   9  
  10  (function ($) {
  11    // Make sure our objects are defined.
  12    Drupal.CTools = Drupal.CTools || {};
  13    Drupal.Dialog = Drupal.Dialog || {};
  14  
  15    /**
  16     * Display the modal
  17     */
  18    Drupal.Dialog.show = function() {
  19      if (!Drupal.Dialog.dialog) {
  20        var o = {
  21          modal: true,
  22          height: Drupal.settings.Dialog.height,
  23          width: Drupal.settings.Dialog.width,
  24          position: 'center'
  25        };
  26        Drupal.Dialog.dialog = $(Drupal.theme('DialogMain')).dialog(o);
  27  
  28        // Completely remove the dialog every time it is closed.  This is the
  29        // simplest way to get a clean slate on every dialog invokation.
  30        Drupal.Dialog.dialog.bind('dialogclose', function(event, ui) {
  31          $(this).remove();
  32          Drupal.Dialog.dialog = null;
  33        });
  34      }
  35  
  36      Drupal.CTools.AJAX.commands.dialog_loading();
  37    };
  38  
  39    /**
  40     * Hide the modal
  41     */
  42    Drupal.Dialog.dismiss = function() {
  43      if (Drupal.Dialog.dialog) {
  44        Drupal.Dialog.dialog.dialog('close');
  45      }
  46    };
  47  
  48    /**
  49     * Provide the HTML to create the modal dialog.
  50     */
  51    Drupal.theme.prototype.DialogMain = function () {
  52      var html = '<div id="dialog-main" />';
  53      return html;
  54    }
  55  
  56    /**
  57     * Provide the HTML to create the throbber.
  58     */
  59    Drupal.theme.prototype.DialogThrobber = function () {
  60      var html = '';
  61      html += '  <div id="modal-throbber">';
  62      html += '    <div class="modal-throbber-wrapper">';
  63      html +=        Drupal.settings.Dialog.throbber;
  64      html += '    </div>';
  65      html += '  </div>';
  66  
  67      return html;
  68    };
  69  
  70    /**
  71     * Generic replacement click handler to open the modal with the destination
  72     * specified by the href of the link.
  73     */
  74    Drupal.Dialog.clickAjaxLink = function() {
  75      // show the empty dialog right away.
  76      Drupal.Dialog.show();
  77      Drupal.CTools.AJAX.clickAJAXLink.apply(this);
  78      if (!$(this).hasClass('ctools-ajaxing')) {
  79        Drupal.Dialog.dismiss();
  80      }
  81  
  82      return false;
  83    };
  84  
  85    /**
  86     * Generic replacement click handler to open the modal with the destination
  87     * specified by the href of the link.
  88     */
  89    Drupal.Dialog.clickAjaxButton = function() {
  90      if ($(this).hasClass('ctools-ajaxing')) {
  91        return false;
  92      }
  93  
  94      Drupal.Dialog.show();
  95      Drupal.CTools.AJAX.clickAJAXButton.apply(this);
  96      if (!$(this).hasClass('ctools-ajaxing')) {
  97        Drupal.Dialog.dismiss();
  98      }
  99  
 100      return false;
 101    };
 102  
 103    /**
 104     * Submit responder to do an AJAX submit on all modal forms.
 105     */
 106    Drupal.Dialog.submitAjaxForm = function() {
 107      if ($(this).hasClass('ctools-ajaxing')) {
 108        return false;
 109      }
 110  
 111      url = $(this).attr('action');
 112      $(this).addClass('ctools-ajaxing');
 113      var object = $(this);
 114      try {
 115        url.replace('/nojs/', '/ajax/');
 116  
 117        var ajaxOptions = {
 118          type: 'POST',
 119          url: url,
 120          data: '',
 121          global: true,
 122          success: Drupal.CTools.AJAX.respond,
 123          error: function() {
 124            alert("An error occurred while attempting to process " + url);
 125          },
 126          complete: function() {
 127            object.removeClass('ctools-ajaxing');
 128            $('.ctools-ajaxing', object).removeClass('ctools-ajaxing');
 129          },
 130          dataType: 'json'
 131        };
 132  
 133        // If the form requires uploads, use an iframe instead and add data to
 134        // the submit to support this and use the proper response.
 135        if ($(this).attr('enctype') == 'multipart/form-data') {
 136          $(this).append('<input type="hidden" name="ctools_multipart" value="1">');
 137          ajaxIframeOptions = {
 138            success: Drupal.CTools.AJAX.iFrameJsonRespond,
 139            iframe: true
 140          };
 141          ajaxOptions = $.extend(ajaxOptions, ajaxIframeOptions);
 142        }
 143  
 144        $(this).ajaxSubmit(ajaxOptions);
 145      }
 146      catch (err) {
 147        alert("An error occurred while attempting to process " + url);
 148        $(this).removeClass('ctools-ajaxing');
 149        $('div.ctools-ajaxing', this).remove();
 150        return false;
 151      }
 152      return false;
 153    };
 154  
 155    /**
 156     * Handle a form button being clicked inside of a dialog.
 157     */
 158    Drupal.Dialog.clickFormButton = function() {
 159      if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
 160        return false;
 161      }
 162  
 163      // Make sure it knows our button.
 164      if (!$(this.form).hasClass('ctools-ajaxing')) {
 165        this.form.clk = this;
 166        $(this).after('<div class="ctools-ajaxing"> &nbsp; </div>');
 167  
 168        // Submit the form. Notice the difference between $().submit()
 169        // which is the ajax submit and form.submit() which is the
 170        // default browser submit.
 171        $(this.form).submit();
 172      }
 173  
 174      return false;
 175    };
 176  
 177    /**
 178     * Bind links that will open modals to the appropriate function.
 179     */
 180    Drupal.behaviors.Dialog = function(context) {
 181      // Bind links
 182      $('a.ctools-use-dialog:not(.ctools-use-dialog-processed)', context)
 183        .addClass('ctools-use-dialog-processed')
 184        .click(Drupal.Dialog.clickAjaxLink);
 185  
 186      // Bind buttons
 187      $('input.ctools-use-dialog:not(.ctools-use-dialog-processed), button.ctools-use-dialog:not(.ctools-use-dialog-processed)', context)
 188        .addClass('ctools-use-dialog-processed')
 189        .click(Drupal.Dialog.clickAjaxButton);
 190  
 191      if ($(context).attr('id') == 'dialog-main') {
 192        // Bind submit links in the modal form.
 193        $('form:not(.ctools-use-dialog-processed)', context)
 194          .addClass('ctools-use-dialog-processed')
 195          .submit(Drupal.Dialog.submitAjaxForm);
 196        // add click handlers so that we can tell which button was clicked,
 197        // because the AJAX submit does not set the values properly.
 198  
 199        $('input[type="submit"]:not(.ctools-use-dialog-processed), button:not(.ctools-use-dialog-processed)', context)
 200          .addClass('ctools-use-dialog-processed')
 201          .click(Drupal.Dialog.clickFormButton);
 202  
 203        var buttons = {}, buttonsMap = {};
 204        $('.ctools-dialog-button:not(.ctools-dialog-button-processed)', context)
 205          .addClass('ctools-dialog-button-processed')
 206          .hide()
 207          .each(function() {
 208            var text = $(this).is('input') ? $(this).attr('value') : $(this).text();
 209            buttonsMap[text] = this;
 210            buttons[text] = function(e) {
 211              var text = $(e.target).text();
 212              var map = $(this).data('dialogButtonsMap');
 213              var button = map[text];
 214  
 215              $(button).click();
 216            };
 217          });
 218        $(context).data('dialogButtonsMap', buttonsMap);
 219        $(context).dialog('option', 'buttons', buttons);
 220      }
 221    };
 222  
 223    // The following are implementations of AJAX responder commands.
 224  
 225    /**
 226     * AJAX responder command to place HTML within the modal.
 227     */
 228    Drupal.CTools.AJAX.commands.dialog_display = function(command) {
 229      var $el = Drupal.Dialog.dialog;
 230      $el.html(command.output)
 231        // remove any previously added buttons
 232        .dialog('option', 'buttons', {})
 233        .dialog('option', 'title', command.title)
 234        .dialog('show');
 235  
 236      var defaultOptions = {
 237        height: Drupal.settings.Dialog.height,
 238        width: Drupal.settings.Dialog.width,
 239        position: 'center',
 240        maxHeight: Math.floor($(window).height() * .8)
 241      };
 242      var o = $.extend(defaultOptions, command.options);
 243      for (i in o) {
 244        $el.dialog('option', i, o[i]);
 245      }
 246      if ($el.height() > o.maxHeight) {
 247        $el.dialog('option', 'height', o.maxHeight);
 248        $el.dialog('option', 'position', o.position);
 249        // This is really ugly, but dialog gives us no way to call
 250        // _size() in a sane way!
 251        $el.data('dialog')._size();
 252      }
 253  
 254      Drupal.attachBehaviors($el);
 255    }
 256  
 257    /**
 258     * AJAX responder command to dismiss the modal.
 259     */
 260    Drupal.CTools.AJAX.commands.dialog_dismiss = function(command) {
 261      Drupal.Dialog.dismiss();
 262    }
 263  
 264    /**
 265     * Display loading
 266     */
 267    Drupal.CTools.AJAX.commands.dialog_loading = function(command) {
 268      Drupal.CTools.AJAX.commands.dialog_display({
 269        output: Drupal.theme('DialogThrobber'),
 270        title: Drupal.t('Loading...')
 271      });
 272    }
 273  })(jQuery);