feat: add rotate-to-fullscreen feature for mode=lightbox

Author: klipstein

.eslintrc.json

@@ -18,6 +18,7 @@
             }
         ],
         "import/prefer-default-export": 0,
+        "import/extensions": 0,
         "no-underscore-dangle": [
             "error", {
                 "allowAfterThis": true

README.md

@@ -255,6 +255,64 @@ export default () => {
 </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
 
 ```js preact

glomex-dialog.js

@@ -1,10 +1,15 @@
+import { RotataToFullscreen } from './rotate-to-fullscreen.js';
+
 const NON_VISIBLE_WIDTH = window.innerWidth < 720 ? 320 : 640;
 const DEFAULT_DOCK_TARGET_INSET = '0px 10px auto auto';
 const DEFAULT_TRANSITION_DURATION = 300;
 const DOCK_Z_INDEX = 9999999;
 const LIGHTBOX_Z_INDEX = 10000000;
 const MIN_DOCK_WIDTH = 192;
 const MAX_DOCK_WIDTH = 400;
+const PHONE_MAX_WIDTH = 480;
+
+const allowRotateToFullscreen = Math.min(window.innerWidth, window.innerHeight) <= PHONE_MAX_WIDTH;
 
 const updateViewPortWidth = (element) => {
   let viewPortWidth = window.innerWidth * 0.3;
@@ -200,7 +205,7 @@ function isInDocument(element, document) {
 
 function adjustLightboxModeForLandscapeOnMobile(element) {
   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) {
     // allow scrolling in mobile landscape
     // so that the user can scroll down to remove the browser bar
@@ -406,7 +411,7 @@ class GlomexDialogElement extends window.HTMLElement {
       z-index: ${LIGHTBOX_Z_INDEX};
     }
 
-    @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 {
         animation-name: none;
         height: 100%;
@@ -540,6 +545,12 @@ class GlomexDialogElement extends window.HTMLElement {
     if (this._disconnectDragAndDrop) this._disconnectDragAndDrop();
     this._disconnectResize();
     this._disconnectKeyup();
+    if (this._rotateToFullscreen) {
+      this._rotateToFullscreen.disable();
+      this._rotateToFullscreen.removeEventListener('exit', this._onRotateToFullscreenExit);
+      this._rotateToFullscreen.removeEventListener('enter', this._onRotateToFullscreenEnter);
+      this._rotateToFullscreen = undefined;
+    }
   }
 
   static get observedAttributes() {
@@ -553,6 +564,7 @@ class GlomexDialogElement extends window.HTMLElement {
       'dock-sticky-target-top',
       'dock-sticky-aspect-ratio',
       'dock-downscale',
+      'rotate-to-fullscreen',
     ];
   }
 
@@ -669,6 +681,9 @@ class GlomexDialogElement extends window.HTMLElement {
           passive: false,
         });
         adjustLightboxModeForLandscapeOnMobile(this);
+        if (this._rotateToFullscreen) {
+          this._rotateToFullscreen.enable();
+        }
       } else if (newValue === 'hidden') {
         this._wasInHiddenMode = true;
       }
@@ -680,6 +695,10 @@ class GlomexDialogElement extends window.HTMLElement {
         dialogInnerWrapper.removeAttribute('tabindex');
       }
 
+      if (oldValue === 'lightbox' && this._rotateToFullscreen) {
+        this._rotateToFullscreen.disable();
+      }
+
       this.dispatchEvent(
         new CustomEvent('modechange', {
           detail: {
@@ -745,6 +764,32 @@ class GlomexDialogElement extends window.HTMLElement {
         // No implementation when dock-downscale gets reset
       }
     }
+
+    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);
+      }
+    }
   }
 
   /**

rotate-to-fullscreen.js

@@ -0,0 +1,70 @@
+/**
+ * Handles <glomex-dialog rotate-to-fullscreen>
+ */
+export class RotataToFullscreen extends window.EventTarget {
+  constructor(window, fullscreenElement) {
+    super();
+    this._element = fullscreenElement;
+    this._rootNode = this._element.getRootNode();
+    this._window = window;
+    this._onOrientationChange = this._onOrientationChange.bind(this);
+    this._onIframeFullscreenChange = this._onIframeFullscreenChange.bind(this);
+  }
+
+  enable() {
+    const { _window: window, _element: element } = this;
+    const { screen } = window;
+
+    if (!(screen && screen.orientation)) return;
+
+    screen.orientation.addEventListener('change', this._onOrientationChange);
+    element.addEventListener('fullscreenchange', this._onIframeFullscreenChange);
+
+    const isInLandscape = screen.orientation.type.indexOf('landscape') === 0;
+    if (this._rootNode.fullscreenElement === null && isInLandscape) {
+      element.requestFullscreen().catch(() => {});
+    }
+  }
+
+  disable() {
+    const { _window: window, _element: element } = this;
+    const { screen, document } = window;
+
+    if (!(screen && screen.orientation)) return;
+
+    if (this._rootNode.fullscreenElement && document.exitFullscreen) {
+      document.exitFullscreen().catch(() => {});
+    }
+
+    screen.orientation.removeEventListener('change', this._onOrientationChange);
+    element.removeEventListener('fullscreenchange', this._onIframeFullscreenChange);
+  }
+
+  _onOrientationChange() {
+    const { _window: window, _element: element } = this;
+    const { screen, document } = window;
+
+    if (
+      this._rootNode.fullscreenElement === null
+      && screen.orientation.type.indexOf('landscape') === 0
+    ) {
+      element.requestFullscreen().catch(() => {});
+    } else {
+      document.exitFullscreen().catch(() => {});
+    }
+  }
+
+  _onIframeFullscreenChange() {
+    const { screen } = this._window;
+
+    if (this._rootNode.fullscreenElement === null) {
+      this.dispatchEvent(new CustomEvent('exit', {
+        detail: {
+          orientation: screen.orientation.type
+        }
+      }));
+    } else {
+      this.dispatchEvent(new CustomEvent('enter'));
+    }
+  }
+}