[Summary view] [Print] [Text view]

   1  // $Id: modal.js,v 1.17.2.20 2010/10/20 19:22:08 merlinofchaos Exp $
   2  /**
   3   * @file
   4   *
   5   * Implement a modal form.
   6   *
   7   * @see modal.inc for documentation.
   8   *
   9   * This javascript relies on the CTools ajax responder.
  10   */
  11  
  12  (function ($) {
  13    // Make sure our objects are defined.
  14    Drupal.CTools = Drupal.CTools || {};
  15    Drupal.CTools.Modal = Drupal.CTools.Modal || {};
  16  
  17    /**
  18     * Display the modal
  19     *
  20     * @todo -- document the settings.
  21     */
  22    Drupal.CTools.Modal.show = function(choice) {
  23      var opts = {};
  24  
  25      if (choice && typeof choice == 'string' && Drupal.settings[choice]) {
  26        // This notation guarantees we are actually copying it.
  27        $.extend(true, opts, Drupal.settings[choice]);
  28      }
  29      else if (choice) {
  30        $.extend(true, opts, choice);
  31      }
  32  
  33      var defaults = {
  34        modalTheme: 'CToolsModalDialog',
  35        throbberTheme: 'CToolsModalThrobber',
  36        animation: 'show',
  37        animationSpeed: 'fast',
  38        modalSize: {
  39          type: 'scale',
  40          width: .8,
  41          height: .8,
  42          addWidth: 0,
  43          addHeight: 0,
  44          // How much to remove from the inner content to make space for the
  45          // theming.
  46          contentRight: 25,
  47          contentBottom: 45
  48        },
  49        modalOptions: {
  50          opacity: .55,
  51          background: '#fff'
  52        }
  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);
 102      $('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme));
 103    };
 104  
 105    /**
 106     * Hide the modal
 107     */
 108    Drupal.CTools.Modal.dismiss = function() {
 109      if (Drupal.CTools.Modal.modal) {
 110        Drupal.CTools.Modal.unmodalContent(Drupal.CTools.Modal.modal);
 111      }
 112    };
 113  
 114    /**
 115     * Provide the HTML to create the modal dialog.
 116     */
 117    Drupal.theme.prototype.CToolsModalDialog = function () {
 118      var html = ''
 119      html += '  <div id="ctools-modal">'
 120      html += '    <div class="ctools-modal-content">' // panels-modal-content
 121      html += '      <div class="modal-header">';
 122      html += '        <a class="close" href="#">';
 123      html +=            Drupal.CTools.Modal.currentSettings.closeText + Drupal.CTools.Modal.currentSettings.closeImage;
 124      html += '        </a>';
 125      html += '        <span id="modal-title" class="modal-title">&nbsp;</span>';
 126      html += '      </div>';
 127      html += '      <div id="modal-content" class="modal-content">';
 128      html += '      </div>';
 129      html += '    </div>';
 130      html += '  </div>';
 131  
 132      return html;
 133    }
 134  
 135    /**
 136     * Provide the HTML to create the throbber.
 137     */
 138    Drupal.theme.prototype.CToolsModalThrobber = function () {
 139      var html = '';
 140      html += '  <div id="modal-throbber">';
 141      html += '    <div class="modal-throbber-wrapper">';
 142      html +=        Drupal.CTools.Modal.currentSettings.throbber;
 143      html += '    </div>';
 144      html += '  </div>';
 145  
 146      return html;
 147    };
 148  
 149    /**
 150     * Figure out what settings string to use to display a modal.
 151     */
 152    Drupal.CTools.Modal.getSettings = function (object) {
 153      var match = $(object).attr('class').match(/ctools-modal-(\S+)/);
 154      if (match) {
 155        return match[1];
 156      }
 157    }
 158  
 159    /**
 160     * Click function for modals that can be cached.
 161     */
 162    Drupal.CTools.Modal.clickAjaxCacheLink = function () {
 163      Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
 164      return Drupal.CTools.AJAX.clickAJAXCacheLink.apply(this);
 165    };
 166  
 167    /**
 168     * Generic replacement click handler to open the modal with the destination
 169     * specified by the href of the link.
 170     */
 171    Drupal.CTools.Modal.clickAjaxLink = function () {
 172      // show the empty dialog right away.
 173      Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
 174      Drupal.CTools.AJAX.clickAJAXLink.apply(this);
 175      if (!$(this).hasClass('ctools-ajaxing')) {
 176        Drupal.CTools.Modal.dismiss();
 177      }
 178  
 179      return false;
 180    };
 181  
 182    /**
 183     * Generic replacement click handler to open the modal with the destination
 184     * specified by the href of the link.
 185     */
 186    Drupal.CTools.Modal.clickAjaxButton = function() {
 187      if ($(this).hasClass('ctools-ajaxing')) {
 188        return false;
 189      }
 190  
 191      Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
 192      Drupal.CTools.AJAX.clickAJAXButton.apply(this);
 193      if (!$(this).hasClass('ctools-ajaxing')) {
 194        Drupal.CTools.Modal.dismiss();
 195      }
 196  
 197      return false;
 198    };
 199  
 200    /**
 201     * Submit responder to do an AJAX submit on all modal forms.
 202     */
 203    Drupal.CTools.Modal.submitAjaxForm = function(e) {
 204      var url = $(this).attr('action');
 205      var form = $(this);
 206  
 207      setTimeout(function() { Drupal.CTools.AJAX.ajaxSubmit(form, url); }, 1);
 208      return false;
 209    }
 210  
 211    /**
 212     * Bind links that will open modals to the appropriate function.
 213     */
 214    Drupal.behaviors.ZZCToolsModal = function(context) {
 215      // Bind links
 216      // Note that doing so in this order means that the two classes can be
 217      // used together safely.
 218      $('a.ctools-use-modal-cache:not(.ctools-use-modal-processed)', context)
 219        .addClass('ctools-use-modal-processed')
 220        .click(Drupal.CTools.Modal.clickAjaxCacheLink)
 221        .each(function () {
 222          Drupal.CTools.AJAX.warmCache.apply(this);
 223        });
 224  
 225      $('a.ctools-use-modal:not(.ctools-use-modal-processed)', context)
 226        .addClass('ctools-use-modal-processed')
 227        .click(Drupal.CTools.Modal.clickAjaxLink);
 228  
 229      // Bind buttons
 230      $('input.ctools-use-modal:not(.ctools-use-modal-processed), button.ctools-use-modal:not(.ctools-use-modal-processed)', context)
 231        .addClass('ctools-use-modal-processed')
 232        .click(Drupal.CTools.Modal.clickAjaxButton);
 233  
 234      // Bind submit links in the modal form.
 235      $('#modal-content form:not(.ctools-use-modal-processed)', context)
 236        .addClass('ctools-use-modal-processed')
 237        .submit(Drupal.CTools.Modal.submitAjaxForm)
 238        .bind('CToolsAJAXSubmit', Drupal.CTools.AJAX.ajaxSubmit);
 239  
 240      // add click handlers so that we can tell which button was clicked,
 241      // because the AJAX submit does not set the values properly.
 242  
 243      $('#modal-content input[type="submit"]:not(.ctools-use-modal-processed), #modal-content button:not(.ctools-use-modal-processed)', context)
 244        .addClass('ctools-use-modal-processed')
 245        .click(function() {
 246          if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
 247            return false;
 248          }
 249  
 250          // Make sure it knows our button.
 251          if (!$(this.form).hasClass('ctools-ajaxing')) {
 252            this.form.clk = this;
 253          }
 254        });
 255  
 256    };
 257  
 258    // The following are implementations of AJAX responder commands.
 259  
 260    /**
 261     * AJAX responder command to place HTML within the modal.
 262     */
 263    Drupal.CTools.AJAX.commands.modal_display = function(command) {
 264      $('#modal-title').html(command.title);
 265      $('#modal-content').html(command.output);
 266      Drupal.attachBehaviors();
 267    }
 268  
 269    /**
 270     * AJAX responder command to dismiss the modal.
 271     */
 272    Drupal.CTools.AJAX.commands.modal_dismiss = function(command) {
 273      Drupal.CTools.Modal.dismiss();
 274      $('link.ctools-temporary-css').remove();
 275    }
 276  
 277    /**
 278     * Display loading
 279     */
 280    Drupal.CTools.AJAX.commands.modal_loading = function(command) {
 281      Drupal.CTools.AJAX.commands.modal_display({
 282        output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
 283        title: Drupal.CTools.Modal.currentSettings.loadingText
 284      });
 285    }
 286  
 287    /**
 288     * modalContent
 289     * @param content string to display in the content box
 290     * @param css obj of css attributes
 291     * @param animation (fadeIn, slideDown, show)
 292     * @param speed (valid animation speeds slow, medium, fast or # in ms)
 293     */
 294    Drupal.CTools.Modal.modalContent = function(content, css, animation, speed) {
 295      // If our animation isn't set, make it just show/pop
 296      if (!animation) {
 297        animation = 'show';
 298      }
 299      else {
 300        // If our animation isn't "fadeIn" or "slideDown" then it always is show
 301        if (animation != 'fadeIn' && animation != 'slideDown') {
 302          animation = 'show';
 303        }
 304      }
 305  
 306      if (!speed) {
 307        speed = 'fast';
 308      }
 309  
 310      // Build our base attributes and allow them to be overriden
 311      css = jQuery.extend({
 312        position: 'absolute',
 313        left: '0px',
 314        margin: '0px',
 315        background: '#000',
 316        opacity: '.55'
 317      }, css);
 318  
 319      // Add opacity handling for IE.
 320      css.filter = 'alpha(opacity=' + (100 * css.opacity) + ')';
 321      content.hide();
 322  
 323      // if we already ahve a modalContent, remove it
 324      if ( $('#modalBackdrop')) $('#modalBackdrop').remove();
 325      if ( $('#modalContent')) $('#modalContent').remove();
 326  
 327      // position code lifted from http://www.quirksmode.org/viewport/compatibility.html
 328      if (self.pageYOffset) { // all except Explorer
 329      var wt = self.pageYOffset;
 330      } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
 331        var wt = document.documentElement.scrollTop;
 332      } else if (document.body) { // all other Explorers
 333        var wt = document.body.scrollTop;
 334      }
 335  
 336      // Get our dimensions
 337  
 338      // Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div
 339      var docHeight = $(document).height() + 50;
 340      var docWidth = $(document).width();
 341      var winHeight = $(window).height();
 342      var winWidth = $(window).width();
 343      if( docHeight < winHeight ) docHeight = winHeight;
 344  
 345      // Create our divs
 346      $('body').append('<div id="modalBackdrop" style="z-index: 1000; display: none;"></div><div id="modalContent" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>');
 347  
 348      // Keyboard and focus event handler ensures focus stays on modal elements only
 349      modalEventHandler = function( event ) {
 350        target = null;
 351        if ( event ) { //Mozilla
 352          target = event.target;
 353        } else { //IE
 354          event = window.event;
 355          target = event.srcElement;
 356        }
 357        if( $(target).filter('*:visible').parents('#modalContent').size()) {
 358          // allow the event only if target is a visible child node of #modalContent
 359          return true;
 360        }
 361        if ( $('#modalContent')) $('#modalContent').get(0).focus();
 362        return false;
 363      };
 364      $('body').bind( 'focus', modalEventHandler );
 365      $('body').bind( 'keypress', modalEventHandler );
 366  
 367      // Create our content div, get the dimensions, and hide it
 368      var modalContent = $('#modalContent').css('top','-1000px');
 369      var mdcTop = wt + ( winHeight / 2 ) - (  modalContent.outerHeight() / 2);
 370      var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
 371      $('#modalBackdrop').css(css).css('top', 0).css('height', docHeight + 'px').css('width', docWidth + 'px').show();
 372      modalContent.css({top: mdcTop + 'px', left: mdcLeft + 'px'}).hide()[animation](speed);
 373  
 374      // Bind a click for closing the modalContent
 375      modalContentClose = function(){close(); return false;};
 376      $('.close').bind('click', modalContentClose);
 377  
 378      // Close the open modal content and backdrop
 379      function close() {
 380        // Unbind the events
 381        $(window).unbind('resize',  modalContentResize);
 382        $('body').unbind( 'focus', modalEventHandler);
 383        $('body').unbind( 'keypress', modalEventHandler );
 384        $('.close').unbind('click', modalContentClose);
 385        $(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
 386  
 387        // Set our animation parameters and use them
 388        if ( animation == 'fadeIn' ) animation = 'fadeOut';
 389        if ( animation == 'slideDown' ) animation = 'slideUp';
 390        if ( animation == 'show' ) animation = 'hide';
 391  
 392        // Close the content
 393        modalContent.hide()[animation](speed);
 394  
 395        // Remove the content
 396        $('#modalContent').remove();
 397        $('#modalBackdrop').remove();
 398      };
 399  
 400      // Move and resize the modalBackdrop and modalContent on resize of the window
 401       modalContentResize = function(){
 402        // Get our heights
 403        var docHeight = $(document).height();
 404        var docWidth = $(document).width();
 405        var winHeight = $(window).height();
 406        var winWidth = $(window).width();
 407        if( docHeight < winHeight ) docHeight = winHeight;
 408  
 409        // Get where we should move content to
 410        var modalContent = $('#modalContent');
 411        var mdcTop = ( winHeight / 2 ) - (  modalContent.outerHeight() / 2);
 412        var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
 413  
 414        // Apply the changes
 415        $('#modalBackdrop').css('height', docHeight + 'px').css('width', docWidth + 'px').show();
 416        modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show();
 417      };
 418      $(window).bind('resize', modalContentResize);
 419  
 420      $('#modalContent').focus();
 421    };
 422  
 423    /**
 424     * unmodalContent
 425     * @param content (The jQuery object to remove)
 426     * @param animation (fadeOut, slideUp, show)
 427     * @param speed (valid animation speeds slow, medium, fast or # in ms)
 428     */
 429    Drupal.CTools.Modal.unmodalContent = function(content, animation, speed)
 430    {
 431      // If our animation isn't set, make it just show/pop
 432      if (!animation) { var animation = 'show'; } else {
 433        // If our animation isn't "fade" then it always is show
 434        if (( animation != 'fadeOut' ) && ( animation != 'slideUp')) animation = 'show';
 435      }
 436      // Set a speed if we dont have one
 437      if ( !speed ) var speed = 'fast';
 438  
 439      // Unbind the events we bound
 440      $(window).unbind('resize', modalContentResize);
 441      $('body').unbind('focus', modalEventHandler);
 442      $('body').unbind('keypress', modalEventHandler);
 443      $('.close').unbind('click', modalContentClose);
 444      $(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
 445  
 446      // jQuery magic loop through the instances and run the animations or removal.
 447      content.each(function(){
 448        if ( animation == 'fade' ) {
 449          $('#modalContent').fadeOut(speed,function(){$('#modalBackdrop').fadeOut(speed, function(){$(this).remove();});$(this).remove();});
 450        } else {
 451          if ( animation == 'slide' ) {
 452            $('#modalContent').slideUp(speed,function(){$('#modalBackdrop').slideUp(speed, function(){$(this).remove();});$(this).remove();});
 453          } else {
 454            $('#modalContent').remove();$('#modalBackdrop').remove();
 455          }
 456        }
 457      });
 458    };
 459  
 460  })(jQuery);