69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
|
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
|