fix price format file not loading
This commit is contained in:
@@ -1,67 +0,0 @@
|
|||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
// Format all existing inputs
|
|
||||||
formatAllPriceInputs();
|
|
||||||
|
|
||||||
// Use event delegation for input events on price-input fields
|
|
||||||
document.addEventListener("input", (event) => {
|
|
||||||
if (event.target.classList.contains("price-input")) {
|
|
||||||
const input = event.target;
|
|
||||||
const cursor = input.selectionStart;
|
|
||||||
const raw = input.value.replace(/,/g, "");
|
|
||||||
const formatted = format(raw);
|
|
||||||
|
|
||||||
if (input.value !== formatted) {
|
|
||||||
input.value = formatted;
|
|
||||||
input.setSelectionRange(cursor, cursor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Use event delegation for focus events to format on focus
|
|
||||||
document.addEventListener("focus", (event) => {
|
|
||||||
if (event.target.classList.contains("price-input")) {
|
|
||||||
event.target.value = format(event.target.value);
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
|
|
||||||
// Use event delegation for form submit
|
|
||||||
document.addEventListener("submit", (event) => {
|
|
||||||
event.target.querySelectorAll(".price-input").forEach((input) => {
|
|
||||||
input.value = input.value.replace(/,/g, "");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Use MutationObserver to format newly added inputs
|
|
||||||
const observer = new MutationObserver((mutations) => {
|
|
||||||
let hasNewInputs = false;
|
|
||||||
mutations.forEach((mutation) => {
|
|
||||||
mutation.addedNodes.forEach((node) => {
|
|
||||||
if (node.nodeType === 1) {
|
|
||||||
if (node.classList?.contains("price-input") ||
|
|
||||||
node.querySelectorAll?.(".price-input").length > 0) {
|
|
||||||
hasNewInputs = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
if (hasNewInputs) {
|
|
||||||
formatAllPriceInputs();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(document.body, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function formatAllPriceInputs() {
|
|
||||||
document.querySelectorAll(".price-input").forEach((input) => {
|
|
||||||
input.value = format(input.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function format(value) {
|
|
||||||
if (!value) return "";
|
|
||||||
return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
||||||
}
|
|
||||||
@@ -19,4 +19,73 @@
|
|||||||
{% if plausible_domain %}
|
{% if plausible_domain %}
|
||||||
<script defer data-domain="{{ plausible_domain }}" src="https://plausible.io/js/script.js"></script>
|
<script defer data-domain="{{ plausible_domain }}" src="https://plausible.io/js/script.js"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
// Format all existing inputs
|
||||||
|
formatAllPriceInputs();
|
||||||
|
|
||||||
|
// Use event delegation for input events on price-input fields
|
||||||
|
document.addEventListener("input", (event) => {
|
||||||
|
if (event.target.classList.contains("price-input")) {
|
||||||
|
const input = event.target;
|
||||||
|
const cursor = input.selectionStart;
|
||||||
|
const raw = input.value.replace(/,/g, "");
|
||||||
|
const formatted = format(raw);
|
||||||
|
|
||||||
|
if (input.value !== formatted) {
|
||||||
|
input.value = formatted;
|
||||||
|
input.setSelectionRange(cursor, cursor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use event delegation for focus events to format on focus
|
||||||
|
document.addEventListener("focus", (event) => {
|
||||||
|
if (event.target.classList.contains("price-input")) {
|
||||||
|
event.target.value = format(event.target.value);
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
// Use event delegation for form submit
|
||||||
|
document.addEventListener("submit", (event) => {
|
||||||
|
event.target.querySelectorAll(".price-input").forEach((input) => {
|
||||||
|
input.value = input.value.replace(/,/g, "");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use MutationObserver to format newly added inputs
|
||||||
|
const observer = new MutationObserver((mutations) => {
|
||||||
|
let hasNewInputs = false;
|
||||||
|
mutations.forEach((mutation) => {
|
||||||
|
mutation.addedNodes.forEach((node) => {
|
||||||
|
if (node.nodeType === 1) {
|
||||||
|
if (node.classList?.contains("price-input") ||
|
||||||
|
node.querySelectorAll?.(".price-input").length > 0) {
|
||||||
|
hasNewInputs = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (hasNewInputs) {
|
||||||
|
formatAllPriceInputs();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function formatAllPriceInputs() {
|
||||||
|
document.querySelectorAll(".price-input").forEach((input) => {
|
||||||
|
input.value = format(input.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function format(value) {
|
||||||
|
if (!value) return "";
|
||||||
|
return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user