Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Making pagination buttons available on panels and fullbleed desktop experience. #19315

Merged
merged 1 commit into from Nov 16, 2018
Merged

Making pagination buttons available on panels and fullbleed desktop experience. #19315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
174 changes: 13 additions & 161 deletions extensions/amp-story/1.0/amp-story-desktop.css
View file
Open in desktop
Expand Up @@ -84,63 +84,6 @@ amp-story[standalone][desktop] {
transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
}

[desktop] .i-amphtml-story-button-container {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 100002 !important;
pointer-events: none !important;
display: block !important;
}

[desktop] .i-amphtml-story-button-container::before {
content: '';
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
/* Roughly equivalent to (viewport width - active page width) / 2 */
width: calc(50vw - 23vh - 32px) !important;
}

.i-amphtml-story-button-move,
.i-amphtml-story-fwd-next > .i-amphtml-story-page-sentinel,
.i-amphtml-story-back-prev > .i-amphtml-story-page-sentinel {
pointer-events: all !important;
}

.i-amphtml-story-button-hidden > .i-amphtml-story-button-move {
cursor: default !important;
pointer-events: none !important;
opacity: 0 !important;
}

[desktop] > .next-container::before,
[dir=rtl] [desktop] > .prev-container::before {
right: 0 !important;
left: auto !important;
background: linear-gradient(to right, rgba(33,33,33,0) 0%, rgba(33,33,33,0.32) 100%)!important;
}

[desktop] > .prev-container::before,
[dir=rtl] [desktop] > .next-container::before {
left: 0 !important;
right: auto !important;
background: linear-gradient(to right, rgba(33,33,33,0.32) 0%, rgba(33,33,33,0) 100%)!important;
}

[desktop] > .next-container > .i-amphtml-story-button-move {
left: auto !important;
right: 0 !important;
}

/** This is needed to overwrite position of replay and read more button at the end of the the story. */
[dir=rtl] [desktop] > .next-container > .i-amphtml-story-button-move {
right: auto !important;
left: 0 !important;
}

/**
* Page positions and animations.
*/
Expand Down Expand Up @@ -182,9 +125,9 @@ amp-story[standalone][desktop] {
}

