🎨 https://github.com/siyuan-note/siyuan/issues/1359 点击菜单应选中对应的文档

This commit is contained in:
Vanessa 2022-11-03 10:32:59 +08:00
parent 9b29174faa
commit 8c4d00ed12
6 changed files with 48 additions and 35 deletions

View file

@ -80,7 +80,7 @@ export class Files extends Model {
<span class="fn__space"></span>
<span data-type="min" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
</div>
<div class="fn__flex-1" data-type="navigation"></div>
<div class="fn__flex-1"></div>
<ul class="b3-list fn__flex-column" style="min-height: auto;transition: var(--b3-transition)">
<li class="b3-list-item" data-type="toggle">
<span class="b3-list-item__toggle">

View file

@ -74,7 +74,6 @@ export class Menu {
}
this.element.innerHTML = "";
this.element.removeAttribute("data-filetreeid"); // 用于标记文档数右键所选文档 https://ld246.com/article/1667311960383
this.element.classList.add("fn__none");
this.element.classList.remove("b3-menu--list");
this.element.removeAttribute("style"); // zIndex

View file

@ -23,8 +23,20 @@ import {openFileById} from "../editor/util";
import {confirmDialog} from "../dialog/confirmDialog";
import {Constants} from "../constants";
import {newFile} from "../util/newFile";
import {hasClosestByClassName} from "../protyle/util/hasClosest";
export const initNavigationMenu = (liElement: HTMLElement) => {
if (!liElement.classList.contains("b3-list-item--focus")) {
const fileElement = hasClosestByClassName(liElement, "sy__file")
if (fileElement) {
fileElement.querySelectorAll(".b3-list-item--focus").forEach(item => {
item.classList.remove("b3-list-item--focus");
item.removeAttribute("select-end")
item.removeAttribute("select-start")
})
}
liElement.classList.add("b3-list-item--focus");
}
const notebookId = liElement.parentElement.getAttribute("data-url");
const name = getNotebookName(notebookId);
window.siyuan.menus.menu.remove();
@ -132,11 +144,21 @@ export const initNavigationMenu = (liElement: HTMLElement) => {
}
}]
}).element);
window.siyuan.menus.menu.element.setAttribute("data-filetreeid", notebookId);
return window.siyuan.menus.menu;
};
export const initFileMenu = (notebookId: string, pathString: string, liElement: Element) => {
if (!liElement.classList.contains("b3-list-item--focus")) {
const fileElement = hasClosestByClassName(liElement, "sy__file")
if (fileElement) {
fileElement.querySelectorAll(".b3-list-item--focus").forEach(item => {
item.classList.remove("b3-list-item--focus");
item.removeAttribute("select-end")
item.removeAttribute("select-start")
})
}
liElement.classList.add("b3-list-item--focus");
}
const id = liElement.getAttribute("data-node-id");
let name = liElement.getAttribute("data-name");
window.siyuan.menus.menu.remove();
@ -284,7 +306,6 @@ export const initFileMenu = (notebookId: string, pathString: string, liElement:
/// #endif
genImportMenu(notebookId, pathString);
window.siyuan.menus.menu.append(exportMd(id));
window.siyuan.menus.menu.element.setAttribute("data-filetreeid", id);
return window.siyuan.menus.menu;
};

View file

@ -68,7 +68,7 @@ export class MobileFiles extends Model {
<svg data-type="collapse" class="toolbar__icon"><use xlink:href="#iconContract"></use></svg>
<svg data-type="sort" class="toolbar__icon${window.siyuan.config.readonly ? " fn__none" : ""}"><use xlink:href="#iconSort"></use></svg>
</div>
<div class="fn__flex-1" data-type="navigation"></div>
<div class="fn__flex-1"></div>
<ul class="b3-list b3-list--background fn__flex-column" style="min-height: auto;transition: var(--b3-transition)">
<li class="b3-list-item" data-type="toggle">
<span class="b3-list-item__toggle">

View file

@ -223,7 +223,8 @@ export const getPreviousFileLi = (current: Element) => {
} else if (previousElement.previousElementSibling.tagName === "LI") {
return previousElement.previousElementSibling;
} else if (previousElement.previousElementSibling.tagName === "UL") {
return previousElement.previousElementSibling.lastElementChild;
const liElements = previousElement.previousElementSibling.querySelectorAll(".b3-list-item")
return liElements[liElements.length - 1];
}
}
return false;

View file

@ -867,20 +867,7 @@ const fileTreeKeydown = (event: KeyboardEvent) => {
if (!files.element.parentElement.classList.contains("layout__tab--active")) {
return false;
}
let liElements: Element[] = []
const menuId = window.siyuan.menus.menu.element.getAttribute("data-filetreeid")
if (menuId) {
let liElement = files.element.querySelector(`li[data-node-id="${menuId}"]`)
if (!liElement) {
liElement = files.element.querySelector(`ul[data-url="${menuId}"] > li`)
}
if (!liElement) {
return;
}
liElements.push(liElement)
} else {
liElements = Array.from(files.element.querySelectorAll(".b3-list-item--focus"));
}
const liElements = Array.from(files.element.querySelectorAll(".b3-list-item--focus"))
if (liElements.length === 0) {
if (event.key.startsWith("Arrow")) {
const liElement = files.element.querySelector(".b3-list-item");
@ -958,49 +945,54 @@ const fileTreeKeydown = (event: KeyboardEvent) => {
if (event.shiftKey) {
if (event.key === "ArrowUp") {
const startEndElement = getStartEndElement(liElements);
let previousElement: Element;
if (startEndElement.startElement.getBoundingClientRect().top >= startEndElement.endElement.getBoundingClientRect().top) {
const previousElement = getPreviousFileLi(startEndElement.endElement)
previousElement = getPreviousFileLi(startEndElement.endElement) as Element;
if (previousElement) {
previousElement.classList.add("b3-list-item--focus");
previousElement.setAttribute("select-end", "true");
startEndElement.endElement.removeAttribute("select-end");
const previousRect = previousElement.getBoundingClientRect();
const fileRect = files.element.getBoundingClientRect();
if (previousRect.top < fileRect.top || previousRect.bottom > fileRect.bottom) {
previousElement.scrollIntoView(previousRect.top < fileRect.top);
}
}
} else {
startEndElement.endElement.classList.remove("b3-list-item--focus");
startEndElement.endElement.removeAttribute("select-end");
const previousElement = getPreviousFileLi(startEndElement.endElement);
previousElement = getPreviousFileLi(startEndElement.endElement) as Element;
if (previousElement) {
previousElement.setAttribute("select-end", "true");
}
}
if (previousElement) {
const previousRect = previousElement.getBoundingClientRect();
const fileRect = files.element.getBoundingClientRect();
if (previousRect.top < fileRect.top || previousRect.bottom > fileRect.bottom) {
previousElement.scrollIntoView(previousRect.top < fileRect.top);
}
}
} else if (event.key === "ArrowDown") {
const startEndElement = getStartEndElement(liElements);
let nextElement: Element;
if (startEndElement.startElement.getBoundingClientRect().top <= startEndElement.endElement.getBoundingClientRect().top) {
const nextElement = getNextFileLi(startEndElement.endElement);
nextElement = getNextFileLi(startEndElement.endElement) as Element;
if (nextElement) {
nextElement.classList.add("b3-list-item--focus");
nextElement.setAttribute("select-end", "true");
startEndElement.endElement.removeAttribute("select-end");
const nextRect = nextElement.getBoundingClientRect();
const fileRect = files.element.getBoundingClientRect();
if (nextRect.top < fileRect.top || nextRect.bottom > fileRect.bottom) {
nextElement.scrollIntoView(nextRect.top < fileRect.top);
}
}
} else {
startEndElement.endElement.classList.remove("b3-list-item--focus");
startEndElement.endElement.removeAttribute("select-end");
const nextElement = getNextFileLi(startEndElement.endElement);
nextElement = getNextFileLi(startEndElement.endElement) as Element;
if (nextElement) {
nextElement.setAttribute("select-end", "true");
}
}
if (nextElement) {
const nextRect = nextElement.getBoundingClientRect();
const fileRect = files.element.getBoundingClientRect();
if (nextRect.top < fileRect.top || nextRect.bottom > fileRect.bottom) {
nextElement.scrollIntoView(nextRect.top < fileRect.top);
}
}
}
return;
} else {