Config - Define Page Transitions

[topa]

I think there should be equal to the possibility to define a pre-processor (#50) a possibility to define default page transitions. This could look like this.

var alamid = require("alamid);

alamid.config.setPageInTransition(function pageIn(pageNode) {

    if(alamid.detective.device.os === "Android" && alamid.detective.device.version <= "4.0.0") {
        //only slide
    } 

    if(alamid.detective.device.os === "iOS") {
        //be fancy
    }

 });

alamid.config.setPageOutTransition(function pageOut(pageNode)) {
    //something similiar like pageIn
}

@jhnns and @meaku what do you think?

[topa]

But there must be a possible to override the defaults. So the basic Page-Class must do something like this:

init: function () {
    //...
    if (typeof config.getPageInTransition() === "function") {
       this.__pageInTransition = config.getPageInTransition();
    }
    //...
}

setPageInTransistion: function (pageIn) {
     //...
    this.__pageInTransition = pageIn;
}

[meaku]

looks good.

[meaku]

you could also check if the class has a method set internally and use it if set. If there is no method defined, derive it from the config.

[topa]

But this way you have to look into the documentation and the Class is not telling you anything about the possibilities it provides - BLACK MAGIC.

[jhnns]

I think this one is more related to #49. You've convinced me of the need to introduce some sort of animator. I've opened an own issue for this discussion: #52

So if we'd use my suggested solution for animations and the solution for #50, the code would look like this:

var MyPage = new Class({
    Extends: require("alamid/Page.class.js"),
    init: function () {
        this.Super();
        // dynamically enhance DOM-elements
        // @see http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html
        jQuery(this.Super.getNode()).page();

        this.Super.setAnimations({
            create: "slideIn",
            destroy: "slideOut"
        });
    }
});

// all other pages inherit now from MyPage
var MyHomePage = new Class({
    Extends: MyPage
});

But to solve the problem with the back button (the animation has to be different in this case) we should provide own page-events. I don't know how they're called in jqm, but I would do something like pageIn, pageOut, pageBackIn, pageBackOut. There are surely better names ...

[topa]

There is no need for pageBackIn and pageBackOut. It is the same as pageIn and pageBackIn

[jhnns]

I'm not quite sure about this. Consider a slide effect:

pageIn > slide from right pageOut > slide to left

pageBackOut > slide to right pageBackIn > slide from left

Or am I wrong?

[topa]

I think that's not common. Check it out with your phone.