mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-05-16 09:00:42 +08:00
501 lines
22 KiB
TypeScript
501 lines
22 KiB
TypeScript
import * as path from "path";
|
|
import {fetchPost} from "./fetch";
|
|
import {Dialog} from "../dialog";
|
|
import {escapeHtml} from "./escape";
|
|
import {isMobile} from "./functions";
|
|
import {focusByRange} from "../protyle/util/selection";
|
|
import {unicode2Emoji} from "../emoji";
|
|
import {Constants} from "../constants";
|
|
import {showMessage} from "../dialog/message";
|
|
|
|
export const addBaseURL = () => {
|
|
let baseURLElement = document.getElementById("baseURL");
|
|
if (!baseURLElement) {
|
|
baseURLElement = document.createElement("base");
|
|
baseURLElement.id = "baseURL";
|
|
}
|
|
baseURLElement.setAttribute("href", location.origin);
|
|
document.getElementsByTagName("head")[0].appendChild(baseURLElement);
|
|
};
|
|
|
|
export const getDisplayName = (filePath: string, basename = true, removeSY = false) => {
|
|
let name = filePath;
|
|
if (basename) {
|
|
name = pathPosix().basename(filePath);
|
|
}
|
|
if (removeSY && name.endsWith(".sy")) {
|
|
name = name.substr(0, name.length - 3);
|
|
}
|
|
return name;
|
|
};
|
|
|
|
export const getAssetName = (assetPath: string) => {
|
|
return assetPath.substring(7, assetPath.length - pathPosix().extname(assetPath).length - 23);
|
|
};
|
|
|
|
export const isLocalPath = (link: string) => {
|
|
if (!link) {
|
|
return false;
|
|
}
|
|
|
|
link = link.trim();
|
|
if (1 > link.length) {
|
|
return false;
|
|
}
|
|
|
|
link = link.toLowerCase();
|
|
if (link.startsWith("assets/") || link.startsWith("file://") || link.startsWith("\\\\") /* Windows 网络共享路径 */) {
|
|
return true;
|
|
}
|
|
|
|
const colonIdx = link.indexOf(":");
|
|
return 1 === colonIdx; // 冒号前面只有一个字符认为是 Windows 盘符而不是网络协议
|
|
};
|
|
|
|
export const pathPosix = () => {
|
|
if (path.posix) {
|
|
return path.posix;
|
|
}
|
|
return path;
|
|
};
|
|
|
|
export const originalPath = () => {
|
|
return path;
|
|
};
|
|
|
|
export const getTopPaths = (liElements: Element[]) => {
|
|
const fromPaths: string[] = [];
|
|
liElements.forEach((item: HTMLElement) => {
|
|
if (item.getAttribute("data-type") !== "navigation-root") {
|
|
const dataPath = item.getAttribute("data-path");
|
|
const isChild = fromPaths.find(item => {
|
|
if (dataPath.startsWith(item.replace(".sy", ""))) {
|
|
return true;
|
|
}
|
|
});
|
|
if (!isChild) {
|
|
fromPaths.push(dataPath);
|
|
}
|
|
}
|
|
});
|
|
return fromPaths;
|
|
};
|
|
|
|
export const moveToPath = (fromPaths: string[], toNotebook: string, toPath: string) => {
|
|
fetchPost("/api/filetree/moveDocs", {
|
|
toNotebook,
|
|
fromPaths,
|
|
toPath,
|
|
});
|
|
};
|
|
|
|
export const movePathTo = (cb: (toPath: string[], toNotebook: string[]) => void, paths?: string[], range?: Range, title?: string) => {
|
|
const exitDialog = window.siyuan.dialogs.find((item) => {
|
|
if (item.element.querySelector("#foldList")) {
|
|
item.destroy();
|
|
return true;
|
|
}
|
|
});
|
|
if (exitDialog) {
|
|
return;
|
|
}
|
|
const dialog = new Dialog({
|
|
title: `${title || window.siyuan.languages.move}
|
|
<div style="max-height: 16px;overflow: auto;line-height: 14px;-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, #000 6px);padding-bottom: 4px;margin-bottom: -4px" class="ft__smaller ft__on-surface fn__hidescrollbar"></div>`,
|
|
content: `<div>
|
|
<div class="b3-form__icon" style="margin: 8px">
|
|
<svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
|
|
<input class="b3-text-field fn__block b3-form__icon-input" value="" placeholder="${window.siyuan.languages.search}">
|
|
</div>
|
|
<ul id="foldList" class="fn__none b3-list b3-list--background" style="height: 50vh;overflow: auto;position: relative"></ul>
|
|
<div id="foldTree" style="height: 50vh;overflow: auto;position: relative"></div>
|
|
<div class="fn__hr"></div>
|
|
</div>
|
|
<div class="b3-dialog__action">
|
|
<button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
|
|
<button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
|
|
</div>`,
|
|
width: isMobile() ? "80vw" : "50vw",
|
|
destroyCallback() {
|
|
if (range) {
|
|
focusByRange(range);
|
|
}
|
|
}
|
|
});
|
|
if (paths && paths.length > 0) {
|
|
fetchPost("/api/filetree/getHPathsByPaths", {paths}, (response) => {
|
|
dialog.element.querySelector(".b3-dialog__header .ft__smaller").innerHTML = escapeHtml(response.data.join(" "));
|
|
});
|
|
}
|
|
const searchListElement = dialog.element.querySelector("#foldList");
|
|
const searchTreeElement = dialog.element.querySelector("#foldTree");
|
|
let html = "";
|
|
window.siyuan.notebooks.forEach((item) => {
|
|
if (!item.closed) {
|
|
html += `<ul class="b3-list b3-list--background">
|
|
<li class="b3-list-item${html === "" ? " b3-list-item--focus" : ""}" data-path="/" data-box="${item.id}">
|
|
<span class="b3-list-item__toggle b3-list-item__toggle--hl">
|
|
<svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
|
|
</span>
|
|
${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_NOTE, false, "b3-list-item__graphic", true)}
|
|
<span class="b3-list-item__text">${escapeHtml(item.name)}</span>
|
|
</li></ul>`;
|
|
}
|
|
});
|
|
searchTreeElement.innerHTML = html;
|
|
const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
|
|
inputElement.focus();
|
|
const inputEvent = (event?: InputEvent) => {
|
|
if (event && event.isComposing) {
|
|
return;
|
|
}
|
|
if (inputElement.value.trim() === "") {
|
|
searchListElement.classList.add("fn__none");
|
|
searchTreeElement.classList.remove("fn__none");
|
|
return;
|
|
}
|
|
searchTreeElement.classList.add("fn__none");
|
|
searchListElement.classList.remove("fn__none");
|
|
searchListElement.scrollTo(0, 0);
|
|
fetchPost("/api/filetree/searchDocs", {
|
|
k: inputElement.value
|
|
}, (data) => {
|
|
let fileHTML = "";
|
|
data.data.forEach((item: { boxIcon: string, box: string, hPath: string, path: string }) => {
|
|
fileHTML += `<li style="padding: 4px" class="b3-list-item${fileHTML === "" ? " b3-list-item--focus" : ""}" data-path="${item.path}" data-box="${item.box}">
|
|
${unicode2Emoji(item.boxIcon || Constants.SIYUAN_IMAGE_NOTE, false, "b3-list-item__graphic", true)}
|
|
<span class="b3-list-item__showall">${escapeHtml(item.hPath)}</span>
|
|
</li>`;
|
|
});
|
|
searchListElement.innerHTML = fileHTML;
|
|
});
|
|
};
|
|
inputEvent();
|
|
inputElement.addEventListener("compositionend", (event: InputEvent) => {
|
|
inputEvent(event);
|
|
});
|
|
inputElement.addEventListener("input", (event: InputEvent) => {
|
|
inputEvent(event);
|
|
});
|
|
const lineHeight = 28;
|
|
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
|
|
if (event.isComposing) {
|
|
return;
|
|
}
|
|
const currentPanelElement = searchListElement.classList.contains("fn__none") ? searchTreeElement : searchListElement;
|
|
const currentItemElements = currentPanelElement.querySelectorAll(".b3-list-item--focus");
|
|
if (currentItemElements.length === 0) {
|
|
return;
|
|
}
|
|
let currentItemElement: HTMLElement = currentItemElements[0] as HTMLElement;
|
|
if (event.key.startsWith("Arrow")) {
|
|
currentItemElements.forEach((item, index) => {
|
|
if (index !== 0) {
|
|
item.classList.remove("b3-list-item--focus");
|
|
}
|
|
});
|
|
}
|
|
if (searchListElement.classList.contains("fn__none")) {
|
|
if ((event.key === "ArrowRight" && !currentItemElement.querySelector(".b3-list-item__arrow--open") && !currentItemElement.querySelector(".b3-list-item__toggle").classList.contains("fn__hidden")) ||
|
|
(event.key === "ArrowLeft" && currentItemElement.querySelector(".b3-list-item__arrow--open"))) {
|
|
getLeaf(currentItemElement);
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
if (event.key === "ArrowLeft") {
|
|
let parentElement = currentItemElement.parentElement.previousElementSibling;
|
|
if (parentElement) {
|
|
if (parentElement.tagName !== "LI") {
|
|
parentElement = currentPanelElement.querySelector(".b3-list-item");
|
|
}
|
|
currentItemElement.classList.remove("b3-list-item--focus");
|
|
parentElement.classList.add("b3-list-item--focus");
|
|
const parentRect = parentElement.getBoundingClientRect();
|
|
const fileRect = currentPanelElement.getBoundingClientRect();
|
|
if (parentRect.top < fileRect.top || parentRect.bottom > fileRect.bottom) {
|
|
parentElement.scrollIntoView(parentRect.top < fileRect.top);
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
return true;
|
|
}
|
|
if (event.key === "ArrowDown" || event.key === "ArrowRight") {
|
|
let nextElement = currentItemElement;
|
|
while (nextElement) {
|
|
if (nextElement.nextElementSibling) {
|
|
if (nextElement.nextElementSibling.classList.contains("fn__none")) {
|
|
nextElement = nextElement.nextElementSibling as HTMLElement;
|
|
} else {
|
|
if (nextElement.nextElementSibling.tagName === "UL") {
|
|
nextElement = nextElement.nextElementSibling.firstElementChild as HTMLElement;
|
|
} else {
|
|
nextElement = nextElement.nextElementSibling as HTMLElement;
|
|
}
|
|
break;
|
|
}
|
|
} else {
|
|
if (nextElement.parentElement.id === "foldTree") {
|
|
break;
|
|
} else {
|
|
nextElement = nextElement.parentElement;
|
|
}
|
|
}
|
|
}
|
|
if (nextElement.classList.contains("b3-list-item")) {
|
|
currentItemElement.classList.remove("b3-list-item--focus");
|
|
nextElement.classList.add("b3-list-item--focus");
|
|
const nextRect = nextElement.getBoundingClientRect();
|
|
const fileRect = searchTreeElement.getBoundingClientRect();
|
|
if (nextRect.top < fileRect.top || nextRect.bottom > fileRect.bottom) {
|
|
nextElement.scrollIntoView(nextRect.top < fileRect.top);
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
return true;
|
|
}
|
|
if (event.key === "ArrowUp") {
|
|
let previousElement = currentItemElement;
|
|
while (previousElement) {
|
|
if (previousElement.previousElementSibling) {
|
|
if (previousElement.previousElementSibling.classList.contains("fn__none")) {
|
|
previousElement = previousElement.previousElementSibling as HTMLElement;
|
|
} else {
|
|
if (previousElement.previousElementSibling.tagName === "LI") {
|
|
previousElement = previousElement.previousElementSibling as HTMLElement;
|
|
} else {
|
|
const liElements = previousElement.previousElementSibling.querySelectorAll(".b3-list-item");
|
|
previousElement = liElements[liElements.length - 1] as HTMLElement;
|
|
}
|
|
break;
|
|
}
|
|
} else {
|
|
if (previousElement.parentElement.id === "foldTree") {
|
|
break;
|
|
} else {
|
|
previousElement = previousElement.parentElement;
|
|
}
|
|
}
|
|
}
|
|
if (previousElement.classList.contains("b3-list-item")) {
|
|
currentItemElement.classList.remove("b3-list-item--focus");
|
|
previousElement.classList.add("b3-list-item--focus");
|
|
const previousRect = previousElement.getBoundingClientRect();
|
|
const fileRect = searchTreeElement.getBoundingClientRect();
|
|
if (previousRect.top < fileRect.top || previousRect.bottom > fileRect.bottom) {
|
|
previousElement.scrollIntoView(previousRect.top < fileRect.top);
|
|
}
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
} else {
|
|
if (event.key === "ArrowDown") {
|
|
currentItemElement.classList.remove("b3-list-item--focus");
|
|
if (!currentItemElement.nextElementSibling) {
|
|
currentPanelElement.children[0].classList.add("b3-list-item--focus");
|
|
} else {
|
|
currentItemElement.nextElementSibling.classList.add("b3-list-item--focus");
|
|
}
|
|
currentItemElement = currentPanelElement.querySelector(".b3-list-item--focus");
|
|
if (currentPanelElement.scrollTop < currentItemElement.offsetTop - currentPanelElement.clientHeight + lineHeight ||
|
|
currentPanelElement.scrollTop > currentItemElement.offsetTop) {
|
|
currentPanelElement.scrollTop = currentItemElement.offsetTop - currentPanelElement.clientHeight + lineHeight;
|
|
}
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
if (event.key === "ArrowUp") {
|
|
currentItemElement.classList.remove("b3-list-item--focus");
|
|
if (!currentItemElement.previousElementSibling) {
|
|
const length = currentPanelElement.children.length;
|
|
currentPanelElement.children[length - 1].classList.add("b3-list-item--focus");
|
|
} else {
|
|
currentItemElement.previousElementSibling.classList.add("b3-list-item--focus");
|
|
}
|
|
currentItemElement = currentPanelElement.querySelector(".b3-list-item--focus");
|
|
if (currentPanelElement.scrollTop < currentItemElement.offsetTop - currentPanelElement.clientHeight + lineHeight ||
|
|
currentPanelElement.scrollTop > currentItemElement.offsetTop - lineHeight * 2) {
|
|
currentPanelElement.scrollTop = currentItemElement.offsetTop - lineHeight * 2;
|
|
}
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
}
|
|
if (event.key === "Enter") {
|
|
const currentItemElements = currentPanelElement.querySelectorAll(".b3-list-item--focus");
|
|
if (currentItemElements.length === 0) {
|
|
return;
|
|
}
|
|
const pathList: string[] = [];
|
|
const notebookIdList: string[] = [];
|
|
currentItemElements.forEach(item => {
|
|
pathList.push(item.getAttribute("data-path"));
|
|
notebookIdList.push(item.getAttribute("data-box"));
|
|
});
|
|
cb(pathList, notebookIdList);
|
|
dialog.destroy();
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
dialog.element.addEventListener("click", (event) => {
|
|
let target = event.target as HTMLElement;
|
|
while (target && !target.isEqualNode(dialog.element)) {
|
|
if (target.classList.contains("b3-list-item__toggle")) {
|
|
getLeaf(target.parentElement);
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
break;
|
|
} else if (target.classList.contains("b3-button--text")) {
|
|
const currentPanelElement = searchListElement.classList.contains("fn__none") ? searchTreeElement : searchListElement;
|
|
const currentItemElements = currentPanelElement.querySelectorAll(".b3-list-item--focus");
|
|
if (currentItemElements.length === 0) {
|
|
return;
|
|
}
|
|
const pathList: string[] = [];
|
|
const notebookIdList: string[] = [];
|
|
currentItemElements.forEach(item => {
|
|
pathList.push(item.getAttribute("data-path"));
|
|
notebookIdList.push(item.getAttribute("data-box"));
|
|
});
|
|
cb(pathList, notebookIdList);
|
|
dialog.destroy();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
break;
|
|
} else if (target.classList.contains("b3-button--cancel")) {
|
|
dialog.destroy();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
break;
|
|
} else if (target.classList.contains("b3-list-item")) {
|
|
const currentPanelElement = searchListElement.classList.contains("fn__none") ? searchTreeElement : searchListElement;
|
|
const currentItemElements = currentPanelElement.querySelectorAll(".b3-list-item--focus");
|
|
if (currentItemElements.length === 0) {
|
|
return;
|
|
}
|
|
if (title === window.siyuan.languages.specifyPath && (event.ctrlKey || event.metaKey)) {
|
|
if (currentItemElements.length === 1 && currentItemElements[0].isSameNode(target)) {
|
|
// 至少需选中一个
|
|
} else {
|
|
target.classList.toggle("b3-list-item--focus");
|
|
}
|
|
} else {
|
|
currentItemElements[0].classList.remove("b3-list-item--focus");
|
|
target.classList.add("b3-list-item--focus");
|
|
}
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
break;
|
|
}
|
|
target = target.parentElement;
|
|
}
|
|
inputElement.focus();
|
|
});
|
|
};
|
|
|
|
const getLeaf = (liElement: HTMLElement) => {
|
|
const toggleElement = liElement.querySelector(".b3-list-item__arrow");
|
|
if (toggleElement.classList.contains("b3-list-item__arrow--open")) {
|
|
toggleElement.classList.remove("b3-list-item__arrow--open");
|
|
if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "UL") {
|
|
liElement.nextElementSibling.classList.add("fn__none");
|
|
}
|
|
return;
|
|
}
|
|
if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "UL") {
|
|
toggleElement.classList.add("b3-list-item__arrow--open");
|
|
liElement.nextElementSibling.classList.remove("fn__none");
|
|
return;
|
|
}
|
|
|
|
const notebookId = liElement.getAttribute("data-box");
|
|
fetchPost("/api/filetree/listDocsByPath", {
|
|
notebook: notebookId,
|
|
path: liElement.getAttribute("data-path"),
|
|
sort: window.siyuan.config.fileTree.sort,
|
|
}, response => {
|
|
if (response.data.path === "/" && response.data.files.length === 0) {
|
|
showMessage(window.siyuan.languages.emptyContent);
|
|
return;
|
|
}
|
|
let fileHTML = "";
|
|
response.data.files.forEach((item: IFile) => {
|
|
let countHTML = "";
|
|
if (item.count && item.count > 0) {
|
|
countHTML = `<span class="popover__block counter b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.blockRef}">${item.count}</span>`;
|
|
}
|
|
fileHTML += `<li title="${getDisplayName(item.name, true, true)} ${item.hSize}${item.bookmark ? "\n" + window.siyuan.languages.bookmark + " " + item.bookmark : ""}${item.name1 ? "\n" + window.siyuan.languages.name + " " + item.name1 : ""}${item.alias ? "\n" + window.siyuan.languages.alias + " " + item.alias : ""}${item.memo ? "\n" + window.siyuan.languages.memo + " " + item.memo : ""}${item.subFileCount !== 0 ? window.siyuan.languages.includeSubFile.replace("x", item.subFileCount) : ""}\n${window.siyuan.languages.modifiedAt} ${item.hMtime}\n${window.siyuan.languages.createdAt} ${item.hCtime}"
|
|
data-box="${notebookId}" class="b3-list-item" data-path="${item.path}">
|
|
<span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
|
|
<svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
|
|
</span>
|
|
${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER), false, "b3-list-item__graphic", true)}
|
|
<span class="b3-list-item__text">${getDisplayName(item.name, true, true)}</span>
|
|
${countHTML}
|
|
</li>`;
|
|
});
|
|
if (fileHTML === "") {
|
|
return;
|
|
}
|
|
toggleElement.classList.add("b3-list-item__arrow--open");
|
|
liElement.insertAdjacentHTML("afterend", `<ul class="file-tree__sliderDown">${fileHTML}</ul>`);
|
|
const nextElement = liElement.nextElementSibling;
|
|
setTimeout(() => {
|
|
nextElement.setAttribute("style", `height:${nextElement.childElementCount * liElement.clientHeight}px;`);
|
|
setTimeout(() => {
|
|
nextElement.classList.remove("file-tree__sliderDown");
|
|
nextElement.removeAttribute("style");
|
|
}, 120);
|
|
}, 2);
|
|
});
|
|
};
|
|
|
|
export const getNotebookName = (id: string) => {
|
|
let rootPath = "";
|
|
window.siyuan.notebooks.find((item) => {
|
|
if (item.id === id) {
|
|
rootPath = item.name;
|
|
return true;
|
|
}
|
|
});
|
|
return rootPath;
|
|
};
|
|
|
|
export const getNotebookIcon = (id: string) => {
|
|
let rootPath = "";
|
|
window.siyuan.notebooks.find((item) => {
|
|
if (item.id === id) {
|
|
rootPath = item.icon;
|
|
return true;
|
|
}
|
|
});
|
|
return rootPath;
|
|
};
|
|
|
|
export const setNotebookName = (id: string, name: string) => {
|
|
window.siyuan.notebooks.find((item) => {
|
|
if (item.id === id) {
|
|
item.name = name;
|
|
return true;
|
|
}
|
|
});
|
|
};
|
|
|
|
export const getOpenNotebookCount = () => {
|
|
let count = 0;
|
|
window.siyuan.notebooks.forEach(item => {
|
|
if (!item.closed) {
|
|
count++;
|
|
}
|
|
});
|
|
return count;
|
|
};
|
|
|
|
export const setNoteBook = (cb?: (notebook: INotebook[]) => void) => {
|
|
fetchPost("/api/notebook/lsNotebooks", {}, (response) => {
|
|
window.siyuan.notebooks = response.data.notebooks;
|
|
if (cb) {
|
|
cb(response.data.notebooks);
|
|
}
|
|
});
|
|
};
|