Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-21 17:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ https://github.com/siyuan-note/siyuan/issues/8694

Browse source
This commit is contained in:
Vanessa 2023-07-10 00:17:54 +08:00
parent f4a8de4a14
commit 055e3a755d
3 changed files with 112 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -4,7 +4,7 @@ import {addCol} from "./addCol";
import {getColIconByType} from "./col";
import {setPosition} from "../../../util/setPosition";
import {hasClosestByAttribute} from "../../util/hasClosest";
import {bindSelectEvent, getSelectHTML, setSelectOption} from "./select";
import {bindSelectEvent, getSelectHTML, setOptionCell, setSelectOption} from "./select";
import {addFilter, getFiltersHTML, setFilter} from "./filter";
import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
@ -435,6 +435,10 @@ export const openMenuPanel = (protyle: IProtyle,
setSelectOption(protyle, data, options, target);
event.stopPropagation();
break;
} else if (type === "setOptionCell") {
setOptionCell(protyle, data, options, target, menuElement);
event.stopPropagation();
break;
}
target = target.parentElement;
}

6
app/src/protyle/render/av/render.ts
View file

@ -54,7 +54,7 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
if (data.columns[index].hidden) {
return;
}
let text: string;
let text = "";
if (cell.valueType === "text") {
text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`;
} else if (cell.valueType === "block") {
@ -68,7 +68,9 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
text = "<span class=\"av__celltext\"></span>";
}
} else if (cell.valueType === "mSelect") {
text = `<span class="av__celltext">${cell.value?.mSelect.content || ""}</span>`;
(cell.value?.mSelect as [])?.forEach((item: { content: string, color: string }) => {
text += `<span class="av__celltext"><span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span></span>`;
});
} else if (cell.valueType === "date") {
text = `<span class="av__celltext">${cell.value?.date.content || ""}</span>`;
}

71
app/src/protyle/render/av/select.ts
View file

@ -13,7 +13,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
if (!key ||
(key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
html += `<button data-type="setOptionCell" 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>
<div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color)${item.color}">
@ -30,14 +30,15 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
}
if (!hasMatch && key) {
const colorIndex = (options?.length || 0) % 13 + 1;
html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
html = `<button data-type="setOptionCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
<div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${colorIndex});color:var(--b3-font-color${colorIndex})">
<span class="fn__ellipsis">${key}</span>
</span>
</div>
<span class="b3-menu__accelerator">Enter</span>
</button>`;
</button>${html}`;
}
return html;
};
@ -156,6 +157,46 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
cellElement: HTMLElement
}) => {
const inputElement = menuElement.querySelector("input");
const colId = options.cellElement.dataset.colId;
let colData: IAVColumn;
data.columns.find((item: IAVColumn) => {
if (item.id === colId) {
colData = item;
return;
}
});
if (!colData.options) {
colData.options = [];
}
inputElement.addEventListener("input", (event: InputEvent) => {
if (event.isComposing) {
return;
}
menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
});
inputElement.addEventListener("compositionend", (event: InputEvent) => {
if (event.isComposing) {
return;
}
menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
});
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
let currentElement = upDownHint(menuElement.lastElementChild, event, "b3-menu__item--current");
if (event.key === "Enter") {
if (!currentElement) {
currentElement = menuElement.querySelector(".b3-menu__item--current");
}
setOptionCell(protyle, data, options, currentElement, menuElement);
}
});
};
export const setOptionCell = (protyle: IProtyle, data: IAV, options: {
cellElement: HTMLElement
}, currentElement: HTMLElement, menuElement:HTMLElement) => {
const rowId = options.cellElement.parentElement.dataset.id;
const colId = options.cellElement.dataset.colId;
const cellId = options.cellElement.dataset.id;
@ -181,27 +222,7 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
return true;
}
});
inputElement.addEventListener("input", (event: InputEvent) => {
if (event.isComposing) {
return;
}
menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
});
inputElement.addEventListener("compositionend", (event: InputEvent) => {
if (event.isComposing) {
return;
}
menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
});
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
let currentElement = upDownHint(menuElement.lastElementChild, event, "b3-menu__item--current");
if (event.key === "Enter") {
if (!currentElement) {
currentElement = menuElement.querySelector(".b3-menu__item--current");
}
let oldValue;
if (colData.type !== "select") {
oldValue = Object.assign([], cellData.value.mSelect.content);
@ -261,8 +282,6 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
menuElement.parentElement.remove();
}
}
});
};
export const getSelectHTML = (data: IAV, options: { cellElement: HTMLElement }) => {
const cellId = options.cellElement.dataset.id;