Merge branch 'set-sidebar-height' into 'master'

Make issuable sidebar setSidebarHeight more efficient

See merge request !12252

app/assets/javascripts/issuable_bulk_update_sidebar.js

@@ -5,6 +5,7 @@
 /* global SubscriptionSelect */
 
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
+import SidebarHeightManager from './sidebar_height_manager';
 
 const HIDDEN_CLASS = 'hidden';
 const DISABLED_CONTENT_CLASS = 'disabled-content';
@@ -56,18 +57,6 @@ export default class IssuableBulkUpdateSidebar {
     return navbarHeight + layoutNavHeight + subNavScroll;
   }
 
-  initSidebar() {
-    if (!this.navHeight) {
-      this.navHeight = this.getNavHeight();
-    }
-
-    if (!this.sidebarInitialized) {
-      $(document).off('scroll').on('scroll', _.throttle(this.setSidebarHeight, 10).bind(this));
-      $(window).off('resize').on('resize', _.throttle(this.setSidebarHeight, 10).bind(this));
-      this.sidebarInitialized = true;
-    }
-  }
-
   setupBulkUpdateActions() {
     IssuableBulkUpdateActions.setOriginalDropdownData();
   }
@@ -97,7 +86,7 @@ export default class IssuableBulkUpdateSidebar {
     this.toggleCheckboxDisplay(enable);
 
     if (enable) {
-      this.initSidebar();
+      SidebarHeightManager.init();
     }
   }
 
@@ -143,17 +132,6 @@ export default class IssuableBulkUpdateSidebar {
       this.$bulkEditSubmitBtn.enable();
     }
   }
-  // loosely based on method of the same name in right_sidebar.js
-  setSidebarHeight() {
-    const currentScrollDepth = window.pageYOffset || 0;
-    const diff = this.navHeight - currentScrollDepth;
-
-    if (diff > 0) {
-      this.$sidebar.outerHeight(window.innerHeight - diff);
-    } else {
-      this.$sidebar.outerHeight('100%');
-    }
-  }
 
   static getCheckedIssueIds() {
     const $checkedIssues = $('.selected_issue:checked');

app/assets/javascripts/right_sidebar.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, object-shorthand, comma-dangle, no-else-return, no-param-reassign, max-len */
 
 import Cookies from 'js-cookie';
+import SidebarHeightManager from './sidebar_height_manager';
 
 (function() {
   this.Sidebar = (function() {
@@ -8,12 +9,6 @@ import Cookies from 'js-cookie';
       this.toggleTodo = this.toggleTodo.bind(this);
       this.sidebar = $('aside');
 
-      this.$sidebarInner = this.sidebar.find('.issuable-sidebar');
-      this.$navGitlab = $('.navbar-gitlab');
-      this.$layoutNav = $('.layout-nav');
-      this.$subScroll = $('.sub-nav-scroll');
-      this.$rightSidebar = $('.js-right-sidebar');
-
       this.removeListeners();
       this.addEventListeners();
     }
@@ -27,16 +22,14 @@ import Cookies from 'js-cookie';
     };
 
     Sidebar.prototype.addEventListeners = function() {
+      SidebarHeightManager.init();
       const $document = $(document);
-      const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight.bind(this), 20);
-      const slowerThrottledSetSidebarHeight = _.throttle(this.setSidebarHeight.bind(this), 200);
 
       this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
       $('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
       $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
       $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
-      $(window).on('resize', () => throttledSetSidebarHeight());
-      $document.on('scroll', () => slowerThrottledSetSidebarHeight());
+
       $document.on('click', '.js-sidebar-toggle', function(e, triggered) {
         var $allGutterToggleIcons, $this, $thisIcon;
         e.preventDefault();
@@ -214,18 +207,6 @@ import Cookies from 'js-cookie';
       }
     };
 
-    Sidebar.prototype.setSidebarHeight = function() {
-      const $navHeight = this.$navGitlab.outerHeight() + this.$layoutNav.outerHeight() + (this.$subScroll ? this.$subScroll.outerHeight() : 0);
-      const diff = $navHeight - $(window).scrollTop();
-      if (diff > 0) {
-        this.$rightSidebar.outerHeight($(window).height() - diff);
-        this.$sidebarInner.height('100%');
-      } else {
-        this.$rightSidebar.outerHeight('100%');
-        this.$sidebarInner.height('');
-      }
-    };
-
     Sidebar.prototype.isOpen = function() {
       return this.sidebar.is('.right-sidebar-expanded');
     };

app/assets/javascripts/sidebar_height_manager.js

+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;
+    }
+  },
+};
+