1 files changed, 42 insertions, 3 deletions
diff --git a/material/material.ur b/material/material.ur
index eb4f971..72a3e98 100644
--- a/material/material.ur
+++ b/material/material.ur
@@ -1,5 +1,5 @@
 (* Copyright 2015 Google Inc.
-Copyright 2016 Benjamin Barenblat
+Copyright 2016, 2017 Benjamin Barenblat
 
 Licensed under the Apache License, Version 2.0 (the “License”); you may not use
 this file except in compliance with the License.  You may obtain a copy of the
@@ -12,6 +12,10 @@ under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR
 CONDITIONS OF ANY KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations under the License. *)
 
+style stackingContext
+
+fun inNewStackingContext x = <xml><div class={stackingContext}>{x}</div></xml>
+
 (* TODO(bbaren): Support attributes in the arguments. *)
 fun page p = <xml>
   <head>
@@ -44,16 +48,51 @@ end
 structure Checkbox = struct
   style checkbox
   style checked
+  style container
+  style ink
+
+  (* Pixel dimensions of the checkbox.  If you update these, you must also
+  update the CSS file. *)
+  val width = 24
+  val height = 24
+
+  fun centeredAtXY x y : css_style =
+    let
+      val x' = x - width / 2
+      val y' = y - width / 2
+    in
+      oneProperty (oneProperty
+                     noStyle
+                     (value (property "left") (atom (show x' ^ "px"))))
+                  (value (property "top") (atom (show y' ^ "px")))
+    end
+
+  fun inkAnimation (s : source (option {X : int, Y : int})) =
+    <xml>
+      <dyn
+        signal={
+          v <- signal s;
+          return (case v of
+                      None => <xml></xml>
+                    | Some xy => <xml>
+                        <span class={ink} style={centeredAtXY xy.X xy.Y}></span>
+                      </xml>)
+        }
+      />
+    </xml>
 
   val make c onChange =
     s <- source c;
-    return <xml>
+    inkCenter <- source None;
+    return (inNewStackingContext <xml>
+      {inkAnimation inkCenter}
       <span
         dynClass={
           c <- signal s;
           return (classes checkbox (if c then checked else null))
         }
         onclick={fn click =>
+          set inkCenter (Some {X = click.ClientX, Y = click.ClientY});
           c <- get s;
           let
             val c' = not c
@@ -64,7 +103,7 @@ structure Checkbox = struct
         }
       >
       </span>
-      </xml>
+      </xml>)
 end
 
 structure List = struct