@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.15.1 to 1.15.2

index.html.md

@@ -258,2 +258,60 @@ # 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.
+
+```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`
+  <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 style="position: relative;">
+      <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>`
+}
+```
+
+~~~html
+<glomex-dialog rotate-to-fullscreen>
+  <!-- ... -->
+</glomex-dialog>
+~~~
+
 ### With custom placeholder
@@ -521,5 +579,5 @@
 
-### With IntersectionObserver and custom position
+### With IntersectionObserver and dock-mode = sticky
 
-This example auto docks the video element when the player gets scrolled out of view.
+This example auto docks the video element when the player gets scrolled out of view (similar to `position: sticky`).
 
@@ -532,5 +590,9 @@ ```js preact
   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);
+  }
 
@@ -552,3 +614,5 @@ let onceVisible = false;
       }
-      if (entries[0].intersectionRatio < 1 && glomexDialog.getAttribute('mode') !== 'dock') {
+      if (entries[0].intersectionRatio < 1 && (
+        currentMode !== 'dock'
+      )) {
         glomexDialog.setAttribute('mode', 'dock');
@@ -559,3 +623,4 @@ } else if (entries[0].intersectionRatio === 1) {
     }, {
-      threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+      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'
     });
@@ -574,11 +639,22 @@ if (dialog.current) {
   <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>
+  <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-target-inset="50px 10px auto auto">
+  <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">
@@ -604,3 +680,8 @@ <div style="position: relative;">
 <!-- The intersection-observer-code is custom in the above example -->
-<glomex-dialog mode="inline" dock-target-inset="50px 10px auto auto">
+<glomex-dialog
+  mode="inline"
+  dock-target-inset="50px 10px auto auto"
+  dock-mode="sticky"
+  dock-sticky-target-top="48"
+>
   <!-- ... -->
@@ -607,0 +688,0 @@ </glomex-dialog>

package.json

 {
   "name": "@glomex/glomex-dialog",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "description": "A dialog web component that allows docking a video player or putting it in a lightbox",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162187

increased by38.15%

Number of package files

11

increased by10%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes