update domDialog and snabDialog calls with new properties

ui/analyse/src/explorer/explorerConfig.ts

@@ -333,6 +333,7 @@ const playerModal = (ctrl: ExplorerConfigCtrl) => {
       ctrl.data.playerName.open(false);
       ctrl.root.redraw();
     },
+    modal: true,
     vnodes: [
       h('h2', 'Personal opening explorer'),
       h('div.input-wrapper', [

ui/analyse/src/keyboard.ts

@@ -140,6 +140,7 @@ export function view(ctrl: AnalyseCtrl): VNode {
   return snabDialog({
     class: 'help.keyboard-help',
     htmlUrl: xhr.url('/analysis/help', { study: !!ctrl.study }),
+    modal: true,
     onClose() {
       ctrl.keyboardHelp = false;
       ctrl.redraw();

ui/analyse/src/serverSideUnderboard.ts

@@ -150,7 +150,8 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
     const url = `${baseUrl()}/embed/game/${data.game.id}?theme=auto&bg=auto${location.hash}`;
     const iframe = `<iframe src="${url}"\nwidth=600 height=397 frameborder=0></iframe>`;
     domDialog({
-      show: 'modal',
+      modal: true,
+      show: true,
       htmlText:
         '<div><strong style="font-size:1.5em">' +
         $(this).html() +

ui/analyse/src/study/chapterEditForm.ts

@@ -68,6 +68,8 @@ export function view(ctrl: StudyChapterEditForm): VNode | undefined {
           ctrl.current(null);
           ctrl.redraw();
         },
+        modal: true,
+        noClickAway: true,
         vnodes: [
           h('h2', i18n.study.editChapter),
           h(

ui/analyse/src/study/chapterNewForm.ts

@@ -141,6 +141,7 @@ export function view(ctrl: StudyChapterNewForm): VNode {
       ctrl.isOpen(false);
       ctrl.redraw();
     },
+    modal: true,
     noClickAway: true,
     vnodes: [
       activeTab !== 'edit' &&

ui/analyse/src/study/inviteForm.ts

@@ -64,6 +64,7 @@ export function view(ctrl: ReturnType<typeof makeCtrl>): VNode {
       ctrl.open(false);
       ctrl.redraw();
     },
+    modal: true,
     noScrollable: true,
     vnodes: [
       h('h2', i18n.study.inviteToTheStudy),

ui/analyse/src/study/studyForm.ts

@@ -256,6 +256,7 @@ export function view(ctrl: StudyForm): VNode {
       ctrl.open(false);
       ctrl.redraw();
     },
+    modal: true,
     noClickAway: true,
     vnodes: [
       h(

ui/analyse/src/study/studySearch.ts

@@ -55,6 +55,7 @@ export function view(ctrl: SearchCtrl) {
     onClose() {
       ctrl.open(false);
     },
+    modal: true,
     vnodes: [
       h('input', {
         attrs: { autofocus: 1, placeholder: `Search in ${ctrl.studyName}`, value: ctrl.query() },

ui/analyse/src/study/topics.ts

@@ -41,6 +41,7 @@ export const formView = (ctrl: TopicsCtrl, userId?: string): VNode =>
       ctrl.open(false);
       ctrl.redraw();
     },
+    modal: true,
     vnodes: [
       h('h2', i18n.study.topics),
       h(

ui/analyse/src/view/actionMenu.ts

@@ -117,7 +117,9 @@ export function view(ctrl: AnalyseCtrl): VNode {
         h(
           'a',
           {
-            hook: bind('click', () => domDialog({ cash: $('.continue-with.g_' + d.game.id), show: 'modal' })),
+            hook: bind('click', () =>
+              domDialog({ cash: $('.continue-with.g_' + d.game.id), modal: true, show: true }),
+            ),
             attrs: dataIcon(licon.Swords),
           },
           i18n.site.continueFromHere,

ui/bits/src/bits.cropDialog.ts

@@ -66,6 +66,7 @@ export async function initModule(o?: CropOpts): Promise<void> {
   const dlg = await domDialog({
     class: 'crop-viewer',
     css: [{ hashed: 'bits.cropDialog' }, { url: 'npm/cropper.min.css' }],
+    modal: true,
     htmlText: `<h2>Crop image to desired shape</h2>
       <div class="crop-view"></div>
       <span class="dialog-actions"><button class="button button-empty cancel">cancel</button>
@@ -81,7 +82,7 @@ export async function initModule(o?: CropOpts): Promise<void> {
     },
   });
 
-  dlg.showModal();
+  dlg.show();
 
   async function crop() {
     const view = dlg.view.querySelector('.crop-view') as HTMLElement;

ui/bits/src/bits.diagnosticDialog.ts

@@ -31,6 +31,7 @@ export async function initModule(): Promise<void> {
   const dlg = await domDialog({
     class: 'diagnostic',
     css: [{ hashed: 'bits.diagnosticDialog' }],
+    modal: true,
     htmlText: `
       <h2>Diagnostics</h2>${flash}
       <pre tabindex="0" class="err">${escaped}</pre>
@@ -52,7 +53,7 @@ export async function initModule(): Promise<void> {
       setTimeout(() => copied.remove(), 2000);
     }),
   );
-  dlg.showModal();
+  dlg.show();
 }
 
 const storageProxy: { [key: string]: { storageKey: string; validate: (val?: string) => boolean } } = {

ui/bits/src/bits.forum.ts

@@ -11,6 +11,7 @@ site.load.then(() => {
       domDialog({
         cash: $('.forum-delete-modal'),
         attrs: { view: { action: link.href } },
+        modal: true,
       }).then(dlg => {
         $(dlg.view)
           .find('form')
@@ -22,7 +23,7 @@ site.load.then(() => {
             dlg.close();
           });
         $(dlg.view).find('form button.cancel').on('click', dlg.close);
-        dlg.showModal();
+        dlg.show();
       });
       return false;
     })
@@ -31,10 +32,11 @@ site.load.then(() => {
       domDialog({
         cash: $('.forum-relocate-modal'),
         attrs: { view: { action: link.href } },
+        modal: true,
       }).then(dlg => {
         $(dlg.view).find('form').attr('action', link.href);
         $(dlg.view).find('form button.cancel').on('click', dlg.close);
-        dlg.showModal();
+        dlg.show();
       });
       return false;
     })

ui/bits/src/bits.publicChats.ts

@@ -40,7 +40,7 @@ site.load.then(() => {
 
     $('#communication').on('click', '.line:not(.lichess)', function (this: HTMLDivElement) {
       const $l = $(this);
-      domDialog({ cash: $('.timeout-modal') }).then(dlg => {
+      domDialog({ cash: $('.timeout-modal'), modal: true }).then(dlg => {
         $('.username', dlg.view).text($l.find('.user-link').text());
         $('.text', dlg.view).text($l.text().split(' ').slice(1).join(' '));
         $('.button', dlg.view).on('click', function (this: HTMLButtonElement) {
@@ -58,7 +58,7 @@ site.load.then(() => {
           }).then(_ => setTimeout(reloadNow, 1000));
           dlg.close();
         });
-        dlg.showModal();
+        dlg.show();
       });
     });
   };

ui/ceval/src/util.ts

@@ -39,6 +39,7 @@ export const sharedWasmMemory = (lo: number, hi = 32767): WebAssembly.Memory =>
 export function showEngineError(engine: string, error: string): void {
   domDialog({
     class: 'engine-error',
+    modal: true,
     htmlText:
       `<h2>${escapeHtml(engine)} <bad>error</bad></h2>` +
       (error.includes('Status 503')
@@ -57,6 +58,6 @@ export function showEngineError(engine: string, error: string): void {
         window.getSelection()?.addRange(range);
       }, 0);
     dlg.view.querySelector('.err')?.addEventListener('focus', select);
-    dlg.showModal();
+    dlg.show();
   });
 }

ui/cli/src/cli.ts

@@ -60,7 +60,8 @@ function help() {
   domDialog({
     css: [{ hashed: 'cli.help' }],
     class: 'clinput-help',
-    show: 'modal',
+    modal: true,
+    show: true,
     htmlText:
       '<div><h3>Commands</h3>' +
       commandHelp('/tv /follow', ' <user>', 'Watch someone play') +

ui/common/src/dialog.ts

@@ -13,7 +13,7 @@ export interface Dialog {
   readonly view: HTMLElement; // your content div
   readonly returnValue?: 'ok' | 'cancel' | string; // how did we close?
 
-  show(): Promise<Dialog>; // resolves on close with returnValue (if needed)
+  show(): Promise<Dialog>; // promise resolves on close
   updateActions(actions?: Action | Action[]): void; // set new actions or reattach existing if no args
   close(returnValue?: string): void;
 }

ui/common/src/linkPopup.ts

@@ -28,10 +28,11 @@ export const onClick = (a: HTMLLinkElement): boolean => {
           ${i18n.site.proceedToX(url.host)}
         </a>
       </div>`,
+    modal: true,
   }).then(dlg => {
     $('.cancel', dlg.view).on('click', dlg.close);
     $('a', dlg.view).on('click', () => setTimeout(dlg.close, 1000));
-    dlg.showModal();
+    dlg.show();
   });
   return false;
 };

ui/editor/src/view.ts

@@ -247,7 +247,7 @@ function controls(ctrl: EditorCtrl, state: EditorState): VNode {
                 class: { button: true, 'button-empty': true, disabled: !state.playable },
                 on: {
                   click: () => {
-                    if (state.playable) domDialog({ cash: $('.continue-with'), show: 'modal' });
+                    if (state.playable) domDialog({ cash: $('.continue-with'), modal: true, show: true });
                   },
                 },
               },

ui/keyboardMove/src/exports.ts

@@ -84,6 +84,7 @@ export function render(ctrl: KeyboardMove): VNode {
           class: 'help.keyboard-move-help',
           htmlUrl: '/help/keyboard-move',
           onClose: () => ctrl.helpModalOpen(false),
+          modal: true,
         })
       : null,
   ]);

ui/lobby/src/view/setup/modal.ts

@@ -19,6 +19,7 @@ export default function setupModal(ctrl: LobbyController): MaybeVNode {
     class: 'game-setup',
     css: [{ hashed: 'lobby.setup' }],
     onClose: setupCtrl.closeModal,
+    modal: true,
     vnodes: [...views[setupCtrl.gameType](ctrl), ratingView(ctrl)],
   });
 }

ui/puzzle/src/keyboard.ts

@@ -39,4 +39,5 @@ export const view = (ctrl: PuzzleCtrl) =>
     class: 'help',
     htmlUrl: '/training/help',
     onClose: () => ctrl.keyboardHelp(false),
+    modal: true,
   });

ui/puzzle/src/report.ts

@@ -74,6 +74,7 @@ export default class Report {
 
     domDialog({
       focus: '.apply',
+      modal: true,
       htmlText:
         '<div><strong style="font-size:1.5em">' +
         'Report multiple solutions' +
@@ -101,7 +102,7 @@ export default class Report {
         xhrReport(puzzleId, reason);
         dlg.close();
       });
-      dlg.showModal();
+      dlg.show();
     });
   };
 }

ui/round/src/keyboard.ts

@@ -40,4 +40,5 @@ export const view = (ctrl: RoundController): VNode =>
       ctrl.keyboardHelp = false;
       ctrl.redraw();
     },
+    modal: true,
   });

ui/simul/src/view/created.ts

@@ -38,12 +38,13 @@ export default function (showText: (ctrl: SimulCtrl) => VNode | false) {
                             else
                               domDialog({
                                 cash: $('.simul .continue-with'),
+                                modal: true,
                               }).then(dlg => {
                                 $('button.button', dlg.view).on('click', function (this: HTMLButtonElement) {
                                   xhr.join(ctrl.data.id, this.dataset.variant as VariantKey);
                                   dlg.close();
                                 });
-                                dlg.showModal();
+                                dlg.show();
                               });
                           })
                         : {},

ui/tournament/src/view/battle.ts

@@ -13,12 +13,13 @@ export function joinWithTeamSelector(ctrl: TournamentController) {
   };
   return snabDialog({
     class: 'team-battle__choice',
+    modal: true,
     onInsert(dlg) {
       $('.team-picker__team', dlg.view).on('click', e => {
         ctrl.join(e.target.dataset['id']);
         dlg.close();
       });
-      dlg.showModal();
+      dlg.show();
     },
     onClose,
     vnodes: [

ui/voice/src/view.ts

@@ -150,14 +150,15 @@ function renderHelpModal(ctrl: VoiceCtrl) {
     }
     html += '</tbody></table>';
     dlg.view.innerHTML = html;
-    if (!dlg.open) dlg.showModal();
+    if (!dlg.open) dlg.show();
   };
 
   return snabDialog({
     class: 'help.voice-move-help',
     htmlUrl: `/help/voice/${ctrl.moduleId}`,
     css: [{ hashed: 'voice.move.help' }],
     onClose: () => ctrl.showHelp(false),
+    modal: true,
     onInsert: async dlg => {
       if (ctrl.showHelp() === 'list') {
         showMoveList(dlg);
@@ -181,7 +182,7 @@ function renderHelpModal(ctrl: VoiceCtrl) {
           .join(' ');
       });
       $('.all-phrases-button', dlg.view).on('click', () => showMoveList(dlg));
-      dlg.showModal();
+      dlg.show();
     },
   });
 }