Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@glomex/glomex-dialog

Package Overview
Dependencies
Maintainers
0
Versions
95
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@glomex/glomex-dialog

A dialog web component that allows docking a video player or putting it in a lightbox

  • 3.0.6
  • latest
  • Source
  • npm
  • Socket score
Version published
Maintainers
0
Created
Source

glomex-dialog

A dialog web component that allows docking a video player or putting it in a lightbox. It allows implementing a similar feature as amp-video-docking but without using AMP.

This component only works in modern browsers that support Web Components with Shadow DOM.

For a formatted view of this document, please visit: http://unpkg.com/@glomex/glomex-dialog/index.html

Testing

Checkout this project, do npm install, npm start and visit http://localhost:5000.

Usage

<script type="module">
  import 'http://unpkg.com/@glomex/glomex-dialog';
</script>
<style>
  glomex-dialog {
    --placeholder-background-color: red;
  }
</style>
<!--
  mode: "hidden" | "inline" | "dock" | "lightbox"
  | "custom-value" (which behaves like inline)
-->
<glomex-dialog mode="inline">
  <!--
    "dock-background" is optional:
    enables drag'n'drop feature when defined
  -->
  <div slot="dock-background"></div>
  <div slot="placeholder"></div>
  <div slot="dialog-element">
    <!-- Your HTML that should be docked / put into lightbox -->
  </div>
</glomex-dialog>

Examples

Inline mode

With custom background color.

import { html, render, useRef } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  return html` <style>
      glomex-dialog#inlineDialog {
        --placeholder-background-color: red;
      }
    </style>
    <p>
      <select ref=${select}>
        <option value="hidden">hidden</option>
        <option value="inline" selected>inline</option>
        <option value="dock">dock</option>
        <option value="lightbox">lightbox</option>
        <option value="custom-value">custom-value</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog id="inlineDialog" ref=${dialog} mode="inline">
      <div slot="dialog-element">
        <div>
          <div class="placeholder-16x9"></div>
          <video
            class="video-element"
            controls
            playsinline
            webkit-playsinline
            preload="none"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          ></video>
        </div>
      </div>
    </glomex-dialog>`;
};

<style>
  glomex-dialog {
    --placeholder-background-color: red;
  }
</style>
<glomex-dialog mode="inline">
  <!-- ... -->
</glomex-dialog>

Downscale the dock mode

import { html, render, useRef } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  return html` <p>
      <select ref=${select}>
        <option value="hidden">hidden</option>
        <option value="inline" selected>inline</option>
        <option value="dock">dock</option>
        <option value="lightbox">lightbox</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog ref=${dialog} mode="inline" dock-downscale>
      <div slot="dialog-element">
        <div>
          <div class="placeholder-16x9"></div>
          <video
            class="video-element"
            controls
            playsinline
            webkit-playsinline
            preload="none"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          ></video>
        </div>
      </div>
    </glomex-dialog>`;
};

<glomex-dialog mode="inline" dock-downscale>
  <!-- ... -->
</glomex-dialog>

Alternative dock target

Can render into an alternative dock target when this dock target is visible during dock transition. Otherwise it uses the default dock target.

import { html, render, useRef } from 'docup';

const sidebar = document.querySelector('.sidebar');
const alternativeDockTarget = document.createElement('div');
alternativeDockTarget.setAttribute('id', 'alternative-dock-target');
alternativeDockTarget.style.background = '#999';
alternativeDockTarget.width = '100%';
alternativeDockTarget.pointerEvents = 'none';
alternativeDockTarget.innerHTML = '<div class="placeholder-16x9"></div>';
sidebar.appendChild(alternativeDockTarget);

export default () => {
  const select = useRef();
  const dialog = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  return html` <p>
      <select ref=${select}>
        <option value="hidden">hidden</option>
        <option value="inline" selected>inline</option>
        <option value="dock">dock</option>
        <option value="lightbox">lightbox</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog
      ref=${dialog}
      dock-target="#alternative-dock-target"
      mode="inline"
    >
      <div slot="dialog-element">
        <div>
          <div class="placeholder-16x9"></div>
          <video
            class="video-element"
            controls
            playsinline
            webkit-playsinline
            preload="none"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          ></video>
        </div>
      </div>
    </glomex-dialog>`;
};

<glomex-dialog mode="inline" dock-target="#some-css-selector">
  <!-- ... -->
</glomex-dialog>

Hidden

import { html, render, useRef } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  return html` <p>
      <select ref=${select}>
        <option value="hidden" selected>hidden</option>
        <option value="inline">inline</option>
        <option value="dock">dock</option>
        <option value="lightbox">lightbox</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog mode="hidden" ref=${dialog}>
      <div slot="dialog-element">
        <div>
          <div class="placeholder-16x9"></div>
          <video
            class="video-element"
            controls
            playsinline
            webkit-playsinline
            preload="none"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          ></video>
        </div>
      </div>
    </glomex-dialog>`;
};

<!-- without a defined mode attribute -->
<glomex-dialog mode="hidden">
  <!-- ... -->
