mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-09-22 00:20:47 +02:00
This commit is contained in:
Vanessa
parent
81644059ac
commit
36b2299206
3 changed files with 278 additions and 198 deletions
|
|
@ -127,10 +127,6 @@
|
|||
overflow: auto hidden;
|
||||
}
|
||||
|
||||
&__body {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--b3-theme-surface-lighter);
|
||||
|
|
@ -256,6 +252,7 @@
|
|||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
|
||||
&--top {
|
||||
margin-top: 16px;
|
||||
|
|
@ -919,6 +916,7 @@
|
|||
display: flex;
|
||||
font-size: 87.5%;
|
||||
align-items: center;
|
||||
padding-top: 16px;
|
||||
|
||||
.counter:hover {
|
||||
background-color: var(--b3-list-icon-hover);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../../util/hasClosest";
|
||||
import {Constants} from "../../../../constants";
|
||||
import {fetchPost} from "../../../../util/fetch";
|
||||
import {fetchSyncPost} from "../../../../util/fetch";
|
||||
import {escapeAttr} from "../../../../util/escape";
|
||||
import {unicode2Emoji} from "../../../../emoji";
|
||||
import {cellValueIsEmpty, renderCell} from "../cell";
|
||||
|
|
@ -12,24 +12,216 @@ import {processRender} from "../../../util/processCode";
|
|||
import {getColIconByType, getColNameByType} from "../col";
|
||||
import {getCompressURL} from "../../../../util/image";
|
||||
|
||||
export const renderGallery = (options: {
|
||||
interface ITableOptions {
|
||||
protyle: IProtyle,
|
||||
blockElement: HTMLElement,
|
||||
cb: (data: IAV) => void,
|
||||
data: IAV,
|
||||
renderAll: boolean,
|
||||
resetData: {
|
||||
alignSelf: string,
|
||||
selectItemIds: string[],
|
||||
isSearching: boolean,
|
||||
editIds: string[],
|
||||
query: string,
|
||||
oldOffset: number,
|
||||
}
|
||||
}
|
||||
|
||||
const getGalleryHTML = (data: IAVGallery, selectItemIds: string[], editIds: string[]) => {
|
||||
let galleryHTML = "";
|
||||
// body
|
||||
data.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
|
||||
galleryHTML += `<div data-id="${item.id}" draggable="true" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
|
||||
if (data.coverFrom !== 0) {
|
||||
const coverClass = "av__gallery-cover av__gallery-cover--" + data.cardAspectRatio;
|
||||
if (item.coverURL) {
|
||||
if (item.coverURL.startsWith("background")) {
|
||||
galleryHTML += `<div class="${coverClass}"><img class="av__gallery-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" style="${item.coverURL}"></div>`;
|
||||
} else {
|
||||
galleryHTML += `<div class="${coverClass}"><img loading="lazy" class="av__gallery-img${data.fitImage ? " av__gallery-img--fit" : ""}" src="${getCompressURL(item.coverURL)}"></div>`;
|
||||
}
|
||||
} else if (item.coverContent) {
|
||||
galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
|
||||
} else {
|
||||
galleryHTML += `<div class="${coverClass}"></div>`;
|
||||
}
|
||||
}
|
||||
galleryHTML += `<div class="av__gallery-fields${editIds.includes(item.id) ? " av__gallery-fields--edit" : ""}">`;
|
||||
item.values.forEach((cell, fieldsIndex) => {
|
||||
if (data.fields[fieldsIndex].hidden) {
|
||||
return;
|
||||
}
|
||||
let checkClass = "";
|
||||
if (cell.valueType === "checkbox") {
|
||||
checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck";
|
||||
}
|
||||
const isEmpty = cellValueIsEmpty(cell.value);
|
||||
// NOTE: innerHTML 中不能换行否则 https://github.com/siyuan-note/siyuan/issues/15132
|
||||
let ariaLabel = escapeAttr(data.fields[fieldsIndex].name) || getColNameByType(data.fields[fieldsIndex].type);
|
||||
if (data.fields[fieldsIndex].desc) {
|
||||
ariaLabel += escapeAttr(`<div class="ft__on-surface">${data.fields[fieldsIndex].desc}</div>`);
|
||||
}
|
||||
galleryHTML += `<div class="av__cell${checkClass} ariaLabel" data-wrap="${data.fields[fieldsIndex].wrap}"
|
||||
data-empty="${isEmpty}"
|
||||
aria-label="${ariaLabel}"
|
||||
data-position="5west"
|
||||
data-id="${cell.id}"
|
||||
data-field-id="${data.fields[fieldsIndex].id}"
|
||||
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
|
||||
data-dtype="${cell.valueType}"
|
||||
${cell.value?.isDetached ? ' data-detached="true"' : ""}
|
||||
style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
|
||||
${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex, data.showIcon, "gallery")}<div class="av__gallery-tip">${data.fields[fieldsIndex].icon ? unicode2Emoji(data.fields[fieldsIndex].icon, undefined, true) : `<svg><use xlink:href="#${getColIconByType(data.fields[fieldsIndex].type)}"></use></svg>`}${window.siyuan.languages.edit} ${Lute.EscapeHTMLStr(data.fields[fieldsIndex].name)}</div></div>`;
|
||||
});
|
||||
galleryHTML += `</div>
|
||||
<div class="av__gallery-actions">
|
||||
<span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.displayEmptyFields}" data-type="av-gallery-edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
|
||||
<span class="protyle-icon protyle-icon--last b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.more}" data-type="av-gallery-more"><svg><use xlink:href="#iconMore"></use></svg></span>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
galleryHTML += `<div class="av__gallery-add" data-type="av-add-bottom"><svg class="svg"><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>${window.siyuan.languages.newRow}</div>`;
|
||||
return `<div class="av__gallery${data.cardSize === 0 ? " av__gallery--small" : (data.cardSize === 2 ? " av__gallery--big" : "")}">
|
||||
${galleryHTML}
|
||||
</div>
|
||||
<div class="av__gallery-load${data.cardCount > data.cards.length ? "" : " fn__none"}">
|
||||
<button class="b3-button av__button" data-type="av-load-more">
|
||||
<svg><use xlink:href="#iconArrowDown"></use></svg>
|
||||
<span>${window.siyuan.languages.loadMore}</span>
|
||||
<svg data-type="set-page-size" data-size="${data.pageSize}"><use xlink:href="#iconMore"></use></svg>
|
||||
</button>
|
||||
</div>`;
|
||||
};
|
||||
|
||||
const renderGroupGallery = (options: ITableOptions) => {
|
||||
const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
|
||||
const isSearching = searchInputElement && document.activeElement === searchInputElement;
|
||||
const query = searchInputElement?.value || "";
|
||||
|
||||
let avBodyHTML = "";
|
||||
options.data.view.groups.forEach((group: IAVGallery) => {
|
||||
if (group.groupHidden === 0) {
|
||||
group.fields = (options.data.view as IAVGallery).fields;
|
||||
avBodyHTML += `<div class="av__group-title">
|
||||
<div class="block__icon block__icon--show" data-type="av-group-fold" data-id="${group.id}">
|
||||
<svg class="${group.groupFolded ? "" : "av__group-arrow--open"}"><use xlink:href="#iconRight"></use></svg>
|
||||
</div><span class="fn__space"></span>${group.name}<span class="${group.cards.length === 0 ? "fn__none" : "counter"}">${group.cards.length}</span>
|
||||
</div>
|
||||
<div data-group-id="${group.id}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getGalleryHTML(group, options.resetData.selectItemIds, options.resetData.editIds)}</div>`;
|
||||
}
|
||||
});
|
||||
if (options.renderAll) {
|
||||
options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
|
||||
${genTabHeaderHTML(options.data, isSearching || !!query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
|
||||
<div>
|
||||
${avBodyHTML}
|
||||
</div>
|
||||
<div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
|
||||
</div>`;
|
||||
} else {
|
||||
options.blockElement.querySelector(".av__header").nextElementSibling.innerHTML = avBodyHTML;
|
||||
}
|
||||
afterRenderGallery(options);
|
||||
};
|
||||
|
||||
const afterRenderGallery = (options: ITableOptions) => {
|
||||
const view = options.data.view as IAVGallery;
|
||||
if (view.coverFrom === 1 || view.coverFrom === 3) {
|
||||
processRender(options.blockElement);
|
||||
}
|
||||
if (typeof options.resetData.oldOffset === "number") {
|
||||
options.protyle.contentElement.scrollTop = options.resetData.oldOffset;
|
||||
}
|
||||
options.blockElement.setAttribute("data-render", "true");
|
||||
if (options.resetData.alignSelf) {
|
||||
options.blockElement.style.alignSelf = options.resetData.alignSelf;
|
||||
}
|
||||
if (getSelection().rangeCount > 0) {
|
||||
// 修改表头后光标重新定位
|
||||
const range = getSelection().getRangeAt(0);
|
||||
if (!hasClosestByClassName(range.startContainer, "av__title")) {
|
||||
const blockElement = hasClosestBlock(range.startContainer);
|
||||
if (blockElement && options.blockElement === blockElement && !options.resetData.isSearching) {
|
||||
focusBlock(options.blockElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
options.blockElement.querySelector(".layout-tab-bar").scrollLeft = (options.blockElement.querySelector(".layout-tab-bar .item--focus") as HTMLElement).offsetLeft - 30;
|
||||
if (options.cb) {
|
||||
options.cb(options.data);
|
||||
}
|
||||
if (options.data.view.hideAttrViewName) {
|
||||
options.blockElement.querySelector(".av__gallery").classList.add("av__gallery--top");
|
||||
}
|
||||
if (!options.renderAll) {
|
||||
return;
|
||||
}
|
||||
const viewsElement = options.blockElement.querySelector(".av__views") as HTMLElement;
|
||||
const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
|
||||
searchInputElement.value = options.resetData.query || "";
|
||||
if (options.resetData.isSearching) {
|
||||
searchInputElement.focus();
|
||||
}
|
||||
searchInputElement.addEventListener("compositionstart", (event: KeyboardEvent) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
searchInputElement.addEventListener("keydown", (event: KeyboardEvent) => {
|
||||
if (event.isComposing) {
|
||||
return;
|
||||
}
|
||||
electronUndo(event);
|
||||
});
|
||||
searchInputElement.addEventListener("input", (event: KeyboardEvent) => {
|
||||
event.stopPropagation();
|
||||
if (event.isComposing) {
|
||||
return;
|
||||
}
|
||||
if (searchInputElement.value || document.activeElement === searchInputElement) {
|
||||
viewsElement.classList.add("av__views--show");
|
||||
} else {
|
||||
viewsElement.classList.remove("av__views--show");
|
||||
}
|
||||
updateSearch(options.blockElement, options.protyle);
|
||||
});
|
||||
searchInputElement.addEventListener("compositionend", () => {
|
||||
updateSearch(options.blockElement, options.protyle);
|
||||
});
|
||||
searchInputElement.addEventListener("blur", (event: KeyboardEvent) => {
|
||||
if (event.isComposing) {
|
||||
return;
|
||||
}
|
||||
if (!searchInputElement.value) {
|
||||
viewsElement.classList.remove("av__views--show");
|
||||
searchInputElement.style.width = "0";
|
||||
searchInputElement.style.paddingLeft = "0";
|
||||
searchInputElement.style.paddingRight = "0";
|
||||
}
|
||||
});
|
||||
addClearButton({
|
||||
inputElement: searchInputElement,
|
||||
right: 0,
|
||||
width: "1em",
|
||||
height: searchInputElement.clientHeight,
|
||||
clearCB() {
|
||||
viewsElement.classList.remove("av__views--show");
|
||||
searchInputElement.style.width = "0";
|
||||
searchInputElement.style.paddingLeft = "0";
|
||||
searchInputElement.style.paddingRight = "0";
|
||||
focusBlock(options.blockElement);
|
||||
updateSearch(options.blockElement, options.protyle);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const renderGallery = async (options: {
|
||||
blockElement: HTMLElement,
|
||||
protyle: IProtyle,
|
||||
cb?: (data: IAV) => void,
|
||||
renderAll: boolean
|
||||
renderAll: boolean,
|
||||
data?: IAV,
|
||||
}) => {
|
||||
const alignSelf = options.blockElement.style.alignSelf;
|
||||
let oldOffset: number;
|
||||
if (options.blockElement.firstElementChild.innerHTML === "") {
|
||||
options.blockElement.style.alignSelf = "";
|
||||
options.blockElement.firstElementChild.outerHTML = `<div class="av__gallery">
|
||||
<span style="width: 100%;height: 178px;" class="av__pulse"></span>
|
||||
<span style="width: 100%;height: 178px;" class="av__pulse"></span>
|
||||
<span style="width: 100%;height: 178px;" class="av__pulse"></span>
|
||||
</div>`;
|
||||
} else {
|
||||
oldOffset = options.protyle.contentElement.scrollTop;
|
||||
}
|
||||
const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
|
||||
const editIds: string[] = [];
|
||||
options.blockElement.querySelectorAll(".av__gallery-fields--edit").forEach(item => {
|
||||
editIds.push(item.parentElement.getAttribute("data-id"));
|
||||
|
|
@ -41,187 +233,77 @@ export const renderGallery = (options: {
|
|||
selectItemIds.push(rowId);
|
||||
}
|
||||
});
|
||||
const resetData = {
|
||||
isSearching: searchInputElement && document.activeElement === searchInputElement,
|
||||
query: searchInputElement?.value || "",
|
||||
alignSelf: options.blockElement.style.alignSelf,
|
||||
oldOffset: options.protyle.contentElement.scrollTop,
|
||||
editIds,
|
||||
selectItemIds,
|
||||
};
|
||||
if (options.blockElement.firstElementChild.innerHTML === "") {
|
||||
options.blockElement.style.alignSelf = "";
|
||||
options.blockElement.firstElementChild.outerHTML = `<div class="av__gallery">
|
||||
<span style="width: 100%;height: 178px;" class="av__pulse"></span>
|
||||
<span style="width: 100%;height: 178px;" class="av__pulse"></span>
|
||||
<span style="width: 100%;height: 178px;" class="av__pulse"></span>
|
||||
</div>`;
|
||||
}
|
||||
const created = options.protyle.options.history?.created;
|
||||
const snapshot = options.protyle.options.history?.snapshot;
|
||||
let searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
|
||||
const isSearching = searchInputElement && document.activeElement === searchInputElement;
|
||||
const query = searchInputElement?.value || "";
|
||||
fetchPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
|
||||
id: options.blockElement.getAttribute("data-av-id"),
|
||||
created,
|
||||
snapshot,
|
||||
pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined,
|
||||
viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
|
||||
query: query.trim()
|
||||
}, (response) => {
|
||||
const view: IAVGallery = response.data.view;
|
||||
if (response.data.viewType === "table") {
|
||||
options.blockElement.setAttribute("data-av-type", "table");
|
||||
avRender(options.blockElement, options.protyle, options.cb, options.renderAll);
|
||||
return;
|
||||
}
|
||||
if (!options.blockElement.dataset.pageSize) {
|
||||
options.blockElement.dataset.pageSize = view.pageSize.toString();
|
||||
}
|
||||
let galleryHTML = "";
|
||||
// body
|
||||
view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
|
||||
galleryHTML += `<div data-id="${item.id}" draggable="true" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
|
||||
if (view.coverFrom !== 0) {
|
||||
const coverClass = "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio;
|
||||
if (item.coverURL) {
|
||||
if (item.coverURL.startsWith("background")) {
|
||||
galleryHTML += `<div class="${coverClass}"><img class="av__gallery-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" style="${item.coverURL}"></div>`;
|
||||
} else {
|
||||
galleryHTML += `<div class="${coverClass}"><img loading="lazy" class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" src="${getCompressURL(item.coverURL)}"></div>`;
|
||||
}
|
||||
} else if (item.coverContent) {
|
||||
galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
|
||||
} else {
|
||||
galleryHTML += `<div class="${coverClass}"></div>`;
|
||||
}
|
||||
}
|
||||
galleryHTML += `<div class="av__gallery-fields${editIds.includes(item.id) ? " av__gallery-fields--edit" : ""}">`;
|
||||
item.values.forEach((cell, fieldsIndex) => {
|
||||
if (view.fields[fieldsIndex].hidden) {
|
||||
return;
|
||||
}
|
||||
let checkClass = "";
|
||||
if (cell.valueType === "checkbox") {
|
||||
checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck";
|
||||
}
|
||||
const isEmpty = cellValueIsEmpty(cell.value);
|
||||
// NOTE: innerHTML 中不能换行否则 https://github.com/siyuan-note/siyuan/issues/15132
|
||||
let ariaLabel = escapeAttr(view.fields[fieldsIndex].name) || getColNameByType(view.fields[fieldsIndex].type);
|
||||
if (view.fields[fieldsIndex].desc) {
|
||||
ariaLabel += escapeAttr(`<div class="ft__on-surface">${view.fields[fieldsIndex].desc}</div>`);
|
||||
}
|
||||
galleryHTML += `<div class="av__cell${checkClass} ariaLabel" data-wrap="${view.fields[fieldsIndex].wrap}"
|
||||
data-empty="${isEmpty}"
|
||||
aria-label="${ariaLabel}"
|
||||
data-position="5west"
|
||||
data-id="${cell.id}"
|
||||
data-field-id="${view.fields[fieldsIndex].id}"
|
||||
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
|
||||
data-dtype="${cell.valueType}"
|
||||
${cell.value?.isDetached ? ' data-detached="true"' : ""}
|
||||
style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
|
||||
${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex, view.showIcon, "gallery")}<div class="av__gallery-tip">${view.fields[fieldsIndex].icon ? unicode2Emoji(view.fields[fieldsIndex].icon, undefined, true) : `<svg><use xlink:href="#${getColIconByType(view.fields[fieldsIndex].type)}"></use></svg>`}${window.siyuan.languages.edit} ${Lute.EscapeHTMLStr(view.fields[fieldsIndex].name)}</div></div>`;
|
||||
});
|
||||
galleryHTML += `</div>
|
||||
<div class="av__gallery-actions">
|
||||
<span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.displayEmptyFields}" data-type="av-gallery-edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
|
||||
<span class="protyle-icon protyle-icon--last b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.more}" data-type="av-gallery-more"><svg><use xlink:href="#iconMore"></use></svg></span>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
let data: IAV = options.data;
|
||||
if (!data) {
|
||||
const response = await fetchSyncPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
|
||||
id: options.blockElement.getAttribute("data-av-id"),
|
||||
created,
|
||||
snapshot,
|
||||
pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined,
|
||||
viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
|
||||
query: resetData.query.trim()
|
||||
});
|
||||
galleryHTML += `<div class="av__gallery-add" data-type="av-add-bottom"><svg class="svg"><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>${window.siyuan.languages.newRow}</div>`;
|
||||
if (options.renderAll) {
|
||||
options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
|
||||
${genTabHeaderHTML(response.data, isSearching || !!query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
|
||||
<div class="av__gallery${view.cardSize === 0 ? " av__gallery--small" : (view.cardSize === 2 ? " av__gallery--big" : "")}
|
||||
${view.hideAttrViewName ? " av__gallery--top" : ""}">
|
||||
${galleryHTML}
|
||||
</div>
|
||||
<div class="av__gallery-load${view.cardCount > view.cards.length ? "" : " fn__none"}">
|
||||
<button class="b3-button av__button" data-type="av-load-more">
|
||||
<svg><use xlink:href="#iconArrowDown"></use></svg>
|
||||
<span>${window.siyuan.languages.loadMore}</span>
|
||||
<svg data-type="set-page-size" data-size="${view.pageSize}"><use xlink:href="#iconMore"></use></svg>
|
||||
</button>
|
||||
data = response.data;
|
||||
}
|
||||
if (data.viewType === "table") {
|
||||
options.blockElement.setAttribute("data-av-type", "table");
|
||||
avRender(options.blockElement, options.protyle, options.cb, options.renderAll);
|
||||
return;
|
||||
}
|
||||
const view: IAVGallery = data.view as IAVGallery;
|
||||
if (view.groups?.length > 0) {
|
||||
renderGroupGallery({
|
||||
blockElement: options.blockElement,
|
||||
protyle: options.protyle,
|
||||
cb: options.cb,
|
||||
renderAll: options.renderAll,
|
||||
data,
|
||||
resetData
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!options.blockElement.dataset.pageSize) {
|
||||
options.blockElement.dataset.pageSize = view.pageSize.toString();
|
||||
}
|
||||
const bodyHTML = getGalleryHTML(view, selectItemIds, editIds);
|
||||
if (options.renderAll) {
|
||||
options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
|
||||
${genTabHeaderHTML(data, resetData.isSearching || !!resetData.query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
|
||||
<div>
|
||||
<div class="av__body">
|
||||
${bodyHTML}
|
||||
</div>
|
||||
</div>
|
||||
<div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
|
||||
</div>`;
|
||||
} else {
|
||||
const galleryElement = options.blockElement.firstElementChild.querySelector(".av__gallery");
|
||||
galleryElement.innerHTML = galleryHTML;
|
||||
if (view.hideAttrViewName) {
|
||||
galleryElement.classList.add("av__gallery--top");
|
||||
} else {
|
||||
galleryElement.classList.remove("av__gallery--top");
|
||||
}
|
||||
}
|
||||
if (view.coverFrom === 1 || view.coverFrom === 3) {
|
||||
processRender(options.blockElement);
|
||||
}
|
||||
if (typeof oldOffset === "number") {
|
||||
options.protyle.contentElement.scrollTop = oldOffset;
|
||||
}
|
||||
options.blockElement.setAttribute("data-render", "true");
|
||||
if (alignSelf) {
|
||||
options.blockElement.style.alignSelf = alignSelf;
|
||||
}
|
||||
if (getSelection().rangeCount > 0) {
|
||||
// 修改表头后光标重新定位
|
||||
const range = getSelection().getRangeAt(0);
|
||||
if (!hasClosestByClassName(range.startContainer, "av__title")) {
|
||||
const blockElement = hasClosestBlock(range.startContainer);
|
||||
if (blockElement && options.blockElement === blockElement && !isSearching) {
|
||||
focusBlock(options.blockElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
options.blockElement.querySelector(".layout-tab-bar").scrollLeft = (options.blockElement.querySelector(".layout-tab-bar .item--focus") as HTMLElement).offsetLeft - 30;
|
||||
if (options.cb) {
|
||||
options.cb(response.data);
|
||||
}
|
||||
if (!options.renderAll) {
|
||||
return;
|
||||
}
|
||||
const viewsElement = options.blockElement.querySelector(".av__views") as HTMLElement;
|
||||
searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
|
||||
searchInputElement.value = query || "";
|
||||
if (isSearching) {
|
||||
searchInputElement.focus();
|
||||
}
|
||||
searchInputElement.addEventListener("compositionstart", (event: KeyboardEvent) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
searchInputElement.addEventListener("keydown", (event: KeyboardEvent) => {
|
||||
if (event.isComposing) {
|
||||
return;
|
||||
}
|
||||
electronUndo(event);
|
||||
});
|
||||
searchInputElement.addEventListener("input", (event: KeyboardEvent) => {
|
||||
event.stopPropagation();
|
||||
if (event.isComposing) {
|
||||
return;
|
||||
}
|
||||
if (searchInputElement.value || document.activeElement === searchInputElement) {
|
||||
viewsElement.classList.add("av__views--show");
|
||||
} else {
|
||||
viewsElement.classList.remove("av__views--show");
|
||||
}
|
||||
updateSearch(options.blockElement, options.protyle);
|
||||
});
|
||||
searchInputElement.addEventListener("compositionend", () => {
|
||||
updateSearch(options.blockElement, options.protyle);
|
||||
});
|
||||
searchInputElement.addEventListener("blur", (event: KeyboardEvent) => {
|
||||
if (event.isComposing) {
|
||||
return;
|
||||
}
|
||||
if (!searchInputElement.value) {
|
||||
viewsElement.classList.remove("av__views--show");
|
||||
searchInputElement.style.width = "0";
|
||||
searchInputElement.style.paddingLeft = "0";
|
||||
searchInputElement.style.paddingRight = "0";
|
||||
}
|
||||
});
|
||||
addClearButton({
|
||||
inputElement: searchInputElement,
|
||||
right: 0,
|
||||
width: "1em",
|
||||
height: searchInputElement.clientHeight,
|
||||
clearCB() {
|
||||
viewsElement.classList.remove("av__views--show");
|
||||
searchInputElement.style.width = "0";
|
||||
searchInputElement.style.paddingLeft = "0";
|
||||
searchInputElement.style.paddingRight = "0";
|
||||
focusBlock(options.blockElement);
|
||||
updateSearch(options.blockElement, options.protyle);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
options.blockElement.querySelector(".av__body").innerHTML = bodyHTML;
|
||||
}
|
||||
afterRenderGallery({
|
||||
resetData,
|
||||
renderAll: options.renderAll,
|
||||
data,
|
||||
cb: options.cb,
|
||||
protyle: options.protyle,
|
||||
blockElement: options.blockElement,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ const renderGroupTable = (options: ITableOptions) => {
|
|||
<svg class="${group.groupFolded ? "" : "av__group-arrow--open"}"><use xlink:href="#iconRight"></use></svg>
|
||||
</div><span class="fn__space"></span>${group.name}<span class="${group.rows.length === 0 ? "fn__none" : "counter"}">${group.rows.length}</span>
|
||||
</div>
|
||||
<div data-group-id="${group.id}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
|
||||
<div data-group-id="${group.id}" style="float: left" class="av__body${group.groupFolded ? " fn__none" : ""}">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
|
||||
}
|
||||
});
|
||||
if (options.renderAll) {
|
||||
|
|
@ -475,7 +475,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
|
|||
const data = response.data.view as IAVTable;
|
||||
if (response.data.viewType === "gallery") {
|
||||
e.setAttribute("data-av-type", "table");
|
||||
renderGallery({blockElement: e, protyle, cb, renderAll});
|
||||
renderGallery({blockElement: e, protyle, cb, renderAll, data: response.data});
|
||||
return;
|
||||
}
|
||||
if (data.groups?.length > 0) {
|
||||
|
|
@ -486,7 +486,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
|
|||
e.dataset.pageSize = data.pageSize.toString();
|
||||
}
|
||||
const tableHTMLs = getTableHTMLs(data, e);
|
||||
const avBodyHTML = `<div class="av__body">
|
||||
const avBodyHTML = `<div class="av__body" style="float: left">
|
||||
${tableHTMLs.contentHTML}
|
||||
${tableHTMLs.footerHTML}
|
||||
</div>`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue