81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
// ========================================
|
||
// 模块：鼠标中键折叠/展开功能
|
||
// ========================================
|
||
|
||
// 查找可编辑父元素的工具函数
|
||
const findEditableParent = (node) => {
|
||
return node.closest('[contenteditable="true"], .protyle-wysiwyg');
|
||
};
|
||
|
||
// 初始化鼠标中键折叠/展开功能
|
||
export const initMiddleClickCollapse = () => {
|
||
// 在初始化之前先清理之前的实例
|
||
if (window.theme && window.theme._collapseHandler) {
|
||
cleanupMiddleClickCollapse();
|
||
}
|
||
|
||
const DEBOUNCE_TIME = 300;
|
||
let lastClickTime = 0;
|
||
|
||
const collapseHandler = (e) => {
|
||
if (e.button !== 1 || e.shiftKey || e.altKey || Date.now() - lastClickTime < DEBOUNCE_TIME) return;
|
||
lastClickTime = Date.now();
|
||
|
||
// 查找可编辑块和目标元素
|
||
const editable = findEditableParent(e.target);
|
||
if (!editable) return;
|
||
|
||
const found = editable.closest('[data-type="NodeListItem"], [data-type="NodeHeading"]');
|
||
if (!found) return;
|
||
|
||
e.preventDefault();
|
||
|
||
// 处理列表项或标题的折叠/展开
|
||
const dataType = found.getAttribute("data-type");
|
||
if (dataType === "NodeListItem") {
|
||
const nodeId = found.getAttribute("data-node-id");
|
||
if (!nodeId || !found.querySelector(':scope > .list')) return;
|
||
|
||
const fold = found.getAttribute("fold");
|
||
const newFold = fold === "1" ? "0" : "1";
|
||
|
||
// 直接发送API请求设置折叠状态
|
||
fetch('/api/attr/setBlockAttrs', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Token ${window.siyuan?.config?.api?.token ?? ""}`
|
||
},
|
||
body: JSON.stringify({
|
||
id: nodeId,
|
||
attrs: { fold: newFold }
|
||
})
|
||
}).then(() => {
|
||
found.setAttribute('fold', newFold);
|
||
});
|
||
} else if (dataType === "NodeHeading") {
|
||
// 查找并点击同级的折叠按钮
|
||
const foldBtn = found.closest(".protyle")
|
||
?.querySelector(".protyle-gutters")
|
||
?.querySelector('[data-type="fold"]');
|
||
foldBtn?.click();
|
||
}
|
||
};
|
||
|
||
if (!window.theme) {
|
||
window.theme = {};
|
||
}
|
||
window.theme._collapseHandler = collapseHandler;
|
||
document.body.addEventListener("mousedown", collapseHandler);
|
||
};
|
||
|
||
// 添加清理函数
|
||
export const cleanupMiddleClickCollapse = () => {
|
||
if (window.theme && window.theme._collapseHandler) {
|
||
document.body.removeEventListener("mousedown", window.theme._collapseHandler);
|
||
window.theme._collapseHandler = null;
|
||
}
|
||
};
|
||
|
||
// 将清理函数也添加到window对象上，以便在destroyTheme中正确调用
|
||
window.cleanupMiddleClickCollapse = cleanupMiddleClickCollapse; |