Move wrapWidth handling out of MessageBox, improve scroll position handling, use custom routing, close menu when clicking anywhere

client/src/js/util/messageHeight.js

@@ -1,7 +1,53 @@
+import { stringWidth, measureScrollBarWidth } from './index';
+import { updateMessageHeight } from '../actions/message';
+import { setCharWidth, setWrapWidth } from '../actions/environment';
+
 const lineHeight = 24;
-let prevWidth;
+const menuWidth = 200;
+const userListWidth = 200;
+const messagePadding = 30;
+const smallScreen = 600;
 let windowWidth;
 
+export function initWidthUpdates(store) {
+  const scrollBarWidth = measureScrollBarWidth();
+
+  const charWidth = stringWidth(' ', '16px Roboto Mono, monospace');
+  window.messageIndent = 6 * charWidth;
+  store.dispatch(setCharWidth(charWidth));
+
+  let prevWrapWidth;
+
+  function updateWidth(delta, first) {
+    windowWidth = window.innerWidth;
+    let wrapWidth = windowWidth - scrollBarWidth - messagePadding;
+    if (windowWidth > smallScreen) {
+      wrapWidth -= menuWidth;
+    }
+
+    if (wrapWidth !== prevWrapWidth) {
+      prevWrapWidth = wrapWidth;
+
+      store.dispatch(setWrapWidth(wrapWidth));
+      if (!first) {
+        store.dispatch(updateMessageHeight());
+      }
+    }
+  }
+
+  let resizeRAF;
+
+  function resize() {
+    if (resizeRAF) {
+      window.cancelAnimationFrame(resizeRAF);
+    }
+    resizeRAF = window.requestAnimationFrame(updateWidth);
+  }
+
+  updateWidth(0, true);
+  window.addEventListener('resize', resize);
+}
+
 export function findBreakpoints(text) {
   const breakpoints = [];
 
@@ -20,17 +66,10 @@ export function findBreakpoints(text) {
 
 export function messageHeight(message, width, charWidth, indent = 0) {
   let pad = (6 + (message.from ? message.from.length + 1 : 0)) * charWidth;
-  let height = lineHeight + 4;
+  let height = lineHeight + 8;
 
-  if (message.channel) {
-    if (width !== prevWidth) {
-      prevWidth = width;
-      windowWidth = window.innerWidth;
-    }
-
-    if (windowWidth > 600) {
-      width -= 200;
-    }
+  if (message.channel && windowWidth > smallScreen) {
+    width -= userListWidth;
   }
 
   if (pad + (message.length * charWidth) < width) {