{"id":15766940,"url":"https://github.com/glomex/glomex-dialog","last_synced_at":"2025-06-12T11:33:18.824Z","repository":{"id":44634462,"uuid":"368155719","full_name":"glomex/glomex-dialog","owner":"glomex","description":"A dialog web component that allows docking a video player or putting it in a lightbox","archived":false,"fork":false,"pushed_at":"2024-07-11T09:59:55.000Z","size":369,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-27T07:02:20.736Z","etag":null,"topics":["dialog","docking","web-component"],"latest_commit_sha":null,"homepage":"http://unpkg.com/@glomex/glomex-dialog/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glomex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-17T11:09:25.000Z","updated_at":"2024-07-11T09:59:56.000Z","dependencies_parsed_at":"2024-04-30T15:00:57.113Z","dependency_job_id":"8ec7998a-06a9-4863-827e-4642ad77a9a6","html_url":"https://github.com/glomex/glomex-dialog","commit_stats":{"total_commits":211,"total_committers":3,"mean_commits":70.33333333333333,"dds":0.009478672985781977,"last_synced_commit":"4a3e2f0e2bfe04e570970610facd29671283d5ce"},"previous_names":[],"tags_count":94,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glomex%2Fglomex-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glomex%2Fglomex-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glomex%2Fglomex-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glomex%2Fglomex-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glomex","download_url":"https://codeload.github.com/glomex/glomex-dialog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glomex%2Fglomex-dialog/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":257698402,"owners_count":22587802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dialog","docking","web-component"],"created_at":"2024-10-04T13:03:53.461Z","updated_at":"2025-06-12T11:33:18.726Z","avatar_url":"https://github.com/glomex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- @format --\u003e\n\n# glomex-dialog\n\nA dialog web component that allows docking a video player or putting it in a lightbox.\nIt allows implementing a similar feature as [amp-video-docking](https://amp.dev/documentation/examples/multimedia-animations/advanced_video_docking/) but without using AMP.\n\nThis 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).\n\nFor a formatted view of this document, please visit: http://unpkg.com/@glomex/glomex-dialog/index.html\n\n## Testing\n\nCheckout this project, do `npm install`, `npm start` and visit http://localhost:5000.\n\n## Usage\n\n```html\n\u003cscript type=\"module\"\u003e\n  import 'http://unpkg.com/@glomex/glomex-dialog';\n\u003c/script\u003e\n\u003cstyle\u003e\n  glomex-dialog {\n    --placeholder-background-color: red;\n  }\n\u003c/style\u003e\n\u003c!--\n  mode: \"hidden\" | \"inline\" | \"dock\" | \"lightbox\"\n  | \"custom-value\" (which behaves like inline)\n--\u003e\n\u003cglomex-dialog mode=\"inline\"\u003e\n  \u003c!--\n    \"dock-background\" is optional:\n    enables drag'n'drop feature when defined\n  --\u003e\n  \u003cdiv slot=\"dock-background\"\u003e\u003c/div\u003e\n  \u003cdiv slot=\"placeholder\"\u003e\u003c/div\u003e\n  \u003cdiv slot=\"dialog-element\"\u003e\n    \u003c!-- Your HTML that should be docked / put into lightbox --\u003e\n  \u003c/div\u003e\n\u003c/glomex-dialog\u003e\n```\n\n## Examples\n\n### Inline mode\n\nWith custom background color.\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  return html` \u003cstyle\u003e\n      glomex-dialog#inlineDialog {\n        --placeholder-background-color: red;\n      }\n    \u003c/style\u003e\n    \u003cp\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\" selected\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n        \u003coption value=\"custom-value\"\u003ecustom-value\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog id=\"inlineDialog\" ref=${dialog} mode=\"inline\"\u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n          \u003cvideo\n            class=\"video-element\"\n            controls\n            playsinline\n            webkit-playsinline\n            preload=\"none\"\n            src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n            poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          \u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003cstyle\u003e\n  glomex-dialog {\n    --placeholder-background-color: red;\n  }\n\u003c/style\u003e\n\u003cglomex-dialog mode=\"inline\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### Downscale the dock mode\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  return html` \u003cp\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\" selected\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog ref=${dialog} mode=\"inline\" dock-downscale\u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n          \u003cvideo\n            class=\"video-element\"\n            controls\n            playsinline\n            webkit-playsinline\n            preload=\"none\"\n            src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n            poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          \u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003cglomex-dialog mode=\"inline\" dock-downscale\u003e\n  \u003c!-- ... --\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### Alternative dock target\n\nCan render into an alternative dock target when this dock target is visible during dock transition.\nOtherwise it uses the default dock target.\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nconst sidebar = document.querySelector('.sidebar');\nconst alternativeDockTarget = document.createElement('div');\nalternativeDockTarget.setAttribute('id', 'alternative-dock-target');\nalternativeDockTarget.style.background = '#999';\nalternativeDockTarget.width = '100%';\nalternativeDockTarget.pointerEvents = 'none';\nalternativeDockTarget.innerHTML = '\u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e';\nsidebar.appendChild(alternativeDockTarget);\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  return html` \u003cp\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\" selected\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog\n      ref=${dialog}\n      dock-target=\"#alternative-dock-target\"\n      mode=\"inline\"\n    \u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n          \u003cvideo\n            class=\"video-element\"\n            controls\n            playsinline\n            webkit-playsinline\n            preload=\"none\"\n            src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n            poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          \u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003cglomex-dialog mode=\"inline\" dock-target=\"#some-css-selector\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### Hidden\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  return html` \u003cp\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\" selected\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\"\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog mode=\"hidden\" ref=${dialog}\u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n          \u003cvideo\n            class=\"video-element\"\n            controls\n            playsinline\n            webkit-playsinline\n            preload=\"none\"\n            src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n            poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          \u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003c!-- without a defined mode attribute --\u003e\n\u003cglomex-dialog mode=\"hidden\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### Using rotate-to-fullscreen\n\nYou 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.\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  return html` \u003cp\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\"\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\" selected\u003elightbox\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cstyle\u003e\n      glomex-dialog[mode='lightbox'][fullscreen] video {\n        height: 100vh;\n        min-height: 100%;\n      }\n      glomex-dialog[mode='lightbox'][fullscreen] .placeholder-16x9 {\n        padding-top: unset;\n      }\n    \u003c/style\u003e\n    \u003cglomex-dialog\n      id=\"with-rotate-to-fullscreen\"\n      mode=\"inline\"\n      ref=${dialog}\n      rotate-to-fullscreen\n    \u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n          \u003cvideo\n            class=\"video-element\"\n            controls\n            playsinline\n            webkit-playsinline\n            preload=\"none\"\n            src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n            poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          \u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003cglomex-dialog rotate-to-fullscreen\u003e\n  \u003c!-- ... --\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### With custom placeholder\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  return html` \u003cstyle\u003e\n      #myPlaceholder:defined {\n        display: block;\n        width: 100%;\n        height: 100%;\n        background: green;\n      }\n    \u003c/style\u003e\n    \u003cp\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\" selected\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog id=\"inlineDialog\" ref=${dialog} mode=\"inline\"\u003e\n      \u003cdiv slot=\"placeholder\" id=\"myPlaceholder\"\u003e\u003c/div\u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n        \u003cvideo\n          class=\"video-element\"\n          controls\n          playsinline\n          webkit-playsinline\n          preload=\"none\"\n          src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n          poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n        \u003e\u003c/video\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003cstyle\u003e\n  #myPlaceholder:defined {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background: green;\n  }\n\u003c/style\u003e\n\u003cglomex-dialog mode=\"inline\"\u003e\n  \u003cdiv id=\"myPlaceholder\" slot=\"placeholder\"\u003e\u003c/div\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### Provide own dock overlay\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const video = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  const onPlayButtonClick = (event) =\u003e {\n    video.current.play();\n    event.preventDefault();\n  };\n\n  const onPauseButtonClick = (event) =\u003e {\n    video.current.pause();\n    event.preventDefault();\n  };\n\n  return html` \u003cp\u003e\n      \u003cstyle\u003e\n        glomex-dialog .custom-overlay {\n          opacity: 0;\n          position: absolute;\n          top: 0;\n          left: 0;\n          bottom: 0;\n          right: 0;\n          cursor: move;\n        }\n        glomex-dialog[mode='dock'] .custom-overlay:hover {\n          display: block;\n          opacity: 1;\n        }\n\n        glomex-dialog .custom-overlay:hover {\n          background-color: rgba(200, 200, 200, 0.7);\n        }\n        glomex-dialog .controls {\n          display: flex;\n          justify-content: space-evenly;\n          align-items: center;\n          height: 100%;\n        }\n        glomex-dialog .play-button,\n        glomex-dialog .pause-button {\n          color: black;\n          font-size: 2em;\n          cursor: pointer;\n        }\n\n        glomex-dialog .play-button:hover,\n        glomex-dialog .pause-button:hover {\n          color: white;\n          font-size: 2em;\n          cursor: pointer;\n        }\n      \u003c/style\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\" selected\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog\n      ref=${dialog}\n      mode=\"inline\"\n      dock-target-inset=\"0px auto auto 0px\"\n    \u003e\n      \u003cdiv slot=\"dock-background\" class=\"custom-overlay\"\u003e\n        \u003cdiv class=\"controls\"\u003e\n          \u003cbutton class=\"play-button\" onClick=${onPlayButtonClick}\u003e▶\u003c/button\u003e\n          \u003cbutton class=\"pause-button\" onClick=${onPauseButtonClick}\u003e■\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n          \u003cvideo\n            ref=${video}\n            class=\"video-element\"\n            controls\n            playsinline\n            webkit-playsinline\n            preload=\"none\"\n            src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n            poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          \u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003cstyle\u003e\n  glomex-dialog .custom-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    cursor: move;\n  }\n  glomex-dialog .custom-overlay:hover {\n    background-color: rgba(200, 200, 200, 0.7);\n  }\n\u003c/style\u003e\n\u003cglomex-dialog mode=\"inline\" dock-target-inset=\"50px 10px auto auto\"\u003e\n  \u003c!-- when this is defined it automatically makes the element draggable --\u003e\n  \u003c!-- allows to place custom elements in the dock-background --\u003e\n  \u003cdiv slot=\"dock-background\" class=\"custom-overlay\"\u003e\n    \u003c!-- place custom controls here --\u003e\n  \u003c/div\u003e\n  \u003c!-- ... --\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### Custom dialog layout\n\n```js preact\nimport { html, render, useRef } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n\n  return html` \u003cstyle\u003e\n      glomex-dialog .title {\n        display: none;\n        color: white;\n        background: red;\n        whitespace: no-wrap;\n      }\n\n      glomex-dialog[mode='dock'] .title,\n      glomex-dialog[mode='lightbox'] .title {\n        display: block;\n        font-size: 1em;\n      }\n\n      glomex-dialog[mode='dock'] .backdrop,\n      glomex-dialog[mode='lightbox'] .backdrop {\n        border: 10px solid red;\n        background: red;\n      }\n    \u003c/style\u003e\n    \u003cp\u003e\n      \u003cselect ref=${select}\u003e\n        \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n        \u003coption value=\"inline\" selected\u003einline\u003c/option\u003e\n        \u003coption value=\"dock\"\u003edock\u003c/option\u003e\n        \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog\n      ref=${dialog}\n      mode=\"inline\"\n      dock-aspect-ratio=\"16:11\"\n      dock-target-inset=\"auto 0px 0px auto\"\n    \u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv class=\"backdrop\"\u003e\n          \u003cdiv class=\"title\"\u003eSuper Duper Title\u003c/div\u003e\n          \u003cdiv\u003e\n            \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n            \u003cvideo\n              class=\"video-element\"\n              controls\n              playsinline\n              webkit-playsinline\n              preload=\"none\"\n              src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n              poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n            \u003e\u003c/video\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003cstyle\u003e\n  glomex-dialog[mode='dock'] .backdrop,\n  glomex-dialog[mode='lightbox'] .backdrop {\n    background: red;\n    border: 10px solid red;\n  }\n\u003c/style\u003e\n\u003c!-- You can set a different aspect ratio for the dock mode --\u003e\n\u003cglomex-dialog\n  mode=\"inline\"\n  dock-aspect-ratio=\"16:10\"\n  dock-target-inset=\"50px 10px auto auto\"\n\u003e\n  \u003cdiv class=\"backdrop\"\u003e\n    \u003cdiv class=\"title\"\u003eSome Title\u003c/div\u003e\n    \u003c!-- ... ---\u003e\n  \u003c/div\u003e\n\u003c/glomex-dialog\u003e\n```\n\n### With IntersectionObserver and dock-mode = sticky\n\nThis example auto docks the video element when the player gets scrolled out of view (similar to `position: sticky`).\n\n```js preact\nimport { html, render, useRef, useEffect } from 'docup';\n\nexport default () =\u003e {\n  const select = useRef();\n  const dialog = useRef();\n  const dockMode = useRef();\n  const onButtonClick = () =\u003e {\n    dialog.current.setAttribute('mode', select.current.value);\n  };\n  const onDockModeChange = () =\u003e {\n    dialog.current.setAttribute('dock-mode', dockMode.current.value);\n  };\n\n  let onceVisible = false;\n  let currentIntersectionRatio;\n\n  useEffect(() =\u003e {\n    const observer = new IntersectionObserver(\n      (entries) =\u003e {\n        const glomexDialog = dialog.current;\n        currentIntersectionRatio = entries[0].intersectionRatio;\n        if (!onceVisible) {\n          onceVisible = entries[0].intersectionRatio === 1;\n          return;\n        }\n        const currentMode = glomexDialog.getAttribute('mode');\n        if (currentMode === 'lightbox' || !currentMode) {\n          return;\n        }\n        if (entries[0].intersectionRatio \u003c 1 \u0026\u0026 currentMode !== 'dock') {\n          glomexDialog.setAttribute('mode', 'dock');\n        } else if (entries[0].intersectionRatio === 1) {\n          glomexDialog.setAttribute('mode', 'inline');\n        }\n      },\n      {\n        threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],\n        rootMargin: '-48px 0px 0px 0px'\n      }\n    );\n    if (dialog.current) {\n      observer.observe(dialog.current);\n      dialog.current.addEventListener('modechange', (evt) =\u003e {\n        if (evt.detail.mode === 'inline' \u0026\u0026 currentIntersectionRatio !== 1) {\n          onceVisible = false;\n        }\n      });\n    }\n  }, [dialog]);\n\n  return html` \u003cp\u003e\n      \u003clabel\u003e\n        Mode\n        \u003cselect style=\"margin-left:1em;\" ref=${select}\u003e\n          \u003coption value=\"hidden\"\u003ehidden\u003c/option\u003e\n          \u003coption value=\"inline\"\u003einline\u003c/option\u003e\n          \u003coption value=\"dock\" selected\u003edock\u003c/option\u003e\n          \u003coption value=\"sticky\"\u003esticky\u003c/option\u003e\n          \u003coption value=\"lightbox\"\u003elightbox\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/label\u003e\n      \u003clabel style=\"margin-left:1em;\"\u003e\n        Dock-Mode\n        \u003cselect\n          onChange=\"${onDockModeChange}\"\n          style=\"margin-left:1em;\"\n          ref=${dockMode}\n        \u003e\n          \u003coption value=\"\"\u003enone\u003c/option\u003e\n          \u003coption value=\"sticky\" selected\u003esticky\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/label\u003e\n      \u003cbutton onClick=${onButtonClick} class=\"button\"\u003e\n        Switch Dialog Mode\n      \u003c/button\u003e\n    \u003c/p\u003e\n    \u003cglomex-dialog\n      ref=${dialog}\n      mode=\"inline\"\n      dock-mode=\"sticky\"\n      dock-target-inset=\"48px 10px auto auto\"\n      dock-sticky-target-top=\"48\"\n    \u003e\n      \u003cdiv slot=\"dialog-element\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"placeholder-16x9\"\u003e\u003c/div\u003e\n          \u003cvideo\n            class=\"video-element\"\n            controls\n            playsinline\n            webkit-playsinline\n            preload=\"none\"\n            src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n            poster=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          \u003e\u003c/video\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/glomex-dialog\u003e`;\n};\n```\n\n```html\n\u003c!-- The intersection-observer-code is custom in the above example --\u003e\n\u003cglomex-dialog\n  mode=\"inline\"\n  dock-target-inset=\"50px 10px auto auto\"\n  dock-mode=\"sticky\"\n  dock-sticky-target-top=\"48\"\n\u003e\n  \u003c!-- ... --\u003e\n\u003c/glomex-dialog\u003e\n```\n\n## API\n\n### Attributes\n\n| Attribute           |\n| ------------------- |\n| `aspect-ratio`      |\n| `dock-aspect-ratio` |\n| `dock-target`       |\n| `dock-target-inset` |\n| `mode`              |\n\n### Methods\n\n| Method              | Type       |\n| ------------------- | ---------- |\n| `refreshDockDialog` | `(): void` |\n\n### Events\n\n| Event        | Type                              |\n| ------------ | --------------------------------- |\n| `modechange` | `CustomEvent\u003c{ mode: string; }\u003e`  |\n| `dockchange` | `CustomEvent\u003c{ scale: number; }\u003e` |\n\n## License\n\n[Apache 2.0 License](https://oss.ninja/apache-2.0-header/glomex)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglomex%2Fglomex-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglomex%2Fglomex-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglomex%2Fglomex-dialog/lists"}