From 7598fc983c8b1a1f3af6cd01923f3361514507a8 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 11 Dec 2022 00:20:46 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/3293 --- app/src/assets/scss/_dialog.scss | 2 +- app/src/util/globalShortcut.ts | 176 +++++++++++++++++++++++-------- 2 files changed, 135 insertions(+), 43 deletions(-) diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/_dialog.scss index f8ee3440f..2903d2dce 100644 --- a/app/src/assets/scss/_dialog.scss +++ b/app/src/assets/scss/_dialog.scss @@ -84,7 +84,7 @@ &--switch { max-height: 70vh; - max-width: 520px; + width: 520px; .b3-list:last-child { border-left: 1px solid var(--b3-theme-surface-lighter); diff --git a/app/src/util/globalShortcut.ts b/app/src/util/globalShortcut.ts index 242672381..e1fe2e8c6 100644 --- a/app/src/util/globalShortcut.ts +++ b/app/src/util/globalShortcut.ts @@ -374,44 +374,7 @@ export const globalShortcut = () => { } if (switchDialog && event.ctrlKey && !event.metaKey && event.key.startsWith("Arrow")) { - let currentLiElement = switchDialog.element.querySelector(".b3-list-item--focus"); - if (currentLiElement) { - currentLiElement.classList.remove("b3-list-item--focus"); - if (event.key === "ArrowUp") { - if (currentLiElement.previousElementSibling) { - currentLiElement.previousElementSibling.classList.add("b3-list-item--focus"); - } else { - currentLiElement.parentElement.lastElementChild.classList.add("b3-list-item--focus"); - } - } else if (event.key === "ArrowDown") { - if (currentLiElement.nextElementSibling) { - currentLiElement.nextElementSibling.classList.add("b3-list-item--focus"); - } else { - currentLiElement.parentElement.firstElementChild.classList.add("b3-list-item--focus"); - } - } else { - const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling; - (sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild).classList.add("b3-list-item--focus"); - } - currentLiElement = switchDialog.element.querySelector(".b3-list-item--focus") - const rootId = currentLiElement.getAttribute("data-node-id"); - if (rootId) { - fetchPost("/api/filetree/getFullHPathByID", { - id: rootId - }, (response) => { - currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = escapeHtml(response.data); - }); - } else { - currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML; - } - const currentRect = currentLiElement.getBoundingClientRect(); - const currentParentRect = currentLiElement.parentElement.getBoundingClientRect(); - if (currentRect.top < currentParentRect.top) { - currentLiElement.scrollIntoView(true); - } else if (currentRect.bottom > currentParentRect.bottom) { - currentLiElement.scrollIntoView(false); - } - } + dialogArrow(switchDialog.element, event); return; } if (event.ctrlKey && !event.metaKey && event.key === "Tab") { @@ -458,7 +421,7 @@ export const globalShortcut = () => {
- +
`, @@ -484,13 +447,31 @@ export const globalShortcut = () => { return; } + if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && + (event.key.startsWith("Arrow") || event.key === "Enter")) { + const openRecentDocsDialog = window.siyuan.dialogs.find(item => { + if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.recentDocs.custom) { + return true; + } + }) + if (openRecentDocsDialog) { + event.preventDefault(); + dialogArrow(openRecentDocsDialog.element, event); + return; + } + } if (matchHotKey(window.siyuan.config.keymap.general.recentDocs.custom, event)) { - event.preventDefault(); - if (window.siyuan.dialogs.length > 0) { + const openRecentDocsDialog = window.siyuan.dialogs.find(item => { + if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.recentDocs.custom) { + return true; + } + }) + if (openRecentDocsDialog) { hideElements(["dialog"]); return; } - + openRecentDocs(); + event.preventDefault(); return; } @@ -788,6 +769,117 @@ export const globalShortcut = () => { }); }; +const dialogArrow = (element: HTMLElement, event: KeyboardEvent) => { + let currentLiElement = element.querySelector(".b3-list-item--focus"); + if (currentLiElement) { + currentLiElement.classList.remove("b3-list-item--focus"); + if (event.key === "ArrowUp") { + if (currentLiElement.previousElementSibling) { + currentLiElement.previousElementSibling.classList.add("b3-list-item--focus"); + } else { + currentLiElement.parentElement.lastElementChild.classList.add("b3-list-item--focus"); + } + } else if (event.key === "ArrowDown") { + if (currentLiElement.nextElementSibling) { + currentLiElement.nextElementSibling.classList.add("b3-list-item--focus"); + } else { + currentLiElement.parentElement.firstElementChild.classList.add("b3-list-item--focus"); + } + } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") { + const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling; + (sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild).classList.add("b3-list-item--focus"); + } else if (event.key === "Enter") { + const currentType = currentLiElement.getAttribute("data-type") as TDockType; + if (currentType) { + getDockByType(currentType).toggleModel(currentType, true); + } else { + let actionString = currentLiElement.getAttribute("data-action") + if (actionString.indexOf(Constants.CB_GET_SCROLL) === -1) { + actionString = actionString ? (actionString + "," + Constants.CB_GET_SCROLL) : Constants.CB_GET_SCROLL + } + openFileById({ + id: currentLiElement.getAttribute("data-block-id") || currentLiElement.getAttribute("data-node-id"), + mode: currentLiElement.getAttribute("data-mode") as TEditorMode, + action: actionString.split(",") + }) + } + hideElements(["dialog"]) + return; + } + currentLiElement = element.querySelector(".b3-list-item--focus") + const rootId = currentLiElement.getAttribute("data-node-id"); + if (rootId) { + fetchPost("/api/filetree/getFullHPathByID", { + id: rootId + }, (response) => { + currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = escapeHtml(response.data); + }); + } else { + currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML; + } + const currentRect = currentLiElement.getBoundingClientRect(); + const currentParentRect = currentLiElement.parentElement.getBoundingClientRect(); + if (currentRect.top < currentParentRect.top) { + currentLiElement.scrollIntoView(true); + } else if (currentRect.bottom > currentParentRect.bottom) { + currentLiElement.scrollIntoView(false); + } + } +} + +const openRecentDocs = () => { + fetchPost("/api/storage/getRecentDocs", {}, (response) => { + let range: Range + if (getSelection().rangeCount > 0) { + range = getSelection().getRangeAt(0) + } + let tabHtml = "" + response.data.forEach((item: any, index: number) => { + tabHtml += `
  • +${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__graphic", true)} +${escapeHtml(item.title)} +
    • `; + }); + let dockHtml = ""; + getAllDocks().forEach((item, index) => { + dockHtml += `
  • + + ${window.siyuan.languages[item.hotkeyLangId]} + ${updateHotkeyTip(window.siyuan.config.keymap.general[item.hotkeyLangId].custom)} +
    • `; + }); + const dialog = new Dialog({ + content: `
    +
    +
    +
      ${dockHtml}
    +
      ${tabHtml}
    +
    +
    +
    `, + destroyCallback: () => { + if (range && range.getBoundingClientRect().height !== 0) { + focusByRange(range); + } + } + }); + if (response.data.length > 0) { + fetchPost("/api/filetree/getFullHPathByID", { + id: response.data[0].rootID + }, (response) => { + dialog.element.querySelector(".dialog__path").innerHTML = escapeHtml(response.data); + }); + } else { + dialog.element.querySelector(".dialog__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent; + } + dialog.element.querySelector("input").focus(); + dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.recentDocs.custom) + dialog.element.addEventListener("click", (event) => { + window.dispatchEvent(new KeyboardEvent("keydown", {key: "Enter"})) + }); + }) +} + const editKeydown = (event: KeyboardEvent) => { const activeTabElement = document.querySelector(".layout__wnd--active .item--focus"); let protyle: IProtyle;