Version 1.0.1

.babelrc

@@ -1,4 +1,20 @@
 {
   "stage": 0,
-  "optional": []
-}
+  "optional": [],
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [
+            {
+              "transform": "react-transform-hmr",
+              "imports": ["react"],
+              "locals": ["module"]
+            }
+          ]
+        }
+      }
+    }
+  }
+}

.bowerrc

@@ -1,3 +1,3 @@
 {
-  "directory": "example/app/bower_components"
+  "directory": "bower_components"
 }

.eslintrc

@@ -27,7 +27,7 @@
     "quotes": [2, "single", "avoid-escape"],
     "semi": 2,
     "no-underscore-dangle": 0,
-    "no-unused-vars": [2, {"args": "after-used"}],
+    "no-unused-vars": 2,
     "camelcase": [2, {"properties": "never"}],
     "new-cap": 0,
     "accessor-pairs": 0,
@@ -43,7 +43,7 @@
     "no-unused-expressions": 2,
     "space-after-keywords": 2,
     "space-before-blocks": 2,
-    "jsx-quotes": [1, "prefer-single"],
+    "jsx-quotes": [1, "prefer-double"],
     "react/display-name": 0,
     "react/jsx-boolean-value": [2, "always"],
     "react/jsx-no-undef": 2,
@@ -53,7 +53,7 @@
     "react/jsx-uses-vars": 2,
     "react/no-did-mount-set-state": 2,
     "react/no-did-update-set-state": 2,
-    "react/no-multi-comp": 2,
+    "react/no-multi-comp": [2, {"ignoreStateless": true}],
     "react/no-unknown-property": 2,
     "react/prop-types": 1,
     "react/react-in-jsx-scope": 2,

README.md

