Skip to content

Commit e0ab442

Browse files
gmajouletgmajoulet
authored
Swipe down to close the bookend. (ampproject#23761)
* Abstract draggable drawer component. * Draggable bookend. * Lint. * Fix testing. * Rebase + percy fix.
1 parent 754a558 commit e0ab442

11 files changed

+159
-207
lines changed

‎extensions/amp-story/1.0/amp-story-bookend.css‎

Lines changed: 14 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -17,50 +17,21 @@
1717
@import './amp-story-share.css';
1818

1919
.i-amphtml-story-bookend {
20-
text-align: start !important;
21-
color: #fff !important;
22-
bottom: 0 !important;
2320
display: flex !important;
2421
flex-direction: column !important;
25-
left: 0 !important;
26-
position: absolute !important;
27-
right: 0 !important;
28-
top: 0 !important;
22+
background: #202125 !important;
23+
border-radius: 8px 8px 0 0 !important;
24+
color: #fff !important;
25+
text-align: start !important;
2926
z-index: 100001 !important;
30-
transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
31-
}
32-
33-
.i-amphtml-story-bookend.i-amphtml-hidden {
34-
transition: transform 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important;
35-
transform: translateY(100vh) !important;
36-
pointer-events: none !important;
37-
}
38-
39-
.i-amphtml-story-bookend-overflow {
40-
overflow: auto !important;
41-
-webkit-overflow-scrolling: touch !important;
42-
margin-top: auto !important; /* positions it at the bottom of container */
43-
}
44-
45-
.i-amphtml-story-bookend-inner {
46-
margin: 88px 0 0 !important;
47-
font-family: 'Roboto', sans-serif !important;
48-
position: relative !important;
49-
padding-top: 32px !important;
50-
overflow: hidden !important;
5127
}
5228

53-
.i-amphtml-story-bookend-inner::before {
54-
content: " " !important;
55-
display: block !important;
56-
z-index: -1 !important; /* places it under content */
57-
background: #202125 !important;
58-
position: absolute !important;
59-
left: 0 !important;
60-
top: 0 !important;
61-
bottom: 0 !important;
62-
right: 0 !important;
63-
border-radius: 8px 8px 0 0 !important;
29+
.i-amphtml-story-bookend-handle {
30+
height: 4px !important;
31+
width: 40px !important;
32+
margin: 12px auto 24px !important;
33+
background: rgba(255, 255, 255, 0.24) !important;
34+
border-radius: 4px !important;
6435
}
6536

6637
.i-amphtml-story-bookend-heading {
@@ -343,30 +314,14 @@
343314
}
344315

345316
[desktop].i-amphtml-story-bookend {
346-
transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
347-
transform: translateY(0) !important;
348-
opacity: 1 !important;
349-
}
350-
351-
[desktop].i-amphtml-story-bookend.i-amphtml-hidden {
352-
transition: opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important;
353-
transform: translateY(100vh) !important;
354-
opacity: 0 !important;
355-
}
356-
357-
[desktop].i-amphtml-story-bookend .i-amphtml-story-share-widget {
358-
/* TODO(alanorozco): Don't render at all when on desktop */
359-
display: none !important;
360-
}
361-
362-
[desktop] .i-amphtml-story-bookend-inner {
363317
box-sizing: border-box !important;
364318
min-height: 100vh !important;
365319
padding: 104px 156px 64px !important;
366320
margin: 0 !important;
367321
}
368322

369-
[desktop] .i-amphtml-story-bookend-inner::before {
323+
[desktop].i-amphtml-story-bookend .i-amphtml-story-share-widget {
324+
/* TODO(alanorozco): Don't render at all when on desktop */
370325
display: none !important;
371326
}
372327

@@ -375,9 +330,8 @@
375330
display: none !important;
376331
}
377332

378-
[desktop] .i-amphtml-story-bookend-overflow {
379-
margin-top: 0 !important;
380-
margin-bottom: 0 !important;
333+
[desktop] .i-amphtml-story-bookend-handle {
334+
display: none !important;
381335
}
382336

383337
@media (min-width: 952px) {

‎extensions/amp-story/1.0/amp-story-draggable-drawer-header.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@
5555
white-space: nowrap !important;
5656
}
5757

58+
/** Overrides. */
59+
5860
.i-amphtml-story-page-attachment-theme-dark .i-amphtml-story-page-attachment-title {
5961
color: #fff !important;
6062
}
63+
64+
.i-amphtml-story-draggable-drawer-header-bookend {
65+
display: none !important;
66+
}

‎extensions/amp-story/1.0/amp-story-draggable-drawer.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@
2828
transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1) !important;
2929
}
3030

31+
.amp-story-draggable-drawer-root[hidden] {
32+
display: none !important;
33+
}
34+
3135
.amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open {
3236
transform: translate3d(0, 0, 0) !important;
3337
transition: transform 0.4s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
@@ -62,6 +66,7 @@
6266
transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
6367
}
6468

69+
6570
.i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content {
6671
opacity: 0 !important;
6772
}
@@ -91,3 +96,32 @@
9196
border-radius: 8px !important;
9297
overflow: hidden !important;
9398
}
99+
100+
/** Bookend overrides. */
101+
102+
.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-container,
103+
.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-container[hidden] {
104+
height: 100% !important;
105+
display: flex !important;
106+
flex-direction: column !important;
107+
background: transparent !important;
108+
transition: none !important;
109+
}
110+
111+
.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-content {
112+
margin-top: auto !important;
113+
padding-top: 88px !important;
114+
}
115+
116+
.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content {
117+
opacity: 1 !important;
118+
}
119+
120+
[desktop] .i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer {
121+
height: 100% !important;
122+
width: 100% !important;
123+
}
124+
125+
[desktop] .i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-content {
126+
padding-top: 0 !important;
127+
}

