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

🎨 https://github.com/siyuan-note/siyuan/issues/8061

Browse source
This commit is contained in:
Vanessa 2023-04-28 10:30:27 +08:00
parent 9edcd3f3a7
commit 9cb6e9ec25
10 changed files with 198 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

173
app/src/card/openCard.ts
View file

@ -33,8 +33,8 @@ export const genCardHTML = (options: {
<svg><use xlink:href="#iconCloseRound"></use></svg>
</div>` : `<div data-type="fullscreen" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show" aria-label="${window.siyuan.languages.fullscreen}">
<svg><use xlink:href="#iconFullscreen"></use></svg>
</div><div class="fn__space"></div>
<div data-type="sticktab" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show" aria-label="${window.siyuan.languages.openInNewTab}">
</div><div class="fn__space${options.isTab ? " fn__none" : ""}"></div>
<div data-type="sticktab" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show${options.isTab ? " fn__none" : ""}" aria-label="${window.siyuan.languages.openInNewTab}">
<svg><use xlink:href="#iconLayoutRight"></use></svg>
</div>`}
</div>
@ -54,35 +54,35 @@ export const genCardHTML = (options: {
<div class="fn__flex card__action fn__none">
<div>
<span>${window.siyuan.languages.nextRound}</span>
<button data-type="-3" aria-label="0" class="b3-button b3-button--cancel b3-tooltips__s b3-tooltips">
<button data-type="-3" aria-label="0" class="b3-button b3-button--cancel b3-tooltips__n b3-tooltips">
<div>💤</div>
${window.siyuan.languages.skip} (0)
</button>
</div>
<div>
<span></span>
<button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__s b3-tooltips">
<button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__n b3-tooltips">
<div>🙈</div>
${window.siyuan.languages.cardRatingAgain} (1)
</button>
</div>
<div>
<span></span>
<button data-type="1" aria-label="2 / k" class="b3-button b3-button--warning b3-tooltips__s b3-tooltips">
<button data-type="1" aria-label="2 / k" class="b3-button b3-button--warning b3-tooltips__n b3-tooltips">
<div>😬</div>
${window.siyuan.languages.cardRatingHard} (2)
</button>
</div>
<div>
<span></span>
<button data-type="2" aria-label="3 / l" class="b3-button b3-button--info b3-tooltips__s b3-tooltips">
<button data-type="2" aria-label="3 / l" class="b3-button b3-button--info b3-tooltips__n b3-tooltips">
<div>😊</div>
${window.siyuan.languages.cardRatingGood} (3)
</button>
</div>
<div>
<span></span>
<button data-type="3" aria-label="4 / ;" class="b3-button b3-button--success b3-tooltips__s b3-tooltips">
<button data-type="3" aria-label="4 / ;" class="b3-button b3-button--success b3-tooltips__n b3-tooltips">
<div>🌈</div>
${window.siyuan.languages.cardRatingEasy} (4)
</button>
@ -91,44 +91,16 @@ export const genCardHTML = (options: {
</div>`;
};
export const openCard = () => {
fetchPost("/api/riff/getRiffDueCards", {deckID: ""}, (cardsResponse) => {
openCardByData(cardsResponse.data, "all");
});
};
export const openCardByData = (cardsData: {
cards: ICard[],
unreviewedCount: number
}, cardType: TCardType, id?: string, title?: string) => {
const exit = window.siyuan.dialogs.find(item => {
if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.riffCard.custom) {
item.destroy();
return true;
}
});
if (exit) {
return;
}
let blocks = cardsData.cards;
export const bindCardEvent = (options: {
element: Element,
title?: string,
blocks: ICard[],
cardType: TCardType,
id?: string,
dialog: Dialog,
}) => {
let index = 0;
const dialog = new Dialog({
content: genCardHTML({id, cardType, blocks, isTab: false}),
width: isMobile() ? "100vw" : "80vw",
height: isMobile() ? "100vh" : "70vh",
destroyCallback() {
if (editor) {
editor.destroy();
if (window.siyuan.mobile) {
window.siyuan.mobile.popEditor = null;
}
}
}
});
(dialog.element.querySelector(".b3-dialog__scrim") as HTMLElement).style.backgroundColor = "var(--b3-theme-background)";
(dialog.element.querySelector(".b3-dialog__container") as HTMLElement).style.maxWidth = "1024px";
const editor = new Protyle(dialog.element.querySelector("[data-type='render']") as HTMLElement, {
const editor = new Protyle(options.element.querySelector("[data-type='render']") as HTMLElement, {
blockId: "",
action: [Constants.CB_GET_ALL],
render: {
@ -145,20 +117,20 @@ export const openCardByData = (cardsData: {
if (window.siyuan.config.editor.readOnly) {
disabledProtyle(editor.protyle);
}
if (blocks.length > 0) {
if (options.blocks.length > 0) {
fetchPost("/api/filetree/getDoc", {
id: blocks[index].blockID,
id: options.blocks[index].blockID,
mode: 0,
size: Constants.SIZE_GET_MAX
}, (response) => {
onGet(response, editor.protyle, [Constants.CB_GET_ALL, Constants.CB_GET_HTML]);
});
}
(dialog.element.firstElementChild as HTMLElement).style.zIndex = "200";
dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.riffCard.custom);
const countElement = dialog.element.querySelector('[data-type="count"]');
const actionElements = dialog.element.querySelectorAll(".card__action");
const filterElement = dialog.element.querySelector('[data-type="filter"]');
(options.element.firstElementChild as HTMLElement).style.zIndex = "200";
options.element.setAttribute("data-key", window.siyuan.config.keymap.general.riffCard.custom);
const countElement = options.element.querySelector('[data-type="count"]');
const actionElements = options.element.querySelectorAll(".card__action");
const filterElement = options.element.querySelector('[data-type="filter"]');
const fetchNewRound = () => {
const currentCardType = filterElement.getAttribute("data-cardtype");
fetchPost(currentCardType === "all" ? "/api/riff/getRiffDueCards" :
@ -168,14 +140,14 @@ export const openCardByData = (cardsData: {
notebook: filterElement.getAttribute("data-id"),
}, (treeCards) => {
index = 0;
blocks = treeCards.data.cards;
if (blocks.length > 0) {
options.blocks = treeCards.data.cards;
if (options.blocks.length > 0) {
nextCard({
countElement,
editor,
actionElements,
index,
blocks
blocks: options.blocks
});
} else {
allDone(countElement, editor, actionElements);
@ -183,7 +155,7 @@ export const openCardByData = (cardsData: {
});
};
dialog.element.addEventListener("click", (event) => {
options.element.addEventListener("click", (event: MouseEvent) => {
const target = event.target as HTMLElement;
let type = "";
if (typeof event.detail === "string") {
@ -205,8 +177,8 @@ export const openCardByData = (cardsData: {
} else {
const fullscreenElement = hasClosestByAttribute(target, "data-type", "fullscreen");
if (fullscreenElement) {
fullscreen(dialog.element.querySelector(".card__main"),
dialog.element.querySelector('[data-type="fullscreen"]'));
fullscreen(options.element.querySelector(".card__main"),
options.element.querySelector('[data-type="fullscreen"]'));
event.stopPropagation();
event.preventDefault();
return;
@ -214,9 +186,10 @@ export const openCardByData = (cardsData: {
const sticktabElement = hasClosestByAttribute(target, "data-type", "sticktab");
if (sticktabElement) {
newCardTab({
type: filterElement.getAttribute("data-cardtype") as TCardType,
cardType: filterElement.getAttribute("data-cardtype") as TCardType,
id: filterElement.getAttribute("data-id"),
dialog,
dialog: options.dialog,
title: options.title
});
event.stopPropagation();
event.preventDefault();
@ -224,7 +197,7 @@ export const openCardByData = (cardsData: {
}
const closeElement = hasClosestByAttribute(target, "data-type", "close");
if (closeElement) {
dialog.destroy();
options.dialog.destroy();
event.stopPropagation();
event.preventDefault();
return;
@ -253,16 +226,16 @@ export const openCardByData = (cardsData: {
}, [], undefined, window.siyuan.languages.specifyPath, true);
}
}).element);
if (title || response.data.length > 0) {
if (options.title || response.data.length > 0) {
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
}
if (title) {
if (options.title) {
window.siyuan.menus.menu.append(new MenuItem({
iconHTML: Constants.ZWSP,
label: escapeHtml(title),
label: escapeHtml(options.title),
click() {
filterElement.setAttribute("data-id", id);
filterElement.setAttribute("data-cardtype", cardType);
filterElement.setAttribute("data-id", options.id);
filterElement.setAttribute("data-cardtype", options.cardType);
fetchNewRound();
},
}).element);
@ -301,7 +274,7 @@ export const openCardByData = (cardsData: {
type = buttonElement.getAttribute("data-type");
}
}
if (!type || !blocks[index]) {
if (!type || !options.blocks[index]) {
return;
}
event.preventDefault();
@ -315,7 +288,7 @@ export const openCardByData = (cardsData: {
actionElements[0].classList.add("fn__none");
actionElements[1].querySelectorAll(".b3-button").forEach((element, btnIndex) => {
if (btnIndex !== 0) {
element.previousElementSibling.textContent = blocks[index].nextDues[btnIndex - 1];
element.previousElementSibling.textContent = options.blocks[index].nextDues[btnIndex - 1];
}
});
actionElements[1].classList.remove("fn__none");
@ -332,17 +305,17 @@ export const openCardByData = (cardsData: {
editor,
actionElements,
index,
blocks
blocks: options.blocks
});
}
return;
}
if (["0", "1", "2", "3", "-3"].includes(type) && actionElements[0].classList.contains("fn__none")) {
fetchPost(type === "-3" ? "/api/riff/skipReviewRiffCard" : "/api/riff/reviewRiffCard", {
deckID: blocks[index].deckID,
cardID: blocks[index].cardID,
deckID: options.blocks[index].deckID,
cardID: options.blocks[index].cardID,
rating: parseInt(type),
reviewedCards: blocks
reviewedCards: options.blocks
}, () => {
/// #if MOBILE
if (type !== "-3" &&
@ -352,18 +325,18 @@ export const openCardByData = (cardsData: {
}
/// #endif
index++;
if (index > blocks.length - 1) {
if (index > options.blocks.length - 1) {
const currentCardType = filterElement.getAttribute("data-cardtype");
fetchPost(currentCardType === "all" ? "/api/riff/getRiffDueCards" :
(currentCardType === "doc" ? "/api/riff/getTreeRiffDueCards" : "/api/riff/getNotebookRiffDueCards"), {
rootID: filterElement.getAttribute("data-id"),
deckID: filterElement.getAttribute("data-id"),
notebook: filterElement.getAttribute("data-id"),
reviewedCards: blocks
reviewedCards: options.blocks
}, (result) => {
index = 0;
blocks = result.data.cards;
if (blocks.length === 0) {
options.blocks = result.data.cards;
if (options.blocks.length === 0) {
if (result.data.unreviewedCount > 0) {
newRound(countElement, editor, actionElements, result.data.unreviewedCount);
} else {
@ -375,7 +348,7 @@ export const openCardByData = (cardsData: {
editor,
actionElements,
index,
blocks
blocks: options.blocks
});
}
});
@ -386,11 +359,57 @@ export const openCardByData = (cardsData: {
editor,
actionElements,
index,
blocks
blocks: options.blocks
});
});
}
});
return editor;
};
export const openCard = () => {
fetchPost("/api/riff/getRiffDueCards", {deckID: ""}, (cardsResponse) => {
openCardByData(cardsResponse.data, "all");
});
};
export const openCardByData = (cardsData: {
cards: ICard[],
unreviewedCount: number
}, cardType: TCardType, id?: string, title?: string) => {
const exit = window.siyuan.dialogs.find(item => {
if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.riffCard.custom) {
item.destroy();
return true;
}
});
if (exit) {
return;
}
const dialog = new Dialog({
content: genCardHTML({id, cardType, blocks: cardsData.cards, isTab: false}),
width: isMobile() ? "100vw" : "80vw",
height: isMobile() ? "100vh" : "70vh",
destroyCallback() {
if (editor) {
editor.destroy();
if (window.siyuan.mobile) {
window.siyuan.mobile.popEditor = null;
}
}
}
});
(dialog.element.querySelector(".b3-dialog__scrim") as HTMLElement).style.backgroundColor = "var(--b3-theme-background)";
(dialog.element.querySelector(".b3-dialog__container") as HTMLElement).style.maxWidth = "1024px";
const editor = bindCardEvent({
element: dialog.element,
blocks: cardsData.cards,
title,
id,
cardType,
dialog
});
};
const nextCard = (options: {