| 18 | | |
| 19 | | $.fn.extend({ |
| 20 | | dialog: function(options, data) { |
| 21 | | return this.each(function() { |
| 22 | | var isMethodCall = (typeof options == "string"); |
| 23 | | var instance = $.data(this, "dialog"); |
| 24 | | |
| 25 | | if (!instance && !isMethodCall) { |
| 26 | | $.data(this, "dialog", new $.ui.dialog(this, options)); |
| 27 | | } else if (isMethodCall) { |
| 28 | | instance[options](data); |
| 29 | | } |
| 30 | | }); |
| 31 | | } |
| 32 | | }); |
| 33 | | |
| 34 | | $.ui.dialog = function(el, options) { |
| 35 | | |
| 36 | | this.options = options = $.extend({}, $.ui.dialog.defaults, options); |
| 37 | | this.element = el; |
| 38 | | var self = this; //Do bindings |
| 39 | | |
| 40 | | $.data(this.element, "dialog", this); |
| 41 | | |
| 42 | | $(el).bind("remove", function() { |
| 43 | | self.destroy(); |
| 44 | | }); |
| 45 | | |
| 46 | | $(el).bind("setData.dialog", function(event, key, value){ |
| 47 | | switch (key) { |
| 48 | | case "draggable": |
| 49 | | uiDialog.draggable(value ? 'enable' : 'disable'); |
| 50 | | break; |
| 51 | | case "dragStart": |
| 52 | | uiDialog.data('start.draggable', value); |
| 53 | | break; |
| 54 | | case "drag": |
| 55 | | uiDialog.data('drag.draggable', value); |
| 56 | | break; |
| 57 | | case "dragStop": |
| 58 | | uiDialog.data('stop.draggable', value); |
| 59 | | break; |
| 60 | | case "height": |
| 61 | | uiDialog.height(value); |
| 62 | | break; |
| 63 | | case "maxHeight": |
| 64 | | case "minHeight": |
| 65 | | case "maxWidth": |
| 66 | | case "minWidth": |
| 67 | | uiDialog.data(key + ".resizable", value); |
| 68 | | break; |
| 69 | | case "position": |
| 70 | | self.position(value); |
| 71 | | break; |
| 72 | | case "resizable": |
| 73 | | uiDialog.resizable(value ? 'enable' : 'disable'); |
| 74 | | break; |
| 75 | | case "resizeStart": |
| 76 | | uiDialog.data('start.resizable', value); |
| 77 | | break; |
| 78 | | case "resize": |
| 79 | | uiDialog.data('resize.resizable', value); |
| 80 | | break; |
| 81 | | case "resizeStop": |
| 82 | | uiDialog.data('stop.resizable', value); |
| 83 | | break; |
| 84 | | case "title": |
| 85 | | $(".ui-dialog-title", uiDialogTitlebar).text(value); |
| 86 | | break; |
| 87 | | case "width": |
| 88 | | break; |
| 89 | | } |
| 90 | | options[key] = value; |
| 91 | | }).bind("getData.dialog", function(event, key){ |
| 92 | | return options[key]; |
| 93 | | }); |
| 94 | | |
| 95 | | var uiDialogContent = $(el).addClass('ui-dialog-content'); |
| 96 | | |
| 97 | | if (!uiDialogContent.parent().length) { |
| 98 | | uiDialogContent.appendTo('body'); |
| 99 | | } |
| 100 | | uiDialogContent |
| 101 | | .wrap(document.createElement('div')) |
| 102 | | .wrap(document.createElement('div')); |
| 103 | | var uiDialogContainer = uiDialogContent.parent().addClass('ui-dialog-container').css({position: 'relative'}); |
| 104 | | var uiDialog = this.uiDialog = uiDialogContainer.parent().hide() |
| 105 | | .addClass('ui-dialog') |
| 106 | | .css({position: 'absolute', width: options.width, height: options.height, overflow: 'hidden'}); |
| 107 | | |
| 108 | | var classNames = uiDialogContent.attr('className').split(' '); |
| 109 | | |
| 110 | | // Add content classes to dialog, to inherit theme at top level of element |
| 111 | | $.each(classNames, function(i, className) { |
| 112 | | if (className != 'ui-dialog-content') |
| 113 | | uiDialog.addClass(className); |
| 114 | | }); |
| 115 | | |
| 116 | | if ($.fn.resizable) { |
| 117 | | uiDialog.append('<div class="ui-resizable-n ui-resizable-handle"></div>') |
| 118 | | .append('<div class="ui-resizable-s ui-resizable-handle"></div>') |
| 119 | | .append('<div class="ui-resizable-e ui-resizable-handle"></div>') |
| 120 | | .append('<div class="ui-resizable-w ui-resizable-handle"></div>') |
| 121 | | .append('<div class="ui-resizable-ne ui-resizable-handle"></div>') |
| 122 | | .append('<div class="ui-resizable-se ui-resizable-handle"></div>') |
| 123 | | .append('<div class="ui-resizable-sw ui-resizable-handle"></div>') |
| 124 | | .append('<div class="ui-resizable-nw ui-resizable-handle"></div>'); |
| 125 | | uiDialog.resizable({ |
| 126 | | maxWidth: options.maxWidth, |
| 127 | | maxHeight: options.maxHeight, |
| 128 | | minWidth: options.minWidth, |
| 129 | | minHeight: options.minHeight, |
| 130 | | start: options.resizeStart, |
| 131 | | resize: options.resize, |
| 132 | | stop: function(e, ui) { |
| 133 | | options.resizeStop && options.resizeStop.apply(this, arguments); |
| 134 | | $.ui.dialog.overlay.resize(); |
| 135 | | } |
| 136 | | }); |
| 137 | | if (!options.resizable) |
| 138 | | uiDialog.resizable('disable'); |
| 139 | | } |
| 140 | | |
| 141 | | uiDialogContainer.prepend('<div class="ui-dialog-titlebar"></div>'); |
| 142 | | var uiDialogTitlebar = $('.ui-dialog-titlebar', uiDialogContainer); |
| 143 | | var title = (options.title) ? options.title : (uiDialogContent.attr('title')) ? uiDialogContent.attr('title') : ''; |
| 144 | | uiDialogTitlebar.append('<span class="ui-dialog-title">' + title + '</span>'); |
| 145 | | uiDialogTitlebar.append('<a href="#" class="ui-dialog-titlebar-close"><span>X</span></a>'); |
| 146 | | this.uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar) |
| 147 | | .hover(function() { $(this).addClass('ui-dialog-titlebar-close-hover'); }, |
| 148 | | function() { $(this).removeClass('ui-dialog-titlebar-close-hover'); }) |
| 149 | | .mousedown(function(ev) { |
| 150 | | ev.stopPropagation(); |
| 151 | | }) |
| 152 | | .click(function() { |
| 153 | | self.close(); |
| 154 | | return false; |
| 155 | | }); |
| 156 | | |
| 157 | | // setting tabindex makes the div focusable |
| 158 | | // setting outline to 0 prevents a border on focus in Mozilla |
| 159 | | uiDialog.attr('tabindex', -1).css('outline', 0).keydown(function(ev) { |
| 160 | | if (options.closeOnEscape) { |
| 161 | | var ESC = 27; |
| 162 | | ev.keyCode && ev.keyCode == ESC && self.close(); |
| 163 | | } |
| 164 | | }); |
| 165 | | |
| 166 | | var hasButtons = false; |
| 167 | | $.each(options.buttons, function() { return !(hasButtons = true); }); |
| 168 | | if (hasButtons) { |
| 169 | | var uiDialogButtonPane = $('<div class="ui-dialog-buttonpane"/>') |
| 170 | | .appendTo(uiDialog); |
| 171 | | $.each(options.buttons, function(name, fn) { |
| 172 | | $(document.createElement('button')) |
| 173 | | .text(name) |
| 174 | | .click(function() { fn.apply(el, arguments) }) |
| 175 | | .appendTo(uiDialogButtonPane); |
| 176 | | }); |
| 177 | | } |
| 178 | | |
| 179 | | if ($.fn.draggable) { |
| 180 | | uiDialog.draggable({ |
| 181 | | handle: '.ui-dialog-titlebar', |
| 182 | | start: function(e, ui) { |
| 183 | | self.activate(); |
| 184 | | options.dragStart && options.dragStart.apply(this, arguments); |
| 185 | | }, |
| 186 | | drag: options.drag, |
| 187 | | stop: function(e, ui) { |
| 188 | | options.dragStop && options.dragStop.apply(this, arguments); |
| 189 | | $.ui.dialog.overlay.resize(); |
| 190 | | } |
| 191 | | }); |
| 192 | | if (!options.draggable) |
| 193 | | uiDialog.draggable('disable') |
| 194 | | } |
| 195 | | |
| 196 | | uiDialog.mousedown(function() { |
| 197 | | self.activate(); |
| 198 | | }); |
| 199 | | uiDialogTitlebar.click(function() { |
| 200 | | self.activate(); |
| 201 | | }); |
| 202 | | |
| 203 | | options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe(); |
| 204 | | |
| 205 | | this.position = function(pos) { |
| 206 | | var wnd = $(window), doc = $(document), top = doc.scrollTop(), left = doc.scrollLeft(); |
| 207 | | if (pos.constructor == Array) { |
| 208 | | // [x, y] |
| 209 | | top += pos[1]; |
| 210 | | left += pos[0]; |
| 211 | | } else { |
| 212 | | switch (pos) { |
| 213 | | case 'center': |
| 214 | | top += (wnd.height() / 2) - (uiDialog.height() / 2); |
| 215 | | left += (wnd.width() / 2) - (uiDialog.width() / 2); |
| 216 | | break; |
| 217 | | case 'top': |
| 218 | | top += 0; |
| 219 | | left += (wnd.width() / 2) - (uiDialog.width() / 2); |
| 220 | | break; |
| 221 | | case 'right': |
| 222 | | top += (wnd.height() / 2) - (uiDialog.height() / 2); |
| 223 | | left += (wnd.width()) - (uiDialog.width()); |
| 224 | | break; |
| 225 | | case 'bottom': |
| 226 | | top += (wnd.height()) - (uiDialog.height()); |
| 227 | | left += (wnd.width() / 2) - (uiDialog.width() / 2); |
| 228 | | break; |
| 229 | | case 'left': |
| 230 | | top += (wnd.height() / 2) - (uiDialog.height() / 2); |
| 231 | | left += 0; |
| 232 | | break; |
| 233 | | default: |
| 234 | | //center |
| 235 | | top += (wnd.height() / 2) - (uiDialog.height() / 2); |
| 236 | | left += (wnd.width() / 2) - (uiDialog.width() / 2); |
| 237 | | } |
| 238 | | } |
| 239 | | top = top < doc.scrollTop() ? doc.scrollTop() : top; |
| 240 | | uiDialog.css({top: top, left: left}); |
| 241 | | } |
| 242 | | |
| 243 | | this.open = function() { |
| 244 | | this.overlay = options.modal ? new $.ui.dialog.overlay(self) : null; |
| 245 | | uiDialog.appendTo('body'); |
| 246 | | this.position(options.position); |
| 247 | | uiDialog.show(); |
| 248 | | self.moveToTop(); |
| 249 | | self.activate(); |
| 250 | | |
| 251 | | // CALLBACK: open |
| 252 | | var openEV = null; |
| 253 | | var openUI = { |
| 254 | | options: options |
| 255 | | }; |
| 256 | | this.uiDialogTitlebarClose.focus(); |
| 257 | | $(this.element).triggerHandler("dialogopen", [openEV, openUI], options.open); |
| 258 | | }; |
| 259 | | |
| 260 | | this.activate = function() { |
| 261 | | // Move modeless dialogs to the top when they're activated. Even |
| 262 | | // if there is a modal dialog in the window, the modeless dialog |
| 263 | | // should be on top because it must have been opened after the modal |
| 264 | | // dialog. Modal dialogs don't get moved to the top because that |
| 265 | | // would make any modeless dialogs that it spawned unusable until |
| 266 | | // the modal dialog is closed. |
| 267 | | !options.modal && this.moveToTop(); |
| 268 | | }; |
| 269 | | |
| 270 | | this.moveToTop = function() { |
| 271 | | var maxZ = options.zIndex; |
| 272 | | $('.ui-dialog:visible').each(function() { |
| 273 | | maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || options.zIndex); |
| 274 | | }); |
| 275 | | this.overlay && this.overlay.$el.css('z-index', ++maxZ); |
| 276 | | uiDialog.css('z-index', ++maxZ); |
| 277 | | }; |
| 278 | | |
| 279 | | this.close = function() { |
| 280 | | this.overlay && this.overlay.destroy(); |
| 281 | | uiDialog.hide(); |
| 282 | | |
| 283 | | // CALLBACK: close |
| 284 | | var closeEV = null; |
| 285 | | var closeUI = { |
| 286 | | options: options |
| 287 | | }; |
| 288 | | $(this.element).triggerHandler("dialogclose", [closeEV, closeUI], options.close); |
| 289 | | $.ui.dialog.overlay.resize(); |
| 290 | | }; |
| 291 | | |
| 292 | | this.destroy = function() { |
| 293 | | this.overlay && this.overlay.destroy(); |
| 294 | | uiDialog.hide(); |
| 295 | | $(el).unbind('.dialog').removeClass('ui-dialog-content').hide().appendTo('body'); |
| 296 | | uiDialog.remove(); |
| 297 | | $.removeData(this.element, "dialog"); |
| 298 | | }; |
| 299 | | |
| 300 | | if (options.autoOpen) { |
| 301 | | this.open(); |
| 302 | | }; |
| 303 | | }; |
| 304 | | |
| 305 | | $.extend($.ui.dialog, { |
| 306 | | defaults: { |
| 307 | | autoOpen: true, |
| 308 | | bgiframe: false, |
| 309 | | buttons: {}, |
| 310 | | closeOnEscape: true, |
| 311 | | draggable: true, |
| 312 | | height: 200, |
| 313 | | minHeight: 100, |
| 314 | | minWidth: 150, |
| 315 | | modal: false, |
| 316 | | overlay: {}, |
| 317 | | position: 'center', |
| 318 | | resizable: true, |
| 319 | | width: 300, |
| 320 | | zIndex: 1000 |
| 321 | | }, |
| 322 | | |
| 323 | | overlay: function(dialog) { |
| 324 | | this.$el = $.ui.dialog.overlay.create(dialog); |
| 325 | | } |
| 326 | | }); |
| 327 | | |
| 328 | | $.extend($.ui.dialog.overlay, { |
| 329 | | instances: [], |
| 330 | | events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','), |
| 331 | | function(e) { return e + '.dialog-overlay'; }).join(' '), |
| 332 | | create: function(dialog) { |
| 333 | | if (this.instances.length === 0) { |
| 334 | | // prevent use of anchors and inputs |
| 335 | | $('a, :input').bind(this.events, function() { |
| 336 | | // allow use of the element if inside a dialog and |
| 337 | | // - there are no modal dialogs |
| 338 | | // - there are modal dialogs, but we are in front of the |
| 339 | | // topmost modal dialog |
| 340 | | var allow = false; |
| 341 | | var $dialog = $(this).parents('.ui-dialog'); |
| 342 | | if ($dialog.length) { |
| 343 | | var $overlays = $('.ui-dialog-overlay'); |
| 344 | | if ($overlays.length) { |
| 345 | | var maxZ = parseInt($overlays.css('z-index'), 10); |
| 346 | | $overlays.each(function() { |
| 347 | | maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10)); |
| 348 | | }); |
| 349 | | allow = parseInt($dialog.css('z-index'), 10) > maxZ; |
| 350 | | } else { |
| 351 | | allow = true; |
| 352 | | } |
| 353 | | } |
| 354 | | return allow; |
| 355 | | }); |
| 356 | | |
| 357 | | // allow closing by pressing the escape key |
| 358 | | $(document).bind('keydown.dialog-overlay', function(e) { |
| 359 | | var ESC = 27; |
| 360 | | e.keyCode && e.keyCode == ESC && dialog.close(); |
| 361 | | }); |
| 362 | | |
| 363 | | // handle window resize |
| 364 | | $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize); |
| 365 | | } |
| 366 | | |
| 367 | | var $el = $('<div/>').appendTo(document.body) |
| 368 | | .addClass('ui-dialog-overlay').css($.extend({ |
| 369 | | borderWidth: 0, margin: 0, padding: 0, |
| 370 | | position: 'absolute', top: 0, left: 0, |
| 371 | | width: this.width(), |
| 372 | | height: this.height() |
| 373 | | }, dialog.options.overlay)); |
| 374 | | |
| 375 | | dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe(); |
| 376 | | |
| 377 | | this.instances.push($el); |
| 378 | | return $el; |
| 379 | | }, |
| 380 | | |
| 381 | | destroy: function($el) { |
| 382 | | this.instances.splice($.inArray(this.instances, $el), 1); |
| 383 | | |
| 384 | | if (this.instances.length === 0) { |
| 385 | | $('a, :input').add([document, window]).unbind('.dialog-overlay'); |
| 386 | | } |
| 387 | | |
| 388 | | $el.remove(); |
| 389 | | }, |
| 390 | | |
| 391 | | height: function() { |
| 392 | | if ($.browser.msie && $.browser.version < 7) { |
| 393 | | var scrollHeight = Math.max( |
| 394 | | document.documentElement.scrollHeight, |
| 395 | | document.body.scrollHeight |
| 396 | | ); |
| 397 | | var offsetHeight = Math.max( |
| 398 | | document.documentElement.offsetHeight, |
| 399 | | document.body.offsetHeight |
| 400 | | ); |
| 401 | | |
| 402 | | if (scrollHeight < offsetHeight) { |
| 403 | | return $(window).height() + 'px'; |
| 404 | | } else { |
| 405 | | return scrollHeight + 'px'; |
| 406 | | } |
| 407 | | } else { |
| 408 | | return $(document).height() + 'px'; |
| 409 | | } |
| 410 | | }, |
| 411 | | |
| 412 | | width: function() { |
| 413 | | if ($.browser.msie && $.browser.version < 7) { |
| 414 | | var scrollWidth = Math.max( |
| 415 | | document.documentElement.scrollWidth, |
| 416 | | document.body.scrollWidth |
| 417 | | ); |
| 418 | | var offsetWidth = Math.max( |
| 419 | | document.documentElement.offsetWidth, |
| 420 | | document.body.offsetWidth |
| 421 | | ); |
| 422 | | |
| 423 | | if (scrollWidth < offsetWidth) { |
| 424 | | return $(window).width() + 'px'; |
| 425 | | } else { |
| 426 | | return scrollWidth + 'px'; |
| 427 | | } |
| 428 | | } else { |
| 429 | | return $(document).width() + 'px'; |
| 430 | | } |
| 431 | | }, |
| 432 | | |
| 433 | | resize: function() { |
| 434 | | /* If the dialog is draggable and the user drags it past the |
| 435 | | * right edge of the window, the document becomes wider so we |
| 436 | | * need to stretch the overlay. If the user then drags the |
| 437 | | * dialog back to the left, the document will become narrower, |
| 438 | | * so we need to shrink the overlay to the appropriate size. |
| 439 | | * This is handled by shrinking the overlay before setting it |
| 440 | | * to the full document size. |
| 441 | | */ |
| 442 | | var $overlays = $([]); |
| 443 | | $.each($.ui.dialog.overlay.instances, function() { |
| 444 | | $overlays = $overlays.add(this); |
| 445 | | }); |
| 446 | | |
| 447 | | $overlays.css({ |
| 448 | | width: 0, |
| 449 | | height: 0 |
| 450 | | }).css({ |
| 451 | | width: $.ui.dialog.overlay.width(), |
| 452 | | height: $.ui.dialog.overlay.height() |
| 453 | | }); |
| 454 | | } |
| 455 | | }); |
| 456 | | |
| 457 | | $.extend($.ui.dialog.overlay.prototype, { |
| 458 | | destroy: function() { |
| 459 | | $.ui.dialog.overlay.destroy(this.$el); |
| 460 | | } |
| 461 | | }); |
| | 18 | |
| | 19 | $.fn.extend({ |
| | 20 | dialog: function(options, data) { |
| | 21 | return this.each(function() { |
| | 22 | var isMethodCall = (typeof options == "string"); |
| | 23 | var instance = $.data(this, "dialog"); |
| | 24 | |
| | 25 | if (!instance && !isMethodCall) { |
| | 26 | $.data(this, "dialog", new $.ui.dialog(this, options)); |
| | 27 | } else if (isMethodCall) { |
| | 28 | instance[options](data); |
| | 29 | } |
| | 30 | }); |
| | 31 | } |
| | 32 | }); |
| | 33 | |
| | 34 | $.ui.dialog = function(el, options) { |
| | 35 | |
| | 36 | this.options = options = $.extend({}, $.ui.dialog.defaults, options); |
| | 37 | this.element = el; |
| | 38 | var self = this; //Do bindings |
| | 39 | |
| | 40 | $.data(this.element, "dialog", this); |
| | 41 | |
| | 42 | $(el).bind("remove", function() { |
| | 43 | self.destroy(); |
| | 44 | }); |
| | 45 | |
| | 46 | $(el).bind("setData.dialog", function(event, key, value){ |
| | 47 | switch (key) { |
| | 48 | case "draggable": |
| | 49 | uiDialog.draggable(value ? 'enable' : 'disable'); |
| | 50 | break; |
| | 51 | case "dragStart": |
| | 52 | uiDialog.data('start.draggable', value); |
| | 53 | break; |
| | 54 | case "drag": |
| | 55 | uiDialog.data('drag.draggable', value); |
| | 56 | break; |
| | 57 | case "dragStop": |
| | 58 | uiDialog.data('stop.draggable', value); |
| | 59 | break; |
| | 60 | case "height": |
| | 61 | uiDialog.height(value); |
| | 62 | break; |
| | 63 | case "maxHeight": |
| | 64 | case "minHeight": |
| | 65 | case "maxWidth": |
| | 66 | case "minWidth": |
| | 67 | uiDialog.data(key + ".resizable", value); |
| | 68 | break; |
| | 69 | case "position": |
| | 70 | self.position(value); |
| | 71 | break; |
| | 72 | case "resizable": |
| | 73 | uiDialog.resizable(value ? 'enable' : 'disable'); |
| | 74 | break; |
| | 75 | case "resizeStart": |
| | 76 | uiDialog.data('start.resizable', value); |
| | 77 | break; |
| | 78 | case "resize": |
| | 79 | uiDialog.data('resize.resizable', value); |
| | 80 | break; |
| | 81 | case "resizeStop": |
| | 82 | uiDialog.data('stop.resizable', value); |
| | 83 | break; |
| | 84 | case "title": |
| | 85 | $(".ui-dialog-title", uiDialogTitlebar).text(value); |
| | 86 | break; |
| | 87 | case "width": |
| | 88 | break; |
| | 89 | } |
| | 90 | options[key] = value; |
| | 91 | }).bind("getData.dialog", function(event, key){ |
| | 92 | return options[key]; |
| | 93 | }); |
| | 94 | |
| | 95 | var uiDialogContent = $(el).addClass('ui-dialog-content'); |
| | 96 | |
| | 97 | if (!uiDialogContent.parent().length) { |
| | 98 | uiDialogContent.appendTo('body'); |
| | 99 | } |
| | 100 | uiDialogContent |
| | 101 | .wrap(document.createElement('div')) |
| | 102 | .wrap(document.createElement('div')); |
| | 103 | var uiDialogContainer = uiDialogContent.parent().addClass('ui-dialog-container').css({position: 'relative'}); |
| | 104 | var uiDialog = this.uiDialog = uiDialogContainer.parent().hide() |
| | 105 | .addClass('ui-dialog') |
| | 106 | .css({position: 'absolute', width: options.width, height: options.height, overflow: 'hidden'}); |
| | 107 | |
| | 108 | var classNames = uiDialogContent.attr('className').split(' '); |
| | 109 | |
| | 110 | // Add content classes to dialog, to inherit theme at top level of element |
| | 111 | $.each(classNames, function(i, className) { |
| | 112 | if (className != 'ui-dialog-content') |
| | 113 | uiDialog.addClass(className); |
| | 114 | }); |
| | 115 | |
| | 116 | if ($.fn.resizable) { |
| | 117 | uiDialog.append('<div class="ui-resizable-n ui-resizable-handle"></div>') |
| | 118 | .append('<div class="ui-resizable-s ui-resizable-handle"></div>') |
| | 119 | .append('<div class="ui-resizable-e ui-resizable-handle"></div>') |
| | 120 | .append('<div class="ui-resizable-w ui-resizable-handle"></div>') |
| | 121 | .append('<div class="ui-resizable-ne ui-resizable-handle"></div>') |
| | 122 | .append('<div class="ui-resizable-se ui-resizable-handle"></div>') |
| | 123 | .append('<div class="ui-resizable-sw ui-resizable-handle"></div>') |
| | 124 | .append('<div class="ui-resizable-nw ui-resizable-handle"></div>'); |
| | 125 | uiDialog.resizable({ |
| | 126 | maxWidth: options.maxWidth, |
| | 127 | maxHeight: options.maxHeight, |
| | 128 | minWidth: options.minWidth, |
| | 129 | minHeight: options.minHeight, |
| | 130 | start: options.resizeStart, |
| | 131 | resize: options.resize, |
| | 132 | stop: function(e, ui) { |
| | 133 | options.resizeStop && options.resizeStop.apply(this, arguments); |
| | 134 | $.ui.dialog.overlay.resize(); |
| | 135 | } |
| | 136 | }); |
| | 137 | if (!options.resizable) |
| | 138 | uiDialog.resizable('disable'); |
| | 139 | } |
| | 140 | |
| | 141 | uiDialogContainer.prepend('<div class="ui-dialog-titlebar"></div>'); |
| | 142 | var uiDialogTitlebar = $('.ui-dialog-titlebar', uiDialogContainer); |
| | 143 | var title = (options.title) ? options.title : (uiDialogContent.attr('title')) ? uiDialogContent.attr('title') : ''; |
| | 144 | uiDialogTitlebar.append('<span class="ui-dialog-title">' + title + '</span>'); |
| | 145 | uiDialogTitlebar.append('<a href="#" class="ui-dialog-titlebar-close"><span>X</span></a>'); |
| | 146 | this.uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar) |
| | 147 | .hover(function() { $(this).addClass('ui-dialog-titlebar-close-hover'); }, |
| | 148 | function() { $(this).removeClass('ui-dialog-titlebar-close-hover'); }) |
| | 149 | .mousedown(function(ev) { |
| | 150 | ev.stopPropagation(); |
| | 151 | }) |
| | 152 | .click(function() { |
| | 153 | self.close(); |
| | 154 | return false; |
| | 155 | }); |
| | 156 | |
| | 157 | // setting tabindex makes the div focusable |
| | 158 | // setting outline to 0 prevents a border on focus in Mozilla |
| | 159 | uiDialog.attr('tabindex', -1).css('outline', 0).keydown(function(ev) { |
| | 160 | if (options.closeOnEscape) { |
| | 161 | var ESC = 27; |
| | 162 | ev.keyCode && ev.keyCode == ESC && self.close(); |
| | 163 | } |
| | 164 | }); |
| | 165 | |
| | 166 | var hasButtons = false; |
| | 167 | $.each(options.buttons, function() { return !(hasButtons = true); }); |
| | 168 | if (hasButtons) { |
| | 169 | var uiDialogButtonPane = $('<div class="ui-dialog-buttonpane"/>') |
| | 170 | .appendTo(uiDialog); |
| | 171 | $.each(options.buttons, function(name, fn) { |
| | 172 | $(document.createElement('button')) |
| | 173 | .text(name) |
| | 174 | .click(function() { fn.apply(el, arguments) }) |
| | 175 | .appendTo(uiDialogButtonPane); |
| | 176 | }); |
| | 177 | } |
| | 178 | |
| | 179 | if ($.fn.draggable) { |
| | 180 | uiDialog.draggable({ |
| | 181 | handle: '.ui-dialog-titlebar', |
| | 182 | start: function(e, ui) { |
| | 183 | self.activate(); |
| | 184 | options.dragStart && options.dragStart.apply(this, arguments); |
| | 185 | }, |
| | 186 | drag: options.drag, |
| | 187 | stop: function(e, ui) { |
| | 188 | options.dragStop && options.dragStop.apply(this, arguments); |
| | 189 | $.ui.dialog.overlay.resize(); |
| | 190 | } |
| | 191 | }); |
| | 192 | if (!options.draggable) |
| | 193 | uiDialog.draggable('disable') |
| | 194 | } |
| | 195 | |
| | 196 | uiDialog.mousedown(function() { |
| | 197 | self.activate(); |
| | 198 | }); |
| | 199 | uiDialogTitlebar.click(function() { |
| | 200 | self.activate(); |
| | 201 | }); |
| | 202 | |
| | 203 | options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe(); |
| | 204 | |
| | 205 | this.position = function(pos) { |
| | 206 | var wnd = $(window), doc = $(document), top = doc.scrollTop(), left = doc.scrollLeft(); |
| | 207 | if (pos.constructor == Array) { |
| | 208 | // [x, y] |
| | 209 | switch (pos[0]) { |
| | 210 | case 'center': |
| | 211 | left += (wnd.width() / 2) - (uiDialog.width() / 2); |
| | 212 | break; |
| | 213 | case 'left': |
| | 214 | left += 0; |
| | 215 | break |
| | 216 | case 'right': |
| | 217 | right +=0; |
| | 218 | default: |
| | 219 | left += pos[0]; |
| | 220 | } |
| | 221 | switch (pos[1]) { |
| | 222 | case 'middle': |
| | 223 | top += (wnd.height() / 2) - (uiDialog.height() / 2); |
| | 224 | break; |
| | 225 | case 'top': |
| | 226 | top += 0; |
| | 227 | break |
| | 228 | case 'bottom': |
| | 229 | top += (wnd.height()) - (uiDialog.height()); |
| | 230 | default: |
| | 231 | top += pos[1]; |
| | 232 | } |
| | 233 | } else { |
| | 234 | switch (pos) { |
| | 235 | case 'center': |
| | 236 | top += (wnd.height() / 2) - (uiDialog.height() / 2); |
| | 237 | left += (wnd.width() / 2) - (uiDialog.width() / 2); |
| | 238 | break; |
| | 239 | case 'top': |
| | 240 | top += 0; |
