Make setSidebarHeight more efficient with SidebarHeightManager.
This commit is contained in:
parent
1a449b24a2
commit
728be6af7c
|
@ -5,6 +5,7 @@
|
||||||
/* global SubscriptionSelect */
|
/* global SubscriptionSelect */
|
||||||
|
|
||||||
import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
|
import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
|
||||||
|
import SidebarHeightManager from './sidebar_height_manager';
|
||||||
|
|
||||||
const HIDDEN_CLASS = 'hidden';
|
const HIDDEN_CLASS = 'hidden';
|
||||||
const DISABLED_CONTENT_CLASS = 'disabled-content';
|
const DISABLED_CONTENT_CLASS = 'disabled-content';
|
||||||
|
@ -56,18 +57,6 @@ export default class IssuableBulkUpdateSidebar {
|
||||||
return navbarHeight + layoutNavHeight + subNavScroll;
|
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() {
|
setupBulkUpdateActions() {
|
||||||
IssuableBulkUpdateActions.setOriginalDropdownData();
|
IssuableBulkUpdateActions.setOriginalDropdownData();
|
||||||
}
|
}
|
||||||
|
@ -97,7 +86,7 @@ export default class IssuableBulkUpdateSidebar {
|
||||||
this.toggleCheckboxDisplay(enable);
|
this.toggleCheckboxDisplay(enable);
|
||||||
|
|
||||||
if (enable) {
|
if (enable) {
|
||||||
this.initSidebar();
|
SidebarHeightManager.init();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,17 +132,6 @@ export default class IssuableBulkUpdateSidebar {
|
||||||
this.$bulkEditSubmitBtn.enable();
|
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() {
|
static getCheckedIssueIds() {
|
||||||
const $checkedIssues = $('.selected_issue:checked');
|
const $checkedIssues = $('.selected_issue:checked');
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
/* 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 */
|
/* 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 Cookies from 'js-cookie';
|
||||||
|
import SidebarHeightManager from './sidebar_height_manager';
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
this.Sidebar = (function() {
|
this.Sidebar = (function() {
|
||||||
|
@ -8,12 +9,6 @@ import Cookies from 'js-cookie';
|
||||||
this.toggleTodo = this.toggleTodo.bind(this);
|
this.toggleTodo = this.toggleTodo.bind(this);
|
||||||
this.sidebar = $('aside');
|
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.removeListeners();
|
||||||
this.addEventListeners();
|
this.addEventListeners();
|
||||||
}
|
}
|
||||||
|
@ -27,16 +22,14 @@ import Cookies from 'js-cookie';
|
||||||
};
|
};
|
||||||
|
|
||||||
Sidebar.prototype.addEventListeners = function() {
|
Sidebar.prototype.addEventListeners = function() {
|
||||||
|
SidebarHeightManager.init();
|
||||||
const $document = $(document);
|
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);
|
this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
|
||||||
$('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
|
$('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
|
||||||
$('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
|
$('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
|
||||||
$('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
|
$('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
|
||||||
$(window).on('resize', () => throttledSetSidebarHeight());
|
|
||||||
$document.on('scroll', () => slowerThrottledSetSidebarHeight());
|
|
||||||
$document.on('click', '.js-sidebar-toggle', function(e, triggered) {
|
$document.on('click', '.js-sidebar-toggle', function(e, triggered) {
|
||||||
var $allGutterToggleIcons, $this, $thisIcon;
|
var $allGutterToggleIcons, $this, $thisIcon;
|
||||||
e.preventDefault();
|
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() {
|
Sidebar.prototype.isOpen = function() {
|
||||||
return this.sidebar.is('.right-sidebar-expanded');
|
return this.sidebar.is('.right-sidebar-expanded');
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue