We have access to over 100,000 Home Improvement & Hardware items.
Just let us know what you need and we'll send you a link to purchase.
`,
);
const modal = document.getElementById(MODAL_ID);
/* ---------- 4. Move the EvoX contact form into the modal ---------- */
modal.querySelector(".modal-body").append(form);
form.classList.remove("hide");
// Pair short single-input fields two per row (skipped if the form already uses a Bootstrap grid)
const groups = form.querySelectorAll(".form-group");
const usesBootstrapGrid = form.querySelector(".row, [class*='col-']") !== null;
if (groups.length && !usesBootstrapGrid) {
const container = groups[0].parentElement;
container.classList.add("cf-fields");
const shortInput = "input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input:not([type])";
groups.forEach((group) => {
if (group.parentElement !== container) return;
const fields = group.querySelectorAll(
"input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']), select, textarea",
);
if (fields.length === 1 && fields[0].matches(shortInput)) {
group.classList.add("cf-half");
}
});
// Odd one out in a run of half-width fields goes full width
let run = [];
const flushRun = () => {
if (run.length % 2) run[run.length - 1].classList.remove("cf-half");
run = [];
};
Array.from(container.children).forEach((child) => {
if (child.matches("input[type='hidden'], script, .hide, [hidden]")) return;
if (child.classList.contains("cf-half")) {
run.push(child);
} else {
flushRun();
}
});
flushRun();
}
/* ---------- 5. Tab ---------- */
// Remove any old static tab left in the page so there's only one
document.querySelectorAll(".cant-find-wrapper").forEach((el) => el.remove());
document.body.insertAdjacentHTML(
"beforeend",
`
`,
);
const wrapper = document.querySelector(".cant-find-wrapper");
setTimeout(() => wrapper.classList.remove("is-intro"), 800);
/* ---------- 6. Focus first field on open (Bootstrap 3 fires this via jQuery) ---------- */
if (window.jQuery) {
window.jQuery(modal).on("shown.bs.modal", () => {
const firstField = form.querySelector("textarea, input:not([type='hidden']):not([type='checkbox']):not([type='radio']), select");
if (firstField) firstField.focus();
});
// Bootstrap returns focus to the tab on close, which kept it slid out.
// For mouse/touch users drop that focus; keyboard users keep it.
const tab = wrapper.querySelector(".cant-find-tab");
let openedWithPointer = false;
tab.addEventListener("pointerdown", () => {
openedWithPointer = true;
});
tab.addEventListener("keydown", () => {
openedWithPointer = false;
});
window.jQuery(modal).on("hidden.bs.modal", () => {
if (!openedWithPointer) return;
// Bootstrap focuses the trigger after this handler runs, so wait a tick
setTimeout(() => tab.blur(), 0);
});
}
});
/* ===== End ===== */