Adds support for RTL navigation in amp-story pages ✨

extensions/amp-story/1.0/amp-story-store-service.js

@@ -39,6 +39,7 @@ const TAG = 'amp-story';
  *    landscapestate: boolean,
  *    mutedstate: boolean,
  *    pausedstate: boolean,
+ *    rtlstate: boolean,
  *    sharemenustate: boolean,
  *    supportedbrowserstate: boolean,
  *    consentid: ?string,
@@ -67,6 +68,7 @@ export const StateProperty = {
   LANDSCAPE_STATE: 'landscapestate',
   MUTED_STATE: 'mutedstate',
   PAUSED_STATE: 'pausedstate',
+  RTL_STATE: 'rtlstate',
   SHARE_MENU_STATE: 'sharemenustate',
   SUPPORTED_BROWSER_STATE: 'supportedbrowserstate',
 
@@ -89,6 +91,7 @@ export const Action = {
   TOGGLE_LANDSCAPE: 'togglelandscape',
   TOGGLE_MUTED: 'togglemuted',
   TOGGLE_PAUSED: 'togglepaused',
+  TOGGLE_RTL: 'togglertl',
   TOGGLE_SHARE_MENU: 'togglesharemenu',
   TOGGLE_SUPPORTED_BROWSER: 'togglesupportedbrowser',
 };
@@ -148,6 +151,10 @@ const actions = (state, action, data) => {
             [StateProperty.PAUSED_STATE]: !!data,
             [StateProperty.SHARE_MENU_STATE]: !!data,
           }));
+    // Triggers right to left experience.
+    case Action.TOGGLE_RTL:
+      return /** @type {!State} */ (Object.assign(
+          {}, state, {[StateProperty.RTL_STATE]: !!data}));
     case Action.SET_CONSENT_ID:
       return /** @type {!State} */ (Object.assign(
           {}, state, {[StateProperty.CONSENT_ID]: data}));
