Add title and topbar

This commit is contained in:
Paul-Henri Froidmont 2025-08-27 03:09:14 +02:00
parent 124239925d
commit fca87a4263
Signed by: phfroidmont
GPG key ID: BE948AFD7E7873BE
5 changed files with 14 additions and 10 deletions

View file

@ -54,4 +54,4 @@ object example extends ScalaCommon:
object js extends TypeScriptModule:
def mainFileName = "app.js"
def npmDeps = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8")
def npmDeps = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8", "topbar@3.0.0")

View file

@ -1,3 +1,4 @@
import scalive.codecs.BooleanAsAttrPresenceCodec
import scalive.codecs.StringAsIsCodec
import scalive.defs.attrs.HtmlAttrs
import scalive.defs.complex.ComplexHtmlKeys
@ -5,7 +6,7 @@ import scalive.defs.tags.HtmlTags
package object scalive extends HtmlTags with HtmlAttrs with ComplexHtmlKeys:
lazy val defer = htmlAttr("defer", codecs.BooleanAsOnOffStringCodec)
lazy val defer = htmlAttr("defer", codecs.BooleanAsAttrPresenceCodec)
object phx:
private def phxAttr(suffix: String): HtmlAttr[String] =
@ -13,9 +14,10 @@ package object scalive extends HtmlTags with HtmlAttrs with ComplexHtmlKeys:
private def phxAttrJson(suffix: String): HtmlAttrJsonValue =
new HtmlAttrJsonValue(s"phx-$suffix")
private def dataPhxAttr(suffix: String): HtmlAttr[String] =
new HtmlAttr(s"data-phx-$suffix", StringAsIsCodec)
dataAttr(s"phx-$suffix")
private[scalive] lazy val session = dataPhxAttr("session")
private[scalive] lazy val main = htmlAttr("data-phx-main", BooleanAsAttrPresenceCodec)
lazy val click = phxAttrJson("click")
def value(key: String) = phxAttr(s"value-$key")

View file

@ -1,7 +1,6 @@
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
// import topbar from "../vendor/topbar"
// import Calendar from "./hooks/calendar"
import topbar from "topbar"
// let csrfToken =
// document.querySelector("meta[name='csrf-token']").getAttribute("content")
@ -12,9 +11,9 @@ let liveSocket = new LiveSocket("/live", Socket, {
});
// 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.delayedShow(200))
// window.addEventListener("phx:page-loading-stop", info => topbar.hide())
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()

View file

@ -6,7 +6,9 @@ object RootLayout:
lang := "en",
headTag(
metaTag(charset := "utf-8"),
scriptTag(defer := true, typ := "text/javascript", src := "/static/app.js")
metaTag(nameAttr := "viewport", contentAttr := "width=device-width, initial-scale=1"),
scriptTag(defer := true, typ := "text/javascript", src := "/static/app.js"),
titleTag("Scalive Example")
),
bodyTag(
content

View file

@ -33,6 +33,7 @@ final case class LiveRoute[A, ClientEvt: JsonCodec, ServerEvt](
rootLayout(
div(
idAttr := id,
phx.main := true,
phx.session := token,
lv.el
)