40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
const container = () => document.getElementById('modal-container');
|
||
|
||
export function showModal(html) {
|
||
container().innerHTML = `<div class="modal-overlay" onclick="ModalBase.closeOnBg(event)">${html}</div>`;
|
||
}
|
||
|
||
export function closeModal() {
|
||
container().innerHTML = '';
|
||
}
|
||
|
||
export function closeOnBg(e) {
|
||
if (e.target.classList.contains('modal-overlay')) closeModal();
|
||
}
|
||
|
||
export function stepperHtml(id, value, step, placeholder, inputmode = 'decimal') {
|
||
const v = value !== '' && value != null ? value : '';
|
||
return `<div class="stepper-field">
|
||
<button type="button" class="stepper-btn" onclick="ModalBase.stepValue('${id}', -${step})">−</button>
|
||
<input type="number" id="${id}" step="${step}" value="${v}" placeholder="${placeholder}" inputmode="${inputmode}">
|
||
<button type="button" class="stepper-btn" onclick="ModalBase.stepValue('${id}', ${step})">+</button>
|
||
</div>`;
|
||
}
|
||
|
||
export function stepValue(id, delta) {
|
||
const input = document.getElementById(id);
|
||
if (!input) return;
|
||
const current = parseFloat(input.value) || 0;
|
||
const step = parseFloat(input.step) || 1;
|
||
const newVal = Math.max(0, current + delta);
|
||
input.value = parseFloat((Math.round(newVal / step) * step).toFixed(4));
|
||
}
|
||
|
||
window.ModalBase = {
|
||
showModal,
|
||
closeModal,
|
||
close: closeModal,
|
||
closeOnBg,
|
||
stepValue
|
||
};
|