@@ -258,6 +265,7 @@ export class AmpStoryStoreService {
       [StateProperty.LANDSCAPE_STATE]: false,
       [StateProperty.MUTED_STATE]: true,
       [StateProperty.PAUSED_STATE]: false,
+      [StateProperty.RTL_STATE]: false,
       [StateProperty.SHARE_MENU_STATE]: false,
       [StateProperty.SUPPORTED_BROWSER_STATE]: true,
       [StateProperty.CONSENT_ID]: null,

extensions/amp-story/1.0/amp-story.js

@@ -73,6 +73,7 @@ import {
   childElements,
   closest,
   createElementWithAttributes,
+  isRTL,
   scopedQuerySelectorAll,
 } from '../../../src/dom';
 import {
@@ -313,6 +314,11 @@ export class AmpStory extends AMP.BaseElement {
       this.initializeStandaloneStory_();
     }
 
+    // Check if story is RTL.
+    if (isRTL(this.win.document)) {
+      this.storeService_.dispatch(Action.TOGGLE_RTL, true);
+    }
+
     const pageEl = this.element.querySelector('amp-story-page');
     pageEl && pageEl.setAttribute('active', '');
 
@@ -939,13 +945,14 @@ export class AmpStory extends AMP.BaseElement {
       return;
     }
 
+    const rtlState = this.storeService_.get(StateProperty.RTL_STATE);
+
     switch (e.keyCode) {
-      // TODO(newmuis): This will need to be flipped for RTL.
       case KeyCodes.LEFT_ARROW:
-        this.previous_();
+        rtlState ? this.next_() : this.previous_();
         break;
       case KeyCodes.RIGHT_ARROW:
-        this.next_();
+        rtlState ? this.previous_() : this.next_();
         break;
     }
   }

extensions/amp-story/1.0/page-advancement.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import {Services} from '../../../src/services';
+import {StateProperty} from './amp-story-store-service';
 import {TAPPABLE_ARIA_ROLES} from '../../../src/service/action-impl';
 import {VideoEvents} from '../../../src/video-interface';
 import {closest, escapeCssSelectorIdent} from '../../../src/dom';
@@ -24,6 +25,9 @@ import {listenOnce} from '../../../src/event-helper';
 /** @private @const {number} */
 const NEXT_SCREEN_AREA_RATIO = 0.75;
 
+/** @private @const {number} */
+const PREVIOUS_SCREEN_AREA_RATIO = 0.25;
+
 /** @const {number} */
 export const POLL_INTERVAL_MS = 300;
 
@@ -248,9 +252,8 @@ class MultipleAdvancementConfig extends AdvancementConfig {
 
 
 /**
- * Always provides a progress of 1.0.  Advances when the user taps the rightmost
- * 75% of the screen; triggers the previous listener when the user taps the
- * leftmost 25% of the screen.
+ * Always provides a progress of 1.0.  Advances when the user taps the
+ * corresponding section, depending on language settings.
  */
 class ManualAdvancement extends AdvancementConfig {
   /**
@@ -262,6 +265,30 @@ class ManualAdvancement extends AdvancementConfig {
     this.element_ = element;
     this.clickListener_ = this.maybePerformNavigation_.bind(this);
     this.hasAutoAdvanceStr_ = this.element_.getAttribute('auto-advance-after');
+
+    if (element.ownerDocument.defaultView) {
+      /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
+      this.storeService_ =
+        Services.storyStoreService(element.ownerDocument.defaultView);
+    }
+
+    const rtlState = this.storeService_.get(StateProperty.RTL_STATE);
+    this.sections_ = {
+      // Width and navigation direction of each section depend on whether the
+      // document is RTL or LTR.
+      left: {
+        widthRatio: rtlState ?
+          NEXT_SCREEN_AREA_RATIO : PREVIOUS_SCREEN_AREA_RATIO,
+        direction: rtlState ?
+          TapNavigationDirection.NEXT : TapNavigationDirection.PREVIOUS,
+      },
+      right: {
+        widthRatio: rtlState ?
+          PREVIOUS_SCREEN_AREA_RATIO : NEXT_SCREEN_AREA_RATIO,
+        direction: rtlState ?
+          TapNavigationDirection.PREVIOUS : TapNavigationDirection.NEXT,
+      },
+    };
   }
 
   /** @override */
@@ -329,27 +356,40 @@ class ManualAdvancement extends AdvancementConfig {
 
     event.stopPropagation();
 
-    // TODO(newmuis): This will need to be flipped for RTL.
-    const elRect = this.element_./*OK*/getBoundingClientRect();
+    const pageRect = this.element_./*OK*/getBoundingClientRect();
 
     // Using `left` as a fallback since Safari returns a ClientRect in some
     // cases.
-    const offsetLeft = ('x' in elRect) ? elRect.x : elRect.left;
-    const offsetWidth = elRect.width;
+    const offsetLeft = ('x' in pageRect) ? pageRect.x : pageRect.left;
+
+    const page = {
+      // Offset starting left of the page.
+      offset: offsetLeft,
+      width: pageRect.width,
+      clickEventX: event.pageX,
+    };
 
-    const nextScreenAreaMin = offsetLeft +
-        ((1 - NEXT_SCREEN_AREA_RATIO) * offsetWidth);
-    const nextScreenAreaMax = offsetLeft + offsetWidth;
+    this.onTapNavigation(this.getTapDirection_(page));
+  }
+
+  /**
+   * Decides what direction to navigate depending on which
+   * section of the page was there a click. The navigation direction of each
+   * individual section has been previously defined depending on the language
+   * settings.
+   * @param {!Object} page
+   */
+  getTapDirection_(page) {
+    const {left, right} = this.sections_;
 
-    if (event.pageX >= nextScreenAreaMin && event.pageX < nextScreenAreaMax) {
-      this.onTapNavigation(TapNavigationDirection.NEXT);
-    } else if (event.pageX >= offsetLeft && event.pageX < nextScreenAreaMin) {
-      this.onTapNavigation(TapNavigationDirection.PREVIOUS);
+    if (page.clickEventX <= page.offset + (left.widthRatio * page.width)) {
+      return left.direction;
     }
+
+    return right.direction;
   }
 }
 
-
 /**
  * Provides progress and advancement based on a fixed duration of time,
  * specified in either seconds or milliseconds.

extensions/amp-story/1.0/test/test-amp-story-page.js

@@ -16,7 +16,9 @@
 
 import {AmpDocSingle} from '../../../../src/service/ampdoc-impl';
 import {AmpStoryPage, PageState} from '../amp-story-page';
+import {AmpStoryStoreService} from '../amp-story-store-service';
 import {MediaType} from '../media-pool';
+import {registerServiceBuilder} from '../../../../src/service';
 
 
 describes.realWin('amp-story-page', {amp: true}, env => {
@@ -35,6 +37,9 @@ describes.realWin('amp-story-page', {amp: true}, env => {
       }),
     };
 
+    const storeService = new AmpStoryStoreService(win);
+    registerServiceBuilder(win, 'story-store', () => storeService);
+
     const story = win.document.createElement('amp-story');
     story.getImpl = () => Promise.resolve(mediaPoolRoot);