Skip to content

Commit

Permalink
🎨 fix siyuan-note#10768
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Apr 12, 2024
1 parent 541483e commit 8cdcc98
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 60 deletions.
101 changes: 46 additions & 55 deletions app/src/protyle/render/av/asset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ export const bindAssetEvent = (options: {
protyle: options.protyle,
data: options.data,
cellElements: options.cellElements,
type: "addUpdate",
addUpdateValue: value,
addValue: value,
blockElement: options.blockElement
});
});
Expand All @@ -53,20 +52,20 @@ export const bindAssetEvent = (options: {

export const getAssetHTML = (cellElements: HTMLElement[]) => {
let html = "";
genCellValueByElement("mAsset", cellElements[0]).mAsset.forEach(item => {
genCellValueByElement("mAsset", cellElements[0]).mAsset.forEach((item, index) => {
if (!item.content) {
return;
}
let contentHTML;
if (item.type === "image") {
contentHTML = `<span data-type="openAssetItem" class="fn__flex-1">
contentHTML = `<span data-type="openAssetItem" class="fn__flex-1 ariaLabel" aria-label="${item.content}">
<img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/>
</span>`;
} else {
contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label" style="max-width: 360px">${item.name}</span>`;
contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label ariaLabel" aria-label="${item.content}" style="max-width: 360px">${item.name}</span>`;
}

html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
html += `<button class="b3-menu__item" draggable="true" data-index="${index}" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
${contentHTML}
<svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg>
Expand Down Expand Up @@ -94,10 +93,10 @@ export const updateAssetCell = (options: {
protyle: IProtyle,
data: IAV,
cellElements: HTMLElement[],
type: "replace" | "addUpdate" | "remove",
replaceValue?: IAVCellAssetValue[],
addUpdateValue?: IAVCellAssetValue[],
removeContent?: string,
addValue?: IAVCellAssetValue[],
updateValue?: { index: number, value: IAVCellAssetValue }
removeIndex?: number,
blockElement: Element
}) => {
const colId = options.cellElements[0].dataset.colId;
Expand All @@ -115,33 +114,20 @@ export const updateAssetCell = (options: {
const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
const oldValue = JSON.parse(JSON.stringify(cellValue));
if (elementIndex === 0) {
if (options.type === "remove") {
cellValue.mAsset.find((oldItem, index) => {
if (oldItem.content === options.removeContent) {
cellValue.mAsset.splice(index, 1);
if (typeof options.removeIndex === "number") {
cellValue.mAsset.splice(options.removeIndex, 1);
} else if (options.addValue?.length > 0) {
cellValue.mAsset = cellValue.mAsset.concat(options.addValue);
} else if (options.updateValue) {
cellValue.mAsset.find((assetItem, index) => {
if (index === options.updateValue.index) {
assetItem.content = options.updateValue.value.content;
assetItem.type = options.updateValue.value.type;
assetItem.name = options.updateValue.value.name;
return true;
}
});
} else if (options.type === "addUpdate") {
options.addUpdateValue.forEach(newitem => {
if (!newitem.content) {
return;
}
const hasMatch = cellValue.mAsset.find(oldItem => {
if (oldItem.content === newitem.content) {
oldItem.name = newitem.name;
oldItem.type = newitem.type;
return true;
}
});
if (!hasMatch) {
if (newitem.type === "file" && !newitem.name) {
newitem.name = newitem.content;
}
cellValue.mAsset.push(newitem);
}
});
} else {
} else if (options.replaceValue?.length > 0) {
cellValue.mAsset = options.replaceValue;
}
mAssetValue = cellValue.mAsset;
Expand Down Expand Up @@ -203,20 +189,23 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
const linkAddress = target.dataset.content;
const type = target.dataset.type as "image" | "file";
const menu = new Menu("av-asset-edit", () => {
if (!textElement || !textElement.value || textElement.value === target.dataset.name) {
if (textElements.length < 2 || !textElements[0].value ||
(textElements[0].value === linkAddress && textElements[1].value === target.dataset.name)) {
return;
}
updateAssetCell({
protyle,
data,
cellElements,
type: "addUpdate",
blockElement,
addUpdateValue: [{
content: linkAddress,
name: textElement.value,
type
}]
updateValue: {
index: parseInt(target.dataset.index),
value: {
content: textElements[0].value,
name: textElements[1].value,
type
}
}
});
});
if (menu.isOpen) {
Expand All @@ -226,7 +215,11 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
menu.addItem({
iconHTML: "",
type: "readonly",
label: `${window.siyuan.languages.title}<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`,
label: `${window.siyuan.languages.link}
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px;resize: vertical;" class="b3-text-field"></textarea>
<div class="fn__hr"></div>
${window.siyuan.languages.title}
<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;resize: vertical;" rows="1" class="b3-text-field"></textarea>`,
});
} else {
menu.addItem({
Expand All @@ -246,8 +239,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
data,
cellElements,
blockElement,
type: "remove",
removeContent: linkAddress
removeIndex: parseInt(target.dataset.index)
});
}
});
Expand All @@ -257,9 +249,10 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element);
}
/// #endif
const textElement = menu.element.querySelector("textarea");
if (textElement) {
textElement.value = target.dataset.name;
const textElements = menu.element.querySelectorAll("textarea");
if (textElements.length > 1) {
textElements[1].value = target.dataset.name;
textElements[0].value = linkAddress;
}
const rect = target.getBoundingClientRect();
menu.open({
Expand All @@ -281,8 +274,7 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
data,
cellElements,
blockElement,
type: "addUpdate",
addUpdateValue: [{
addValue: [{
type: "file",
name: textElements[1].value,
content: textElements[0].value,
Expand All @@ -296,10 +288,10 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
iconHTML: "",
type: "readonly",
label: `${window.siyuan.languages.link}
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px;resize: vertical;" class="b3-text-field"></textarea>
<div class="fn__hr"></div>
${window.siyuan.languages.title}
<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;" rows="1" class="b3-text-field"></textarea>`,
<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;resize: vertical;" rows="1" class="b3-text-field"></textarea>`,
});
const rect = target.getBoundingClientRect();
menu.open({
Expand All @@ -320,18 +312,18 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
const blockElement = hasClosestBlock(cellElement);
if (blockElement) {
hideMessage(msgId);
const addUpdateValue: IAVCellAssetValue[] = [];
const addValue: IAVCellAssetValue[] = [];
Object.keys(response.data.succMap).forEach(key => {
const type = pathPosix().extname(key).toLowerCase();
const name = key.substring(0, key.length - type.length);
if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
addUpdateValue.push({
addValue.push({
type: "image",
name,
content: response.data.succMap[key],
});
} else {
addUpdateValue.push({
addValue.push({
type: "file",
name,
content: response.data.succMap[key],
Expand All @@ -348,8 +340,7 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
blockElement,
data: response.data as IAV,
cellElements: [cellElement],
type: "addUpdate",
addUpdateValue
addValue
});
});
}
Expand Down
4 changes: 2 additions & 2 deletions app/src/protyle/render/av/cell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -675,9 +675,9 @@ export const renderCell = (cellValue: IAVCellValue) => {
} else if (cellValue.type === "mAsset") {
cellValue?.mAsset?.forEach((item) => {
if (item.type === "image") {
text += `<img class="av__cellassetimg" src="${item.content}">`;
text += `<img class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${item.content}">`;
} else {
text += `<span class="b3-chip av__celltext--url" data-url="${item.content}">${item.name}</span>`;
text += `<span class="b3-chip av__celltext--url ariaLabel" aria-label="${item.content}" data-url="${item.content}">${item.name}</span>`;
}
});
} else if (cellValue.type === "checkbox") {
Expand Down
4 changes: 1 addition & 3 deletions app/src/protyle/render/av/openMenuPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,6 @@ export const openMenuPanel = (options: {
protyle: options.protyle,
data,
cellElements: options.cellElements,
type: "replace",
replaceValue,
blockElement: options.blockElement
});
Expand Down Expand Up @@ -1103,8 +1102,7 @@ export const openMenuPanel = (options: {
protyle: options.protyle,
data,
cellElements: options.cellElements,
type: "addUpdate",
addUpdateValue: [value],
addValue: [value],
blockElement: options.blockElement
});
window.siyuan.menus.menu.remove();
Expand Down

0 comments on commit 8cdcc98

Please sign in to comment.