[Summary view] [Print] [Text view]

   1  /*

   2   * jQuery UI Dialog 1.6

   3   *

   4   * Copyright (c) 2008 AUTHORS.txt (http://ui.jquery.com/about)

   5   * Dual licensed under the MIT (MIT-LICENSE.txt)

   6   * and GPL (GPL-LICENSE.txt) licenses.

   7   *

   8   * http://docs.jquery.com/UI/Dialog

   9   *

  10   * Depends:

  11   *    ui.core.js

  12   *    ui.draggable.js

  13   *    ui.resizable.js

  14   */
  15  (function($) {
  16  
  17  var setDataSwitch = {
  18      dragStart: "start.draggable",
  19      drag: "drag.draggable",
  20      dragStop: "stop.draggable",
  21      maxHeight: "maxHeight.resizable",
  22      minHeight: "minHeight.resizable",
  23      maxWidth: "maxWidth.resizable",
  24      minWidth: "minWidth.resizable",
  25      resizeStart: "start.resizable",
  26      resize: "drag.resizable",
  27      resizeStop: "stop.resizable"
  28  };
  29  
  30  $.widget("ui.dialog", {
  31  
  32      _init: function() {
  33          this.originalTitle = this.element.attr('title');
  34          this.options.title = this.options.title || this.originalTitle;
  35  
  36          var self = this,
  37              options = this.options,
  38  
  39              uiDialogContent = this.element
  40                  .removeAttr('title')
  41                  .addClass('ui-dialog-content')
  42                  .wrap('<div></div>')
  43                  .wrap('<div></div>'),
  44  
  45              uiDialogContainer = (this.uiDialogContainer = uiDialogContent.parent())
  46                  .addClass('ui-dialog-container')
  47                  .css({
  48                      position: 'relative',
  49                      width: '100%',
  50                      height: '100%'
  51                  }),
  52  
  53              uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>'))
  54                  .addClass('ui-dialog-titlebar')
  55                  .mousedown(function() {
  56                      self.moveToTop();
  57                  })
  58                  .prependTo(uiDialogContainer),
  59  
  60              uiDialogTitlebarClose = $('<a href="#"/>')
  61                  .addClass('ui-dialog-titlebar-close')
  62                  .attr('role', 'button')
  63                  .appendTo(uiDialogTitlebar),
  64  
  65              uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>'))
  66                  .text(options.closeText)
  67                  .appendTo(uiDialogTitlebarClose),
  68  
  69              title = options.title || '&nbsp;',
  70              titleId = $.ui.dialog.getTitleId(this.element),
  71              uiDialogTitle = $('<span/>')
  72                  .addClass('ui-dialog-title')
  73                  .attr('id', titleId)
  74                  .html(title)
  75                  .prependTo(uiDialogTitlebar),
  76  
  77              uiDialog = (this.uiDialog = uiDialogContainer.parent())
  78                  .appendTo(document.body)
  79                  .hide()
  80                  .addClass('ui-dialog')
  81                  .addClass(options.dialogClass)
  82                  .css({
  83                      position: 'absolute',
  84                      width: options.width,
  85                      height: options.height,
  86                      overflow: 'hidden',
  87                      zIndex: options.zIndex
  88                  })
  89                  // setting tabIndex makes the div focusable

  90                  // setting outline to 0 prevents a border on focus in Mozilla

  91                  .attr('tabIndex', -1).css('outline', 0).keydown(function(ev) {
  92                      (options.closeOnEscape && ev.keyCode
  93                          && ev.keyCode == $.ui.keyCode.ESCAPE && self.close());
  94                  })
  95                  .attr({
  96                      role: 'dialog',
  97                      'aria-labelledby': titleId
  98                  })
  99                  .mouseup(function() {
 100                      self.moveToTop();
 101                  }),
 102  
 103              uiDialogButtonPane = (this.uiDialogButtonPane = $('<div></div>'))
 104                  .addClass('ui-dialog-buttonpane')
 105                  .css({
 106                      position: 'absolute',
 107                      bottom: 0
 108                  })
 109                  .appendTo(uiDialog),
 110  
 111              uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar)
 112                  .hover(
 113                      function() {
 114                          $(this).addClass('ui-dialog-titlebar-close-hover');
 115                      },
 116                      function() {
 117                          $(this).removeClass('ui-dialog-titlebar-close-hover');
 118                      }
 119                  )
 120                  .mousedown(function(ev) {
 121                      ev.stopPropagation();
 122                  })
 123                  .click(function() {
 124                      self.close();
 125                      return false;
 126                  });
 127  
 128          uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
 129  
 130          (options.draggable && $.fn.draggable && this._makeDraggable());
 131          (options.resizable && $.fn.resizable && this._makeResizable());
 132  
 133          this._createButtons(options.buttons);
 134          this._isOpen = false;
 135  
 136          (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe());
 137          (options.autoOpen && this.open());
 138      },
 139  
 140      destroy: function() {
 141          (this.overlay && this.overlay.destroy());
 142          this.uiDialog.hide();
 143          this.element
 144              .unbind('.dialog')
 145              .removeData('dialog')
 146              .removeClass('ui-dialog-content')
 147              .hide().appendTo('body');
 148          this.uiDialog.remove();
 149  
 150          (this.originalTitle && this.element.attr('title', this.originalTitle));
 151      },
 152  
 153      close: function() {
 154          if (false === this._trigger('beforeclose', null, { options: this.options })) {
 155              return;
 156          }
 157  
 158          (this.overlay && this.overlay.destroy());
 159          this.uiDialog
 160              .hide(this.options.hide)
 161              .unbind('keypress.ui-dialog');
 162  
 163          this._trigger('close', null, { options: this.options });
 164          $.ui.dialog.overlay.resize();
 165  
 166          this._isOpen = false;
 167      },
 168  
 169      isOpen: function() {
 170          return this._isOpen;
 171      },
 172  
 173      // the force parameter allows us to move modal dialogs to their correct

 174      // position on open

 175      moveToTop: function(force) {
 176  
 177          if ((this.options.modal && !force)
 178              || (!this.options.stack && !this.options.modal)) {
 179              return this._trigger('focus', null, { options: this.options });
 180          }
 181  
 182          var maxZ = this.options.zIndex, options = this.options;
 183          $('.ui-dialog:visible').each(function() {
 184              maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || options.zIndex);
 185          });
 186          (this.overlay && this.overlay.$el.css('z-index', ++maxZ));
 187  
 188          //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.

 189          //  http://ui.jquery.com/bugs/ticket/3193

 190          var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') };
 191          this.uiDialog.css('z-index', ++maxZ);
 192          this.element.attr(saveScroll);
 193          this._trigger('focus', null, { options: this.options });
 194      },
 195  
 196      open: function() {
 197          if (this._isOpen) { return; }
 198  
 199          this.overlay = this.options.modal ? new $.ui.dialog.overlay(this) : null;
 200          (this.uiDialog.next().length && this.uiDialog.appendTo('body'));
 201          this._position(this.options.position);
 202          this.uiDialog.show(this.options.show);
 203          (this.options.autoResize && this._size());
 204          this.moveToTop(true);
 205  
 206          // prevent tabbing out of modal dialogs

 207          (this.options.modal && this.uiDialog.bind('keypress.ui-dialog', function(event) {
 208              if (event.keyCode != $.ui.keyCode.TAB) {
 209                  return;
 210              }
 211  
 212              var tabbables = $(':tabbable', this),
 213                  first = tabbables.filter(':first')[0],
 214                  last  = tabbables.filter(':last')[0];
 215  
 216              if (event.target == last && !event.shiftKey) {
 217                  setTimeout(function() {
 218                      first.focus();
 219                  }, 1);
 220              } else if (event.target == first && event.shiftKey) {
 221                  setTimeout(function() {
 222                      last.focus();
 223                  }, 1);
 224              }
 225          }));
 226  
 227          this.uiDialog.find(':tabbable:first').focus();
 228          this._trigger('open', null, { options: this.options });
 229          this._isOpen = true;
 230      },
 231  
 232      _createButtons: function(buttons) {
 233          var self = this,
 234              hasButtons = false,
 235              uiDialogButtonPane = this.uiDialogButtonPane;
 236  
 237          // remove any existing buttons

 238          uiDialogButtonPane.empty().hide();
 239  
 240          $.each(buttons, function() { return !(hasButtons = true); });
 241          if (hasButtons) {
 242              uiDialogButtonPane.show();
 243              $.each(buttons, function(name, fn) {
 244                  $('<button type="button"></button>')
 245                      .text(name)
 246                      .click(function() { fn.apply(self.element[0], arguments); })
 247                      .appendTo(uiDialogButtonPane);
 248              });
 249          }
 250      },
 251  
 252      _makeDraggable: function() {
 253          var self = this,
 254              options = this.options;
 255  
 256          this.uiDialog.draggable({
 257              cancel: '.ui-dialog-content',
 258              helper: options.dragHelper,
 259              handle: '.ui-dialog-titlebar',
 260              start: function() {
 261                  self.moveToTop();
 262                  (options.dragStart && options.dragStart.apply(self.element[0], arguments));
 263              },
 264              drag: function() {
 265                  (options.drag && options.drag.apply(self.element[0], arguments));
 266              },
 267              stop: function() {
 268                  (options.dragStop && options.dragStop.apply(self.element[0], arguments));
 269                  $.ui.dialog.overlay.resize();
 270              }
 271          });
 272      },
 273  
 274      _makeResizable: function(handles) {
 275          handles = (handles === undefined ? this.options.resizable : handles);
 276          var self = this,
 277              options = this.options,
 278              resizeHandles = typeof handles == 'string'
 279                  ? handles
 280                  : 'n,e,s,w,se,sw,ne,nw';
 281  
 282          this.uiDialog.resizable({
 283              cancel: '.ui-dialog-content',
 284              helper: options.resizeHelper,
 285              maxWidth: options.maxWidth,
 286              maxHeight: options.maxHeight,
 287              minWidth: options.minWidth,
 288              minHeight: options.minHeight,
 289              start: function() {
 290                  (options.resizeStart && options.resizeStart.apply(self.element[0], arguments));
 291              },
 292              resize: function() {
 293                  (options.autoResize && self._size.apply(self));
 294                  (options.resize && options.resize.apply(self.element[0], arguments));
 295              },
 296              handles: resizeHandles,
 297              stop: function() {
 298                  (options.autoResize && self._size.apply(self));
 299                  (options.resizeStop && options.resizeStop.apply(self.element[0], arguments));
 300                  $.ui.dialog.overlay.resize();
 301              }
 302          });
 303      },
 304  
 305      _position: function(pos) {
 306          var wnd = $(window), doc = $(document),
 307              pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
 308              minTop = pTop;
 309  
 310          if ($.inArray(pos, ['center','top','right','bottom','left']) >= 0) {
 311              pos = [
 312                  pos == 'right' || pos == 'left' ? pos : 'center',
 313                  pos == 'top' || pos == 'bottom' ? pos : 'middle'
 314              ];
 315          }
 316          if (pos.constructor != Array) {
 317              pos = ['center', 'middle'];
 318          }
 319          if (pos[0].constructor == Number) {
 320              pLeft += pos[0];
 321          } else {
 322              switch (pos[0]) {
 323                  case 'left':
 324                      pLeft += 0;
 325                      break;
 326                  case 'right':
 327                      pLeft += wnd.width() - this.uiDialog.outerWidth();
 328                      break;
 329                  default:
 330                  case 'center':
 331                      pLeft += (wnd.width() - this.uiDialog.outerWidth()) / 2;
 332              }
 333          }
 334          if (pos[1].constructor == Number) {
 335              pTop += pos[1];
 336          } else {
 337              switch (pos[1]) {
 338                  case 'top':
 339                      pTop += 0;
 340                      break;
 341                  case 'bottom':
 342                      // Opera check fixes #3564, can go away with jQuery 1.3

 343                      pTop += ($.browser.opera ? window.innerHeight : wnd.height()) - this.uiDialog.outerHeight();
 344                      break;
 345                  default:
 346                  case 'middle':
 347                      // Opera check fixes #3564, can go away with jQuery 1.3

 348                      pTop += (($.browser.opera ? window.innerHeight : wnd.height()) - this.uiDialog.outerHeight()) / 2;
 349              }
 350          }
 351  
 352          // prevent the dialog from being too high (make sure the titlebar

 353          // is accessible)

 354          pTop = Math.max(pTop, minTop);
 355          this.uiDialog.css({top: pTop, left: pLeft});
 356      },
 357  
 358      _setData: function(key, value){
 359          (setDataSwitch[key] && this.uiDialog.data(setDataSwitch[key], value));
 360          switch (key) {
 361              case "buttons":
 362                  this._createButtons(value);
 363                  break;
 364              case "closeText":
 365                  this.uiDialogTitlebarCloseText.text(value);
 366                  break;
 367              case "draggable":
 368                  (value
 369                      ? this._makeDraggable()
 370                      : this.uiDialog.draggable('destroy'));
 371                  break;
 372              case "height":
 373                  this.uiDialog.height(value);
 374                  break;
 375              case "position":
 376                  this._position(value);
 377                  break;
 378              case "resizable":
 379                  var uiDialog = this.uiDialog,
 380                      isResizable = this.uiDialog.is(':data(resizable)');
 381  
 382                  // currently resizable, becoming non-resizable

 383                  (isResizable && !value && uiDialog.resizable('destroy'));
 384  
 385                  // currently resizable, changing handles

 386                  (isResizable && typeof value == 'string' &&
 387                      uiDialog.resizable('option', 'handles', value));
 388  
 389                  // currently non-resizable, becoming resizable

 390                  (isResizable || this._makeResizable(value));
 391  
 392                  break;
 393              case "title":
 394                  $(".ui-dialog-title", this.uiDialogTitlebar).html(value || '&nbsp;');
 395                  break;
 396              case "width":
 397                  this.uiDialog.width(value);
 398                  break;
 399          }
 400  
 401          $.widget.prototype._setData.apply(this, arguments);
 402      },
 403  
 404      _size: function() {
 405          var container = this.uiDialogContainer,
 406              titlebar = this.uiDialogTitlebar,
 407              content = this.element,
 408              tbMargin = (parseInt(content.css('margin-top'), 10) || 0)
 409                  + (parseInt(content.css('margin-bottom'), 10) || 0),
 410              lrMargin = (parseInt(content.css('margin-left'), 10) || 0)
 411                  + (parseInt(content.css('margin-right'), 10) || 0);
 412          content.height(container.height() - titlebar.outerHeight() - tbMargin);
 413          content.width(container.width() - lrMargin);
 414      }
 415  
 416  });
 417  
 418  $.extend($.ui.dialog, {
 419      version: "1.6",
 420      defaults: {
 421          autoOpen: true,
 422          autoResize: true,
 423          bgiframe: false,
 424          buttons: {},
 425          closeOnEscape: true,
 426          closeText: 'close',
 427          draggable: true,
 428          height: 200,
 429          minHeight: 100,
 430          minWidth: 150,
 431          modal: false,
 432          overlay: {},
 433          position: 'center',
 434          resizable: true,
 435          stack: true,
 436          width: 300,
 437          zIndex: 1000
 438      },
 439  
 440      getter: 'isOpen',
 441  
 442      uuid: 0,
 443  
 444      getTitleId: function($el) {
 445          return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid);
 446      },
 447  
 448      overlay: function(dialog) {
 449          this.$el = $.ui.dialog.overlay.create(dialog);
 450      }
 451  });
 452  
 453  $.extend($.ui.dialog.overlay, {
 454      instances: [],
 455      events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
 456          function(event) { return event + '.dialog-overlay'; }).join(' '),
 457      create: function(dialog) {
 458          if (this.instances.length === 0) {
 459              // prevent use of anchors and inputs

 460              // we use a setTimeout in case the overlay is created from an

 461              // event that we're going to be cancelling (see #2804)

 462              setTimeout(function() {
 463                  $('a, :input').bind($.ui.dialog.overlay.events, function() {
 464                      // allow use of the element if inside a dialog and

 465                      // - there are no modal dialogs

 466                      // - there are modal dialogs, but we are in front of the topmost modal

 467                      var allow = false;
 468                      var $dialog = $(this).parents('.ui-dialog');
 469                      if ($dialog.length) {
 470                          var $overlays = $('.ui-dialog-overlay');
 471                          if ($overlays.length) {
 472                              var maxZ = parseInt($overlays.css('z-index'), 10);
 473                              $overlays.each(function() {
 474                                  maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10));
 475                              });
 476                              allow = parseInt($dialog.css('z-index'), 10) > maxZ;
 477                          } else {
 478                              allow = true;
 479                          }
 480                      }
 481                      return allow;
 482                  });
 483              }, 1);
 484  
 485              // allow closing by pressing the escape key

 486              $(document).bind('keydown.dialog-overlay', function(event) {
 487                  (dialog.options.closeOnEscape && event.keyCode
 488                          && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close());
 489              });
 490  
 491              // handle window resize

 492              $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
 493          }
 494  
 495          var $el = $('<div></div>').appendTo(document.body)
 496              .addClass('ui-dialog-overlay').css($.extend({
 497                  borderWidth: 0, margin: 0, padding: 0,
 498                  position: 'absolute', top: 0, left: 0,
 499                  width: this.width(),
 500                  height: this.height()
 501              }, dialog.options.overlay));
 502  
 503          (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe());
 504  
 505          this.instances.push($el);
 506          return $el;
 507      },
 508  
 509      destroy: function($el) {
 510          this.instances.splice($.inArray(this.instances, $el), 1);
 511  
 512          if (this.instances.length === 0) {
 513              $('a, :input').add([document, window]).unbind('.dialog-overlay');
 514          }
 515  
 516          $el.remove();
 517      },
 518  
 519      height: function() {
 520          // handle IE 6

 521          if ($.browser.msie && $.browser.version < 7) {
 522              var scrollHeight = Math.max(
 523                  document.documentElement.scrollHeight,
 524                  document.body.scrollHeight
 525              );
 526              var offsetHeight = Math.max(
 527                  document.documentElement.offsetHeight,
 528                  document.body.offsetHeight
 529              );
 530  
 531              if (scrollHeight < offsetHeight) {
 532                  return $(window).height() + 'px';
 533              } else {
 534                  return scrollHeight + 'px';
 535              }
 536          // handle Opera

 537          } else if ($.browser.opera) {
 538              return Math.max(
 539                  window.innerHeight,
 540                  $(document).height()
 541              ) + 'px';
 542          // handle "good" browsers

 543          } else {
 544              return $(document).height() + 'px';
 545          }
 546      },
 547  
 548      width: function() {
 549          // handle IE 6

 550          if ($.browser.msie && $.browser.version < 7) {
 551              var scrollWidth = Math.max(
 552                  document.documentElement.scrollWidth,
 553                  document.body.scrollWidth
 554              );
 555              var offsetWidth = Math.max(
 556                  document.documentElement.offsetWidth,
 557                  document.body.offsetWidth
 558              );
 559  
 560              if (scrollWidth < offsetWidth) {
 561                  return $(window).width() + 'px';
 562              } else {
 563                  return scrollWidth + 'px';
 564              }
 565          // handle Opera

 566          } else if ($.browser.opera) {
 567              return Math.max(
 568                  window.innerWidth,
 569                  $(document).width()
 570              ) + 'px';
 571          // handle "good" browsers

 572          } else {
 573              return $(document).width() + 'px';
 574          }
 575      },
 576  
 577      resize: function() {
 578          /* If the dialog is draggable and the user drags it past the

 579           * right edge of the window, the document becomes wider so we

 580           * need to stretch the overlay. If the user then drags the

 581           * dialog back to the left, the document will become narrower,

 582           * so we need to shrink the overlay to the appropriate size.

 583           * This is handled by shrinking the overlay before setting it

 584           * to the full document size.

 585           */
 586          var $overlays = $([]);
 587          $.each($.ui.dialog.overlay.instances, function() {
 588              $overlays = $overlays.add(this);
 589          });
 590  
 591          $overlays.css({
 592              width: 0,
 593              height: 0
 594          }).css({
 595              width: $.ui.dialog.overlay.width(),
 596              height: $.ui.dialog.overlay.height()
 597          });
 598      }
 599  });
 600  
 601  $.extend($.ui.dialog.overlay.prototype, {
 602      destroy: function() {
 603          $.ui.dialog.overlay.destroy(this.$el);
 604      }
 605  });
 606  
 607  })(jQuery);