I write commentary for my own purpose(s).
C’est La Vie.
笑談謦欬生風雷
FYI, Capripopcorn means Capricious Popcorn and Popular Capricorn Saint “El Cid
エルシド.”
document.addEventListener(‘DOMContentLoaded’, function () {
(function () {
let iframeState = “off”;
const handleiFrameMessage = (event) => {
console.log(‘Received message from iframe:’, event.data);
iframeState = event.data;
updateChatWidgetClass();
};
const updateChatWidgetClass = () => {
const chatWidget = document.querySelector(‘.chat-widget’);
if (chatWidget) {
chatWidget.classList.toggle(‘chat-widget-mask’, iframeState === ‘on’);
}
const chatIframe = document.querySelector(‘.chat-iframe’);
if (chatIframe) {
chatIframe.classList.toggle(‘chat-iframe-size-full’, iframeState === ‘on’);
chatIframe.classList.toggle(‘chat-iframe-size-mini’, iframeState !== ‘on’);
}
};
window.addEventListener(‘message’, handleiFrameMessage);
window.addEventListener(‘beforeunload’, () => {
window.removeEventListener(‘message’, handleiFrameMessage);
});
// Create and append the chat widget elements
const chatWidget = document.createElement(‘div’);
chatWidget.classList.add(‘chat-widget’);
const chatIframe = document.createElement(‘iframe’);
chatIframe.src = ‘
https://fatcaptain.aivino.ai/widget/6b7e9977-0ab5-4079-9ad0-a62665cef7ce’;
chatIframe.classList.add(‘chat-iframe’);
chatWidget.appendChild(chatIframe);
document.body.appendChild(chatWidget);
})();
})
.chat-widget {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
pointer-events: none;
}
.chat-widget-mask {
background-color: rgba(65, 65, 65, 0.2);
}
.chat-iframe {
position: absolute;
width: 50px;
height: 50px;
right: 1.5rem;
bottom: 10rem;
pointer-events: auto;
}
.chat-iframe-size-full {
width: 600px;
height: 88vh;
max-height: 688px;
bottom: 3.5rem;
}
.chat-iframe-size-mini {
width: 50px;
height: 50px;
bottom: 10rem;
}
/* Media query for 2xl screens and above */
@media (min-width: 1536px) {
.chat-iframe-size-full {
max-height: 888px;
}
}
/* Media query for mobile screens */
@media (max-width: 640px) {
.chat-iframe-size-full {
width: 100vw;
height: 100vh;
inset: 0;
}
}
capripopcorn.com 