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

🎨 https://github.com/siyuan-note/siyuan/issues/8765

Browse source
This commit is contained in:
Vanessa 2023-07-30 19:40:40 +08:00
parent 352af10d89
commit 53c9036738
1 changed files with 114 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

174
app/src/menus/commonMenuItem.ts
View file

@ -32,7 +32,7 @@ const bindAttrInput = (inputElement: HTMLInputElement, confirmElement: Element)
return; return;
} }
if (matchHotKey("⌘↩", event)) { if (matchHotKey("⌘↩", event)) {
confirmElement.dispatchEvent(new CustomEvent("click")); confirmElement.dispatchEvent(new CustomEvent("click", {detail: "confirm"}));
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
} }
@ -161,6 +161,7 @@ export const openFileWechatNotify = (protyle: IProtyle) => {
const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rms: string[]) => void) => { const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rms: string[]) => void) => {
let customHTML = ""; let customHTML = "";
let notifyHTML = ""; let notifyHTML = "";
let avHTML = "";
const range = getSelection().rangeCount > 0 ? getSelection().getRangeAt(0) : null; const range = getSelection().rangeCount > 0 ? getSelection().getRangeAt(0) : null;
Object.keys(attrs).forEach(item => { Object.keys(attrs).forEach(item => {
if ("custom-riff-decks" === item) { if ("custom-riff-decks" === item) {
@ -171,6 +172,15 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
${window.siyuan.languages.wechatReminder} ${window.siyuan.languages.wechatReminder}
<div class="fn__hr"></div> <div class="fn__hr"></div>
<input class="b3-text-field fn__block" type="datetime-local" readonly data-name="${item}" value="${dayjs(attrs[item]).format("YYYY-MM-DDTHH:mm")}"> <input class="b3-text-field fn__block" type="datetime-local" readonly data-name="${item}" value="${dayjs(attrs[item]).format("YYYY-MM-DDTHH:mm")}">
</label>`;
} else if (item.indexOf("custom-av") > -1) {
avHTML += `<label class="b3-label b3-label--noborder">
<div class="fn__flex">
<span class="fn__flex-1">${item.replace("custom-", "")}</span>
<span data-action="remove" class="block__icon block__icon--show"><svg><use xlink:href="#iconMin"></use></svg></span>
</div>
<div class="fn__hr"></div>
<textarea class="b3-text-field fn__block" rows="1" data-name="${item}">${attrs[item]}</textarea>
</label>`; </label>`;
} else if (item.indexOf("custom") > -1) { } else if (item.indexOf("custom") > -1) {
customHTML += `<label class="b3-label b3-label--noborder"> customHTML += `<label class="b3-label b3-label--noborder">
@ -185,40 +195,68 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
}); });
const dialog = new Dialog({ const dialog = new Dialog({
width: isMobile() ? "92vw" : "50vw", width: isMobile() ? "92vw" : "50vw",
title: window.siyuan.languages.attr, height: "80vh",
content: `<div class="custom-attr" style="max-height: calc(100vh - 166px);overflow: auto;"> content: `<div class="fn__flex-column">
<label class="b3-label b3-label--noborder"> <div class="layout-tab-bar fn__flex" style="flex-shrink:0;border-radius: var(--b3-border-radius-b) var(--b3-border-radius-b) 0 0">
<div class="fn__flex"> <div class="item item--full item--focus" data-type="attr">
<span class="fn__flex-1">${window.siyuan.languages.bookmark}</span> <span class="fn__flex-1"></span>
<span data-action="bookmark" class="block__icon block__icon--show"><svg><use xlink:href="#iconDown"></use></svg></span> <span class="item__text">${window.siyuan.languages.attr}</span>
<span class="fn__flex-1"></span>
</div> </div>
<div class="fn__hr"></div> <div class="item item--full${avHTML ? "" : " fn__none"}" data-type="av">
<input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrBookmarkTip}" data-name="bookmark"> <span class="fn__flex-1"></span>
</label> <span class="item__text">${window.siyuan.languages.database}</span>
<label class="b3-label b3-label--noborder"> <span class="fn__flex-1"></span>
${window.siyuan.languages.name} </div>
<div class="fn__hr"></div> <div class="item item--full" data-type="custom">
<input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrNameTip}" data-name="name"> <span class="fn__flex-1"></span>
</label> <span class="item__text">${window.siyuan.languages.custom}</span>
<label class="b3-label b3-label--noborder"> <span class="fn__flex-1"></span>
${window.siyuan.languages.alias} </div>
<div class="fn__hr"></div> </div>
<input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrAliasTip}" data-name="alias"> <div class="fn__flex-1">
</label> <div class="custom-attr" data-type="attr">
<label class="b3-label b3-label--noborder"> <label class="b3-label b3-label--noborder">
${window.siyuan.languages.memo} <div class="fn__flex">
<div class="fn__hr"></div> <span class="fn__flex-1">${window.siyuan.languages.bookmark}</span>
<textarea class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrMemoTip}" rows="2" data-name="memo">${attrs.memo || ""}</textarea> <span data-action="bookmark" class="block__icon block__icon--show"><svg><use xlink:href="#iconDown"></use></svg></span>
</label> </div>
${notifyHTML} <div class="fn__hr"></div>
${customHTML} <input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrBookmarkTip}" data-name="bookmark">
</div> </label>
<div class="b3-dialog__action"> <label class="b3-label b3-label--noborder">
<button class="b3-button b3-button--outline"> ${window.siyuan.languages.name}
<svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr} <div class="fn__hr"></div>
</button><div class="fn__space"></div> <input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrNameTip}" data-name="name">
<button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div> </label>
<button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button> <label class="b3-label b3-label--noborder">
${window.siyuan.languages.alias}
<div class="fn__hr"></div>
<input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrAliasTip}" data-name="alias">
</label>
<label class="b3-label b3-label--noborder">
${window.siyuan.languages.memo}
<div class="fn__hr"></div>
<textarea class="b3-text-field fn__block" placeholder="${window.siyuan.languages.attrMemoTip}" rows="2" data-name="memo">${attrs.memo || ""}</textarea>
</label>
${notifyHTML}
</div>
<div data-type="av" class="fn__none custom-attr">
${avHTML}
</div>
<div data-type="custom" class="fn__none custom-attr">
${customHTML}
<div class="b3-label">
<button data-action="addCustom" class="b3-button b3-button--outline">
<svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}
</button>
</div>
</div>
</div>
<div class="b3-dialog__action">
<button data-action="closeDialog" class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
<button data-action="confirm" class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
</div>
</div>`, </div>`,
destroyCallback() { destroyCallback() {
focusByRange(range); focusByRange(range);
@ -229,19 +267,32 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
(dialog.element.querySelector('.b3-text-field[data-name="alias"]') as HTMLInputElement).value = attrs.alias || ""; (dialog.element.querySelector('.b3-text-field[data-name="alias"]') as HTMLInputElement).value = attrs.alias || "";
const removeAttrs: string[] = []; const removeAttrs: string[] = [];
dialog.element.addEventListener("click", (event) => { dialog.element.addEventListener("click", (event) => {
const target = event.target as HTMLElement; let target = event.target as HTMLElement;
const actionElement = hasClosestByClassName(target, "block__icon"); if (typeof event.detail === "string" && event.detail === "confirm") {
if (!actionElement) { cb(dialog, removeAttrs);
return; return;
} }
switch (actionElement.getAttribute("data-action")) { while (!target.isSameNode(dialog.element)) {
case "remove": const type = target.dataset.action
if (actionElement.previousElementSibling.tagName === "SPAN") { if (target.classList.contains("item--full")) {
removeAttrs.push(actionElement.parentElement.parentElement.querySelector("textarea").getAttribute("data-name")); target.parentElement.querySelector('.item--focus').classList.remove("item--focus")
target.classList.add("item--focus")
dialog.element.querySelectorAll(".custom-attr").forEach((item: HTMLElement) => {
if (item.dataset.type === target.dataset.type) {
item.classList.remove("fn__none")
} else {
item.classList.add("fn__none")
}
})
} else if (type === "remove") {
if (target.previousElementSibling.tagName === "SPAN") {
removeAttrs.push(target.parentElement.parentElement.querySelector("textarea").getAttribute("data-name"));
} }
actionElement.parentElement.parentElement.remove(); target.parentElement.parentElement.remove();
event.stopPropagation()
event.preventDefault()
break; break;
case "bookmark": } else if (type === "bookmark") {
fetchPost("/api/attr/getBookmarkLabels", {}, (response) => { fetchPost("/api/attr/getBookmarkLabels", {}, (response) => {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
if (response.data.length === 0) { if (response.data.length === 0) {
@ -255,7 +306,7 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: item, label: item,
click() { click() {
actionElement.parentElement.parentElement.querySelector("input").value = item; target.parentElement.parentElement.querySelector("input").value = item;
} }
}).element); }).element);
}); });
@ -264,12 +315,11 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
window.siyuan.menus.menu.element.classList.add("b3-menu--list"); window.siyuan.menus.menu.element.classList.add("b3-menu--list");
window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16, w: 16}); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16, w: 16});
}); });
event.stopPropagation()
event.preventDefault()
break; break;
} } else if (type === "addCustom") {
}); target.parentElement.insertAdjacentHTML("beforebegin", `<div class="b3-label b3-label--noborder">
const btnsElement = dialog.element.querySelectorAll(".b3-button");
btnsElement[0].addEventListener("click", () => {
dialog.element.querySelector(".custom-attr").insertAdjacentHTML("beforeend", `<div class="b3-label b3-label--noborder">
<div class="fn__flex"> <div class="fn__flex">
<input placeholder="${window.siyuan.languages.attrName}" class="b3-text-field"> <input placeholder="${window.siyuan.languages.attrName}" class="b3-text-field">
<span class="fn__flex-1"></span> <span class="fn__flex-1"></span>
@ -278,22 +328,26 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
<div class="fn__hr"></div> <div class="fn__hr"></div>
<textarea class="b3-text-field fn__block" rows="1" placeholder="${window.siyuan.languages.attrValue1}"></textarea> <textarea class="b3-text-field fn__block" rows="1" placeholder="${window.siyuan.languages.attrValue1}"></textarea>
</div>`); </div>`);
const inputElements = dialog.element.querySelectorAll(".b3-text-field") as NodeListOf<HTMLInputElement>; const inputElements = dialog.element.querySelectorAll(".b3-text-field") as NodeListOf<HTMLInputElement>;
inputElements[inputElements.length - 2].focus(); inputElements[inputElements.length - 2].focus();
bindAttrInput(inputElements[inputElements.length - 1], btnsElement[2]); bindAttrInput(inputElements[inputElements.length - 1], dialog.element);
bindAttrInput(inputElements[inputElements.length - 2], btnsElement[2]); bindAttrInput(inputElements[inputElements.length - 2], dialog.element);
}); event.stopPropagation()
btnsElement[1].addEventListener("click", () => { event.preventDefault()
dialog.destroy(); break;
}); } else if (type === "closeDialog") {
btnsElement[2].addEventListener("click", () => { dialog.destroy();
cb(dialog, removeAttrs); } else if (type === "confirm") {
cb(dialog, removeAttrs);
}
target = target.parentElement;
}
}); });
dialog.element.querySelectorAll(".b3-text-field").forEach((item: HTMLInputElement) => { dialog.element.querySelectorAll(".b3-text-field").forEach((item: HTMLInputElement) => {
if (focusName === item.getAttribute("data-name")) { if (focusName === item.getAttribute("data-name")) {
item.focus(); item.focus();
} }
bindAttrInput(item, btnsElement[2]); bindAttrInput(item, dialog.element);
}); });
}; };