Merge pull request #44 from benox3/v0.1.1

benox3 · web-flow · commit cdf755b0378a · 2016-11-03T17:06:51.000-04:00
Release v0.1.1
diff --git a/lib/common/Pic.js b/lib/common/Pic.js
@@ -19,35 +19,32 @@ export default class Pic extends Component {
     };
 
     this.setResponsiveImage = this.setResponsiveImage.bind(this);
-    this.loadHandler = this.loadHandler.bind(this);
-  }
-  componentDidMount() {
-    this.loadHandler();
-  }
+    this.inViewHandler = this.inViewHandler.bind(this);
 
-  componentWillUnmount() {
-    window.removeEventListener('scroll', debounce(() => {
-      this.inViewHandler();
-    }, 150));
+    // calls inViewHandler with a debounce
+    this.debouncedInViewHandler = debounce(this.inViewHandler.bind(this), 150);
 
-    window.removeEventListener('resize', debounce(this.setResponsiveImage, 150));
   }
-
-  loadHandler() {
-    // set optimal image if in view or if elected to render out of view on mount
-    this.props.renderOutOfView ? this.setResponsiveImage() : this.inViewHandler();
+  componentDidMount() {
+    this.inViewHandler();
 
     // set responsive image on scroll
-    window.addEventListener('scroll', debounce(() => {
-      this.inViewHandler();
-    }, 150));
+    window.addEventListener('scroll', this.debouncedInViewHandler);
 
     // set responsive image on resize
-    window.addEventListener('resize', debounce(this.setResponsiveImage, 150));
+    window.addEventListener('resize', this.debouncedInViewHandler);
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.debouncedInViewHandler);
+    window.removeEventListener('resize', this.debouncedInViewHandler);
+  }
+
+  /**
+   * Sets responsive image if the element is in view
+   */
   inViewHandler() {
-    if (isElementInView(this.refs.base)) {
+    if (this.props.renderOutOfView || isElementInView(this.refs.base)) {
       this.setResponsiveImage();
     }
   }
@@ -80,7 +77,7 @@ export default class Pic extends Component {
     }
 
     return (
-      <div ref='base' style={this.props.baseStyle} onLoad={this.loadHandler}>
+      <div ref='base' style={this.props.baseStyle} onLoad={this.inViewHandler}>
         <ImageBase {...this.props} {...this.state} />
       </div>
     );
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-pic",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React component for progressive and responsive image loading.",
   "author": "Ben Budnevich",
   "main": "dist/commonjs/react-pic.js",
diff --git a/playground/index.js b/playground/index.js
@@ -4,6 +4,18 @@ import React, { Component } from 'react';
 import Pic from '../lib/index.js';
 
 export default class Playground extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: true
+    };
+    this.clickHandler = this.clickHandler.bind(this);
+  }
+
+  clickHandler() {
+    this.setState({show:!this.state.show});
+  }
+
   render() {
     return (
       <html>
@@ -12,31 +24,37 @@ export default class Playground extends Component {
           <title>react-pic</title>
         </head>
         <body>
-          <div id="root">
-            <Pic
-                alt='winky face'
-                images={[
-                  {
-                    width: 40,
-                    url: 'http://placehold.it/40?text=😉'
-                  },
-                  {
-                    width: 200,
-                    url: 'http://placehold.it/200?text=😉'
-                  },
-                  {
-                    width: 400,
-                    url: 'http://placehold.it/400?text=😉'
-                  },
-                  {
-                    width: 600,
-                    url: 'http://placehold.it/600?text=😉'
-                  },
-                  {
-                    width: 800,
-                    url: 'http://placehold.it/800?text=😉'
-                  }
-                ]} />
+          <div id="root" style={{height:1500}}>
+            <button onClick={this.clickHandler}>
+              Toggle
+            </button>
+            {
+              this.state.show &&
+              <Pic
+                  alt='winky face'
+                  images={[
+                    {
+                      width: 40,
+                      url: 'http://placehold.it/40?text=😉'
+                    },
+                    {
+                      width: 200,
+                      url: 'http://placehold.it/200?text=😉'
+                    },
+                    {
+                      width: 400,
+                      url: 'http://placehold.it/400?text=😉'
+                    },
+                    {
+                      width: 600,
+                      url: 'http://placehold.it/600?text=😉'
+                    },
+                    {
+                      width: 800,
+                      url: 'http://placehold.it/800?text=😉'
+                    }
+                  ]} />
+            }
           </div>
           <script src='//localhost:8080/build/react-pic.js' />
         </body>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-pic",`
`3`		`- "version": "0.1.0",`
	`3`	`+ "version": "0.1.1",`
`4`	`4`	`"description": "React component for progressive and responsive image loading.",`
`5`	`5`	`"author": "Ben Budnevich",`
`6`	`6`	`"main": "dist/commonjs/react-pic.js",`