0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/3048

Browse source
This commit is contained in:
Vanessa 2022-07-16 23:20:50 +08:00
parent 19ca676835
commit c1200926ea
5 changed files with 50 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/src/asset/renderAssets.ts Normal file
View file

@ -0,0 +1,15 @@
import {Constants} from "../constants";
import {pathPosix} from "../util/pathName";
export const renderAssetsPreview = (pathString: string) => {
const type = pathPosix().extname(pathString).toLowerCase()
if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
return `<img style="max-height: 100%" src="${pathString}">`;
} else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
return `<audio style="max-width: 100%" controls="controls" src="${pathString}"></audio>`;
} else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
return `<video style="max-width: 100%" controls="controls" src="${pathString}"></video>`;
} else {
return "";
}
}

14
app/src/config/image.ts
View file

@ -1,12 +1,12 @@
import {escapeHtml} from "../util/escape";
import {confirmDialog} from "../dialog/confirmDialog";
import {Constants} from "../constants";
import {pathPosix} from "../util/pathName";
import {isBrowser} from "../util/functions";
import {hasClosestByClassName} from "../protyle/util/hasClosest";
import {fetchPost} from "../util/fetch";
import {getAllModels} from "../layout/getAll";
import {openBy} from "../editor/util";
import {renderAssetsPreview} from "../asset/renderAssets";
export const image = {
element: undefined as Element,
@ -90,18 +90,8 @@ export const image = {
const liElement = hasClosestByClassName(event.target as Element, "b3-list-item");
if (liElement && liElement.getAttribute("data-path") !== assetsListElement.nextElementSibling.getAttribute("data-path")) {
const item = liElement.getAttribute("data-path");
const type = item.substr(item.lastIndexOf(".")).toLowerCase();
const pathString = item;
assetsListElement.nextElementSibling.setAttribute("data-path", item);
if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
assetsListElement.nextElementSibling.innerHTML = `<img src="${pathString}">`;
} else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
assetsListElement.nextElementSibling.innerHTML = `<audio controls="controls" src="${pathString}"></audio>`;
} else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
assetsListElement.nextElementSibling.innerHTML = `<video controls="controls" src="${pathString}"></video>`;
} else {
assetsListElement.nextElementSibling.innerHTML = "";
}
assetsListElement.nextElementSibling.innerHTML = renderAssetsPreview(item);
}
});
fetchPost("/api/asset/getUnusedAssets", {}, response => {

37
app/src/protyle/toolbar/index.ts
View file

@ -40,6 +40,7 @@ import {unicode2Emoji} from "../../emoji";
import {escapeHtml} from "../../util/escape";
import {hideElements} from "../ui/hideElements";
import {linkMenu} from "../../menus/protyle";
import {renderAssetsPreview} from "../../asset/renderAssets";
export class Toolbar {
public element: HTMLElement;
@ -1152,21 +1153,38 @@ export class Toolbar {
}, (response) => {
let html = "";
response.data.forEach((item: { hName: string, path: string }, index: number) => {
html += `<di data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</di>`;
html += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</div>`;
});
this.subElement.style.width = "";
this.subElement.style.padding = "";
this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh"><input style="margin: 4px 8px 8px 8px" class="b3-text-field"/>
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
this.subElement.innerHTML = `<div style="max-height:50vh" class="fn__flex">
<div class="fn__flex-column" style="min-width: 260px">
<input style="margin: 4px 8px 8px 8px" class="b3-text-field"/>
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
</div>
<div style="width: 260px;display: flex;padding: 8px;overflow: auto;justify-content: center;align-items: center;"></div>
</div>`;
const listElement = this.subElement.querySelector(".b3-list");
listElement.addEventListener("mouseover", (event) => {
const target = event.target as HTMLElement;
const hoverItemElement = hasClosestByClassName(target, "b3-list-item");
if (!hoverItemElement) {
return;
}
previewElement.innerHTML = renderAssetsPreview(hoverItemElement.getAttribute("data-value"))
})
const previewElement = this.subElement.firstElementChild.lastElementChild
previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
const inputElement = this.subElement.querySelector("input");
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
event.stopPropagation();
if (event.isComposing) {
return;
}
upDownHint(this.subElement.lastElementChild.lastElementChild as HTMLElement, event);
const currentElement = upDownHint(listElement, event);
if (currentElement) {
previewElement.innerHTML = renderAssetsPreview(currentElement.getAttribute("data-value"))
}
if (event.key === "Enter") {
hintRenderAssets(this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value"), protyle);
// 空行处插入 mp3 会多一个空的 mp3 块
@ -1185,16 +1203,17 @@ export class Toolbar {
response.data.forEach((item: { path: string, hName: string }, index: number) => {
searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</div>`;
});
this.subElement.firstElementChild.lastElementChild.innerHTML = searchHTML;
listElement.innerHTML = searchHTML;
previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
});
});
this.subElement.lastElementChild.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
const listElement = hasClosestByClassName(target, "b3-list-item");
if (!listElement) {
const listItemElement = hasClosestByClassName(target, "b3-list-item");
if (!listItemElement) {
return;
}
hintRenderAssets(listElement.getAttribute("data-value"), protyle);
hintRenderAssets(listItemElement.getAttribute("data-value"), protyle);
});
const rangePosition = getSelectionPosition(nodeElement, range);
this.subElement.classList.remove("fn__none");