‎extensions/amp-story/1.0/amp-story-draggable-drawer.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export class DraggableDrawer extends AMP.BaseElement {
9191
/** @protected {!DrawerState} */
9292
this.state_ = DrawerState.CLOSED;
9393

94-
/** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
94+
/** @protected @const {!./amp-story-store-service.AmpStoryStoreService} */
9595
this.storeService_ = getStoreService(this.win);
9696

9797
/** @private {boolean} */
@@ -179,7 +179,7 @@ export class DraggableDrawer extends AMP.BaseElement {
179179
/**
180180
* Reacts to UI state updates.
181181
* @param {!UIType} uiState
182-
* @private
182+
* @protected
183183
*/
184184
onUIStateUpdate_(uiState) {
185185
uiState === UIType.MOBILE
@@ -191,21 +191,27 @@ export class DraggableDrawer extends AMP.BaseElement {
191191
* @private
192192
*/
193193
startListeningForTouchEvents_() {
194-
// Enforced by AMP validation rules.
195-
const storyPageEl = dev().assertElement(this.element.parentElement);
194+
// If the element is a direct descendant of amp-story-page, authorize
195+
// swiping up by listening to events at the page level. Otherwise, only
196+
// authorize swiping down to close by listening to events at the current
197+
// element level.
198+
const parentEl = this.element.parentElement;
199+
const el = dev().assertElement(
200+
parentEl.tagName === 'AMP-STORY-PAGE' ? parentEl : this.element
201+
);
196202

197203
this.touchEventUnlisteners_.push(
198-
listen(storyPageEl, 'touchstart', this.onTouchStart_.bind(this), {
204+
listen(el, 'touchstart', this.onTouchStart_.bind(this), {
199205
capture: true,
200206
})
201207
);
202208
this.touchEventUnlisteners_.push(
203-
listen(storyPageEl, 'touchmove', this.onTouchMove_.bind(this), {
209+
listen(el, 'touchmove', this.onTouchMove_.bind(this), {
204210
capture: true,
205211
})
206212
);
207213
this.touchEventUnlisteners_.push(
208-
listen(storyPageEl, 'touchend', this.onTouchEnd_.bind(this), {
214+
listen(el, 'touchend', this.onTouchEnd_.bind(this), {
209215
capture: true,
210216
})
211217
);
@@ -436,7 +442,6 @@ export class DraggableDrawer extends AMP.BaseElement {
436442

437443
this.state_ = DrawerState.OPEN;
438444

439-
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
440445
this.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
441446

442447
this.mutateElement(() => {
@@ -479,7 +484,6 @@ export class DraggableDrawer extends AMP.BaseElement {
479484

480485
this.state_ = DrawerState.CLOSED;
481486

482-
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, true);
483487
this.storeService_.dispatch(Action.TOGGLE_PAUSED, false);
484488

485489
this.mutateElement(() => {

‎extensions/amp-story/1.0/amp-story-page-attachment.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
* limitations under the License.
1515
*/
1616

17+
import {Action, StateProperty} from './amp-story-store-service';
1718
import {DraggableDrawer, DrawerState} from './amp-story-draggable-drawer';
1819
import {HistoryState, setHistoryState} from './utils';
1920
import {Services} from '../../../src/services';
20-
import {StateProperty} from './amp-story-store-service';
2121
import {StoryAnalyticsEvent} from '../../../src/analytics';
2222
import {dev} from '../../../src/log';
2323
import {getAnalyticsService} from './story-analytics';
@@ -136,6 +136,8 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
136136
open(shouldAnimate = true) {
137137
super.open(shouldAnimate);
138138

139+
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
140+
139141
const currentHistoryState = /** @type {!Object} */ (getState(
140142
this.win.history
141143
));
@@ -178,6 +180,8 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
178180
closeInternal_() {
179181
super.closeInternal_();
180182

183+
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, true);
184+
181185
setHistoryState(this.win, HistoryState.ATTACHMENT_PAGE_ID, null);
182186

183187
this.analyticsService_.triggerEvent(

‎extensions/amp-story/1.0/amp-story-system-layer.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434

3535
.i-amphtml-story-bookend-active.i-amphtml-story-system-layer {
3636
opacity: 0.3 !important;
37+
z-index: 1 !important;
3738
transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
3839
}
3940

‎extensions/amp-story/1.0/amp-story-vertical.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ amp-story[i-amphtml-vertical].i-amphtml-element amp-story-page.i-amphtml-element
5151
display: block !important;
5252
}
5353

54+
[i-amphtml-vertical] amp-story-bookend,
5455
[i-amphtml-vertical] amp-story-page-attachment {
56+
display: block !important;
5557
position: relative !important;
5658
height: 178vw !important;
5759
transform: none !important;
@@ -61,12 +63,6 @@ amp-story[i-amphtml-vertical].i-amphtml-element amp-story-page.i-amphtml-element
6163
content: none !important;
6264
}
6365

64-
[i-amphtml-vertical] amp-story-bookend {
65-
position: relative !important;
66-
display: block !important;
67-
height: 178vw !important;
68-
}
69-
7066
[i-amphtml-vertical] .i-amphtml-story-page-description {
7167
background: white !important;
7268
color: black !important;

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -945,7 +945,7 @@ export class AmpStory extends AMP.BaseElement {
945945
if (bookendInHistory) {
946946
return this.hasBookend_().then(hasBookend => {
947947
if (hasBookend) {
948-
this.storeService_.dispatch(Action.TOGGLE_BOOKEND, true);
948+
return this.showBookend_();
949949
}
950950
});
951951
}
@@ -2072,7 +2072,6 @@ export class AmpStory extends AMP.BaseElement {
20722072
onBookendStateUpdate_(isActive) {
20732073
this.toggleElementsOnBookend_(/* display */ isActive);
20742074
this.element.classList.toggle('i-amphtml-story-bookend-active', isActive);
2075-
setHistoryState(this.win, HistoryState.BOOKEND_ACTIVE, isActive);
20762075
}
20772076

20782077
/**
@@ -2285,9 +2284,7 @@ export class AmpStory extends AMP.BaseElement {
22852284
* @private
22862285
*/
22872286
buildAndPreloadBookend_() {
2288-
this.bookend_.build(
2289-
!!getHistoryState(this.win, HistoryState.BOOKEND_ACTIVE)
2290-
);
2287+
this.bookend_.build();
22912288
return this.bookend_.loadConfigAndMaybeRenderBookend();
22922289
}
22932290

0 commit comments

Comments
 (0)