From fa571a4e6f7298fe1bc98529ee2430e195626993 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Thu, 22 Dec 2022 16:49:20 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/6710 --- app/src/assets/scss/_dialog.scss | 9 +++ app/src/card/openCard.ts | 113 ++++++++++++++++++------------- app/src/util/globalShortcut.ts | 6 +- 3 files changed, 79 insertions(+), 49 deletions(-) diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/_dialog.scss index 418e0af3e..73ebc36ed 100644 --- a/app/src/assets/scss/_dialog.scss +++ b/app/src/assets/scss/_dialog.scss @@ -110,4 +110,13 @@ padding: 8px 0; overflow: auto; } + + &__card { + display: flex; + justify-content: center; + flex-direction: column; + flex: 1; + text-align: center; + color: var(--b3-theme-on-surface); + } } diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts index 21e5be9a4..e7692c15d 100644 --- a/app/src/card/openCard.ts +++ b/app/src/card/openCard.ts @@ -4,6 +4,7 @@ import {isMobile} from "../util/functions"; import {Protyle} from "../protyle"; import {Constants} from "../constants"; import {disabledProtyle, onGet} from "../protyle/util/onGet"; +import {hasClosestByClassName} from "../protyle/util/hasClosest"; export const openCard = () => { let decksHTML = ''; @@ -17,21 +18,19 @@ export const openCard = () => { let index = 0 if (blocks.length > 0) { countHTML = `1/${blocks.length}` - } else { - countHTML = window.siyuan.languages.noDueCard } const dialog = new Dialog({ title: window.siyuan.languages.riffCard, content: `
- -
- ${countHTML} -
+
${countHTML}
-
-
+
+
+
${window.siyuan.languages.noDueCard}
+
+
@@ -44,6 +43,7 @@ export const openCard = () => { width: isMobile() ? "80vw" : "50vw", height: "70vh", }) + dialog.element.querySelector("input").focus(); const editor = new Protyle(dialog.element.querySelector("[data-type='render']") as HTMLElement, { blockId: "", action: [Constants.CB_GET_HISTORY], @@ -58,60 +58,81 @@ export const openCard = () => { typewriterMode: false }); disabledProtyle(editor.protyle); - fetchPost("/api/riff/renderRiffCard", {id: blocks[index]}, (response) => { - onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); - }); + if (blocks.length > 0) { + fetchPost("/api/riff/renderRiffCard", {blockID: blocks[index].blockID}, (response) => { + onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); + }); + } dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.riffCard.custom) const countElement = dialog.element.querySelector('[data-type="count"]') + const actionElement = dialog.element.querySelector('[data-type="action"]') const selectElement = dialog.element.querySelector("select") selectElement.addEventListener("change", (event) => { fetchPost("/api/riff/getRiffDueCards", {deckID: selectElement.value}, (cardsChangeResponse) => { blocks = cardsChangeResponse.data; index = 0 - let countHTML = '' if (blocks.length > 0) { - countHTML = `1/${blocks.length}` + countElement.innerHTML = `1/${blocks.length}` + countElement.classList.remove("fn__none") + editor.protyle.element.classList.remove("fn__none") + editor.protyle.element.nextElementSibling.classList.add("fn__none") + actionElement.classList.remove("fn__none") + fetchPost("/api/riff/renderRiffCard", {blockID: blocks[index].blockID}, (response) => { + onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); + }); } else { - countHTML = window.siyuan.languages.noDueCard + countElement.classList.add("fn__none") + editor.protyle.element.classList.add("fn__none") + editor.protyle.element.nextElementSibling.classList.remove("fn__none") + actionElement.classList.add("fn__none") } - countElement.innerHTML = countHTML; - fetchPost("/api/riff/renderRiffCard", {id: blocks[index]}, (response) => { - onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); - }); }) }) dialog.element.addEventListener("click", (event) => { - let target = event.target as HTMLElement; - while (target && !target.isSameNode(dialog.element)) { - const type = target.getAttribute("data-type"); - if (["0", "1", "2", "3"].includes(type)) { - fetchPost("/api/riff/reviewRiffCard", { - deckID: selectElement.value, - blockID: blocks[index], - rating: parseInt(type) - }, (response) => { - index++ - if (index > blocks.length - 1) { - countElement.innerHTML = window.siyuan.languages.noDueCard - editor.protyle.element.classList.add("fn__none") - return; - } - countElement.firstElementChild.innerHTML = index.toString() - fetchPost("/api/riff/renderRiffCard", {id: blocks[index]}, (response) => { - onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); - }); - }) - event.preventDefault(); - event.stopPropagation(); - break; + let type = "" + if (typeof event.detail === "string") { + if (event.detail === "a") { + type = "0" + } else if (event.detail === "h") { + type = "1" + } else if (event.detail === "g") { + type = "2" + } else if (event.detail === "e") { + type = "3" } - target = target.parentElement; + } + if (!type) { + const buttonElement = hasClosestByClassName(event.target as HTMLElement, "b3-button") + if (buttonElement) { + type = buttonElement.getAttribute("data-type"); + } + } + if (!type) { + return; + } + if (["0", "1", "2", "3"].includes(type)) { + fetchPost("/api/riff/reviewRiffCard", { + deckID: blocks[index].deckID, + blockID: blocks[index].blockID, + rating: parseInt(type) + }, () => { + index++ + if (index > blocks.length - 1) { + countElement.classList.add("fn__none") + editor.protyle.element.classList.add("fn__none") + editor.protyle.element.nextElementSibling.classList.remove("fn__none") + actionElement.classList.add("fn__none") + return; + } + countElement.firstElementChild.innerHTML = (index + 1).toString() + fetchPost("/api/riff/renderRiffCard", {blockID: blocks[index].blockID}, (response) => { + onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); + }); + }) + event.preventDefault(); + event.stopPropagation(); } }) }) }) } - -export const matchCardKey = (event: KeyboardEvent) => { - -} diff --git a/app/src/util/globalShortcut.ts b/app/src/util/globalShortcut.ts index 2b4720f45..b2935ec20 100644 --- a/app/src/util/globalShortcut.ts +++ b/app/src/util/globalShortcut.ts @@ -43,7 +43,7 @@ import {editor} from "../config/editor"; import {hintMoveBlock} from "../protyle/hint/extend"; import {Backlink} from "../layout/dock/Backlink"; import {openHistory} from "../history/history"; -import {matchCardKey, openCard} from "../card/openCard"; +import {openCard} from "../card/openCard"; const getRightBlock = (element: HTMLElement, x: number, y: number) => { let index = 1; @@ -343,7 +343,7 @@ export const globalShortcut = () => { return; } - if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && event.key === "s") { + if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && ["a", "h", "g", "e"].includes(event.key.toLowerCase())) { const openCardDialog = window.siyuan.dialogs.find(item => { if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.riffCard.custom) { return true; @@ -351,7 +351,7 @@ export const globalShortcut = () => { }); if (openCardDialog) { event.preventDefault(); - matchCardKey(event); + openCardDialog.element.dispatchEvent(new CustomEvent("click", {detail: event.key.toLowerCase()})); return; } }