https://github.com/glomex/glomex-dialog
A dialog web component that allows docking a video player or putting it in a lightbox
https://github.com/glomex/glomex-dialog
dialog docking web-component
Last synced: 9 months ago
JSON representation
A dialog web component that allows docking a video player or putting it in a lightbox
- Host: GitHub
- URL: https://github.com/glomex/glomex-dialog
- Owner: glomex
- License: apache-2.0
- Created: 2021-05-17T11:09:25.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T09:59:55.000Z (over 1 year ago)
- Last Synced: 2025-05-27T07:02:20.736Z (10 months ago)
- Topics: dialog, docking, web-component
- Language: JavaScript
- Homepage: http://unpkg.com/@glomex/glomex-dialog/index.html
- Size: 360 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://amp.dev/documentation/examples/multimedia-animations/advanced_video_docking/) but without using AMP.
This component only works in modern browsers that support [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) with [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components#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
```html
import 'http://unpkg.com/@glomex/glomex-dialog';
glomex-dialog {
--placeholder-background-color: red;
}
```
## Examples
### Inline mode
With custom background color.
```js preact
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`
glomex-dialog#inlineDialog {
--placeholder-background-color: red;
}
hidden
inline
dock
lightbox
custom-value
Switch Dialog Mode
`;
};
```
```html
glomex-dialog {
--placeholder-background-color: red;
}
```
### Downscale the dock mode
```js preact
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`
hidden
inline
dock
lightbox
Switch Dialog Mode
`;
};
```
```html
```
### 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.
```js preact
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 = '
';
sidebar.appendChild(alternativeDockTarget);
export default () => {
const select = useRef();
const dialog = useRef();
const onButtonClick = () => {
dialog.current.setAttribute('mode', select.current.value);
};
return html`
hidden
inline
dock
lightbox
Switch Dialog Mode
`;
};
```
```html
```
### Hidden
```js preact
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`
hidden
inline
dock
lightbox
Switch Dialog Mode
`;
};
```
```html
```
### 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.
```js preact
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`
hidden
inline
dock
lightbox
Switch Dialog Mode
glomex-dialog[mode='lightbox'][fullscreen] video {
height: 100vh;
min-height: 100%;
}
glomex-dialog[mode='lightbox'][fullscreen] .placeholder-16x9 {
padding-top: unset;
}
`;
};
```
```html
```
### With custom placeholder
```js preact
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`
#myPlaceholder:defined {
display: block;
width: 100%;
height: 100%;
background: green;
}
hidden
inline
dock
lightbox
Switch Dialog Mode
`;
};
```
```html
#myPlaceholder:defined {
display: block;
width: 100%;
height: 100%;
background: green;
}
```
### Provide own dock overlay
```js preact
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`
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;
}
hidden
inline
dock
lightbox
Switch Dialog Mode
`;
};
```
```html
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);
}
```
### Custom dialog layout
```js preact
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`
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;
}
hidden
inline
dock
lightbox
Switch Dialog Mode
Super Duper Title
`;
};
```
```html
glomex-dialog[mode='dock'] .backdrop,
glomex-dialog[mode='lightbox'] .backdrop {
background: red;
border: 10px solid red;
}
Some Title
```
### 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`).
```js preact
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`
Mode
hidden
inline
dock
sticky
lightbox
Dock-Mode
none
sticky
Switch Dialog Mode
`;
};
```
```html
```
## 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](https://oss.ninja/apache-2.0-header/glomex)