Skip to content

Commit

Permalink
Opt in into the desktop full bleed experience.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmajoulet
gmajoulet committed Nov 12, 2018
1 parent ab609a8 commit 52807ea
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 24 deletions.
7 changes: 4 additions & 3 deletions extensions/amp-story/1.0/amp-story-store-service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,12 @@ export const getStoreService = win => {

/**
* Different UI experiences to display the story.
* @const @enum {number}
* @const @enum {string}
*/
export const UIType = {
MOBILE: 0,
DESKTOP: 1,
MOBILE: 'mobile',
DESKTOP: 'desktop',
FULLBLEED: 'fullbleed',
};


Expand Down
59 changes: 42 additions & 17 deletions extensions/amp-story/1.0/amp-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,9 +348,7 @@ export class AmpStory extends AMP.BaseElement {
this.initializeListeners_();
this.initializeListenersForDev_();

if (this.isDesktop_()) {
this.storeService_.dispatch(Action.TOGGLE_UI, UIType.DESKTOP);
}
this.storeService_.dispatch(Action.TOGGLE_UI, this.getUIType_());

this.navigationState_.observe(stateChangeEvent => {
this.variableService_.onNavigationStateChange(stateChangeEvent);
Expand Down Expand Up @@ -750,9 +748,10 @@ export class AmpStory extends AMP.BaseElement {
* @private
*/
whenPagesLoaded_(timeoutMs = 0) {
const pagesToWaitFor = this.isDesktop_() ?
[this.pages_[0], this.pages_[1]] :
[this.pages_[0]];
const pagesToWaitFor =
this.storeService_.get(StateProperty.UI_STATE) === UIType.DESKTOP ?
[this.pages_[0], this.pages_[1]] :
[this.pages_[0]];

const storyLoadPromise = Promise.all(
pagesToWaitFor.filter(page => !!page).map(page => page.whenLoaded()));
Expand Down Expand Up @@ -937,7 +936,7 @@ export class AmpStory extends AMP.BaseElement {
* @private
*/
performTapNavigation_(direction) {
if (this.isDesktop_()) {
if (this.storeService_.get(StateProperty.UI_STATE) === UIType.DESKTOP) {
this.next_();
return;
}
Expand Down Expand Up @@ -1172,7 +1171,7 @@ export class AmpStory extends AMP.BaseElement {
if (!this.platform_.isSafari() && !this.platform_.isIos()) {
return;
}
if (this.isDesktop_()) {
if (this.storeService_.get(StateProperty.UI_STATE) === UIType.DESKTOP) {
// Force repaint is only needed when transitioning from invisible to
// visible
return;
Expand Down Expand Up @@ -1258,8 +1257,7 @@ export class AmpStory extends AMP.BaseElement {
onResize() {
this.updateViewportSizeStyles_();

const uiState = this.isDesktop_() ? UIType.DESKTOP : UIType.MOBILE;

const uiState = this.getUIType_();
this.storeService_.dispatch(Action.TOGGLE_UI, uiState);

if (uiState !== UIType.MOBILE) {
Expand Down Expand Up @@ -1316,12 +1314,14 @@ export class AmpStory extends AMP.BaseElement {
this.shareMenu_.build();
this.vsync_.mutate(() => {
this.element.removeAttribute('desktop');
this.element.removeAttribute('desktop-fullbleed');
});
break;
case UIType.DESKTOP:
this.setDesktopPositionAttributes_(this.activePage_);
this.vsync_.mutate(() => {
this.element.setAttribute('desktop', '');
this.element.removeAttribute('desktop-fullbleed');
});
if (!this.background_) {
this.background_ = new AmpStoryBackground(this.win, this.element);
Expand All @@ -1331,20 +1331,47 @@ export class AmpStory extends AMP.BaseElement {
this.updateBackground_(this.activePage_.element, /* initial */ true);
}
break;
case UIType.FULLBLEED:
this.shareMenu_.build();
this.vsync_.mutate(() => {
this.element.setAttribute('desktop-fullbleed', '');
this.element.removeAttribute('desktop');
});
break;
}
}

/**
* Retrieves the UI type that should be used to view the story.
* @return {!UIType}
* @private
*/
getUIType_() {
if (!this.isDesktop_() ||
isExperimentOn(this.win, 'disable-amp-story-desktop')) {
return UIType.MOBILE;
}

if (this.element.getAttribute('desktop-mode') === UIType.FULLBLEED) {
return UIType.FULLBLEED;
}

// Three panels desktop UI (default).
return UIType.DESKTOP;
}

/**
* @return {boolean} True if the screen size matches the desktop media query.
* @private
*/
isDesktop_() {
return this.desktopMedia_.matches && !this.platform_.isBot() &&
!isExperimentOn(this.win, 'disable-amp-story-desktop');
return this.desktopMedia_.matches && !this.platform_.isBot();
}

/**
* @return {boolean} true if this is a standalone story (i.e. this story is
* the only content of the document).
* @private
*/
isStandalone_() {
return this.element.hasAttribute(Attributes.STANDALONE);
Expand Down Expand Up @@ -1516,14 +1543,12 @@ export class AmpStory extends AMP.BaseElement {
}

/**
* Toggle content when bookend is opened/closed.
* TODO(gmajoulet): these elements should get hidden by listening to bookend
* state events.
* Toggles content when bookend is opened/closed.
* @param {boolean} isActive
* @private
*/
toggleElementsOnBookend_(isActive) {
if (!this.isDesktop_()) {
if (this.storeService_.get(StateProperty.UI_STATE) !== UIType.DESKTOP) {
return;
}

Expand Down Expand Up @@ -1704,7 +1729,7 @@ export class AmpStory extends AMP.BaseElement {
// TODO(newmuis): Change this comment.
// On mobile there is always a bookend. On desktop, the bookend will only
// be shown if related articles have been configured.
if (!this.isDesktop_()) {
if (this.storeService_.get(StateProperty.UI_STATE) === UIType.MOBILE) {
return Promise.resolve(true);
}

Expand Down
24 changes: 20 additions & 4 deletions extensions/amp-story/1.0/test/test-amp-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,22 @@ describes.realWin('amp-story', {
});
});

it('should detect fullbleed desktop mode', () => {
const pages = createPages(story.element, 4, ['cover', '1', '2', '3']);
story.element.setAttribute('desktop-mode', 'fullbleed');

// Don't do this at home. :(
story.desktopMedia_ = {matches: true};

story.buildCallback();

return story.layoutCallback()
.then(() => {
expect(story.storeService_.get(StateProperty.UI_STATE))
.to.equals(UIType.FULLBLEED);
});
});

describe('amp-story consent', () => {
it('should pause the story if there is a consent', () => {
sandbox.stub(Services, 'actionServiceForDoc')
Expand Down Expand Up @@ -690,10 +706,10 @@ describes.realWin('amp-story', {
const desktopAttribute = 'i-amphtml-desktop-position';
const pages = createPages(story.element, 4, ['cover', '1', '2', '3']);

story.storeService_.dispatch(Action.TOGGLE_UI, UIType.DESKTOP);

story.buildCallback();

story.storeService_.dispatch(Action.TOGGLE_UI, UIType.DESKTOP);

return story.layoutCallback()
.then(() => {
expect(pages[0].getAttribute(desktopAttribute)).to.equal('0');
Expand All @@ -707,10 +723,10 @@ describes.realWin('amp-story', {
const desktopAttribute = 'i-amphtml-desktop-position';
const pages = createPages(story.element, 4, ['cover', '1', '2', '3']);

story.storeService_.dispatch(Action.TOGGLE_UI, UIType.DESKTOP);

story.buildCallback();

story.storeService_.dispatch(Action.TOGGLE_UI, UIType.DESKTOP);

return story.layoutCallback()
.then(() => story.switchTo_('2'))
.then(() => {
Expand Down

0 comments on commit 52807ea

Please sign in to comment.