Permalink
Browse files

Update: Precompiling the files

  • Loading branch information...
1 parent 8659566 commit 52431f82ac96ab44174eaeba13638d37f6314b1a @javierbyte committed May 9, 2015
Showing with 44 additions and 52 deletions.
  1. +1 −0 .gitignore
  2. +2 −0 .npmignore
  3. +4 −1 CHANGELOG.md
  4. +7 −1 README.md
  5. +4 −16 package.json
  6. +26 −34 { → src}/blur.jsx
  7. 0 blur.css → src/blur.less
  8. 0 { → src}/js/StackBlur.js
View
@@ -1,2 +1,3 @@
**/node_modules
*.log
+/dist
View
@@ -0,0 +1,2 @@
+**/node_modules
+*.log
View
@@ -1,3 +1,6 @@
-# v0.1.0
+# 0.2.0
+* Asses are now precompiled.
+* Changed `resizeSpeed` for `resizeInterval`.
+# v0.1.0
* Added `resizeSpeed` prop.
View
@@ -14,6 +14,12 @@ React component for creating blurred backgrounds using canvas.
var Blur = require('react-blur');
+### Add styles
+
+ @import url(node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css);
+
+### Example
+
<Blur img='/directory/img.jpg' blurRadius={5}>
The content.
</Blur>
@@ -24,6 +30,6 @@ For a complete example see the code in the [demo branch](https://github.com/javi
* `img`: The image path.
* `blurRadius`: The size of the blur radius.
-* `resizeSpeed`: Optional. How fast the canvas should re-render on resize? Defaults to 100ms.
+* `resizeInterval`: Optional. How fast the canvas should re-render on resize? Defaults to 128ms.
Thanks to [Quasimodo](http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html) for the original stack blur algorithm.
View
@@ -1,9 +1,10 @@
{
"name": "react-blur",
- "version": "0.1.3",
+ "version": "0.2.0-alpha",
"description": "React component for creating blurred backgrounds.",
- "main": "blur.jsx",
+ "main": "dist/blur.js",
"scripts": {
+ "prepublish": "mkdir -p dist && babel src/blur.jsx -u -o dist/blur.js --stage 1 && lessc src/blur.less dist/blur.css",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
@@ -20,18 +21,5 @@
"url" : "http://github.com/javierbyte/react-blur.git"
},
"author": "javierbyte",
- "license": "ISC",
- "browserify": {
- "transform": [
- [
- "reactify",
- {
- "es6": true
- }
- ]
- ]
- },
- "peerDependencies": {
- "react": "^0.12.x"
- }
+ "license": "ISC"
}
@@ -7,71 +7,67 @@ var ReactBlur = React.createClass({
propTypes: {
img: React.PropTypes.string.isRequired,
blurRadius: React.PropTypes.number,
- resizeSpeed: React.PropTypes.number
+ resizeInterval: React.PropTypes.number
},
getDefaultProps() {
return {
blurRadius: 0,
- resizeSpeed: 100
+ resizeInterval: 128
}
},
componentDidMount() {
window.addEventListener('resize', this.resize);
- var Blur = this,
- {blurRadius} = Blur.props;
+ var {blurRadius} = this.props;
+ var container = React.finDOMNode(this);
- var container = Blur.getDOMNode();
+ this.height = container.offsetHeight;
+ this.width = container.offsetWidth;
- Blur.height = container.offsetHeight;
- Blur.width = container.offsetWidth;
+ this.canvas = React.findDOMNode(this.refs.canvas);
+ this.canvas.height = this.height;
+ this.canvas.width = this.width;
- Blur.canvas = Blur.refs.canvas.getDOMNode();
- Blur.canvas.height = Blur.height;
- Blur.canvas.width = Blur.width;
-
- var ctx = Blur.canvas.getContext('2d');
- Blur.img = new Image;
- Blur.img.crossOrigin = "Anonymous";
- Blur.img.onload = function(){
- stackBlurImage( Blur.img, Blur.canvas, blurRadius, Blur.width, Blur.height)
+ var ctx = this.canvas.getContext('2d');
+ this.img = new Image;
+ this.img.crossOrigin = "Anonymous";
+ this.img.onload = () => {
+ stackBlurImage( this.img, this.canvas, blurRadius, this.width, this.height)
};
- Blur.img.src = Blur.props.img;
+ this.img.src = this.props.img;
},
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
},
resize() {
- var Blur = this;
-
var now = +new Date,
args = arguments,
deferTimer,
- threshhold = Blur.props.resizeSpeed;
+ threshhold = this.props.resizeInterval;
if (this.last && now < this.last + threshhold) {
clearTimeout(deferTimer);
- deferTimer = setTimeout(function () {
+ deferTimer = setTimeout(() => {
this.last = now;
- doResize();
+ this.doResize();
}, threshhold);
} else {
this.last = now;
- doResize();
+ this.doResize();
}
+ },
- function doResize() {
- var container = Blur.getDOMNode();
+ doResize() {
+ var container = React.findDOMNode(this);
- Blur.height = container.offsetHeight;
- Blur.width = container.offsetWidth;
+ this.height = container.offsetHeight;
+ this.width = container.offsetWidth;
- stackBlurImage(Blur.img, Blur.canvas, Blur.props.blurRadius, Blur.width, Blur.height);
- }
+ stackBlurImage(this.img, this.canvas, this.props.blurRadius, this.width, this.height);
},
componentWillReceiveProps(nextProps) {
@@ -87,11 +83,7 @@ var ReactBlur = React.createClass({
}
return (
- <div
- {...other}
- className={classes}
- onClick={this.clickTest} >
-
+ <div {...other} className={classes} onClick={this.clickTest} >
<canvas className='react-blur-canvas' ref='canvas' />
{children}
</div>
File renamed without changes.
File renamed without changes.

0 comments on commit 52431f8

Please sign in to comment.