dotfiles/app/assets/js/app.js
2023-12-16 22:59:19 +02:00

80 lines
2.4 KiB
JavaScript

// If you want to use Phoenix channels, run `mix help phx.gen.channel`
// to get started and then uncomment the line below.
// import "./user_socket.js"
import "phoenix_html"
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
import topbar from "../vendor/topbar"
import Alpine from "alpinejs"
import { Terminal } from "xterm"
import { FitAddon } from "@xterm/addon-fit"
let Hooks = {}
// TODO: Move this code and xterm into a separate generated file, and load that file only when needed
Hooks.Terminal = {
mounted() {
const term = new Terminal({
fontFamily: '"Courier New", "DejaVu Sans Mono", "Everson Mono", monospace',
fontSize: 13,
convertEol: true,
theme: {
background: "#24273a",
foreground: "#cad3f5",
cursor: "#f4dbd6",
black: "#494D64",
red: "#ed8796",
green: "#a6da95",
yellow: "#eed49f",
blue: "#8aadf4",
magenta: "#f5bde6",
cyan: "#8bd5ca",
white: "#b8c0e0",
}
})
const fitAddon = new FitAddon()
const resizeObserver = new ResizeObserver(() => fitAddon.fit())
term.loadAddon(fitAddon)
term.open(this.el)
term.onData(data => this.pushEventTo(this.el, "data_event", data))
term.onResize(resize => this.pushEventTo(this.el, "resize_event", resize))
this.handleEvent("data", payload => term.write(payload.data || ""))
fitAddon.fit()
resizeObserver.observe(this.el)
}
}
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_dataStack) {
window.Alpine.clone(from, to)
}
}
},
hooks: Hooks,
})
// Show progress bar on live navigation and form submits
topbar.config({ barColors: { 0: "#29d" }, shaDowColor: "rgba(0, 0, 0, .3)" })
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
// 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
Alpine.start()
window.Alpine = Alpine