#1 Add compiled js version

.gitignore

@@ -81,4 +81,5 @@ $RECYCLE.BIN/
 .idea/modules.xml
 .idea/react-image-magnifier.iml
 .idea/scopes/scope_settings.xml
-.idea/vcs.xml
+.idea/vcs.xml
+dist/.module-cache

dist/App.js

@@ -0,0 +1,55 @@
+// polyfills
+require('es5-shim');
+require('es5-shim/es5-sham');
+
+var React = require('react');
+var ImageMagnifier = require('./ImageMagnifier');
+
+var App = React.createClass({displayName: "App",
+
+    render:function () {
+        return (
+            React.createElement("div", null, 
+                React.createElement(ImageMagnifier, {
+                    image: {
+                        src: "img/cat-small.jpg",
+                        width: 400,
+                        height: 300
+                    }, 
+                    zoomImage: {
+                        src: "img/cat-large.jpg",
+                        width: 1024,
+                        height: 768
+                    }}
+                ), 
+                React.createElement(ImageMagnifier, {
+                    image: {
+                        src: "img/beach-small.jpg",
+                        width: 400,
+                        height: 300
+                    }, 
+                    zoomImage: {
+                        src: "img/beach-large.jpg",
+                        width: 1600,
+                        height: 1200
+                    }, 
+                    cursorOffset: { x: 80, y: -80}}
+                ), 
+                React.createElement(ImageMagnifier, {
+                    image: {
+                        src: "img/fall-small.jpg",
+                        width: 400,
+                        height: 250
+                    }, 
+                    zoomImage: {
+                        src: "img/fall-large.jpg",
+                        width: 1920,
+                        height: 1200
+                    }}
+                )
+            )
+        );
+    }
+});
+
+React.render(React.createElement(App, null), document.getElementById("mount"));

dist/ImageMagnifier.js

