From 4953ab8d8a5da410918b436b4b385a52e46b05f9 Mon Sep 17 00:00:00 2001 From: TJ Holowaychuk Date: Sat, 11 Aug 2012 20:21:58 -0700 Subject: [PATCH] Initial commit --- .gitignore | 5 +++++ .npmignore | 1 + History.md | 0 Makefile | 11 +++++++++++ Readme.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ component.json | 7 +++++++ index.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ test/index.html | 31 +++++++++++++++++++++++++++++++ 8 files changed, 146 insertions(+) create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 History.md create mode 100644 Makefile create mode 100644 Readme.md create mode 100644 component.json create mode 100644 index.js create mode 100644 test/index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1178e75 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules +test/*.js +test/*.css +build +components diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..9daeafb --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +test diff --git a/History.md b/History.md new file mode 100644 index 0000000..e69de29 diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..00bb7f9 --- /dev/null +++ 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 new file mode 100644 index 0000000..bdcdd8b --- /dev/null +++ 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 \ No newline at end of file diff --git a/component.json b/component.json new file mode 100644 index 0000000..6a9911e --- /dev/null +++ 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 new file mode 100644 index 0000000..c39ced0 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..6788f8a --- /dev/null +++ b/test/index.html @@ -0,0 +1,31 @@ + + + Mocha + + + + + +
+ + + + + + +