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

🎨 fix https://github.com/siyuan-note/siyuan/issues/8526

Browse source
This commit is contained in:
Vanessa 2023-06-24 20:57:21 +08:00
parent 5e16149c4c
commit 5d91a03316
7 changed files with 105 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

87
app/src/plugin/commandPanel.ts
View file

@ -1,8 +1,87 @@
import {Dialog} from "../dialog";
import {App} from "../index";
import {upDownHint} from "../util/upDownHint";
import {openSetting} from "../config";
export const commandPanel = () => {
const panel = new Dialog({
title: window.siyuan.languages.commandPanel,
content:`<div></div>`
export const commandPanel = (app: App) => {
const dialog = new Dialog({
width: "80vw",
height: "70vh",
content: `<div class="fn__flex-column">
<div class="b3-form__icon search__header">
<svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
<input class="b3-text-field b3-text-field--text" style="padding-left: 32px !important;">
</div>
<div class="fn__hr"></div>
<ul class="b3-list b3-list--background fn__flex-1" id="commands"></ul>
<div class="fn__hr"></div>
</div>`
})
const listElement = dialog.element.querySelector("#commands");
app.plugins.forEach(plugin => {
plugin.commands.forEach(command => {
const liElement = document.createElement("li");
liElement.classList.add("b3-list-item")
liElement.innerHTML = `<span class="b3-list-item__text">${command.langText || plugin.i18n[command.langKey]}</span>
<span class="b3-list-item__meta">${command.customHotkey}</span>`;
liElement.addEventListener("click", () => {
command.callback();
dialog.destroy();
})
listElement.insertAdjacentElement("beforeend", liElement);
})
})
if (listElement.childElementCount === 0) {
const liElement = document.createElement("li");
liElement.classList.add("b3-list-item");
liElement.innerHTML = `<span class="b3-list-item__text">${window.siyuan.languages.commandEmpty}</span>`;
liElement.addEventListener("click", () => {
dialog.destroy();
openSetting(app).element.querySelector('.b3-tab-bar [data-name="bazaar"]').dispatchEvent(new CustomEvent("click"));
})
listElement.insertAdjacentElement("beforeend", liElement);
} else {
listElement.firstElementChild.classList.add("b3-list-item--focus");
}
const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
event.stopPropagation();
if (event.isComposing) {
return;
}
upDownHint(listElement, event);
if (event.key === "Enter") {
const currentElement = listElement.querySelector(".b3-list-item--focus");
if (currentElement) {
currentElement.dispatchEvent(new CustomEvent("click"));
}
dialog.destroy();
} else if (event.key === "Escape") {
dialog.destroy();
}
});
inputElement.addEventListener("compositionend", (event: InputEvent) => {
filterList(inputElement, listElement);
})
inputElement.addEventListener("input", (event: InputEvent) => {
if (event.isComposing) {
return;
}
event.stopPropagation();
filterList(inputElement, listElement);
});
}
const filterList = (inputElement: HTMLInputElement, listElement: Element) => {
const inputValue = inputElement.value.toLowerCase();
Array.from(listElement.children).forEach((element: HTMLElement) => {
const elementValue = element.querySelector(".b3-list-item__text").textContent.toLowerCase();
if (inputValue.indexOf(elementValue) > -1 || elementValue.indexOf(inputValue) > -1) {
element.classList.remove("fn__none");
} else {
element.classList.add("fn__none")
}
})
}