Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

emoji picker

main
alexanderroese 2024-07-16 20:58:47 +02:00
parent dd4cf83b5d
commit 1b24096693
1 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
snippets/shx-3d-render-input.liquid
View File

@ -19,7 +19,6 @@
{% elsif content_type == 'init' %}
{% liquid
capture shx_get_environment
render "shx-get-environment"
@ -155,6 +154,9 @@
opacity: 0;
}
.shx-emoji-picker-popup:not(.shown) {
display: none;
}
</style>
<script type="text/javascript">
@ -427,7 +429,12 @@
<label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
<div class="field custom ">
<input class="field__input" form="product-form-${section_id}" type="text" id="${inputID}" name="properties[${inputName}]" value="${(inputVal.length > maxLength ? inputVal.substring(0, maxLength) : inputVal)}" oninput="document.querySelector('shx-input-forms').renderView()" required maxlength="${maxLength}" normalMaxLength="${maxLength}">
<svg style="position: absolute; top: 12px; right: 12px" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#121212BF"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400h-66q-22 37-58.5 58.5T480-320q-43 0-79.5-21.5T342-400h-66q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>
<svg id="shx-emoji-picker-button" style="position: absolute; top: 12px; right: 12px; cursor: pointer" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#121212BF"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400h-66q-22 37-58.5 58.5T480-320q-43 0-79.5-21.5T342-400h-66q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>
</div>
<div class="shx-emoji-picker-popup">
<emoji-picker class="light"></emoji-picker>
</div>
`;
}
@ -561,8 +568,6 @@
return html;
}
const defaultStyle = `<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top: 0.6rem}.custom .field__input{padding-top:0.8rem}</style>`;
let globalInputFormsObj = {
@ -1043,5 +1048,20 @@
</script>
<script type="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'
document
.querySelector(".shx-emoji-picker-popup")
.addEventListener("emoji-click", (e) => {
insertText(document.querySelector("#shx-text1"), e.detail.unicode);
});
document.getElementById("shx-emoji-picker-button").onclick = () => {
document.querySelector(".shx-emoji-picker-popup").classList.toggle("shown");
};
</script>
{% endif %}