[5341] | 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); |
---|