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/buttons.js

101 lines
2.3 KiB

const { getColor } = require('./themes')
7 years ago
const { qs } = require('../utils')
module.exports = function initButtons (input) {
let container = qs('#action-buttons')
// current color palette
let palette = []
7 years ago
// button labels
let labels = []
// button colors
let colors = {}
7 years ago
// button elements
let buttons = []
// add a button element
let pushButton = function pushButton () {
let button = document.createElement('button')
button.classList.add('action-button')
button.setAttribute('data-n', buttons.length)
buttons.push(button)
container.appendChild(button)
button.addEventListener('click', e => {
// might as well use the attribute ¯\_(ツ)_/¯
let index = +button.getAttribute('data-n')
input.sendButton(index)
e.target.blur() // if it keeps focus, spacebar will push it
})
// this prevents button retaining focus after half-click/drag-away
button.addEventListener('mouseleave', e => {
e.target.blur()
7 years ago
})
return button
}
// remove a button element
let popButton = function popButton () {
let button = buttons.pop()
button.parentNode.removeChild(button)
}
// sync with DOM
let update = function updateButtons () {
if (labels.length > buttons.length) {
for (let i = buttons.length; i < labels.length; i++) {
pushButton()
}
} else if (buttons.length > labels.length) {
for (let i = labels.length; i <= buttons.length; i++) {
7 years ago
popButton()
}
}
for (let i = 0; i < labels.length; i++) {
let label = labels[i].trim()
let button = buttons[i]
let color = colors[i]
7 years ago
button.textContent = label || '\u00a0' // label or nbsp
if (!label) button.classList.add('inactive')
else button.classList.remove('inactive')
if (Number.isFinite(color)) button.style.background = getColor(color, palette)
else button.style.background = null
7 years ago
}
}
return {
update,
get labels () {
return labels
},
set labels (value) {
labels = value
update()
},
get colors () {
return colors
},
set colors (value) {
colors = value
update()
},
get palette () {
return palette
},
set palette (value) {
palette = value
update()
}
}
7 years ago
}