mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-22 01:20:12 +01:00
This commit is contained in:
parent
cb44439d66
commit
b038135338
2 changed files with 50 additions and 30 deletions
|
|
@ -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() {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue