Add exit full page button (#237)

apple2js.html

@@ -38,6 +38,9 @@
       ondrop="Apple2.handleDrop(0, event)"
       ondragend="Apple2.handleDragEnd(0, event)">
   <div class="outer">
+    <div id="exit-fullscreen">
+      <button onClick="Apple2.exitFullScreen();">Exit Full Page</button>
+    </div>
     <div id="header">
       <a href="https://github.com/whscullin/apple2js#readme" target="_blank">
         <img src="img/badge.png" id="badge" />

apple2jse.html

@@ -38,6 +38,9 @@
       ondrop="Apple2.handleDrop(0, event)"
       ondragend="Apple2.handleDragEnd(0, event)">
   <div class="outer">
+    <div id="exit-fullscreen">
+      <button onClick="Apple2.exitFullScreen();">Exit Full Page</button>
+    </div>
     <div id="header">
       <a href="https://github.com/whscullin/apple2js#readme" target="_blank">
         <img src="img/badge2e.png" id="badge" />

css/apple2.css

@@ -810,3 +810,17 @@ a.button:hover {
     min-width: 200px;
     min-height: 50px;
 }
+
+#exit-fullscreen {
+    display: none;
+}
+
+.full-page #exit-fullscreen {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    padding: 5px;
+}

js/components/Screen.tsx

@@ -1,6 +1,9 @@
 import { h, Ref } from 'preact';
 
 import styles from './css/Screen.module.scss';
+import { useContext } from 'preact/hooks';
+import { OptionsContext } from './OptionsContext';
+import { SCREEN_FULL_PAGE } from 'js/ui/screen';
 
 /**
  * Screen properties
@@ -17,8 +20,17 @@ export interface ScreenProps {
  * @returns
  */
 export const Screen = ({ screenRef }: ScreenProps) => {
+    const options = useContext(OptionsContext);
+
     return (
         <div className={styles.display}>
+            <div className={styles.exitFullScreen}>
+                <button
+                    onClick={() => options.setOption(SCREEN_FULL_PAGE, false)}
+                >
+                    Exit Full Page
+                </button>
+            </div>
             <div className={styles.overscan}>
                 <canvas
                     className={styles.screen}

js/components/css/Header.module.scss

@@ -13,6 +13,10 @@
     border: none;
 }
 
+:global(.standalone) .header {
+    display: none;
+}
+
 :global(.full-page) .header {
     display: none;
 }

js/components/css/Screen.module.scss

@@ -84,3 +84,16 @@
     width: 100%;
     height: 100%;
 }
+
+.exitFullScreen {
+    display: none;
+}
+
+:global(.full-page) .exitFullScreen {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    padding: 5px;
+}

js/entry.tsx

@@ -1,5 +1,9 @@
 import { h, render } from 'preact';
 import { App } from './components/App';
 
+if (navigator.standalone) {
+    document.body.classList.add('standalone');
+}
+
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 render(<App />, document.getElementById('app')!);

js/ui/apple2.ts

@@ -480,7 +480,7 @@ export function doLoadHTTP(driveNo: DriveNumber, url?: string) {
                 }
             })
             .then(function (data) {
-                const urlParts = url!.split('/');
+                const urlParts = url.split('/');
                 const file = urlParts.pop()!;
                 const fileParts = file.split('.');
                 const ext = fileParts.pop()!.toLowerCase();
@@ -862,6 +862,10 @@ export function clearPrinterPaper() {
     _printer.clear();
 }
 
+export function exitFullScreen() {
+    options.setOption(SCREEN_FULL_PAGE, false);
+}
+
 declare global {
     interface Window {
         clipboardData?: DataTransfer;