295 lines
11 KiB
JavaScript
295 lines
11 KiB
JavaScript
// ========================================
|
||
// 模块：视图选择UI
|
||
// ========================================
|
||
|
||
import { i18n } from './i18n.js';
|
||
|
||
// 视图按钮配置
|
||
const viewButtons = {
|
||
NodeList: [
|
||
{ id: "GraphView", attrName: "f", attrValue: "dt", icon: "iconFiles", labelKey: "转换为导图" },
|
||
{ id: "TableView", attrName: "f", attrValue: "bg", icon: "iconTable", labelKey: "转换为表格" },
|
||
{ id: "kanbanView", attrName: "f", attrValue: "kb", icon: "iconMenu", labelKey: "转换为看板" },
|
||
{ id: "timelineView", attrName: "f", attrValue: "tl", icon: "iconList", labelKey: "转换为时间线" },
|
||
{ id: "tabView", attrName: "f", attrValue: "tab", icon: "iconDock", labelKey: "转换为标签页" },
|
||
{ id: "DefaultView", attrName: "f", attrValue: "", icon: "iconList", labelKey: "恢复为列表" }
|
||
],
|
||
NodeTable: [
|
||
{ id: "FixWidth", attrName: "f", attrValue: "", icon: "iconTable", labelKey: "默认宽度" },
|
||
{ id: "FullWidth", attrName: "f", attrValue: "full", icon: "iconTable", labelKey: "页面宽度" },
|
||
{ separator: true },
|
||
{ id: "vHeader", attrName: "t", attrValue: "vbiaotou", icon: "iconSuper", labelKey: "竖向表头样式" },
|
||
{ id: "Removeth", attrName: "t", attrValue: "biaotou", icon: "iconSuper", labelKey: "空白表头样式" },
|
||
{ id: "Defaultth", attrName: "t", attrValue: "", icon: "iconSuper", labelKey: "恢复表头样式" }
|
||
]
|
||
};
|
||
|
||
// 创建视图选择菜单
|
||
const ViewSelect = (selectid, selecttype) => {
|
||
const button = document.createElement("button");
|
||
button.id = "viewselect";
|
||
button.className = "b3-menu__item";
|
||
button.innerHTML = `
|
||
<svg class="b3-menu__icon"><use xlink:href="#iconGlobalGraph"></use></svg>
|
||
<span class="b3-menu__label">${i18n.t("视图选择")}</span>
|
||
<svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
|
||
`;
|
||
|
||
const submenu = document.createElement("button");
|
||
submenu.id = "viewselectSub";
|
||
submenu.className = "b3-menu__submenu";
|
||
|
||
const menuItems = document.createElement("div");
|
||
menuItems.className = "b3-menu__items";
|
||
|
||
const buttons = viewButtons[selecttype] || [];
|
||
|
||
menuItems.innerHTML = buttons.map(btn => {
|
||
if (btn.separator) {
|
||
return `<button class="b3-menu__separator"></button>`;
|
||
} else {
|
||
return `
|
||
<button class="b3-menu__item" data-view-item="1" data-node-id="${selectid}"
|
||
data-attr-name="${btn.attrName}" data-attr-value="${btn.attrValue}">
|
||
<svg class="b3-menu__icon"><use xlink:href="#${btn.icon}"></use></svg>
|
||
<span class="b3-menu__label">${i18n.t(btn.labelKey)}</span>
|
||
</button>
|
||
`;
|
||
}
|
||
}).join("");
|
||
|
||
submenu.appendChild(menuItems);
|
||
button.appendChild(submenu);
|
||
return button;
|
||
};
|
||
|
||
// 获取选中的块信息
|
||
const getBlockSelected = () => {
|
||
const node = document.querySelector(".protyle-wysiwyg--select");
|
||
return node?.dataset?.nodeId ? {
|
||
id: node.dataset.nodeId,
|
||
type: node.dataset.type,
|
||
subtype: node.dataset.subtype
|
||
} : null;
|
||
};
|
||
|
||
// 清除转换数据
|
||
const clearTransformData = (id, blocks) => {
|
||
try {
|
||
const positions = JSON.parse(localStorage.getItem("dt-positions") || "{}");
|
||
if (positions[id]) {
|
||
delete positions[id];
|
||
localStorage.setItem("dt-positions", JSON.stringify(positions));
|
||
// 注意：cleanupDraggable函数需要在其他模块中定义
|
||
}
|
||
} catch (error) {
|
||
// 清除transform数据出错: error
|
||
}
|
||
};
|
||
|
||
// 统一API请求函数
|
||
const apiRequest = async (url, data) => {
|
||
try {
|
||
return await fetch(url, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"Authorization": `Token ${window.siyuan?.config?.api?.token ?? ""}`
|
||
},
|
||
body: JSON.stringify(data)
|
||
});
|
||
} catch (e) { /* API请求失败: e */ }
|
||
};
|
||
|
||
// API请求队列
|
||
const apiRequestQueue = new Map();
|
||
|
||
// 设置思源块属性
|
||
const 设置思源块属性 = async (id, attrs) => {
|
||
const key = `${id}-${JSON.stringify(attrs)}`;
|
||
if (apiRequestQueue.has(key)) return;
|
||
apiRequestQueue.set(key, true);
|
||
try {
|
||
await new Promise(resolve => setTimeout(resolve, 100));
|
||
await apiRequest("/api/attr/setBlockAttrs", { id, attrs });
|
||
apiRequestQueue.delete(key);
|
||
} catch (e) {
|
||
setTimeout(() => apiRequestQueue.delete(key), 1000);
|
||
}
|
||
};
|
||
|
||
// 插入菜单项
|
||
const InsertMenuItem = (selectid, selecttype) => {
|
||
const commonMenu = document.querySelector("#commonMenu .b3-menu__items");
|
||
if (!commonMenu) return;
|
||
|
||
const readonly = commonMenu.querySelector(`[data-id="updateAndCreatedAt"]`);
|
||
const selectview = commonMenu.querySelector(`[id="viewselect"]`);
|
||
|
||
if (readonly && !selectview) {
|
||
const separator = document.createElement("button");
|
||
separator.className = "b3-menu__separator";
|
||
|
||
commonMenu.insertBefore(ViewSelect(selectid, selecttype), readonly);
|
||
commonMenu.insertBefore(separator, readonly);
|
||
}
|
||
};
|
||
|
||
// 菜单监控处理器
|
||
let menuHandler = null;
|
||
let viewSelectClickHandler = null;
|
||
|
||
// 将列表转换为标签页结构
|
||
const convertToTabView = (listElement) => {
|
||
if (listElement._convertedToTab) return;
|
||
|
||
const children = listElement.querySelectorAll(':scope > .li');
|
||
if (children.length < 1) return;
|
||
|
||
listElement._originalHTML = listElement.innerHTML;
|
||
listElement._convertedToTab = true;
|
||
|
||
const headerContainer = document.createElement('div');
|
||
headerContainer.className = 'tab-header-container';
|
||
|
||
const headers = document.createElement('div');
|
||
headers.className = 'tab-headers';
|
||
|
||
const contentsContainer = document.createElement('div');
|
||
contentsContainer.className = 'tab-contents';
|
||
|
||
children.forEach((li, index) => {
|
||
const firstChild = li.querySelector(':scope > [data-node-id]:not(.list)');
|
||
const subList = li.querySelector(':scope > .list');
|
||
|
||
const tabHeader = document.createElement('div');
|
||
tabHeader.className = 'tab-header' + (index === 0 ? ' active' : '');
|
||
|
||
if (firstChild) tabHeader.appendChild(firstChild.cloneNode(true));
|
||
|
||
const tabContent = document.createElement('div');
|
||
tabContent.className = 'tab-content' + (index === 0 ? ' active' : '');
|
||
if (subList) tabContent.appendChild(subList.cloneNode(true));
|
||
|
||
headers.appendChild(tabHeader);
|
||
contentsContainer.appendChild(tabContent);
|
||
});
|
||
|
||
headerContainer.appendChild(headers);
|
||
listElement.innerHTML = '';
|
||
listElement.appendChild(headerContainer);
|
||
listElement.appendChild(contentsContainer);
|
||
|
||
// 为每个标签页单独绑定事件，避免全局监听
|
||
headers.addEventListener('click', (event) => {
|
||
const clickedTab = event.target.closest('.tab-header');
|
||
if (!clickedTab) return;
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const allTabs = headers.querySelectorAll('.tab-header');
|
||
const allContents = contentsContainer.querySelectorAll('.tab-content');
|
||
|
||
allTabs.forEach(t => t.classList.remove('active'));
|
||
allContents.forEach(c => c.classList.remove('active'));
|
||
|
||
clickedTab.classList.add('active');
|
||
const index = [...allTabs].indexOf(clickedTab);
|
||
allContents[index]?.classList.add('active');
|
||
});
|
||
};
|
||
|
||
const restoreFromTabView = (listElement) => {
|
||
if (!listElement._convertedToTab) return;
|
||
listElement.innerHTML = listElement._originalHTML || '';
|
||
delete listElement._originalHTML;
|
||
delete listElement._convertedToTab;
|
||
};
|
||
|
||
// 初始化菜单监控
|
||
export const initViewSelect = () => {
|
||
if (menuHandler) return;
|
||
|
||
const initTabViews = () => {
|
||
document.querySelectorAll('.protyle-wysiwyg [data-type="NodeList"][custom-f~="tab"]')
|
||
.forEach(el => !el._convertedToTab && convertToTabView(el));
|
||
};
|
||
|
||
setTimeout(initTabViews, 100);
|
||
|
||
// 保存事件监听器引用以便清理
|
||
viewSelectClickHandler = viewSelectClickHandler || {};
|
||
viewSelectClickHandler._loadedProtyleHandler = () => setTimeout(initTabViews, 200);
|
||
window.siyuan?.eventBus?.on('loaded-protyle', viewSelectClickHandler._loadedProtyleHandler);
|
||
|
||
// 防抖函数
|
||
let debounceTimer;
|
||
const debouncedInit = () => {
|
||
clearTimeout(debounceTimer);
|
||
debounceTimer = setTimeout(initTabViews, 150);
|
||
};
|
||
|
||
// 只监听 .protyle-wysiwyg 容器，减少监听范围
|
||
const observer = new MutationObserver(debouncedInit);
|
||
const protyleContainers = document.querySelectorAll('.protyle-wysiwyg');
|
||
protyleContainers.forEach(container => {
|
||
observer.observe(container, { childList: true, subtree: true, attributes: true, attributeFilter: ['custom-f'] });
|
||
});
|
||
|
||
viewSelectClickHandler._tabObserver = observer;
|
||
|
||
// 存储事件监听器引用，以便后续清理
|
||
menuHandler = () => {
|
||
requestAnimationFrame(() => {
|
||
const selectinfo = getBlockSelected();
|
||
if (selectinfo && (selectinfo.type === "NodeList" || selectinfo.type === "NodeTable")) {
|
||
InsertMenuItem(selectinfo.id, selectinfo.type);
|
||
}
|
||
});
|
||
};
|
||
|
||
window.addEventListener("mouseup", menuHandler);
|
||
|
||
// 统一的事件委托，处理视图选择子项点击
|
||
viewSelectClickHandler = (event) => {
|
||
const item = event.target.closest('.b3-menu__item[data-view-item="1"]');
|
||
if (!item) return;
|
||
|
||
const id = item.dataset.nodeId;
|
||
const attrName = "custom-" + item.dataset.attrName;
|
||
const attrValue = item.dataset.attrValue;
|
||
const blocks = document.querySelectorAll(`.protyle-wysiwyg [data-node-id="${id}"]`);
|
||
|
||
clearTransformData(id, blocks);
|
||
|
||
if (blocks?.length > 0) {
|
||
blocks.forEach(block => {
|
||
block.setAttribute(attrName, attrValue);
|
||
attrValue === "tab" ? convertToTabView(block) : restoreFromTabView(block);
|
||
});
|
||
设置思源块属性(id, { [attrName]: attrValue });
|
||
}
|
||
};
|
||
document.addEventListener("click", viewSelectClickHandler, true);
|
||
};
|
||
|
||
// 清理视图选择功能
|
||
export const cleanupViewSelect = () => {
|
||
if (menuHandler) {
|
||
window.removeEventListener("mouseup", menuHandler);
|
||
menuHandler = null;
|
||
}
|
||
if (viewSelectClickHandler) {
|
||
document.removeEventListener("click", viewSelectClickHandler, true);
|
||
if (viewSelectClickHandler._tabObserver) {
|
||
viewSelectClickHandler._tabObserver.disconnect();
|
||
}
|
||
if (viewSelectClickHandler._loadedProtyleHandler && window.siyuan?.eventBus) {
|
||
window.siyuan.eventBus.off('loaded-protyle', viewSelectClickHandler._loadedProtyleHandler);
|
||
}
|
||
viewSelectClickHandler = null;
|
||
}
|
||
};
|
||
|