emoji picker

main
alexanderroese 2024-07-16 22:14:50 +02:00
parent 0f75f84a89
commit 0c76342efb
1 changed files with 40 additions and 25 deletions

View File

@ -159,14 +159,6 @@
}
</style>
<script type="module">
console.log("loading module")
import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'
import insertText from 'https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js'
</script>
<script type="text/javascript">
const FilamentList = {
@ -413,23 +405,6 @@
}
globalInputFormsObjValues[id][key] = value;
console.log("SHX_IFC_setCurrentValue", id, key, value)
// add the <emoji-picker></emoji-picker> element after the text input is rendered
if (key === "text1") {
const emojiPicker = document.createElement("emoji-picker")
emojiPicker.classList = "light"
emojiPicker.style.width = "100%"
emojiPicker.addEventListener("emoji-click", (e) => {
insertText(document.querySelector("#shx-text1"), e.detail.unicode);
});
console.log("add picker here")
document.getElementsByClassName("shx-emoji-picker-popup")[0].appendChild(emojiPicker)
}
}
function SHX_IFC_genTextInput(inputID, labelText, inputName, inputVal, section_id, maxLength = 24) {
@ -1073,5 +1048,45 @@
</script>
<script type="module">
console.log("loading module");
import "https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js";
import insertText from "https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js";
window.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
console.log("timeout")
const emojiPicker = document.createElement("emoji-picker")
emojiPicker.classList = "light"
emojiPicker.style.width = "100%"
emojiPicker.addEventListener("emoji-click", (e) => {
insertText(document.querySelector("#shx-text1"), e.detail.unicode);
});
console.log("add picker")
document.getElementsByClassName("shx-emoji-picker-popup")[0].appendChild(emojiPicker)
/*
document.querySelector(".shx-emoji-picker-popup").addEventListener("emoji-click", (e) => {
console.log("emoji click")
// insertText(document.querySelector("#shx-text1"), e.detail.unicode);
});
console.log("reg", document.getElementsByClassName("shx-emoji-picker-button"))
document.getElementsByClassName("shx-emoji-picker-button")[0].onclick = () => {
console.log("toggle popup")
document.querySelector(".shx-emoji-picker-popup").classList.toggle("shown");
}; */
}, 2000);
});
</script>
{% endif %}