1 /*
  2  * jQuery UI dialogOptions v1.0
  3  * @desc extending jQuery Ui Dialog - Responsive, click outside, class handling
  4  * @author Jason Day
  5  *
  6  * Dependencies:
  7  *		jQuery: http://jquery.com/
  8  *		jQuery UI: http://jqueryui.com/
  9  *		Modernizr: http://modernizr.com/
 10  *
 11  * MIT license:
 12  *              http://www.opensource.org/licenses/mit-license.php
 13  *
 14  * (c) Jason Day 2014
 15  *
 16  * New Options:
 17  *  clickOut: true          // closes dialog when clicked outside
 18  *  responsive: true        // fluid width & height based on viewport
 19  *                          // true: always responsive
 20  *                          // false: never responsive
 21  *                          // "touch": only responsive on touch device
 22  *  scaleH: 0.8             // responsive scale height percentage, 0.8 = 80% of viewport
 23  *  scaleW: 0.8             // responsive scale width percentage, 0.8 = 80% of viewport
 24  *  showTitleBar: true      // false: hide titlebar
 25  *  showCloseButton: true   // false: hide close button
 26  *
 27  * Added functionality:
 28  *  add & remove dialogClass to .ui-widget-overlay for scoping styles
 29  *	patch for: http://bugs.jqueryui.com/ticket/4671
 30  *	recenter dialog - ajax loaded content
 31  */
 32 
 33 /*
 34  * Some modifications: Dominik Kocuj, http://kocuj.pl/
 35  */
 36 
 37 (function($) {
 38 
 39 // add new options with default values
 40 $.ui.dialog.prototype.options.clickOut = true;
 41 $.ui.dialog.prototype.options.responsive = true;
 42 $.ui.dialog.prototype.options.scaleH = 0.8;
 43 $.ui.dialog.prototype.options.scaleW = 0.8;
 44 $.ui.dialog.prototype.options.showTitleBar = true;
 45 $.ui.dialog.prototype.options.showCloseButton = true;
 46 
 47 
 48 // extend _init
 49 var _init = $.ui.dialog.prototype._init;
 50 $.ui.dialog.prototype._init = function () {
 51     var self = this;
 52 
 53     // apply original arguments
 54     _init.apply(this, arguments);
 55 
 56     //patch
 57     if ($.ui && $.ui.dialog && $.ui.dialog.overlay) {
 58         $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function (event) {
 59            return event + '.dialog-overlay';
 60        }).join(' ');
 61     }
 62 };
 63 // end _init
 64 
 65 
 66 // extend open function
 67 var _open = $.ui.dialog.prototype.open;
 68 $.ui.dialog.prototype.open = function () {
 69     var self = this;
 70 
 71     // apply original arguments
 72     _open.apply(this, arguments);
 73 
 74     // get dialog original size on open
 75     var oHeight = self.element.parent().outerHeight(),
 76         oWidth = self.element.parent().outerWidth(),
 77         isTouch = $("html").hasClass("touch");
 78 
 79     // responsive width & height
 80     var resize = function () {
 81 
 82         // check if responsive
 83         // dependent on modernizr for device detection / html.touch
 84         if (self.options.responsive === true || (self.options.responsive === "touch" && isTouch)) {
 85             var elem = self.element,
 86                 wHeight = $(window).height(),
 87                 wWidth = $(window).width(),
 88                 dHeight = elem.parent().outerHeight(),
 89                 dWidth = elem.parent().outerWidth(),
 90                 setHeight = Math.min(wHeight * self.options.scaleH, oHeight),
 91                 setWidth = Math.min(wWidth * self.options.scaleW, oWidth);
 92 
 93             // check & set height
 94             if ((oHeight + 100) > wHeight || elem.hasClass("resizedH")) {
 95                 elem.dialog("option", "height", setHeight).parent().css("max-height", setHeight);
 96                 elem.addClass("resizedH");
 97             }
 98 
 99             // check & set width
100             if ((oWidth + 100) > wWidth || elem.hasClass("resizedW")) {
101                 elem.dialog("option", "width", setWidth).parent().css("max-width", setWidth);
102                 elem.addClass("resizedW");
103             }
104 
105             // only recenter & add overflow if dialog has been resized
106             if (elem.hasClass("resizedH") || elem.hasClass("resizedW")) {
107                 elem.dialog("option", "position", "center");
108                 elem.css("overflow", "auto");
109             }
110         }
111 
112         // add webkit scrolling to all dialogs for touch devices
113         if (isTouch) {
114             elem.css("-webkit-overflow-scrolling", "touch");
115         }
116     };
117 
118     // call resize()
119     resize();
120 
121     // resize on window resize
122     $(window).on("resize", function () {
123         resize();
124     });
125 
126     // resize on orientation change
127      if (window.addEventListener) {  // Add extra condition because IE8 doesn't support addEventListener (or orientationchange)
128         window.addEventListener("orientationchange", function () {
129             resize();
130         });
131     }
132 
133     // hide titlebar
134     if (!self.options.showTitleBar) {
135         self.uiDialogTitlebar.css({
136             "height": 0,
137             "padding": 0,
138             "background": "none",
139             "border": 0
140         });
141         self.uiDialogTitlebar.find(".ui-dialog-title").css("display", "none");
142     }
143 
144     //hide close button
145     if (!self.options.showCloseButton) {
146         self.uiDialogTitlebar.find(".ui-dialog-titlebar-close").css("display", "none");
147     }
148 
149     // close on clickOut
150     if (self.options.clickOut && !self.options.modal) {
151         // use transparent div - simplest approach (rework)
152         $('<div id="dialog-overlay"></div>').insertBefore(self.element.parent());
153         $('#dialog-overlay').css({
154             "position": "fixed",
155             "top": 0,
156             "right": 0,
157             "bottom": 0,
158             "left": 0,
159             "background-color": "transparent"
160         });
161         $('#dialog-overlay').click(function (e) {
162             e.preventDefault();
163             e.stopPropagation();
164             self.close();
165         });
166         // else close on modal click
167     } else if (self.options.clickOut && self.options.modal) {
168         $('.ui-widget-overlay').click(function (e) {
169             self.close();
170         });
171     }
172 
173     // add dialogClass to overlay
174     if (self.options.dialogClass) {
175         $('.ui-widget-overlay').addClass(self.options.dialogClass);
176     }
177 };
178 //end open
179 
180 
181 // extend close function
182 var _close = $.ui.dialog.prototype.close;
183 $.ui.dialog.prototype.close = function () {
184     var self = this;
185     // apply original arguments
186     _close.apply(this, arguments);
187 
188     // remove dialogClass to overlay
189     if (self.options.dialogClass) {
190         $('.ui-widget-overlay').removeClass(self.options.dialogClass);
191     }
192     //remove clickOut overlay
193     if ($("#dialog-overlay").length) {
194         $("#dialog-overlay").remove();
195     }
196 };
197 //end close
198 
199 }(jQuery));
200