How To Add 'Back' Parameter on Slide Transition?

Question

I'm using Intel's AppFramework and I have this code :

<div title="welcome" id="login" class="panel" selected="true">
<!-- some code here -->
<a href="#register" class="soc-btn gray-btn left" data-transition="slide">Sign Up</a>
<!-- some code here -->
</div

<div title="register" id="register" class="panel">
<!-- some code here -->
<a href="#login" class="soc-btn gray-btn left" data-transition="slide">Cancel</a>
<!-- some code here -->
</div>

the transition from #login to #register works like a charm, page loaded from right-to-left. but how to apply 'slide-back' transition make 'cancel' button on #register to load #login from left-to-right?

I saw on ui/transition/all.js documentation :

Initiate a sliding transition. This is a sample to show how transitions are implemented. 
These are registered in $ui.availableTransitions and take in three parameters.    
@param {Object} previous panel    
@param {Object} current panel    
@param {Boolean} go back    
@title $ui.slideTransition(previousPanel,currentPanel,goBack);

but how to add 'goBack' parameter into my code? thank you

here's the complete code of the slide transition :

(function ($ui) {

    /**
     * Initiate a sliding transition.  This is a sample to show how transitions are implemented.  These are registered in $ui.availableTransitions and take in three parameters.
     * @param {Object} previous panel
     * @param {Object} current panel
     * @param {Boolean} go back
     * @title $ui.slideTransition(previousPanel,currentPanel,goBack);
     */
    function slideTransition(oldDiv, currDiv, back) {

        oldDiv.style.display = "block";
        currDiv.style.display = "block";
        var that = this;
        if (back) {
            that.css3animate(oldDiv, {
                x: "0%",
                y: "0%",
                complete: function () {
                    that.css3animate(oldDiv, {
                        x: "100%",
                        time: $ui.transitionTime,
                        complete: function () {
                            that.finishTransition(oldDiv, currDiv);
                        }
                    }).link(currDiv, {
                        x: "0%",
                        time: $ui.transitionTime
                    });
                }
            }).link(currDiv, {
                x: "-100%",
                y: "0%"
            });
        } else {
            that.css3animate(oldDiv, {
                x: "0%",
                y: "0%",
                complete: function () {
                    that.css3animate(oldDiv, {
                        x: "-100%",
                        time: $ui.transitionTime,
                        complete: function () {
                            that.finishTransition(oldDiv, currDiv);
                        }
                    }).link(currDiv, {
                        x: "0%",
                        time: $ui.transitionTime
                    });
                }
            }).link(currDiv, {
                x: "100%",
                y: "0%"
            });
        }
    }
    $ui.availableTransitions.slide = slideTransition;
    $ui.availableTransitions['default'] = slideTransition;
})(af.ui);

Answer 1

Is this what you are after? The third parameter of loadContent will transition from left to right if true and right to left if false

$.ui.loadContent("#Login", false, true, "slide");

or you can use

$.ui.goBack();

to go to the previous page on the back stack

Answer 2

There is no way to do this, because the back parameter is hardcoded on always false (zero, in fact).

I edited the appframework.ui.js, the last lines of checkAnchorClick().

Where it says:

//lookup for a clicked anchor recursively and fire UI own actions when applicable
var checkAnchorClick = function(e, theTarget) {
        // ...
        href = theTarget.hash.length > 0 ? theTarget.hash : href;
        $.ui.loadContent(href, resetHistory, 0, mytransition, theTarget);
        return;
    }
};

I've added a new property to the HMTL called data-back, which will be set on true if you want a reverse slide transition. I also replace that magic zero for the goBack variable when calling $.ui.loadContent().

//lookup for a clicked anchor recursively and fire UI own actions when applicable
var checkAnchorClick = function(e, theTarget) {
        // ...
        href = theTarget.hash.length > 0 ? theTarget.hash : href;
        var goBack = theTarget.getAttribute("data-back") === "true" ? true : false;
        $.ui.loadContent(href, resetHistory, goBack, mytransition, theTarget);
        return;
    }
};

And remeber to add the property to your link:

<a data-back="true" href="#login" class="soc-btn gray-btn left" data-transition="slide">Cancel</a>