Add styles to elements

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) {

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]);
         }
     }
 }

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 ();

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 ();
+        }
+    }
+}

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);
+        }
+    }
+}
+
+

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"));
+        }
     }
 }