# Sticky Plugin

Source: https://dev.arcxp.com/video-center/developer-docs/video-center-player-sticky-plugin/

Video Center Player - 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

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

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

### Inline

![Inline Player](https://dev.arcxp.com/images/video-center/inline-video.png)

### Sticky

![Sticky Player](https://dev.arcxp.com/images/video-center/sticky-video.png)

## Events

The _Sticky_ module emits events via the `powa` object when it is _engaged_ (`stickyEngage`), _disengaged_ (`stickyDisengage`), and _closed_ (`stickyClose`).

```js
    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 a `powa` object with `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:_

```js
    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’).

```js
    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.

```js
    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;
            }`,
    });
});
```