This commit is contained in:
Vanessa 2023-07-18 11:47:47 +08:00
parent faefdbaf40
commit dbe4eb7d4d
4 changed files with 22 additions and 22 deletions

View file

@ -64,20 +64,20 @@ export const duplicateCol = (protyle: IProtyle, type: TAVCol, avID: string, colI
avID, avID,
}]); }]);
} }
} };
export const getEditHTML = (options: { export const getEditHTML = (options: {
protyle: IProtyle, protyle: IProtyle,
colId: string, colId: string,
data: IAV data: IAV
}) => { }) => {
let colData: IAVColumn let colData: IAVColumn;
options.data.view.columns.find((item) => { options.data.view.columns.find((item) => {
if (item.id === options.colId) { if (item.id === options.colId) {
colData = item; colData = item;
return true; return true;
} }
}) });
let html = `<button class="b3-menu__item" data-type="nobg" data-col-id="${options.colId}"> let html = `<button class="b3-menu__item" data-type="nobg" data-col-id="${options.colId}">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goProperties"> <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goProperties">
<svg><use xlink:href="#iconLeft"></use></svg> <svg><use xlink:href="#iconLeft"></use></svg>
@ -95,7 +95,7 @@ export const getEditHTML = (options: {
<button class="b3-menu__item"> <button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconAdd"></use></svg> <svg class="b3-menu__icon" style=""><use xlink:href="#iconAdd"></use></svg>
<span class="b3-menu__label"><input data-type="addOption" style="margin: 4px 0" class="b3-text-field" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span> <span class="b3-menu__label"><input data-type="addOption" style="margin: 4px 0" class="b3-text-field" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span>
</button>` </button>`;
colData.options.forEach(item => { colData.options.forEach(item => {
html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}"> html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
@ -129,7 +129,7 @@ export const bindEditEvent = (options: { protyle: IProtyle, data: IAV, menuEleme
const colId = options.menuElement.firstElementChild.getAttribute("data-col-id"); const colId = options.menuElement.firstElementChild.getAttribute("data-col-id");
const colData = options.data.view.columns.find((item: IAVColumn) => item.id === colId); const colData = options.data.view.columns.find((item: IAVColumn) => item.id === colId);
const nameElement = options.menuElement.querySelector('[data-type="name"]') as HTMLInputElement; const nameElement = options.menuElement.querySelector('[data-type="name"]') as HTMLInputElement;
nameElement.addEventListener("blur", (event) => { nameElement.addEventListener("blur", () => {
const newValue = nameElement.value; const newValue = nameElement.value;
if (newValue === colData.name) { if (newValue === colData.name) {
return; return;
@ -151,7 +151,7 @@ export const bindEditEvent = (options: { protyle: IProtyle, data: IAV, menuEleme
}); });
nameElement.addEventListener("keydown", (event: KeyboardEvent) => { nameElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) { if (event.isComposing) {
return return;
} }
if (event.key === "Escape") { if (event.key === "Escape") {
options.menuElement.parentElement.remove(); options.menuElement.parentElement.remove();
@ -196,7 +196,7 @@ export const bindEditEvent = (options: { protyle: IProtyle, data: IAV, menuEleme
(options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement).focus(); (options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement).focus();
} }
}); });
} };
export const getColIconByType = (type: TAVCol) => { export const getColIconByType = (type: TAVCol) => {
switch (type) { switch (type) {

View file

@ -57,7 +57,7 @@ export const openMenuPanel = (options: {
if (options.type === "sorts") { if (options.type === "sorts") {
bindSortsEvent(options.protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data);
} else if (options.type === "edit") { } else if (options.type === "edit") {
bindEditEvent({protyle: options.protyle, data, menuElement}) bindEditEvent({protyle: options.protyle, data, menuElement});
} }
} }
avPanelElement.addEventListener("dragstart", (event) => { avPanelElement.addEventListener("dragstart", (event) => {
@ -127,7 +127,7 @@ export const openMenuPanel = (options: {
data, data,
colId colId
}); });
bindEditEvent({protyle: options.protyle, data, menuElement}) bindEditEvent({protyle: options.protyle, data, menuElement});
} }
return; return;
} }
@ -479,7 +479,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "hideCol") { } else if (type === "hideCol") {
const isEdit = menuElement.querySelector('[data-type="goProperties"]') const isEdit = menuElement.querySelector('[data-type="goProperties"]');
const colId = isEdit ? menuElement.firstElementChild.getAttribute("data-col-id") : target.parentElement.getAttribute("data-id"); const colId = isEdit ? menuElement.firstElementChild.getAttribute("data-col-id") : target.parentElement.getAttribute("data-id");
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
@ -507,7 +507,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "showCol") { } else if (type === "showCol") {
const isEdit = menuElement.querySelector('[data-type="goProperties"]') const isEdit = menuElement.querySelector('[data-type="goProperties"]');
const colId = isEdit ? menuElement.firstElementChild.getAttribute("data-col-id") : target.parentElement.getAttribute("data-id"); const colId = isEdit ? menuElement.firstElementChild.getAttribute("data-col-id") : target.parentElement.getAttribute("data-id");
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
@ -535,15 +535,15 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "duplicateCol") { } else if (type === "duplicateCol") {
const colId = menuElement.firstElementChild.getAttribute("data-col-id") const colId = menuElement.firstElementChild.getAttribute("data-col-id");
const colData = data.view.columns.find((item: IAVColumn) => item.id === colId) const colData = data.view.columns.find((item: IAVColumn) => item.id === colId);
duplicateCol(options.protyle, colData.type, avID, colId, colData.name); duplicateCol(options.protyle, colData.type, avID, colId, colData.name);
avPanelElement.remove(); avPanelElement.remove();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeCol") { } else if (type === "removeCol") {
const colId = menuElement.firstElementChild.getAttribute("data-col-id") const colId = menuElement.firstElementChild.getAttribute("data-col-id");
const colData = data.view.columns.find((item: IAVColumn) => item.id === colId) const colData = data.view.columns.find((item: IAVColumn) => item.id === colId);
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "removeAttrViewCol", action: "removeAttrViewCol",
id: colId, id: colId,

View file

@ -62,7 +62,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
if (cell.valueType === "text") { if (cell.valueType === "text") {
text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`; text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`;
} else if (cell.valueType === "block") { } else if (cell.valueType === "block") {
text = `<span class="av__celltext">${cell.value?.block.content || ""}</span>` text = `<span class="av__celltext">${cell.value?.block.content || ""}</span>`;
if (cell.value?.block.id) { if (cell.value?.block.id) {
text += `<span class="b3-chip b3-chip--small" data-type="block-ref" data-id="${cell.value.block.id}" data-subtype="s">${window.siyuan.languages.openBy}</span>`; text += `<span class="b3-chip b3-chip--small" data-type="block-ref" data-id="${cell.value.block.id}" data-subtype="s">${window.siyuan.languages.openBy}</span>`;
} }

View file

@ -140,7 +140,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
if (!cellElements) { if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId}); menuElement.innerHTML = getEditHTML({protyle, data, colId});
bindEditEvent({protyle, data, menuElement}) bindEditEvent({protyle, data, menuElement});
} else { } else {
cellElements.forEach((cellElement: HTMLMediaElement) => { cellElements.forEach((cellElement: HTMLMediaElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
@ -159,7 +159,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
return true; return true;
} }
}); });
}) });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements);
} }
@ -203,7 +203,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
if (!cellElements) { if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId}); menuElement.innerHTML = getEditHTML({protyle, data, colId});
bindEditEvent({protyle, data, menuElement}) bindEditEvent({protyle, data, menuElement});
} else { } else {
cellElements.forEach((cellElement: HTMLElement) => { cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
@ -222,7 +222,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
return true; return true;
} }
}); });
}) });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements);
} }
@ -277,7 +277,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
if (!cellElements) { if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId}); menuElement.innerHTML = getEditHTML({protyle, data, colId});
bindEditEvent({protyle, data, menuElement}) bindEditEvent({protyle, data, menuElement});
} else { } else {
cellElements.forEach((cellElement: HTMLElement) => { cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
@ -297,7 +297,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
return true; return true;
} }
}); });
}) });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements);
} }