</glomex-dialog>

Using rotate-to-fullscreen

You can enable this setting, so that the dialog goes into fullscreen on mobile phones (up until 480px width) when rotated to landscape in lightbox mode.

import { html, render, useRef } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  return html` <p>
      <select ref=${select}>
        <option value="hidden">hidden</option>
        <option value="inline">inline</option>
        <option value="dock">dock</option>
        <option value="lightbox" selected>lightbox</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <style>
      glomex-dialog[mode='lightbox'][fullscreen] video {
        height: 100vh;
        min-height: 100%;
      }
      glomex-dialog[mode='lightbox'][fullscreen] .placeholder-16x9 {
        padding-top: unset;
      }
    </style>
    <glomex-dialog
      id="with-rotate-to-fullscreen"
      mode="inline"
      ref=${dialog}
      rotate-to-fullscreen
    >
      <div slot="dialog-element">
        <div>
          <div class="placeholder-16x9"></div>
          <video
            class="video-element"
            controls
            playsinline
            webkit-playsinline
            preload="none"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          ></video>
        </div>
      </div>
    </glomex-dialog>`;
};

<glomex-dialog rotate-to-fullscreen>
  <!-- ... -->
</glomex-dialog>

With custom placeholder

import { html, render, useRef } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  return html` <style>
      #myPlaceholder:defined {
        display: block;
        width: 100%;
        height: 100%;
        background: green;
      }
    </style>
    <p>
      <select ref=${select}>
        <option value="hidden">hidden</option>
        <option value="inline" selected>inline</option>
        <option value="dock">dock</option>
        <option value="lightbox">lightbox</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog id="inlineDialog" ref=${dialog} mode="inline">
      <div slot="placeholder" id="myPlaceholder"></div>
      <div slot="dialog-element">
        <div class="placeholder-16x9"></div>
        <video
          class="video-element"
          controls
          playsinline
          webkit-playsinline
          preload="none"
          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
        ></video>
      </div>
    </glomex-dialog>`;
};

<style>
  #myPlaceholder:defined {
    display: block;
    width: 100%;
    height: 100%;
    background: green;
  }
</style>
<glomex-dialog mode="inline">
  <div id="myPlaceholder" slot="placeholder"></div>
</glomex-dialog>

Provide own dock overlay

import { html, render, useRef } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const video = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  const onPlayButtonClick = (event) => {
    video.current.play();
    event.preventDefault();
  };

  const onPauseButtonClick = (event) => {
    video.current.pause();
    event.preventDefault();
  };

  return html` <p>
      <style>
        glomex-dialog .custom-overlay {
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          cursor: move;
        }
        glomex-dialog[mode='dock'] .custom-overlay:hover {
          display: block;
          opacity: 1;
        }

        glomex-dialog .custom-overlay:hover {
          background-color: rgba(200, 200, 200, 0.7);
        }
        glomex-dialog .controls {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          height: 100%;
        }
        glomex-dialog .play-button,
        glomex-dialog .pause-button {
          color: black;
          font-size: 2em;
          cursor: pointer;
        }

        glomex-dialog .play-button:hover,
        glomex-dialog .pause-button:hover {
          color: white;
          font-size: 2em;
          cursor: pointer;
        }
      </style>
      <select ref=${select}>
        <option value="hidden">hidden</option>
        <option value="inline" selected>inline</option>
        <option value="dock">dock</option>
        <option value="lightbox">lightbox</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog
      ref=${dialog}
      mode="inline"
      dock-target-inset="0px auto auto 0px"
    >
      <div slot="dock-background" class="custom-overlay">
        <div class="controls">
          <button class="play-button" onClick=${onPlayButtonClick}>▶</button>
          <button class="pause-button" onClick=${onPauseButtonClick}>■</button>
        </div>
      </div>
      <div slot="dialog-element">
        <div>
          <div class="placeholder-16x9"></div>
          <video
            ref=${video}
            class="video-element"
            controls
            playsinline
            webkit-playsinline
            preload="none"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          ></video>
        </div>
      </div>
    </glomex-dialog>`;
};

<style>
  glomex-dialog .custom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: move;
  }
  glomex-dialog .custom-overlay:hover {
    background-color: rgba(200, 200, 200, 0.7);
  }
</style>
<glomex-dialog mode="inline" dock-target-inset="50px 10px auto auto">
  <!-- when this is defined it automatically makes the element draggable -->
  <!-- allows to place custom elements in the dock-background -->
  <div slot="dock-background" class="custom-overlay">
    <!-- place custom controls here -->
  </div>
  <!-- ... -->
</glomex-dialog>

Custom dialog layout

