wip

googlearchive · Sep 21, 2013 · bd707c9 · bd707c9
1 parent 2cf182c
commit bd707c9
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/yvonne/css-to-webanimations/css-to-webanimations-el.html b/yvonne/css-to-webanimations/css-to-webanimations-el.html
@@ -0,0 +1,72 @@
+<polymer-element name="css-to-webanimations-el">
+	<template>
+		<style>
+			#animated {
+				border: 1px solid black;
+				font-size: 20px;
+				padding: 10px;
+				text-align: center;
+			}
+			@keyframes x-foo {
+				0% {
+					opacity: 1;
+				}
+				100% {
+					opacity: 0;
+				}
+			}
+		</style>
+		<div id="animated">Polymer</div>
+	</template>
+	<script>
+		(function() {
+
+			var Parser = function(cssText) {
+				this.cssText = cssText;
+				//this.position = 0;
+			}
+
+			Parser.prototype = {
+				match: function(re) {
+					var match = re.exec(this.cssText);
+					if (match) {
+						//this.position = this.cssText.indexOf(match[0]);
+						this.cssText = this.cssText.slice(match[0].length);
+					}
+					return match;
+				},
+				open: function() {
+					this.match(/{/);
+				},
+				parseAtKeyframeRules: function() {
+					var rule;
+					var match = this.match(/@keyframes ([\w-]+)/);
+					if (match) {
+						rule = {
+							name: match[1]
+						};
+					}
+					console.log('cssText', this.cssText);
+					console.log('rule', rule);
+					return rule;
+				}
+			};
+
+			function getStyles(node) {
+				var styles = node.querySelectorAll('style');
+				styles.forEach(function(s) {
+					if (s.textContent) {
+						var parser = new Parser(s.textContent);
+						parser.parseAtKeyframeRules();
+					}
+				})
+			}
+
+			Polymer('css-to-webanimations-el', {
+				ready: function() {
+					getStyles(this.shadowRoot);
+				}
+			});
+		})();
+	</script>
+</polymer-element>
diff --git a/yvonne/css-to-webanimations/index.html b/yvonne/css-to-webanimations/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+	<link href="css-to-webanimations-el.html" rel="import">
+	<script src="../../../polymer/polymer.js"></script>
+</head>
+<body>
+	<css-to-webanimations-el></css-to-webanimations-el>
+</body>
+</html>