diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/_dialog.scss index 9eaab2551..165132a46 100644 --- a/app/src/assets/scss/_dialog.scss +++ b/app/src/assets/scss/_dialog.scss @@ -135,7 +135,7 @@ } &--hide { - .sb > div:nth-of-type(n+2):not(.protyle-attr) { + .protyle-wysiwyg > .sb > div:nth-of-type(n+2):not(.protyle-attr) { display: none; } diff --git a/app/src/card/makeCard.ts b/app/src/card/makeCard.ts index 7bce9a53e..094500956 100644 --- a/app/src/card/makeCard.ts +++ b/app/src/card/makeCard.ts @@ -4,11 +4,19 @@ import {Dialog} from "../dialog"; import {isMobile} from "../util/functions"; import {hideMessage, showMessage} from "../dialog/message"; import {confirmDialog} from "../dialog/confirmDialog"; +import {Protyle} from "../protyle"; +import {getIconByType} from "../editor/getIcon"; +import {unicode2Emoji} from "../emoji"; +import {Constants} from "../constants"; +import {onGet} from "../protyle/util/onGet"; +import {addLoading} from "../protyle/ui/initUI"; +import {escapeHtml} from "../util/escape"; +import {getDisplayName, getNotebookName} from "../util/pathName"; const genCardItem = (item: ICard) => { return `
  • ${item.name} -${item.size} +${item.size} @@ -21,8 +29,11 @@ const genCardItem = (item: ICard) => { -${item.size} -${item.updated} + + + +${item.size} +${item.updated}
    • `; }; @@ -112,6 +123,11 @@ export const makeCard = (nodeElement: Element[]) => { event.stopPropagation(); event.preventDefault(); break; + } else if (type === "view") { + viewCards(target.parentElement.getAttribute("data-id"), target.parentElement.querySelector(".b3-list-item__text").textContent) + event.stopPropagation(); + event.preventDefault(); + break; } else if (type === "rename") { const renameDialog = new Dialog({ title: window.siyuan.languages.rename, @@ -151,3 +167,161 @@ export const makeCard = (nodeElement: Element[]) => { }); }); }; + +const viewCards = (deckID: string, title: string) => { + let pageIndex = 1; + fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (response) => { + const dialog = new Dialog({ + title, + content: `
    +
    +
    + + + + + + ${pageIndex}/${response.data.pageCount} +
    +
    +
    +
    + +
    +
    +
    `, + width: "80vw", + height: "80vh", + destroyCallback() { + edit.destroy() + } + }); + if (response.data.blocks.length === 0) { + return; + } + const edit = new Protyle(dialog.element.querySelector("#cardPreview") as HTMLElement, { + blockId: "", + render: { + gutter: true, + breadcrumbDocName: true + }, + }); + getArticle(edit, dialog.element.querySelector(".b3-list-item--focus").getAttribute("data-id")) + const previousElement = dialog.element.querySelector('[data-type="previous"]'); + const nextElement = dialog.element.querySelector('[data-type="next"]'); + const listElement = dialog.element.querySelector(".b3-list--background") + if (response.data.pageCount > 1) { + nextElement.removeAttribute("disabled"); + } + dialog.element.addEventListener("click", (event) => { + let target = event.target as HTMLElement; + while (target && !dialog.element.isSameNode(target)) { + const type = target.getAttribute("data-type") + if (type === "previous") { + pageIndex--; + if (pageIndex <= 1) { + previousElement.setAttribute("disabled", "disabled"); + } + fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (cardsResponse) => { + if (pageIndex === cardsResponse.data.pageCount) { + nextElement.setAttribute("disabled", "disabled"); + } else if (cardsResponse.data.pageCount > 1) { + nextElement.removeAttribute("disabled"); + } + nextElement.nextElementSibling.nextElementSibling.textContent = `${pageIndex}/${cardsResponse.data.pageCount}` + listElement.innerHTML = renderViewItem(cardsResponse.data.blocks) + getArticle(edit, dialog.element.querySelector(".b3-list-item--focus").getAttribute("data-id")) + }) + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "next") { + pageIndex++; + previousElement.removeAttribute("disabled"); + fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (cardsResponse) => { + if (pageIndex === cardsResponse.data.pageCount) { + nextElement.setAttribute("disabled", "disabled"); + } else if (cardsResponse.data.pageCount > 1) { + nextElement.removeAttribute("disabled"); + } + nextElement.nextElementSibling.nextElementSibling.textContent = `${pageIndex}/${cardsResponse.data.pageCount}` + listElement.innerHTML = renderViewItem(cardsResponse.data.blocks) + getArticle(edit, dialog.element.querySelector(".b3-list-item--focus").getAttribute("data-id")) + }) + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "card-item") { + const id = target.getAttribute("data-id"); + if (id) { + listElement.querySelector(".b3-list-item--focus")?.classList.remove("b3-list-item--focus") + target.classList.add("b3-list-item--focus") + getArticle(edit, id) + } + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "remove") { + fetchPost("/api/riff/removeRiffCards", { + deckID, + blockIDs: [target.getAttribute("data-id")] + }, () => { + target.parentElement.remove(); + }); + event.stopPropagation(); + event.preventDefault(); + break; + } + target = target.parentElement + } + }) + }); +} + +const getArticle = (edit: Protyle, id: string) => { + if (!id) { + return; + } + edit.protyle.scroll.lastScrollTop = 0; + addLoading(edit.protyle); + fetchPost("/api/filetree/getDoc", { + id, + mode: 0, + size: Constants.SIZE_GET_MAX, + }, getResponse => { + onGet(getResponse, edit.protyle, [Constants.CB_GET_ALL, Constants.CB_GET_HTML]); + }); +} + +const renderViewItem = (blocks: IBlock[]) => { + let listHTML = "" + let isFirst = true + blocks.forEach((item: IBlock) => { + if (item.type) { + const hPath = escapeHtml(getNotebookName(item.box)) + getDisplayName(item.hPath, false); + listHTML += `
    + +${unicode2Emoji(item.ial.icon, false, "b3-list-item__graphic", true)} +${item.content} + + + +${hPath} +
    `; + isFirst = false; + } else { + listHTML += `
    +${item.content} + + + +
    `; + } + }); + if (blocks.length === 0) { + listHTML = `
    ${window.siyuan.languages.emptyContent}
    `; + } + return listHTML; +}