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

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

Browse source
This commit is contained in:
Vanessa 2024-11-13 00:51:30 +08:00
parent 891f0b9a99
commit 41954d9cff
9 changed files with 101 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/src/assets/scss/business/_color.scss
View file

@ -21,7 +21,8 @@
margin: 0 8px 0 0;
}
&:hover:not(.color__square--list) {
&:hover:not(.color__square--list),
&--current {
box-shadow: 0 0 0 1px var(--b3-list-hover) inset, 0 0 0 4px var(--b3-theme-background);
}
}

8
app/src/assets/scss/business/_emojis.scss
View file

@ -30,6 +30,14 @@
width: 73px;
margin: 8px;
cursor: pointer;
transition: var(--b3-transition);
&:hover,
&--current {
background-color: var(--b3-theme-background);
border-radius: var(--b3-border-radius);
box-shadow: 0 0 0 1px var(--b3-list-hover) inset, 0 0 0 4px var(--b3-theme-background);
}
}
&-color {

1
app/src/assets/scss/business/_layout.scss
View file

@ -294,7 +294,6 @@
float: left;
height: 18px;
width: 18px;
border-radius: var(--b3-border-radius);
margin-top: 1px;
}
}

116
app/src/emoji/index.ts
View file

@ -27,7 +27,7 @@ export const unicode2Emoji = (unicode: string, className = "", needSpan = false,
}
let emoji = "";
if (unicode.startsWith("api/icon/getDynamicIcon")) {
emoji = `<img class="${className}" ${lazy ? "data-" : ""}src="/${unicode}"/>`;
emoji = `<img class="${className}" ${lazy ? "data-" : ""}src="${unicode}"/>`;
} else if (unicode.indexOf(".") > -1) {
emoji = `<img class="${className}" ${lazy ? "data-" : ""}src="/emojis/${unicode}"/>`;
} else {
@ -194,7 +194,29 @@ export const addEmoji = (unicode: string) => {
fetchPost("/api/setting/setEmoji", {emoji: window.siyuan.config.editor.emoji});
};
export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition, avCB?: (emoji: string) => void) => {
const genWeekdayOptions = (lang: string, weekdayType: string) => {
const dynamicWeekdayLang = {
"1": ["Sun", "周日", "週日"],
"2": ["SUN", "周天", "週天"],
"3": ["Sunday", "星期日", "星期日"],
"4": ["SUNDAY", "星期天", "星期天"],
};
let currentLang = 0
if (lang === "") {
lang = window.siyuan.config.lang;
}
if (lang === "zh_CN") {
currentLang = 1;
} else if (lang === "zh_CHT") {
currentLang = 2;
}
return `<option value="1" ${weekdayType === "1" ? " selected" : ""}>${dynamicWeekdayLang[1][currentLang]}</option>
<option value="2" ${weekdayType === "2" ? " selected" : ""}>${dynamicWeekdayLang[2][currentLang]}</option>
<option value="3" ${weekdayType === "3" ? " selected" : ""}>${dynamicWeekdayLang[3][currentLang]}</option>
<option value="4" ${weekdayType === "4" ? " selected" : ""}>${dynamicWeekdayLang[4][currentLang]}</option>`
}
export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition, avCB?: (emoji: string) => void, dynamicImgElement?: HTMLElement) => {
if (type !== "av") {
window.siyuan.menus.menu.remove();
} else {
@ -202,6 +224,24 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
}
const dynamicURL = "api/icon/getDynamicIcon?";
const dynamicCurrentObj: IObject = {
color: "#d23f31",
lang: "",
date: "",
weekdayType: "1",
type: "1",
content: "SiYuan",
};
if (dynamicImgElement && dynamicImgElement.getAttribute("src").startsWith(dynamicURL)) {
const dynamicCurrentUrl = new URLSearchParams(dynamicImgElement.getAttribute("src").replace(dynamicURL, ""));
dynamicCurrentObj.color = dynamicCurrentUrl.get("color") || "#d23f31";
dynamicCurrentObj.lang = dynamicCurrentUrl.get("lang") || "";
dynamicCurrentObj.date = dynamicCurrentUrl.get("date") || "";
dynamicCurrentObj.weekdayType = dynamicCurrentUrl.get("weekdayType") || "1";
dynamicCurrentObj.type = dynamicCurrentUrl.get("type") || "1";
dynamicCurrentObj.content = dynamicCurrentUrl.get("content") || "SiYuan";
}
const dialog = new Dialog({
disableAnimation: true,
transparent: true,
@ -249,69 +289,66 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
</div>
<div class="fn__none" data-type="tab-dynamic">
<div class="fn__flex emoji__dynamic-color">
<div class="color__square fn__pointer" style="background-color:#d23f31"></div>
<div class="color__square fn__pointer" style="background-color:#3575f0"></div>
<div class="color__square fn__pointer" style="background-color:#f3a92f"></div>
<div class="color__square fn__pointer" style="background-color:#65b84d"></div>
<div class="color__square fn__pointer" style="background-color:#e099ff"></div>
<div class="color__square fn__pointer" style="background-color:#ea5d97"></div>
<div class="color__square fn__pointer" style="background-color:#93627f"></div>
<div class="color__square fn__pointer" style="background-color:#5f6368"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#d23f31" ? " color__square--current" : ""}" style="background-color:#d23f31"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#3575f0" ? " color__square--current" : ""}" style="background-color:#3575f0"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#f3a92f" ? " color__square--current" : ""}" style="background-color:#f3a92f"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#65b84d" ? " color__square--current" : ""}" style="background-color:#65b84d"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#e099ff" ? " color__square--current" : ""}" style="background-color:#e099ff"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#ea5d97" ? " color__square--current" : ""}" style="background-color:#ea5d97"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#93627f" ? " color__square--current" : ""}" style="background-color:#93627f"></div>
<div class="color__square fn__pointer${dynamicCurrentObj.color === "#5f6368" ? " color__square--current" : ""}" style="background-color:#5f6368"></div>
<div class="fn__space--small"></div>
<input type="text" class="b3-text-field fn__flex-1 fn__flex-center" style="background-color: #d23f31;color:#fff" value="#d23f31">
<input type="text" class="b3-text-field fn__flex-1 fn__flex-center" style="background-color: ${dynamicCurrentObj.color};color:#fff" value="${dynamicCurrentObj.color}">
</div>
<div class="fn__flex">
<span class="fn__space"></span>
<span class="fn__flex-center ft__on-surface">${window.siyuan.languages.language}</span>
<span class="fn__flex-center ft__on-surface" style="width: 89px">${window.siyuan.languages.language}</span>
<span class="fn__space--small"></span>
<select class="b3-select fn__flex-1">
<option value="" selected>${window.siyuan.languages.themeOS}</option>
<option value="en_US">English (en_US)</option>
<option value="zh_CHT">繁體中文 (zh_CHT)</option>
<option value="zh_CN">简体中文 (zh_CN)</option>
<option value="" ${dynamicCurrentObj.lang === "" ? " selected" : ""}>${window.siyuan.languages.themeOS}</option>
<option value="en_US" ${dynamicCurrentObj.lang === "en_US" ? " selected" : ""}>English (en_US)</option>
<option value="zh_CHT" ${dynamicCurrentObj.lang === "zh_CHT" ? " selected" : ""}>繁體中文 (zh_CHT)</option>
<option value="zh_CN" ${dynamicCurrentObj.lang === "zh_CN" ? " selected" : ""}>简体中文 (zh_CN)</option>
</select>
<span class="fn__space"></span>
</div>
<div class="fn__hr"></div>
<div class="fn__flex">
<span class="fn__space"></span>
<span class="fn__flex-center ft__on-surface">${window.siyuan.languages.date}</span>
<span class="fn__flex-center ft__on-surface" style="width: 89px">${window.siyuan.languages.date}</span>
<span class="fn__space--small"></span>
<input type="date" class="b3-text-field fn__flex-1"/>
<input type="date" class="b3-text-field fn__flex-1" value="${dynamicCurrentObj.date}"/>
<span class="fn__space"></span>
</div>
<div class="fn__hr"></div>
<div class="fn__flex">
<span class="fn__space"></span>
<span class="fn__flex-center ft__on-surface">${window.siyuan.languages.format}</span>
<span class="fn__flex-center ft__on-surface" style="width: 89px">${window.siyuan.languages.format}</span>
<span class="fn__space--small"></span>
<select class="b3-select fn__flex-1">
<option value="1" selected>周日/Sun</option>
<option value="2">周天/SUN</option>
<option value="3">星期日/Sunday</option>
<option value="4">星期天/SUNDAY</option>
${genWeekdayOptions(dynamicCurrentObj.lang, dynamicCurrentObj.weekdayType)}
</select>
<span class="fn__space"></span>
</div>
<div class="fn__flex fn__flex-wrap">
<img class="emoji__dynamic-item" src="${dynamicURL}type=1&color=d23f31">
<img class="emoji__dynamic-item" src="${dynamicURL}type=2&color=d23f31">
<img class="emoji__dynamic-item" src="${dynamicURL}type=3&color=d23f31">
<img class="emoji__dynamic-item" src="${dynamicURL}type=4&color=d23f31">
<img class="emoji__dynamic-item" src="${dynamicURL}type=5&color=d23f31">
<img class="emoji__dynamic-item" src="${dynamicURL}type=6&color=d23f31">
<img class="emoji__dynamic-item" src="${dynamicURL}type=7&color=d23f31">
<img class="emoji__dynamic-item${dynamicCurrentObj.type === "1" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=1&color=${encodeURIComponent(dynamicCurrentObj.color)}&date=${dynamicCurrentObj.date}&weekdayType=${dynamicCurrentObj.weekdayType}&lang=${dynamicCurrentObj.lang}">
<img class="emoji__dynamic-item${dynamicCurrentObj.type === "2" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=2&color=${encodeURIComponent(dynamicCurrentObj.color)}&date=${dynamicCurrentObj.date}&weekdayType=${dynamicCurrentObj.weekdayType}&lang=${dynamicCurrentObj.lang}">
<img class="emoji__dynamic-item${dynamicCurrentObj.type === "3" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=3&color=${encodeURIComponent(dynamicCurrentObj.color)}&date=${dynamicCurrentObj.date}&weekdayType=${dynamicCurrentObj.weekdayType}&lang=${dynamicCurrentObj.lang}">
<img class="emoji__dynamic-item${dynamicCurrentObj.type === "4" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=4&color=${encodeURIComponent(dynamicCurrentObj.color)}&date=${dynamicCurrentObj.date}&weekdayType=${dynamicCurrentObj.weekdayType}&lang=${dynamicCurrentObj.lang}">
<img class="emoji__dynamic-item${dynamicCurrentObj.type === "5" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=5&color=${encodeURIComponent(dynamicCurrentObj.color)}&date=${dynamicCurrentObj.date}&weekdayType=${dynamicCurrentObj.weekdayType}&lang=${dynamicCurrentObj.lang}">
<img class="emoji__dynamic-item${dynamicCurrentObj.type === "6" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=6&color=${encodeURIComponent(dynamicCurrentObj.color)}&date=${dynamicCurrentObj.date}&weekdayType=${dynamicCurrentObj.weekdayType}&lang=${dynamicCurrentObj.lang}">
<img class="emoji__dynamic-item${dynamicCurrentObj.type === "7" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=7&color=${encodeURIComponent(dynamicCurrentObj.color)}&date=${dynamicCurrentObj.date}&weekdayType=${dynamicCurrentObj.weekdayType}&lang=${dynamicCurrentObj.lang}">
</div>
<div class="fn__hr"></div>
<div class="fn__flex">
<span class="fn__space"></span>
<span class="fn__flex-center ft__on-surface">${window.siyuan.languages.custom}</span>
<span class="fn__flex-center ft__on-surface" style="width: 89px">${window.siyuan.languages.custom}</span>
<span class="fn__space--small"></span>
<input type="text" class="b3-text-field fn__flex-1" value="SiYuan">
<input type="text" class="b3-text-field fn__flex-1" value="${dynamicCurrentObj.content}">
<span class="fn__space"></span>
</div>
<div>
<img data-type="text" class="emoji__dynamic-item" src="${dynamicURL}type=8&color=d23f31&content=SiYuan&id=${id}">
<img data-type="text" class="emoji__dynamic-item${dynamicCurrentObj.type === "8" ? " emoji__dynamic-item--current" : ""}" src="${dynamicURL}type=8&color=${encodeURIComponent(dynamicCurrentObj.color)}&content=${dynamicCurrentObj.content}&id=${id}">
</div>
</div>
</div>
@ -526,11 +563,10 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
let unicode = "";
if (target.classList.contains("emojis__item")) {
unicode = target.getAttribute("data-unicode");
if (type !== "av") {
dialog.destroy();
}
dialog.destroy();
} else if (target.classList.contains("emoji__dynamic-item")) {
unicode = target.getAttribute("src");
dialog.destroy();
} else {
// 随机
unicode = getRandomEmoji();
@ -593,6 +629,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
url.delete("lang");
}
item.setAttribute("src", dynamicURL + url.toString());
dynamicLangElements[1].innerHTML = genWeekdayOptions(dynamicLangElements[0].value, dynamicLangElements[1].value)
});
});
dynamicLangElements[1].addEventListener("change", () => {
@ -619,6 +656,13 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
item.setAttribute("src", dynamicURL + url.toString());
dynamicTextElements[0].style.backgroundColor = dynamicTextElements[0].value;
});
dialog.element.querySelectorAll(".color__square").forEach((item: HTMLElement) => {
if (item.style.backgroundColor === dynamicTextElements[0].value) {
item.classList.add("color__square--current");
} else {
item.classList.remove("color__square--current");
}
});
});
dynamicTextElements[1].addEventListener("input", () => {
const url = new URLSearchParams(dynamicTextImgElement.getAttribute("src").replace(dynamicURL, ""));

6
app/src/layout/dock/Files.ts
View file

@ -147,7 +147,7 @@ export class Files extends Model {
y: rect.bottom,
h: rect.height,
w: rect.width,
});
}, undefined, target.querySelector("img"));
break;
} else if (type === "toggle") {
const svgElement = target.querySelector("svg");
@ -274,14 +274,14 @@ export class Files extends Model {
y: rect.bottom,
h: rect.height,
w: rect.width,
});
}, undefined, target.querySelector("img"));
} else {
openEmojiPanel(target.parentElement.parentElement.getAttribute("data-url"), "notebook", {
x: rect.left,
y: rect.bottom,
h: rect.height,
w: rect.width,
});
}, undefined, target.querySelector("img"));
}
break;
} else if (isNotCtrl(event) && target.classList.contains("b3-list-item__toggle")) {

2
app/src/protyle/header/Background.ts
View file

@ -258,7 +258,7 @@ export class Background {
y: rect.bottom,
h: rect.height,
w: rect.width
});
}, undefined, target.querySelector("img"));
event.preventDefault();
event.stopPropagation();
break;

