nfp_sites/filadelfia_archive/app/holdbutton.js

69 lines
1.6 KiB
JavaScript
Raw Normal View History

const m = require('mithril')
const HoldButton = {
oninit: function(vnode) {
this.timer = null
this.holding = false
this.windowBlur = () => {
this.timerStop()
m.redraw()
}
window.addEventListener('blur', this.windowBlur)
},
onremove: function(vnode) {
this.timerStop()
window.removeEventListener('blur', this.windowBlur)
},
keydown(vnode, e) {
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
this.timerStart(vnode)
m.redraw()
}
},
keyup(e) {
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
this.timerStop()
m.redraw()
}
},
timerStart(vnode) {
if (this.timer) return
this.timer = setTimeout(this.timerConfirmed.bind(this), 2000, vnode)
this.holding = true
},
timerStop() {
clearTimeout(this.timer)
this.timer = null
this.holding = false
},
timerConfirmed(vnode) {
this.timerStop()
vnode.attrs.onclick()
m.redraw()
},
view: function(vnode) {
return m('button.holdbutton', {
style: '--hold-bg: var(--error-bg); --hold-color: var(--error); --hold-fill: var(--error);',
hidden: vnode.attrs.hidden,
class: (vnode.attrs.class || '')
+ (this.holding ? ' holdbutton-active' : ''),
onpointerdown: this.timerStart.bind(this, vnode),
onpointerup: this.timerStop.bind(this),
onpointerleave: this.timerStop.bind(this),
onkeydown: this.keydown.bind(this, vnode),
onkeyup: this.keyup.bind(this),
onclick: e => { return false },
}, m('div.inner', vnode.attrs.text))
},
}
module.exports = HoldButton