23
app/src/util/history.ts
View file

@ -7,6 +7,7 @@ import {unicode2Emoji} from "../emoji";
import {escapeHtml} from "./escape";
import {isMobile} from "./functions";
import {hasClosestByClassName} from "../protyle/util/hasClosest";
import {renderAssetsPreview} from "../asset/renderAssets";
const renderDoc = (notebook: INotebook, element: HTMLElement) => {
if (!notebook || !notebook.id) {
@ -87,16 +88,7 @@ const renderAssets = (element: HTMLElement) => {
logsHTML += "</ul>";
if (index === 0) {
const type = item.items[0].title.substr(item.items[0].title.lastIndexOf(".")).toLowerCase();
if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
element.lastElementChild.innerHTML = `<img src="${item.items[0].path}">`;
} else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
element.lastElementChild.innerHTML = `<audio controls="controls" src="${item.items[0].path}"></audio>`;
} else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
element.lastElementChild.innerHTML = `<video controls="controls" src="${item.items[0].path}"></video>`;
} else {
element.lastElementChild.innerHTML = item.items[0].path;
}
element.lastElementChild.innerHTML = renderAssetsPreview(item.items[0].path);
}
}
});
@ -394,16 +386,7 @@ export const openHistory = () => {
} else if (target.classList.contains("b3-list-item") && (type === "assets" || type === "doc")) {
const dataPath = target.getAttribute("data-path");
if (type === "assets") {
const type = dataPath.substr(dataPath.lastIndexOf(".")).toLowerCase();
if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
firstPanelElement.nextElementSibling.lastElementChild.innerHTML = `<img src="${dataPath}">`;
} else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
firstPanelElement.nextElementSibling.lastElementChild.innerHTML = `<audio controls="controls" src="${dataPath}"></audio>`;
} else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
firstPanelElement.nextElementSibling.lastElementChild.innerHTML = `<video controls="controls" src="${dataPath}"></video>`;
} else {
firstPanelElement.nextElementSibling.lastElementChild.innerHTML = dataPath;
}
firstPanelElement.nextElementSibling.lastElementChild.innerHTML = renderAssetsPreview(dataPath);
} else if (type === "doc") {
fetchPost("/api/history/getDocHistoryContent", {
historyPath: dataPath

2
app/src/util/upDownHint.ts
View file

@ -19,6 +19,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent) => {
listElement.scrollTop > currentHintElement.offsetTop) {
listElement.scrollTop = currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight;
}
return currentHintElement;
} else if (event.key === "ArrowUp") {
event.preventDefault();
event.stopPropagation();
@ -38,5 +39,6 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent) => {
listElement.scrollTop > currentHintElement.offsetTop - currentHintElement.clientHeight * 2) {
listElement.scrollTop = currentHintElement.offsetTop - currentHintElement.clientHeight * 2;
}
return currentHintElement;
}
};