ESPTerm web interface submodule, separated to make testing and development easier
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
espterm-front-end/js/term/index.js

247 lines
8.0 KiB

const $ = require('../lib/chibi')
const { qs, mk } = require('../utils')
const localize = require('../lang')
const Notify = require('../notif')
const TermScreen = require('./screen')
const TermConnection = require('./connection')
const TermInput = require('./input')
const TermUpload = require('./upload')
const initSoftKeyboard = require('./soft_keyboard')
const attachDebugger = require('./debug')
const initButtons = require('./buttons')
/** Init the terminal sub-module - called from HTML */
module.exports = function (opts) {
const screen = new TermScreen()
const conn = new TermConnection(screen)
const input = TermInput(conn, screen)
const termUpload = TermUpload(conn, input, screen)
input.termUpload = termUpload
// forward screen input events
screen.on('mousedown', (...args) => input.onMouseDown(...args))
screen.on('mousemove', (...args) => input.onMouseMove(...args))
screen.on('mouseup', (...args) => input.onMouseUp(...args))
screen.on('mousewheel', (...args) => input.onMouseWheel(...args))
screen.on('input-alts', (...args) => input.setAlts(...args))
screen.on('mouse-mode', (...args) => input.setMouseMode(...args))
// touch selection menu (the Copy button)
$.ready(() => {
const touchSelectMenu = qs('#touch-select-menu')
screen.on('show-touch-select-menu', (x, y) => {
let rect = touchSelectMenu.getBoundingClientRect()
x -= rect.width / 2
y -= rect.height / 2
touchSelectMenu.classList.add('open')
touchSelectMenu.style.transform = `translate(${x}px,${y}px)`
})
screen.on('hide-touch-select-menu', () => touchSelectMenu.classList.remove('open'))
const copyButton = qs('#touch-select-copy-btn')
if (copyButton) {
copyButton.addEventListener('click', () => {
screen.copySelectionToClipboard()
})
}
})
// buttons
const buttons = initButtons(input)
screen.on('button-labels', labels => { buttons.labels = labels })
// TODO: don't access the renderer here
buttons.palette = screen.layout.renderer.palette
screen.layout.renderer.on('palette-update', palette => {
buttons.palette = palette
})
screen.on('full-load', () => {
let scr = qs('#screen')
let errmsg = qs('#load-failed')
if (scr) scr.classList.remove('failed')
if (errmsg) errmsg.parentNode.removeChild(errmsg)
})
let setLinkVisibility = visible => {
let buttons = [...document.querySelectorAll('.x-term-conf-btn')]
if (visible) buttons.forEach(x => x.classList.remove('hidden'))
else buttons.forEach(x => x.classList.add('hidden'))
}
let setButtonVisibility = visible => {
if (visible) qs('#action-buttons').classList.remove('hidden')
else qs('#action-buttons').classList.add('hidden')
}
screen.on('opts-update', () => {
setLinkVisibility(screen.showLinks)
setButtonVisibility(screen.showButtons)
})
screen.on('title-update', text => {
qs('#screen-title').textContent = text
if (!text) text = 'Terminal'
qs('title').textContent = `${text} :: ESPTerm`
})
// connection status
let showSplashTimeout = null
let showSplash = (obj, delay = 250) => {
clearTimeout(showSplashTimeout)
showSplashTimeout = setTimeout(() => {
screen.window.statusScreen = obj
}, delay)
}
conn.on('open', () => {
// console.log('*open')
showSplash({ title: localize('term_conn.connecting'), loading: true })
})
conn.on('connect', () => {
// console.log('*connect')
showSplash({ title: localize('term_conn.waiting_content'), loading: true })
})
screen.on('load', () => {
// console.log('*load')
clearTimeout(showSplashTimeout)
if (screen.window.statusScreen) screen.window.statusScreen = null
})
conn.on('disconnect', () => {
// console.log('*disconnect')
showSplash({ title: localize('term_conn.disconnected') }, 500)
screen.screen = []
screen.screenFG = []
screen.screenBG = []
screen.screenAttrs = []
})
conn.on('silence', () => {
// console.log('*silence')
showSplash({ title: localize('term_conn.waiting_server'), loading: true }, 0)
})
// conn.on('ping-fail', () => { screen.window.statusScreen = { title: 'Disconnected' } })
conn.on('ping-success', () => {
// console.log('*ping-success')
showSplash({ title: localize('term_conn.reconnecting'), loading: true }, 0)
})
conn.init()
input.init(opts)
termUpload.init()
Notify.init()
window.onerror = function (errorMsg, file, line, col) {
Notify.show(`<b>JS ERROR!</b><br>${errorMsg}<br>at ${file}:${line}:${col}`, 10000, true)
return false
}
qs('#screen').appendChild(screen.layout.canvas)
initSoftKeyboard(screen, input)
if (attachDebugger) attachDebugger(screen, conn)
// fullscreen mode
let fullscreenIcon = {} // dummy
let isFullscreen = false
let properFullscreen = false
let fitScreen = false
let screenPadding = screen.layout.window.padding
let fitScreenIfNeeded = function fitScreenIfNeeded () {
if (isFullscreen) {
fullscreenIcon.className = 'icn-resize-small'
if (properFullscreen) {
screen.layout.window.fitIntoWidth = window.screen.width
screen.layout.window.fitIntoHeight = window.screen.height
screen.layout.window.padding = 0
} else {
screen.layout.window.fitIntoWidth = window.innerWidth
if (qs('#term-nav').classList.contains('hidden')) {
screen.layout.window.fitIntoHeight = window.innerHeight
} else {
screen.layout.window.fitIntoHeight = window.innerHeight - 24
}
screen.layout.window.padding = 0
}
} else {
fullscreenIcon.className = 'icn-resize-full'
screen.layout.window.fitIntoWidth = fitScreen ? window.innerWidth - 4 : 0
screen.layout.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
screen.layout.window.padding = screenPadding
}
}
fitScreenIfNeeded()
window.addEventListener('resize', fitScreenIfNeeded)
let 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()
}
qs('#term-fit-screen').addEventListener('click', function () {
toggleFitScreen()
return false
})
// 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)) {
isFullscreen = false
fitScreenIfNeeded()
}
}
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.layout.updateSize()
if (properFullscreen) {
if (screen.layout.canvas.requestFullscreen) screen.layout.canvas.requestFullscreen()
else screen.layout.canvas.webkitRequestFullscreen()
} else {
document.body.classList.add('pseudo-fullscreen')
}
})
fullscreenIcon = mk('i')
fullscreenIcon.className = 'icn-resize-full'
button.appendChild(fullscreenIcon)
let span = mk('span')
span.textContent = localize('term_nav.fullscreen')
button.appendChild(span)
qs('#term-nav').insertBefore(button, qs('#term-nav').firstChild)
// for debugging
window.termScreen = screen
window.buttons = buttons
window.conn = conn
window.input = input
window.termUpl = termUpload
}