diff --git a/js/term.js b/js/term.js index 8a336aa..a7e877b 100644 --- a/js/term.js +++ b/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) + + 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.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') + } + + // 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() } - fitScreenIfNeeded() } - } + setInterval(checkForFullscreen, 500) - window.initSoftKeyboard(screen, input) - if (window.attachDebugScreen) window.attachDebugScreen(screen) + // (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 diff --git a/js/term_screen.js b/js/term_screen.js index 2b1b05c..66394b0 100644 --- a/js/term_screen.js +++ b/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 - - if (terminalAspect < fitAspect) { - // align heights - realHeight = fitIntoHeight - realWidth = realHeight * terminalAspect - } else { - // align widths - realWidth = fitIntoWidth - realHeight = realWidth / terminalAspect - } + 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 } - } 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