Reorganize chat hooks

Consoladate the chat eventListeners into a mithril hook to avoid dom query.
Aphexus · Jul 12, 2019 · b00a28d · b00a28d
1 parent 733a228
commit b00a28d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/ui/chat/src/discussion.ts b/ui/chat/src/discussion.ts
@@ -5,7 +5,7 @@ import * as spam from './spam'
 import enhance from './enhance';
 import { presetView } from './preset';
 import { lineAction } from './moderation';
-import { userLink, bind } from './util';
+import { userLink } from './util';
 
 const whisperRegex = /^\/w(?:hisper)?\s/;
 
@@ -69,7 +69,17 @@ function renderInput(ctrl: Ctrl): VNode | undefined {
       maxlength: 140,
       disabled: ctrl.vm.timeout || !ctrl.vm.writeable
     },
-    hook: bind('keypress', (e: KeyboardEvent) => setTimeout(() => {
+    hook: {
+      insert(vnode) {
+        setupHooks(ctrl, vnode.elm as HTMLElement);
+      }
+    }
+  });
+}
+
+const setupHooks = (ctrl: Ctrl, chatEl: HTMLElement) => {
+  chatEl.addEventListener('keypress',
+    (e: KeyboardEvent) => setTimeout(() => {
       const el = e.target as HTMLInputElement,
       txt = el.value,
       pub = ctrl.opts.public;
@@ -88,8 +98,14 @@ function renderInput(ctrl: Ctrl): VNode | undefined {
         if (!pub) el.classList.toggle('whisper', !!txt.match(whisperRegex));
       }
     }))
+
+  window.Mousetrap.bind('c', () => {
+    chatEl.focus();
+    return false;
   });
-}
+
+  window.Mousetrap(chatEl).bind('esc', () => chatEl.blur());
+};
 
 function sameLines(l1: Line, l2: Line) {
   return l1.d && l2.d && l1.u === l2.u;

diff --git a/ui/chat/src/main.ts b/ui/chat/src/main.ts
@@ -16,8 +16,6 @@ export default function LichessChat(element: Element, opts: ChatOpts): {
 } {
   const patch = init([klass, attributes]);
 
-  const container = element.parentNode as HTMLElement;
-
   let vnode: VNode, ctrl: Ctrl
 
   function redraw() {
@@ -30,14 +28,5 @@ export default function LichessChat(element: Element, opts: ChatOpts): {
   element.innerHTML = '';
   vnode = patch(element, blueprint);
 
-  window.Mousetrap.bind('c', () => {
-    (container.querySelector('.mchat__say') as HTMLElement).focus();
-    return false;
-  });
-
-  window.Mousetrap(container).bind('esc', () => {
-    (container.querySelector('.mchat__say') as HTMLElement).blur();
-  });
-
   return ctrl;
 };