This commit is contained in:
Vanessa 2022-06-03 17:12:17 +08:00
parent ac9c9cb9e0
commit d6201908ab
2 changed files with 21 additions and 21 deletions

View file

@ -38,7 +38,7 @@ export const unicode2Emoji = (unicode: string, assic = false) => {
return emoji;
};
export const lazyLoadEmoji = (element: HTMLElement) => {
export const lazyLoadEmoji = (element: HTMLElement, assic = false) => {
const emojiIntersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entrie: IntersectionObserverEntry & { target: HTMLImageElement }) => {
const index = entrie.target.getAttribute("data-index");
@ -46,7 +46,7 @@ export const lazyLoadEmoji = (element: HTMLElement) => {
let html = "";
window.siyuan.emojis[parseInt(index)].items.forEach(emoji => {
html += `<button data-unicode="${emoji.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji.description_zh_cn : emoji.description}">
${unicode2Emoji(emoji.unicode)}</button>`;
${unicode2Emoji(emoji.unicode, assic)}</button>`;
});
entrie.target.innerHTML = html;
entrie.target.removeAttribute("data-index");
@ -58,7 +58,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
});
};
export const filterEmoji = (key = "", max?: number) => {
export const filterEmoji = (key = "", max?: number, assic = false) => {
let html = "";
const recentEmojis: {
unicode: string,
@ -99,7 +99,7 @@ export const filterEmoji = (key = "", max?: number) => {
customStore.push(emoji);
} else {
keyHTML += `<button data-unicode="${emoji.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji.description_zh_cn : emoji.description}">
${unicode2Emoji(emoji.unicode)}</button>`;
${unicode2Emoji(emoji.unicode, assic)}</button>`;
}
maxCount++;
}
@ -109,7 +109,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
}
if (index < 2) {
html += `<button data-unicode="${emoji.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji.description_zh_cn : emoji.description}">
${unicode2Emoji(emoji.unicode)}</button>`;
${unicode2Emoji(emoji.unicode, assic)}</button>`;
}
}
});
@ -134,7 +134,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
return 0;
}).forEach(item => {
html += `<button data-unicode="${item.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? item.description_zh_cn : item.description}">
${unicode2Emoji(item.unicode)}</button>`;
${unicode2Emoji(item.unicode, assic)}</button>`;
});
html = html + keyHTML + "</div>";
}
@ -145,7 +145,7 @@ ${unicode2Emoji(item.unicode)}</button>`;
const emoji = recentEmojis.filter((item) => item.unicode === key);
if (emoji[0]) {
recentHTML += `<button data-unicode="${emoji[0].unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji[0].description_zh_cn : emoji[0].description}">
${unicode2Emoji(emoji[0].unicode)}
${unicode2Emoji(emoji[0].unicode, assic)}
</button>`;
}
});

View file

@ -76,7 +76,7 @@ export class Hint {
let html = "";
window.siyuan.emojis[parseInt(index)].items.forEach(emoji => {
html += `<button data-unicode="${emoji.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji.description_zh_cn : emoji.description}">
${unicode2Emoji(emoji.unicode)}</button>`;
${unicode2Emoji(emoji.unicode, true)}</button>`;
});
titleElement.nextElementSibling.innerHTML = html;
titleElement.nextElementSibling.removeAttribute("data-index");
@ -322,7 +322,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
}
const panelElement = this.element.querySelector(".emojis__panel");
if (panelElement) {
panelElement.innerHTML = filterEmoji(value, 256);
panelElement.innerHTML = filterEmoji(value, 256, true);
if (value) {
panelElement.nextElementSibling.classList.add("fn__none");
} else {
@ -330,21 +330,21 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
}
} else {
this.element.innerHTML = `<div class="emojis" style="height: auto;">
<div class="emojis__panel">${filterEmoji(value, 256)}</div>
<div class="emojis__panel">${filterEmoji(value, 256, true)}</div>
<div class="fn__flex${value ? " fn__none" : ""}">
<div data-type="0" class="emojis__type" aria-label="${window.siyuan.languages.recentEmoji}">${unicode2Emoji("2b50")}</div>
<div data-type="1" class="emojis__type" aria-label="${window.siyuan.emojis[0][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f527")}</div>
<div data-type="2" class="emojis__type" aria-label="${window.siyuan.emojis[1][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f60d")}</div>
<div data-type="3" class="emojis__type" aria-label="${window.siyuan.emojis[2][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f433")}</div>
<div data-type="4" class="emojis__type" aria-label="${window.siyuan.emojis[3][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f96a")}</div>
<div data-type="5" class="emojis__type" aria-label="${window.siyuan.emojis[4][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f3a8")}</div>
<div data-type="6" class="emojis__type" aria-label="${window.siyuan.emojis[5][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f3dd")}</div>
<div data-type="7" class="emojis__type" aria-label="${window.siyuan.emojis[6][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f52e")}</div>
<div data-type="8" class="emojis__type" aria-label="${window.siyuan.emojis[7][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("267e")}</div>
<div data-type="9" class="emojis__type" aria-label="${window.siyuan.emojis[8][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f6a9")}</div>
<div data-type="0" class="emojis__type" aria-label="${window.siyuan.languages.recentEmoji}">${unicode2Emoji("2b50", true)}</div>
<div data-type="1" class="emojis__type" aria-label="${window.siyuan.emojis[0][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f527", true)}</div>
<div data-type="2" class="emojis__type" aria-label="${window.siyuan.emojis[1][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f60d", true)}</div>
<div data-type="3" class="emojis__type" aria-label="${window.siyuan.emojis[2][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f433", true)}</div>
<div data-type="4" class="emojis__type" aria-label="${window.siyuan.emojis[3][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f96a", true)}</div>
<div data-type="5" class="emojis__type" aria-label="${window.siyuan.emojis[4][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f3a8", true)}</div>
<div data-type="6" class="emojis__type" aria-label="${window.siyuan.emojis[5][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f3dd", true)}</div>
<div data-type="7" class="emojis__type" aria-label="${window.siyuan.emojis[6][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f52e", true)}</div>
<div data-type="8" class="emojis__type" aria-label="${window.siyuan.emojis[7][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("267e", true)}</div>
<div data-type="9" class="emojis__type" aria-label="${window.siyuan.emojis[8][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f6a9", true)}</div>
</div>
</div>`;
lazyLoadEmoji(this.element);
lazyLoadEmoji(this.element, true);
}
const firstEmojiElement = this.element.querySelector(".emojis__item");
if (firstEmojiElement) {