Projet

Général

Profil

Paste
Télécharger (24,7 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / modules / ctools / js / modal.js @ c2ac6d1d

1
/**
2
 * @file
3
 *
4
 * Implement a modal form.
5
 *
6
 * @see modal.inc for documentation.
7
 *
8
 * This javascript relies on the CTools ajax responder.
9
 */
10

    
11
(function ($) {
12
  // Make sure our objects are defined.
13
  Drupal.CTools = Drupal.CTools || {};
14
  Drupal.CTools.Modal = Drupal.CTools.Modal || {};
15

    
16
  /**
17
   * Display the modal
18
   *
19
   * @todo -- document the settings.
20
   */
21
  Drupal.CTools.Modal.show = function(choice) {
22
    var opts = {};
23

    
24
    if (choice && typeof choice == 'string' && Drupal.settings[choice]) {
25
      // This notation guarantees we are actually copying it.
26
      $.extend(true, opts, Drupal.settings[choice]);
27
    }
28
    else if (choice) {
29
      $.extend(true, opts, choice);
30
    }
31

    
32
    var defaults = {
33
      modalTheme: 'CToolsModalDialog',
34
      throbberTheme: 'CToolsModalThrobber',
35
      animation: 'show',
36
      animationSpeed: 'fast',
37
      modalSize: {
38
        type: 'scale',
39
        width: .8,
40
        height: .8,
41
        addWidth: 0,
42
        addHeight: 0,
43
        // How much to remove from the inner content to make space for the
44
        // theming.
45
        contentRight: 25,
46
        contentBottom: 45
47
      },
48
      modalOptions: {
49
        opacity: .55,
50
        background: '#fff'
51
      },
52
      modalClass: 'default'
53
    };
54

    
55
    var settings = {};
56
    $.extend(true, settings, defaults, Drupal.settings.CToolsModal, opts);
57

    
58
    if (Drupal.CTools.Modal.currentSettings && Drupal.CTools.Modal.currentSettings != settings) {
59
      Drupal.CTools.Modal.modal.remove();
60
      Drupal.CTools.Modal.modal = null;
61
    }
62

    
63
    Drupal.CTools.Modal.currentSettings = settings;
64

    
65
    var resize = function(e) {
66
      // When creating the modal, it actually exists only in a theoretical
67
      // place that is not in the DOM. But once the modal exists, it is in the
68
      // DOM so the context must be set appropriately.
69
      var context = e ? document : Drupal.CTools.Modal.modal;
70

    
71
      if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'scale') {
72
        var width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width;
73
        var height = $(window).height() * Drupal.CTools.Modal.currentSettings.modalSize.height;
74
      }
75
      else {
76
        var width = Drupal.CTools.Modal.currentSettings.modalSize.width;
77
        var height = Drupal.CTools.Modal.currentSettings.modalSize.height;
78
      }
79

    
80
      // Use the additionol pixels for creating the width and height.
81
      $('div.ctools-modal-content', context).css({
82
        'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px',
83
        'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px'
84
      });
85
      $('div.ctools-modal-content .modal-content', context).css({
86
        'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px',
87
        'height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px'
88
      });
89
    }
90

    
91
    if (!Drupal.CTools.Modal.modal) {
92
      Drupal.CTools.Modal.modal = $(Drupal.theme(settings.modalTheme));
93
      if (settings.modalSize.type == 'scale') {
94
        $(window).bind('resize', resize);
95
      }
96
    }
97

    
98
    resize();
99

    
100
    $('span.modal-title', Drupal.CTools.Modal.modal).html(Drupal.CTools.Modal.currentSettings.loadingText);
101
    Drupal.CTools.Modal.modalContent(Drupal.CTools.Modal.modal, settings.modalOptions, settings.animation, settings.animationSpeed, settings.modalClass);
102
    $('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme)).addClass('ctools-modal-loading');
103

    
104
    // Position autocomplete results based on the scroll position of the modal.
105
    $('#modalContent .modal-content').delegate('input.form-autocomplete', 'keyup', function() {
106
      $('#autocomplete').css('top', $(this).position().top + $(this).outerHeight() + $(this).offsetParent().filter('#modal-content').scrollTop());
107
    });
108
  };
109

    
110
  /**
111
   * Hide the modal
112
   */
113
  Drupal.CTools.Modal.dismiss = function() {
114
    if (Drupal.CTools.Modal.modal) {
115
      Drupal.CTools.Modal.unmodalContent(Drupal.CTools.Modal.modal);
116
    }
117
  };
118

    
119
  /**
120
   * Provide the HTML to create the modal dialog.
121
   */
122
  Drupal.theme.prototype.CToolsModalDialog = function () {
123
    var html = ''
124
    html += '<div id="ctools-modal">'
125
    html += '  <div class="ctools-modal-content">' // panels-modal-content
126
    html += '    <div class="modal-header">';
127
    html += '      <a class="close" href="#">';
128
    html +=          Drupal.CTools.Modal.currentSettings.closeText + Drupal.CTools.Modal.currentSettings.closeImage;
129
    html += '      </a>';
130
    html += '      <span id="modal-title" class="modal-title">&nbsp;</span>';
131
    html += '    </div>';
132
    html += '    <div id="modal-content" class="modal-content">';
133
    html += '    </div>';
134
    html += '  </div>';
135
    html += '</div>';
136

    
137
    return html;
138
  }
139

    
140
  /**
141
   * Provide the HTML to create the throbber.
142
   */
143
  Drupal.theme.prototype.CToolsModalThrobber = function () {
144
    var html = '';
145
    html += '<div id="modal-throbber">';
146
    html += '  <div class="modal-throbber-wrapper">';
147
    html +=      Drupal.CTools.Modal.currentSettings.throbber;
148
    html += '  </div>';
149
    html += '</div>';
150

    
151
    return html;
152
  };
153

    
154
  /**
155
   * Figure out what settings string to use to display a modal.
156
   */
157
  Drupal.CTools.Modal.getSettings = function (object) {
158
    var match = $(object).attr('class').match(/ctools-modal-(\S+)/);
159
    if (match) {
160
      return match[1];
161
    }
162
  }
163

    
164
  /**
165
   * Click function for modals that can be cached.
166
   */
167
  Drupal.CTools.Modal.clickAjaxCacheLink = function () {
168
    Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
169
    return Drupal.CTools.AJAX.clickAJAXCacheLink.apply(this);
170
  };
171

    
172
  /**
173
   * Handler to prepare the modal for the response
174
   */
175
  Drupal.CTools.Modal.clickAjaxLink = function () {
176
    Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
177
    return false;
178
  };
179

    
180
  /**
181
   * Submit responder to do an AJAX submit on all modal forms.
182
   */
183
  Drupal.CTools.Modal.submitAjaxForm = function(e) {
184
    var $form = $(this);
185
    var url = $form.attr('action');
186

    
187
    setTimeout(function() { Drupal.CTools.AJAX.ajaxSubmit($form, url); }, 1);
188
    return false;
189
  }
190

    
191
  /**
192
   * Bind links that will open modals to the appropriate function.
193
   */
194
  Drupal.behaviors.ZZCToolsModal = {
195
    attach: function(context) {
196
      // Bind links
197
      // Note that doing so in this order means that the two classes can be
198
      // used together safely.
199
      /*
200
       * @todo remimplement the warm caching feature
201
       $('a.ctools-use-modal-cache', context).once('ctools-use-modal', function() {
202
         $(this).click(Drupal.CTools.Modal.clickAjaxCacheLink);
203
         Drupal.CTools.AJAX.warmCache.apply(this);
204
       });
205
        */
206

    
207
      $('area.ctools-use-modal, a.ctools-use-modal', context).once('ctools-use-modal', function() {
208
        var $this = $(this);
209
        $this.click(Drupal.CTools.Modal.clickAjaxLink);
210
        // Create a drupal ajax object
211
        var element_settings = {};
212
        if ($this.attr('href')) {
213
          element_settings.url = $this.attr('href');
214
          element_settings.event = 'click';
215
          element_settings.progress = { type: 'throbber' };
216
        }
217
        var base = $this.attr('href');
218
        Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
219
      });
220

    
221
      // Bind buttons
222
      $('input.ctools-use-modal, button.ctools-use-modal', context).once('ctools-use-modal', function() {
223
        var $this = $(this);
224
        $this.click(Drupal.CTools.Modal.clickAjaxLink);
225
        var button = this;
226
        var element_settings = {};
227

    
228
        // AJAX submits specified in this manner automatically submit to the
229
        // normal form action.
230
        element_settings.url = Drupal.CTools.Modal.findURL(this);
231
        if (element_settings.url == '') {
232
          element_settings.url = $(this).closest('form').attr('action');
233
        }
234
        element_settings.event = 'click';
235
        element_settings.setClick = true;
236

    
237
        var base = $this.attr('id');
238
        Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
239

    
240
        // Make sure changes to settings are reflected in the URL.
241
        $('.' + $(button).attr('id') + '-url').change(function() {
242
          Drupal.ajax[base].options.url = Drupal.CTools.Modal.findURL(button);
243
        });
244
      });
245

    
246
      // Bind our custom event to the form submit
247
      $('#modal-content form', context).once('ctools-use-modal', function() {
248
        var $this = $(this);
249
        var element_settings = {};
250

    
251
        element_settings.url = $this.attr('action');
252
        element_settings.event = 'submit';
253
        element_settings.progress = { 'type': 'throbber' }
254
        var base = $this.attr('id');
255

    
256
        Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
257
        Drupal.ajax[base].form = $this;
258

    
259
        $('input[type=submit], button', this).click(function(event) {
260
          Drupal.ajax[base].element = this;
261
          this.form.clk = this;
262
          // Stop autocomplete from submitting.
263
          if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
264
            return false;
265
          }
266
          // An empty event means we were triggered via .click() and
267
          // in jquery 1.4 this won't trigger a submit.
268
          // We also have to check jQuery version to prevent
269
          // IE8 + jQuery 1.4.4 to break on other events
270
          // bound to the submit button.
271
          if (jQuery.fn.jquery.substr(0, 3) === '1.4' && typeof event.bubbles === "undefined") {
272
            $(this.form).trigger('submit');
273
            return false;
274
          }
275
        });
276
      });
277

    
278
      // Bind a click handler to allow elements with the 'ctools-close-modal'
279
      // class to close the modal.
280
      $('.ctools-close-modal', context).once('ctools-close-modal')
281
        .click(function() {
282
          Drupal.CTools.Modal.dismiss();
283
          return false;
284
        });
285
    }
286
  };
287

    
288
  // The following are implementations of AJAX responder commands.
289

    
290
  /**
291
   * AJAX responder command to place HTML within the modal.
292
   */
293
  Drupal.CTools.Modal.modal_display = function(ajax, response, status) {
294
    if ($('#modalContent').length == 0) {
295
      Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(ajax.element));
296
    }
297
    $('#modal-title').html(response.title);
298
    // Simulate an actual page load by scrolling to the top after adding the
299
    // content. This is helpful for allowing users to see error messages at the
300
    // top of a form, etc.
301
    $('#modal-content').html(response.output).scrollTop(0);
302

    
303
    // Attach behaviors within a modal dialog.
304
    var settings = response.settings || ajax.settings || Drupal.settings;
305
    Drupal.attachBehaviors($('#modalContent'), settings);
306

    
307
    if ($('#modal-content').hasClass('ctools-modal-loading')) {
308
      $('#modal-content').removeClass('ctools-modal-loading');
309
    }
310
    else {
311
      // If the modal was already shown, and we are simply replacing its
312
      // content, then focus on the first focusable element in the modal.
313
      // (When first showing the modal, focus will be placed on the close
314
      // button by the show() function called above.)
315
      $('#modal-content :focusable:first').focus();
316
    }
317
  }
318

    
319
  /**
320
   * AJAX responder command to dismiss the modal.
321
   */
322
  Drupal.CTools.Modal.modal_dismiss = function(command) {
323
    Drupal.CTools.Modal.dismiss();
324
    $('link.ctools-temporary-css').remove();
325
  }
326

    
327
  /**
328
   * Display loading
329
   */
330
  //Drupal.CTools.AJAX.commands.modal_loading = function(command) {
331
  Drupal.CTools.Modal.modal_loading = function(command) {
332
    Drupal.CTools.Modal.modal_display({
333
      output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
334
      title: Drupal.CTools.Modal.currentSettings.loadingText
335
    });
336
  }
337

    
338
  /**
339
   * Find a URL for an AJAX button.
340
   *
341
   * The URL for this gadget will be composed of the values of items by
342
   * taking the ID of this item and adding -url and looking for that
343
   * class. They need to be in the form in order since we will
344
   * concat them all together using '/'.
345
   */
346
  Drupal.CTools.Modal.findURL = function(item) {
347
    var url = '';
348
    var url_class = '.' + $(item).attr('id') + '-url';
349
    $(url_class).each(
350
      function() {
351
        var $this = $(this);
352
        if (url && $this.val()) {
353
          url += '/';
354
        }
355
        url += $this.val();
356
      });
357
    return url;
358
  };
359

    
360

    
361
  /**
362
   * modalContent
363
   * @param content string to display in the content box
364
   * @param css obj of css attributes
365
   * @param animation (fadeIn, slideDown, show)
366
   * @param speed (valid animation speeds slow, medium, fast or # in ms)
367
   * @param modalClass class added to div#modalContent
368
   */
369
  Drupal.CTools.Modal.modalContent = function(content, css, animation, speed, modalClass) {
370
    // If our animation isn't set, make it just show/pop
371
    if (!animation) {
372
      animation = 'show';
373
    }
374
    else {
375
      // If our animation isn't "fadeIn" or "slideDown" then it always is show
376
      if (animation != 'fadeIn' && animation != 'slideDown') {
377
        animation = 'show';
378
      }
379
    }
380

    
381
    if (!speed && 0 !== speed) {
382
      speed = 'fast';
383
    }
384

    
385
    // Build our base attributes and allow them to be overriden
386
    css = jQuery.extend({
387
      position: 'absolute',
388
      left: '0px',
389
      margin: '0px',
390
      background: '#000',
391
      opacity: '.55'
392
    }, css);
393

    
394
    // Add opacity handling for IE.
395
    css.filter = 'alpha(opacity=' + (100 * css.opacity) + ')';
396
    content.hide();
397

    
398
    // If we already have modalContent, remove it.
399
    if ($('#modalBackdrop').length) $('#modalBackdrop').remove();
400
    if ($('#modalContent').length) $('#modalContent').remove();
401

    
402
    // position code lifted from http://www.quirksmode.org/viewport/compatibility.html
403
    if (self.pageYOffset) { // all except Explorer
404
    var wt = self.pageYOffset;
405
    } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
406
      var wt = document.documentElement.scrollTop;
407
    } else if (document.body) { // all other Explorers
408
      var wt = document.body.scrollTop;
409
    }
410

    
411
    // Get our dimensions
412

    
413
    // Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div
414
    var docHeight = $(document).height() + 50;
415
    var docWidth = $(document).width();
416
    var winHeight = $(window).height();
417
    var winWidth = $(window).width();
418
    if( docHeight < winHeight ) docHeight = winHeight;
419

    
420
    // Create our divs
421
    $('body').append('<div id="modalBackdrop" class="backdrop-' + modalClass + '" style="z-index: 1000; display: none;"></div><div id="modalContent" class="modal-' + modalClass + '" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>');
422

    
423
    // Get a list of the tabbable elements in the modal content.
424
    var getTabbableElements = function () {
425
      var tabbableElements = $('#modalContent :tabbable'),
426
          radioButtons = tabbableElements.filter('input[type="radio"]');
427

    
428
      // The list of tabbable elements from jQuery is *almost* right. The
429
      // exception is with groups of radio buttons. The list from jQuery will
430
      // include all radio buttons, when in fact, only the selected radio button
431
      // is tabbable, and if no radio buttons in a group are selected, then only
432
      // the first is tabbable.
433
      if (radioButtons.length > 0) {
434
        // First, build up an index of which groups have an item selected or not.
435
        var anySelected = {};
436
        radioButtons.each(function () {
437
          var name = this.name;
438

    
439
          if (typeof anySelected[name] === 'undefined') {
440
            anySelected[name] = radioButtons.filter('input[name="' + name + '"]:checked').length !== 0;
441
          }
442
        });
443

    
444
        // Next filter out the radio buttons that aren't really tabbable.
445
        var found = {};
446
        tabbableElements = tabbableElements.filter(function () {
447
          var keep = true;
448

    
449
          if (this.type == 'radio') {
450
            if (anySelected[this.name]) {
451
              // Only keep the selected one.
452
              keep = this.checked;
453
            }
454
            else {
455
              // Only keep the first one.
456
              if (found[this.name]) {
457
                keep = false;
458
              }
459
              found[this.name] = true;
460
            }
461
          }
462

    
463
          return keep;
464
        });
465
      }
466

    
467
      return tabbableElements.get();
468
    };
469

    
470
    // Keyboard and focus event handler ensures only modal elements gain focus.
471
    modalEventHandler = function( event ) {
472
      target = null;
473
      if ( event ) { //Mozilla
474
        target = event.target;
475
      } else { //IE
476
        event = window.event;
477
        target = event.srcElement;
478
      }
479

    
480
      var parents = $(target).parents().get();
481
      for (var i = 0; i < parents.length; ++i) {
482
        var position = $(parents[i]).css('position');
483
        if (position == 'absolute' || position == 'fixed') {
484
          return true;
485
        }
486
      }
487

    
488
      if ($(target).is('#modalContent, body') || $(target).filter('*:visible').parents('#modalContent').length) {
489
        // Allow the event only if target is a visible child node
490
        // of #modalContent.
491
        return true;
492
      }
493
      else {
494
        getTabbableElements()[0].focus();
495
      }
496

    
497
      event.preventDefault();
498
    };
499
    $('body').bind( 'focus', modalEventHandler );
500
    $('body').bind( 'keypress', modalEventHandler );
501

    
502
    // Keypress handler Ensures you can only TAB to elements within the modal.
503
    // Based on the psuedo-code from WAI-ARIA 1.0 Authoring Practices section
504
    // 3.3.1 "Trapping Focus".
505
    modalTabTrapHandler = function (evt) {
506
      // We only care about the TAB key.
507
      if (evt.which != 9) {
508
        return true;
509
      }
510

    
511
      var tabbableElements = getTabbableElements(),
512
          firstTabbableElement = tabbableElements[0],
513
          lastTabbableElement = tabbableElements[tabbableElements.length - 1],
514
          singleTabbableElement = firstTabbableElement == lastTabbableElement,
515
          node = evt.target;
516

    
517
      // If this is the first element and the user wants to go backwards, then
518
      // jump to the last element.
519
      if (node == firstTabbableElement && evt.shiftKey) {
520
        if (!singleTabbableElement) {
521
          lastTabbableElement.focus();
522
        }
523
        return false;
524
      }
525
      // If this is the last element and the user wants to go forwards, then
526
      // jump to the first element.
527
      else if (node == lastTabbableElement && !evt.shiftKey) {
528
        if (!singleTabbableElement) {
529
          firstTabbableElement.focus();
530
        }
531
        return false;
532
      }
533
      // If this element isn't in the dialog at all, then jump to the first
534
      // or last element to get the user into the game.
535
      else if ($.inArray(node, tabbableElements) == -1) {
536
        // Make sure the node isn't in another modal (ie. WYSIWYG modal).
537
        var parents = $(node).parents().get();
538
        for (var i = 0; i < parents.length; ++i) {
539
          var position = $(parents[i]).css('position');
540
          if (position == 'absolute' || position == 'fixed') {
541
            return true;
542
          }
543
        }
544

    
545
        if (evt.shiftKey) {
546
          lastTabbableElement.focus();
547
        }
548
        else {
549
          firstTabbableElement.focus();
550
        }
551
      }
552
    };
553
    $('body').bind('keydown', modalTabTrapHandler);
554

    
555
    // Create our content div, get the dimensions, and hide it
556
    var modalContent = $('#modalContent').css('top','-1000px');
557
    var $modalHeader = modalContent.find('.modal-header');
558
    var mdcTop = wt + Math.max((winHeight / 2) - (modalContent.outerHeight() / 2), 0);
559
    var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
560
    $('#modalBackdrop').css(css).css('top', 0).css('height', docHeight + 'px').css('width', docWidth + 'px').show();
561
    modalContent.css({top: mdcTop + 'px', left: mdcLeft + 'px'}).hide()[animation](speed);
562

    
563
    // Bind a click for closing the modalContent
564
    modalContentClose = function(){close(); return false;};
565
    $('.close', $modalHeader).bind('click', modalContentClose);
566

    
567
    // Bind a keypress on escape for closing the modalContent
568
    modalEventEscapeCloseHandler = function(event) {
569
      if (event.keyCode == 27) {
570
        close();
571
        return false;
572
      }
573
    };
574

    
575
    $(document).bind('keydown', modalEventEscapeCloseHandler);
576

    
577
    // Per WAI-ARIA 1.0 Authoring Practices, initial focus should be on the
578
    // close button, but we should save the original focus to restore it after
579
    // the dialog is closed.
580
    var oldFocus = document.activeElement;
581
    $('.close', $modalHeader).focus();
582

    
583
    // Close the open modal content and backdrop
584
    function close() {
585
      // Unbind the events
586
      $(window).unbind('resize',  modalContentResize);
587
      $('body').unbind( 'focus', modalEventHandler);
588
      $('body').unbind( 'keypress', modalEventHandler );
589
      $('body').unbind( 'keydown', modalTabTrapHandler );
590
      $('.close', $modalHeader).unbind('click', modalContentClose);
591
      $(document).unbind('keydown', modalEventEscapeCloseHandler);
592
      $(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
593

    
594
      // Closing animation.
595
      switch (animation) {
596
        case 'fadeIn':
597
          modalContent.fadeOut(speed, modalContentRemove);
598
          break;
599

    
600
        case 'slideDown':
601
          modalContent.slideUp(speed, modalContentRemove);
602
          break;
603

    
604
        case 'show':
605
          modalContent.hide(speed, modalContentRemove);
606
          break;
607
      }
608
    }
609

    
610
    // Remove the content.
611
    modalContentRemove = function () {
612
      $('#modalContent').remove();
613
      $('#modalBackdrop').remove();
614

    
615
      // Restore focus to where it was before opening the dialog.
616
      $(oldFocus).focus();
617
    };
618

    
619
    // Move and resize the modalBackdrop and modalContent on window resize.
620
    modalContentResize = function () {
621
      // Reset the backdrop height/width to get accurate document size.
622
      $('#modalBackdrop').css('height', '').css('width', '');
623

    
624
      // Position code lifted from:
625
      // http://www.quirksmode.org/viewport/compatibility.html
626
      if (self.pageYOffset) { // all except Explorer
627
        var wt = self.pageYOffset;
628
      } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
629
        var wt = document.documentElement.scrollTop;
630
      } else if (document.body) { // all other Explorers
631
        var wt = document.body.scrollTop;
632
      }
633

    
634
      // Get our heights
635
      var docHeight = $(document).height();
636
      var docWidth = $(document).width();
637
      var winHeight = $(window).height();
638
      var winWidth = $(window).width();
639
      if( docHeight < winHeight ) docHeight = winHeight;
640

    
641
      // Get where we should move content to
642
      var modalContent = $('#modalContent');
643
      var mdcTop = wt + Math.max((winHeight / 2) - (modalContent.outerHeight() / 2), 0);
644
      var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
645

    
646
      // Apply the changes
647
      $('#modalBackdrop').css('height', docHeight + 'px').css('width', docWidth + 'px').show();
648
      modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show();
649
    };
650
    $(window).bind('resize', modalContentResize);
651
  };
