Skip to content

Commit

Permalink
[amp-story-player] Update circular wrapping API (#30749)
Browse files Browse the repository at this point in the history 
* circular wrapping

* rename to init..

* update PR
  • Loading branch information
@Enriqe
Enriqe committed Oct 27, 2020
1 parent 857c6e1 commit 9521326
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 21 deletions.
57 changes: 42 additions & 15 deletions src/amp-story-player/amp-story-player-impl.js
View file
Expand Up @@ -207,6 +207,9 @@ export class AmpStoryPlayer {
/** @private {?boolean} */
this.isFetchingStoriesEnabled_ = null;

/** @private {?boolean} */
this.isCircularWrappingEnabled_ = null;

/** @private {!Object} */
this.touchEventState_ = {
startX: 0,
Expand Down Expand Up @@ -342,6 +345,7 @@ export class AmpStoryPlayer {
this.initializeButton_();
this.readPlayerConfig_();
this.maybeFetchMoreStories_(this.stories_.length - this.currentIdx_ - 1);
this.initializeCircularWrapping_();
this.signalReady_();
this.isBuilt_ = true;
}
Expand Down Expand Up @@ -837,6 +841,15 @@ export class AmpStoryPlayer {
}
}

/**
* @param {!Object} behavior
* @return {boolean}
* @private
*/
validateBehaviorDef_(behavior) {
return behavior && behavior.on && behavior.action;
}

/**
* Checks if fetching more stories is enabled and validates the configuration.
* @return {boolean}
Expand All @@ -849,14 +862,11 @@ export class AmpStoryPlayer {

const {behavior} = this.playerConfig_;

const isBehaviorDef = (behavior) =>
behavior && behavior.on && behavior.action;

const hasEndFetchBehavior = (behavior) =>
behavior.on === 'end' && behavior.action === 'fetch' && behavior.endpoint;

this.isFetchingStoriesEnabled_ =
isBehaviorDef(behavior) && hasEndFetchBehavior(behavior);
this.validateBehaviorDef_(behavior) && hasEndFetchBehavior(behavior);

return this.isFetchingStoriesEnabled_;
}
Expand All @@ -867,14 +877,14 @@ export class AmpStoryPlayer {
*/
next_() {
if (
!this.isCircularWrappingEnabled_() &&
!this.isCircularWrappingEnabled_ &&
this.isIndexOutofBounds_(this.currentIdx_ + 1)
) {
return;
}

if (
this.isCircularWrappingEnabled_() &&
this.isCircularWrappingEnabled_ &&
this.isIndexOutofBounds_(this.currentIdx_ + 1)
) {
this.go(1);
Expand Down Expand Up @@ -905,14 +915,14 @@ export class AmpStoryPlayer {
*/
previous_() {
if (
!this.isCircularWrappingEnabled_() &&
!this.isCircularWrappingEnabled_ &&
this.isIndexOutofBounds_(this.currentIdx_ - 1)
) {
return;
}

if (
this.isCircularWrappingEnabled_() &&
this.isCircularWrappingEnabled_ &&
this.isIndexOutofBounds_(this.currentIdx_ - 1)
) {
this.go(-1);
Expand Down Expand Up @@ -943,7 +953,7 @@ export class AmpStoryPlayer {
return;
}
if (
!this.isCircularWrappingEnabled_() &&
!this.isCircularWrappingEnabled_ &&
this.isIndexOutofBounds_(this.currentIdx_ + storyDelta)
) {
throw new Error('Out of Story range.');
Expand Down Expand Up @@ -1335,7 +1345,7 @@ export class AmpStoryPlayer {
* @private
*/
dispatchEndOfStoriesEvent_(data) {
if (this.isCircularWrappingEnabled_() || (!data.next && !data.previous)) {
if (this.isCircularWrappingEnabled_ || (!data.next && !data.previous)) {
return;
}

Expand Down Expand Up @@ -1436,14 +1446,14 @@ export class AmpStoryPlayer {

if (this.swipingState_ === SwipingState.SWIPING_TO_LEFT) {
delta > TOGGLE_THRESHOLD_PX &&
(this.getSecondaryIframe_() || this.isCircularWrappingEnabled_())
(this.getSecondaryIframe_() || this.isCircularWrappingEnabled_)
? this.next_()
: this.resetIframeStyles_();
}

if (this.swipingState_ === SwipingState.SWIPING_TO_RIGHT) {
delta > TOGGLE_THRESHOLD_PX &&
(this.getSecondaryIframe_() || this.isCircularWrappingEnabled_())
(this.getSecondaryIframe_() || this.isCircularWrappingEnabled_)
? this.previous_()
: this.resetIframeStyles_();
}
Expand Down Expand Up @@ -1510,12 +1520,29 @@ export class AmpStoryPlayer {
}

/**
* Checks if circular wrapping attribute is present.
* @private
* @return {boolean}
*/
isCircularWrappingEnabled_() {
return this.element_.hasAttribute('enable-circular-wrapping');
initializeCircularWrapping_() {
if (this.isCircularWrappingEnabled_ !== null) {
return this.isCircularWrappingEnabled_;
}

if (!this.playerConfig_) {
this.isCircularWrappingEnabled_ = false;
return false;
}

const {behavior} = this.playerConfig_;

const hasCircularWrappingEnabled = (behavior) =>
behavior.on === 'end' && behavior.action === 'circular-wrapping';

this.isCircularWrappingEnabled_ =
this.validateBehaviorDef_(behavior) &&
hasCircularWrappingEnabled(behavior);

return this.isCircularWrappingEnabled_;
}

/**
Expand Down
24 changes: 18 additions & 6 deletions test/unit/test-amp-story-player.js
View file
Expand Up @@ -84,6 +84,18 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
fireHandler['documentStateUpdate']('documentStateUpdate', closeEvent);
}

function buildCircularWrappingConfig() {
const configEl = document.createElement('script');
configEl.textContent = JSON.stringify({
'behavior': {
'on': 'end',
'action': 'circular-wrapping',
},
});
configEl.setAttribute('type', 'application/json');
return configEl;
}

beforeEach(() => {
win = env.win;
fakeMessaging = {
Expand Down Expand Up @@ -311,7 +323,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {

it('should not dispatch noNextStory when circular wrapping is enabled', async () => {
buildStoryPlayer(1);
playerEl.setAttribute('enable-circular-wrapping', '');
playerEl.appendChild(buildCircularWrappingConfig());

await manager.loadPlayers();
await nextTick();
Expand Down Expand Up @@ -355,7 +367,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {

it('should not dispatch noPreviousStory when circular wrapping is enabled', async () => {
buildStoryPlayer(2);
playerEl.setAttribute('enable-circular-wrapping', '');
playerEl.appendChild(buildCircularWrappingConfig());

await manager.loadPlayers();
await nextTick();
Expand Down Expand Up @@ -902,7 +914,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
it('takes to first story when swiping on the last one with circular wrapping', async () => {
const playerEl = win.document.createElement('amp-story-player');
appendStoriesToPlayer(playerEl, 5);
playerEl.setAttribute('enable-circular-wrapping', '');
playerEl.appendChild(buildCircularWrappingConfig());

const player = new AmpStoryPlayer(win, playerEl);

Expand All @@ -927,7 +939,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
it('takes to last story when swiping on the first one with circular wrapping', async () => {
const playerEl = win.document.createElement('amp-story-player');
appendStoriesToPlayer(playerEl, 5);
playerEl.setAttribute('enable-circular-wrapping', '');
playerEl.appendChild(buildCircularWrappingConfig());

const player = new AmpStoryPlayer(win, playerEl);

Expand All @@ -951,7 +963,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
it('navigate to first story when last story is finished', async () => {
const playerEl = win.document.createElement('amp-story-player');
appendStoriesToPlayer(playerEl, 5);
playerEl.setAttribute('enable-circular-wrapping', '');
playerEl.appendChild(buildCircularWrappingConfig());

const player = new AmpStoryPlayer(win, playerEl);

Expand All @@ -976,7 +988,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
it('navigate to last story when first story is requested to go back', async () => {
const playerEl = win.document.createElement('amp-story-player');
appendStoriesToPlayer(playerEl, 5);
playerEl.setAttribute('enable-circular-wrapping', '');
playerEl.appendChild(buildCircularWrappingConfig());

const player = new AmpStoryPlayer(win, playerEl);

Expand Down

0 comments on commit 9521326

Please sign in to comment.