DRY up header height calculation

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

@@ -1,4 +1,5 @@
 import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
+import { headerHeight } from 'discourse/views/header';
 
 const PANEL_BODY_MARGIN = 30;
 const mutationSupport = !!window['MutationObserver'];
@@ -46,11 +47,7 @@ export default Ember.Component.extend({
       $('body').addClass('drop-down-visible');
     } else {
       $panelBody.height('auto');
-      const $header = $('header.d-header');
-      const headerOffset = $header.offset();
-      const headerOffsetTop = (headerOffset) ? headerOffset.top : 0;
-      const headerHeight = parseInt($header.height() + headerOffsetTop - $window.scrollTop() + 3);
-      this.$().css({ left: "auto", top: headerHeight + "px" });
+      this.$().css({ left: "auto", top: headerHeight() + "px" });
       $('body').removeClass('drop-down-visible');
     }
 

app/assets/javascripts/discourse/views/composer.js.es6

@@ -5,6 +5,7 @@ import avatarTemplate from 'discourse/lib/avatar-template';
 import positioningWorkaround from 'discourse/lib/safari-hacks';
 import debounce from 'discourse/lib/debounce';
 import { linkSeenMentions, fetchUnseenMentions } from 'discourse/lib/link-mentions';
+import { headerHeight } from 'discourse/views/header';
 
 const ComposerView = Ember.View.extend(Ember.Evented, {
   _lastKeyTimeout: null,
@@ -124,11 +125,7 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
 
     $replyControl.DivResizer({
       maxHeight(winHeight) {
-        const $header = $('header.d-header');
-        const headerOffset = $header.offset();
-        const headerOffsetTop = (headerOffset) ? headerOffset.top : 0;
-        const headerHeight = parseInt($header.height() + headerOffsetTop - $(window).scrollTop() + 5);
-        return winHeight - headerHeight;
+        return winHeight - headerHeight();
       },
       resize: runResize,
       onDrag: (sizePx) => this.movePanels(sizePx)

app/assets/javascripts/discourse/views/header.js.es6

@@ -1,52 +1,55 @@
+import { on } from 'ember-addons/ember-computed-decorators';
+
 export default Ember.View.extend({
   tagName: 'header',
   classNames: ['d-header', 'clearfix'],
   classNameBindings: ['editingTopic'],
   templateName: 'header',
 
-  examineDockHeader: function() {
-    var headerView = this;
-
+  examineDockHeader() {
     // Check the dock after the current run loop. While rendering,
     // it's much slower to calculate `outlet.offset()`
-    Em.run.next(function () {
-      if (!headerView.docAt) {
-        var outlet = $('#main-outlet');
+    Ember.run.next(() => {
+      if (!this.docAt) {
+        const outlet = $('#main-outlet');
         if (!(outlet && outlet.length === 1)) return;
-        headerView.docAt = outlet.offset().top;
+        this.docAt = outlet.offset().top;
       }
 
-      var offset = window.pageYOffset || $('html').scrollTop();
-      if (offset >= headerView.docAt) {
-        if (!headerView.dockedHeader) {
+      const offset = window.pageYOffset || $('html').scrollTop();
+      if (offset >= this.docAt) {
+        if (!this.dockedHeader) {
           $('body').addClass('docked');
-          headerView.dockedHeader = true;
+          this.dockedHeader = true;
         }
       } else {
-        if (headerView.dockedHeader) {
+        if (this.dockedHeader) {
           $('body').removeClass('docked');
-          headerView.dockedHeader = false;
+          this.dockedHeader = false;
         }
       }
     });
   },
 
-  _tearDown: function() {
+  @on('willDestroyElement')
+  _tearDown() {
     $(window).unbind('scroll.discourse-dock');
     $(document).unbind('touchmove.discourse-dock');
     this.$('a.unread-private-messages, a.unread-notifications, a[data-notifications]').off('click.notifications');
     $('body').off('keydown.header');
-  }.on('willDestroyElement'),
+  },
 
-  _setup: function() {
-    const self = this;
-
-    $(window).bind('scroll.discourse-dock', function() {
-      self.examineDockHeader();
-    });
-    $(document).bind('touchmove.discourse-dock', function() {
-      self.examineDockHeader();
-    });
-    self.examineDockHeader();
-  }.on('didInsertElement')
+  @on('didInsertElement')
+  _setup() {
+    $(window).bind('scroll.discourse-dock', () => this.examineDockHeader());
+    $(document).bind('touchmove.discourse-dock', () => this.examineDockHeader());
+    this.examineDockHeader();
+  }
 });
+
+export function headerHeight() {
+  const $header = $('header.d-header');
+  const headerOffset = $header.offset();
+  const headerOffsetTop = (headerOffset) ? headerOffset.top : 0;
+  return parseInt($header.height() + headerOffsetTop - $(window).scrollTop() + 5);
+}

app/assets/javascripts/main_include.js

@@ -73,6 +73,7 @@
 //= require ./discourse/components/notifications-button
 //= require ./discourse/components/topic-notifications-button
 //= require ./discourse/lib/link-mentions
+//= require ./discourse/views/header
 //= require ./discourse/views/composer
 //= require ./discourse/lib/show-modal
 //= require ./discourse/lib/screen-track