senchalabs / jQTouch

Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).
http://www.jqtouch.com/
MIT License
2.79k stars 592 forks source link

Added feature to go back an arbitrary number of pages at once. #510

Closed tladesignz closed 10 years ago

tladesignz commented 10 years ago

The change makes it possible to jump back more than one step at once and is sometimes needed, e.g. in a game, when after the user finishes the game page, he gets forwarded to a "finished" page and after that should get back directly to the level select page.

Having this feature keeps the history in order and enables proper animation direction.

Use it like this:

Back

in JS:

jQT.goBack('#old');

A.t.m. this only handles internal targets. Please improve where you see fit!

Kind regards,

Benjamin

thomasyip commented 10 years ago

Thanks @tladesignz,

I was about to start working on it, and I wrote the test (warning: untested test).

Does go back with integer1 implies going back twice? Or, just one?

    jqt.goBack(1) ==> jqt.goBack(); jqt.goBack()

Can you include it in your pull request? Here is the test:

// ./test/unit/page-navigation.html (line 318)


    asyncTest('Test Page Navigation and Back with param', function(t) {
      expect(9);

      start();
      try {
        var jqt = new $.jQT({updateHash: false});

        // initial condition
        ok($('#home').hasClass('current'));

        // go to a link with animation as param
        jqt.goTo('#animations');
        jqt.goTo('#ui');

        // verify
        ok(!$('#home').hasClass('current'));
        ok($('#ui').hasClass('current'));
        stop();

        // wait for page transition
        setTimeout(function() {
          start();
          jqt.goBack('#home');

          // verify
          ok($('#home').hasClass('current'), '#home has .current class');
          ok(!$('#animations').hasClass('current'), '#animations has no .current class');
          ok(!$('#ui').hasClass('current'), '#ui has no .current class');

          stop();
          setTimeout(function() {
            start();

            // go to a link with animation as param
            jqt.goTo('#ui');
            jqt.goTo('#animations');

            stop();
            setTimeout(function() {
              start();
              jqt.goBack(1);

              ok($('#home').hasClass('current'));
              ok(!$('#ui').hasClass('current'));
              ok(!$('#animations').hasClass('current'));
            }, 550);
          }, 550);
        }, 550);
      } catch (e) {
        console.error(e);
        ok(false, 'Init failed');
      }
    });
tladesignz commented 10 years ago

Hi Thomas, thanks for the test, that helped a lot in getting quickly into the test infrastructure! The idea of using a number as argument is good, I did not intend this, originally, but added it now.

I thought about it and suggest the following on how this should work:

goBack() == goBack(1) == goBack(-1) == goBack(0)

goBack(-2) == goBack(2)

So: negative and positive values have the same meaning, because in a method named "goBack" there should always be only one direction: the back direction. Forward would be impossible, anyway, since the forward history gets dropped.

Using 1 as argument is the same as not using it (default behaviour), which is: just go back 1 step.

Using 0 as argument is a special case: It could be implemented as no-op (not going anywhere), but why would you call goBack in the first place, then? Hard to decide. No-op would be the more "proper" behaviour, but is properly not what the programmer wanted to do?

Thank you very much, anyway! I like your maintaining style!

Cheers,

Benjamin

thomasyip commented 10 years ago

I am thinking that negative should mean starting from the begining of the history, and perhaps, we use zero base index: 1 means 2nd item. Otherwise, we have a lot of special cases.

tladesignz commented 10 years ago

Like this better?

thomasyip commented 10 years ago

Thanks for updating the CL. Will get to there as soon as I can.

thomasyip commented 10 years ago

Merged with command line.

tladesignz commented 10 years ago

Excellent! Thank you!