adding functionality for custom click handler

README.md

@@ -35,6 +35,7 @@ Properties | Type | Default | Description | Supported
 **[ratio](#ratio)** | ```Array``` | Null | Shape of the slideshow, for example: `[16,9]` | yes 
 **[animationSpeed](#animationspeed)** | ```Number``` | 1500 | Speed of slide transitions in px/s | yes
 **[startingSlide](#startingslide)** | ```Number``` | 0 | Initial slide view | yes
+**[onClickSlide](#onClickSlide)** | ```Function``` | null | override click handler for slide | yes
 **[onBeforeTransition](#onbeforetransition)** | ```Function``` | noop | Function called before transition starts | yes
 **[onAfterTransition](#onaftertransition)** | ```Function``` | noop | Function called after transition ends | no
 **[slideBuffer](#slidebuffer)** | ```Number``` | 1 | The number of slides loaded to the left and right of the slide in view | yes
@@ -80,6 +81,10 @@ speed...
 
 staring slide...
 
+#### onClickSlide
+
+function...
+
 #### onBeforeTransition
 
 function...

src/PictureShow.jsx

@@ -37,6 +37,7 @@ module.exports = PictureShow = React.createClass({
     ratio: React.PropTypes.array,
     animationSpeed: React.PropTypes.number,
     startingSlide: React.PropTypes.number,
+    onClickSlide: React.PropTypes.func,
     onBeforeTransition: React.PropTypes.func,
     onAfterTransition: React.PropTypes.func,
     slideBuffer: React.PropTypes.number,
@@ -50,6 +51,7 @@ module.exports = PictureShow = React.createClass({
       ratio: null,
       animationSpeed: 1500,
       startingSlide: 0,
+      onClickSlide: null,
       onBeforeTransition: noop,
       onAfterTransition: noop,
       slideBuffer: 1,
@@ -163,9 +165,12 @@ module.exports = PictureShow = React.createClass({
       box = elm.getBoundingClientRect(),
       left = box.left,
       right = left + box.width,
-      divide = left + ((right - left) * this.props.clickDivide);
+      divide = left + ((right - left) * this.props.clickDivide),
+      direction = event.clientX < divide ? 'previous' : 'next';
 
-    if (event.clientX < divide) {
+    if (this.props.onClickSlide) {
+      this.props.onClickSlide(direction, event);
+    } else if (direction === 'previous') {
       this.previous();
     } else {
       this.next();

test/PictureShow.test.jsx

@@ -8,7 +8,6 @@ var PictureShow = require('../src/PictureShow.jsx'),
 var slideshowElm, PictureShow;
 
 function setUp () {
-
   slideshowElm = (
     <PictureShow startingSlide={0} className='added-class' ratio={[3,2]}>
       <img className='A'/>
@@ -17,7 +16,6 @@ function setUp () {
       <img className='D'/>
     </PictureShow>
   );
-
 }
 
 describe('PictureShow Structure', function () {
@@ -378,6 +376,35 @@ describe('PictureShow Events', function () {
 
   });
 
+  it('should run `onClickSlide`', function () {
+    var cb = sinon.spy();
+
+    var elm = React.addons.cloneWithProps(slideshowElm, {
+      onClickSlide: cb
+    });
+
+    var slideshow = TestUtils.renderIntoDocument(elm);
+    var panel = TestUtils.scryRenderedDOMComponentsWithClass(slideshow, 'ps-slides')[1];
+    var node = slideshow.getDOMNode();
+    var originalFn = node.getBoundingClientRect;
+
+    node.getBoundingClientRect = function () {
+      return {
+        left: 100,
+        width: 200
+      };
+    };
+
+    TestUtils.Simulate.mouseDown(panel, {
+      clientX: 210 // next
+    });
+
+    cb.lastCall.args[0].should.equal('next');
+    slideshow.state.slideIdx.should.equal(0); // should not fall through to next
+
+    node.getBoundingClientRect = originalFn; // replace original function
+  });
+
 });
 
 describe('PictureShow Children', function () {