@@ -0,0 +1,183 @@
+var React = require('react');
+
+var Magnifier = React.createClass({displayName: "Magnifier",
+
+    propTypes: {
+
+        // the size of the magnifier window
+        size: React.PropTypes.number.isRequired,
+
+        // x position on screen
+        x: React.PropTypes.number.isRequired,
+
+        // y position on screen
+        y: React.PropTypes.number.isRequired,
+
+        // x position relative to the image
+        offsetX: React.PropTypes.number.isRequired,
+
+        // y position relative to the image
+        offsetY: React.PropTypes.number.isRequired,
+
+        // the offset of the zoom bubble from the cursor
+        cursorOffset: React.PropTypes.shape({
+            x: React.PropTypes.number.isRequired,
+            y: React.PropTypes.number.isRequired
+        }).isRequired,
+
+        // the size of the non-zoomed-in image
+        smallImage: React.PropTypes.shape({
+            src: React.PropTypes.string.isRequired,
+            width: React.PropTypes.number.isRequired,
+            height: React.PropTypes.number.isRequired
+        }).isRequired,
+
+        // the size of the zoomed-in image
+        zoomImage: React.PropTypes.shape({
+            src: React.PropTypes.string.isRequired,
+            width: React.PropTypes.number.isRequired,
+            height: React.PropTypes.number.isRequired
+        }).isRequired
+    },
+
+    render:function () {
+        var props = this.props;
+        var halfSize = props.size / 2;
+        var magX = props.zoomImage.width / props.smallImage.width;
+        var magY = props.zoomImage.height / props.smallImage.height;
+        var bgX = -(props.offsetX*magX - halfSize);
+        var bgY = -(props.offsetY*magY - halfSize);
+        var isVisible = props.offsetY < props.smallImage.height &&
+                        props.offsetX < props.smallImage.width &&
+                        props.offsetY > 0 &&
+                        props.offsetX > 0;
+        return (
+            React.createElement("div", {className: "react-image-magnifier"},
+                React.createElement("div", {style: {
+                    position: 'absolute',
+                    display: isVisible ? 'block' : 'none',
+                    top: props.y,
+                    left: props.x,
+                    width: props.size,
+                    height: props.size,
+                    marginLeft: -halfSize + props.cursorOffset.x,
+                    marginTop: -halfSize + props.cursorOffset.y,
+                    backgroundColor: 'white',
+                    borderRadius: props.size,
+                    boxShadow: ("1px 1px 6px rgba(0,0,0,0.3)")
+                }},
+                    React.createElement("div", {style: {
+                        width: props.size,
+                        height: props.size,
+                        backgroundImage: ("url(" + props.zoomImage.src + ")"),
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: (bgX + "px " + bgY + "px"),
+                        borderRadius: props.size
+                    }})
+                )
+            )
+        );
+    }
+});
+
+function getOffset(el) {
+    var x = 0;
+    var y = 0;
+    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
+        x += el.offsetLeft - el.scrollLeft;
+        y += el.offsetTop - el.scrollTop;
+        el = el.offsetParent;
+    }
+    return { x:x, y:y };
+}
+
+var ImageMagnifier = React.createClass({displayName: "ImageMagnifier",
+
+    propTypes: {
+
+        // the size of the magnifier window
+        size: React.PropTypes.number,
+
+        // the offset of the zoom bubble from the cursor
+        cursorOffset: React.PropTypes.shape({
+            x: React.PropTypes.number.isRequired,
+            y: React.PropTypes.number.isRequired
+        }),
+
+        // the size of the non-zoomed-in image
+        image: React.PropTypes.shape({
+            src: React.PropTypes.string.isRequired,
+            width: React.PropTypes.number.isRequired,
+            height: React.PropTypes.number.isRequired
+        }).isRequired,
+
+        // the size of the zoomed-in image
+        zoomImage: React.PropTypes.shape({
+            src: React.PropTypes.string.isRequired,
+            width: React.PropTypes.number.isRequired,
+            height: React.PropTypes.number.isRequired
+        }).isRequired
+    },
+
+    portalElement: null,
+
+    getDefaultProps:function () {
+        return {
+            size: 200,
+            cursorOffset: { x: 0, y: 0 }
+        };
+    },
+
+    getInitialState:function () {
+        return {
+            x: 0,
+            y: 0,
+            offsetX: -1,
+            offsetY: -1
+        };
+    },
+
+    componentDidMount:function() {
+        document.addEventListener('mousemove', this.onMouseMove);
+        if (!this.portalElement) {
+            this.portalElement = document.createElement('div');
+            document.body.appendChild(this.portalElement);
+        }
+        this.componentDidUpdate();
+    },
+
+    componentWillUnmount:function() {
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.body.removeChild(this.portalElement);
+        this.portalElement = null;
+    },
+
+    onMouseMove:function (e) {
+        var offset = getOffset(this.getDOMNode());
+
+        this.setState({
+            x: e.x + window.scrollX,
+            y: e.y + window.scrollY,
+            offsetX: e.x - offset.x,
+            offsetY: e.y - offset.y
+        });
+    },
+
+    componentDidUpdate:function() {
+        React.render(React.createElement(Magnifier, React.__spread({
+            size: this.props.size, 
+            smallImage: this.props.image, 
+            zoomImage: this.props.zoomImage, 
+            cursorOffset: this.props.cursorOffset}, 
+            this.state)
+        ), this.portalElement);
+    },
+
+    render:function () {
+        return (
+            React.createElement("img", React.__spread({},  this.props, {src: this.props.image.src}))
+        );
+    }
+});
+
+module.exports = ImageMagnifier;

index.js

@@ -1 +1 @@
-module.exports = require('./src/ImageMagnifier');
+module.exports = require('./dist/ImageMagnifier');

package.json

@@ -1,15 +1,19 @@
 {
   "name": "react-image-magnifier",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A react component that accepts a high-res source image and produces a magnifier window on mouse hover over the part of the image the cursor is over",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/lelandrichardson/react-image-magnifier.git"
-    },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lelandrichardson/react-image-magnifier.git"
+  },
+  "scripts":{
+    "dist": "./node_modules/.bin/jsx --harmony ./src/ ./dist/",
+    "prepublish": "npm run dist"
+  },
   "keywords": [
     "react",
     "react-component",
@@ -22,12 +26,13 @@
     "react": "^0.13.3"
   },
   "devDependencies": {
-    "es5-shim": "^4.1.3",
-    "node-libs-browser": "^0.5.2",
-    "webpack": "^1.9.10",
     "babel": "^5.4.7",
     "babel-core": "^5.4.7",
     "babel-loader": "^5.1.3",
-    "babel-runtime": "^5.4.7"
+    "babel-runtime": "^5.4.7",
+    "es5-shim": "^4.1.3",
+    "node-libs-browser": "^0.5.2",
+    "react-tools": "^0.13.3",
+    "webpack": "^1.9.10"
   }
 }