diff options
| author |  Adam Chlipala <adam@chlipala.net> | 2018-10-19 16:28:39 -0400 |
|---|---|---|
| committer | Adam Chlipala <adam@chlipala.net> | 2018-10-19 16:28:39 -0400 |
| commit | abd0bdd9518b8ed9e9b0ad0a0c1059760b0ec5ce (patch) | |
| tree | 136495948ad933f9b62981c81a3ca43588179fe6 | |
| parent | 1a4a8b5ab8eb499ee2217c966f7fbb7716adf9e9 (diff) | |
Automatic merging of style/dynStyle and class/dynClass (closes #64)
| -rw-r--r-- | lib/js/urweb.js | 13 | ||||
| -rw-r--r-- | tests/classAndDynClass.ur | 9 |
2 files changed, 20 insertions, 2 deletions
diff --git a/lib/js/urweb.js b/lib/js/urweb.js index bf20cfd4..f81f05e3 100644 --- a/lib/js/urweb.js +++ b/lib/js/urweb.js @@ -1310,6 +1310,9 @@ function dynClass(pnode, html, s_class, s_style) { var x = null; var y = null; + var classNameBefore = html.className; + var styleCssBefore = html.style.cssText; + if (s_class) { x = document.createElement("script"); x.dead = false; @@ -1322,7 +1325,10 @@ function dynClass(pnode, html, s_class, s_style) { freeClosure(ls.data); var cls = {v : null}; - html.className = flatten(cls, v); + var s = flatten(cls, v); + if (classNameBefore) + s += " " + classNameBefore; + html.className = s; x.closures = concat(cls.v, htmlCls); } @@ -1342,7 +1348,10 @@ function dynClass(pnode, html, s_class, s_style) { freeClosure(ls.data); var cls = {v : null}; - html.style.cssText = flatten(cls, v); + var s = flatten(cls, v); + if (styleCssBefore) + s += " " + styleCssBefore; + html.style.cssText = s; y.closures = concat(cls.v, htmlCls2); } diff --git a/tests/classAndDynClass.ur b/tests/classAndDynClass.ur new file mode 100644 index 00000000..ba01962d --- /dev/null +++ b/tests/classAndDynClass.ur @@ -0,0 +1,9 @@ +style style1 +style style2 + +fun main () : transaction page = return <xml><body> + <div class="style1" dynClass={return (CLASS "style2")}>Text</div> + <div dynClass={return (CLASS "style2")}>Text</div> + <div style="font-weight: bold" dynStyle={return (STYLE "font-variant: small-caps")}>Text</div> + <div dynStyle={return (STYLE "font-variant: small-caps")}>Text</div> +</body></xml> |