62 lines
2.0 KiB
JavaScript
62 lines
2.0 KiB
JavaScript
class BackButton extends Shadow {
|
|
constructor(withBackground = true, isDown = false, toggle) {
|
|
super()
|
|
this.withBackground = withBackground;
|
|
this.isDown = isDown;
|
|
this.toggle = toggle;
|
|
}
|
|
|
|
render() {
|
|
const toggle = this.toggle;
|
|
const btn = div("➩")
|
|
.display("flex")
|
|
.fontSize(2, em)
|
|
.paddingTop(0, rem)
|
|
.paddingHorizontal(0.5, rem)
|
|
.paddingBottom(0.9, rem)
|
|
.zIndex(3)
|
|
.color("var(--darkaccent)")
|
|
.transform(this.isDown ? "rotate(90deg)" : "rotate(180deg)")
|
|
.transition("scale .2s, color .2s")
|
|
.onTouch(function (start, e) {
|
|
if (start) {
|
|
this.scale("1.5")
|
|
this.style.color = "var(--quillred)"
|
|
} else {
|
|
this.scale("")
|
|
this.style.color = "var(--darkaccent)"
|
|
e.stopPropagation();
|
|
toggle();
|
|
}
|
|
})
|
|
|
|
if (this.withBackground) {
|
|
btn
|
|
.width(3, rem)
|
|
.height(3, rem)
|
|
.padding(0)
|
|
.borderRadius(50, pct)
|
|
.color("var(--divider)")
|
|
.background("var(--darkaccent)")
|
|
.color()
|
|
.border("1.5px solid var(--divider)")
|
|
.alignItems("center")
|
|
.justifyContent("center")
|
|
.onTouch(function (start, e) {
|
|
if (start) {
|
|
this.scale("1.5")
|
|
this.color("var(--darkaccent)")
|
|
this.backgroundColor("var(--divider)")
|
|
} else {
|
|
this.color("var(--divider)")
|
|
this.backgroundColor("var(--darkaccent)")
|
|
this.scale("")
|
|
e.stopPropagation();
|
|
toggle();
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
register(BackButton) |