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

Support display observer in the lightbox #32701

Merged
merged 9 commits into from
Feb 22, 2021
Merged

Support display observer in the lightbox #32701

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d67d81c
Display observer in nested fixed overlays
Feb 16, 2021
8579bc2
Support display observer in the lightbox
Feb 17, 2021
e517e0a
cleanup
Feb 17, 2021
1c91c14
docs
Feb 17, 2021
0b96d8c
fix types
Feb 17, 2021
474244e
minor
Feb 19, 2021
a785f71
Combine observers and containers together
Feb 19, 2021
4543b10
eager reset of container observations
Feb 19, 2021
5eaee0d
shortcircuit
Feb 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions examples/amp-lightbox.amp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
</head>
<body class="comic-amp-font-loading">

Expand Down Expand Up @@ -76,6 +77,14 @@ <h2>Scrollable Lightbox</h2>
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
</p>
<div style="height: 100vh;"></div>
<amp-video id="video1"
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
width="358"
height="204"
layout="responsive"
controls>
</amp-video>
</amp-lightbox>

<button on="tap:lightbox-scrollable">
Expand Down
6 changes: 6 additions & 0 deletions extensions/amp-lightbox/0.1/amp-lightbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ import {dict, hasOwn} from '../../../src/utils/object';
import {getMode} from '../../../src/mode';
import {htmlFor} from '../../../src/static-template';
import {isInFie} from '../../../src/iframe-helper';
import {
registerContainer,
unregisterContainer,
} from '../../../src/utils/display-observer';
import {toArray} from '../../../src/types';
import {tryFocus} from '../../../src/dom';

Expand Down Expand Up @@ -283,6 +287,7 @@ class AmpLightbox extends AMP.BaseElement {
return;
}
this.initialize_();
registerContainer(this.element, this.container_);
this.boundCloseOnEscape_ = /** @type {?function(this:AmpLightbox, Event)} */ (this.closeOnEscape_.bind(
this
));
Expand Down Expand Up @@ -557,6 +562,7 @@ class AmpLightbox extends AMP.BaseElement {
if (!this.active_) {
return;
}
unregisterContainer(this.element);
if (this.isScrollable_) {
setStyle(this.element, 'webkitOverflowScrolling', '');
}
Expand Down
Loading