|
|
@@ -99,6 +99,7 @@ export class Background {
|
|
|
public ial: IObject;
|
|
|
private imgElement: HTMLImageElement;
|
|
|
private iconElement: HTMLElement;
|
|
|
+ private actionElements: NodeListOf<Element>;
|
|
|
private tagsElement: HTMLElement;
|
|
|
private transparentData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
|
|
|
|
|
|
@@ -106,7 +107,7 @@ export class Background {
|
|
|
this.element = document.createElement("div");
|
|
|
this.element.className = "protyle-background";
|
|
|
this.element.innerHTML = `<div class="protyle-background__img">
|
|
|
- <img class="fn__none">
|
|
|
+ <img>
|
|
|
<div class="protyle-icons">
|
|
|
<span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__sw" style="position: relative" aria-label="${window.siyuan.languages.upload}"><input type="file" style="position: absolute;width: 22px;height: 100%;top: 0;left: 0;opacity: .001;overflow: hidden;cursor: pointer;"><svg><use xlink:href="#iconUpload"></use></svg></span>
|
|
|
<span class="protyle-icon b3-tooltips b3-tooltips__sw" data-type="link" aria-label="${window.siyuan.languages.link}"><svg><use xlink:href="#iconLink"></use></svg></span>
|
|
|
@@ -121,18 +122,28 @@ export class Background {
|
|
|
<span class="protyle-icon protyle-icon--last" data-type="confirm">${window.siyuan.languages.confirm}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
-<div class="b3-chips"></div>
|
|
|
-<div class="protyle-background__iconw">
|
|
|
+<div class="protyle-background__ia">
|
|
|
<div class="protyle-background__icon" data-menu="true" data-type="open-emoji"></div>
|
|
|
- <div class="protyle-icons fn__flex-center">
|
|
|
- <span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__s" data-menu="true" data-type="tag" aria-label="${window.siyuan.languages.addTag}"><svg><use xlink:href="#iconTags"></use></svg></span>
|
|
|
- <span class="protyle-icon b3-tooltips b3-tooltips__s" data-type="icon" aria-label="${window.siyuan.languages.randomIcon}"><svg><use xlink:href="#iconEmoji"></use></svg></span>
|
|
|
- <span class="protyle-icon protyle-icon--last b3-tooltips b3-tooltips__s" data-type="random" aria-label="${window.siyuan.languages.titleBg}"><svg><use xlink:href="#iconImage"></use></svg></span>
|
|
|
+ <div class="b3-chips fn__none"></div>
|
|
|
+ <div class="protyle-background__action">
|
|
|
+ <button class="b3-button b3-button--cancel" data-menu="true" data-type="tag">
|
|
|
+ <svg><use xlink:href="#iconTags"></use></svg>
|
|
|
+ ${window.siyuan.languages.addTag}
|
|
|
+ </button>
|
|
|
+ <button class="b3-button b3-button--cancel" data-type="icon">
|
|
|
+ <svg><use xlink:href="#iconEmoji"></use></svg>
|
|
|
+ ${window.siyuan.languages.addIcon}
|
|
|
+ </button>
|
|
|
+ <button class="b3-button b3-button--cancel" data-type="random">
|
|
|
+ <svg><use xlink:href="#iconImage"></use></svg>
|
|
|
+ ${window.siyuan.languages.titleBg}
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>`;
|
|
|
this.tagsElement = this.element.querySelector(".b3-chips") as HTMLElement;
|
|
|
this.iconElement = this.element.querySelector(".protyle-background__icon") as HTMLElement;
|
|
|
- this.imgElement = this.element.firstElementChild.firstElementChild as HTMLImageElement;
|
|
|
+ this.imgElement = this.element.querySelector(".protyle-background__img img") as HTMLImageElement;
|
|
|
+ this.actionElements = this.element.querySelectorAll(".protyle-background__action .b3-button");
|
|
|
|
|
|
this.element.addEventListener("dragover", async (event) => {
|
|
|
event.preventDefault();
|
|
|
@@ -330,12 +341,20 @@ export class Background {
|
|
|
if (protyle.model) {
|
|
|
protyle.model.parent.setDocIcon(emoji);
|
|
|
}
|
|
|
+ this.iconElement.classList.remove("fn__none");
|
|
|
+ const rect = this.iconElement.getBoundingClientRect();
|
|
|
+ openEmojiPanel(protyle.block.rootID, "doc", {
|
|
|
+ x: rect.left,
|
|
|
+ y: rect.bottom,
|
|
|
+ h: rect.height,
|
|
|
+ w: rect.width
|
|
|
+ });
|
|
|
}
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
break;
|
|
|
} else if (type === "tag") {
|
|
|
- this.openTag(protyle);
|
|
|
+ this.openTag(protyle, target);
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
break;
|
|
|
@@ -432,20 +451,25 @@ export class Background {
|
|
|
tags.split(",").forEach((item, index) => {
|
|
|
html += `<div class="b3-chip b3-chip--middle b3-chip--pointer b3-chip--${colors[index % 7]}" data-type="open-search">${item}<svg class="b3-chip__close" data-type="remove-tag"><use xlink:href="#iconCloseRound"></use></svg></div>`;
|
|
|
});
|
|
|
- this.tagsElement.innerHTML = html;
|
|
|
+ this.tagsElement.innerHTML = `${html}<span class="fn__space"></span>
|
|
|
+<button class="b3-button b3-button--cancel fn__flex-center" data-menu="true" data-type="tag"><svg style="margin-right: 0;"><use xlink:href="#iconAdd"></use></svg></button>`
|
|
|
+ this.tagsElement.classList.remove("fn__none")
|
|
|
+ this.actionElements[0].classList.add("fn__none")
|
|
|
} else {
|
|
|
- this.tagsElement.innerHTML = "";
|
|
|
+ this.tagsElement.classList.add("fn__none")
|
|
|
+ this.actionElements[0].classList.remove("fn__none")
|
|
|
}
|
|
|
|
|
|
if (icon) {
|
|
|
this.iconElement.classList.remove("fn__none");
|
|
|
this.iconElement.innerHTML = unicode2Emoji(icon);
|
|
|
+ this.actionElements[1].classList.add("fn__none")
|
|
|
} else {
|
|
|
+ this.actionElements[1].classList.remove("fn__none")
|
|
|
this.iconElement.classList.add("fn__none");
|
|
|
}
|
|
|
|
|
|
if (img) {
|
|
|
- this.imgElement.classList.remove("fn__none");
|
|
|
// 历史数据解析：background-image: url(\"assets/沙发背景墙11-20220418171700-w6vilzt.jpeg\"); background-position: center -254px; background-size: cover; background-repeat: no-repeat; min-height: 30vh
|
|
|
this.imgElement.setAttribute("style", Lute.UnEscapeHTMLStr(img));
|
|
|
if (img.indexOf("url(") > -1) {
|
|
|
@@ -459,23 +483,21 @@ export class Background {
|
|
|
this.imgElement.setAttribute("src", this.transparentData);
|
|
|
this.element.querySelector('[data-type="position"]').classList.add("fn__none");
|
|
|
}
|
|
|
- } else {
|
|
|
- this.imgElement.classList.add("fn__none");
|
|
|
- }
|
|
|
-
|
|
|
- if (img) {
|
|
|
+ this.actionElements[2].classList.add("fn__none")
|
|
|
+ this.imgElement.parentElement.classList.remove("fn__none");
|
|
|
+ this.iconElement.style.marginTop = "";
|
|
|
+ /// #if MOBILE
|
|
|
// 移动端键盘弹起和点击加号需保持滚动高度一致
|
|
|
- this.element.style.minHeight = isMobile() ? "200px" : "30vh";
|
|
|
- } else if (icon) {
|
|
|
- this.element.style.minHeight = (this.tagsElement.clientHeight + 56) + "px";
|
|
|
- } else if (tags) {
|
|
|
- this.element.style.minHeight = this.tagsElement.clientHeight + "px";
|
|
|
+ this.imgElement.style.height = "200px"
|
|
|
+ /// #endif
|
|
|
} else {
|
|
|
- this.element.style.minHeight = "0";
|
|
|
+ this.imgElement.parentElement.classList.add("fn__none");
|
|
|
+ this.actionElements[2].classList.remove("fn__none")
|
|
|
+ this.iconElement.style.marginTop = "8px";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- private openTag(protyle: IProtyle) {
|
|
|
+ private openTag(protyle: IProtyle, target: HTMLElement) {
|
|
|
window.siyuan.menus.menu.remove();
|
|
|
const menu = new Menu();
|
|
|
menu.addItem({
|
|
|
@@ -549,7 +571,7 @@ export class Background {
|
|
|
}
|
|
|
});
|
|
|
menu.element.querySelector(".b3-menu__items").setAttribute("style", "overflow: initial");
|
|
|
- const rect = this.iconElement.nextElementSibling.getBoundingClientRect();
|
|
|
+ const rect = target.getBoundingClientRect();
|
|
|
menu.open({x: rect.left, y: rect.top + rect.height});
|
|
|
menu.element.querySelector("input").focus();
|
|
|
}
|
Vanessa