Sticky Plugin

Sticky is a plugin to “stick” the player to the browser when scrolled out of view. Once the plugin has been added to the <org>.js file it looks for the data-sticky="true" data attribute on the powa element and instantiates itself on the player. When the player is playing and scrolled out of view it will attach itself to the browser viewport to remain in view.

Example

    window.addEventListener('powaReady', event => {
    const powa = get(event, 'detail.powa');

    // any player with data-sticky="true" will get 'sticky'
    new Sticky({powa});
});

Inline

Sticky

Events

The Sticky module emits events via the powa object when it is engaged (stickyEngage), disengaged (stickyDisengage), and closed (stickyClose).

    window.addEventListener('powaReady', event => {
    const powa = get(event, 'detail.powa');

    powa.on('stickyEngage', () => console.debug('STICKY ENGAGED'));
    powa.on('stickyDisengage', () => console.debug('STICKY DISENGAGED'));
    powa.on('stickyClose', () => console.debug('STICKY CLOSED'));

    new Sticky({powa});
});

Conditional Instantiation

By default, all Sticky looks for is for a powa object to have data-sticky="true". At that point, as long as Sticky has been instantiated (as in the basic example above) then the player will be sticky.

What if you didn’t want all players to be sticky? That would require conditionally enabling or disabling the sticky attribute.

If your player template does not have the data-sticky attribute then you would have to conditionally add that attribute and instantiate Sticky. Consider you only wanted the first player on a page to be sticky:

    window.addEventListener('powaReady', event => {
  const powa = get(event, 'detail.powa');

    const dataset = powa.getDataset();

    if (dataset.powaIndex === 0) {
        const powaEl = powa.getElement();
        powaEl.setAttribute('data-sticky', 'true');

       new Sticky({powa});
    }
});

Customization

Basic customization options exist. Such as the ‘Close’ (default: “Close”) text and whether to stick to the top or the bottom of the viewport (’bottom’ or ‘top’).

    window.addEventListener('powaReady', event => {
    const powa = get(event, 'detail.powa');

    new Sticky({
        powa,
        closeText: 'Shut', // default: 'Close'
        location: 'top', // default: 'bottom'
    });
});

Further Customization

Change the ‘Close’ text and sticking to the top of the viewport isn’t good enough? Then you can customize the HTML template and CSS of the sticky player. The template property should be a function that returns a string of HTML. The style property can be a string of CSS or a function that returns a string of CSS. In the example below we are instantiating Sticky with the default values.

    window.addEventListener('powaReady', event => {
    const powa = get(event, 'detail.powa');

    new Sticky({
        powa,

        template: config => `
            <div class="powa-sticky-stuck${ config.isMobile ? ` powa-sticky-mobile` : '' }">
                <div class="powa-sticky-stick">
                    <div class="powa-sticky-close">
                        <span>${ config.closeText }</span>
                    </div>
                </div>
            </div>`,

        style: location => `
            @keyframes powa-sticky-slide-in {
                0% {
                    ${ location }: -400px;
                }
                100% {
                    ${ location }: 13px;
                }
            }

            @keyframes powa-sticky-slide-in-mobile {
                0% {
                    ${ location }: -400px;
                }
                100% {
                    ${ location }: 13px;
                }
            }

            .powa-sticky-stick.powa-sticky {
                position: fixed;
                right: 13px;
                z-index: 2147483647;
                animation: powa-sticky-slide-in .5s;
                min-width: 220px;
                max-width: 492px;
                width: 33%;
            ${ location }: 13px;
            }

            .powa-sticky-stuck.powa-sticky-mobile .powa-sticky-stick.powa-sticky {
                animation: powa-sticky-slide-in-mobile .5s;
                width: 200px;
            }

            .powa-sticky-close {
                font-size: 14px;
                line-height: 22px;
                display: none;
                cursor: pointer;
                background: #333;
                padding: 7px 11px;
                color: #fff;
                border-radius: 5px 5px 0 0;
                -moz-box-shadow: 0 2px 2px #696969;
                -webkit-box-shadow: 0 2px 2px #696969;
                box-shadow: 0 2px 2px #696969;
            }

            .powa-sticky-close i {
                padding-left: .5em;
            }

            .powa-sticky-stick.powa-sticky .powa-sticky-close {
                display: inline-block;
            }

            .powa-sticky-stick.powa-sticky .powa-sticky-close i {
                padding: .25em;
                font-size: 1.25em;
            }

            .powa-sticky-stuck.powa-sticky {
                width: 100%;
                padding-bottom: 56.25%;
                background-color: #d3d3d3;
                background-size: cover;
                background-color: black;
            }`,
    });
});