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.
65 lines
1.7 KiB
65 lines
1.7 KiB
const { qs } = require('../utils')
|
|
|
|
module.exports = function initButtons (input) {
|
|
let container = qs('#action-buttons')
|
|
|
|
// button labels
|
|
let labels = []
|
|
|
|
// 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 => {
|
|
console.log('button 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()
|
|
})
|
|
|
|
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++) {
|
|
popButton()
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < labels.length; i++) {
|
|
let label = labels[i].trim()
|
|
let button = buttons[i]
|
|
button.textContent = label || '\u00a0' // label or nbsp
|
|
if (!label) button.classList.add('inactive')
|
|
else button.classList.remove('inactive')
|
|
}
|
|
}
|
|
|
|
return { update, labels }
|
|
}
|
|
|