examples/amp-story/player.html - main - githubmirror/amphtml

examples/amp-story/player.html
110 строк6 KB
Ya-Chen Hsieh
Don't focus on the current story until the animation ends (#39837)
21 фев 2024, 20:52
21 фев 2024, 20:52051cfaf
<!doctype html>
<html lang="en">
  <head>
    <title>Story Player (Non-AMP)</title>
    <script async src="../../dist/amp-story-player.js"></script>
    <link href="../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
    <style page>
      body {
        font-family: sans-serif;
      }
    </style>
    <style injected>
      .story-player-iframe {
        background-size: cover;
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        flex: 0 0 100%;
      }

      .title {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        font-size: 40px;
        padding: 88px 32px 32px 32px;
        line-height: 1.25;
        text-shadow: 3px 3px #000;
      }
      .actions .circle {
        width: 65px;
        height: 65px;
        background-size: cover;
        overflow: hidden;
        border-radius: 50%;
        display: inline-block;
        margin: 10px;
        box-shadow:
          0 0 0 3px white,
          0 0 0 7px hsl(20, 79%, 60%);
        color: white;
        text-align: center;
        padding-top: 20px;
        box-sizing: border-box;
        text-shadow: 0px 2px 4px #000000;
        cursor: pointer;
      }

      .actions .circle.active {
        box-shadow:
          0 0 0 3px white,
          0 0 0 7px hsl(257, 79%, 60%);
      }
    </style>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script>
      window.onload = () => {
        const player = document.querySelector('amp-story-player');
        document.querySelector('.actions').addEventListener('click', (e) => {
          if (e.target.hasAttribute('data-story')) {
            player.show(e.target.getAttribute('data-story'), null, {animate: false});
          }
        })
        player.addEventListener('navigation', (e) => {
          document.querySelectorAll('.actions .circle').forEach((circle, index) => {
            circle.classList.toggle('active', index === e.detail.index)
          })
        });
      };
    </script>
  </head>
  <body>
    <h1>This is a NON-AMP page that embeds a story below:</h1>
    <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>
    <div>
      <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">
          <span class="title">New York City local guide</span>
        </a>
        <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-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/">
          <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/">New York</div>
        <div class="circle"
            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-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/">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>
  </body>
</html>