Make setSidebarHeight more efficient with SidebarHeightManager.

1 files changed, 33 insertions, 0 deletions

diff --git a/app/assets/javascripts/sidebar_height_manager.js b/app/assets/javascripts/sidebar_height_manager.js
new file mode 100644
index 00000000000..022415f22b2
--- /dev/null
+++ b/app/assets/javascripts/sidebar_height_manager.js
@@ -0,0 +1,33 @@
+export default {
+  init() {
+    if (!this.initialized) {
+      this.$window = $(window);
+      this.$rightSidebar = $('.js-right-sidebar');
+      this.$navHeight = $('.navbar-gitlab').outerHeight() +
+        $('.layout-nav').outerHeight() +
+        $('.sub-nav-scroll').outerHeight();
+
+      const throttledSetSidebarHeight = _.throttle(() => this.setSidebarHeight(), 20);
+      const debouncedSetSidebarHeight = _.debounce(() => this.setSidebarHeight(), 200);
+
+      this.$window.on('scroll', throttledSetSidebarHeight);
+      this.$window.on('resize', debouncedSetSidebarHeight);
+      this.initialized = true;
+    }
+  },
+
+  setSidebarHeight() {
+    const currentScrollDepth = window.pageYOffset || 0;
+    const diff = this.$navHeight - currentScrollDepth;
+
+    if (diff > 0) {
+      const newSidebarHeight = window.innerHeight - diff;
+      this.$rightSidebar.outerHeight(newSidebarHeight);
+      this.sidebarHeightIsCustom = true;
+    } else if (this.sidebarHeightIsCustom) {
+      this.$rightSidebar.outerHeight('100%');
+      this.sidebarHeightIsCustom = false;
+    }
+  },
+};
+