Vanessa 2022-06-29 09:52:50 +08:00
parent cb44439d66
commit b038135338
2 changed files with 50 additions and 30 deletions

View file

@ -9,11 +9,13 @@ export class Dialog {
constructor(options: { constructor(options: {
title?: string, title?: string,
transparent?: boolean,
content: string, content: string,
width?: string width?: string
height?: string, height?: string,
destroyCallback?: () => void destroyCallback?: () => void
disableClose?: boolean disableClose?: boolean
disableAnimation?: boolean
}) { }) {
this.disableClose = options.disableClose; this.disableClose = options.disableClose;
this.id = genUUID(); this.id = genUUID();
@ -22,7 +24,7 @@ export class Dialog {
this.element = document.createElement("div") as HTMLElement; this.element = document.createElement("div") as HTMLElement;
this.element.innerHTML = `<div class="b3-dialog"> this.element.innerHTML = `<div class="b3-dialog">
<div class="b3-dialog__scrim"></div> <div class="b3-dialog__scrim"${options.transparent ? 'style="background-color:transparent"' : ""}></div>
<div class="b3-dialog__container" style="width:${options.width || "auto"}"> <div class="b3-dialog__container" style="width:${options.width || "auto"}">
<svg class="b3-dialog__close fn__a${this.disableClose ? " fn__none" : ""}"><use xlink:href="#iconClose"></use></svg> <svg class="b3-dialog__close fn__a${this.disableClose ? " fn__none" : ""}"><use xlink:href="#iconClose"></use></svg>
<div class="b3-dialog__header${options.title ? "" : " fn__none"}" onselectstart="return false;">${options.title || ""}</div> <div class="b3-dialog__header${options.title ? "" : " fn__none"}" onselectstart="return false;">${options.title || ""}</div>
@ -30,7 +32,9 @@ export class Dialog {
</div></div>`; </div></div>`;
this.element.querySelector(".b3-dialog__scrim").addEventListener(getEventName(), (event) => { this.element.querySelector(".b3-dialog__scrim").addEventListener(getEventName(), (event) => {
this.destroy(); if (!this.disableClose) {
this.destroy();
}
event.stopPropagation(); event.stopPropagation();
}); });
if (!this.disableClose) { if (!this.disableClose) {
@ -40,9 +44,13 @@ export class Dialog {
}); });
} }
document.body.append(this.element); document.body.append(this.element);
setTimeout(() => { if (options.disableAnimation) {
this.element.classList.add("b3-dialog--open"); this.element.classList.add("b3-dialog--open");
}); } else {
setTimeout(() => {
this.element.classList.add("b3-dialog--open");
});
}
} }
public destroy() { public destroy() {

View file

@ -48,6 +48,33 @@ const getRightBlock = (element: HTMLElement, x: number, y: number) => {
return nodeElement; return nodeElement;
}; };
const switchDialogEvent = (event: MouseEvent, switchDialog: Dialog) => {
event.preventDefault();
event.stopPropagation();
let target = event.target as HTMLElement;
while (!target.isSameNode(switchDialog.element)) {
if (target.classList.contains("b3-list-item")) {
const currentType = target.getAttribute("data-type") as TDockType;
if (currentType) {
getDockByType(currentType).toggleModel(currentType, true);
} else {
const currentId = target.getAttribute("data-id");
getAllTabs().find(item => {
if (item.id === currentId) {
item.parent.switchTab(item.headElement);
setPanelFocus(item.headElement.parentElement.parentElement);
return true;
}
});
}
switchDialog.destroy();
switchDialog = undefined;
break;
}
target = target.parentElement;
}
}
export const globalShortcut = () => { export const globalShortcut = () => {
window.addEventListener("mousemove", (event) => { window.addEventListener("mousemove", (event) => {
if (window.siyuan.hideBreadcrumb) { if (window.siyuan.hideBreadcrumb) {
@ -159,6 +186,7 @@ export const globalShortcut = () => {
}); });
let switchDialog: Dialog; let switchDialog: Dialog;
window.addEventListener("keyup", (event) => { window.addEventListener("keyup", (event) => {
window.siyuan.ctrlIsPressed = false; window.siyuan.ctrlIsPressed = false;
window.siyuan.shiftIsPressed = false; window.siyuan.shiftIsPressed = false;
@ -288,33 +316,17 @@ export const globalShortcut = () => {
</div> </div>
<div class="fn__hr"></div> <div class="fn__hr"></div>
</div>`, </div>`,
disableClose: true disableClose: true,
disableAnimation: true,
transparent: true,
}); });
switchDialog.element.addEventListener(isMac() ? "contextmenu" : "click", (event) => { if (isMac()) {
event.preventDefault(); switchDialog.element.addEventListener("contextmenu", (event) => {
event.stopPropagation(); switchDialogEvent(event, switchDialog)
let target = event.target as HTMLElement; });
while (!target.isSameNode(switchDialog.element)) { }
if (target.classList.contains("b3-list-item")) { switchDialog.element.addEventListener("click", (event) => {
const currentType = target.getAttribute("data-type") as TDockType; switchDialogEvent(event, switchDialog)
if (currentType) {
getDockByType(currentType).toggleModel(currentType, true);
} else {
const currentId = target.getAttribute("data-id");
getAllTabs().find(item => {
if (item.id === currentId) {
item.parent.switchTab(item.headElement);
setPanelFocus(item.headElement.parentElement.parentElement);
return true;
}
});
}
switchDialog.destroy();
switchDialog = undefined;
break;
}
target = target.parentElement;
}
}); });
return; return;
} }