moveTo with transition

[aronwoost]

Is there a way to tell monocle to use the flipper to display the page transition when moveTo({direction:1}) is called?

[joseph]

Not yet, and it'd be a bit tricky to implement. Actually I think this is an area where iBooks is very wrong — the transition for a "jump" should be different to the transition for a "turn" (ie, it should look like turning multiple pages, or whatever).

I'd like to make it optional for flippers to have a special transition for jumps, and fall back to the current behaviour of "just show the spinner". But it's not too high on my list of priorities, because I think the spinner's mostly fine.

[aronwoost]

Of course, this only makes sense if you go to prev/next page! 100% agreed that moving to a completely different position with a transition is plain wrong.

Having this option would allow developers to implement their own paging buttons / interfaces (for whatever reason).

Re iBooks: #ibookfails are the reason we're building this applications, right ;)

[NirbhayK]

We made it working within Slider flipper. Below is the code to flip next or previous page with animation.

Inside Monocle.Flippers.Slider I added these two methods

  function flipNextPage() {
    var pos = p.panels.properties.panels["forwards"].properties.div.getBoundingClientRect().left;
    lift(k.FORWARDS, pos);
    release(k.FORWARDS, pos);
  }

  function flipPreviousPage() {
    var pos = p.panels.properties.panels["backwards"].properties.div.getBoundingClientRect().left;
    lift(k.BACKWARDS, pos);
    release(k.BACKWARDS, pos);
  }

and registered the methods in flipper API

  API.flipNextPage = flipNextPage;
  API.flipPreviousPage = flipPreviousPage;

Inside Monocle.Reader I added these two methods

  function moveNext() {
    p.flipper.flipNextPage();
  }

  function movePrevious() {
    p.flipper.flipPreviousPage();
  }

and registered the method with Monocle.Reader to expose it outside

  API.moveNext = moveNext;
  API.movePrevious = movePrevious;

After that you can call reader.moveNext() or reader.movePrevious() to change pages with animation. It is working for me.

@joseph Any comments.

[joloco]

I can confirm that NirbhayK's solution above worked for me. Thank you!