@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.14.4 to 1.15.0

.eslintrc.json

@@ -21,2 +21,3 @@ {
         "import/prefer-default-export": 0,
+        "import/extensions": 0,
         "no-underscore-dangle": [
@@ -23,0 +24,0 @@ "error", {

glomex-dialog.js

@@ -0,1 +1,3 @@
+import { RotataToFullscreen } from './rotate-to-fullscreen.js';
+
 const NON_VISIBLE_WIDTH = window.innerWidth < 720 ? 320 : 640;
@@ -8,3 +10,6 @@ const DEFAULT_DOCK_TARGET_INSET = '0px 10px auto auto';
 const MAX_DOCK_WIDTH = 400;
+const PHONE_MAX_WIDTH = 480;
 
+const allowRotateToFullscreen = Math.min(window.innerWidth, window.innerHeight) <= PHONE_MAX_WIDTH;
+
 const updateViewPortWidth = (element) => {
@@ -204,3 +209,3 @@ let viewPortWidth = window.innerWidth * 0.3;
   if (element.getAttribute('mode') !== 'lightbox') return;
-  const mobileLandscapeSelector = '(max-device-width: 450px) and (hover: none) and (pointer: coarse) and (orientation: landscape)';
+  const mobileLandscapeSelector = `(max-device-width: ${PHONE_MAX_WIDTH}px) and (hover: none) and (pointer: coarse) and (orientation: landscape)`;
   if (window.matchMedia(mobileLandscapeSelector).matches) {
@@ -411,3 +416,3 @@ // allow scrolling in mobile landscape
 
-    @media (hover: none) and (max-device-width: 450px) and (pointer: coarse) and (orientation: landscape) {
+    @media (hover: none) and (max-device-width: ${PHONE_MAX_WIDTH}px) and (pointer: coarse) and (orientation: landscape) {
       :host([mode=lightbox]) .dialog-content {
@@ -546,2 +551,8 @@ animation-name: none;
     this._disconnectKeyup();
+    if (this._rotateToFullscreen) {
+      this._rotateToFullscreen.disable();
+      this._rotateToFullscreen.removeEventListener('exit', this._onRotateToFullscreenExit);
+      this._rotateToFullscreen.removeEventListener('enter', this._onRotateToFullscreenEnter);
+      this._rotateToFullscreen = undefined;
+    }
   }
@@ -560,2 +571,3 @@
       'dock-downscale',
+      'rotate-to-fullscreen',
     ];
@@ -677,2 +689,5 @@ }
         adjustLightboxModeForLandscapeOnMobile(this);
+        if (this._rotateToFullscreen) {
+          this._rotateToFullscreen.enable();
+        }
       } else if (newValue === 'hidden') {
@@ -689,2 +704,6 @@ this._wasInHiddenMode = true;
 
+      if (oldValue === 'lightbox' && this._rotateToFullscreen) {
+        this._rotateToFullscreen.disable();
+      }
+
       this.dispatchEvent(
@@ -755,2 +774,28 @@ new CustomEvent('modechange', {
     }
+
+    if (name === 'rotate-to-fullscreen') {
+      if (newValue == null && this._rotateToFullscreen) {
+        this._rotateToFullscreen.disable();
+        this._rotateToFullscreen.removeEventListener('exit', this._onRotateToFullscreenExit);
+        this._rotateToFullscreen.removeEventListener('enter', this._onRotateToFullscreenEnter);
+        this._rotateToFullscreen = undefined;
+      } else if (allowRotateToFullscreen) {
+        this._onRotateToFullscreenExit = (event) => {
+          if (event.detail.orientation.indexOf('landscape') === 0) {
+            this._internalModeChange = true;
+            this.setAttribute('mode', this._wasInHiddenMode ? 'hidden' : 'inline');
+          }
+          this.removeAttribute('fullscreen');
+        };
+        this._onRotateToFullscreenEnter = () => {
+          // expose fullscreen to the light-dom so we can apply fullscreen styles there
+          // (device-mode: fullscreen) media queries somehow don't work in combination
+          // with shadow dom
+          this.setAttribute('fullscreen', '');
+        };
+        this._rotateToFullscreen = new RotataToFullscreen(window, dialogInnerWrapper);
+        this._rotateToFullscreen.addEventListener('exit', this._onRotateToFullscreenExit);
+        this._rotateToFullscreen.addEventListener('enter', this._onRotateToFullscreenEnter);
+      }
+    }
   }
@@ -757,0 +802,0 @@

package.json

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

README.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
@@ -260,0 +318,0 @@

No alert changes

Improved metrics

Total package byte prevSize

116894

increased by5.37%

Number of package files

10

increased by11.11%

Lines of code

1155

increased by9.48%

Number of lines in readme file

712

increased by8.87%

No dependency changes