Initial commit

component · Aug 12, 2012 · 4953ab8 · 4953ab8
commit 4953ab8
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+test/*.js
+test/*.css
+build
+components
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+test
diff --git a/History.md b/History.md
diff --git a/Makefile b/Makefile
@@ -0,0 +1,11 @@
+
+build: index.js components
+	@component build
+
+components:
+	@component install
+
+clean:
+	rm -fr build components
+
+.PHONY: clean
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,45 @@
+
+# Style
+
+  Style Canvas renders using CSS.
+
+## Installation
+
+```
+$ component install component/style
+```
+
+## Example
+
+```css
+body {
+  font-size: 18px;
+}
+.progress {
+  background: #fff;
+}
+.progress .percentage {
+  color: #ddd;
+}
+```
+
+```js
+style('.progress', 'background-color');
+// => 'rgb(255, 255, 255)'
+
+style('.progress .percentage', 'color');
+// => 'rgb(221, 221, 221)'
+
+style('.progress .percent', 'font-size');
+// => '18px'
+```
+
+## About
+
+  This component exists so that you can influence aspects of your
+  Canvas renders using CSS, where style decisions belong. For details
+  view this [blog post](http://tjholowaychuk.com/post/6339741902/styling-canvas-drawings-with-css).
+
+## License
+
+  MIT
diff --git a/component.json b/component.json
@@ -0,0 +1,7 @@
+{
+  "name": "style",
+  "description": "Style canvas renders using CSS",
+  "version": "0.0.1",
+  "keywords": ["css", "canvas", "utility"],
+  "scripts": ["index.js"]
+}
diff --git a/index.js b/index.js
@@ -0,0 +1,46 @@
+
+/**
+ * Expose `style`.
+ */
+
+module.exports = style;
+
+/**
+ * Return the style for `prop` using the given `selector`.
+ *
+ * @param {String} selector
+ * @param {String} prop
+ * @return {String}
+ * @api public
+ */
+
+function style(selector, prop) {
+  var cache = style.cache = style.cache || {}
+    , cid = selector + ':' + prop;
+
+  if (cache[cid]) return cache[cid];
+
+  var parts = selector.split(/ +/)
+    , len = parts.length
+    , parent = document.createElement('div')
+    , root = parent
+    , child
+    , part;
+
+  for (var i = 0; i < len; ++i) {
+    part = parts[i];
+    child = document.createElement('div');
+    parent.appendChild(child);
+    parent = child;
+    if ('#' == part[0]) {
+      child.setAttribute('id', part.substr(1));
+    } else if ('.' == part[0]) {
+      child.setAttribute('class', part.substr(1));
+    }
+  }
+
+  document.body.appendChild(root);
+  var ret = getComputedStyle(child)[prop];
+  document.body.removeChild(root);
+  return cache[cid] = ret;
+}
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <title>Mocha</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link rel="stylesheet" href="mocha.css" />
+    <style>
+      body {
+        font-size: 18px;
+      }
+      .progress {
+        background: #fff;
+      }
+      .progress .percent {
+        color: #ddd;
+      }
+      .progress .ring {
+        background: #ddd;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="mocha"></div>
+    <script src="mocha.js"></script>
+    <script>mocha.setup('bdd')</script>
+    <script src="../build/build.js"></script>
+    <script src="unit.js"></script>
+    <script>
+      mocha.run();
+    </script>
+  </body>
+</html>