animate Fav with sticky trigger

src/client/js/components/FixedControls.jsx

@@ -1,19 +1,47 @@
-import React from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import loggerFactory from '@alias/logger';
+
+import StickyEvents from 'sticky-events';
 
 import NavigationContainer from '../services/NavigationContainer';
 import { withUnstatedContainers } from './UnstatedUtils';
 
+
+const logger = loggerFactory('growi:cli:FixedControls');
+
 const FixedControls = (props) => {
   const { navigationContainer } = props;
 
-  const { showFav } = navigationContainer.state;
+  const [animateClasses, setAnimateClasses] = useState('invisible');
+
+
+  const stickyChangeHandler = useCallback((event) => {
+    logger.debug('StickyEvents.CHANGE detected');
+
+    const classes = event.detail.isSticky ? 'animated fadeInUp faster' : 'animated fadeOut faster';
+    setAnimateClasses(classes);
+  }, []);
+
+  // setup effect by sticky event
+  useEffect(() => {
+    // sticky
+    // See: https://github.com/ryanwalters/sticky-events
+    const stickyEvents = new StickyEvents({ stickySelector: '#grw-fav-sticky-trigger' });
+    const { stickySelector } = stickyEvents;
+    const elem = document.querySelector(stickySelector);
+    elem.addEventListener(StickyEvents.CHANGE, stickyChangeHandler);
+
+    // return clean up handler
+    return () => {
+      elem.removeEventListener(StickyEvents.CHANGE, stickyChangeHandler);
+    };
+  }, [stickyChangeHandler]);
 
-  const showClasses = showFav ? ['animated fadeInUp faster'] : ['invisible'];
 
   return (
     <div className="grw-fixed-controls d-none d-md-block">
-      <div className={`rounded-circle position-absolute ${showClasses.join(' ')}`} style={{ bottom: '2.3rem', right: '3rem' }}>
+      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: '2.3rem', right: '3rem' }}>
         <button
           type="button"
           className="btn btn-lg btn-create-page btn-primary rounded-circle waves-effect waves-light"
@@ -22,7 +50,7 @@ const FixedControls = (props) => {
           <i className="icon-pencil"></i>
         </button>
       </div>
-      <div className={`rounded-circle position-absolute ${showClasses.join(' ')}`} style={{ bottom: 0, right: 0 }}>
+      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }}>
         <button type="button" className="btn btn-light btn-scroll-to-top rounded-circle" onClick={() => navigationContainer.smoothScrollIntoView()}>
           <i className="icon-control-start"></i>
         </button>

src/client/js/services/NavigationContainer.js

@@ -5,7 +5,6 @@ import { Container } from 'unstated';
  * @extends {Container} unstated Container
  */
 
-const SCROLL_THRES_FAV = 60;
 const SCROLL_THRES_SKIP = 200;
 
 export default class NavigationContainer extends Container {
@@ -31,7 +30,6 @@ export default class NavigationContainer extends Container {
       sidebarContentsId: 'recent',
 
       isScrollTop: true,
-      showFav: false,
 
       isPageCreateModalShown: false,
     };
@@ -101,7 +99,6 @@ export default class NavigationContainer extends Container {
 
       this.setState({
         isScrollTop: currentYOffset === 0,
-        showFav: SCROLL_THRES_FAV < currentYOffset,
       });
     });
   }

src/server/views/layout-growi/base/layout.html

@@ -16,6 +16,7 @@
 </header>
 <div id="grw-subnav-switcher-container" class="d-edit-none"></div>
 <div id="grw-subnav-sticky-trigger" class="sticky-top"></div>
+<div id="grw-fav-sticky-trigger" class="sticky-top"></div>
 {% endblock %}
 
 <div id="main" class="main container-fluid {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">

src/server/views/layout-kibela/base/layout.html

@@ -11,6 +11,7 @@
 
   <div id="grw-subnav-switcher-container" class="d-edit-none"></div>
   <div id="grw-subnav-sticky-trigger" class="sticky-top"></div>
+  <div id="grw-fav-sticky-trigger" class="sticky-top"></div>
 
   <div class="row body m-0 p-0 d-print-block">