Remove awful scrolling code

God bless position: sticky

Author: saki7

css/kunai/site/sidebar.css

@@ -103,6 +103,10 @@ main[role="main"] .kunai-sidebar.force-legacy {
     }
   }
 
+  ul, li {
+    box-sizing: border-box;
+  }
+
   .cr-index {
     display: flex;
     flex-basis: 100%;
@@ -165,8 +169,6 @@ main[role="main"] .kunai-sidebar.force-legacy {
   overflow: hidden;
 
   .kunai-branch {
-    overflow: hidden;
-
     margin: .2rem 0 0 0;
     padding: 0;
 
@@ -205,6 +207,8 @@ main[role="main"] .kunai-sidebar.force-legacy {
 
         > .expandbar {
           display: inline-flex;
+          position: sticky;
+          top: -1px;
         }
 
 
@@ -249,9 +253,11 @@ main[role="main"] .kunai-sidebar.force-legacy {
         }
 
         &.expanded {
-          > .expandbar > .expander {
-            &:before {
-              transform: rotate(45deg);
+          > .expandbar {
+            > .expander {
+              &:before {
+                transform: rotate(45deg);
+              }
             }
           }
         }
@@ -358,37 +364,6 @@ main[role="main"] .kunai-sidebar.force-legacy {
 
           position: relative;
         }
-
-        &.scrolling {
-          > .content > .kunai-branch > ul.branch {
-            // margin-top: 4em;
-
-            > li.preview.expanded {
-              > .expandbar {
-                position: absolute;
-                left: 0;
-                width: 100%;
-
-                // box-shadow: 0 2px 20px -2px rgba(20, 20, 20, 0.3);
-                // background-color: #FBFBFB;
-
-                background-color: rgba(220, 220, 240, 0.5);
-
-                > a {
-                  background: rgba(250, 250, 255, 1);
-                  font-weight: bold;
-                }
-
-                .cr-index {
-                  ul.badges {
-                    display: none;
-                  }
-                }
-              }
-            }
-          }
-        }
-
       }
     }
   }
@@ -534,6 +509,22 @@ main[role="main"] .kunai-sidebar.force-legacy {
 
         > .expandbar {
           margin-bottom: .5em;
+
+          // box-shadow: 0 2px 20px -2px rgba(20, 20, 20, 0.3);
+          // background-color: #FBFBFB;
+
+          background-color: rgba(220, 220, 240, 0.5);
+
+          > a {
+            background: rgba(250, 250, 255, 1);
+            font-weight: bold;
+          }
+
+          .cr-index {
+            ul.badges {
+              display: none;
+            }
+          }
         }
       }
 

js/kunai/ui/treeview.js

@@ -31,76 +31,6 @@ class DOM {
     // this.scrollIsAutoFired = false
   }
 
-  static scrollEps = 8
-
-  async handleScroll(e) {
-    // if (this.scrollIsAutoFired) {
-      // this.log.debug(`handleScroll(auto)`, e)
-      // this.scrollIsAutoFired = false
-      // return false
-    // }
-
-    let content_wrapper = $(e.target)
-    const content = content_wrapper.children('.content')
-
-    const st = content_wrapper.scrollTop()
-    const cOfs = content.position().top
-
-    const k_branch = content.children('.kunai-branch[data-branch-for="headers"]')
-    const bID = k_branch.attr('data-branch-id')
-    const branch = k_branch.children('.branch')
-    // this.log.debug(`handleScroll #${bID} (top = ${st}px, cOfs = ${cOfs}px)`, e, content_wrapper, content, k_branch, branch)
-
-    let closestChild = null
-    let closestDelta = 0
-
-    // find a child item with least deltaY to current scrollTop
-    for (const child_ of branch.children('li')) {
-      const child = $(child_)
-      const cTop = child.position().top
-      const delta = st - cTop
-
-      // this.log.debug(`checking '${child.find('.cr-index .title').get(0).innerText.trim()}' | cTop: ${cTop}, delta: ${delta} (closestDelta: ${closestDelta})`, child_)
-
-      if (!closestChild) {
-        closestDelta = delta
-        closestChild = child
-      } else {
-        // if (cTop + (st + cOfs) < st) {
-        if (cTop < st) {
-          closestDelta = cTop
-          closestChild = child
-        } else {
-          break
-        }
-      }
-    }
-
-    {
-      let last = this.branchPrevs.get(bID)
-      if (last) {
-        // this.log.debug(`preview target change --> '${closestChild.find('.cr-index > .title > .keys')[0].innerText.trim()}'`, closestChild[0])
-        last.removeClass('preview')
-      }
-    }
-
-    this.branchPrevs.set(bID, closestChild)
-    closestChild.addClass('preview')
-    // throw [closestChild, closestDelta]
-
-    if (closestChild.hasClass('expanded')) {
-      let bar = $(closestChild.children('.expandbar')[0])
-      bar.css({top: `${(st)}px`})
-      // throw true
-    }
-
-    if (st < DOM.scrollEps) {
-      content_wrapper.removeClass('scrolling')
-    } else {
-      content_wrapper.addClass('scrolling')
-    }
-  }
-
   async createContent(obj) {
     this.log.info(`createContent '${obj.self.id}'`, obj)
 
@@ -461,10 +391,6 @@ class Treeview {
           stack.addClass('empty')
         }
 
-        if (top.category.index === this.kc.categories().get('reference').index) {
-          content_wrapper.on('scroll', ::this.dom.handleScroll)
-        }
-
         return stack
       })
     ))