mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-24 10:30:13 +01:00
This commit is contained in:
Vanessa
parent
f4a8de4a14
commit
055e3a755d
3 changed files with 112 additions and 87 deletions
|
|
@ -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,88 +222,66 @@ 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);
|
||||
cellData.value.mSelect.content.push({
|
||||
color: currentElement.dataset.color,
|
||||
content: currentElement.dataset.name
|
||||
});
|
||||
} else {
|
||||
oldValue = Object.assign({}, cellData.value.select);
|
||||
cellData.value.select = {
|
||||
color: currentElement.dataset.color,
|
||||
content: currentElement.dataset.name
|
||||
};
|
||||
}
|
||||
if (currentElement.querySelector(".b3-menu__accelerator")) {
|
||||
colData.options.push({
|
||||
color: currentElement.dataset.color,
|
||||
name: currentElement.dataset.name
|
||||
});
|
||||
transaction(protyle, [{
|
||||
action: "updateAttrViewColOptions",
|
||||
id: colId,
|
||||
parentID: data.id,
|
||||
data: colData.options
|
||||
}, {
|
||||
action: "updateAttrViewCell",
|
||||
id: cellId,
|
||||
rowID: rowId,
|
||||
parentID: data.id,
|
||||
data: {
|
||||
[colData.type]: cellData.value
|
||||
}
|
||||
let oldValue;
|
||||
if (colData.type !== "select") {
|
||||
oldValue = Object.assign([], cellData.value.mSelect.content);
|
||||
cellData.value.mSelect.content.push({
|
||||
color: currentElement.dataset.color,
|
||||
content: currentElement.dataset.name
|
||||
});
|
||||
} else {
|
||||
oldValue = Object.assign({}, cellData.value.select);
|
||||
cellData.value.select = {
|
||||
color: currentElement.dataset.color,
|
||||
content: currentElement.dataset.name
|
||||
};
|
||||
}], [{
|
||||
action: "removeAttrViewColOption",
|
||||
id: colId,
|
||||
parentID: data.id,
|
||||
data: currentElement.dataset.name,
|
||||
}]);
|
||||
} else {
|
||||
transaction(protyle, [{
|
||||
action: "updateAttrViewCell",
|
||||
id: cellId,
|
||||
rowID: rowId,
|
||||
parentID: data.id,
|
||||
data: cellData.value
|
||||
}], [{
|
||||
action: "updateAttrViewCell",
|
||||
id: cellId,
|
||||
rowID: rowId,
|
||||
parentID: data.id,
|
||||
data: {
|
||||
[colData.type]: oldValue
|
||||
}
|
||||
if (currentElement.querySelector(".b3-menu__accelerator")) {
|
||||
colData.options.push({
|
||||
color: currentElement.dataset.color,
|
||||
name: currentElement.dataset.name
|
||||
});
|
||||
transaction(protyle, [{
|
||||
action: "updateAttrViewColOptions",
|
||||
id: colId,
|
||||
parentID: data.id,
|
||||
data: colData.options
|
||||
}, {
|
||||
action: "updateAttrViewCell",
|
||||
id: cellId,
|
||||
rowID: rowId,
|
||||
parentID: data.id,
|
||||
data: {
|
||||
[colData.type]: cellData.value
|
||||
}
|
||||
}], [{
|
||||
action: "removeAttrViewColOption",
|
||||
id: colId,
|
||||
parentID: data.id,
|
||||
data: currentElement.dataset.name,
|
||||
}]);
|
||||
} else {
|
||||
transaction(protyle, [{
|
||||
action: "updateAttrViewCell",
|
||||
id: cellId,
|
||||
rowID: rowId,
|
||||
parentID: data.id,
|
||||
data: cellData.value
|
||||
}], [{
|
||||
action: "updateAttrViewCell",
|
||||
id: cellId,
|
||||
rowID: rowId,
|
||||
parentID: data.id,
|
||||
data: {
|
||||
[colData.type]: oldValue
|
||||
}
|
||||
}]);
|
||||
}
|
||||
if (colData.type === "select") {
|
||||
menuElement.parentElement.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}]);
|
||||
}
|
||||
if (colData.type === "select") {
|
||||
menuElement.parentElement.remove();
|
||||
}
|
||||
}
|
||||
|
||||
export const getSelectHTML = (data: IAV, options: { cellElement: HTMLElement }) => {
|
||||
const cellId = options.cellElement.dataset.id;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue