Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-08 12:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX: Tweak the mutationObserver to respect attributes.

Browse Source 
To avoid crashing Firefox, it checks that the values actually changed.
This eliminates a bug where whitespace sometimes appeared in an
expanded menu.
This commit is contained in:
Robin Ward 2015-11-09 13:25:50 -05:00
parent d7ee074837
commit 6eb83a3d00
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/assets/javascripts/discourse/components/menu-panel.js.es6
View File

@ -24,13 +24,19 @@ export default Ember.Component.extend({
const $panelBody = this.$('.panel-body'); const $panelBody = this.$('.panel-body');
let contentHeight = parseInt(this.$('.panel-body-contents').height()); let contentHeight = parseInt(this.$('.panel-body-contents').height());
// We use a mutationObserver to check for style changes, so it's important
// we don't set it if it doesn't change. Same goes for the $panelBody!
const style = this.$().prop('style');
if (viewMode === 'drop-down') { if (viewMode === 'drop-down') {
const $buttonPanel = $('header ul.icons'); const $buttonPanel = $('header ul.icons');
if ($buttonPanel.length === 0) { return; } if ($buttonPanel.length === 0) { return; }
// These values need to be set here, not in the css file - this is to deal with the // These values need to be set here, not in the css file - this is to deal with the
// possibility of the window being resized and the menu changing from .slide-in to .drop-down. // possibility of the window being resized and the menu changing from .slide-in to .drop-down.
this.$().css({ top: '100%', height: 'auto' }); if (style.top !== '100%' || style.height !== 'auto') {
this.$().css({ top: '100%', height: 'auto' });
}
// adjust panel height // adjust panel height
const fullHeight = parseInt($window.height()); const fullHeight = parseInt($window.height());
@ -40,7 +46,9 @@ export default Ember.Component.extend({
if (contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN > fullHeight) { if (contentHeight + (offsetTop - scrollTop) + PANEL_BODY_MARGIN > fullHeight) {
contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN; contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
} }
$panelBody.height(contentHeight); if ($panelBody.height() !== contentHeight) {
$panelBody.height(contentHeight);
}
$('body').addClass('drop-down-visible'); $('body').addClass('drop-down-visible');
} else { } else {
const menuTop = headerHeight(); const menuTop = headerHeight();
@ -53,8 +61,12 @@ export default Ember.Component.extend({
height = winHeight - menuTop; height = winHeight - menuTop;
} }
$panelBody.height('100%'); if ($panelBody.prop('style').height !== '100%') {
this.$().css({ top: menuTop + "px", height }); $panelBody.height('100%');
}
if (style.top !== menuTop + "px" || style.height !== height) {
this.$().css({ top: menuTop + "px", height });
}
$('body').removeClass('drop-down-visible'); $('body').removeClass('drop-down-visible');
} }
@ -127,7 +139,7 @@ export default Ember.Component.extend({
_watchSizeChanges() { _watchSizeChanges() {
if (mutationSupport) { if (mutationSupport) {
this._observer.disconnect(); this._observer.disconnect();
this._observer.observe(this.element, { childList: true, subtree: true }); this._observer.observe(this.element, { childList: true, subtree: true, characterData: true, attributes: true });
} else { } else {
clearInterval(this._resizeInterval); clearInterval(this._resizeInterval);
this._resizeInterval = setInterval(() => { this._resizeInterval = setInterval(() => {
@ -176,7 +188,7 @@ export default Ember.Component.extend({
if (mutationSupport) { if (mutationSupport) {
this._observer = new MutationObserver(() => { this._observer = new MutationObserver(() => {
Ember.run(() => this.performLayout()); Ember.run.debounce(this, this.performLayout, 50);
}); });
} }