Add fullscreen button

js/term.js

@@ -14,31 +14,68 @@ window.termInit = function (labels, theme) {
   qs('#screen').appendChild(screen.canvas)
   screen.load(labels, theme) // load labels and theme
 
-  {
-    let fitScreen = false
-    let fitScreenIfNeeded = function fitScreenIfNeeded () {
+  window.initSoftKeyboard(screen, input)
+  if (window.attachDebugScreen) window.attachDebugScreen(screen)
+
+  let isFullscreen = false
+  let fitScreen = false
+  let fitScreenIfNeeded = function fitScreenIfNeeded () {
+    if (isFullscreen) {
+      screen.window.fitIntoWidth = window.screen.width
+      screen.window.fitIntoHeight = window.screen.height
+    } else {
       screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 20 : 0
       screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
     }
-    fitScreenIfNeeded()
-    window.addEventListener('resize', fitScreenIfNeeded)
+  }
+  fitScreenIfNeeded()
+  window.addEventListener('resize', fitScreenIfNeeded)
 
-    window.toggleFitScreen = function () {
-      fitScreen = !fitScreen
-      const resizeButtonIcon = qs('#resize-button-icon')
-      if (fitScreen) {
-        resizeButtonIcon.classList.remove('icn-resize-small')
-        resizeButtonIcon.classList.add('icn-resize-full')
-      } else {
-        resizeButtonIcon.classList.remove('icn-resize-full')
-        resizeButtonIcon.classList.add('icn-resize-small')
-      }
-      fitScreenIfNeeded()
+  window.toggleFitScreen = function () {
+    fitScreen = !fitScreen
+    const resizeButtonIcon = qs('#resize-button-icon')
+    if (fitScreen) {
+      resizeButtonIcon.classList.remove('icn-resize-small')
+      resizeButtonIcon.classList.add('icn-resize-full')
+    } else {
+      resizeButtonIcon.classList.remove('icn-resize-full')
+      resizeButtonIcon.classList.add('icn-resize-small')
     }
+    fitScreenIfNeeded()
   }
 
-  window.initSoftKeyboard(screen, input)
-  if (window.attachDebugScreen) window.attachDebugScreen(screen)
+  // add fullscreen mode & button
+  if (Element.prototype.requestFullscreen || Element.prototype.webkitRequestFullscreen) {
+    let checkForFullscreen = function () {
+      // document.fullscreenElement is not really support yet, so here's a hack
+      if (isFullscreen && (innerWidth !== window.screen.width || innerHeight !== window.screen.height)) {
+        isFullscreen = false
+        fitScreenIfNeeded()
+      }
+    }
+    setInterval(checkForFullscreen, 500)
+
+    // (why are the buttons anchors?)
+    let button = mk('a')
+    button.href = '#'
+    button.addEventListener('click', e => {
+      e.preventDefault()
+
+      isFullscreen = true
+      fitScreenIfNeeded()
+      screen.updateSize()
+
+      if (screen.canvas.requestFullscreen) screen.canvas.requestFullscreen()
+      else screen.canvas.webkitRequestFullscreen()
+    })
+    let icon = mk('i')
+    icon.classList.add('icn-resize-full') // TODO: less confusing icons
+    button.appendChild(icon)
+    let span = mk('span')
+    span.textContent = 'Fullscreen'
+    button.appendChild(span)
+    qs('#term-nav').insertBefore(button, qs('#term-nav').firstChild)
+  }
 
   // for debugging
   window.termScreen = screen

js/term_screen.js

@@ -523,7 +523,7 @@ window.TermScreen = class TermScreen {
    * Updates the canvas size if it changed
    */
   updateSize () {
-    this._window.devicePixelRatio = window.devicePixelRatio || 1
+    this._window.devicePixelRatio = this._windowScale * (window.devicePixelRatio || 1)
 
     let didChange = false
     for (let key in this.windowState) {
@@ -537,7 +537,6 @@ window.TermScreen = class TermScreen {
       const {
         width,
         height,
-        devicePixelRatio,
         gridScaleX,
         gridScaleY,
         fitIntoWidth,
@@ -550,24 +549,22 @@ window.TermScreen = class TermScreen {
       let realHeight = height * cellSize.height
 
       if (fitIntoWidth && fitIntoHeight) {
-        if (realWidth > fitIntoWidth || realHeight > fitIntoHeight) {
-          let terminalAspect = realWidth / realHeight
-          let fitAspect = fitIntoWidth / fitIntoHeight
+        let terminalAspect = realWidth / realHeight
+        let fitAspect = fitIntoWidth / fitIntoHeight
 
-          if (terminalAspect < fitAspect) {
-            // align heights
-            realHeight = fitIntoHeight
-            realWidth = realHeight * terminalAspect
-          } else {
-            // align widths
-            realWidth = fitIntoWidth
-            realHeight = realWidth / terminalAspect
-          }
+        if (terminalAspect < fitAspect) {
+          // align heights
+          realHeight = fitIntoHeight
+          realWidth = realHeight * terminalAspect
+        } else {
+          // align widths
+          realWidth = fitIntoWidth
+          realHeight = realWidth / terminalAspect
         }
-      } else if (fitIntoWidth && realWidth > fitIntoWidth) {
+      } else if (fitIntoWidth) {
         realHeight = fitIntoWidth / (realWidth / realHeight)
         realWidth = fitIntoWidth
-      } else if (fitIntoHeight && realHeight > fitIntoHeight) {
+      } else if (fitIntoHeight) {
         realWidth = fitIntoHeight * (realWidth / realHeight)
         realHeight = fitIntoHeight
       }
@@ -575,6 +572,8 @@ window.TermScreen = class TermScreen {
       // store new window scale
       this._windowScale = realWidth / (width * cellSize.width)
 
+      let devicePixelRatio = this._window.devicePixelRatio = this._windowScale * window.devicePixelRatio
+
       this.canvas.width = width * devicePixelRatio * cellSize.width
       this.canvas.style.width = `${realWidth}px`
       this.canvas.height = height * devicePixelRatio * cellSize.height