diff --git a/app/src/card/makeCard.ts b/app/src/card/makeCard.ts index 9ec3f8d41..6f0fe73f1 100644 --- a/app/src/card/makeCard.ts +++ b/app/src/card/makeCard.ts @@ -4,17 +4,10 @@ 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"; import {hideElements} from "../protyle/ui/hideElements"; +import {viewCards} from "./viewCards"; -const genCardItem = (item: ICard) => { +export const genCardItem = (item: ICard) => { return `
  • ${item.name} ${item.size} @@ -30,10 +23,10 @@ const genCardItem = (item: ICard) => { - + -${item.size} +${item.size} ${item.updated}
    • `; }; @@ -59,7 +52,7 @@ export const makeCard = (nodeElement: Element[]) => { html += genCardItem(item); }); const dialog = new Dialog({ - width: isMobile() ? "90vw" : "768px", + width: isMobile() ? "90vw" : "50vw", height: "70vh", title: window.siyuan.languages.riffCard, content: `
    @@ -177,187 +170,5 @@ export const makeCard = (nodeElement: Element[]) => { }); }; -const viewCards = (deckID: string, title: string, sourceElement: HTMLElement) => { - let pageIndex = 1; - let edit:Protyle; - fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (response) => { - const dialog = new Dialog({ - title, - content: `
    -
    -
    - - - - - - ${pageIndex}/${response.data.pageCount || 1} -
    -
    -
    -
    -
      - ${renderViewItem(response.data.blocks)} -
    -
    -
    ${window.siyuan.languages.emptyContent}
    -
    -
    `, - width: isMobile() ? "90vw" : "80vw", - height: "80vh", - destroyCallback() { - if (edit) { - edit.destroy(); - } - } - }); - if (response.data.blocks.length === 0) { - return; - } - 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.style.zIndex = "200"; - 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") { - if (pageIndex <= 1) { - return; - } - 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 || 1}`; - 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") { - if (pageIndex >= response.data.pageCount) { - return; - } - 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 || 1}`; - 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") { - getArticle(edit, target.getAttribute("data-id")); - listElement.querySelector(".b3-list-item--focus")?.classList.remove("b3-list-item--focus"); - target.classList.add("b3-list-item--focus"); - event.stopPropagation(); - event.preventDefault(); - break; - } else if (type === "remove") { - fetchPost("/api/riff/removeRiffCards", { - deckID, - blockIDs: [target.getAttribute("data-id")] - }, (removeResponse) => { - let nextElment = target.parentElement.nextElementSibling; - if (!nextElment) { - nextElment = target.parentElement.previousElementSibling; - } - if (!nextElment && target.parentElement.parentElement.childElementCount > 1) { - nextElment = target.parentElement.parentElement.firstElementChild; - } - if (!nextElment) { - getArticle(edit, ""); - } else { - getArticle(edit, nextElment.getAttribute("data-id")); - listElement.querySelector(".b3-list-item--focus")?.classList.remove("b3-list-item--focus"); - nextElment.classList.add("b3-list-item--focus"); - } - target.parentElement.remove(); - sourceElement.outerHTML = genCardItem(removeResponse.data); - }); - event.stopPropagation(); - event.preventDefault(); - break; - } - target = target.parentElement; - } - }); - }); -}; -const getArticle = (edit: Protyle, id: string) => { - if (!id) { - edit.protyle.element.classList.add("fn__none"); - edit.protyle.element.nextElementSibling.classList.remove("fn__none"); - return; - } - edit.protyle.element.classList.remove("fn__none"); - edit.protyle.element.nextElementSibling.classList.add("fn__none"); - 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; -}; diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts index 8994c83e4..cacbd1547 100644 --- a/app/src/card/openCard.ts +++ b/app/src/card/openCard.ts @@ -4,7 +4,8 @@ import {isMobile} from "../util/functions"; import {Protyle} from "../protyle"; import {Constants} from "../constants"; import {onGet} from "../protyle/util/onGet"; -import {hasClosestByClassName} from "../protyle/util/hasClosest"; +import {hasClosestByAttribute, hasClosestByClassName} from "../protyle/util/hasClosest"; +import {viewCards} from "./viewCards"; export const openCard = () => { const exit = window.siyuan.dialogs.find(item => { @@ -33,7 +34,12 @@ export const openCard = () => { content: `
    -
    ${countHTML}
    + + + + + +
    ${countHTML}
    @@ -65,7 +71,7 @@ export const openCard = () => {
    `, - width: isMobile() ? "96vw" : "50vw", + width: isMobile() ? "96vw" : "768px", height: "70vh", }); dialog.element.querySelector("input").focus(); @@ -123,6 +129,13 @@ export const openCard = () => { }); }); dialog.element.addEventListener("click", (event) => { + const viewElement = hasClosestByAttribute(event.target as HTMLElement, "data-type", "view"); + if (viewElement) { + viewCards(selectElement.value, selectElement.options[selectElement.selectedIndex].text); + event.preventDefault(); + event.stopPropagation(); + return; + } let type = ""; if (typeof event.detail === "string") { if (event.detail === "a") { diff --git a/app/src/card/viewCards.ts b/app/src/card/viewCards.ts new file mode 100644 index 000000000..f5e155093 --- /dev/null +++ b/app/src/card/viewCards.ts @@ -0,0 +1,201 @@ +import {Protyle} from "../protyle"; +import {fetchPost} from "../util/fetch"; +import {Dialog} from "../dialog"; +import {isMobile} from "../util/functions"; +import {escapeHtml} from "../util/escape"; +import {getDisplayName, getNotebookName} from "../util/pathName"; +import {getIconByType} from "../editor/getIcon"; +import {unicode2Emoji} from "../emoji"; +import {addLoading} from "../protyle/ui/initUI"; +import {Constants} from "../constants"; +import {onGet} from "../protyle/util/onGet"; +import {genCardItem} from "./makeCard"; + +export const viewCards = (deckID: string, title: string, sourceElement?: HTMLElement) => { + let pageIndex = 1; + let edit:Protyle; + fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (response) => { + const dialog = new Dialog({ + title, + content: `
    +
    +
    + + + + + + ${pageIndex}/${response.data.pageCount || 1} +
    +
    +
    +
    + +
    +
    ${window.siyuan.languages.emptyContent}
    +
    +
    `, + width: isMobile() ? "90vw" : "80vw", + height: "80vh", + destroyCallback() { + if (edit) { + edit.destroy(); + } + } + }); + if (response.data.blocks.length === 0) { + return; + } + 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.style.zIndex = "200"; + 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") { + if (pageIndex <= 1) { + return; + } + 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 || 1}`; + 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") { + if (pageIndex >= response.data.pageCount) { + return; + } + 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 || 1}`; + 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") { + getArticle(edit, target.getAttribute("data-id")); + listElement.querySelector(".b3-list-item--focus")?.classList.remove("b3-list-item--focus"); + target.classList.add("b3-list-item--focus"); + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "remove") { + fetchPost("/api/riff/removeRiffCards", { + deckID, + blockIDs: [target.getAttribute("data-id")] + }, (removeResponse) => { + let nextElment = target.parentElement.nextElementSibling; + if (!nextElment) { + nextElment = target.parentElement.previousElementSibling; + } + if (!nextElment && target.parentElement.parentElement.childElementCount > 1) { + nextElment = target.parentElement.parentElement.firstElementChild; + } + if (!nextElment) { + getArticle(edit, ""); + } else { + getArticle(edit, nextElment.getAttribute("data-id")); + listElement.querySelector(".b3-list-item--focus")?.classList.remove("b3-list-item--focus"); + nextElment.classList.add("b3-list-item--focus"); + } + target.parentElement.remove(); + if (sourceElement) { + sourceElement.outerHTML = genCardItem(removeResponse.data); + } + }); + event.stopPropagation(); + event.preventDefault(); + break; + } + target = target.parentElement; + } + }); + }); +}; + + +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; +}; + + +const getArticle = (edit: Protyle, id: string) => { + if (!id) { + edit.protyle.element.classList.add("fn__none"); + edit.protyle.element.nextElementSibling.classList.remove("fn__none"); + return; + } + edit.protyle.element.classList.remove("fn__none"); + edit.protyle.element.nextElementSibling.classList.add("fn__none"); + 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]); + }); +};