86 lines
2.7 KiB
JavaScript
86 lines
2.7 KiB
JavaScript
let KKInnovation = {
|
|
openPopup: async function ({ url }) {
|
|
if (this.isPopupOpen) return;
|
|
|
|
this.isPopupOpen = true;
|
|
|
|
try {
|
|
await this.loadStyles('%PUBLIC_URL%/embedPopup/style.css');
|
|
|
|
let popup = document.createElement('div');
|
|
popup.id = 'KKInnovation-embed-popup';
|
|
|
|
popup.innerHTML = `
|
|
<div id="KKInnovation-embed-popup-content">
|
|
<div id="KKInnovation-embed-popup-loading"></div>
|
|
<iframe src="${url}" frameborder="0"></iframe>
|
|
</div>
|
|
<div id="KKInnovation-embed-popup-close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M12 10.586l-3.293-3.293-1.414 1.414 3.293 3.293-3.293 3.293 1.414 1.414 3.293-3.293 3.293 3.293 1.414-1.414-3.293-3.293 3.293-3.293-1.414-1.414z"/>
|
|
</svg>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(popup);
|
|
setTimeout(() => {
|
|
popup.classList.add('KKInnovation-embed-popup-open');
|
|
|
|
// disable scrolling
|
|
document.body.style.overflow = 'hidden';
|
|
}, 0);
|
|
|
|
// Add click event listener to the background div
|
|
document.getElementById('KKInnovation-embed-popup').addEventListener('click', (event) => {
|
|
// Check if the clicked element is the background div
|
|
if (event.target.id === 'KKInnovation-embed-popup') {
|
|
|
|
// enable scrolling
|
|
document.body.style.overflow = 'auto';
|
|
|
|
popup.classList.remove('KKInnovation-embed-popup-open');
|
|
|
|
setTimeout(() => {
|
|
this.isPopupOpen = false;
|
|
popup.remove();
|
|
|
|
|
|
}, 400);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
this.isPopupOpen = false;
|
|
return;
|
|
}
|
|
},
|
|
loadStyles: async function (url) {
|
|
return new Promise((resolve, reject) => {
|
|
if (this.stylesLoaded) {
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
// load stylesheet
|
|
let link = document.createElement('link');
|
|
link.type = 'text/css';
|
|
|
|
link.rel = 'stylesheet';
|
|
link.href = url;
|
|
|
|
document.getElementsByTagName('head')[0].appendChild(link);
|
|
|
|
// wait for stylesheet to load
|
|
link.onload = function () {
|
|
stylesLoaded = true;
|
|
resolve();
|
|
};
|
|
|
|
link.onerror = function () {
|
|
reject();
|
|
};
|
|
})
|
|
},
|
|
|
|
|
|
isPopupOpen: false,
|
|
stylesLoaded: false,
|
|
} |