airframe-rx: wvlet#961 Support add/overwrite of DOM attributes

xerial · Mar 12, 2020 · 3c1c0ba · 3c1c0ba
1 parent bb979dd
commit 3c1c0ba
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/airframe-rx/.js/src/main/scala/wvlet/airframe/rx/html/DOMRenderer.scala b/airframe-rx/.js/src/main/scala/wvlet/airframe/rx/html/DOMRenderer.scala
@@ -19,7 +19,7 @@ import wvlet.log.LogSupport
 import scala.scalajs.js
 
 /**
-  *
+  * Convert HtmlNodes into DOM elements for Scala.js
   */
 object DOMRenderer extends LogSupport {
 
@@ -180,8 +180,8 @@ object DOMRenderer extends LogSupport {
           a.name match {
             case "style" =>
               val prev = htmlNode.style.cssText
-              if (prev.isEmpty) {
-                htmlNode.style.cssText = s"${prev} ${v}"
+              if (prev.nonEmpty && a.append && value.nonEmpty) {
+                htmlNode.style.cssText = s"${prev} ${value}"
               } else {
                 htmlNode.style.cssText = value
               }

diff --git a/airframe-rx/.js/src/test/scala/wvlet/airframe/rx/html/HtmlTest.scala b/airframe-rx/.js/src/test/scala/wvlet/airframe/rx/html/HtmlTest.scala
@@ -94,4 +94,29 @@ class HtmlTest extends AirSpec {
     val d = button("hello", onclick { () => println("clicked") })
     render(d)
   }
+
+  test("append attribute") {
+    val d = div(id -> "main", cls -> "btn")
+    render(d) shouldBe """<div id="main" class="btn"></div>"""
+
+    val d2 = d(cls += "btn-primary")
+    render(d2) shouldBe """<div id="main" class="btn btn-primary"></div>"""
+
+    val d3 = d(cls -> "alert")
+    render(d3) shouldBe """<div id="main" class="alert"></div>"""
+  }
+
+  test("append style") {
+    val d = div(style -> "color: white;")
+    render(d) shouldBe """<div style="color: white;"></div>"""
+
+    val d2 = d(style += "background-color: black;")
+    render(d2) shouldBe """<div style="color: white; background-color: black;"></div>"""
+
+    val d3 = d(style -> "font-family: Monaco;")
+    render(d3) shouldBe """<div style="font-family: Monaco;"></div>"""
+
+    val d4 = d3(style.noValue)
+    render(d4) shouldBe """<div style=""></div>"""
+  }
 }