Merge pull request #22 from smartify-org-uk/fix-stylable-permissiongesture-dialog

Feature: Adds classnames to obtainPermissionGesture dialog on DeviceOrientationControls

Author: nickw1

lib/constants/classes.js

@@ -0,0 +1,10 @@
+export const LOCAR_DEVICE_ORIENTATION_PERMISSION_MODAL =
+  "locar-device-orientation-permission-modal";
+export const LOCAR_DEVICE_ORIENTATION_PERMISSION_BUTTON =
+  "locar-device-orientation-permission-button";
+export const LOCAR_DEVICE_ORIENTATION_PERMISSION_MESSAGE =
+  "locar-device-orientation-permission-message";
+export const LOCAR_DEVICE_ORIENTATION_PERMISSION_INNER =
+  "locar-device-orientation-permission-inner";
+export const LOCAR_DEVICE_ORIENTATION_PERMISSION_BUTTON_INNER =
+  "locar-device-orientation-permission-button-inner";

lib/three/device-orientation-controls.js

@@ -22,6 +22,16 @@
 
 import { Euler, EventDispatcher, MathUtils, Quaternion, Vector3 } from "three";
 import EventEmitter from './event-emitter.js';
+import {
+  LOCAR_DEVICE_ORIENTATION_PERMISSION_MODAL,
+  LOCAR_DEVICE_ORIENTATION_PERMISSION_BUTTON,
+  LOCAR_DEVICE_ORIENTATION_PERMISSION_MESSAGE,
+  LOCAR_DEVICE_ORIENTATION_PERMISSION_INNER,
+  LOCAR_DEVICE_ORIENTATION_PERMISSION_BUTTON_INNER,
+} from "../constants/classes.js";
+
+const LOCAR_DEVICE_ORIENTATION_MESSAGE =
+  "This immersive website requires access to your device motion sensors.";
 
 const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
  (/Macintosh/i.test(navigator.userAgent) &&
@@ -67,10 +77,11 @@ class DeviceOrientationControls extends EventDispatcher {
       "ondeviceorientationabsolute" in window
         ? "deviceorientationabsolute"
         : "deviceorientation";
-    console.log("Device Orientation Event Name:", this.orientationChangeEventName);
 
     this.smoothingFactor = options.smoothingFactor || 1;
     this.enablePermissionDialog = options.enablePermissionDialog ?? true;
+    this.enableInlineStyling = options.enableStyling ?? true;
+    this.preferConfirmDialog = options.preferConfirmDialog ?? false;
 
     const onDeviceOrientationChangeEvent = function ({
       alpha,
@@ -391,80 +402,132 @@ class DeviceOrientationControls extends EventDispatcher {
     return device && device.gamma ? MathUtils.degToRad(device.gamma) : 0
   };
 
-
-  
   // Provide gesture before initialising device orientation controls
   // From PR #659 on the main AR.js repo
   // Thanks to @ma2yama
-  this.obtainPermissionGesture = function() {
+  this.createObtainPermissionGestureDialog = function () {
+    // Add all the elements and a common class names to all elements
+    // to allow external styling
     const startModal = document.createElement("div");
+    startModal.classList.add(LOCAR_DEVICE_ORIENTATION_PERMISSION_MODAL);
+
     const innerDiv = document.createElement("div");
+    innerDiv.classList.add(LOCAR_DEVICE_ORIENTATION_PERMISSION_INNER);
+
     const msgDiv = document.createElement("div");
+    msgDiv.classList.add(LOCAR_DEVICE_ORIENTATION_PERMISSION_MESSAGE);
+
     const btnDiv = document.createElement("div");
+    btnDiv.classList.add(LOCAR_DEVICE_ORIENTATION_PERMISSION_BUTTON_INNER);
+
+    const btn = document.createElement("button");
+    btn.classList.add(LOCAR_DEVICE_ORIENTATION_PERMISSION_BUTTON);
+
     document.body.appendChild(startModal);
-    const startModalStyles = {
-        display: 'flex',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: 1,
-        backgroundColor: 'rgba(0,0,0,0.6)',
-        justifyContent: 'center',
-        alignItems: 'center'
-    };
-    const innerDivStyles = {
-        backgroundColor: 'white',
-        padding: '6px',
-        borderRadius: '3px',
-        width: '36rem',
-        height: '24rem'
-    };
-    const msgDivStyles = {
-        width: '100%',
-        height: '70%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-    };
-    const btnDivStyles = {
-        display: 'inline-flex',
-        width: '100%',
-        height: '30%',
-        justifyContent: 'center',
-        alignItems: 'center'
-    };
-    for(let key in startModalStyles) {
+
+    // Apply inline styling if required, the styling tries to resemble
+    // a native ios dialog as closely as possible
+    if (this.enableInlineStyling === true) {
+      const startModalStyles = {
+        fontFamily:
+          "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        display: "flex",
+        position: "fixed",
+        zIndex: 100000,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "rgba(0,0,0,0.2)",
+        inset: 0,
+        padding: "20px",
+      };
+
+      const innerDivStyles = {
+        backgroundColor: "rgba(220, 220, 220, 0.85)",
+        padding: "6px 0",
+        borderRadius: "10px",
+        width: "100%",
+        maxWidth: "400px",
+      };
+
+      const msgDivStyles = {
+        padding: "10px 12px",
+        textAlign: "center",
+        fontWeight: 400,
+        fontSize: "13px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      };
+
+      const btnDivStyles = {
+        display: "block",
+        textAlign: "center",
+        textDecoration: "none",
+        borderTop: "rgb(180,180,180) solid 1px",
+      };
+
+      const btnStyles = {
+        display: "block",
+        width: "100%",
+        textAlign: "center",
+        appearance: "none",
+        background: "none",
+        border: "none",
+        outline: "none",
+        padding: "10px",
+        fontWeight: 400,
+        fontSize: "16px",
+        color: "#2e7cf1",
+        cursor: "pointer",
+      };
+
+      for (let key in startModalStyles) {
         startModal.style[key] = startModalStyles[key];
-    }
-    for(let key in innerDivStyles) {
+      }
+      for (let key in innerDivStyles) {
         innerDiv.style[key] = innerDivStyles[key];
-    }
-    for(let key in msgDivStyles) {
+      }
+      for (let key in msgDivStyles) {
         msgDiv.style[key] = msgDivStyles[key];
-    }
-    for(let key in btnDivStyles) {
+      }
+      for (let key in btnDivStyles) {
         btnDiv.style[key] = btnDivStyles[key];
+      }
+      for (let key in btnStyles) {
+        btn.style[key] = btnStyles[key];
+      }
     }
+
     startModal.appendChild(innerDiv);
     innerDiv.appendChild(msgDiv);
     innerDiv.appendChild(btnDiv);
-    msgDiv.innerHTML = '<div style="font-size: 24pt; margin: 1rem;">This immersive website requires access to your device motion sensors.</div>';
+    msgDiv.appendChild(
+      document.createTextNode(LOCAR_DEVICE_ORIENTATION_MESSAGE)
+    );
 
     const onStartClick = () => {
       this.requestOrientationPermissions();
-      startModal.style.display = 'none';
-    } 
-    const btn = document.createElement("button");
+      startModal.style.display = "none";
+    };
+
     btn.addEventListener("click", onStartClick);
-    btn.style.width = '50%';
-    btn.style.height = '80%';
-    btn.style.fontSize = '20pt';
     btn.appendChild(document.createTextNode("OK"));
+
     btnDiv.appendChild(btn);
     document.body.appendChild(startModal);
-  }
+  };
+
+  this.obtainPermissionGesture = function () {
+    // Create a simple ok/cancel confirm() dialog instead of creating an html one
+    // if defined in the options, otherwise create the html dialog as above
+    if (this.preferConfirmDialog === true) {
+      if (window.confirm(LOCAR_DEVICE_ORIENTATION_MESSAGE)) {
+        this.requestOrientationPermissions();
+      }
+    } else {
+      this.createObtainPermissionGestureDialog();
+    }
+  };
   }
 
   on(eventName, eventHandler) {