[css-paint-api] Move circle demo into circle/ folder.

bfgeek · bfgeek · commit 3e8ca274f6ff · 2017-04-10T16:36:52.000-07:00
Begins to address #340.
diff --git a/css-paint-api/Overview.bs b/css-paint-api/Overview.bs
@@ -623,41 +623,56 @@ Example 1: A colored circle. {#example-1}
 -----------------------------------------
 
 <pre class='lang-markup'>
-&lt;div id="myElement">
-    CSS is awesome.
-&lt;/div>
-
+&lt;!DOCTYPE html>
 &lt;style>
-#myElement {
-    --circle-color: red;
+  #example {
+    --circle-color: deepskyblue;
+
     background-image: paint(circle);
-}
+    font-family: sans-serif;
+    font-size: 36px;
+    transition: --circle-color 1s;
+  }
+
+  #example:focus {
+    --circle-color: purple;
+  }
 &lt;/style>
 
+&lt;textarea id="example">
+  CSS is awesome.
+&lt;/textarea>
+
 &lt;script>
+    CSS.registerProperty({
+      name: '--circle-color',
+      syntax: '&lt;color>',
+      initialValue: 'black',
+      inherit: false
+    });
     CSS.paintWorklet.import('circle.js');
 &lt;/script>
 </pre>
 
 <pre class='lang-javascript'>
 // circle.js
 registerPaint('circle', class {
-    static get inputProperties() { return ['--circle-color']; }
-    paint(ctx, geom, properties) {
-        // Change the fill color.
-        const color = properties.get('--circle-color');
-        ctx.fillStyle = color;
-
-        // Determine the center point and radius.
-        const x = geom.width / 2;
-        const y = geom.height / 2;
-        const radius = Math.min(x, y);
-
-        // Draw the circle \o/
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-        ctx.fill();
-    }
+  static get inputProperties() { return ['--circle-color']; }
+  paint(ctx, geom, properties) {
+    // Change the fill color.
+    const color = properties.get('--circle-color');
+    ctx.fillStyle = color.cssText;
+
+    // Determine the center point and radius.
+    const x = geom.width / 2;
+    const y = geom.height / 2;
+    const radius = Math.min(x, y);
+
+    // Draw the circle \o/
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.fill();
+  }
 });
 </pre>
 
diff --git a/css-paint-api/circle/circle.js b/css-paint-api/circle/circle.js
@@ -0,0 +1,18 @@
+registerPaint('circle', class {
+	static get inputProperties() { return ['--circle-color']; }
+	paint(ctx, geom, properties) {
+		// Change the fill color.
+		const color = properties.get('--circle-color');
+		ctx.fillStyle = color.cssText;
+
+		// Determine the center point and radius.
+		const x = geom.width / 2;
+		const y = geom.height / 2;
+		const radius = Math.min(x, y);
+
+		// Draw the circle \o/
+		ctx.beginPath();
+		ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+		ctx.fill();
+	}
+});
diff --git a/css-paint-api/circle/index.html b/css-paint-api/circle/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<style>
+  #example {
+    --circle-color: deepskyblue;
+
+    background-image: paint(circle);
+		font-family: sans-serif;
+    font-size: 36px;
+    transition: --circle-color 1s;
+  }
+
+  #example:focus {
+    --circle-color: purple;
+  }
+</style>
+
+<textarea id="example">
+  CSS is awesome.
+</textarea>
+
+<script>
+    CSS.registerProperty({
+      name: '--circle-color',
+      syntax: '<color>',
+      initialValue: 'black',
+      inherit: false
+    });
+    CSS.paintWorklet.import('circle.js');
+</script>
+
