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

@glomex/glomex-dialog

Package Overview

Dependencies

Advanced tools

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.1
Source
npm

Version published: 5 months ago

Weekly downloads: 201; increased by116.13%

Maintainers: 0

Weekly downloads

Created: 4 years ago

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

Method	Type
`refreshDockDialog`	`(): void`

Events

Event	Type
`modechange`	`CustomEvent<{ mode: string; }>`
`dockchange`	`CustomEvent<{ scale: number; }>`

License

Apache 2.0 License

Keywords

FAQs

What is @glomex/glomex-dialog?

Is @glomex/glomex-dialog popular?

Is @glomex/glomex-dialog well maintained?

Package last updated on 04 Jul 2024

Did you know?

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

@glomex/glomex-dialog

glomex-dialog

Testing

Usage

Examples

Inline mode

Downscale the dock mode

Alternative dock target

Hidden

Using rotate-to-fullscreen

With custom placeholder

Provide own dock overlay

Custom dialog layout

With IntersectionObserver and dock-mode = sticky

API

Attributes

Methods

Events

License

Keywords

Related posts

Input Validation Vulnerabilities Dominate MITRE's 2024 CWE Top 25 List

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