const libraries = {
swiperScript:
"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js",
swiperStyle:
"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css",
holyStarsScript:
"https://unpkg.com/holy-stars@1.2.1/dist/holy-stars.js",
holyStarsStyle:
"https://unpkg.com/holy-stars@1.2.1/dist/holy-stars.css",
customSelectScript:
"https://cdn.jsdelivr.net/npm/custom-select@1.1.15/build/custom-select.min.js",
customSelectStyle:
"https://cdn.jsdelivr.net/npm/custom-select@1.1.15/build/custom-select.min.css",
imaskScript:
"https://cdnjs.cloudflare.com/ajax/libs/imask/7.6.1/imask.min.js"
};
class ImportObserver extends IntersectionObserver {
constructor(callback, element, options) {
super((entries) => {
if (entries[0].isIntersecting) {
callback(entries);
this.disconnect();
}
}, options);
this.observe(element);
}
}
class ScriptImportObserver extends ImportObserver {
constructor({ callback, element, script, link, options }) {
super(
(entries) => {
const scriptElement = document.createElement("script");
const linkElement = document.createElement("link");
const check = (attr, url) =>
!!document.querySelector(`[${attr}='${url}']`);
if (script) {
scriptElement.src = script;
if (check("src", script)) {
callback(entries);
} else {
scriptElement.addEventListener("load", () => callback(entries));
document.body.prepend(scriptElement);
}
}
if (link) {
linkElement.href = link;
linkElement.rel = "stylesheet";
if (!check("href", link)) {
document.head.append(linkElement);
}
}
},
element,
options
);
}
}
class FormInputsFilling {
constructor(elements, classes) {
this.elements = {
input: elements.input,
label: elements.label
}
this.classes = {
filled: classes.filled
}
this.value = null
this.init()
}
focusEvent(event) {
this.value = event.currentTarget.value
if (!this.value) {
this.elements.label.classList.add(this.classes.filled)
}
}
focusCheck() {
if (this.elements.input) {
if (this.elements.input.value) {
this.elements.label.classList.add(this.classes.filled)
}
}
}
blurEvent(event) {
this.value = event.currentTarget.value
if (!this.value) {
this.elements.label.classList.remove(this.classes.filled)
}
}
defineEvents() {
if (this.elements.input) {
this.elements.input.addEventListener('focus', this.focusEvent.bind(this))
this.elements.input.addEventListener('blur', this.blurEvent.bind(this))
}
}
init() {
this.focusCheck()
this.defineEvents()
}
}
const contactSelectObserver = new ScriptImportObserver({
callback(entries) {
const contactSectionEl = document.querySelector('.hbspt-form')
const selectElements = contactSectionEl.querySelectorAll('select')
selectElements.forEach(select => {
customSelect(select);
let elemTexts = Array.from(select.querySelectorAll('option')).map(item => item.textContent)
select.addEventListener('change', (e) => {
if(e?.detail?.name === "changeSelectEvent") {
return;
}
const selected = document.querySelector('.is-selected').textContent;
select.selectedIndex = elemTexts.indexOf(selected);
select.dispatchEvent(new CustomEvent('change', {bubbles: true, detail: { name: "changeSelectEvent"}}))
})
})
const labelNodeList = contactSectionEl.querySelectorAll('label')
labelNodeList.forEach(label => {
const wrap = label.closest('div')
const input = wrap.querySelector('input, textarea');
const otherInput = wrap.querySelector('select');
if (input) {
new FormInputsFilling({
input: input,
label: label
},
{
filled: 'filled'
})
} else if (otherInput) {
label.classList.add('passive')
}
})
},
element: document.querySelector('.hbspt-form'),
script: libraries.customSelectScript,
link: libraries.customSelectStyle
})
const contactMaskObserver = new ScriptImportObserver({
callback(entries) {
let options = {
mask: '00000-0000'
}
setTimeout(() => {
IMask(document.querySelector('.hs_zip input'), options);
}, 500)
},
element: document.querySelector('.hbspt-form'),
script: libraries.imaskScript,
})