fix: No back button for modals on some mobile.

Author: devbean

main.js

@@ -37,7 +37,7 @@
 		"esbuild": "0.17.3",
 		"eslint-plugin-node": "^11.1.0",
 		"file-type-checker": "^1.0.8",
-		"juice": "^9.1.0",
+		"juice": "^10.0.0",
 		"lodash-es": "^4.17.21",
 		"markdown-it": "^13.0.1",
 		"mathjax-full": "^3.2.2",

package-lock.json

@@ -0,0 +1,31 @@
+import { Modal, Platform } from 'obsidian';
+import WordpressPlugin from './main';
+import { TranslateKey } from './i18n';
+
+export abstract class AbstractModal extends Modal {
+
+  protected constructor(
+    protected readonly plugin: WordpressPlugin
+  ) {
+    super(plugin.app);
+  }
+
+  protected t(key: TranslateKey, vars?: Record<string, string>): string {
+    return this.plugin.i18n.t(key, vars);
+  }
+
+  protected createHeader(title: string): void {
+    const { contentEl } = this;
+
+    const headerDiv = contentEl.createDiv();
+    headerDiv.addClass('modal-header');
+    headerDiv.createEl('h1', { text: title });
+    if (Platform.isMobile) {
+      const backButton = headerDiv.createEl('button', { text: this.t('common_back') });
+      backButton.addEventListener('click', () => {
+        this.close();
+      });
+    }
+  }
+
+}

package.json

@@ -23,6 +23,7 @@
   "ribbon_iconTitle": "WordPress Publish",
   "command_publish": "Publish current note",
   "command_publishWithDefault": "Publish current note with default options",
+  "common_back": "Back",
   "confirmModal_title": "Confirmation",
   "confirmModal_cancel": "Cancel",
   "confirmModal_confirm": "Confirm",

src/abstract-modal.ts

@@ -23,6 +23,7 @@
   "ribbon_iconTitle": "发布到 WordPress",
   "command_publish": "发布当前笔记",
   "command_publishWithDefault": "使用默认参数发布当前笔记",
+  "common_back": "返回",
   "confirmModal_title": "需要确认",
   "confirmModal_cancel": "取消",
   "confirmModal_confirm": "确认",

src/i18n/en.json

@@ -1,9 +1,9 @@
 import { Modal, Setting } from 'obsidian';
 import WordpressPlugin from './main';
-import { TranslateKey } from './i18n';
 import { WpProfile } from './wp-profile';
 import { WordPressAuthParams } from './wp-client';
 import { showError } from './utils';
