Permalink
Browse files

Popup: Correctly enhance popup and its contents before opening

This is a better fix than the one provided in the original PR for this, because
it avoids the use of .enhanceWithin(), and it moves the image width/height
retrieval to popupbeforeposition, which is correct, because during creation the
popup is truncated to 1px x 1px.

Closes gh-7290
Fixes gh-7336
  • Loading branch information...
gabrielschulhof committed Apr 23, 2014
1 parent 2eb11cb commit b8431e190ae40968ed55b3cc5b8bf2cf274937a9
Showing with 19 additions and 7 deletions.
  1. +19 −7 demos/popup-dynamic/index.php
@@ -22,22 +22,27 @@
closebtn = '<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>',
header = '<div data-role="header"><h2>' + brand + ' ' + model + '</h2></div>',
img = '<img src="../_assets/img/' + short + '.jpg" alt="' + brand + '" class="photo">',
- popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15">' + closebtn + header + img + '</div>';
+ popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15"></div>';
+
+ // Create the popup.
+ $( header )
+ .appendTo( $( popup )
+ .appendTo( $.mobile.activePage )
+ .popup() )
+ .toolbar()
+ .before( closebtn )
+ .after( img );
- // Create the popup. Trigger "pagecreate" instead of "create" because currently the framework doesn't bind the enhancement of toolbars to the "create" event (js/widgets/page.sections.js).
- $.mobile.activePage.append( popup ).trigger( "pagecreate" );
// Wait with opening the popup until the popup image has been loaded in the DOM.
// This ensures the popup gets the correct size and position
$( ".photo", "#popup-" + short ).load(function() {
- var height = $( this ).height(),
- width = $( this ).width();
- // Set height and width attribute of the image
- $( this ).attr({ "height": height, "width": width });
// Open the popup
$( "#popup-" + short ).popup( "open" );
+
// Clear the fallback
clearTimeout( fallback );
});
+
// Fallback in case the browser doesn't fire a load event
var fallback = setTimeout(function() {
$( "#popup-" + short ).popup( "open" );
@@ -46,6 +51,13 @@
// Set a max-height to make large images shrink to fit the screen.
$( document ).on( "popupbeforeposition", ".ui-popup", function() {
+ var image = $( this ).children( "img" ),
+ height = image.height(),
+ width = image.width();
+
+ // Set height and width attribute of the image
+ $( this ).attr({ "height": height, "width": width });
+
// 68px: 2 * 15px for top/bottom tolerance, 38px for the header.
var maxHeight = $( window ).height() - 68 + "px";

0 comments on commit b8431e1

Please sign in to comment.