Have a custom slide animation

[GoogleCodeExporter]

Nice enhancement: specify a custom slide animation

Implementation:
window.iui =
{

    customSlideAnimation: undefined,
....
}

function slidePages(fromPage, toPage, backwards)
{        
    var axis = (backwards ? fromPage : toPage).getAttribute("axis");

    clearInterval(checkTimer);

    sendEvent("beforetransition", fromPage, {out:true});
    sendEvent("beforetransition", toPage, {out:false});

    if(iui.customSlideAnimation){
        iui.customSlideAnimation(fromPage, toPage, backwards, axis, slideDone);
    }   
    else if (canDoSlideAnim() && axis != 'y')
    {
      slide2(fromPage, toPage, backwards, slideDone);
    }
    else
    {
      slide1(fromPage, toPage, backwards, axis, slideDone);
    }

    function slideDone()
    {
      if (!hasClass(toPage, "dialog"))
          fromPage.removeAttribute("selected");
      checkTimer = setInterval(checkOrientAndLocation, 300);
      setTimeout(updatePage, 0, toPage, fromPage);
      fromPage.removeEventListener('webkitTransitionEnd', slideDone, false);
      sendEvent("aftertransition", fromPage, {out:true});
      sendEvent("aftertransition", toPage, {out:false});
      if (backwards) sendEvent("unload", fromPage); // EVENT: UNLOAD
    }
}

Example of use:

window.iui.customSlideAnimation = function(fromPage, toPage, backwards, axis, 
cb){
                    scrollTo(0, 1);
                    toPage.setAttribute("selected", "true");

                    if (axis == "y"){
                        backwards ? fromPage.style.top = "0%" : toPage.style.top = "100%";

                    } else {
                        fromPage.style.left = backwards ? "100%" : "-100%"; 
                        toPage.style.left = "0%"; 
                    }

                    cb();
                };

Original issue reported on code.google.com by roche....@gmail.com on 9 Nov 2010 at 2:56