transplant jQuery code to TableOfContents component

src/client/js/components/TableOfContents.jsx

@@ -3,10 +3,18 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import { debounce } from 'throttle-debounce';
+
+import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 
 import { createSubscribedElement } from './UnstatedUtils';
 
+// get these value with
+//   document.querySelector('.revision-toc').getBoundingClientRect().top
+const DEFAULT_REVISION_TOC_TOP_FOR_GROWI_LAYOUT = 190;
+const DEFAULT_REVISION_TOC_TOP_FOR_KIBELA_LAYOUT = 105;
+
 /**
  * @author Yuki Takei <yuki@weseek.co.jp>
  *
@@ -16,6 +24,66 @@ import { createSubscribedElement } from './UnstatedUtils';
  */
 class TableOfContents extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.resetScrollbarDebounced = debounce(100, this.resetScrollbar);
+  }
+
+  componentDidUpdate() {
+    const { layoutType } = this.props.appContainer.config;
+    if (layoutType === 'crowi') {
+      return;
+    }
+
+    let defaultRevisionTocTop = DEFAULT_REVISION_TOC_TOP_FOR_GROWI_LAYOUT;
+    if (layoutType === 'kibela') {
+      defaultRevisionTocTop = DEFAULT_REVISION_TOC_TOP_FOR_KIBELA_LAYOUT;
+    }
+
+    // initialize
+    this.resetScrollbar(defaultRevisionTocTop);
+
+    /*
+     * set event listener
+     */
+    // resize
+    window.addEventListener('resize', (event) => {
+      this.resetScrollbarDebounced(defaultRevisionTocTop);
+    });
+    // affix on
+    $('#revision-toc').on('affixed.bs.affix', () => {
+      this.resetScrollbar(this.getCurrentRevisionTocTop());
+    });
+    // affix off
+    $('#revision-toc').on('affixed-top.bs.affix', () => {
+      this.resetScrollbar(defaultRevisionTocTop);
+    });
+  }
+
+  getCurrentRevisionTocTop() {
+    // calculate absolute top of '#revision-toc' element
+    const revisionTocElem = document.querySelector('.revision-toc');
+    return revisionTocElem.getBoundingClientRect().top;
+  }
+
+  resetScrollbar(revisionTocTop) {
+    const tocContentElem = document.querySelector('.revision-toc .markdownIt-TOC');
+
+    // window height - revisionTocTop - .system-version height
+    let h = window.innerHeight - revisionTocTop - 20;
+
+    const tocContentHeight = tocContentElem.getBoundingClientRect().height + 15; // add margin
+
+    h = Math.min(h, tocContentHeight);
+
+    $('#revision-toc-content').slimScroll({
+      railVisible: true,
+      position: 'right',
+      height: h,
+    });
+  }
+
   render() {
     const { tocHtml } = this.props.pageContainer.state;
 
@@ -37,10 +105,11 @@ class TableOfContents extends React.Component {
  * Wrapper component for using unstated
  */
 const TableOfContentsWrapper = (props) => {
-  return createSubscribedElement(TableOfContents, props, [PageContainer]);
+  return createSubscribedElement(TableOfContents, props, [AppContainer, PageContainer]);
 };
 
 TableOfContents.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 

src/client/js/legacy/crowi.js

@@ -5,8 +5,6 @@ import ReactDOM from 'react-dom';
 
 import { Provider } from 'unstated';
 
-import { debounce } from 'throttle-debounce';
-
 import { pathUtils } from 'growi-commons';
 
 import GrowiRenderer from '../util/GrowiRenderer';
@@ -149,60 +147,6 @@ Crowi.initAffix = () => {
   }
 };
 
-Crowi.initSlimScrollForRevisionToc = () => {
-  const revisionTocElem = document.querySelector('.growi .revision-toc');
-  const tocContentElem = document.querySelector('.growi .revision-toc .markdownIt-TOC');
-
-  // growi layout only
-  if (revisionTocElem == null || tocContentElem == null) {
-    return;
-  }
-
-  function getCurrentRevisionTocTop() {
-    // calculate absolute top of '#revision-toc' element
-    return revisionTocElem.getBoundingClientRect().top;
-  }
-
-  function resetScrollbar(revisionTocTop) {
-    // window height - revisionTocTop - .system-version height
-    let h = window.innerHeight - revisionTocTop - 20;
-
-    const tocContentHeight = tocContentElem.getBoundingClientRect().height + 15; // add margin
-
-    h = Math.min(h, tocContentHeight);
-
-    $('#revision-toc-content').slimScroll({
-      railVisible: true,
-      position: 'right',
-      height: h,
-    });
-  }
-
-  const resetScrollbarDebounced = debounce(100, resetScrollbar);
-
-  // initialize
-  const revisionTocTop = getCurrentRevisionTocTop();
-  resetScrollbar(revisionTocTop);
-
-  /*
-   * set event listener
-   */
-  // resize
-  window.addEventListener('resize', (event) => {
-    resetScrollbarDebounced(getCurrentRevisionTocTop());
-  });
-  // affix on
-  $('#revision-toc').on('affixed.bs.affix', () => {
-    resetScrollbar(getCurrentRevisionTocTop());
-  });
-  // affix off
-  $('#revision-toc').on('affixed-top.bs.affix', () => {
-    // calculate sum of height (.navbar-header + .bg-title) + margin-top of .main
-    const sum = 138;
-    resetScrollbar(sum);
-  });
-};
-
 Crowi.initClassesByOS = function() {
   // add classes to cmd-key by OS
   const platform = navigator.platform.toLowerCase();
@@ -761,7 +705,6 @@ window.addEventListener('load', (e) => {
 
   Crowi.highlightSelectedSection(window.location.hash);
   Crowi.modifyScrollTop();
-  Crowi.initSlimScrollForRevisionToc();
   Crowi.initAffix();
   Crowi.initClassesByOS();
 });