Merge branch 'piscis-master'

fisshy · Apr 14, 2016 · 951f21b · 951f21b
2 parents 4fe3362 + f790b16
commit 951f21b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,9 @@ var Section = React.createClass({
         <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} >
           Test 1
         </Link>
+        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
+          Test 2 (delay)
+        </Link>
         <DirectLink className="test6" to="anchor" spy={true} smooth={true} duration={500}>
           Test 6 (anchor)
         </DirectLink>
@@ -104,6 +107,29 @@ React.render(
 
 ```
 
+### Props
+
+> activeClass - class applied when element is reached
+> to - target to scroll to
+> spy - make Link selected when scroll is at it's targets position
+> smooth - animate the scrolling
+> offset - scroll additional px ( like padding )
+> duration - time of the scroll animation
+> delay - wait x seconds before scroll
+
+```js
+<Link activeClass="active" 
+      to="target" 
+      spy={true} 
+      smooth={true} 
+      offset={50} 
+      duration={500} 
+      delay={1000}
+>
+  Your name
+</Link>
+```
+
 ### Scroll Methods
 
 > Scroll To Top

diff --git a/examples/basic/app.js b/examples/basic/app.js
@@ -42,7 +42,7 @@ var Section = React.createClass({
                 <li><Link activeClass="active" className="test2" to="test2" spy={true} smooth={true} duration={500}>Test 2</Link></li>
                 <li><Link activeClass="active" className="test3" to="test3" spy={true} smooth={true} duration={500} >Test 3</Link></li>
                 <li><Link activeClass="active" className="test4" to="test4" spy={true} smooth={true} duration={500}>Test 4</Link></li>
-                <li><Link activeClass="active" className="test5" to="test5" spy={true} smooth={true} duration={500}>Test 5</Link></li>
+                <li><Link activeClass="active" className="test5" to="test5" spy={true} smooth={true} duration={500} delay={1000}>Test 5 ( delay )</Link></li>
                 <li><DirectLink className="test6" to="anchor" spy={true} smooth={true} duration={500}>Test 6 (anchor)</DirectLink></li>
                 <li> <a onClick={() => scroll.scrollTo(100)}>Scroll To 100!</a></li>
                 <li> <a onClick={() => scroll.scrollMore(500)}>Scroll 500 More!</a></li>

diff --git a/modules/mixins/Helpers.js b/modules/mixins/Helpers.js
@@ -18,15 +18,35 @@ var Helpers = {
       propTypes: {
         to: React.PropTypes.string.isRequired,
         offset: React.PropTypes.number,
+        delay: React.PropTypes.number,
         onClick: React.PropTypes.func
       },
+    scrollTo : function(to) {
+      if (this.props.delay) {
+        var _self = this;
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(function() {
+          scroller.scrollTo(to, _self.props.smooth, _self.props.duration, _self.props.offset);  
+        }, _self.props.delay)
+      } else {
+        scroller.scrollTo(to, this.props.smooth, this.props.duration, this.props.offset);  
+      }
+    },
 
       getDefaultProps: function() {
         return {offset: 0};
       },
 
       scrollTo : function(to) {
-        scroller.scrollTo(to, this.props.smooth, this.props.duration, this.props.offset);
+        if (this.props.delay) {
+          var props = this.props
+          clearTimeout(this.timeout);
+          this.timeout = setTimeout(function() {
+            scroller.scrollTo(to, props.smooth, props.duration, props.offset);  
+          }, props.delay);
+        } else {
+          scroller.scrollTo(to, this.props.smooth, this.props.duration, this.props.offset);
+        }
       },
 
       handleClick: function(event) {