mirror of
https://github.com/phfroidmont/scalive.git
synced 2025-12-25 05:26:59 +01:00
Add title and topbar
This commit is contained in:
parent
124239925d
commit
fca87a4263
5 changed files with 14 additions and 10 deletions
|
|
@ -54,4 +54,4 @@ object example extends ScalaCommon:
|
||||||
|
|
||||||
object js extends TypeScriptModule:
|
object js extends TypeScriptModule:
|
||||||
def mainFileName = "app.js"
|
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")
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
import scalive.codecs.BooleanAsAttrPresenceCodec
|
||||||
import scalive.codecs.StringAsIsCodec
|
import scalive.codecs.StringAsIsCodec
|
||||||
import scalive.defs.attrs.HtmlAttrs
|
import scalive.defs.attrs.HtmlAttrs
|
||||||
import scalive.defs.complex.ComplexHtmlKeys
|
import scalive.defs.complex.ComplexHtmlKeys
|
||||||
|
|
@ -5,7 +6,7 @@ import scalive.defs.tags.HtmlTags
|
||||||
|
|
||||||
package object scalive extends HtmlTags with HtmlAttrs with ComplexHtmlKeys:
|
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:
|
object phx:
|
||||||
private def phxAttr(suffix: String): HtmlAttr[String] =
|
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 =
|
private def phxAttrJson(suffix: String): HtmlAttrJsonValue =
|
||||||
new HtmlAttrJsonValue(s"phx-$suffix")
|
new HtmlAttrJsonValue(s"phx-$suffix")
|
||||||
private def dataPhxAttr(suffix: String): HtmlAttr[String] =
|
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 session = dataPhxAttr("session")
|
||||||
|
private[scalive] lazy val main = htmlAttr("data-phx-main", BooleanAsAttrPresenceCodec)
|
||||||
lazy val click = phxAttrJson("click")
|
lazy val click = phxAttrJson("click")
|
||||||
def value(key: String) = phxAttr(s"value-$key")
|
def value(key: String) = phxAttr(s"value-$key")
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import { Socket } from "phoenix"
|
import { Socket } from "phoenix"
|
||||||
import { LiveSocket } from "phoenix_live_view"
|
import { LiveSocket } from "phoenix_live_view"
|
||||||
// import topbar from "../vendor/topbar"
|
import topbar from "topbar"
|
||||||
// import Calendar from "./hooks/calendar"
|
|
||||||
|
|
||||||
// let csrfToken =
|
// let csrfToken =
|
||||||
// document.querySelector("meta[name='csrf-token']").getAttribute("content")
|
// 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
|
// Show progress bar on live navigation and form submits
|
||||||
// topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
|
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-start", _info => topbar.show(300))
|
||||||
// window.addEventListener("phx:page-loading-stop", info => topbar.hide())
|
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
|
||||||
|
|
||||||
// connect if there are any LiveViews on the page
|
// connect if there are any LiveViews on the page
|
||||||
liveSocket.connect()
|
liveSocket.connect()
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,10 @@ object RootLayout:
|
||||||
htmlRootTag(
|
htmlRootTag(
|
||||||
lang := "en",
|
lang := "en",
|
||||||
headTag(
|
headTag(
|
||||||
metaTag(charset := "utf-8"),
|
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(
|
bodyTag(
|
||||||
content
|
content
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,7 @@ final case class LiveRoute[A, ClientEvt: JsonCodec, ServerEvt](
|
||||||
rootLayout(
|
rootLayout(
|
||||||
div(
|
div(
|
||||||
idAttr := id,
|
idAttr := id,
|
||||||
|
phx.main := true,
|
||||||
phx.session := token,
|
phx.session := token,
|
||||||
lv.el
|
lv.el
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue