Skip to content

Commit

Permalink
Don't focus on the current story until the animation ends (ampproject…
Browse files Browse the repository at this point in the history 
…#39837)

* Don't focus on the current story until the animation ends

* Fix lint errors
  • Loading branch information
@ychsieh @eszponder
ychsieh authored and eszponder committed Apr 22, 2024
1 parent 6ecdf25 commit 470d954
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 19 deletions.
28 changes: 10 additions & 18 deletions examples/amp-story/player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,36 +81,28 @@ <h1>This is a NON-AMP page that embeds a story below:</h1>
<amp-story-player style="width: 360px; height: 600px;">
<a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
class="story">
<img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg" width="360" height="600" loading="lazy">
<span class="title">A local’s guide to what to eat and do in New York City</span>
<span class="title">New York City local guide</span>
</a>
<a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/">
<img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg" width="360" height="600" loading="lazy">
<span class="title">A local’s guide to what to eat and do in Miami</span>
<a href="https://wp.stories.google/stories/a-taste-of-new-york-pizza-history/">
<span class="title">Pizza Pizza Pizza</span>
</a>
<a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/">
<img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg" width="360" height="600" loading="lazy">
<span class="title">A local’s guide to what to eat and do in Mexico City</span>
<a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/">
<span class="title">Miami local guide</span>
</a>
<a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/">
<img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/img/promo3x4.jpg" width="360" height="600" loading="lazy">
<span class="title">A local’s guide to what to eat and do in Rome</span>
<span class="title">Rome local guide</span>
</a>
</amp-story-player>

<div class="actions">
<div class="circle active"
data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/42a59562-834d-11e9-b585-e36b16a531aa.jpg')">New York</div>
data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/">New York</div>
<div class="circle"
data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/"
style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/9f1d2656-6b7a-11e9-bbe7-1c798fb80536.jpg')">Miami</div>
data-story="https://wp.stories.google/stories/a-taste-of-new-york-pizza-history/">Pizza</div>
<div class="circle"
data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/"
style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/2e0f5178-746c-11e9-9331-30bc5836f48e.jpg')">Mexico City</div>
data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/">Miami</div>
<div class="circle"
data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/"
style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/img/f5903e2e-86fa-11e9-9d73-e2ba6bbf1b9b.jpg')">Rome</div>
data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/">Rome</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
Expand Down
5 changes: 4 additions & 1 deletion src/amp-story-player/amp-story-player-impl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1287,7 +1287,10 @@ export class AmpStoryPlayer {
this.updatePosition_(story);

if (story.distance === 0) {
tryFocus(story.iframe);
// Focus on the current story iframe after the animation ends.
story.iframe.addEventListener('animationend', () => {
tryFocus(story.iframe);
});
}
})
.catch((err) => {
Expand Down

0 comments on commit 470d954

Please sign in to comment.