Add pseudo-fullscreen mode for iOS

js/term/index.js

@@ -71,15 +71,29 @@ module.exports = function (opts) {
   initSoftKeyboard(screen, input)
   if (attachDebugScreen) attachDebugScreen(screen)
 
+  let fullscreenIcon = {} // dummy
   let isFullscreen = false
+  let properFullscreen = false
   let fitScreen = false
   let screenPadding = screen.window.padding
   let fitScreenIfNeeded = function fitScreenIfNeeded () {
     if (isFullscreen) {
+      fullscreenIcon.className = 'icn-resize-small'
+      if (properFullscreen) {
         screen.window.fitIntoWidth = window.screen.width
         screen.window.fitIntoHeight = window.screen.height
         screen.window.padding = 0
       } else {
+        screen.window.fitIntoWidth = window.innerWidth
+        if (qs('#term-nav').classList.contains('hidden')) {
+          screen.window.fitIntoHeight = window.innerHeight
+        } else {
+          screen.window.fitIntoHeight = window.innerHeight - 24
+        }
+        screen.window.padding = 0
+      }
+    } else {
+      fullscreenIcon.className = 'icn-resize-full'
       screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 4 : 0
       screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
       screen.window.padding = screenPadding
@@ -108,6 +122,8 @@ module.exports = function (opts) {
 
   // add fullscreen mode & button
   if (window.Element.prototype.requestFullscreen || window.Element.prototype.webkitRequestFullscreen) {
+    properFullscreen = true
+
     let checkForFullscreen = function () {
       // document.fullscreenElement is not really supported yet, so here's a hack
       if (isFullscreen && (window.innerWidth !== window.screen.width || window.innerHeight !== window.screen.height)) {
@@ -116,28 +132,40 @@ module.exports = function (opts) {
       }
     }
     setInterval(checkForFullscreen, 500)
+  }
 
   // (why are the buttons anchors?)
   let button = mk('a')
+  button.id = 'fullscreen-button'
   button.href = '#'
   button.addEventListener('click', e => {
     e.preventDefault()
 
+    if (document.body.classList.contains('pseudo-fullscreen')) {
+      document.body.classList.remove('pseudo-fullscreen')
+      isFullscreen = false
+      fitScreenIfNeeded()
+      return
+    }
+
     isFullscreen = true
     fitScreenIfNeeded()
     screen.updateSize()
 
+    if (properFullscreen) {
       if (screen.canvas.requestFullscreen) screen.canvas.requestFullscreen()
       else screen.canvas.webkitRequestFullscreen()
+    } else {
+      document.body.classList.add('pseudo-fullscreen')
+    }
   })
-    let icon = mk('i')
+  fullscreenIcon = mk('i')
-    icon.classList.add('icn-resize-full') // TODO: less confusing icons
+  fullscreenIcon.className = 'icn-resize-full'
-    button.appendChild(icon)
+  button.appendChild(fullscreenIcon)
   let span = mk('span')
   span.textContent = 'Fullscreen'
   button.appendChild(span)
   qs('#term-nav').insertBefore(button, qs('#term-nav').firstChild)
-  }
 
   // for debugging
   window.termScreen = screen

sass/pages/_term.scss

@@ -280,6 +280,38 @@ body.term {
 	}
 }
 
+body.pseudo-fullscreen {
+	#screen .screen-margin,
+	#keyboard-shortcut-bar {
+		display: none;
+	}
+	#outer {
+		position: static;
+	}
+	#screen {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border: none;
+	}
+	#screen canvas {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 99;
+	}
+	#term-nav {
+		position: fixed;
+		width: 100%;
+		bottom: 0;
+		z-index: 98;
+		height: 24px;
+		padding: 0;
+	}
+}
+
 // Attributes
 .bold {
 	font-weight: bold !important;