1 | /* |
---|
2 | * Extension of JQuery UI Dialog widget to add custom minimizing capabilities |
---|
3 | * Written by: Ryan Curtis |
---|
4 | * |
---|
5 | */ |
---|
6 | (function($){ |
---|
7 | var _init = $.ui.dialog.prototype._init; |
---|
8 | |
---|
9 | //Optional top margin for page, wont let a user move a dialog into this spot. |
---|
10 | var topMargin = 0; |
---|
11 | |
---|
12 | //Custom Dialog Init |
---|
13 | $.ui.dialog.prototype._init = function() { |
---|
14 | var self = this; |
---|
15 | _init.apply(this, arguments); |
---|
16 | uiDialogTitlebar = this.uiDialogTitlebar; |
---|
17 | |
---|
18 | |
---|
19 | //we need two variables to preserve the original width and height so that can be restored. |
---|
20 | this.options.originalWidth = this.options.width; |
---|
21 | this.options.originalHeight = this.options.height; |
---|
22 | |
---|
23 | //save a reference to the resizable handle so we can hide it when necessary. |
---|
24 | this.resizeableHandle = this.uiDialog.resizable().find('.ui-resizable-se'); |
---|
25 | |
---|
26 | //Save the height of the titlebar for the minimize operation |
---|
27 | this.titlebarHeight = parseInt(uiDialogTitlebar.css('height')) + parseInt(uiDialogTitlebar.css('padding-top')) + parseInt(uiDialogTitlebar.css('padding-bottom')) + parseInt(this.uiDialog.css('padding-top')) + parseInt(this.uiDialog.css('padding-bottom')) ; |
---|
28 | |
---|
29 | uiDialogTitlebar.append('<a href="#"class="dialog-restore ui-dialog-titlebar-rest"><span class="ui-icon ui-icon-newwin"></span></a>'); |
---|
30 | uiDialogTitlebar.append('<a href="#" id="dialog-minimize" class="dialog-minimize ui-dialog-titlebar-min"><span class="ui-icon ui-icon-minusthick"></span></a>'); |
---|
31 | |
---|
32 | //Minimize Button |
---|
33 | this.uiDialogTitlebarMin = $('.dialog-minimize', uiDialogTitlebar).hover(function(){ |
---|
34 | $(this).addClass('ui-state-hover'); |
---|
35 | }, function(){ |
---|
36 | $(this).removeClass('ui-state-hover'); |
---|
37 | }).click(function(){ |
---|
38 | self.minimize(); |
---|
39 | return false; |
---|
40 | }); |
---|
41 | //Restore Button |
---|
42 | this.uiDialogTitlebarRest = $('.dialog-restore', uiDialogTitlebar).hover(function(){ |
---|
43 | $(this).addClass('ui-state-hover'); |
---|
44 | }, function(){ |
---|
45 | $(this).removeClass('ui-state-hover'); |
---|
46 | }).click(function(){ |
---|
47 | self.restore(); |
---|
48 | self.moveToTop(true); |
---|
49 | return false; |
---|
50 | }).hide(); |
---|
51 | |
---|
52 | |
---|
53 | //restore the minimize button on close |
---|
54 | this.uiDialog.bind('dialogbeforeclose', function(event, ui) { |
---|
55 | self.uiDialogTitlebarRest.hide(); |
---|
56 | self.uiDialogTitlebarMin.show(); |
---|
57 | }); |
---|
58 | |
---|
59 | |
---|
60 | |
---|
61 | }; |
---|
62 | //Custom Dialog Functions |
---|
63 | $.extend($.ui.dialog.prototype, { |
---|
64 | restore: function() { |
---|
65 | this.uiDialog.resizable( "option", "disabled", false ); |
---|
66 | //We want to prevent the dialog from expanding off the screen |
---|
67 | var windowHeight = $(window).height(); |
---|
68 | var dialogHeight = this.options.originalHeight; |
---|
69 | var dialogTop = parseInt(this.uiDialog.css('top')); |
---|
70 | if(dialogHeight+dialogTop > windowHeight) |
---|
71 | { |
---|
72 | //there is 22 pixels of padding at the bottom of a dialog per css file |
---|
73 | var newTop = windowHeight-dialogHeight-22; |
---|
74 | this.uiDialog.css('top',newTop); |
---|
75 | } |
---|
76 | var windowWidth = $(window).width(); |
---|
77 | var dialogWidth = this.options.originalWidth; |
---|
78 | var dialogLeft = parseInt(this.uiDialog.css('left')); |
---|
79 | if(dialogWidth+dialogLeft > windowWidth) |
---|
80 | { |
---|
81 | //there are 2 pixels of padding per css |
---|
82 | var newLeft = windowWidth-dialogWidth-2; |
---|
83 | this.uiDialog.css('left',newLeft); |
---|
84 | } |
---|
85 | this.uiDialog.css({width: this.options.originalWidth, height:this.options.originalHeight}); |
---|
86 | this.element.show(); |
---|
87 | |
---|
88 | this.resizeableHandle.show(); |
---|
89 | this.uiDialogTitlebarRest.hide(); |
---|
90 | this.uiDialogTitlebarMin.show(); |
---|
91 | }, |
---|
92 | minimize: function() { |
---|
93 | //Store the original height/width |
---|
94 | this.uiDialog.resizable( "option", "disabled", true ); |
---|
95 | this.options.originalWidth = this.options.width; |
---|
96 | this.options.originalHeight = this.options.height; |
---|
97 | |
---|
98 | this.uiDialog.animate({width: 200, height:this.titlebarHeight},200); |
---|
99 | this.element.hide(); |
---|
100 | |
---|
101 | this.uiDialogTitlebarMin.hide(); |
---|
102 | this.uiDialogTitlebarRest.show(); |
---|
103 | this.resizeableHandle.hide(); |
---|
104 | } |
---|
105 | }); |
---|
106 | })(jQuery); |
---|