[desktop] amp-story-page[i-amphtml-desktop-position="-1"],
.prev-container > .i-amphtml-story-page-sentinel,
[desktop] .prev-container > .i-amphtml-story-page-sentinel,
[dir=rtl] [desktop] amp-story-page[i-amphtml-desktop-position="1"],
[dir=rtl] .next-container > .i-amphtml-story-page-sentinel {
[dir=rtl] [desktop] .next-container > .i-amphtml-story-page-sentinel {
transform: scale(0.9) translateX(calc(-150% - 64px)) translateY(0%) !important;
}

Expand All @@ -197,9 +140,9 @@ amp-story[standalone][desktop] {
}

[desktop] amp-story-page[i-amphtml-desktop-position="1"],
.next-container > .i-amphtml-story-page-sentinel,
[desktop] .next-container > .i-amphtml-story-page-sentinel,
[dir=rtl] [desktop] amp-story-page[i-amphtml-desktop-position="-1"],
[dir=rtl] .prev-container > .i-amphtml-story-page-sentinel {
[dir=rtl] [desktop] .prev-container > .i-amphtml-story-page-sentinel {
transform: scale(0.9) translate(calc(50% + 64px), 0%) !important;
}

Expand All @@ -208,6 +151,14 @@ amp-story[standalone][desktop] {
transform: scale(0.9) translate(calc(150% + 128px), 0%) !important;
}

.i-amphtml-story-prev-hover > amp-story-page[i-amphtml-desktop-position="-1"] {
opacity: 0.3 !important;
}

.i-amphtml-story-next-hover > amp-story-page[i-amphtml-desktop-position="0"] + amp-story-page {
opacity: 0.3 !important;
}

/**
* If the next page is protected behind a paywall, blur its content and display
* a lock icon on top of it.
Expand All @@ -229,7 +180,7 @@ amp-story[standalone][desktop] {
}

[desktop] > amp-story-page,
.i-amphtml-story-page-sentinel {
[desktop] .i-amphtml-story-page-sentinel {
left: 50%!important;
right: auto !important;
margin: auto !important;
Expand All @@ -242,102 +193,3 @@ amp-story[standalone][desktop] {
[desktop] > amp-story-page {
box-shadow: 0 0 15px rgba(0, 0, 0, .4)!important;
}

.i-amphtml-story-page-sentinel {
position: absolute !important;
width: 100vw !important;
height: 100vh !important;
top: 0 !important;
bottom: 0 !important;
margin-left: -32px !important;
z-index: 100002 !important;
cursor: pointer;
}

/* Navigation buttons */
.i-amphtml-story-button-move {
position: absolute!important;
top: 0!important;
bottom: 0!important;
margin: auto 40px!important;
width: 60px!important;
height: 60px!important;
border-radius: 50%!important;
border: 0!important;
background-color: #fff!important;
background-repeat: no-repeat!important;
background-size: 12px 17px!important;
display: flex!important;
justify-content: center!important;
align-items: center!important;
opacity: .5!important;
transition: 150ms opacity linear, 350ms transform linear!important;
cursor: pointer!important;
z-index: 100002!important;
outline: none!important;
}

.i-amphtml-story-prev-hover > amp-story-page[i-amphtml-desktop-position="-1"] {
opacity: 0.3 !important;
}

.i-amphtml-story-next-hover > amp-story-page[i-amphtml-desktop-position="0"] + amp-story-page {
opacity: 0.3 !important;
}

.prev-container > .i-amphtml-story-button-move,
[dir=rtl] .i-amphtml-story-fwd-next > .i-amphtml-story-button-move {
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="25" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 22l-9.5-9.5L15.7 3l-3-3L.4 12.6 12.8 25"/></svg>')!important;
background-position: 45% 50%!important;
left: 0!important;
right: auto !important;
}

.i-amphtml-story-fwd-next > .i-amphtml-story-button-move,
[dir=rtl] .prev-container > .i-amphtml-story-button-move {
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="25" xmlns="http://www.w3.org/2000/svg"><path d="M.3 3l9.5 9.5L.3 22l3 3 12.4-12.5L3.2 0"/></svg>')!important;
background-position: 55% 50%!important;
left: auto !important;
right: 0 !important;
}

.i-amphtml-story-fwd-replay > .i-amphtml-story-button-move {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
background-position: center center;
background-size: 32px 32px !important;
}

.i-amphtml-story-fwd-more > .i-amphtml-story-button-move {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>') !important;
background-position: center center;
background-size: 32px 32px !important;
}

/* On forward button mouseover */
.i-amphtml-story-next-hover > .next-container > .i-amphtml-story-button-move,
.i-amphtml-story-prev-hover > .prev-container > .i-amphtml-story-button-move {
transform: scale(1.1) !important;
opacity: 1!important;
}

/* Do not display when hidden. */
.i-amphtml-story-prev-hover > .i-amphtml-story-button-hidden >
.i-amphtml-story-button-move {
opacity: 0 !important;
}

/* On forward (next) button mouseover */
.i-amphtml-story-next-hover > .i-amphtml-story-fwd-next >
.i-amphtml-story-button-move {
transform: translateX(8px)!important;
opacity: 1!important;
}

/* On back button mouseover */
.i-amphtml-story-prev-hover > .i-amphtml-story-back-prev >
.i-amphtml-story-button-move,
.i-amphtml-story-prev-hover > .i-amphtml-story-back-close-bookend >
.i-amphtml-story-button-move {
transform: translateX(-8px)!important;
opacity: 1!important;
}
1 change: 1 addition & 0 deletions extensions/amp-story/1.0/amp-story.css
View file
Open in desktop
Expand Up @@ -17,6 +17,7 @@
@import './amp-story-access.css';
@import './amp-story-desktop.css';
@import './amp-story-user-overridable.css';
@import './pagination-buttons.css';

/** Common */
amp-story, amp-story-page, amp-story-grid-layer, amp-story-cta-layer {
Expand Down
10 changes: 6 additions & 4 deletions extensions/amp-story/1.0/amp-story.js
View file
Open in desktop
Expand Up @@ -661,6 +661,10 @@ export class AmpStory extends AMP.BaseElement {

/** @private */
buildPaginationButtons_() {
if (this.paginationButtons_) {
return;
}

this.paginationButtons_ = PaginationButtons.create(this.win);

this.paginationButtons_.attach(this.element);
Expand Down Expand Up @@ -696,10 +700,6 @@ export class AmpStory extends AMP.BaseElement {

const initialPageId = this.getHistoryStatePageId_() || firstPageEl.id;

if (!this.paginationButtons_) {
this.buildPaginationButtons_();
}

this.initializeBookend_();
this.initializeSidebar_();

Expand Down Expand Up @@ -1319,6 +1319,7 @@ export class AmpStory extends AMP.BaseElement {
break;
case UIType.DESKTOP:
this.setDesktopPositionAttributes_(this.activePage_);
this.buildPaginationButtons_();
this.vsync_.mutate(() => {
this.element.setAttribute('desktop', '');
this.element.removeAttribute('desktop-fullbleed');
Expand All @@ -1333,6 +1334,7 @@ export class AmpStory extends AMP.BaseElement {
break;
case UIType.DESKTOP_FULLBLEED:
this.shareMenu_.build();
this.buildPaginationButtons_();
this.vsync_.mutate(() => {
this.element.setAttribute('desktop-fullbleed', '');
this.element.removeAttribute('desktop');
Expand Down