← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.6rc2/ui/ui.dialog.js

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.6rc2/ui/ui.dialog.js
1
 
/*
2
 
 * jQuery UI Dialog @VERSION
3
 
 *
4
 
 * Copyright (c) 2008 Richard D. Worth (rdworth.org)
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
 
        _init: function() {
32
 
                this.originalTitle = this.element.attr('title');
33
 
                this.options.title = this.options.title || this.originalTitle;
34
 
                
35
 
                var self = this,
36
 
                        options = this.options,
37
 
                        
38
 
                        uiDialogContent = this.element
39
 
                                .removeAttr('title')
40
 
                                .addClass('ui-dialog-content')
41
 
                                .wrap('<div/>')
42
 
                                .wrap('<div/>'),
43
 
                        
44
 
                        uiDialogContainer = (this.uiDialogContainer = uiDialogContent.parent())
45
 
                                .addClass('ui-dialog-container')
46
 
                                .css({
47
 
                                        position: 'relative',
48
 
                                        width: '100%',
49
 
                                        height: '100%'
50
 
                                }),
51
 
                        
52
 
                        uiDialogTitlebar = (this.uiDialogTitlebar = $('<div/>'))
53
 
                                .addClass('ui-dialog-titlebar')
54
 
                                .append('<a href="#" class="ui-dialog-titlebar-close"><span>X</span></a>')
55
 
                                .prependTo(uiDialogContainer),
56
 
                        
57
 
                        title = options.title || '&nbsp;',
58
 
                        titleId = $.ui.dialog.getTitleId(this.element),
59
 
                        uiDialogTitle = $('<span/>')
60
 
                                .addClass('ui-dialog-title')
61
 
                                .attr('id', titleId)
62
 
                                .html(title)
63
 
                                .prependTo(uiDialogTitlebar),
64
 
                        
65
 
                        uiDialog = (this.uiDialog = uiDialogContainer.parent())
66
 
                                .appendTo(document.body)
67
 
                                .hide()
68
 
                                .addClass('ui-dialog')
69
 
                                .addClass(options.dialogClass)
70
 
                                // add content classes to dialog
71
 
                                // to inherit theme at top level of element
72
 
                                .addClass(uiDialogContent.attr('className'))
73
 
                                        .removeClass('ui-dialog-content')
74
 
                                .css({
75
 
                                        position: 'absolute',
76
 
                                        width: options.width,
77
 
                                        height: options.height,
78
 
                                        overflow: 'hidden',
79
 
                                        zIndex: options.zIndex
80
 
                                })
81
 
                                // setting tabIndex makes the div focusable
82
 
                                // setting outline to 0 prevents a border on focus in Mozilla
83
 
                                .attr('tabIndex', -1).css('outline', 0).keydown(function(ev) {
84
 
                                        (options.closeOnEscape && ev.keyCode
85
 
                                                && ev.keyCode == $.keyCode.ESCAPE && self.close());
86
 
                                })
87
 
                                .mousedown(function() {
88
 
                                        self._moveToTop();
89
 
                                }),
90
 
                        
91
 
                        uiDialogButtonPane = (this.uiDialogButtonPane = $('<div/>'))
92
 
                                .addClass('ui-dialog-buttonpane')
93
 
                                .css({
94
 
                                        position: 'absolute',
95
 
                                        bottom: 0
96
 
                                })
97
 
                                .appendTo(uiDialog);
98
 
                
99
 
                this.uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar)
100
 
                        .hover(
101
 
                                function() {
102
 
                                        $(this).addClass('ui-dialog-titlebar-close-hover');
103
 
                                },
104
 
                                function() {
105
 
                                        $(this).removeClass('ui-dialog-titlebar-close-hover');
106
 
                                }
107
 
                        )
108
 
                        .mousedown(function(ev) {
109
 
                                ev.stopPropagation();
110
 
                        })
111
 
                        .click(function() {
112
 
                                self.close();
113
 
                                return false;
114
 
                        });
115
 
                
116
 
                uiDialogTitlebar.find("*").add(uiDialogTitlebar).each(function() {
117
 
                        $.ui.disableSelection(this);
118
 
                });
119
 
                
120
 
                (options.draggable && $.fn.draggable && this._makeDraggable());
121
 
                (options.resizable && $.fn.resizable && this._makeResizable());
122
 
                
123
 
                this._createButtons(options.buttons);
124
 
                this._isOpen = false;
125
 
                
126
 
                (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe());
127
 
                (options.autoOpen && this.open());
128
 
        },
129
 
        
130
 
        destroy: function() {
131
 
                (this.overlay && this.overlay.destroy());
132
 
                this.uiDialog.hide();
133
 
                this.element
134
 
                        .unbind('.dialog')
135
 
                        .removeData('dialog')
136
 
                        .removeClass('ui-dialog-content')
137
 
                        .hide().appendTo('body');
138
 
                this.uiDialog.remove();
139
 
                
140
 
                (this.originalTitle && this.element.attr('title', this.originalTitle));
141
 
        },
142
 
        
143
 
        close: function() {
144
 
                if (false === this._trigger('beforeclose', null, { options: this.options })) {
145
 
                        return;
146
 
                }
147
 
                
148
 
                (this.overlay && this.overlay.destroy());
149
 
                this.uiDialog
150
 
                        .hide(this.options.hide)
151
 
                        .unbind('keypress.ui-dialog');
152
 
                
153
 
                this._trigger('close', null, { options: this.options });
154
 
                $.ui.dialog.overlay.resize();
155
 
                
156
 
                this._isOpen = false;
157
 
        },
158
 
        
159
 
        isOpen: function() {
160
 
                return this._isOpen;
161
 
        },
162
 
        
163
 
        open: function() {
164
 
                if (this._isOpen) { return; }
165
 
                
166
 
                this.overlay = this.options.modal ? new $.ui.dialog.overlay(this) : null;
167
 
                (this.uiDialog.next().length && this.uiDialog.appendTo('body'));
168
 
                this._position(this.options.position);
169
 
                this.uiDialog.show(this.options.show);
170
 
                (this.options.autoResize && this._size());
171
 
                this._moveToTop(true);
172
 
                
173
 
                // prevent tabbing out of modal dialogs
174
 
                (this.options.modal && this.uiDialog.bind('keypress.ui-dialog', function(e) {
175
 
                        if (e.keyCode != $.keyCode.TAB) {
176
 
                                return;
177
 
                        }
178
 
                        
179
 
                        var tabbables = $(':tabbable', this),
180
 
                                first = tabbables.filter(':first')[0],
181
 
                                last  = tabbables.filter(':last')[0];
182
 
                        
183
 
                        if (e.target == last && !e.shiftKey) {
184
 
                                setTimeout(function() {
185
 
                                        first.focus();
186
 
                                }, 1);
187
 
                        } else if (e.target == first && e.shiftKey) {
188
 
                                setTimeout(function() {
189
 
                                        last.focus();
190
 
                                }, 1);
191
 
                        }
192
 
                }));
193
 
                
194
 
                this.uiDialog.find(':tabbable:first').focus();
195
 
                this._trigger('open', null, { options: this.options });
196
 
                this._isOpen = true;
197
 
        },
198
 
        
199
 
        _createButtons: function(buttons) {
200
 
                var self = this,
201
 
                        hasButtons = false,
202
 
                        uiDialogButtonPane = this.uiDialogButtonPane;
203
 
                
204
 
                // remove any existing buttons
205
 
                uiDialogButtonPane.empty().hide();
206
 
                
207
 
                $.each(buttons, function() { return !(hasButtons = true); });
208
 
                if (hasButtons) {
209
 
                        uiDialogButtonPane.show();
210
 
                        $.each(buttons, function(name, fn) {
211
 
                                $('<button type="button"></button>')
212
 
                                        .text(name)
213
 
                                        .click(function() { fn.apply(self.element[0], arguments); })
214
 
                                        .appendTo(uiDialogButtonPane);
215
 
                        });
216
 
                }
217
 
        },
218
 
        
219
 
        _makeDraggable: function() {
220
 
                var self = this,
221
 
                        options = this.options;
222
 
                
223
 
                this.uiDialog.draggable({
224
 
                        cancel: '.ui-dialog-content',
225
 
                        helper: options.dragHelper,
226
 
                        handle: '.ui-dialog-titlebar',
227
 
                        start: function() {
228
 
                                self._moveToTop();
229
 
                                (options.dragStart && options.dragStart.apply(self.element[0], arguments));
230
 
                        },
231
 
                        drag: function() {
232
 
                                (options.drag && options.drag.apply(self.element[0], arguments));
233
 
                        },
234
 
                        stop: function() {
235
 
                                (options.dragStop && options.dragStop.apply(self.element[0], arguments));
236
 
                                $.ui.dialog.overlay.resize();
237
 
                        }
238
 
                });
239
 
        },
240
 
        
241
 
        _makeResizable: function(handles) {
242
 
                handles = (handles === undefined ? this.options.resizable : handles);
243
 
                var self = this,
244
 
                        options = this.options,
245
 
                        resizeHandles = typeof handles == 'string'
246
 
                                ? handles
247
 
                                : 'n,e,s,w,se,sw,ne,nw';
248
 
                
249
 
                this.uiDialog.resizable({
250
 
                        cancel: '.ui-dialog-content',
251
 
                        helper: options.resizeHelper,
252
 
                        maxWidth: options.maxWidth,
253
 
                        maxHeight: options.maxHeight,
254
 
                        minWidth: options.minWidth,
255
 
                        minHeight: options.minHeight,
256
 
                        start: function() {
257
 
                                (options.resizeStart && options.resizeStart.apply(self.element[0], arguments));
258
 
                        },
259
 
                        resize: function() {
260
 
                                (options.autoResize && self._size.apply(self));
261
 
                                (options.resize && options.resize.apply(self.element[0], arguments));
262
 
                        },
263
 
                        handles: resizeHandles,
264
 
                        stop: function() {
265
 
                                (options.autoResize && self._size.apply(self));
266
 
                                (options.resizeStop && options.resizeStop.apply(self.element[0], arguments));
267
 
                                $.ui.dialog.overlay.resize();
268
 
                        }
269
 
                });
270
 
        },
271
 
        
272
 
        // the force parameter allows us to move modal dialogs to their correct
273
 
        // position on open
274
 
        _moveToTop: function(force) {
275
 
                
276
 
                if ((this.options.modal && !force)
277
 
                        || (!this.options.stack && !this.options.modal)) {
278
 
                        return this._trigger('focus', null, { options: this.options });
279
 
                }
280
 
                
281
 
                var maxZ = this.options.zIndex, options = this.options;
282
 
                $('.ui-dialog:visible').each(function() {
283
 
                        maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || options.zIndex);
284
 
                });
285
 
                (this.overlay && this.overlay.$el.css('z-index', ++maxZ));
286
 
                this.uiDialog.css('z-index', ++maxZ);
287
 
                
288
 
                this._trigger('focus', null, { options: this.options });
289
 
        },
290
 
        
291
 
        _position: function(pos) {
292
 
                var wnd = $(window), doc = $(document),
293
 
                        pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
294
 
                        minTop = pTop;
295
 
                
296
 
                if ($.inArray(pos, ['center','top','right','bottom','left']) >= 0) {
297
 
                        pos = [
298
 
                                pos == 'right' || pos == 'left' ? pos : 'center',
299
 
                                pos == 'top' || pos == 'bottom' ? pos : 'middle'
300
 
                        ];
301
 
                }
302
 
                if (pos.constructor != Array) {
303
 
                        pos = ['center', 'middle'];
304
 
                }
305
 
                if (pos[0].constructor == Number) {
306
 
                        pLeft += pos[0];
307
 
                } else {
308
 
                        switch (pos[0]) {
309
 
                                case 'left':
310
 
                                        pLeft += 0;
311
 
                                        break;
312
 
                                case 'right':
313
 
                                        pLeft += wnd.width() - this.uiDialog.width();
314
 
                                        break;
315
 
                                default:
316
 
                                case 'center':
317
 
                                        pLeft += (wnd.width() - this.uiDialog.width()) / 2;
318
 
                        }
319
 
                }
320
 
                if (pos[1].constructor == Number) {
321
 
                        pTop += pos[1];
322
 
                } else {
323
 
                        switch (pos[1]) {
324
 
                                case 'top':
325
 
                                        pTop += 0;
326
 
                                        break;
327
 
                                case 'bottom':
328
 
                                        pTop += wnd.height() - this.uiDialog.height();
329
 
                                        break;
330
 
                                default:
331
 
                                case 'middle':
332
 
                                        pTop += (wnd.height() - this.uiDialog.height()) / 2;
333
 
                        }
334
 
                }
335
 
                
336
 
                // prevent the dialog from being too high (make sure the titlebar
337
 
                // is accessible)
338
 
                pTop = Math.max(pTop, minTop);
339
 
                this.uiDialog.css({top: pTop, left: pLeft});
340
 
        },
341
 
        
342
 
        _setData: function(key, value){
343
 
                (setDataSwitch[key] && this.uiDialog.data(setDataSwitch[key], value));
344
 
                switch (key) {
345
 
                        case "buttons":
346
 
                                this._createButtons(value);
347
 
                                break;
348
 
                        case "draggable":
349
 
                                (value
350
 
                                        ? this._makeDraggable()
351
 
                                        : this.uiDialog.draggable('destroy'));
352
 
                                break;
353
 
                        case "height":
354
 
                                this.uiDialog.height(value);
355
 
                                break;
356
 
                        case "position":
357
 
                                this._position(value);
358
 
                                break;
359
 
                        case "resizable":
360
 
                                var uiDialog = this.uiDialog,
361
 
                                        isResizable = this.uiDialog.is(':data(resizable)');
362
 
                                
363
 
                                // currently resizable, becoming non-resizable
364
 
                                (isResizable && !value && uiDialog.resizable('destroy'));
365
 
                                
366
 
                                // currently resizable, changing handles
367
 
                                (isResizable && typeof value == 'string' &&
368
 
                                        uiDialog.resizable('option', 'handles', value));
369
 
                                
370
 
                                // currently non-resizable, becoming resizable
371
 
                                (isResizable || this._makeResizable(value));
372
 
                                
373
 
                                break;
374
 
                        case "title":
375
 
                                $(".ui-dialog-title", this.uiDialogTitlebar).html(value || '&nbsp;');
376
 
                                break;
377
 
                        case "width":
378
 
                                this.uiDialog.width(value);
379
 
                                break;
380
 
                }
381
 
                
382
 
                $.widget.prototype._setData.apply(this, arguments);
383
 
        },
384
 
        
385
 
        _size: function() {
386
 
                var container = this.uiDialogContainer,
387
 
                        titlebar = this.uiDialogTitlebar,
388
 
                        content = this.element,
389
 
                        tbMargin = (parseInt(content.css('margin-top'), 10) || 0)
390
 
                                + (parseInt(content.css('margin-bottom'), 10) || 0),
391
 
                        lrMargin = (parseInt(content.css('margin-left'), 10) || 0)
392
 
                                + (parseInt(content.css('margin-right'), 10) || 0);
393
 
                content.height(container.height() - titlebar.outerHeight() - tbMargin);
394
 
                content.width(container.width() - lrMargin);
395
 
        }
396
 
});
397
 
 
398
 
$.extend($.ui.dialog, {
399
 
        defaults: {
400
 
                autoOpen: true,
401
 
                autoResize: true,
402
 
                bgiframe: false,
403
 
                buttons: {},
404
 
                closeOnEscape: true,
405
 
                draggable: true,
406
 
                height: 200,
407
 
                minHeight: 100,
408
 
                minWidth: 150,
409
 
                modal: false,
410
 
                overlay: {},
411
 
                position: 'center',
412
 
                resizable: true,
413
 
                stack: true,
414
 
                width: 300,
415
 
                zIndex: 1000
416
 
        },
417
 
        
418
 
        getter: 'isOpen',
419
 
        
420
 
        uuid: 0,
421
 
        getTitleId: function($el) {
422
 
                return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid);
423
 
        },
424
 
        
425
 
        overlay: function(dialog) {
426
 
                this.$el = $.ui.dialog.overlay.create(dialog);
427
 
        }
428
 
});
429
 
 
430
 
$.extend($.ui.dialog.overlay, {
431
 
        instances: [],
432
 
        events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
433
 
                function(e) { return e + '.dialog-overlay'; }).join(' '),
434
 
        create: function(dialog) {
435
 
                if (this.instances.length === 0) {
436
 
                        // prevent use of anchors and inputs
437
 
                        // we use a setTimeout in case the overlay is created from an
438
 
                        // event that we're going to be cancelling (see #2804)
439
 
                        setTimeout(function() {
440
 
                                $('a, :input').bind($.ui.dialog.overlay.events, function() {
441
 
                                        // allow use of the element if inside a dialog and
442
 
                                        // - there are no modal dialogs
443
 
                                        // - there are modal dialogs, but we are in front of the topmost modal
444
 
                                        var allow = false;
445
 
                                        var $dialog = $(this).parents('.ui-dialog');
446
 
                                        if ($dialog.length) {
447
 
                                                var $overlays = $('.ui-dialog-overlay');
448
 
                                                if ($overlays.length) {
449
 
                                                        var maxZ = parseInt($overlays.css('z-index'), 10);
450
 
                                                        $overlays.each(function() {
451
 
                                                                maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10));
452
 
                                                        });
453
 
                                                        allow = parseInt($dialog.css('z-index'), 10) > maxZ;
454
 
                                                } else {
455
 
                                                        allow = true;
456
 
                                                }
457
 
                                        }
458
 
                                        return allow;
459
 
                                });
460
 
                        }, 1);
461
 
                        
462
 
                        // allow closing by pressing the escape key
463
 
                        $(document).bind('keydown.dialog-overlay', function(e) {
464
 
                                (dialog.options.closeOnEscape && e.keyCode
465
 
                                                && e.keyCode == $.keyCode.ESCAPE && dialog.close());
466
 
                        });
467
 
                        
468
 
                        // handle window resize
469
 
                        $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
470
 
                }
471
 
                
472
 
                var $el = $('<div/>').appendTo(document.body)
473
 
                        .addClass('ui-dialog-overlay').css($.extend({
474
 
                                borderWidth: 0, margin: 0, padding: 0,
475
 
                                position: 'absolute', top: 0, left: 0,
476
 
                                width: this.width(),
477
 
                                height: this.height()
478
 
                        }, dialog.options.overlay));
479
 
                
480
 
                (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe());
481
 
                
482
 
                this.instances.push($el);
483
 
                return $el;
484
 
        },
485
 
        
486
 
        destroy: function($el) {
487
 
                this.instances.splice($.inArray(this.instances, $el), 1);
488
 
                
489
 
                if (this.instances.length === 0) {
490
 
                        $('a, :input').add([document, window]).unbind('.dialog-overlay');
491
 
                }
492
 
                
493
 
                $el.remove();
494
 
        },
495
 
        
496
 
        height: function() {
497
 
                // handle IE 6
498
 
                if ($.browser.msie && $.browser.version < 7) {
499
 
                        var scrollHeight = Math.max(
500
 
                                document.documentElement.scrollHeight,
501
 
                                document.body.scrollHeight
502
 
                        );
503
 
                        var offsetHeight = Math.max(
504
 
                                document.documentElement.offsetHeight,
505
 
                                document.body.offsetHeight
506
 
                        );
507
 
                        
508
 
                        if (scrollHeight < offsetHeight) {
509
 
                                return $(window).height() + 'px';
510
 
                        } else {
511
 
                                return scrollHeight + 'px';
512
 
                        }
513
 
                // handle Opera
514
 
                } else if ($.browser.opera) {
515
 
                        return Math.max(
516
 
                                window.innerHeight,
517
 
                                $(document).height()
518
 
                        ) + 'px';
519
 
                // handle "good" browsers
520
 
                } else {
521
 
                        return $(document).height() + 'px';
522
 
                }
523
 
        },
524
 
        
525
 
        width: function() {
526
 
                // handle IE 6
527
 
                if ($.browser.msie && $.browser.version < 7) {
528
 
                        var scrollWidth = Math.max(
529
 
                                document.documentElement.scrollWidth,
530
 
                                document.body.scrollWidth
531
 
                        );
532
 
                        var offsetWidth = Math.max(
533
 
                                document.documentElement.offsetWidth,
534
 
                                document.body.offsetWidth
535
 
                        );
536
 
                        
537
 
                        if (scrollWidth < offsetWidth) {
538
 
                                return $(window).width() + 'px';
539
 
                        } else {
540
 
                                return scrollWidth + 'px';
541
 
                        }
542
 
                // handle Opera
543
 
                } else if ($.browser.opera) {
544
 
                        return Math.max(
545
 
                                window.innerWidth,
546
 
                                $(document).width()
547
 
                        ) + 'px';
548
 
                // handle "good" browsers
549
 
                } else {
550
 
                        return $(document).width() + 'px';
551
 
                }
552
 
        },
553
 
        
554
 
        resize: function() {
555
 
                /* If the dialog is draggable and the user drags it past the
556
 
                 * right edge of the window, the document becomes wider so we
557
 
                 * need to stretch the overlay. If the user then drags the
558
 
                 * dialog back to the left, the document will become narrower,
559
 
                 * so we need to shrink the overlay to the appropriate size.
560
 
                 * This is handled by shrinking the overlay before setting it
561
 
                 * to the full document size.
562
 
                 */
563
 
                var $overlays = $([]);
564
 
                $.each($.ui.dialog.overlay.instances, function() {
565
 
                        $overlays = $overlays.add(this);
566
 
                });
567
 
                
568
 
                $overlays.css({
569
 
                        width: 0,
570
 
                        height: 0
571
 
                }).css({
572
 
                        width: $.ui.dialog.overlay.width(),
573
 
                        height: $.ui.dialog.overlay.height()
574
 
                });
575
 
        }
576
 
});
577
 
 
578
 
$.extend($.ui.dialog.overlay.prototype, {
579
 
        destroy: function() {
580
 
                $.ui.dialog.overlay.destroy(this.$el);
581
 
        }
582
 
});
583
 
 
584
 
})(jQuery);