| Index: trunk/extensions/SemanticForms/libs/SF_popupform.js |
| — | — | @@ -57,15 +57,18 @@ |
| 58 | 58 | var background; |
| 59 | 59 | var container; |
| 60 | 60 | var iframe; |
| | 61 | + var content; |
| 61 | 62 | var waitIndicator; |
| 62 | 63 | var instance = 0; |
| 63 | 64 | |
| 64 | 65 | var doc; |
| 65 | | - var docWidth; |
| 66 | | - var docHeight; |
| | 66 | +// var docW; |
| | 67 | +// var docH; |
| 67 | 68 | |
| 68 | 69 | var brokenBrowser, brokenChrome; |
| 69 | 70 | |
| | 71 | + var padding = 20; |
| | 72 | + |
| 70 | 73 | function handlePopupFormInput( ptarget, elem ) { |
| 71 | 74 | |
| 72 | 75 | showForm(); |
| — | — | @@ -204,7 +207,7 @@ |
| 205 | 208 | container.show(); |
| 206 | 209 | |
| 207 | 210 | // GuMaxDD has #content but keeps headlines in #gumax-content-body |
| 208 | | - var content = iframecontents.find("#gumax-content-body"); |
| | 211 | + content = iframecontents.find("#gumax-content-body"); |
| 209 | 212 | |
| 210 | 213 | // normal skins use #content (e.g. Vector, Monobook) |
| 211 | 214 | if ( content.length == 0 ) content = iframecontents.find("#content"); |
| — | — | @@ -220,11 +223,12 @@ |
| 221 | 224 | var siblings = content |
| 222 | 225 | .css( { |
| 223 | 226 | margin: 0, |
| 224 | | - padding: "1em", |
| | 227 | + padding: padding, |
| 225 | 228 | width: "auto", |
| 226 | 229 | height: "auto", |
| 227 | 230 | minWidth: "0px", |
| 228 | | - minHeight:"0px" |
| | 231 | + minHeight:"0px", |
| | 232 | + overflow: "visible" |
| 229 | 233 | } ) |
| 230 | 234 | .parents().css( { |
| 231 | 235 | margin: 0, |
| — | — | @@ -232,7 +236,8 @@ |
| 233 | 237 | width: "auto", |
| 234 | 238 | height: "auto", |
| 235 | 239 | minWidth: "0px", |
| 236 | | - minHeight:"0px" |
| | 240 | + minHeight:"0px", |
| | 241 | + overflow: "visible" |
| 237 | 242 | }) |
| 238 | 243 | .andSelf().siblings(); |
| 239 | 244 | |
| — | — | @@ -276,37 +281,15 @@ |
| 277 | 282 | //.children().css("position", "static"); |
| 278 | 283 | } |
| 279 | 284 | |
| 280 | | - // find content document |
| 281 | | - doc = iframe[0].contentWindow || iframe[0].contentDocument; |
| | 285 | +// // find content document |
| | 286 | +// doc = iframe[0].contentWindow || iframe[0].contentDocument; |
| | 287 | +// |
| | 288 | +// if (doc.document) { |
| | 289 | +// doc = doc.document; |
| | 290 | +// } |
| 282 | 291 | |
| 283 | | - if (doc.document) { |
| 284 | | - doc = doc.document; |
| 285 | | - } |
| | 292 | + container.show(); |
| 286 | 293 | |
| 287 | | - // first try if the content enforces its dimensions (e.g. GuMaxDD) |
| 288 | | - docWidth = content.outerWidth(true); |
| 289 | | - docHeight = content.outerHeight(true); |
| 290 | | - |
| 291 | | - // then try if it grows to its dimensions given enough space (e.g. Vector) |
| 292 | | - var origPos = content[0].style.position; |
| 293 | | - content[0].style.position = "fixed"; |
| 294 | | - |
| 295 | | - if ( content.outerWidth(true) > docWidth || content.outerHeight(true) > docHeight ) { |
| 296 | | - docWidth = content.outerWidth(true); |
| 297 | | - docHeight = content.outerHeight(true); |
| 298 | | - } |
| 299 | | - |
| 300 | | - content[0].style.position = origPos; |
| 301 | | - |
| 302 | | - // default for broken browsers |
| 303 | | - if ( docWidth == 0 || docHeight == 0 ) { |
| 304 | | - |
| 305 | | - docWidth = jQuery(window).width(); |
| 306 | | - docHeight = jQuery(window).height(); |
| 307 | | - |
| 308 | | - } |
| 309 | | - |
| 310 | | - |
| 311 | 294 | // adjust frame size to dimensions just calculated |
| 312 | 295 | adjustFrameSize(); |
| 313 | 296 | |
| — | — | @@ -465,46 +448,109 @@ |
| 466 | 449 | |
| 467 | 450 | function adjustFrameSize() { |
| 468 | 451 | |
| 469 | | - var availW = jQuery(window).width(); |
| 470 | | - var availH = jQuery(window).height(); |
| | 452 | + // Inputs |
| 471 | 453 | |
| 472 | | - var w, h; |
| | 454 | + var availW = Math.floor( jQuery(window).width() * .8 ); |
| | 455 | + var availH = Math.floor( jQuery(window).height() * .8 ); |
| 473 | 456 | |
| 474 | | - // Standard max height/width is 80% of viewport, but we will allow |
| 475 | | - // up to 85% to avoid scrollbars with nearly nothing to scroll |
| 476 | | - if ( docWidth > availW * .85 || docHeight > availH * .85 ) { |
| | 457 | + var emergencyW = Math.floor( jQuery(window).width() * .85 ); |
| | 458 | + var emergencyH = Math.floor( jQuery(window).height() * .85 ); |
| 477 | 459 | |
| 478 | | - iframe[0].style.overflow = "auto"; |
| | 460 | + // FIXME: these might not be the true values |
| | 461 | + var scrollW = 20; |
| | 462 | + var scrollH = 20; |
| 479 | 463 | |
| 480 | | - // For now, just ignore docWidth and docHeight - at |
| 481 | | - // least on Vector, they're getting set to values |
| 482 | | - // that are far too small. |
| 483 | | - // TODO: fix this |
| 484 | | - //if ( docWidth > availW * .85 ) { |
| 485 | | - w = ( availW * .8 ); |
| 486 | | - //} else { |
| 487 | | - // w = docWidth + 20; |
| 488 | | - //} |
| 489 | 464 | |
| 490 | | - //if ( docHeight > availH * .85 ) { |
| 491 | | - h = ( availH * .8 ); |
| 492 | | - //} else { |
| 493 | | - // h = docHeight + 20; |
| 494 | | - //} |
| | 465 | + // find the dimensions of the document |
| 495 | 466 | |
| | 467 | + // set max dimensions for layout of content |
| | 468 | + container |
| | 469 | + .width( emergencyW ) |
| | 470 | + .height( emergencyH ); |
| | 471 | + |
| | 472 | + var origPos = content[0].style.position; // save original positioning |
| | 473 | + content[0].style.position = "fixed"; |
| | 474 | + |
| | 475 | + // initiate layout |
| | 476 | + content |
| | 477 | + .width( 'auto' ) |
| | 478 | + .height( 'auto' ); |
| | 479 | + |
| | 480 | + // get dimension values |
| | 481 | + var docW = content.width(); |
| | 482 | + var docH = content.height(); |
| | 483 | + |
| | 484 | + var docpW = docW + 2 * padding; |
| | 485 | + var docpH = docH + 2 * padding; |
| | 486 | + |
| | 487 | + content[0].style.position = origPos; // reset original positioning |
| | 488 | + |
| | 489 | + // Flags |
| | 490 | + |
| | 491 | + var needsHScroll = docpW > emergencyW || ( docpW > emergencyW - scrollW && docpH > emergencyH ); |
| | 492 | + var needsVScroll = docpH > emergencyH || ( docpH > emergencyH - scrollH && docpW > emergencyW ); |
| | 493 | + |
| | 494 | + var needsWStretch = |
| | 495 | + ( docpW > availW && docpW <= emergencyW ) && ( docpH <= emergencyH ) || |
| | 496 | + ( docpW > availW - scrollW && docpW <= emergencyW - scrollW ) && ( docpH > emergencyH ); |
| | 497 | + |
| | 498 | + var needsHStretch = |
| | 499 | + ( docpH > availH && docpH <= emergencyH ) && ( docpW <= emergencyW ) || |
| | 500 | + ( docpH > availH - scrollH && docpH <= emergencyH - scrollH ) && ( docpW > emergencyW ); |
| | 501 | + |
| | 502 | + // Outputs |
| | 503 | + |
| | 504 | + var frameW; |
| | 505 | + var frameH; |
| | 506 | + |
| | 507 | + var contW; |
| | 508 | + var contH; |
| | 509 | + |
| | 510 | + if ( needsWStretch ) { |
| | 511 | + contW = docW; |
| | 512 | + frameW = docpW; |
| | 513 | + } else if ( docpW > availW ) { // form does not even fit with stretching |
| | 514 | + contW = docW; |
| | 515 | + frameW = availW; |
| 496 | 516 | } else { |
| 497 | | - iframe[0].style.overflow = "hidden"; |
| 498 | | - w = docWidth; |
| 499 | | - h = docHeight; |
| | 517 | + //contW = Math.max( Math.min( 1.5 * docW, availW ), availW / 2 ); |
| | 518 | + contW = docW; |
| | 519 | + frameW = docpW; |
| 500 | 520 | } |
| 501 | 521 | |
| | 522 | + if ( needsVScroll ){ |
| | 523 | + frameW += scrollW; |
| | 524 | + } |
| | 525 | + |
| | 526 | + if ( needsHStretch ) { |
| | 527 | + contH = docH; |
| | 528 | + frameH = docpH; |
| | 529 | + } else if ( docpH > availH ) { // form does not even fit with stretching |
| | 530 | + contH = docH; |
| | 531 | + frameH = availH; |
| | 532 | + } else { |
| | 533 | + //contH = Math.min( 1.1 * docH, availH); |
| | 534 | + contH = docH; |
| | 535 | + frameH = docpH; |
| | 536 | + } |
| | 537 | + |
| | 538 | + if ( needsHScroll ){ |
| | 539 | + frameH += scrollH; |
| | 540 | + } |
| | 541 | + |
| 502 | 542 | with ( container[0].style ) { |
| 503 | | - width = ( w ) + "px"; |
| 504 | | - height = ( h ) + "px"; |
| 505 | | - top = (( - h ) / 2) + "px"; |
| 506 | | - left = (( - w ) / 2) + "px"; |
| 507 | | - } |
| | 543 | + top = (( - frameH ) / 2) + "px"; |
| | 544 | + left = (( - frameW ) / 2) + "px"; |
| | 545 | + } |
| 508 | 546 | |
| | 547 | + container |
| | 548 | + .width( frameW ) |
| | 549 | + .height ( frameH ) |
| | 550 | + |
| | 551 | + content |
| | 552 | + .width ( contW ) |
| | 553 | + .height ( contH ); |
| | 554 | + |
| 509 | 555 | } |
| 510 | 556 | |
| 511 | 557 | function closeFrameAndFollowLink( link ){ |