Merge pull request #459 from weseek/imprv/display-side-scrollbar

modified calcuration for scroll bar height

lib/views/layout-growi/base/layout.html

@@ -26,42 +26,6 @@
 
 </div><!-- /.container-fluid -->
 
-
-<!-- Side Scroll Bar-->
-<script>
-  /*
-   * Disabled temporally -- 2018.06.06 Yuki Takei
-   * see https://weseek.myjetbrains.com/youtrack/issue/GC-278
-   *
-  function DrawScrollbar() {
-    var h = window.innerHeight - document.getElementById('page-header').clientHeight ;
-    $('#revision-toc-content').slimScroll({
-      railVisible: true,
-      position: 'right',
-      height: h,
-    });
-  }
-
-  $(function(){
-    DrawScrollbar();
-  });
-
-  (function () {
-    var timer = 0;
-
-    window.onresize = function () {
-      if (timer > 0) {
-        clearTimeout(timer);
-      }
-
-      timer = setTimeout(function () {
-        DrawScrollbar();
-      }, 200);
-    };
-  }());
-  */
-  </script>
-
 <footer class="footer">
   {% include '../../widget/system-version.html' %}
 </footer>

resource/js/legacy/crowi.js

@@ -165,6 +165,50 @@ Crowi.handleKeyCtrlSlashHandler = (event) => {
   event.preventDefault();
 };
 
+Crowi.initSlimScrollForRevisionToc = () => {
+  function getCurrentRevisionTocTop() {
+    const revisionTocElem = document.getElementById('revision-toc');
+    // calculate absolute top of '#revision-toc' element
+    return revisionTocElem.getBoundingClientRect().top;
+  }
+
+  function resetScrollbar(revisionTocTop) {
+    // inner height - revisionTocTop
+    const h = window.innerHeight - revisionTocTop;
+
+    $('#revision-toc-content').slimScroll({
+      railVisible: true,
+      position: 'right',
+      height: h,
+    });
+  }
+
+  // initialize
+  const revisionTocTop = getCurrentRevisionTocTop();
+  resetScrollbar(revisionTocTop);
+
+  /*
+   * set event listener
+   */
+  // resize
+  // TODO turn performance
+  window.addEventListener('resize', (event) => {
+    setTimeout(() => {
+      resetScrollbar(getCurrentRevisionTocTop());
+    }, 200);
+  });
+  // affix on
+  $('#revision-toc').on('affixed.bs.affix', function() {
+    resetScrollbar(getCurrentRevisionTocTop());
+  });
+  // affix off
+  $('#revision-toc').on('affixed-top.bs.affix', function() {
+    // calculate sum of height (.navbar-header + bg-title) + margin-top of .main
+    const sum = 138;
+    resetScrollbar(sum);
+  });
+};
+
 $(function() {
   var config = JSON.parse(document.getElementById('crowi-context-hydrate').textContent || '{}');
 
@@ -529,6 +573,20 @@ $(function() {
       });
     }
 
+    // (function () {
+    //   var timer = 0;
+
+    //   window.onresize = function () {
+    //     if (timer > 0) {
+    //       clearTimeout(timer);
+    //     }
+
+    //     timer = setTimeout(function () {
+    //       DrawScrollbar();
+    //     }, 200);
+    //   };
+    // }());
+
     /*
      * transplanted to React components -- 2017.06.02 Yuki Takei
      *
@@ -890,6 +948,7 @@ window.addEventListener('load', function(e) {
   Crowi.highlightSelectedSection(location.hash);
   Crowi.modifyScrollTop();
   Crowi.setCaretLineAndFocusToEditor();
+  Crowi.initSlimScrollForRevisionToc();
 });
 
 window.addEventListener('hashchange', function(e) {

resource/styles/scss/_layout_growi.scss

@@ -7,6 +7,7 @@
     &.affix {
       margin-top: 5px;
       top: calc(46px + 5px);
+      min-width: calc(#{100/12*2%} - #{$grid-gutter-width});  // width of 2column - padding
     }
 
     .revision-toc-content {