diff --git a/app/src/assets/template/mobile/index.tpl b/app/src/assets/template/mobile/index.tpl index 0687d4641..23cd91660 100644 --- a/app/src/assets/template/mobile/index.tpl +++ b/app/src/assets/template/mobile/index.tpl @@ -58,6 +58,6 @@
-
+
diff --git a/app/src/mobile/util/initFramework.ts b/app/src/mobile/util/initFramework.ts index 6e5cd7fb0..0fffc3395 100644 --- a/app/src/mobile/util/initFramework.ts +++ b/app/src/mobile/util/initFramework.ts @@ -16,7 +16,7 @@ import {hasTopClosestByTag} from "../../protyle/util/hasClosest"; import {MobileBacklinks} from "./MobileBacklinks"; import {MobileBookmarks} from "./MobileBookmarks"; import {MobileTags} from "./MobileTags"; -import {hideKeyboard, hideKeyboardToolbar, initKeyboardToolbar} from "./keyboardToolbar"; +import {activeBlur, hideKeyboardToolbar, initKeyboardToolbar} from "./keyboardToolbar"; import {getSearch} from "../../util/functions"; import {syncGuide} from "../../sync/syncGuide"; @@ -77,7 +77,7 @@ export const initFramework = () => { window.siyuan.mobile.files = new MobileFiles(); document.getElementById("toolbarFile").addEventListener("click", () => { hideKeyboardToolbar(); - hideKeyboard(); + activeBlur(); sidebarElement.style.left = "0"; document.querySelector(".scrim").classList.remove("fn__none"); const type = sidebarElement.querySelector(".toolbar--border .toolbar__icon--active").getAttribute("data-type"); diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts index cfaa568c7..f22a2b840 100644 --- a/app/src/mobile/util/keyboardToolbar.ts +++ b/app/src/mobile/util/keyboardToolbar.ts @@ -6,39 +6,22 @@ import {focusByRange, getSelectionPosition} from "../../protyle/util/selection"; import {removeBlock} from "../../protyle/wysiwyg/remove"; import {hintSlash} from "../../protyle/hint/extend"; -export const showKeyboardToolbar = (height: number) => { - if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) { - return; - } - const toolbarElement = document.getElementById("keyboardToolbar"); - toolbarElement.setAttribute("data-keyboardheight", height.toString()) - hideKeyboardToolbarUtil(); - if (!toolbarElement.classList.contains("fn__none")) { - return; - } - toolbarElement.classList.remove("fn__none"); - const range = getSelection().getRangeAt(0); - if (!window.siyuan.mobile.editor || - !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) { - return; - } - setTimeout(() => { - const contentElement = window.siyuan.mobile.editor.protyle.contentElement; - const cursorTop = getSelectionPosition(contentElement).top - contentElement.getBoundingClientRect().top; - if (cursorTop < window.innerHeight - 96) { - return; - } - contentElement.scroll({ - top: contentElement.scrollTop + cursorTop - ((window.outerHeight - 65) / 2 - 30), - left: contentElement.scrollLeft, - behavior: "smooth" - }); - }, Constants.TIMEOUT_TRANSITION); -}; - let renderKeyboardToolbarTimeout: number; let showKeyboardToolbarUtil = false; -export const renderKeyboardToolbar = () => { + +const renderKeyboardToolbarUtil = () => { + const toolbarElement = document.getElementById("keyboardToolbar"); + const keyboardHeight = (parseInt(toolbarElement.getAttribute("data-keyboardheight")) + 42) + "px" + toolbarElement.style.height = keyboardHeight + window.siyuan.mobile.editor.protyle.element.style.marginBottom = keyboardHeight + window.siyuan.menus.menu.remove(); + showKeyboardToolbarUtil = true; + setTimeout(() => { + showKeyboardToolbarUtil = false + }, 1000) +} + +const renderKeyboardToolbar = () => { clearTimeout(renderKeyboardToolbarTimeout); renderKeyboardToolbarTimeout = window.setTimeout(() => { if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) { @@ -91,6 +74,41 @@ export const renderKeyboardToolbar = () => { }, 620); // 需等待 range 更新 }; +const hideKeyboardToolbarUtil = () => { + document.getElementById("keyboardToolbar").style.height = "" + window.siyuan.mobile.editor.protyle.element.style.marginBottom = "" +} + +export const showKeyboardToolbar = (height: number) => { + if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) { + return; + } + const toolbarElement = document.getElementById("keyboardToolbar"); + toolbarElement.setAttribute("data-keyboardheight", height.toString()) + hideKeyboardToolbarUtil(); + if (!toolbarElement.classList.contains("fn__none")) { + return; + } + toolbarElement.classList.remove("fn__none"); + const range = getSelection().getRangeAt(0); + if (!window.siyuan.mobile.editor || + !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) { + return; + } + setTimeout(() => { + const contentElement = window.siyuan.mobile.editor.protyle.contentElement; + const cursorTop = getSelectionPosition(contentElement).top - contentElement.getBoundingClientRect().top; + if (cursorTop < window.innerHeight - 96) { + return; + } + contentElement.scroll({ + top: contentElement.scrollTop + cursorTop - ((window.outerHeight - 65) / 2 - 30), + left: contentElement.scrollLeft, + behavior: "smooth" + }); + }, Constants.TIMEOUT_TRANSITION); +}; + export const hideKeyboardToolbar = () => { if (showKeyboardToolbarUtil) { return; @@ -99,27 +117,10 @@ export const hideKeyboardToolbar = () => { toolbarElement.classList.add("fn__none"); }; -export const hideKeyboard = () => { +export const activeBlur = () => { (document.activeElement as HTMLElement).blur(); }; -const renderKeyboardToolbarUtil = () => { - const toolbarElement = document.getElementById("keyboardToolbar"); - const keyboardHeight = (parseInt(toolbarElement.getAttribute("data-keyboardheight")) + 42) + "px" - toolbarElement.style.height = keyboardHeight - window.siyuan.mobile.editor.protyle.element.style.marginBottom = keyboardHeight - window.siyuan.menus.menu.remove(); - showKeyboardToolbarUtil = true; - setTimeout(() => { - showKeyboardToolbarUtil = false - }, 1000) -} - -const hideKeyboardToolbarUtil = () => { - document.getElementById("keyboardToolbar").style.height = "" - window.siyuan.mobile.editor.protyle.element.style.marginBottom = "" -} - export const initKeyboardToolbar = () => { document.addEventListener("selectionchange", () => { renderKeyboardToolbar(); @@ -179,7 +180,7 @@ export const initKeyboardToolbar = () => { event.stopPropagation(); const type = buttonElement.getAttribute("data-type"); if (type === "done") { - hideKeyboard(); + activeBlur(); hideKeyboardToolbar(); return; } diff --git a/app/src/mobile/util/menu.ts b/app/src/mobile/util/menu.ts index c728a382b..120cf4d5a 100644 --- a/app/src/mobile/util/menu.ts +++ b/app/src/mobile/util/menu.ts @@ -16,7 +16,7 @@ import {Dialog} from "../../dialog"; import {syncGuide} from "../../sync/syncGuide"; import {openCard} from "../../card/openCard"; import {pathPosix} from "../../util/pathName"; -import {hideKeyboard, hideKeyboardToolbar} from "./keyboardToolbar"; +import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar"; const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) => { closePanel(); @@ -115,7 +115,7 @@ const genWorkspace = (workspaceDirElement: Element) => { }); }; export const popMenu = () => { - hideKeyboard(); + activeBlur(); hideKeyboardToolbar(); const modelElement = document.getElementById("model"); const modelMainElement = document.getElementById("modelMain");