YDA-5870: Collapse group properties on scroll in group manager

group_manager/static/group_manager/js/group_manager.js

@@ -2,6 +2,48 @@
 'use strict'
 
 let enteredUsername = ''
+let didScroll
+let lastScrollTop = 0
+
+setInterval(function () {
+  if (didScroll) {
+    collapseUncollapseOnScroll()
+    didScroll = false
+  }
+}, 400)
+
+function collapseUncollapseOnScroll () {
+  // Collapse or uncollapse group properties on scroll, if the right pane is too long
+  const buffer = 20
+  const delta = 10
+  const collapseDelta = 400
+  const topOfScreenPoint = 60
+  const collapsePoint = 300
+  const st = Math.floor(window.scrollY)
+  let collapseEl = bootstrap.Collapse.getInstance('#group-properties')
+  if (!collapseEl) {
+    collapseEl = new bootstrap.Collapse('#group-properties', {
+      toggle: false
+    })
+  }
+
+  if (Math.abs(lastScrollTop - st) <= delta) {
+    return
+  }
+
+  if (st <= lastScrollTop && st <= topOfScreenPoint) {
+    // Near the top of the screen
+    bootstrap.Collapse.getInstance('#group-properties').show()
+  } else if (st > lastScrollTop &&
+    st > collapsePoint &&
+    Math.abs(lastScrollTop - st) <= collapseDelta &&
+    $('#group-overview').outerHeight() + buffer > $(window).height()) {
+    // Have scrolled down at least a little
+    bootstrap.Collapse.getInstance('#group-properties').hide()
+  }
+
+  lastScrollTop = st
+}
 
 function flatListGroups () {
   // Create flat list of groups including filter handling on username and groupname.
@@ -2176,6 +2218,11 @@ $(function () {
           .addClass('fa-caret-down')
         Yoda.storage.session.set('is-collapsed', 'false')
       })
+
+      // For the auto-collapsing of group properties
+      $(window).scroll(function (event) {
+        didScroll = true
+      })
       // }}}
 
       // Group list {{{

group_manager/templates/group_manager/index.html

@@ -88,7 +88,7 @@ <h1 id="group-manager-text">Group manager</h1>
         </div>
     </div>
     <div class="col-md-6">
-        <div class="sticky-top">
+        <div id="group-overview" class="sticky-top">
             <div class="d-flex justify-content-end mb-3 pt-3 align-items-center div-show-search-groups d-none">
                 <button type="button" class="btn btn-primary create-button-new me-2" title="Create new group"><i class="fa-solid fa-plus" aria-hidden="true"></i> Add group </button>
                 <button type="button" class="btn btn-primary import-groups-csv" title="Import groups from CSV"><i class="fa-solid fa-file-csv" aria-hidden="true"></i> Import groups</button>