[Summary view] [Print] [Text view]

   1  /*

   2   * jQuery UI Dialog 1.7.2

   3   *

   4   * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.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      uiDialogClasses =
  31          'ui-dialog ' +
  32          'ui-widget ' +
  33          'ui-widget-content ' +
  34          'ui-corner-all ';
  35  
  36  $.widget("ui.dialog", {
  37  
  38      _init: function() {
  39          this.originalTitle = this.element.attr('title');
  40  
  41          var self = this,
  42              options = this.options,
  43  
  44              title = options.title || this.originalTitle || ' ',
  45              titleId = $.ui.dialog.getTitleId(this.element),
  46  
  47              uiDialog = (this.uiDialog = $('<div/>'))
  48                  .appendTo(document.body)
  49                  .hide()
  50                  .addClass(uiDialogClasses + options.dialogClass)
  51                  .css({
  52                      position: 'absolute',
  53                      overflow: 'hidden',
  54                      zIndex: options.zIndex
  55                  })
  56                  // setting tabIndex makes the div focusable

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

  58                  .attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
  59                      (options.closeOnEscape && event.keyCode
  60                          && event.keyCode == $.ui.keyCode.ESCAPE && self.close(event));
  61                  })
  62                  .attr({
  63                      role: 'dialog',
  64                      'aria-labelledby': titleId
  65                  })
  66                  .mousedown(function(event) {
  67                      self.moveToTop(false, event);
  68                  }),
  69  
  70              uiDialogContent = this.element
  71                  .show()
  72                  .removeAttr('title')
  73                  .addClass(
  74                      'ui-dialog-content ' +
  75                      'ui-widget-content')
  76                  .appendTo(uiDialog),
  77  
  78              uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>'))
  79                  .addClass(
  80                      'ui-dialog-titlebar ' +
  81                      'ui-widget-header ' +
  82                      'ui-corner-all ' +
  83                      'ui-helper-clearfix'
  84                  )
  85                  .prependTo(uiDialog),
  86  
  87              uiDialogTitlebarClose = $('<a href="#"/>')
  88                  .addClass(
  89                      'ui-dialog-titlebar-close ' +
  90                      'ui-corner-all'
  91                  )
  92                  .attr('role', 'button')
  93                  .hover(
  94                      function() {
  95                          uiDialogTitlebarClose.addClass('ui-state-hover');
  96                      },
  97                      function() {
  98                          uiDialogTitlebarClose.removeClass('ui-state-hover');
  99                      }
 100                  )
 101                  .focus(function() {
 102                      uiDialogTitlebarClose.addClass('ui-state-focus');
 103                  })
 104                  .blur(function() {
 105                      uiDialogTitlebarClose.removeClass('ui-state-focus');
 106                  })
 107                  .mousedown(function(ev) {
 108                      ev.stopPropagation();
 109                  })
 110                  .click(function(event) {
 111                      self.close(event);
 112                      return false;
 113                  })
 114                  .appendTo(uiDialogTitlebar),
 115  
 116              uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>'))
 117                  .addClass(
 118                      'ui-icon ' +
 119                      'ui-icon-closethick'
 120                  )
 121                  .text(options.closeText)
 122                  .appendTo(uiDialogTitlebarClose),
 123  
 124              uiDialogTitle = $('<span/>')
 125                  .addClass('ui-dialog-title')
 126                  .attr('id', titleId)
 127                  .html(title)
 128                  .prependTo(uiDialogTitlebar);
 129  
 130          uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
 131  
 132          (options.draggable && $.fn.draggable && this._makeDraggable());
 133          (options.resizable && $.fn.resizable && this._makeResizable());
 134  
 135          this._createButtons(options.buttons);
 136          this._isOpen = false;
 137  
 138          (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe());
 139          (options.autoOpen && this.open());
 140          
 141      },
 142  
 143      destroy: function() {
 144          (this.overlay && this.overlay.destroy());
 145          this.uiDialog.hide();
 146          this.element
 147              .unbind('.dialog')
 148              .removeData('dialog')
 149              .removeClass('ui-dialog-content ui-widget-content')
 150              .hide().appendTo('body');
 151          this.uiDialog.remove();
 152  
 153          (this.originalTitle && this.element.attr('title', this.originalTitle));
 154      },
 155  
 156      close: function(event) {
 157          var self = this;
 158          
 159          if (false === self._trigger('beforeclose', event)) {
 160              return;
 161          }
 162  
 163          (self.overlay && self.overlay.destroy());
 164          self.uiDialog.unbind('keypress.ui-dialog');
 165  
 166          (self.options.hide
 167              ? self.uiDialog.hide(self.options.hide, function() {
 168                  self._trigger('close', event);
 169              })
 170              : self.uiDialog.hide() && self._trigger('close', event));
 171  
 172          $.ui.dialog.overlay.resize();
 173  
 174          self._isOpen = false;
 175          
 176          // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)

 177          if (self.options.modal) {
 178              var maxZ = 0;
 179              $('.ui-dialog').each(function() {
 180                  if (this != self.uiDialog[0]) {
 181                      maxZ = Math.max(maxZ, $(this).css('z-index'));
 182                  }
 183              });
 184              $.ui.dialog.maxZ = maxZ;
 185          }
 186      },
 187  
 188      isOpen: function() {
 189          return this._isOpen;
 190      },
 191  
 192      // the force parameter allows us to move modal dialogs to their correct

 193      // position on open

 194      moveToTop: function(force, event) {
 195  
 196          if ((this.options.modal && !force)
 197              || (!this.options.stack && !this.options.modal)) {
 198              return this._trigger('focus', event);
 199          }
 200          
 201          if (this.options.zIndex > $.ui.dialog.maxZ) {
 202              $.ui.dialog.maxZ = this.options.zIndex;
 203          }
 204          (this.overlay && this.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = ++$.ui.dialog.maxZ));
 205  
 206          //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.

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

 208          var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') };
 209          this.uiDialog.css('z-index', ++$.ui.dialog.maxZ);
 210          this.element.attr(saveScroll);
 211          this._trigger('focus', event);
 212      },
 213  
 214      open: function() {
 215          if (this._isOpen) { return; }
 216  
 217          var options = this.options,
 218              uiDialog = this.uiDialog;
 219  
 220          this.overlay = options.modal ? new $.ui.dialog.overlay(this) : null;
 221          (uiDialog.next().length && uiDialog.appendTo('body'));
 222          this._size();
 223          this._position(options.position);
 224          uiDialog.show(options.show);
 225          this.moveToTop(true);
 226  
 227          // prevent tabbing out of modal dialogs

 228          (options.modal && uiDialog.bind('keypress.ui-dialog', function(event) {
 229              if (event.keyCode != $.ui.keyCode.TAB) {
 230                  return;
 231              }
 232  
 233              var tabbables = $(':tabbable', this),
 234                  first = tabbables.filter(':first')[0],
 235                  last  = tabbables.filter(':last')[0];
 236  
 237              if (event.target == last && !event.shiftKey) {
 238                  setTimeout(function() {
 239                      first.focus();
 240                  }, 1);
 241              } else if (event.target == first && event.shiftKey) {
 242                  setTimeout(function() {
 243                      last.focus();
 244                  }, 1);
 245              }
 246          }));
 247  
 248          // set focus to the first tabbable element in the content area or the first button

 249          // if there are no tabbable elements, set focus on the dialog itself

 250          $([])
 251              .add(uiDialog.find('.ui-dialog-content :tabbable:first'))
 252              .add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'))
 253              .add(uiDialog)
 254              .filter(':first')
 255              .focus();
 256  
 257          this._trigger('open');
 258          this._isOpen = true;
 259      },
 260  
 261      _createButtons: function(buttons) {
 262          var self = this,
 263              hasButtons = false,
 264              uiDialogButtonPane = $('<div></div>')
 265                  .addClass(
 266                      'ui-dialog-buttonpane ' +
 267                      'ui-widget-content ' +
 268                      'ui-helper-clearfix'
 269                  );
 270  
 271          // if we already have a button pane, remove it

 272          this.uiDialog.find('.ui-dialog-buttonpane').remove();
 273  
 274          (typeof buttons == 'object' && buttons !== null &&
 275              $.each(buttons, function() { return !(hasButtons = true); }));
 276          if (hasButtons) {
 277              $.each(buttons, function(name, fn) {
 278                  $('<button type="button"></button>')
 279                      .addClass(
 280                          'ui-state-default ' +
 281                          'ui-corner-all'
 282                      )
 283                      .text(name)
 284                      .click(function() { fn.apply(self.element[0], arguments); })
 285                      .hover(
 286                          function() {
 287                              $(this).addClass('ui-state-hover');
 288                          },
 289                          function() {
 290                              $(this).removeClass('ui-state-hover');
 291                          }
 292                      )
 293                      .focus(function() {
 294                          $(this).addClass('ui-state-focus');
 295                      })
 296                      .blur(function() {
 297                          $(this).removeClass('ui-state-focus');
 298                      })
 299                      .appendTo(uiDialogButtonPane);
 300              });
 301              uiDialogButtonPane.appendTo(this.uiDialog);
 302          }
 303      },
 304  
 305      _makeDraggable: function() {
 306          var self = this,
 307              options = this.options,
 308              heightBeforeDrag;
 309  
 310          this.uiDialog.draggable({
 311              cancel: '.ui-dialog-content',
 312              handle: '.ui-dialog-titlebar',
 313              containment: 'document',
 314              start: function() {
 315                  heightBeforeDrag = options.height;
 316                  $(this).height($(this).height()).addClass("ui-dialog-dragging");
 317                  (options.dragStart && options.dragStart.apply(self.element[0], arguments));
 318              },
 319              drag: function() {
 320                  (options.drag && options.drag.apply(self.element[0], arguments));
 321              },
 322              stop: function() {
 323                  $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
 324                  (options.dragStop && options.dragStop.apply(self.element[0], arguments));
 325                  $.ui.dialog.overlay.resize();
 326              }
 327          });
 328      },
 329  
 330      _makeResizable: function(handles) {
 331          handles = (handles === undefined ? this.options.resizable : handles);
 332          var self = this,
 333              options = this.options,
 334              resizeHandles = typeof handles == 'string'
 335                  ? handles
 336                  : 'n,e,s,w,se,sw,ne,nw';
 337  
 338          this.uiDialog.resizable({
 339              cancel: '.ui-dialog-content',
 340              alsoResize: this.element,
 341              maxWidth: options.maxWidth,
 342              maxHeight: options.maxHeight,
 343              minWidth: options.minWidth,
 344              minHeight: options.minHeight,
 345              start: function() {
 346                  $(this).addClass("ui-dialog-resizing");
 347                  (options.resizeStart && options.resizeStart.apply(self.element[0], arguments));
 348              },
 349              resize: function() {
 350                  (options.resize && options.resize.apply(self.element[0], arguments));
 351              },
 352              handles: resizeHandles,
 353              stop: function() {
 354                  $(this).removeClass("ui-dialog-resizing");
 355                  options.height = $(this).height();
 356                  options.width = $(this).width();
 357                  (options.resizeStop && options.resizeStop.apply(self.element[0], arguments));
 358                  $.ui.dialog.overlay.resize();
 359              }
 360          })
 361          .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se');
 362      },
 363  
 364      _position: function(pos) {
 365          var wnd = $(window), doc = $(document),
 366              pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
 367              minTop = pTop;
 368  
 369          if ($.inArray(pos, ['center','top','right','bottom','left']) >= 0) {
 370              pos = [
 371                  pos == 'right' || pos == 'left' ? pos : 'center',
 372                  pos == 'top' || pos == 'bottom' ? pos : 'middle'
 373              ];
 374          }
 375          if (pos.constructor != Array) {
 376              pos = ['center', 'middle'];
 377          }
 378          if (pos[0].constructor == Number) {
 379              pLeft += pos[0];
 380          } else {
 381              switch (pos[0]) {
 382                  case 'left':
 383                      pLeft += 0;
 384                      break;
 385                  case 'right':
 386                      pLeft += wnd.width() - this.uiDialog.outerWidth();
 387                      break;
 388                  default:
 389                  case 'center':
 390                      pLeft += (wnd.width() - this.uiDialog.outerWidth()) / 2;
 391              }
 392          }
 393          if (pos[1].constructor == Number) {
 394              pTop += pos[1];
 395          } else {
 396              switch (pos[1]) {
 397                  case 'top':
 398                      pTop += 0;
 399                      break;
 400                  case 'bottom':
 401                      pTop += wnd.height() - this.uiDialog.outerHeight();
 402                      break;
 403                  default:
 404                  case 'middle':
 405                      pTop += (wnd.height() - this.uiDialog.outerHeight()) / 2;
 406              }
 407          }
 408  
 409          // prevent the dialog from being too high (make sure the titlebar

 410          // is accessible)

 411          pTop = Math.max(pTop, minTop);
 412          this.uiDialog.css({top: pTop, left: pLeft});
 413      },
 414  
 415      _setData: function(key, value){
 416          (setDataSwitch[key] && this.uiDialog.data(setDataSwitch[key], value));
 417          switch (key) {
 418              case "buttons":
 419                  this._createButtons(value);
 420                  break;
 421              case "closeText":
 422                  this.uiDialogTitlebarCloseText.text(value);
 423                  break;
 424              case "dialogClass":
 425                  this.uiDialog
 426                      .removeClass(this.options.dialogClass)
 427                      .addClass(uiDialogClasses + value);
 428                  break;
 429              case "draggable":
 430                  (value
 431                      ? this._makeDraggable()
 432                      : this.uiDialog.draggable('destroy'));
 433                  break;
 434              case "height":
 435                  this.uiDialog.height(value);
 436                  break;
 437              case "position":
 438                  this._position(value);
 439                  break;
 440              case "resizable":
 441                  var uiDialog = this.uiDialog,
 442                      isResizable = this.uiDialog.is(':data(resizable)');
 443  
 444                  // currently resizable, becoming non-resizable

 445                  (isResizable && !value && uiDialog.resizable('destroy'));
 446  
 447                  // currently resizable, changing handles

 448                  (isResizable && typeof value == 'string' &&
 449                      uiDialog.resizable('option', 'handles', value));
 450  
 451                  // currently non-resizable, becoming resizable

 452                  (isResizable || this._makeResizable(value));
 453                  break;
 454              case "title":
 455                  $(".ui-dialog-title", this.uiDialogTitlebar).html(value || '&nbsp;');
 456                  break;
 457              case "width":
 458                  this.uiDialog.width(value);
 459                  break;
 460          }
 461  
 462          $.widget.prototype._setData.apply(this, arguments);
 463      },
 464  
 465      _size: function() {
 466          /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content

 467           * divs will both have width and height set, so we need to reset them

 468           */
 469          var options = this.options;
 470  
 471          // reset content sizing

 472          this.element.css({
 473              height: 0,
 474              minHeight: 0,
 475              width: 'auto'
 476          });
 477  
 478          // reset wrapper sizing

 479          // determine the height of all the non-content elements

 480          var nonContentHeight = this.uiDialog.css({
 481                  height: 'auto',
 482                  width: options.width
 483              })
 484              .height();
 485  
 486          this.element
 487              .css({
 488                  minHeight: Math.max(options.minHeight - nonContentHeight, 0),
 489                  height: options.height == 'auto'
 490                      ? 'auto'
 491                      : Math.max(options.height - nonContentHeight, 0)
 492              });
 493      }
 494  });
 495  
 496  $.extend($.ui.dialog, {
 497      version: "1.7.2",
 498      defaults: {
 499          autoOpen: true,
 500          bgiframe: false,
 501          buttons: {},
 502          closeOnEscape: true,
 503          closeText: 'close',
 504          dialogClass: '',
 505          draggable: true,
 506          hide: null,
 507          height: 'auto',
 508          maxHeight: false,
 509          maxWidth: false,
 510          minHeight: 150,
 511          minWidth: 150,
 512          modal: false,
 513          position: 'center',
 514          resizable: true,
 515          show: null,
 516          stack: true,
 517          title: '',
 518          width: 300,
 519          zIndex: 1000
 520      },
 521  
 522      getter: 'isOpen',
 523  
 524      uuid: 0,
 525      maxZ: 0,
 526  
 527      getTitleId: function($el) {
 528          return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid);
 529      },
 530  
 531      overlay: function(dialog) {
 532          this.$el = $.ui.dialog.overlay.create(dialog);
 533      }
 534  });
 535  
 536  $.extend($.ui.dialog.overlay, {
 537      instances: [],
 538      maxZ: 0,
 539      events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
 540          function(event) { return event + '.dialog-overlay'; }).join(' '),
 541      create: function(dialog) {
 542          if (this.instances.length === 0) {
 543              // prevent use of anchors and inputs

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

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

 546              setTimeout(function() {
 547                  // handle $(el).dialog().dialog('close') (see #4065)

 548                  if ($.ui.dialog.overlay.instances.length) {
 549                      $(document).bind($.ui.dialog.overlay.events, function(event) {
 550                          var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex') || 0;
 551                          return (dialogZ > $.ui.dialog.overlay.maxZ);
 552                      });
 553                  }
 554              }, 1);
 555  
 556              // allow closing by pressing the escape key

 557              $(document).bind('keydown.dialog-overlay', function(event) {
 558                  (dialog.options.closeOnEscape && event.keyCode
 559                          && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event));
 560              });
 561  
 562              // handle window resize

 563              $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
 564          }
 565  
 566          var $el = $('<div></div>').appendTo(document.body)
 567              .addClass('ui-widget-overlay').css({
 568                  width: this.width(),
 569                  height: this.height()
 570              });
 571  
 572          (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe());
 573  
 574          this.instances.push($el);
 575          return $el;
 576      },
 577  
 578      destroy: function($el) {
 579          this.instances.splice($.inArray(this.instances, $el), 1);
 580  
 581          if (this.instances.length === 0) {
 582              $([document, window]).unbind('.dialog-overlay');
 583          }
 584  
 585          $el.remove();
 586          
 587          // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)

 588          var maxZ = 0;
 589          $.each(this.instances, function() {
 590              maxZ = Math.max(maxZ, this.css('z-index'));
 591          });
 592          this.maxZ = maxZ;
 593      },
 594  
 595      height: function() {
 596          // handle IE 6

 597          if ($.browser.msie && $.browser.version < 7) {
 598              var scrollHeight = Math.max(
 599                  document.documentElement.scrollHeight,
 600                  document.body.scrollHeight
 601              );
 602              var offsetHeight = Math.max(
 603                  document.documentElement.offsetHeight,
 604                  document.body.offsetHeight
 605              );
 606  
 607              if (scrollHeight < offsetHeight) {
 608                  return $(window).height() + 'px';
 609              } else {
 610                  return scrollHeight + 'px';
 611              }
 612          // handle "good" browsers

 613          } else {
 614              return $(document).height() + 'px';
 615          }
 616      },
 617  
 618      width: function() {
 619          // handle IE 6

 620          if ($.browser.msie && $.browser.version < 7) {
 621              var scrollWidth = Math.max(
 622                  document.documentElement.scrollWidth,
 623                  document.body.scrollWidth
 624              );
 625              var offsetWidth = Math.max(
 626                  document.documentElement.offsetWidth,
 627                  document.body.offsetWidth
 628              );
 629  
 630              if (scrollWidth < offsetWidth) {
 631                  return $(window).width() + 'px';
 632              } else {
 633                  return scrollWidth + 'px';
 634              }
 635          // handle "good" browsers

 636          } else {
 637              return $(document).width() + 'px';
 638          }
 639      },
 640  
 641      resize: function() {
 642          /* If the dialog is draggable and the user drags it past the

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

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

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

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

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

 648           * to the full document size.

 649           */
 650          var $overlays = $([]);
 651          $.each($.ui.dialog.overlay.instances, function() {
 652              $overlays = $overlays.add(this);
 653          });
 654  
 655          $overlays.css({
 656              width: 0,
 657              height: 0
 658          }).css({
 659              width: $.ui.dialog.overlay.width(),
 660              height: $.ui.dialog.overlay.height()
 661          });
 662      }
 663  });
 664  
 665  $.extend($.ui.dialog.overlay.prototype, {
 666      destroy: function() {
 667          $.ui.dialog.overlay.destroy(this.$el);
 668      }
 669  });
 670  
 671  })(jQuery);