From fca87a426374f4c1c88e154fe56a5345ed5c9061 Mon Sep 17 00:00:00 2001 From: Paul-Henri Froidmont Date: Wed, 27 Aug 2025 03:09:14 +0200 Subject: [PATCH] Add title and topbar --- build.mill | 2 +- core/src/scalive/Scalive.scala | 6 ++++-- example/js/src/app.js | 9 ++++----- example/src/RootLayout.scala | 6 ++++-- zio/src/scalive/LiveRouter.scala | 1 + 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/build.mill b/build.mill index 2dacadf..cd87940 100644 --- a/build.mill +++ b/build.mill @@ -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") diff --git a/core/src/scalive/Scalive.scala b/core/src/scalive/Scalive.scala index 2838d0e..2350b41 100644 --- a/core/src/scalive/Scalive.scala +++ b/core/src/scalive/Scalive.scala @@ -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") diff --git a/example/js/src/app.js b/example/js/src/app.js index 8a108b2..e398af6 100644 --- a/example/js/src/app.js +++ b/example/js/src/app.js @@ -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() diff --git a/example/src/RootLayout.scala b/example/src/RootLayout.scala index 456f8af..3f26530 100644 --- a/example/src/RootLayout.scala +++ b/example/src/RootLayout.scala @@ -5,8 +5,10 @@ object RootLayout: htmlRootTag( lang := "en", headTag( - metaTag(charset := "utf-8"), - scriptTag(defer := true, typ := "text/javascript", src := "/static/app.js") + metaTag(charset := "utf-8"), + 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 diff --git a/zio/src/scalive/LiveRouter.scala b/zio/src/scalive/LiveRouter.scala index f912f6f..fd660cb 100644 --- a/zio/src/scalive/LiveRouter.scala +++ b/zio/src/scalive/LiveRouter.scala @@ -33,6 +33,7 @@ final case class LiveRoute[A, ClientEvt: JsonCodec, ServerEvt]( rootLayout( div( idAttr := id, + phx.main := true, phx.session := token, lv.el )