add loading indicator

bump version

more

Author: brycedorn

LICENSE

@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright © 2016 Bryce Dorn
+Copyright © 2017 Bryce Dorn
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -15,7 +15,7 @@ import ReactIntense from 'react-intense'
 
 ...
 
-<ReactIntense src={'img.jpg'} />
+<ReactIntense src='img.jpg' />
 ```
 
 and you're good to go!
@@ -24,22 +24,29 @@ and you're good to go!
 
 Title/caption:
 ```javascript
-<ReactIntense caption={'caption'} src={'img.jpg'} title={'title'} />
+<ReactIntense caption='caption' src='img.pg'} title='title' />
 ```
 
 Thumbnail image (for lazy load of main image):
 ```javascript
-<ReactIntense src={'large_version.jpg'} thumbnail={'small_version.jpg'} />
+<ReactIntense src='large_version.jpg' thumbnail='small_version.jpg' />
 ```
 
 Vertical scrolling:
 ```javascript
-<ReactIntense src={'tall_image.jpg'} vertical={true} />
+<ReactIntense src='tall_img.jpg' vertical=true />
 ```
 
 Scroll speed (default is `0.05`):
 ```javascript
-<ReactIntense src={'image.jpg'} moveSpeed={0.05} />
+<ReactIntense src='img.jpg' moveSpeed=0.05 />
+```
+
+Loading indicator (default is none):
+ - Requires some CSS for [positioning](https://github.com/brycedorn/react-intense/blob/master/lib/ReactIntense.css#L67) and associated [`div` structure](https://github.com/brycedorn/react-intense/blob/master/lib/ReactIntense.js#L268); demo shows the `spin` loader from [loading.io](http://loading.io/) which is bundled in [`loader.css`](https://github.com/brycedorn/react-intense/blob/master/lib/loader.css).
+
+```javascript
+<ReactIntense src='img.jpg' loader='uil-spin-css' />
 ```
 
 ## Styling
@@ -52,4 +59,5 @@ Feel free to use and/or customize the provided styles in `lib/ReactIntense.css`.
 
 ## Thanks
 * [Tim Holman](https://github.com/tholman)
-* [Paul Irish](https://gist.github.com/paulirish/1579671)
+* [Paul Irish](https://gist.github.com/paulirish/1579671)
+* [loading.io](http://loading.io)

client/scripts/index.js

@@ -36,6 +36,7 @@ class IntenseDemos extends React.Component {
           caption={caption}
           classes={classes}
           key={title}
+          loader='uil-spin-css'
           src={src}
           thumbnailSrc={thumbnailSrc}
           title={title}

lib/ReactIntense.css

@@ -64,4 +64,21 @@
   text-align: left;
   background: none;
   margin-top: 5px;
+}
+
+.ri-loader {
+  position: relative;
+  left: 30%;
+  top: 30%;
+}
+
+.ri-loader > div {
+  width: 12px;
+  height: 12px;
+  margin-left: 2px;
+  margin-top: 2px;
+}
+
+.ri-loader > div > div {
+  background: #fff;
 }

lib/ReactIntense.js

@@ -12,10 +12,12 @@ import React from 'react'
 
 require('./ReactIntense.css')
 require('./polyfills.js')
+require('./loader.css')
 
 const propTypes = {
   caption: React.PropTypes.string,
   classes: React.PropTypes.string,
+  loader: React.PropTypes.string,
   src: React.PropTypes.string.isRequired,
   thumbnailSrc: React.PropTypes.string,
   title: React.PropTypes.string,
@@ -258,6 +260,16 @@ export default class ReactIntense extends React.Component {
     this.removeEventListeners()
   }
 
+  _renderLoader (loaderClassName, isVisible) {
+    const doublyNestedDiv = <div><div></div></div>
+
+    return !isVisible && loaderClassName ? (
+      <div className={loaderClassName + ' ri-loader'}>
+        {[...Array(8)].map((e, i) => doublyNestedDiv)}
+      </div>
+    ) : <div/>
+  }
+
   _renderViewer () {
     const { height, width } = this.state.container
     const { loaded, transform, visible } = this.state
@@ -288,7 +300,7 @@ export default class ReactIntense extends React.Component {
   }
 
   render () {
-    const { classes, src, thumbnailSrc } = this.props
+    const { classes, loader, src, thumbnailSrc } = this.props
     const { visible } = this.state
     const classNames = classes + (visible ? ' clicked' : '')
 
@@ -298,8 +310,9 @@ export default class ReactIntense extends React.Component {
           className={classNames} 
           onClick={this._onClick}
           ref='thumbnail' 
-          style={{backgroundImage:'url('+ (thumbnailSrc || src) +')'}} 
-        />
+          style={{backgroundImage:'url('+ (thumbnailSrc || src) +')'}}>
+          {this._renderLoader(loader, visible)}
+        </a>
         {this._renderViewer()}
       </div>
     )