Fixes for single view scripts

ddworak · ddworak · commit 64ddf4b652d5 · 2020-03-30T10:34:05.000+02:00
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/FunctionView.scala b/example/src/main/scala/io/udash/demos/jquery/views/FunctionView.scala
@@ -1,23 +1,24 @@
 package io.udash.demos.jquery.views
 
-import org.scalajs.dom.Event
+import org.scalajs.dom.{Element, Event}
 
 abstract class FunctionView {
 
   import scalatags.JsDom.all._
 
-  protected def content: Modifier
+  protected val content: Element
 
   protected def script: () => Any
 
   final def getTemplate: Modifier =
     div(
       content,
-      button(
+      h3(button(
+        marginTop := 10.px,
         onclick := ((_: Event) => {
           script()
           false
         })
-      )("Run script")
+      )("Run script"))
     )
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/IndexView.scala b/example/src/main/scala/io/udash/demos/jquery/views/IndexView.scala
@@ -25,6 +25,6 @@ object IndexView {
 
   final val content = div(
     "Take a look at following demos:",
-    demos.map(demo => div(demo.getTemplate)),
+    demos.map(demo => Seq(hr, div(demo.getTemplate))),
   )
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/AddBackView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/AddBackView.scala
@@ -9,25 +9,15 @@ object AddBackView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(cls := "addback")(
     h3(".addBack() & .addClass()"),
     tags2.style(
-      """.demo p, .demo div {
-        |  margin: 5px;
-        |  padding: 5px;
-        |}
-        |.border {
+      """
+        |.addback .border {
         |  border: 2px solid red;
         |}
-        |.background {
+        |.addback .background {
         |  background: yellow;
-        |}
-        |.left, .right {
-        |  width: 45%;
-        |  float: left;
-        |}
-        |.right {
-        |  margin-left: 3%;
         |}""".stripMargin
     ),
     div(cls := "left")(
@@ -44,15 +34,15 @@ object AddBackView extends FunctionView {
         p("Second Paragraph")
       )
     )
-  )
+  ).render
 
   override protected def script = () => {
-    jQ(".demo div.left, .demo div.right").find("div, div > p").addClass("border")
+    jQ("div.left, div.right", content).find("div, div > p").addClass("border")
 
     // First Example
-    jQ(".demo div.before-addback").find("p").addClass("background")
+    jQ("div.before-addback", content).find("p").addClass("background")
 
     // Second Example
-    jQ(".demo div.after-addback").find("p").addBack().addClass("background")
+    jQ("div.after-addback", content).find("p").addBack().addClass("background")
   }
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/AddView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/AddView.scala
@@ -9,16 +9,16 @@ object AddView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(cls := "addview")(
     h3(".add() & .css()"),
     tags2.style(
-      """.demo div {
+      """.addview div {
         |  width: 60px;
         |  height: 60px;
         |  margin: 10px;
         |  float: left;
         |}
-        |.demo p {
+        |.addview p {
         |  clear: left;
         |  font-weight: bold;
         |  font-size: 16px;
@@ -34,11 +34,11 @@ object AddView extends FunctionView {
     div(),
     div(),
     p("Added this... (notice no border)")
-  )
+  ).render
 
   override protected def script = () => {
-    jQ(".demo div").css("border", "2px solid red")
-      .add(".demo p")
+    jQ("div", content).css("border", "2px solid red")
+      .add("p", content)
       .css("background", "yellow")
   }
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/AfterBeforeView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/AfterBeforeView.scala
@@ -8,7 +8,7 @@ object AfterBeforeView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(
     h3(".after()"),
     div(
       p(cls := "after")("I would like to say: ")
@@ -17,10 +17,10 @@ object AfterBeforeView extends FunctionView {
     div(
       p(cls := "before")("is what I said...")
     )
-  )
+  ).render
 
   override protected def script = () => {
-    jQ(".after").after("<b>Hello</b>")
-    jQ(".before").before("<b>Hello</b>")
+    jQ(".after", content).after("<b>Hello</b>")
+    jQ(".before", content).before("<b>Hello</b>")
   }
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/AnimateView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/AnimateView.scala
@@ -10,10 +10,10 @@ object AnimateView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(cls := "animate")(
     h3(".animate() & .click()"),
     tags2.style(
-      """.demo div {
+      """.animate div {
         |  background-color: #bca;
         |  width: 200px;
         |  height: 1.1em;
@@ -22,7 +22,7 @@ object AnimateView extends FunctionView {
         |  margin: 3px;
         |  font-size: 14px;
         |}
-        |.demo button {
+        |.animate button {
         |  font-size: 14px;
         |}""".stripMargin
     ),
@@ -32,11 +32,11 @@ object AnimateView extends FunctionView {
     button(id := "go4", disabled := "disabled")("» Reset"),
     div(id := "block1")("Block1"),
     div(id := "block2")("Block2")
-  )
+  ).render
 
   override protected def script = () => {
-    jQ("#go1").on(EventName.click, (_: Element, _: JQueryEvent) => {
-      jQ("#block1")
+    jQ("#go1", content).on(EventName.click, (_: Element, _: JQueryEvent) => {
+      jQ("#block1", content)
         .animate(Map(
           "width" -> "90%"
         ), AnimationOptions(
@@ -47,27 +47,27 @@ object AnimateView extends FunctionView {
         .animate(Map("borderRightWidth" -> "15px"), 1500)
     })
 
-    jQ("#go2").on(EventName.click, (_: Element, _: JQueryEvent) => {
-      jQ("#block2")
+    jQ("#go2", content).on(EventName.click, (_: Element, _: JQueryEvent) => {
+      jQ("#block2", content)
         .animate(Map("width" -> "90%"), 1000)
         .animate(Map("fontSize" -> "24px"), 1000)
         .animate(Map("borderLeftWidth" -> "15px"), 1000)
     })
 
-    jQ("#go3").on(EventName.click, (_: Element, _: JQueryEvent) => {
-      jQ("#go1").add("#go2").trigger("click")
+    jQ("#go3", content).on(EventName.click, (_: Element, _: JQueryEvent) => {
+      jQ("#go1", content).add("#go2", content).trigger("click")
     })
 
-    jQ("#go4").on(EventName.click, (_: Element, _: JQueryEvent) => {
+    jQ("#go4", content).on(EventName.click, (_: Element, _: JQueryEvent) => {
       // TODO: It does not work without explicit Map elements type
       import scala.scalajs.js.`|`
-      jQ("div").css(Map[String, String | Int | Double | Boolean](
+      jQ("div", content).css(Map[String, String | Int | Double | Boolean](
         "width" -> "",
         "fontSize" -> "",
         "borderWidth" -> ""
       ))
     })
 
-    jQ(".demo button").prop("disabled", "")
+    jQ("button", content).prop("disabled", "")
   }
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/AppendPrependView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/AppendPrependView.scala
@@ -8,15 +8,15 @@ object AppendPrependView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(
     h3(".append()"),
     p(id := "append")("I would like to say: "),
     h3(".prepend()"),
     p(id := "prepend")("amigo!")
-  )
+  ).render
 
   override protected def script = () => {
-    jQ("#append").append("<b>hello</b>")
-    jQ("#prepend").prepend("<i>Hello</i> ")
+    jQ("#append", content).append("<b>hello</b>")
+    jQ("#prepend", content).prepend("<i>Hello</i> ")
   }
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/AttrView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/AttrView.scala
@@ -2,43 +2,44 @@ package io.udash.demos.jquery.views.functions
 
 import io.udash.demos.jquery.views.FunctionView
 import io.udash.wrappers.jquery._
+import org.scalajs.dom.html.Div
 import org.scalajs.dom.{Element, Event}
 
 /** Based on examples from: <a href="http://api.jquery.com/animate/">jQuery Docs</a>. */
 object AttrView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content: Div = div(
     h3(".attr() & .prop()"),
     input(id := "check1", tpe := "checkbox", checked := "checked"),
     label(`for` := "check1")("Check me"),
     p(),
     button(onclick := ((_: Event) => {
-      jQ(".demo input").attr("data-checked", "checked").trigger("change")
+      jQ("input", content).attr("data-checked", "checked").trigger("change")
       false
     }))(".attr(\"data-checked\", \"checked\")"),
     button(onclick := ((_: Event) => {
-      jQ(".demo input").attr("data-checked", "").trigger("change")
+      jQ("input", content).attr("data-checked", "").trigger("change")
       false
     }))(".attr(\"data-checked\", \"\")"),
     button(onclick := ((_: Event) => {
-      jQ(".demo input").attr("data-checked", null).trigger("change")
+      jQ("input", content).attr("data-checked", null).trigger("change")
       false
     }))(".attr(\"data-checked\", null)"), br(),
     button(onclick := ((_: Event) => {
-      jQ(".demo input").prop("checked", true).trigger("change")
+      jQ("input", content).prop("checked", true).trigger("change")
       false
     }))(".prop(\"checked\", true)"),
     button(onclick := ((_: Event) => {
-      jQ(".demo input").prop("checked", false).trigger("change")
+      jQ("input", content).prop("checked", false).trigger("change")
       false
     }))(".prop(\"checked\", false)")
-  )
+  ).render
 
   override protected def script = () => {
-    jQ(".demo input").on(EventName.change, (input: Element, _: JQueryEvent) => {
-      jQ(".demo p").html(
+    jQ("input", content).on(EventName.change, (input: Element, _: JQueryEvent) => {
+      jQ("p", content).html(
         s""".attr('data-checked'): ${jQ(input).attr("data-checked")}<br/>
            |.prop('checked'): ${jQ(input).prop("checked")}<br/>
            |.is(':checked'): ${jQ(input).is(":checked")}""".stripMargin
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/CallbacksView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/CallbacksView.scala
@@ -10,31 +10,31 @@ object CallbacksView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(
     h3("Callbacks"),
     ul(id := "plus"),
     ul(id := "minus"),
     ul(id := "mul"),
     ul(id := "div")
-  )
+  ).render
 
   override protected def script = () => {
     val callbacks = jQ.callbacks[js.Function1[(Int, Int), js.Any], (Int, Int)]()
     callbacks.add((t: (Int, Int)) => {
       val (a, b) = t
-      jQ("#plus").append(li(s"$a + $b = ${a + b}").render)
+      jQ("#plus", content).append(li(s"$a + $b = ${a + b}").render)
     })
     callbacks.add((t: (Int, Int)) => {
       val (a, b) = t
-      jQ("#minus").append(li(s"$a - $b = ${a - b}").render)
+      jQ("#minus", content).append(li(s"$a - $b = ${a - b}").render)
     })
     callbacks.add((t: (Int, Int)) => {
       val (a, b) = t
-      jQ("#mul").append(li(s"$a * $b = ${a*b}").render)
+      jQ("#mul", content).append(li(s"$a * $b = ${a * b}").render)
     })
     callbacks.add((t: (Int, Int)) => {
       val (a, b) = t
-      jQ("#div").append(li(s"$a / $b = ${a/b}").render)
+      jQ("#div", content).append(li(s"$a / $b = ${a / b}").render)
     })
 
     callbacks.fire((1, 1))
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/ChildrenView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/ChildrenView.scala
@@ -8,19 +8,19 @@ object ChildrenView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(
     h3(".children()"),
     div(
       span("Hello"),
       p(cls := "selected")("Hello again"),
       div(cls := "selected")("and again"),
       p("and one last time.")
     )
-  )
+  ).render
 
   override protected def script = () => {
-    jQ(".demo div").children().css("color", "blue")
-    jQ(".demo div").children(".selected").css("border-bottom", "3px double red")
-    jQ(".demo div").children("div.selected").css("border-top", "1px dashed green")
+    jQ("div", content).children().css("color", "blue")
+    jQ("div", content).children(".selected").css("border-bottom", "3px double red")
+    jQ("div", content).children("div.selected").css("border-top", "1px dashed green")
   }
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/DataView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/DataView.scala
@@ -8,20 +8,20 @@ object DataView extends FunctionView {
 
   import scalatags.JsDom.all._
 
-  override protected def content = div(cls := "demo")(
+  override protected val content = div(
     h3(".data()"),
     div(
       "The values stored were ",
       span("_"),
       " and ",
       span("_")
     )
-  )
+  ).render
 
   override protected def script = () => {
-    jQ(".demo div").data("test", Map("first" -> 16, "last" -> "pizza!"))
-    val data: Map[String, Any] = jQ(".demo div").data("test").get.asInstanceOf[Map[String, Any]]
-    jQ(".demo div span:first").text(data.get("first").get.toString)
-    jQ(".demo div span:last").text(data.get("last").get.toString)
+    jQ("div", content).data("test", Map("first" -> 16, "last" -> "pizza!"))
+    val data: Map[String, Any] = jQ("div", content).data("test").get.asInstanceOf[Map[String, Any]]
+    jQ("div span:first", content).text(data.get("first").get.toString)
+    jQ("div span:last", content).text(data.get("last").get.toString)
   }
 }
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/DeferredView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/DeferredView.scala
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/EachView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/EachView.scala
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/HideShowView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/HideShowView.scala
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/OffsetPositionView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/OffsetPositionView.scala
diff --git a/example/src/main/scala/io/udash/demos/jquery/views/functions/OnOneOffView.scala b/example/src/main/scala/io/udash/demos/jquery/views/functions/OnOneOffView.scala

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,6 @@ object IndexView {`
`25`	`25`
`26`	`26`	`final val content = div(`
`27`	`27`	`"Take a look at following demos:",`
`28`		`- demos.map(demo => div(demo.getTemplate)),`
	`28`	`+ demos.map(demo => Seq(hr, div(demo.getTemplate))),`
`29`	`29`	`)`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ object AfterBeforeView extends FunctionView {`
`8`	`8`
`9`	`9`	`import scalatags.JsDom.all._`
`10`	`10`
`11`		`- override protected def content = div(cls := "demo")(`
	`11`	`+ override protected val content = div(`
`12`	`12`	`h3(".after()"),`
`13`	`13`	`div(`
`14`	`14`	`p(cls := "after")("I would like to say: ")`
`@@ -17,10 +17,10 @@ object AfterBeforeView extends FunctionView {`
`17`	`17`	`div(`
`18`	`18`	`p(cls := "before")("is what I said...")`
`19`	`19`	`)`
`20`		`- )`
	`20`	`+ ).render`
`21`	`21`
`22`	`22`	`override protected def script = () => {`
`23`		`- jQ(".after").after("<b>Hello</b>")`
`24`		`- jQ(".before").before("<b>Hello</b>")`
	`23`	`+ jQ(".after", content).after("<b>Hello</b>")`
	`24`	`+ jQ(".before", content).before("<b>Hello</b>")`
`25`	`25`	`}`
`26`	`26`	`}`