1 2(function( $ ) { 3 4 $.widget( "shout.suidialog", $.ui.dialog, 5 { 6 options: 7 { 8 clickOut: true, 9 fluid: false, 10 showTitleBar: true, 11 showCloseButton: true, 12 position: { 13 my: "center", 14 at: "center", 15 of: window, 16 collision: "fit", 17 using: function(pos) { 18 var topOffset = $(this).css(pos).offset().top; 19 var leftOffset = $(this).css(pos).offset().left; 20 21 if (topOffset < 0) { 22 $(this).css('top', pos.top - topOffset); 23 } 24 // hack: put the dialog back into the center of the screen 25 else if (topOffset != pos.top || leftOffset != pos.left) 26 { 27 $(this).css('top',topOffset); 28 $(this).css('left',leftOffset); 29 } 30 } 31 }, 32 size: 33 { 34 using: null, 35 }, 36 }, 37 38 _title: function(title) 39 { 40 if (this.options.title instanceof jQuery) 41 { 42 title.empty(); 43 title.append(this.options.title); 44 } 45 else 46 { 47 this._super(title); 48 } 49 }, 50 51 _create: function () 52 { 53 var self = this; 54 55 // apply original arguments 56 this._superApply(arguments); 57 58 //patch 59 if ($.ui && $.ui.suidialog && $.ui.suidialog.overlay) 60 { 61 $.ui.suidialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function (event) 62 { 63 return event + '.dialog-overlay'; 64 } 65 ).join(' '); 66 } 67 68 self._initSizer(); 69 }, 70 71 _setOption: function( key, value ) 72 { 73 this._super( key, value ); 74 75 if ('size' === key) 76 { 77 this._initSizer(); 78 } 79 }, 80 81 _initSizer: function() { 82 83 var self = this; 84 85 if ( typeof this.options.size.using === "undefined" 86 || this.options.size.using === null) 87 { 88 this._sizer = function(sizes) 89 { 90 //console.log('sizer is called', sizes); 91 var isTouch = $("html").hasClass("touch"); 92 93 if (self.options.fluid === false) 94 { 95 return; 96 } 97 98 if (self.options.fluid === 'touch' && !isTouch) 99 { 100 return; 101 } 102 103 var maxHeight = Math.min( 104 sizes.height.window - 48, 105 sizes.height.dialog 106 ); 107 var maxWidth = Math.min( 108 sizes.width.window - 48, 109 sizes.width.dialog 110 ); 111 112// var minHeight = Math.min( 113// sizes.height.c, 114// fminHeight, 115// ); 116// var minWidth = Math.min( 117// sizes.width.c, 118// fminWidth, 119// ); 120 121 self.options.maxWidth = maxWidth; 122 self.options.maxHeight = maxHeight; 123 124// self.options.minWidth = minWidth; 125// self.options.minHeight = minHeight; 126// 127// self.options.width = self.options.minWidth; 128 }; 129 } 130 else if ( typeof this.options.size.using === "function" ) 131 { 132 this._sizer = this.options.size.using; 133 } 134 else 135 { 136 throw 'wut'; 137 } 138 139 }, 140 141 // note: this function might cause side effects and should only be called from within _size 142 _getSizes: function() 143 { 144 var self = this; 145 146 var sizes, tempElement, tempDialog; 147 148 sizes = { 149 width: { 150 open_element: self.oWidth, 151 current_dialog: self.uiDialog.outerHeight(), 152 window: $(window).width(), 153 }, 154 height: { 155 open_element: self.oHeight, 156 current_dialog: self.uiDialog.outerWidth(), 157 window: $(window).height(), 158 }, 159 }; 160 161 // tempElement = self.element.css(['display', 'width', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'height']); // returns modified properties... no good... 162 tempElement = { 163 display: this.element[ 0 ].style.display, 164 165 width: this.element[ 0 ].style.width, 166 minWidth: this.element[ 0 ].style.minWidth, 167 maxWidth: this.element[ 0 ].style.maxWidth, 168 minHeight: this.element[ 0 ].style.minHeight, 169 maxHeight: this.element[ 0 ].style.maxHeight, 170 height: this.element[ 0 ].style.height 171 }; 172 173 // resets the css of the content so we can determine real dimensions 174 self.element.show().css( { 175 width: "auto", 176 minHeight: 0, 177 maxHeight: "none", 178 minWidth: 0, 179 maxWidth: "none", 180 height: "auto", 181 } ); 182 183 184 // tempDialog = self.element.css(['width', 'height']); // returns modified properties... no good... 185 tempDialog = { 186 width: self.uiDialog[ 0 ].style.width, 187 height: self.uiDialog[ 0 ].style.height 188 }; 189 190 // resets the css of the dialog so we can determine real dimensions 191 self.uiDialog.show().css( { 192 width: "auto", 193 height: "auto", 194 } ); 195 196 sizes.height.dialog = self.uiDialog.outerHeight(), 197 sizes.width.dialog = self.uiDialog.outerWidth(), 198 199 sizes.height.content = self.element.outerHeight(), 200 sizes.width.content = self.element.outerWidth(); 201 202// self.uiDialog.css( { 203// width: this.options.width, 204// height: "auto", 205// } ); 206 207 self.uiDialog.css( tempDialog ); 208 self.element.css( tempElement ); 209 210 return sizes; 211 }, 212 213 _size: function () 214 { 215 var self = this; 216 217 var sizes = self._getSizes() 218 self._sizer(sizes); 219 220 // apply original arguments 221 this._superApply(arguments); 222 }, 223 224 open: function () 225 { 226 var self = this; 227 228 // apply original arguments 229 this._superApply(arguments); 230 231 // get dialog original size on open 232 self.oHeight = self.uiDialog.outerHeight(); 233 self.oWidth = self.uiDialog.outerWidth(); 234 235 var isTouch = $("html").hasClass("touch"); 236 237 // add webkit scrolling to all dialogs for touch devices 238 if (isTouch) 239 { 240 self.element.css("-webkit-overflow-scrolling", "touch"); 241 } 242 243 // fluid width & height 244 var resize = function() 245 { 246 self._size(); // size 247 self._position(); // position 248 }; 249 250 // call resize() 251 resize(); 252 253 // resize when contents resize 254 if ("ResizeObserver" in window) 255 { 256 if (!this._resizeObserver) 257 { 258 this._resizeObserver = new ResizeObserver( 259 function (entries) 260 {
261 entries.forEach( 262 function (entry) 263 { 264 resize(); 265 } 266 ); 267 } 268 ); 269 270 this._resizeObserver.observe(this.element.get(0)); 271 272// this._resizeObserver.observe(document.scrollingElement); 273// this._resizeObserver.observe(this.uiDialog[0]); 274 275 this.element.children().each( 276 function () 277 { 278 self._resizeObserver.observe(this); 279 } 280 ); 281 } 282 283 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 284 if (MutationObserver && !this._mutationObserver) 285 { 286 this._mutationObserver = new MutationObserver( 287 function (mutations) 288 { 289 mutations.forEach( 290 function (mutation) 291 { 292 self.element.children().each( 293 function () 294 { 295 self._resizeObserver.unobserve(this); 296 self._resizeObserver.observe(this); 297 } 298 ); 299 } 300 ); 301 } 302 ); 303 304 var observerConfig = { 305 childList: true, 306 attributes: false, 307 subtree: false, 308 characterData: false, 309 attributeOldValue: false, 310 characterDataOldValue: false//, 311// attributeFilter: [], 312 }; 313 314 this._mutationObserver.observe(this.element.get(0), observerConfig); 315 } 316 317 318 } 319 320 // resize on window resize 321 this._on(window, { 322 resize: _.debounce( 323 function () 324 { 325 resize(); 326 } 327 ), 328 orientationchange: function() 329 { 330 resize(); 331 } 332 }); 333 334 // hide titlebar 335 if (!self.options.showTitleBar) 336 { 337 self.uiDialogTitlebar.css({ 338 "height": 0, 339 "padding": 0, 340 "background": "none", 341 "border": 0 342 }); 343 self.uiDialogTitlebar.find(".ui-dialog-title").css("display", "none"); 344 } 345 346 //hide close button 347 if (!self.options.showCloseButton) 348 { 349 self.uiDialogTitlebar.find(".ui-dialog-titlebar-close").css("display", "none"); 350 } 351 352 // close on clickOut 353 if (self.options.clickOut && !self.options.modal) 354 { 355 // use transparent div - simplest approach (rework) 356 $('<div id="dialog-overlay"></div>').insertBefore(self.element.parent()); 357 358 $('#dialog-overlay').css({ 359 "position": "fixed", 360 "top": 0, 361 "right": 0, 362 "bottom": 0, 363 "left": 0, 364 "background-color": "transparent" 365 }); 366 367 $('#dialog-overlay').click(function (e) { 368 e.preventDefault(); 369 e.stopPropagation(); 370 self.close(); 371 }); 372 // else close on modal click 373 } 374 else if (self.options.clickOut && self.options.modal) 375 { 376 $('.ui-widget-overlay').click(function (e) { 377 self.close(); 378 }); 379 } 380 381 // add dialogClass to overlay 382 if (self.options.dialogClass) 383 { 384 $('.ui-widget-overlay').addClass(self.options.dialogClass); 385 } 386 }, 387 388 close: function () 389 { 390 var self = this; 391 // apply original arguments 392 this._superApply(arguments); 393 394 if (this._mutationObserver) 395 { 396 this._mutationObserver.disconnect(); 397 this._mutationObserver = null; 398 } 399 400 if (this._resizeObserver) 401 { 402 this._resizeObserver.disconnect(); 403 this._resizeObserver = null; 404 } 405 406 self._off($(window), 'resize'); 407 self._off($(window), 'orientationchange'); 408 409 // remove dialogClass to overlay 410 if (self.options.dialogClass) { 411 $('.ui-widget-overlay').removeClass(self.options.dialogClass); 412 } 413 //remove clickOut overlay 414 if ($("#dialog-overlay").length) { 415 $("#dialog-overlay").remove(); 416 } 417 }, 418 419 _destroy: function() 420 { 421 var self = this; 422 // apply original arguments 423 this._superApply(arguments); 424 425 if (this._mutationObserver) 426 { 427 this._mutationObserver.disconnect(); 428 this._mutationObserver = null; 429 } 430 431 if (this._resizeObserver) 432 { 433 this._resizeObserver.disconnect(); 434 this._resizeObserver = null; 435 } 436 } 437 } 438); 439 440})( jQuery );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.