/**
* @type {HTMLIFrameElement | null}
*/
let KING_iframe
function FrameBuilder(title, url, initialHeight) {
this.formId = 'custom_king_form';
this.frameMinWidth = '100%';
this.initialHeight = initialHeight;
this.defaultHeight = '';
this.src = url
var htmlCode = '';
//var newFrame = document.createElement("iframe")
//newFrame.style.minWidth = this.frameMinWidth
//newFrame.src = this.src
//newFrame.id = this.formId
//document.body.append(newFrame)
//console.log("Current Script:", document.currentScript)
document.currentScript.insertAdjacentHTML("afterend", htmlCode)
//document.write(htmlCode);
KING_iframe = document.getElementById(this.formId);
//var doc = KING_iframe.contentDocument ? KING_iframe.contentDocument : (KING_iframe.contentWindow.document || KING_iframe.document);
//doc.write(innerHTML)
}
FrameBuilder("Blabla", 'https://svform.kingtechnology.com/form/pool_mineral_rebate_promo', 1730);
//createModal('Title', 'some content for you that is semi-long and requires no reading', [{text: 'click', onclick:()=>{alert('hi')}, style:{}}])
function createModal(title, content, buttons, lock_page = false) {
let overflow = lock_page ? 'hidden' : 'auto';
let modal = document.createElement('div');
Object.assign(modal.style, {
position: 'fixed',
left: '0',
top: '0',
width: '100%',
height: '100%',
overflow,
backgroundColor: 'rgba(0, 0, 0, 0.4)',
zIndex: '1000',
display: 'block'
});
let modalDialog = document.createElement('div');
Object.assign(modalDialog.style, {
backgroundColor: '#FFFFFF',
margin: '10% auto',
borderRadius: '5px',
boxShadow: '0 5px 15px rgba(0,0,0,.5)',
maxWidth: '500px',
width: '100%'
});
let modalContent = document.createElement('div');
modalContent.style.padding = '15px';
let modalHeader = document.createElement('div');
Object.assign(modalHeader.style, {
borderBottom: '1px solid #e5e5e5',
padding: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
});
let modalTitle = document.createElement('h4');
modalTitle.innerText = title;
modalTitle.style.marginTop = '0';
modalTitle.style.marginBottom = '0';
modalHeader.appendChild(modalTitle);
if (!lock_page) {
let closeButton = document.createElement('button');
closeButton.innerText = '×';
Object.assign(closeButton.style, {
fontSize: '1.5em',
lineHeight: '1',
color: '#000',
background: 'transparent',
border: 'none',
opacity: '0.5'
});
closeButton.onclick = function () {
modal.style.display = 'none';
document.body.style.overflow = overflow;
};
modalHeader.appendChild(closeButton);
}
modalContent.appendChild(modalHeader);
let modalBody = document.createElement('div');
modalBody.innerHTML = content;
modalBody.style.padding = '15px';
modalContent.appendChild(modalBody);
let modalFooter = document.createElement('div');
modalFooter.style.padding = '15px';
modalFooter.style.textAlign = 'right';
modalFooter.style.borderTop = '1px solid #e5e5e5';
buttons.forEach(buttonDef => {
let btn = document.createElement('button');
btn.innerText = buttonDef.text;
Object.assign(btn.style, {
padding: '6px 12px',
margin: '0 5px',
backgroundColor: '#007bff',
color: 'white',
border: '1px solid #007bff',
borderRadius: '4px',
cursor: 'pointer'
});
if (buttonDef.redirect !== undefined) {
btn.onclick = () => {
location.href = buttonDef.redirect
}
}
else if (buttonDef.action === 'close') {
btn.onclick = () => {
modal.remove()
}
}
modalFooter.appendChild(btn);
});
modalContent.appendChild(modalFooter);
modalDialog.appendChild(modalContent);
modal.appendChild(modalDialog);
document.body.appendChild(modal);
document.body.style.overflow = overflow;
// Optional: Close modal when clicking outside of it
if (!lock_page) {
modal.onclick = function (event) {
if (event.target === modal) {
alert("Removing modal")
modal.style.display = 'none';
document.body.style.overflow = 'auto';
}
};
}
return modal;
}
//let KING_before = []
//let KING_after = []
function updateFrameHeight() {
var frameHeight = KING_iframe.contentDocument.body.offsetHeight
if (KING_iframe.height != frameHeight) {
KING_iframe.height = frameHeight;
}
//setTimeout(updateFrameHeight, 100);
}
let lastHeight = 0;
window.addEventListener("DOMContentLoaded", function () {
//KING_iframe = document.getElementById("custom_king_form")
//setTimeout(updateFrameHeight, 500)
//console.log("got iframe:", KING_iframe)
//uncomment the following line to enable sending data to the form
iframe_window = KING_iframe.contentWindow
//Calculate heights
//let before = true
//for(let section of document.getElementsByTagName('section')){
// if(section.querySelector('#custom_king_form') != null){
// before = false
// continue
// }
// if(before){
// KING_before.push(section)
// }
// else{
// KING_after.push(section)
// }
//}
window.addEventListener("message", function (e) {
//TODO: verify message origin
if (e.origin !== 'https://svform.kingtechnology.com') {
return;
}
//console.log(e)
if (e.data == 'recaptcha-setup') {
return
}
if ("connect" in e.data) {
iframe_window.postMessage({ "connect": e.data.connect }, KING_iframe.src)
}
if ("myHeight" in e.data) {
if (e.data.myHeight != lastHeight) {
console.log("Height changed, new height:", e.data.myHeight)
lastHeight = e.data.myHeight
KING_iframe.height = e.data.myHeight;
}
}
if ("showModal" in e.data) {
console.log("Showing modal", e.data.showModal)
let modalEl = createModal(e.data.showModal.title, e.data.showModal.content, e.data.showModal.buttons, e.data.showModal.lock_page)
}
if ("getScroll" in e.data) {
let formTop = -KING_iframe.getBoundingClientRect().y
let header = document.getElementById('header').offsetHeight
let top = formTop + header;
if (top < 0) {
top = 0;
}
iframe_window.postMessage({ "scroll": top, "data": e.data.getScroll }, KING_iframe.src)
}
if ("newTab" in e.data) {
window.open(e.data.newTab, '_blank')
}
if ("redirect" in e.data) {
location.href = e.data.redirect
}
if ("replace" in e.data) {
location.replace(e.data.replace)
}
if ("getParams" in e.data) {
const url = new URL(window.location.toLocaleString());
let params = {}
for (let [k, v] of url.searchParams.entries()) { params[k] = v }
iframe_window.postMessage({ "params": params }, KING_iframe.src)
}
//Uncomment next line for debugging
//console.log("Outside", e.data)
//To send a message to the form:
//iframe_window.postMessage("Test", iframe.src)
})
}, false)