bonfire-app/assets/js/bonfire_live.js
2021-09-23 09:19:59 +02:00

42 lines
1.3 KiB
JavaScript
Executable file

// JS shared with non_live pages
import "./common"
// for JS features & extensions to hook into LiveView
let Hooks = {};
// Semi-boilerplate Phoenix+LiveView...
import {Socket} from "phoenix"
import NProgress from "nprogress"
import {LiveSocket} from "phoenix_live_view"
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
dom: {
onBeforeElUpdated(from, to){
if(from.__x){ Alpine.clone(from.__x, to) }
}
},
hooks: Hooks
})
// Show progress bar on live navigation and form submits
window.addEventListener("phx:page-loading-start", info => NProgress.start())
window.addEventListener("phx:page-loading-stop", info => NProgress.done())
// connect if there are any LiveViews on the page
liveSocket.connect()
// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
// Extensions... # TODO: make this more modular/configurable
import { ExtensionHooks } from "../../deps/bonfire_geolocate/assets/js/extension"
Object.assign(liveSocket.hooks, ExtensionHooks);