Vanessa 2025-08-20 10:54:26 +08:00
parent 6e590f2733
commit ca59b5f64c
3 changed files with 68 additions and 38 deletions

View file

@ -95,9 +95,16 @@ export class Gutter {
}
});
if (avElement.querySelector('.block__icon[data-type="av-sort"]')?.classList.contains("block__icon--active")) {
event.preventDefault();
event.stopPropagation();
return;
const bodyElements = avElement.querySelectorAll(".av__body");
if (bodyElements.length === 1) {
event.preventDefault();
event.stopPropagation();
return;
} else if (["template", "created", "updated"].includes(bodyElements[0].getAttribute("data-dtype"))) {
event.preventDefault();
event.stopPropagation();
return;
}
}
const rowElement = avElement.querySelector(`.av__body${buttonElement.dataset.groupId ? `[data-group-id="${buttonElement.dataset.groupId}"]` : ""} .av__row[data-id="${buttonElement.dataset.rowId}"]`);
if (!rowElement.classList.contains("av__row--select")) {
@ -111,7 +118,7 @@ export class Gutter {
updateHeader(rowElement as HTMLElement);
avElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(item => {
const groupId = (hasClosestByClassName(item, "av__body") as HTMLElement)?.dataset.groupId || "";
selectIds.push(item.getAttribute("data-id") + (groupId ? "@"+groupId : ""));
selectIds.push(item.getAttribute("data-id") + (groupId ? "@" + groupId : ""));
selectElements.push(item);
});
} else {

View file

@ -35,31 +35,11 @@ interface ITableOptions {
}
}
const getGalleryHTML = (data: IAVGallery, selectItemIds: IIds[], editIds: IIds[], groupId: string) => {
const getGalleryHTML = (data: IAVGallery) => {
let galleryHTML = "";
// body
data.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
let hasSelected = selectItemIds.find(selectId => {
if (selectId.groupId === groupId && selectId.fieldId === item.id) {
return true;
}
});
hasSelected = selectItemIds.find(selectId => {
if (selectId.fieldId === item.id) {
return true;
}
});
let hasEdit = editIds.find(edit => {
if (edit.groupId === groupId && edit.fieldId === item.id) {
return true;
}
});
hasEdit= editIds.find(edit => {
if (edit.fieldId === item.id) {
return true;
}
});
galleryHTML += `<div data-id="${item.id}" draggable="true" class="av__gallery-item${hasSelected ? " av__gallery-item--select" : ""}">`;
galleryHTML += `<div data-id="${item.id}" draggable="true" class="av__gallery-item">`;
if (data.coverFrom !== 0) {
const coverClass = "av__gallery-cover av__gallery-cover--" + data.cardAspectRatio;
if (item.coverURL) {
@ -74,7 +54,7 @@ const getGalleryHTML = (data: IAVGallery, selectItemIds: IIds[], editIds: IIds[]
galleryHTML += `<div class="${coverClass}"></div>`;
}
}
galleryHTML += `<div class="av__gallery-fields${hasEdit ? " av__gallery-fields--edit" : ""}">`;
galleryHTML += '<div class="av__gallery-fields">';
item.values.forEach((cell, fieldsIndex) => {
if (data.fields[fieldsIndex].hidden) {
return;
@ -132,7 +112,7 @@ const renderGroupGallery = (options: ITableOptions) => {
options.data.view.groups.forEach((group: IAVGallery) => {
if (group.groupHidden === 0) {
avBodyHTML += `${getGroupTitleHTML(group, group.cards.length)}
<div data-group-id="${group.id}" data-page-size="${group.pageSize}" data-dtype="${group.groupKey.type}" data-content="${group.groupValue.text?.content}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getGalleryHTML(group, options.resetData.selectItemIds, options.resetData.editIds, group.id)}</div>`;
<div data-group-id="${group.id}" data-page-size="${group.pageSize}" data-dtype="${group.groupKey.type}" data-content="${group.groupValue.text?.content}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getGalleryHTML(group)}</div>`;
}
});
if (options.renderAll) {
@ -161,6 +141,24 @@ const afterRenderGallery = (options: ITableOptions) => {
if (options.resetData.alignSelf) {
options.blockElement.style.alignSelf = options.resetData.alignSelf;
}
options.resetData.selectItemIds.find(selectId => {
let itemElement = options.blockElement.querySelector(`.av__body[data-group-id="${selectId.groupId}"] .av__gallery-item[data-id="${selectId.fieldId}"]`) as HTMLElement;
if (!itemElement) {
itemElement = options.blockElement.querySelector(`.av__gallery-item[data-id="${selectId.fieldId}"]`) as HTMLElement;
}
if (itemElement) {
itemElement.classList.add("av__gallery-item--select");
}
});
options.resetData.editIds.find(selectId => {
let itemElement = options.blockElement.querySelector(`.av__body[data-group-id="${selectId.groupId}"] .av__gallery-item[data-id="${selectId.fieldId}"]`) as HTMLElement;
if (!itemElement) {
itemElement = options.blockElement.querySelector(`.av__gallery-item[data-id="${selectId.fieldId}"]`) as HTMLElement;
}
if (itemElement) {
itemElement.querySelector(".av__gallery-fields").classList.add("av__gallery-fields--edit");
}
});
Object.keys(options.resetData.pageSizes).forEach((groupId) => {
if (groupId === "unGroup") {
(options.blockElement.querySelector(".av__body") as HTMLElement).dataset.pageSize = options.resetData.pageSizes[groupId];
@ -325,7 +323,7 @@ export const renderGallery = async (options: {
});
return;
}
const bodyHTML = getGalleryHTML(view, selectItemIds, editIds, "");
const bodyHTML = getGalleryHTML(view);
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"))}

View file

@ -864,9 +864,16 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
const blockElement = hasClosestBlock(target);
if (blockElement) {
if (blockElement.querySelector('.block__icon[data-type="av-sort"]')?.classList.contains("block__icon--active")) {
event.preventDefault();
event.stopPropagation();
return;
const bodyElements = blockElement.querySelectorAll(".av__body");
if (bodyElements.length === 1) {
event.preventDefault();
event.stopPropagation();
return;
} else if (["template", "created", "updated"].includes(bodyElements[0].getAttribute("data-dtype"))) {
event.preventDefault();
event.stopPropagation();
return;
}
}
if (!target.classList.contains("av__gallery-item--select")) {
blockElement.querySelectorAll(".av__gallery-item--select").forEach(item => {
@ -1598,12 +1605,21 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
// 行只能拖拽当前 av 中
targetElement = false;
} else {
// 模板、创建时间、更新时间 字段作为分组方式时不允许跨分组拖拽 https://github.com/siyuan-note/siyuan/issues/15553
const bodyElement = hasClosestByClassName(targetElement, "av__body");
if (bodyElement && ["template", "created", "updated"].includes(bodyElement.getAttribute("data-dtype"))) {
if (bodyElement) {
const blockElement = hasClosestBlock(bodyElement) as HTMLElement;
const groupID = bodyElement.getAttribute("data-group-id");
// 模板、创建时间、更新时间 字段作为分组方式时不允许跨分组拖拽 https://github.com/siyuan-note/siyuan/issues/15553
const isTCU = ["template", "created", "updated"].includes(bodyElement.getAttribute("data-dtype"));
// 排序只能夸组拖拽
const hasSort = blockElement.querySelector('.block__icon[data-type="av-sort"]')?.classList.contains("block__icon--active");
gutterTypes[2].split(",").find(item => {
if (item && item.split("@")[1] !== groupID) {
const sourceGroupID = item ? item.split("@")[1] : "";
if (sourceGroupID !== groupID && isTCU) {
targetElement = false;
return true;
}
if (sourceGroupID === groupID && hasSort) {
targetElement = false;
return true;
}
@ -1617,12 +1633,21 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
// gallery item 只能拖拽当前 av 中
targetElement = false;
} else {
// 模板、创建时间、更新时间 字段作为分组方式时不允许跨分组拖拽 https://github.com/siyuan-note/siyuan/issues/15553
const bodyElement = hasClosestByClassName(targetElement, "av__body");
if (bodyElement && ["template", "created", "updated"].includes(bodyElement.getAttribute("data-dtype"))) {
if (bodyElement) {
const blockElement = hasClosestBlock(bodyElement) as HTMLElement;
const groupID = bodyElement.getAttribute("data-group-id");
// 模板、创建时间、更新时间 字段作为分组方式时不允许跨分组拖拽 https://github.com/siyuan-note/siyuan/issues/15553
const isTCU = ["template", "created", "updated"].includes(bodyElement.getAttribute("data-dtype"));
// 排序只能夸组拖拽
const hasSort = blockElement.querySelector('.block__icon[data-type="av-sort"]')?.classList.contains("block__icon--active");
gutterTypes[2].split(",").find(item => {
if (item && item.split("@")[1] !== groupID) {
const sourceGroupID = item ? item.split("@")[1] : "";
if (sourceGroupID !== groupID && isTCU) {
targetElement = false;
return true;
}
if (sourceGroupID === groupID && hasSort) {
targetElement = false;
return true;
}