Issue 307 in iui: Event beforetransition fires before page has layout

[i...@googlecode.com]

Status: New
Owner: ----

New issue 307 by san0f...@gmail.com: Event beforetransition fires before
page has layout
http://code.google.com/p/iui/issues/detail?id=307

Internal page components that need to resize before a transition, do not
have an event to do so. An example is a map that loads in a secondary page,
and cannot determine its size since the page has no layout.

beforetransition event happens when the page’s display=none, so there is no
layout and components cannot resize.
aftertransition event is too late, the user will see the components change
size.

A solution is to move beforetransition after the call to
toPage.setAttribute("selected", "true");
Then we don't need a new event.
It seems to me that this is the right place for the event, but I am only
looking at it from my application's point of view.

An alternative is to add a new event:
toPage.setAttribute("selected", "true");
toPage.style.webkitTransitionDuration = ''; // Turn transitions back on
//MOD: Added new event to resize elements after layout, before transition
(page has layout but is outside of the viewport)
sendEvent("afterSelected", toPage);

At this phase the new page has display=block, so it has layout.
Internal components of the page can resize before the transition, so the
user only sees them in the final size.

[i...@googlecode.com]

Updates:
Labels: Milestone-REL-0.40

Comment #1 on issue 307 by msgilli...@gmail.com: Event beforetransition

fires before page has layout
http://code.google.com/p/iui/issues/detail?id=307

You know this one is really relevant to iUI 0.40. We're trying to create
an API (or, actually, event model) for iUI extensions. I experimented with
a bunch of them myself and have refined the events somewhat.

It looks like I may have missed something.

Can you provide an example and tell me how to reproduce this one?

[i...@googlecode.com]

Comment #2 on issue 307 by san0f...@gmail.com: Event beforetransition fires

before page has layout
http://code.google.com/p/iui/issues/detail?id=307

A use case:
Create an iui html page with two internal screens. Page1 is selected and
has a link to page2. Page2 has a google map with 100% width/height.

Add a listener on page2:
function onDeviceReady () {

var map = // new google map

document.getElementById ('Page2')
.addEventListener("beforetransition",
function(){google.maps.event.trigger(tour.map, 'resize');},
false);
};
window.addEventListener('load', onDeviceReady, false);

Now run the page and click on the link from page1 to page2. The map
normally does not resize. While on page2 flip the phone from portrait to
landscape. Now notice the map resizes, since it has the dimensions of the
parent.

Now move the code that fires beforetransition a couple of lines below,
after toPage.setAttribute("selected", "true"). It should work flawlessly
there.

This happens with the function slide2(). I am not sure whether this issue
exists with slide1()

[i...@googlecode.com]

Updates:
Owner: msgilli...@gmail.com

Comment #3 on issue 307 by msgilli...@gmail.com: Event beforetransition

fires before page has layout
http://code.google.com/p/iui/issues/detail?id=307

(No comment was entered for this change.)