Merge pull request #106 from KleeGroup/back-to-top

Back to top - Add scroll listener, automatically added to the search and de detail. ![http://33.media.tumblr.com/845b6953e03279c8d28fb4303dee5a8f/tumblr_mivi4bgSlR1rtg76ko1_500.gif](http://33.media.tumblr.com/845b6953e03279c8d28fb4303dee5a8f/tumblr_mivi4bgSlR1rtg76ko1_500.gif)
klee-contrib · Jun 13, 2015 · 7a4b48a · 7a4b48a
2 parents ffcab54 + 28d2f3a
commit 7a4b48a
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 11 deletions.
diff --git a/common/button/back-to-top/index.js b/common/button/back-to-top/index.js
@@ -16,9 +16,53 @@ var buttonMixin = {
       return {
         icon: 'arrow-circle-up',
         scrollTarget: 'body',
-        duration: 100
+        duration: 100,
+        scrolledElementSelector: 'body',
+        scrollSpyTargetSelector: undefined,
+        scrollTriggerBorder: 100,
       };
     },
+    getInitialState(){
+      return {isVisible: false};
+    },
+    componentWillMount(){
+      this._scrollCarrier = this.props.scrollSpyTargetSelector ? document.querySelector(this.props.scrollSpyTargetSelector) : document;
+      this._attachScrollSpy();
+    },
+    componentWillUnMount(){
+      this._detachScrollSpy();
+    },
+    componentDidMount() {
+      this._scrollSpy();
+    },
+    /**
+     * Attach the scroll spy
+     * @private
+     */
+    _attachScrollSpy() {
+        this._scrollCarrier.addEventListener('scroll', this._scrollSpy);
+        this._scrollCarrier.addEventListener('resize', this._scrollSpy);
+    },
+    /**
+     * Detach the scroll spy
+     * @private
+     */
+    _detachScrollSpy() {
+        this._scrollCarrier.removeEventListener('scroll', this._scrollSpy);
+        this._scrollCarrier.removeEventListener('resize', this._scrollSpy);
+    },
+    /**
+     * The scroll event handler
+     * @private
+     */
+    _scrollSpy() {
+        let scrollPosition = document.querySelector(this.props.scrolledElementSelector).scrollTop;
+        if(scrollPosition > this.props.scrollTriggerBorder){
+          this.setState({isVisible: true});
+        }else{
+          this.setState({isVisible: false});
+        }
+    },
     /**
      * Go back to the top of the page.
      */
@@ -29,7 +73,8 @@ var buttonMixin = {
     },
     /** inheritedDoc */
     render: function renderInput() {
-      return <button className={`${this._getStyleClassName()}`} data-focus='back-to-top' onClick={this.goBackToTop}>
+      let className = `${this._getStyleClassName()} ${this.state.isVisible ? '' : 'invisible'}`;
+      return <button className={className} data-focus='back-to-top' onClick={this.goBackToTop}>
         <Icon name={this.props.icon}/> this.i18n('button.backTop')
       </button>;
     }

diff --git a/common/button/back-to-top/style/back-to-top.scss b/common/button/back-to-top/style/back-to-top.scss
@@ -14,4 +14,7 @@
   i{
     font-size: 60px;
   }
+  &.invisible{
+    display: none
+  }
 }
diff --git a/common/detail/index.js b/common/detail/index.js
@@ -1,9 +1,10 @@
 var React = require('react');
-var builder = require('focus').component.builder
+var builder = require('focus').component.builder;
 //var i18nMixin = require('../i18n').mixin;
-var StickyNavigation = require('../sticky-navigation').component
+var StickyNavigation = require('../sticky-navigation').component;
 var type = require('focus').component.types;
 var stylable = require('../../mixin/stylable')
+var BackToTopComponent = require('../button/back-to-top').component;
 /**
  * Mixin used in order to create a Detail.
  * @type {Object}
@@ -17,12 +18,16 @@ var detailMixin = {
        * Activate the presence of the sticky navigation component.
        * @type {Boolean}
        */
-      navigation: true
-    }
+      navigation: true,
+      hasBackToTop: true,
+      BackToTopComponent: BackToTopComponent
+    };
   },
   /** @inheritedDoc */
   propTypes: {
-    navigation: type('bool')
+    navigation: type('bool'),
+    hasBackToTop: type('bool'),
+    BackToTopComponent: type(['function', 'object'])
   },
   /**
    * Render the navigation component if the props navigation is true.
@@ -41,6 +46,7 @@ var detailMixin = {
         <div data-focus='detail-content'>
           {this.props.children}
         </div>
+        {this.props.hasBackToTop && <this.props.BackToTopComponent/>}
       </div>
     );
   }

diff --git a/common/sticky-navigation/index.js b/common/sticky-navigation/index.js
@@ -25,7 +25,8 @@ let StickyNavigation = {
     getDefaultProps() {
         return ({
             titleSelector: '[data-menu]',
-            scrolledElementSelector: 'body'
+            scrolledElementSelector: 'body',
+            hasBackToTop: true
         });
     },
     /**
@@ -35,7 +36,8 @@ let StickyNavigation = {
         titleSelector: type('string'),
         scrolledElementSelector: type('string'),
         triggerHeight: type('number'),
-        style: type('object')
+        style: type('object'),
+        hasBackToTop: type('bool')
     },
     /**
      * Component did mount, attach the scroll spy
@@ -44,8 +46,10 @@ let StickyNavigation = {
         this.setState({
             titleList: this._getTitleList()
         });
+        //todo: @stan Maybe put this in the componentWillMount
         this._scrollCarrier = this.props.scrollSpyTargetSelector ? document.querySelector(this.props.scrollSpyTargetSelector) : document;
         this._attachScrollSpy();
+        //
         this._scrollSpy();
     },
     /**

diff --git a/page/search/advanced-search/index.js b/page/search/advanced-search/index.js
@@ -11,7 +11,7 @@ let includes = require('lodash/collection/includes');
 let FacetBox = require('../../../search/facet-box').component;
 let ListActionBar = require('../../../list/action-bar/index').component;
 let ListSummary = require('../../../list/summary/index').component;
-
+let BackToTopComponent = require('../../../common/button/back-to-top').component;
 // Store
 
 let SearchStore = require('focus').store.SearchStore;
@@ -53,7 +53,9 @@ let AdvancedSearch = {
         return {
             facetConfig: {},
             idField: 'id', //To remove?
-            isSelection: true
+            isSelection: true,
+            hasBackToTop: true,
+            BackToTopComponent: BackToTopComponent
         };
     },
     propTypes: {
@@ -328,6 +330,7 @@ let AdvancedSearch = {
                     {this.getActionBarComponent()}
                     {this.getResultListComponent(true)}
                 </div>
+                {this.props.hasBackToTop && <this.props.BackToTopComponent/>}
             </div>
         );
     }