652

    
653
  /**
654
   * unmodalContent
655
   * @param content (The jQuery object to remove)
656
   * @param animation (fadeOut, slideUp, show)
657
   * @param speed (valid animation speeds slow, medium, fast or # in ms)
658
   */
659
  Drupal.CTools.Modal.unmodalContent = function(content, animation, speed)
660
  {
661
    // If our animation isn't set, make it just show/pop
662
    if (!animation) { var animation = 'show'; } else {
663
      // If our animation isn't "fade" then it always is show
664
      if (( animation != 'fadeOut' ) && ( animation != 'slideUp')) animation = 'show';
665
    }
666
    // Set a speed if we dont have one
667
    if ( !speed ) var speed = 'fast';
668

    
669
    // Unbind the events we bound
670
    $(window).unbind('resize', modalContentResize);
671
    $('body').unbind('focus', modalEventHandler);
672
    $('body').unbind('keypress', modalEventHandler);
673
    $('body').unbind( 'keydown', modalTabTrapHandler );
674
    var $modalContent = $('#modalContent');
675
    var $modalHeader = $modalContent.find('.modal-header');
676
    $('.close', $modalHeader).unbind('click', modalContentClose);
677
    $('body').unbind('keypress', modalEventEscapeCloseHandler);
678
    $(document).trigger('CToolsDetachBehaviors', $modalContent);
679

    
680
    // jQuery magic loop through the instances and run the animations or removal.
681
    content.each(function(){
682
      if ( animation == 'fade' ) {
683
        $('#modalContent').fadeOut(speed, function() {
684
          $('#modalBackdrop').fadeOut(speed, function() {
685
            $(this).remove();
686
          });
687
          $(this).remove();
688
        });
689
      } else {
690
        if ( animation == 'slide' ) {
691
          $('#modalContent').slideUp(speed,function() {
692
            $('#modalBackdrop').slideUp(speed, function() {
693
              $(this).remove();
694
            });
695
            $(this).remove();
696
          });
697
        } else {
698
          $('#modalContent').remove();
699
          $('#modalBackdrop').remove();
700
        }
701
      }
702
    });
703
  };
704

    
705
$(function() {
706
  Drupal.ajax.prototype.commands.modal_display = Drupal.CTools.Modal.modal_display;
707
  Drupal.ajax.prototype.commands.modal_dismiss = Drupal.CTools.Modal.modal_dismiss;
708
});
709

    
710
})(jQuery);