import { html, render, useRef } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };

  return html` <style>
      glomex-dialog .title {
        display: none;
        color: white;
        background: red;
        whitespace: no-wrap;
      }

      glomex-dialog[mode='dock'] .title,
      glomex-dialog[mode='lightbox'] .title {
        display: block;
        font-size: 1em;
      }

      glomex-dialog[mode='dock'] .backdrop,
      glomex-dialog[mode='lightbox'] .backdrop {
        border: 10px solid red;
        background: red;
      }
    </style>
    <p>
      <select ref=${select}>
        <option value="hidden">hidden</option>
        <option value="inline" selected>inline</option>
        <option value="dock">dock</option>
        <option value="lightbox">lightbox</option>
      </select>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog
      ref=${dialog}
      mode="inline"
      dock-aspect-ratio="16:11"
      dock-target-inset="auto 0px 0px auto"
    >
      <div slot="dialog-element">
        <div class="backdrop">
          <div class="title">Super Duper Title</div>
          <div>
            <div class="placeholder-16x9"></div>
            <video
              class="video-element"
              controls
              playsinline
              webkit-playsinline
              preload="none"
              src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
              poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
            ></video>
          </div>
        </div>
      </div>
    </glomex-dialog>`;
};

<style>
  glomex-dialog[mode='dock'] .backdrop,
  glomex-dialog[mode='lightbox'] .backdrop {
    background: red;
    border: 10px solid red;
  }
</style>
<!-- You can set a different aspect ratio for the dock mode -->
<glomex-dialog
  mode="inline"
  dock-aspect-ratio="16:10"
  dock-target-inset="50px 10px auto auto"
>
  <div class="backdrop">
    <div class="title">Some Title</div>
    <!-- ... --->
  </div>
</glomex-dialog>

With IntersectionObserver and dock-mode = sticky

This example auto docks the video element when the player gets scrolled out of view (similar to position: sticky).

import { html, render, useRef, useEffect } from 'docup';

export default () => {
  const select = useRef();
  const dialog = useRef();
  const dockMode = useRef();
  const onButtonClick = () => {
    dialog.current.setAttribute('mode', select.current.value);
  };
  const onDockModeChange = () => {
    dialog.current.setAttribute('dock-mode', dockMode.current.value);
  };

  let onceVisible = false;
  let currentIntersectionRatio;

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const glomexDialog = dialog.current;
        currentIntersectionRatio = entries[0].intersectionRatio;
        if (!onceVisible) {
          onceVisible = entries[0].intersectionRatio === 1;
          return;
        }
        const currentMode = glomexDialog.getAttribute('mode');
        if (currentMode === 'lightbox' || !currentMode) {
          return;
        }
        if (entries[0].intersectionRatio < 1 && currentMode !== 'dock') {
          glomexDialog.setAttribute('mode', 'dock');
        } else if (entries[0].intersectionRatio === 1) {
          glomexDialog.setAttribute('mode', 'inline');
        }
      },
      {
        threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
        rootMargin: '-48px 0px 0px 0px'
      }
    );
    if (dialog.current) {
      observer.observe(dialog.current);
      dialog.current.addEventListener('modechange', (evt) => {
        if (evt.detail.mode === 'inline' && currentIntersectionRatio !== 1) {
          onceVisible = false;
        }
      });
    }
  }, [dialog]);

  return html` <p>
      <label>
        Mode
        <select style="margin-left:1em;" ref=${select}>
          <option value="hidden">hidden</option>
          <option value="inline">inline</option>
          <option value="dock" selected>dock</option>
          <option value="sticky">sticky</option>
          <option value="lightbox">lightbox</option>
        </select>
      </label>
      <label style="margin-left:1em;">
        Dock-Mode
        <select
          onChange="${onDockModeChange}"
          style="margin-left:1em;"
          ref=${dockMode}
        >
          <option value="">none</option>
          <option value="sticky" selected>sticky</option>
        </select>
      </label>
      <button onClick=${onButtonClick} class="button">
        Switch Dialog Mode
      </button>
    </p>
    <glomex-dialog
      ref=${dialog}
      mode="inline"
      dock-mode="sticky"
      dock-target-inset="48px 10px auto auto"
      dock-sticky-target-top="48"
    >
      <div slot="dialog-element">
        <div>
          <div class="placeholder-16x9"></div>
          <video
            class="video-element"
            controls
            playsinline
            webkit-playsinline
            preload="none"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          ></video>
        </div>
      </div>
    </glomex-dialog>`;
};

<!-- The intersection-observer-code is custom in the above example -->
<glomex-dialog
  mode="inline"
  dock-target-inset="50px 10px auto auto"
  dock-mode="sticky"
  dock-sticky-target-top="48"
>
  <!-- ... -->
</glomex-dialog>

API

Attributes

Attribute
aspect-ratio
dock-aspect-ratio
dock-target
dock-target-inset
mode

Methods

MethodType
refreshDockDialog(): void

Events

EventType
modechangeCustomEvent<{ mode: string; }>
dockchangeCustomEvent<{ scale: number; }>

License

Apache 2.0 License

Keywords

FAQs

Package last updated on 11 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Risky Business Podcast: Why Open Source Software Needs Better Malware Tracking

Security News

Risky Business Podcast: Why Open Source Software Needs Better Malware Tracking

In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.

By Sarah Gooding  -  Nov 20, 2024
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc