From 9f46d0344731a3eb6c00c15e1e79998af1b77466 Mon Sep 17 00:00:00 2001
From: "Frank A. Krueger" <fak@praeclarum.org>
Date: Sun, 18 Jun 2017 16:50:22 -0700
Subject: [PATCH] Add styles to elements

---
 Ooui/Client.js        |  9 +++++++--
 Ooui/Element.cs       |  9 +++++++++
 Ooui/Style.cs         | 17 +++++++++++++++++
 Samples/Program.cs    | 31 ++++++++++++++++---------------
 Samples/TodoSample.cs | 30 ++++++++++++++++++++++++++++++
 Tests/StyleTests.cs   |  6 ++++++
 6 files changed, 85 insertions(+), 17 deletions(-)
 create mode 100644 Samples/TodoSample.cs

diff --git a/Ooui/Client.js b/Ooui/Client.js
index 639e076..481a6e2 100644
--- a/Ooui/Client.js
+++ b/Ooui/Client.js
@@ -36,8 +36,13 @@ function msgSet (m) {
         console.error ("Unknown node id", m);
         return;
     }
-    node[m.k] = m.v;
-    if (debug) console.log ("Set", node, m.k, m.v);
+    const parts = m.k.split(".");
+    let o = node;
+    for (let i = 0; i < parts.length - 1; i++) {
+        o = o[parts[i]];
+    }
+    o[parts[parts.length - 1]] = m.v;
+    if (debug) console.log ("Set", node, parts, m.v);
 }
 
 function msgCall (m) {
diff --git a/Ooui/Element.cs b/Ooui/Element.cs
index 6fe66f3..84252ce 100644
--- a/Ooui/Element.cs
+++ b/Ooui/Element.cs
@@ -1,4 +1,5 @@
 using System;
+using System.ComponentModel;
 
 namespace Ooui
 {
@@ -10,6 +11,8 @@ namespace Ooui
             set => SetProperty (ref className, value, "className");
         }
 
+        public Style Style { get; private set; } = new Style ();
+
         string title = "";
         public string Title {
             get => title;
@@ -25,6 +28,12 @@ namespace Ooui
         protected Element (string tagName)
             : base (tagName)
         {
+            Style.PropertyChanged += HandleStylePropertyChanged;
+        }
+
+        void HandleStylePropertyChanged (object sender, PropertyChangedEventArgs e)
+        {
+            SendSet ("style." + Style.GetJsName (e.PropertyName), Style[e.PropertyName]);
         }
     }
 }
diff --git a/Ooui/Style.cs b/Ooui/Style.cs
index 667f569..a57b5a1 100644
--- a/Ooui/Style.cs
+++ b/Ooui/Style.cs
@@ -332,6 +332,23 @@ namespace Ooui
             }
         }
 
+        public static string GetJsName (string propertyName)
+        {
+            var o = new System.Text.StringBuilder ();
+            var needsCap = false;
+            for (var i = 0; i < propertyName.Length; i++) {
+                var c = propertyName[i];
+                if (c == '-') {
+                    needsCap = true;
+                }
+                else {
+                    o.Append (needsCap ? Char.ToUpperInvariant (c) : c);
+                    needsCap = false;
+                }
+            }
+            return o.ToString ();
+        }
+
         public override string ToString ()
         {
             var o = new System.Text.StringBuilder ();
diff --git a/Samples/Program.cs b/Samples/Program.cs
index b900960..e3315bd 100644
--- a/Samples/Program.cs
+++ b/Samples/Program.cs
@@ -1,15 +1,16 @@
-using System;
-using Ooui;
-
-namespace Samples
-{
-    class Program
-    {
-        static void Main (string[] args)
-        {
-            new ButtonSample ().Publish ();
-
-            Console.ReadLine ();
-        }
-    }
-}
+using System;
+using Ooui;
+
+namespace Samples
+{
+    class Program
+    {
+        static void Main (string[] args)
+        {
+            new ButtonSample ().Publish ();
+            new TodoSample ().Publish ();
+
+            Console.ReadLine ();
+        }
+    }
+}
diff --git a/Samples/TodoSample.cs b/Samples/TodoSample.cs
new file mode 100644
index 0000000..d0aff2d
--- /dev/null
+++ b/Samples/TodoSample.cs
@@ -0,0 +1,30 @@
+using System;
+using Ooui;
+
+namespace Samples
+{
+    public class TodoSample
+    {
+        Button MakeTodo ()
+        {
+            var button = new Button ("Click me!");
+            button.Style.FontSize = 100;
+            var count = 0;
+            button.Clicked += (s, e) => {
+                button.Style.FontSize = (int)button.Style.FontSize + 1;
+                count++;
+                button.Text = $"Clicked {count} times";
+            };
+            return button;
+        }
+
+        public void Publish ()
+        {
+            var b = MakeTodo ();
+
+            UI.Publish ("/todo", MakeTodo);
+        }
+    }
+}
+
+
diff --git a/Tests/StyleTests.cs b/Tests/StyleTests.cs
index c909ec8..4511026 100644
--- a/Tests/StyleTests.cs
+++ b/Tests/StyleTests.cs
@@ -70,5 +70,11 @@ namespace Tests
             s.BorderLeftWidth = 3.142;
             Assert.AreEqual ("border-left-width:3.142", s.ToString ());
         }
+
+        [TestMethod]
+        public void JsName ()
+        {
+            Assert.AreEqual ("borderLeftWidth", Style.GetJsName ("border-left-width"));
+        }
     }
 }