improve common/modal WIP

ui/common/src/modal.ts

@@ -33,6 +33,7 @@ const focusableSelectors =
 
 export function trapFocus(event: FocusEvent) {
   const wrap: HTMLElement | undefined = $('#modal-wrap').get(0);
+  console.log(wrap);
   if (!wrap) return;
   const position = wrap.compareDocumentPosition(event.target as HTMLElement);
   if (position & Node.DOCUMENT_POSITION_CONTAINED_BY) return;

ui/tournament/src/view/battle.ts

@@ -2,7 +2,7 @@ import TournamentController from '../ctrl';
 import { bind, onInsert, playerName } from './util';
 import { h, VNode } from 'snabbdom';
 import { TeamBattle, RankedTeam, MaybeVNode } from '../interfaces';
-import { focusFirstChild } from 'common/modal';
+import modal from 'common/modal';
 
 export function joinWithTeamSelector(ctrl: TournamentController) {
   const onClose = () => {
@@ -11,32 +11,11 @@ export function joinWithTeamSelector(ctrl: TournamentController) {
   };
   const tb = ctrl.data.teamBattle!;
   return h(
-    'div#modal-overlay',
+    'div.none',
     {
-      hook: bind('click', onClose),
+      hook: onInsert(el => modal($(el), 'team-battle__choice', onClose)),
     },
     [
-      h(
-        'div#modal-wrap.team-battle__choice',
-        {
-          hook: onInsert(el => {
-            focusFirstChild($(el));
-            el.addEventListener('click', e => e.stopPropagation());
-          }),
-        },
-        [
-          h('span.close', {
-            attrs: {
-              'data-icon': '',
-              role: 'button',
-              'aria-label': 'Close',
-              tabindex: '0',
-            },
-            hook: onInsert(el => {
-              el.addEventListener('click', onClose);
-              el.addEventListener('keydown', e => (e.code === 'Enter' || e.code === 'Space' ? onClose() : true));
-            }),
-          }),
       h('div.team-picker', [
         h('h2', 'Pick your team'),
         h('br'),
@@ -73,8 +52,6 @@ export function joinWithTeamSelector(ctrl: TournamentController) {
             ]),
       ]),
     ]
-      ),
-    ]
   );
 }