Add fullscreen button

cpsdqs/unified-input
cpsdqs 7 years ago
parent 3e4394f0cb
commit 2c3f081d99
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
  1. 43
      js/term.js
  2. 11
      js/term_screen.js

@ -14,12 +14,20 @@ window.termInit = function (labels, theme) {
qs('#screen').appendChild(screen.canvas) qs('#screen').appendChild(screen.canvas)
screen.load(labels, theme) // load labels and theme screen.load(labels, theme) // load labels and theme
{ window.initSoftKeyboard(screen, input)
if (window.attachDebugScreen) window.attachDebugScreen(screen)
let isFullscreen = false
let fitScreen = false let fitScreen = false
let fitScreenIfNeeded = function fitScreenIfNeeded () { 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.fitIntoWidth = fitScreen ? window.innerWidth - 20 : 0
screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0 screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
} }
}
fitScreenIfNeeded() fitScreenIfNeeded()
window.addEventListener('resize', fitScreenIfNeeded) window.addEventListener('resize', fitScreenIfNeeded)
@ -35,10 +43,39 @@ window.termInit = function (labels, theme) {
} }
fitScreenIfNeeded() fitScreenIfNeeded()
} }
// 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)
window.initSoftKeyboard(screen, input) // (why are the buttons anchors?)
if (window.attachDebugScreen) window.attachDebugScreen(screen) 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 // for debugging
window.termScreen = screen window.termScreen = screen

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

Loading…
Cancel
Save