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

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

Browse source
This commit is contained in:
Vanessa 2023-07-18 01:03:35 +08:00
parent 3dcf72fc32
commit 35b8e1e893
6 changed files with 224 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/business/_av.scss
View file

@ -239,6 +239,7 @@
.b3-menu {
max-height: 70vh;
min-width: 200px;
&__item .b3-chip {
max-width: 196px;

8
app/src/protyle/render/av/action.ts
View file

@ -70,7 +70,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const headerMoreElement = hasClosestByAttribute(event.target, "data-type", "av-header-more");
if (headerMoreElement) {
openMenuPanel(protyle, blockElement, "properties");
openMenuPanel({protyle, blockElement, type: "properties"});
event.preventDefault();
event.stopPropagation();
return true;
@ -78,7 +78,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const moreElement = hasClosestByAttribute(event.target, "data-type", "av-more");
if (moreElement) {
openMenuPanel(protyle, blockElement, "config");
openMenuPanel({protyle, blockElement, type: "config"});
event.preventDefault();
event.stopPropagation();
return true;
@ -86,7 +86,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const sortsElement = hasClosestByAttribute(event.target, "data-type", "av-sort");
if (sortsElement) {
openMenuPanel(protyle, blockElement, "sorts");
openMenuPanel({protyle, blockElement, type: "sorts"});
event.preventDefault();
event.stopPropagation();
return true;
@ -94,7 +94,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const filtersElement = hasClosestByAttribute(event.target, "data-type", "av-filter");
if (filtersElement) {
openMenuPanel(protyle, blockElement, "filters");
openMenuPanel({protyle, blockElement, type: "filters"});
event.preventDefault();
event.stopPropagation();
return true;

2
app/src/protyle/render/av/cell.ts
View file

@ -292,7 +292,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
} else if (type === "number") {
html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`;
} else if (["select", "mSelect"].includes(type) && blockElement) {
openMenuPanel(protyle, blockElement, "select", {cellElements});
openMenuPanel({protyle, blockElement, type: "select", cellElements});
return;
}
window.siyuan.menus.menu.remove();

57
app/src/protyle/render/av/col.ts
View file

@ -8,11 +8,60 @@ import {openMenuPanel} from "./openMenuPanel";
export const getEditHTML = (options: {
protyle: IProtyle,
blockElement: HTMLElement,
cellElement: HTMLElement,
colId: string,
data: IAV
}) => {
// TODO
let colData: IAVColumn
options.data.view.columns.find((item) => {
if (item.id === options.colId) {
colData = item;
return true;
}
})
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">
<svg><use xlink:href="#iconLeft"></use></svg>
</span>
<span class="b3-menu__label ft__center">${window.siyuan.languages.edit}</span>
<svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
</button>
<button class="b3-menu__separator"></button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>
<span class="b3-menu__label"><input style="margin: 4px 0" class="b3-text-field" type="text" value="${colData.name}"></span>
</button>`;
if (colData.options && colData.options.length > 0) {
html += `<button class="b3-menu__separator"></button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconAdd"></use></svg>
<span class="b3-menu__label"><input style="margin: 4px 0" class="b3-text-field" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span>
</button>`
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}">
<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})">
<span class="fn__ellipsis">${item.name}</span>
</span>
</div>
<svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
</button>`;
});
}
return `${html}
<button class="b3-menu__separator"></button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
<span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
</button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
</button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.delete}</span>
</button>`;
};
export const getColIconByType = (type: TAVCol) => {
@ -105,7 +154,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
icon: "iconEdit",
label: window.siyuan.languages.edit,
click() {
openMenuPanel(protyle, blockElement, "edit", {cellElement});
openMenuPanel({protyle, blockElement, type: "edit", colId});
}
});
}

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

@ -4,36 +4,39 @@ import {addCol} from "./addCol";
import {getColIconByType, getEditHTML} from "./col";
import {setPosition} from "../../../util/setPosition";
import {hasClosestByAttribute} from "../../util/hasClosest";
import {bindSelectEvent, getSelectHTML, addSelectColAndCell, setSelectCol, removeSelectCell} from "./select";
import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, removeCellOption} from "./select";
import {addFilter, getFiltersHTML, setFilter} from "./filter";
import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
export const openMenuPanel = (protyle: IProtyle,
export const openMenuPanel = (options: {
protyle: IProtyle,
blockElement: HTMLElement,
type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" = "config",
options?: any) => {
type: "select" | "properties" | "config" | "sorts" | "filters" | "edit",
colId?: string, // for edit
cellElements?: HTMLElement[] // for select
}) => {
let avPanelElement = document.querySelector(".av__panel");
if (avPanelElement) {
avPanelElement.remove();
return;
}
window.siyuan.menus.menu.remove();
const avId = blockElement.getAttribute("data-av-id");
const avId = options.blockElement.getAttribute("data-av-id");
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
const data = response.data as IAV;
let html;
if (type === "config") {
if (options.type === "config") {
html = getConfigHTML(data.view);
} else if (type === "properties") {
} else if (options.type === "properties") {
html = getPropertiesHTML(data.view);
} else if (type === "sorts") {
} else if (options.type === "sorts") {
html = getSortsHTML(data.view.columns, data.view.sorts);
} else if (type === "filters") {
} else if (options.type === "filters") {
html = getFiltersHTML(data.view);
} else if (type === "select") {
html = getSelectHTML(data.view, options);
} else if (type === "edit") {
html = getEditHTML({protyle, data, blockElement, cellElement: options.cellElement});
} else if (options.type === "select") {
html = getSelectHTML(data.view, options.cellElements);
} else if (options.type === "edit") {
html = getEditHTML({protyle: options.protyle, data, colId: options.colId});
}
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">
@ -42,17 +45,17 @@ export const openMenuPanel = (protyle: IProtyle,
</div>`);
avPanelElement = document.querySelector(".av__panel");
const menuElement = avPanelElement.lastElementChild as HTMLElement;
const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
if (type === "select") {
const tabRect = options.blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
if (options.type === "select") {
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
bindSelectEvent(protyle, data, menuElement, options);
bindSelectEvent(options.protyle, data, menuElement, options.cellElements);
menuElement.querySelector("input").select();
menuElement.querySelector("input").focus();
} else {
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
if (type === "sorts") {
bindSortsEvent(protyle, menuElement, data);
if (options.type === "sorts") {
bindSortsEvent(options.protyle, menuElement, data);
}
}
avPanelElement.addEventListener("dragstart", (event) => {
@ -64,7 +67,7 @@ export const openMenuPanel = (protyle: IProtyle,
window.siyuan.dragElement.style.opacity = "";
const sourceElement = window.siyuan.dragElement;
window.siyuan.dragElement = undefined;
if (protyle.disabled) {
if (options.protyle.disabled) {
event.preventDefault();
event.stopPropagation();
return;
@ -81,8 +84,8 @@ export const openMenuPanel = (protyle: IProtyle,
type = "sorts";
} else if (targetElement.querySelector('[data-type="removeFilter"]')) {
type = "filters";
} else if (targetElement.querySelector('[data-type="setSelectCol"]')) {
const colId = options.cellElements[0].dataset.colId;
} else if (targetElement.querySelector('[data-type="setColOption"]')) {
const colId = options.cellElements ? options.cellElements[0].dataset.colId : menuElement.firstElementChild.getAttribute("data-col-id");
const changeData = data.view.columns.find((column) => column.id === colId).options;
const oldData = Object.assign([], changeData);
let targetOption: { name: string, color: string };
@ -102,7 +105,7 @@ export const openMenuPanel = (protyle: IProtyle,
return true;
}
});
transaction(protyle, [{
transaction(options.protyle, [{
action: "updateAttrViewColOptions",
id: colId,
avID: data.id,
@ -113,8 +116,16 @@ export const openMenuPanel = (protyle: IProtyle,
avID: data.id,
data: oldData,
}]);
menuElement.innerHTML = getSelectHTML(data.view, options);
bindSelectEvent(protyle, data, menuElement, options);
if (options.cellElements) {
menuElement.innerHTML = getSelectHTML(data.view, options.cellElements);
bindSelectEvent(options.protyle, data, menuElement, options.cellElements);
} else {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
data,
colId
});
}
return;
}
const sourceId = sourceElement.dataset.id;
@ -140,7 +151,7 @@ export const openMenuPanel = (protyle: IProtyle,
}
});
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewSorts",
avID: avId,
data: changeData
@ -150,7 +161,7 @@ export const openMenuPanel = (protyle: IProtyle,
data: oldData
}]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data);
bindSortsEvent(options.protyle, menuElement, data);
return;
}
if (type === "filters") {
@ -174,7 +185,7 @@ export const openMenuPanel = (protyle: IProtyle,
}
});
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewFilters",
avID: avId,
data: changeData
@ -186,7 +197,7 @@ export const openMenuPanel = (protyle: IProtyle,
menuElement.innerHTML = getFiltersHTML(data.view);
return;
}
transaction(protyle, [{
transaction(options.protyle, [{
action: "sortAttrViewCol",
avID: avId,
previousID: (targetElement.classList.contains("dragover__top") ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id")) || "",
@ -270,12 +281,12 @@ export const openMenuPanel = (protyle: IProtyle,
break;
} else if (type === "goSorts") {
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data);
bindSortsEvent(options.protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation();
break;
} else if (type === "removeSorts") {
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewSorts",
avID: avId,
data: []
@ -286,12 +297,19 @@ export const openMenuPanel = (protyle: IProtyle,
}]);
data.view.sorts = [];
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data);
bindSortsEvent(options.protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation();
break;
} else if (type === "addSort") {
addSort({data, rect: target.getBoundingClientRect(), menuElement, tabRect, avId, protyle});
addSort({
data,
rect: target.getBoundingClientRect(),
menuElement,
tabRect,
avId,
protyle: options.protyle
});
event.stopPropagation();
break;
} else if (type === "removeSort") {
@ -302,7 +320,7 @@ export const openMenuPanel = (protyle: IProtyle,
return true;
}
});
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewSorts",
avID: avId,
data: data.view.sorts
@ -312,7 +330,7 @@ export const openMenuPanel = (protyle: IProtyle,
data: oldSorts
}]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data);
bindSortsEvent(options.protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation();
break;
@ -322,7 +340,7 @@ export const openMenuPanel = (protyle: IProtyle,
event.stopPropagation();
break;
} else if (type === "removeFilters") {
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewFilters",
avID: avId,
data: []
@ -337,7 +355,14 @@ export const openMenuPanel = (protyle: IProtyle,
event.stopPropagation();
break;
} else if (type === "addFilter") {
addFilter({data, rect: target.getBoundingClientRect(), menuElement, tabRect, avId, protyle});
addFilter({
data,
rect: target.getBoundingClientRect(),
menuElement,
tabRect,
avId,
protyle: options.protyle
});
event.stopPropagation();
break;
} else if (type === "removeFilter") {
@ -349,7 +374,7 @@ export const openMenuPanel = (protyle: IProtyle,
return true;
}
});
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewFilters",
avID: avId,
data: data.view.filters
@ -367,7 +392,7 @@ export const openMenuPanel = (protyle: IProtyle,
if (item.column === target.parentElement.parentElement.dataset.id) {
setFilter({
filter: item,
protyle,
protyle: options.protyle,
data,
target
});
@ -378,7 +403,7 @@ export const openMenuPanel = (protyle: IProtyle,
break;
} else if (type === "newCol") {
avPanelElement.remove();
const addMenu = addCol(protyle, blockElement);
const addMenu = addCol(options.protyle, options.blockElement);
addMenu.open({
x: tabRect.right,
y: tabRect.bottom,
@ -408,7 +433,7 @@ export const openMenuPanel = (protyle: IProtyle,
}
});
if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations);
transaction(options.protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
@ -435,15 +460,23 @@ export const openMenuPanel = (protyle: IProtyle,
}
});
if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations);
transaction(options.protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
event.stopPropagation();
break;
} else if (type === "editCol") {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
data,
colId: target.parentElement.dataset.id
});
event.stopPropagation();
break;
} else if (type === "hideCol") {
const colId = target.parentElement.getAttribute("data-id");
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewColHidden",
id: colId,
avID: avId,
@ -461,7 +494,7 @@ export const openMenuPanel = (protyle: IProtyle,
break;
} else if (type === "showCol") {
const colId = target.parentElement.getAttribute("data-id");
transaction(protyle, [{
transaction(options.protyle, [{
action: "setAttrViewColHidden",
id: colId,
avID: avId,
@ -477,17 +510,17 @@ export const openMenuPanel = (protyle: IProtyle,
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation();
break;
} else if (type === "setSelectCol") {
setSelectCol(protyle, data, options, target);
} else if (type === "setColOption") {
setColOption(options.protyle, data, target, options.cellElements);
event.stopPropagation();
break;
} else if (type === "addSelectColAndCell") {
addSelectColAndCell(protyle, data, options, target, menuElement);
} else if (type === "addColOptionOrCell") {
addColOptionOrCell(options.protyle, data, options.cellElements, target, menuElement);
window.siyuan.menus.menu.remove();
event.stopPropagation();
break;
} else if (type === "removeSelectCell") {
removeSelectCell(protyle, data, options, target.parentElement);
} else if (type === "removeCellOption") {
removeCellOption(options.protyle, data, options.cellElements, target.parentElement);
event.stopPropagation();
break;
}
@ -511,7 +544,7 @@ const getPropertiesHTML = (data: IAVTable) => {
</span>
</div>
<svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEyeoff"></use></svg>
<svg class="b3-menu__action"><use xlink:href="#iconEdit"></use></svg>
<svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
</button>`;
} else {
showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
@ -523,7 +556,7 @@ const getPropertiesHTML = (data: IAVTable) => {
</span>
</div>
<svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEye"></use></svg>
<svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}"><use xlink:href="#iconEdit"></use></svg>
<svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
</button>`;
}
});

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

@ -3,6 +3,7 @@ import {transaction} from "../../wysiwyg/transaction";
import {hasClosestByClassName} from "../../util/hasClosest";
import {confirmDialog} from "../../../dialog/confirmDialog";
import {upDownHint} from "../../../util/upDownHint";
import {getEditHTML} from "./col";
const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => {
let html = "";
@ -12,14 +13,14 @@ 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 data-type="addSelectColAndCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
html += `<button data-type="addColOptionOrCell" 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})">
<span class="fn__ellipsis">${item.name}</span>
</span>
</div>
<svg class="b3-menu__action" data-type="setSelectCol"><use xlink:href="#iconEdit"></use></svg>
<svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
</button>`;
}
if (key === item.name) {
@ -29,7 +30,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
}
if (!hasMatch && key) {
const colorIndex = (options?.length || 0) % 13 + 1;
html = `<button data-type="addSelectColAndCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
html = `<button data-type="addColOptionOrCell" 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})">
@ -42,16 +43,14 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
return html;
};
export const removeSelectCell = (protyle: IProtyle, data: IAV, options: {
cellElements: HTMLElement[]
}, target: HTMLElement) => {
export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => {
if (!target) {
return;
}
const colId = options.cellElements[0].dataset.colId;
const colId = cellElements[0].dataset.colId;
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
options.cellElements.forEach(item => {
cellElements.forEach(item => {
const rowID = item.parentElement.dataset.id;
const cellId = item.dataset.id;
let cellData: IAVCell;
@ -97,16 +96,15 @@ export const removeSelectCell = (protyle: IProtyle, data: IAV, options: {
target.remove();
};
export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
cellElements: HTMLElement[];
}, target: HTMLElement,) => {
export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, cellElements?: HTMLElement[]) => {
const menuElement = hasClosestByClassName(target, "b3-menu");
if (!menuElement) {
return;
}
const colId = cellElements ? cellElements[0].dataset.colId : menuElement.firstElementChild.getAttribute("data-col-id");
let name = target.parentElement.dataset.name;
let color = target.parentElement.dataset.color;
const menu = new Menu("av-select-option", () => {
const menu = new Menu("av-col-option", () => {
if (name === inputElement.value) {
return;
}
@ -140,10 +138,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true;
}
});
if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId});
} else {
cellElements.forEach((cellElement: HTMLMediaElement) => {
data.view.rows.find(row => {
if (row.id === options.cellElements[0].parentElement.dataset.id) {
if (row.id === cellElement.parentElement.dataset.id) {
row.cells.find(cell => {
if (cell.id === options.cellElements[0].dataset.id) {
if (cell.id === cellElement.dataset.id) {
cell.value.mSelect.find((item) => {
if (item.content === name) {
item.content = inputElement.value;
@ -156,13 +158,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true;
}
});
menuElement.innerHTML = getSelectHTML(data.view, options);
bindSelectEvent(protyle, data, menuElement, options);
})
menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements);
}
});
if (menu.isOpen) {
return;
}
const colId = options.cellElements[0].dataset.colId;
menu.addItem({
iconHTML: "",
label: `<input class="b3-text-field" style="margin: 4px 0" value="${name}">`
@ -197,10 +200,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true;
}
});
if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId});
} else {
cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => {
if (row.id === options.cellElements[0].parentElement.dataset.id) {
if (row.id === cellElement.parentElement.dataset.id) {
row.cells.find(cell => {
if (cell.id === options.cellElements[0].dataset.id) {
if (cell.id === cellElement.dataset.id) {
cell.value.mSelect.find((item, index) => {
if (item.content === newName) {
cell.value.mSelect.splice(index, 1);
@ -213,8 +220,10 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true;
}
});
menuElement.innerHTML = getSelectHTML(data.view, options);
bindSelectEvent(protyle, data, menuElement, options);
})
menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements);
}
});
}
});
@ -264,10 +273,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true;
}
});
if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId});
} else {
cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => {
if (row.id === options.cellElements[0].parentElement.dataset.id) {
if (row.id === cellElement.parentElement.dataset.id) {
row.cells.find(cell => {
if (cell.id === options.cellElements[0].dataset.id) {
if (cell.id === cellElement.dataset.id) {
cell.value.mSelect.find((item) => {
if (item.content === name) {
item.content = inputElement.value;
@ -281,10 +294,12 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true;
}
});
})
menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements);
}
name = inputElement.value;
color = (index + 1).toString();
menuElement.innerHTML = getSelectHTML(data.view, options);
bindSelectEvent(protyle, data, menuElement, options);
return true;
}
});
@ -300,11 +315,9 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
inputElement.select();
};
export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, options: {
cellElements: HTMLElement[]
}) => {
export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[]) => {
const inputElement = menuElement.querySelector("input");
const colId = options.cellElements[0].dataset.colId;
const colId = cellElements[0].dataset.colId;
let colData: IAVColumn;
data.view.columns.find((item: IAVColumn) => {
if (item.id === colId) {
@ -336,18 +349,16 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
if (!currentElement) {
currentElement = menuElement.querySelector(".b3-menu__item--current");
}
addSelectColAndCell(protyle, data, options, currentElement, menuElement);
addColOptionOrCell(protyle, data, cellElements, currentElement, menuElement);
} else if (event.key === "Backspace" && inputElement.value === "") {
removeSelectCell(protyle, data, options, inputElement.previousElementSibling as HTMLElement);
removeCellOption(protyle, data, cellElements, inputElement.previousElementSibling as HTMLElement);
} else if (event.key === "Escape") {
menuElement.parentElement.remove();
}
});
};
export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
cellElements: HTMLElement[]
}, currentElement: HTMLElement, menuElement: HTMLElement) => {
export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], currentElement: HTMLElement, menuElement: HTMLElement) => {
let hasSelected = false;
Array.from(menuElement.querySelectorAll(".b3-chips .b3-chip")).find((item: HTMLElement) => {
if (item.dataset.content === currentElement.dataset.name) {
@ -360,10 +371,10 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
return;
}
const colId = options.cellElements[0].dataset.colId;
const colId = cellElements[0].dataset.colId;
let cellIndex = 0;
Array.from(options.cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
if (item.dataset.id === options.cellElements[0].dataset.id) {
Array.from(cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
if (item.dataset.id === cellElements[0].dataset.id) {
cellIndex = index;
return true;
}
@ -381,7 +392,7 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = [];
options.cellElements.forEach(item => {
cellElements.forEach(item => {
let cellData: IAVCell;
const rowID = item.parentElement.dataset.id;
data.view.rows.find(row => {
@ -460,14 +471,14 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
if (colData.type === "select") {
menuElement.parentElement.remove();
} else {
menuElement.innerHTML = getSelectHTML(data.view, options);
bindSelectEvent(protyle, data, menuElement, options);
menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements);
menuElement.querySelector("input").focus();
}
};
export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLElement[] }) => {
const colId = options.cellElements[0].dataset["colId"];
export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
const colId = cellElements[0].dataset["colId"];
const colData = data.columns.find(item => {
if (item.id === colId) {
return item;
@ -476,7 +487,7 @@ export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLEleme
const commonOptions: { content: string, color: string }[][] = [];
const allUniqueOptions: { content: string, color: string }[] = [];
options.cellElements.forEach((cellElement) => {
cellElements.forEach((cellElement) => {
data.rows.find(row => {
if (cellElement.parentElement.dataset.id === row.id) {
const commonOption: { content: string, color: string }[] = [];
@ -514,7 +525,7 @@ export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLEleme
}
});
if (everyRowHas && selectedHTML.indexOf(`data-content="${unique.content}"`) === -1) {
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeSelectCell"><use xlink:href="#iconCloseRound"></use></svg></div>`;
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
}
});