+import { AbstractModal } from './abstract-modal';
 
 export function openLoginModal(
   plugin: WordpressPlugin,
@@ -30,30 +30,26 @@ export function openLoginModal(
 /**
  * WordPress login modal with username and password inputs.
  */
-export class WpLoginModal extends Modal {
+export class WpLoginModal extends AbstractModal {
 
   constructor(
-    private readonly plugin: WordpressPlugin,
+    readonly plugin: WordpressPlugin,
     private readonly profile: WpProfile,
     private readonly onSubmit: (auth: WordPressAuthParams, modal: Modal) => void
   ) {
-    super(plugin.app);
+    super(plugin);
   }
 
   onOpen() {
-    const t = (key: TranslateKey, vars?: Record<string, string>): string => {
-      return this.plugin.i18n.t(key, vars);
-    };
-
     const { contentEl } = this;
 
-    contentEl.createEl('h1', { text: t('loginModal_title') });
+    this.createHeader(this.t('loginModal_title'));
 
     let username = this.profile.username;
     let password = this.profile.password;
     new Setting(contentEl)
-      .setName(t('loginModal_username'))
-      .setDesc(t('loginModal_usernameDesc', { url: this.profile.endpoint }))
+      .setName(this.t('loginModal_username'))
+      .setDesc(this.t('loginModal_usernameDesc', { url: this.profile.endpoint }))
       .addText(text => {
         text
           .setValue(this.profile.username ?? '')
@@ -71,8 +67,8 @@ export class WpLoginModal extends Modal {
         }
       });
     new Setting(contentEl)
-      .setName(t('loginModal_password'))
-      .setDesc(t('loginModal_passwordDesc', { url: this.profile.endpoint }))
+      .setName(this.t('loginModal_password'))
+      .setDesc(this.t('loginModal_passwordDesc', { url: this.profile.endpoint }))
       .addText(text => {
         text
           .setValue(this.profile.password ?? '')
@@ -90,8 +86,8 @@ export class WpLoginModal extends Modal {
         }
       });
     // new Setting(contentEl)
-    //   .setName(t('loginModal_rememberUsername'))
-    //   .setDesc(t('loginModal_rememberUsernameDesc'))
+    //   .setName(this.t('loginModal_rememberUsername'))
+    //   .setDesc(this.t('loginModal_rememberUsernameDesc'))
     //   .addToggle((toggle) =>
     //     toggle
     //       .setValue(this.profile.saveUsername)
@@ -106,8 +102,8 @@ export class WpLoginModal extends Modal {
     //       }),
     //   );
     // new Setting(contentEl)
-    //   .setName(t('loginModal_rememberPassword'))
-    //   .setDesc(t('loginModal_rememberPasswordDesc'))
+    //   .setName(this.t('loginModal_rememberPassword'))
+    //   .setDesc(this.t('loginModal_rememberPasswordDesc'))
     //   .addToggle((toggle) =>
     //     toggle
     //       .setValue(this.profile.savePassword)
@@ -123,13 +119,13 @@ export class WpLoginModal extends Modal {
     //   );
     new Setting(contentEl)
       .addButton(button => button
-        .setButtonText(t('loginModal_loginButtonText'))
+        .setButtonText(this.t('loginModal_loginButtonText'))
         .setCta()
         .onClick(() => {
           if (!username) {
-            showError(t('error_noUsername'));
+            showError(this.t('error_noUsername'));
           } else if (!password) {
-            showError(t('error_noPassword'));
+            showError(this.t('error_noPassword'));
           }
           if (username && password) {
             this.onSubmit({ username, password }, this);

src/i18n/zh-cn.json

@@ -1,8 +1,7 @@
-import { Modal, Setting } from 'obsidian';
 import WordpressPlugin from './main';
 import { WpProfile } from './wp-profile';
-import { TranslateKey } from './i18n';
 import { rendererProfile } from './utils';
+import { AbstractModal } from './abstract-modal';
 
 
 export function openProfileChooserModal(
@@ -19,24 +18,20 @@ export function openProfileChooserModal(
 /**
  * WordPress profiles chooser modal.
  */
-class WpProfileChooserModal extends Modal {
+class WpProfileChooserModal extends AbstractModal {
 
   private readonly profiles: WpProfile[];
 
   constructor(
-    private readonly plugin: WordpressPlugin,
+    readonly plugin: WordpressPlugin,
     private readonly onChoose: (profile: WpProfile) => void
   ) {
-    super(plugin.app);
+    super(plugin);
 
     this.profiles = plugin.settings.profiles;
   }
 
   onOpen() {
-    const t = (key: TranslateKey, vars?: Record<string, string>): string => {
-      return this.plugin.i18n.t(key, vars);
-    };
-
     const chooseProfile = (profile: WpProfile): void => {
       this.onChoose(profile);
       this.close();
@@ -52,12 +47,9 @@ class WpProfileChooserModal extends Modal {
       });
     }
 
-    const { contentEl } = this;
-
-    contentEl.createEl('h1', { text: t('profilesChooserModal_title') });
+    this.createHeader(this.t('profilesChooserModal_title'));
 
-    new Setting(contentEl)
-      .setName(t('profilesChooserModal_pickOne'));
+    const { contentEl } = this;
     const content = contentEl.createEl('div');
     renderProfiles();
   }

src/wp-login-modal.ts

@@ -1,40 +1,36 @@
-import { Modal, Setting } from 'obsidian';
+import { Setting } from 'obsidian';
 import WordpressPlugin from './main';
 import { WpProfile } from './wp-profile';
-import { TranslateKey } from './i18n';
 import { openProfileModal } from './wp-profile-modal';
 import { isNil } from 'lodash-es';
 import { rendererProfile } from './utils';
+import { AbstractModal } from './abstract-modal';
 
 
 /**
  * WordPress profiles manage modal.
  */
-export class WpProfileManageModal extends Modal {
+export class WpProfileManageModal extends AbstractModal {
 
   private readonly profiles: WpProfile[];
 
   constructor(
-    private readonly plugin: WordpressPlugin
+    readonly plugin: WordpressPlugin
   ) {
-    super(plugin.app);
+    super(plugin);
 
     this.profiles = plugin.settings.profiles;
   }
 
   onOpen() {
-    const t = (key: TranslateKey, vars?: Record<string, string>): string => {
-      return this.plugin.i18n.t(key, vars);
-    };
-
     const renderProfiles = (): void => {
       content.empty();
       this.profiles.forEach((profile, index) => {
         const setting = rendererProfile(profile, content);
         if (!profile.isDefault) {
           setting
             .addButton(button => button
-              .setButtonText(t('profilesManageModal_setDefault'))
+              .setButtonText(this.t('profilesManageModal_setDefault'))
               .onClick(() => {
                 this.profiles.forEach(it => it.isDefault = false);
                 profile.isDefault = true;
@@ -43,7 +39,7 @@ export class WpProfileManageModal extends Modal {
               }));
         }
         setting.addButton(button => button
-          .setButtonText(t('profilesManageModal_showDetails'))
+          .setButtonText(this.t('profilesManageModal_showDetails'))
           .onClick(async () => {
             const { profile: newProfile, atIndex } = await openProfileModal(
               this.plugin,
@@ -62,7 +58,7 @@ export class WpProfileManageModal extends Modal {
           }));
         setting.addExtraButton(button => button
           .setIcon('lucide-trash')
-          .setTooltip(t('profilesManageModal_deleteTooltip'))
+          .setTooltip(this.t('profilesManageModal_deleteTooltip'))
           .onClick(() => {
             this.profiles.splice(index, 1);
             if (profile.isDefault) {
@@ -76,15 +72,14 @@ export class WpProfileManageModal extends Modal {
       });
     }
 
-    const { contentEl } = this;
-
-    contentEl.createEl('h1', { text: t('profilesManageModal_title') });
+    this.createHeader(this.t('profilesManageModal_title'));
 
+    const { contentEl } = this;
     new Setting(contentEl)
-      .setName(t('profilesManageModal_create'))
-      .setDesc(t('profilesManageModal_createDesc'))
+      .setName(this.t('profilesManageModal_create'))
+      .setDesc(this.t('profilesManageModal_createDesc'))
       .addButton(button => button
-        .setButtonText(t('profilesManageModal_create'))
+        .setButtonText(this.t('profilesManageModal_create'))
         .setCta()
         .onClick(async () => {
           const { profile } = await openProfileModal(