github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-09 00:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vanessa 2023-04-22 19:04:29 +08:00
parent a2fae4dce1
commit b363ccfc0f
1 changed files with 71 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
app/src/history/diff.ts
View File

@ -10,7 +10,7 @@ import {isMobile} from "../util/functions";
const genItem = (data: [], data2?: { title: string, fileID: string }[]) => {
if (!data || data.length === 0) {
return `<li style="padding-left: 44px;" class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
return `<li style="padding-left: 40px;" class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
}
let html = "";
data.forEach((item: { title: string, fileID: string }, index) => {
@ -18,7 +18,7 @@ const genItem = (data: [], data2?: { title: string, fileID: string }[]) => {
if (data2) {
id2 = `data-id2="${data2[index].fileID}"`;
}
html += `<li style="padding-left: 44px;" class="b3-list-item" ${id2} data-id="${item.fileID}">
html += `<li style="padding-left: 40px;" class="b3-list-item" ${id2} data-id="${item.fileID}">
<span class="b3-list-item__text">${escapeHtml(item.title)}</span>
</li>`;
});
@ -75,6 +75,7 @@ const renderCompare = (element: HTMLElement) => {
leftElement.lastElementChild.classList.remove("fn__none");
onGet(response, leftEditor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]);
}
textElement.previousElementSibling.textContent = dayjs(response.data.updated).format("YYYY-MM-DD HH:mm")
});
const id2 = element.getAttribute("data-id2");
if (id2) {
@ -90,6 +91,7 @@ const renderCompare = (element: HTMLElement) => {
rightElement.lastElementChild.classList.remove("fn__none");
onGet(response, rightEditor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]);
}
textElement.previousElementSibling.textContent = dayjs(response.data.updated).format("YYYY-MM-DD HH:mm")
});
} else {
rightElement.classList.add("fn__none");
@ -100,19 +102,78 @@ export const showDiff = (data: { id: string, time: string }[]) => {
if (data.length !== 2) {
return;
}
let left;
let right;
if (data[0].time > data[1].time) {
let left: string;
let right: string;
if (data[0].time < data[1].time) {
left = data[1].id;
right = data[0].id;
} else {
left = data[0].id;
right = data[1].id;
}
const dialog = new Dialog({
title: window.siyuan.languages.compare,
content: "",
width: isMobile() ? "92vw" : "80vw",
height: "80vh",
destroyCallback() {
leftEditor = undefined;
rightEditor = undefined;
}
});
dialog.element.addEventListener("click", (event) => {
let target = event.target as HTMLElement;
while (target && target !== dialog.element) {
if (target.classList.contains("b3-list-item") && !target.dataset.id) {
target.nextElementSibling.classList.toggle("fn__none");
target.querySelector("svg").classList.toggle("b3-list-item__arrow--open");
event.preventDefault();
event.stopPropagation();
break;
} else if (target.classList.contains("b3-list-item") && target.dataset.id) {
if (target.classList.contains("b3-list-item--focus")) {
return;
}
dialog.element.querySelector(".history__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
target.classList.add("b3-list-item--focus");
renderCompare(target);
event.preventDefault();
event.stopPropagation();
break;
} else if (target.classList.contains("block__icon")) {
if (target.getAttribute("data-direct") === "left") {
target.setAttribute("data-direct", "right")
genHTML(right, left, dialog);
} else {
target.setAttribute("data-direct", "left")
genHTML(left, right, dialog);
}
event.preventDefault();
event.stopPropagation();
break;
}
target = target.parentElement;
}
});
genHTML(left, right, dialog);
};
const genHTML = (left: string, right: string, dialog: Dialog) => {
leftEditor = undefined;
rightEditor = undefined;
fetchPost("/api/repo/diffRepoSnapshots", {left, right}, (response) => {
const dialog = new Dialog({
title: window.siyuan.languages.compare,
content: `<div class="fn__flex" style="height: 100%;${isMobile() ? "flex-direction: column;" : ""}">
const headElement = dialog.element.querySelector(".b3-dialog__header");
headElement.innerHTML = `<div style="padding: 0;min-height: auto;" class="block__icons">
<span class="fn__flex-1"></span>
${dayjs(response.data.left.created).format("YYYY-MM-DD HH:mm")}
<span class="fn__space"></span>
<span class="block__icon block__icon--show" data-direct="left"><svg><use xlink:href="#iconForward"></use></svg></span>
<span class="fn__space"></span>
${dayjs(response.data.right.created).format("YYYY-MM-DD HH:mm")}
<span class="fn__flex-1"></span>
</div>`
headElement.nextElementSibling.innerHTML = `<div class="fn__flex" style="height: 100%;${isMobile() ? "flex-direction: column;" : ""}">
<div class="history__diff"${isMobile() ? 'style="flex:1;width:auto"' : ""}>
<ul class="b3-list b3-list--background">
<li class="b3-list-item">
@ -154,31 +215,6 @@ export const showDiff = (data: { id: string, time: string }[]) => {
<div class="fn__flex-1"></div>
</div>
</div>
</div>`,
width: isMobile() ? "92vw" : "80vw",
height: "80vh",
destroyCallback() {
leftEditor = undefined;
rightEditor = undefined;
}
});
dialog.element.addEventListener("click", (event) => {
let target = event.target as HTMLElement;
while (target && target !== dialog.element) {
if (target.classList.contains("b3-list-item") && !target.dataset.id) {
target.nextElementSibling.classList.toggle("fn__none");
target.querySelector("svg").classList.toggle("b3-list-item__arrow--open");
break;
} else if (target.classList.contains("b3-list-item") && target.dataset.id) {
if (target.classList.contains("b3-list-item--focus")) {
return;
}
dialog.element.querySelector(".history__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
target.classList.add("b3-list-item--focus");
renderCompare(target);
}
target = target.parentElement;
}
});
</div>`;
});
};
}