Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 01:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

♻️ https://github.com/siyuan-note/siyuan/issues/7578

Browse source
This commit is contained in:
Vanessa 2023-03-06 09:23:11 +08:00
parent 877e28570e
commit 1ccebe7079
4 changed files with 56 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/assets/template/mobile/index.tpl
View file

@ -58,6 +58,6 @@
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="message" class="b3-snackbars"></div>
<div id="status" class="status status--hide"></div>
<div id="keyboardToolbar" class="keyboard"></div>
<div id="keyboardToolbar" class="keyboard fn__none"></div>
</body>
</html>

4
app/src/mobile/util/initFramework.ts
View file

@ -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");

101
app/src/mobile/util/keyboardToolbar.ts
View file

@ -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;
}

4
app/src/mobile/util/menu.ts
View file

@ -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");