Fix leaf positioning during rtl flip anim (#1077)

* Fix leaf positioning during rtl flip anim

If the new left page remains left-positioned, its animation unfolds
in the wrong direction. Ensuring it is switched to right-positioning
before the animation prevents this issue.

* Add unit test for page flip direction

* Fix trailing spaces lint issue in test

src/BookReader/Mode2Up.js

@@ -843,6 +843,13 @@ export class Mode2Up {
     this.pageContainers[this.br.twoPage.currentIndexR].$container.animate({width: '0px'}, speed, 'easeInSine', () => {
       this.br.$('BRgutter').css({left: `${gutter - this.br.twoPage.bookSpineDivWidth * 0.5}px`});
       $(this.br.leafEdgeTmp).animate({left: `${gutter - newWidthL - leafEdgeTmpW}px`}, speed, 'easeOutSine');
+
+      // Ensure the new left leaf is right-positioned before animating its width.
+      // Otherwise, it animates in the wrong direction.
+      this.pageContainers[newIndexL].$container.css({
+        right: `${newWidthL}px`,
+        left: ''
+      });
       this.pageContainers[newIndexL].$container.animate({width: `${newWidthL}px`}, speed, 'easeOutSine', () => {
         this.pageContainers[newIndexR].$container.css('zIndex', 2);
 

tests/jest/BookReader/Mode2Up.test.js

@@ -47,6 +47,29 @@ describe('zoom', () => {
   });
 });
 
+describe('page flip directions', () => {
+  test('animates the left page in the correct direction', () => {
+    const br = new BookReader({ data: SAMPLE_DATA });
+    br.init();
+
+    const fake = sinon.fake();
+    const fakeAnimWithCB = sinon.fake.yields();
+    const fakeAnim = sinon.fake((...args) =>
+      typeof args[args.length - 1] === 'function' ? fakeAnimWithCB(...args) : fake
+    );
+    sinon.replace(jQuery.prototype, 'animate', fakeAnim);
+
+    const fakeCSS = sinon.spy(jQuery.prototype, 'css');
+
+    br.next();
+
+    expect(fakeAnimWithCB.callCount).toBe(2);
+    // Find the call to .css() immediately preceding the second animation with a callback (i.e., the left page animation)
+    const preSecondAnimCssCallIndex = fakeCSS.getCalls().findIndex(call => call.calledAfter(fakeAnimWithCB.getCall(1))) - 1;
+    expect(fakeCSS.getCall(preSecondAnimCssCallIndex).args[0].left).toBe('');
+  });
+});
+
 describe('prefetch', () => {
   test('loads nearby pages', () => {
     const br = new BookReader({ data: SAMPLE_DATA });