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

View file

@ -1,4 +1,5 @@
{
"commandEmpty": "No command yet, click to go to the market to download more plugins",
"commandPanel": "Command Palette",
"cloudRegionNorthAmerica": "LiuYun (Data Center in North America)",
"cloudRegionChina": "LianDi (Data Center in Mainland China)",

View file

@ -1,4 +1,5 @@
{
"commandEmpty": "Sin comando todavía, haga clic para ir al mercado para descargar más complementos",
"commandPanel": "Paleta de comandos",
"cloudRegionNorthAmerica": "LiuYun (Centro de datos en América del Norte)",
"cloudRegionChina": "LianDi (Centro de datos en China continental)",

View file

@ -1,4 +1,5 @@
{
"commandEmpty": "Aucune commande pour le moment, cliquez pour aller sur le marché pour télécharger plus de plugins",
"commandPanel": "Palette de commandes",
"cloudRegionNorthAmerica": "LiuYun (centre de données en Amérique du Nord)",
"cloudRegionChina": "LianDi (centre de données en Chine continentale)",

View file

@ -1,4 +1,5 @@
{
"commandEmpty": "暫無命令,點擊前往集市下載更多插件",
"commandPanel": "命令面板",
"cloudRegionNorthAmerica": "流雲(北美數據中心)",
"cloudRegionChina": "鏈滴(中國大陸數據中心)",

View file

@ -1,4 +1,5 @@
{
"commandEmpty": "暂无命令,点击前往集市下载更多插件",
"commandPanel": "命令面板",
"cloudRegionNorthAmerica": "流云(北美数据中心)",
"cloudRegionChina": "链滴(中国大陆数据中心)",

View file

@ -304,6 +304,21 @@ export const setZoom = (type: "zoomIn" | "zoomOut" | "restore") => {
const openPlugin = (app: App, target: Element) => {
const menu = new Menu("topBarPlugin");
menu.addItem({
icon: "iconSettings",
label: window.siyuan.languages.config,
click() {
openSetting(app).element.querySelector('.b3-tab-bar [data-name="bazaar"]').dispatchEvent(new CustomEvent("click"));
}
});
menu.addItem({
icon: "iconLayoutBottom",
label: window.siyuan.languages.commandPanel,
click() {
commandPanel(app);
}
});
menu.addSeparator();
let hasPlugin = false;
app.plugins.forEach((plugin) => {
// @ts-ignore
@ -366,25 +381,9 @@ const openPlugin = (app: App, target: Element) => {
});
}
});
if (hasPlugin) {
menu.addSeparator();
if (!hasPlugin) {
window.siyuan.menus.menu.element.querySelector(".b3-menu__separator").remove()
}
menu.addItem({
icon: "iconSettings",
label: window.siyuan.languages.config,
click() {
const dialogSetting = openSetting(app);
dialogSetting.element.querySelector('.b3-tab-bar [data-name="bazaar"]').dispatchEvent(new CustomEvent("click"));
}
});
menu.addItem({
icon: "iconLayoutBottom",
label: window.siyuan.languages.commandPanel,
click() {
commandPanel();
}
});
let rect = target.getBoundingClientRect();
if (rect.width === 0) {
rect = document.querySelector("#barMore").getBoundingClientRect();

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")
}
})
}