Adrien Maston
32 lines
907 B
JavaScript
32 lines
907 B
JavaScript
import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
|
|
|
|
// Bridge component to control custom safe-area insets from native apps.
|
|
// Sets CSS variables --injected-safe-inset-(top|right|bottom|left).
|
|
export default class extends BridgeComponent {
|
|
static component = "insets"
|
|
|
|
connect() {
|
|
super.connect()
|
|
this.notifyBridgeOfConnect()
|
|
}
|
|
|
|
disconnect() {
|
|
super.disconnect()
|
|
this.send("disconnect")
|
|
}
|
|
|
|
notifyBridgeOfConnect() {
|
|
this.send("connect", {}, message => {
|
|
this.setInsets(message.data)
|
|
})
|
|
}
|
|
|
|
setInsets({ top, right, bottom, left }) {
|
|
const root = document.documentElement.style
|
|
root.setProperty("--injected-safe-inset-top", `${top}px`)
|
|
root.setProperty("--injected-safe-inset-right", `${right}px`)
|
|
root.setProperty("--injected-safe-inset-bottom", `${bottom}px`)
|
|
root.setProperty("--injected-safe-inset-left", `${left}px`)
|
|
}
|
|
}
|