Edit amp-sidebar to default to side="right" for stories ✨ (ampproject…

…#19595)

* make the default side for the sidebar left for RTL and vice versa

* fixed utils

* visual tests not part of this change

* Oops! Removing console debugging code

* fixed lint issues

* implemented requested PR changes

* edited JSDoc

* fixed lint issues

* implemented PR review changes

* Accidentally changed comments

* fixed lint issues

* fixed lint issues

extensions/amp-sidebar/0.1/amp-sidebar.js

@@ -21,6 +21,7 @@ import {Services} from '../../../src/services';
 import {Toolbar} from './toolbar';
 import {closestByTag, isRTL, tryFocus} from '../../../src/dom';
 import {createCustomEvent} from '../../../src/event-helper';
+import {descendsFromStory} from '../../../src/utils/story';
 import {dev} from '../../../src/log';
 import {dict} from '../../../src/utils/object';
 import {removeFragment} from '../../../src/url';
@@ -33,6 +34,12 @@ const TAG = 'amp-sidebar toolbar';
 /** @private @const {number} */
 const ANIMATION_TIMEOUT = 350;
 
+/** @private @enum {string} */
+const Side = {
+  LEFT: 'left',
+  RIGHT: 'right',
+};
+
 /**
   * For browsers with bottom nav bars the content towards the bottom
   * end of the sidebar is cut off.
@@ -115,8 +122,9 @@ export class AmpSidebar extends AMP.BaseElement {
 
     this.action_ = Services.actionServiceForDoc(element);
 
-    if (this.side_ != 'left' && this.side_ != 'right') {
-      this.side_ = isRTL(this.document_) ? 'right' : 'left';
+    if (this.side_ != Side.LEFT && this.side_ != Side.RIGHT) {
+      this.side_ = this.setSideAttribute_(
+          isRTL(this.document_) ? Side.RIGHT : Side.LEFT);
       element.setAttribute('side', this.side_);
     }
 
@@ -350,7 +358,19 @@ export class AmpSidebar extends AMP.BaseElement {
       tryFocus(this.openerElement_);
     }
   }
-
+  /**
+   * Sidebars within <amp-story> should be 'flipped'.
+   * @param {!Side} side
+   * @return {Side}
+   * @private
+   */
+  setSideAttribute_(side) {
+    if (!descendsFromStory(this.element)) {
+      return side;
+    } else {
+      return side == Side.LEFT ? Side.RIGHT : Side.LEFT;
+    }
+  }
   /**
    * @private
    */

src/utils/story.js

@@ -26,7 +26,7 @@ import {closestByTag, waitForChild} from '../dom';
  * @return {boolean}
  */
 export function descendsFromStory(element) {
-  return !!closestByTag(element, 'amp-story-page');
+  return !!closestByTag(element, 'amp-story');
 }
 
 /**