@@ -75,14 +75,14 @@ import {PhotoSwipeGallery} from 'react-photoswipe';
 let items = [
   {
     src: 'http://lorempixel.com/1200/900/sports/1',
-    thumbnail: 'http://lorempixel.com/120/90/sports/1'
+    thumbnail: 'http://lorempixel.com/120/90/sports/1',
     w: 1200,
     h: 900,
     title: 'Image 1'
   },
   {
     src: 'http://lorempixel.com/1200/900/sports/2',
-    thumbnail: 'http://lorempixel.com/120/90/sports/2'
+    thumbnail: 'http://lorempixel.com/120/90/sports/2',
     w: 1200,
     h: 900,
     title: 'Image 2'
@@ -118,6 +118,14 @@ Example [here](http://codepen.io/vn38minhtran/pen/XmVdvW/)
 
 ## Props
 
+**Note:**  The first argument of every listener is a Photoswipe instance.
+
+EX:
+```js
+beforeChange(instance, change);
+imageLoadComplete(instance, index, item);
+```
+
 ### PhotoSwipe
 
 | Name | Type | Default | Required | Description |
@@ -126,6 +134,23 @@ Example [here](http://codepen.io/vn38minhtran/pen/XmVdvW/)
 | items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
 | options | object | {} | false | http://photoswipe.com/documentation/options.html |
 | onClose | function |  | false | Callback after PhotoSwipe close |
+| beforeChange | func |  | false | Photoswipe event listener |
+| afterChange | func |  | false | Photoswipe event listener |
+| imageLoadComplete | func |  | false | Photoswipe event listener |
+| resize | func |  | false | Photoswipe event listener |
+| gettingData | func |  | false | Photoswipe event listener |
+| mouseUsed | func |  | false | Photoswipe event listener |
+| initialZoomIn | func |  | false | Photoswipe event listener |
+| initialZoomInEnd | func |  | false | Photoswipe event listener |
+| initialZoomOut | func |  | false | Photoswipe event listener |
+| initialZoomOutEnd | func |  | false | Photoswipe event listener |
+| parseVerticalMargin | func |  | false | Photoswipe event listener |
+| close | func |  | false | Photoswipe event listener |
+| unbindEvents | func |  | false | Photoswipe event listener |
+| destroy | func |  | false | Photoswipe event listener |
+| updateScrollOffset | func |  | false | Photoswipe event listener |
+| preventDragEvent | func |  | false | Photoswipe event listener |
+| shareLinkClick | func |  | false | Photoswipe event listener |
 
 ### PhotoSwipeGallery
 
@@ -134,6 +159,23 @@ Example [here](http://codepen.io/vn38minhtran/pen/XmVdvW/)
 | items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
 | options | object | {} | false | http://photoswipe.com/documentation/options.html |
 | thumbnailContent | function | `<img src={item.src} width='100' height='100'/>` | false | Thumbnail content |
+| beforeChange | func |  | false | Photoswipe event listener |
+| afterChange | func |  | false | Photoswipe event listener |
+| imageLoadComplete | func |  | false | Photoswipe event listener |
+| resize | func |  | false | Photoswipe event listener |
+| gettingData | func |  | false | Photoswipe event listener |
+| mouseUsed | func |  | false | Photoswipe event listener |
+| initialZoomIn | func |  | false | Photoswipe event listener |
+| initialZoomInEnd | func |  | false | Photoswipe event listener |
+| initialZoomOut | func |  | false | Photoswipe event listener |
+| initialZoomOutEnd | func |  | false | Photoswipe event listener |
+| parseVerticalMargin | func |  | false | Photoswipe event listener |
+| close | func |  | false | Photoswipe event listener |
+| unbindEvents | func |  | false | Photoswipe event listener |
+| destroy | func |  | false | Photoswipe event listener |
+| updateScrollOffset | func |  | false | Photoswipe event listener |
+| preventDragEvent | func |  | false | Photoswipe event listener |
+| shareLinkClick | func |  | false | Photoswipe event listener |
 
 ## Demo
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photoswipe",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "description": "PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.",
   "main": ["dist/photoswipe.css", "dist/react-photoswipe.js"],
   "keywords": [
@@ -20,7 +20,5 @@
     "tests"
   ],
   "dependencies": {},
-  "devDependencies": {
-    "bootstrap-customize": "~3.3.4"
-  }
+  "devDependencies": {}
 }

example/app/app.js

@@ -1,134 +1,39 @@
 import 'babel-core/polyfill';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Header from './components/Header.js';
-import Footer from './components/Footer.js';
-import {PhotoSwipe, PhotoSwipeGallery} from 'react-photoswipe';
+import {createHistory} from 'history';
+import {Router, useRouterHistory} from 'react-router';
+import App from 'components/App.js';
+import {name} from '../../package.json';
 
-import './bower_components/bootstrap-customize/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap.css';
 import 'photoswipe/dist/photoswipe.css';
 import 'photoswipe/dist/default-skin/default-skin.css';
-import './assets/styles/app.scss';
-
-class App extends React.Component {
-  state = {
-    isOpen: false,
-    items: [
-      {
-        src: 'http://lorempixel.com/1200/900/sports/1',
-        w: 1200,
-        h: 900,
-        title: 'Image 1'
-      },
-      {
-        src: 'http://lorempixel.com/1200/900/sports/2',
-        w: 1200,
-        h: 900,
-        title: 'Image 2'
-      },
-      {
-        src: 'http://lorempixel.com/1200/900/sports/3',
-        w: 1200,
-        h: 900,
-        title: 'Image 3'
-      }
-    ],
-    galleryItems: [
-      {
-        src: 'http://lorempixel.com/1200/900/nightlife/1',
-        thumbnail: 'http://lorempixel.com/120/90/nightlife/1',
-        w: 1200,
-        h: 900,
-        title: 'Image 1'
-      },
-      {
-        src: 'http://lorempixel.com/1200/900/nightlife/2',
-        thumbnail: 'http://lorempixel.com/120/90/nightlife/2',
-        w: 1200,
-        h: 900,
-        title: 'Image 2'
-      },
-      {
-        src: 'http://lorempixel.com/1200/900/nightlife/3',
-        thumbnail: 'http://lorempixel.com/120/90/nightlife/3',
-        w: 1200,
-        h: 900,
-        title: 'Image 3'
-      },
-      {
-        src: 'http://lorempixel.com/1200/900/nightlife/4',
-        thumbnail: 'http://lorempixel.com/120/90/nightlife/4',
-        w: 1200,
-        h: 900,
-        title: 'Image 4'
-      }
-    ],
-    options: {}
-  };
-
-  openPhotoSwipe = (e) => {
-    e.preventDefault();
-    this.setState({
-      isOpen: true,
-      options: {
-        closeOnScroll: false
-      }
-    });
-  };
-
-  handleClose = () => {
-    this.setState({
-      isOpen: false
-    });
-  };
-
-  getThumbnailContent = (item) => {
-    return (
-      <img src={item.thumbnail} width={120} height={90}/>
-    );
-  };
-
-  handleBeforeChange = (instance, change) => {
-    console.log(change);
-  };
-
-  handleImageLoadComplete = (instance, index, item) => {
-    console.log(index, item);
-  };
-
-  render() {
-    return (
-      <div className={"layout-page"}>
-        <Header/>
-        <main className={"layout-main"}>
-          <div className={"container"}>
-            <h2>PhotoSwipe</h2>
-            <hr/>
-            <button className='btn btn-primary' onClick={this.openPhotoSwipe}>
-              Click me
-            </button>
-            <PhotoSwipe id='my-photoswipe'
-              isOpen={this.state.isOpen}
-              items={this.state.items}
-              options={this.state.options}
-              beforeChange={this.handleBeforeChange}
-              onClose={this.handleClose}/>
-            <hr/>
-            <h2>PhotoSwipeGallery</h2>
-            <hr/>
-            <PhotoSwipeGallery items={this.state.galleryItems}
-              thumbnailContent={this.getThumbnailContent}/>
-          </div>
-        </main>
-        <Footer/>
-      </div>
-    );
-  }
-}
-
-function run() {
-  ReactDOM.render(<App />, document.getElementById('app'));
-}
+import 'assets/styles/app.scss';
+
+const routes = {
+  path: '/',
+  component: App,
+  indexRoute: {
+    component: require('components/pages/Home')
+  },
+  childRoutes: [
+    require('routes/Gallery')
+  ]
+};
+
+const DEV = process && process.env && process.env.NODE_ENV === 'development';
+const history = useRouterHistory(createHistory)({
+  basename: '/' + (DEV ? '' : name)
+});
+
+const run = () => {
+  ReactDOM.render(
+    <Router routes={routes} history={history}/>,
+    document.getElementById('app')
+  );
+};
 
 if (window.addEventListener) {
   window.addEventListener('DOMContentLoaded', run);

example/app/assets/styles/_common.scss

@@ -0,0 +1,46 @@
+/* Pre Render
+   ========================================================================== */
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.pre-render {
+  background: rgba(255, 255, 255, .7);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  .spinner {
+    width: 48px;
+    height: 48px;
+    border: 1px solid lighten($primary, 40%);
+    border-left-color: darken($primary, 10%);
+    border-radius: 50%;
+    animation: spinner 700ms infinite linear;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -24px;
+    margin-top: -24px;
+  }
+}
+
+/* Thumbnail
+   ========================================================================== */
+.pswp-thumbnail {
+  display: inline-block;
+  width: 120px;
+  height: 90px;
+  margin: 0 10px 10px 0;
+  cursor: pointer;
+  img {
+    max-width: 100%;
+  }
+}

example/app/assets/styles/_mixin.scss

@@ -0,0 +1,10 @@
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}