2
app/src/protyle/render/av/col.ts
View file

@ -626,7 +626,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
iconElement.setAttribute("data-icon", unicode);
iconElement.innerHTML = unicode ? unicode2Emoji(unicode) : `<svg style="height: 14px;width: 14px"><use xlink:href="#${getColIconByType(type)}"></use></svg>`;
updateAttrViewCellAnimation(blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {icon: unicode});
});
}, iconElement.querySelector("img"));
event.preventDefault();
event.stopPropagation();
});

4
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -724,7 +724,7 @@ export const openMenuPanel = (options: {
}]);
target.innerHTML = unicode ? unicode2Emoji(unicode) : '<svg style="width: 14px;height: 14px;"><use xlink:href="#iconTable"></use></svg>';
target.dataset.icon = unicode;
});
}, target.querySelector("img"));
event.preventDefault();
event.stopPropagation();
break;
@ -796,7 +796,7 @@ export const openMenuPanel = (options: {
updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {icon: unicode});
}
target.dataset.icon = unicode;
});
}, target.querySelector("img"));
event.preventDefault();
event.stopPropagation();
break;

6
app/src/protyle/wysiwyg/index.ts
View file

@ -2616,7 +2616,9 @@ export class WYSIWYG {
emojiElement.insertAdjacentHTML("afterend", "<wbr>");
const oldHTML = nodeElement.outerHTML;
let emojiHTML;
if (unicode.indexOf(".") > -1) {
if (unicode.startsWith("api/icon/getDynamicIcon")) {
emojiHTML = `<img class="emoji" src="${unicode}"/>`;
} else if (unicode.indexOf(".") > -1) {
const emojiList = unicode.split(".");
emojiHTML = `<img alt="${emojiList[0]}" class="emoji" src="/emojis/${unicode}" title="${emojiList[0]}">`;
} else {
@ -2626,7 +2628,7 @@ export class WYSIWYG {
hideElements(["dialog"]);
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
focusByWbr(nodeElement, range);
});
}, emojiElement);
}
return;
}