#float-icon {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background-image: url('https://agent.pingshan-tech.com/images/amoy-candy3.jpg');
background-size: cover;
background-position: center;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
z-index: 999;
user-select: none;
touch-action: none;
transition: box-shadow 0.3s ease;
}
#floating-iframe {
position: fixed;
top: 3vh;
right: 2vw;
width: 95vw;
height: 90vh;
max-width: 500px;
border: none;
border-radius: 8px;
box-shadow: 0 0px 16px rgba(0, 0, 0, 0.5);
display: none;
z-index: 999;
background: #fff;
opacity: 0;
transition: opacity 0.3s ease;
}
#floating-iframe.active {
display: block;
opacity: 1;
}
#float-icon.dragging {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
(function() {
const floatIcon = document.getElementById('float-icon');
const floatingIframe = document.getElementById('floating-iframe');
let isDragging = false;
let dragStartX = 0;
let dragStartY = 0;
let iconStartX = 0;
let iconStartY = 0;
let iframeLoaded = false; // Add this flag to track if iframe has been loaded
// Helper function to set the position of the icon
const setIconPosition = (left, top) => {
floatIcon.style.left = left + 'px';
floatIcon.style.top = top + 'px';
floatIcon.style.right = 'auto';
floatIcon.style.bottom = 'auto';
};
// Toggle iframe visibility
const toggleIframe = () => {
// Load iframe content only on first opening
if (!iframeLoaded) {
floatingIframe.src = 'https://agent.pingshan-tech.com/crm/yatsoon';
iframeLoaded = true;
}
floatingIframe.classList.toggle('active');
};
// Mouse Events
floatIcon.addEventListener('mousedown', (e) => {
isDragging = false;
floatIcon.classList.add('dragging');
dragStartX = e.clientX;
dragStartY = e.clientY;
const rect = floatIcon.getBoundingClientRect();
iconStartX = rect.left;
iconStartY = rect.top;
const onMouseMove = (e) => {
const dx = e.clientX - dragStartX;
const dy = e.clientY - dragStartY;
if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
isDragging = true;
}
if (isDragging) {
let newLeft = iconStartX + dx;
let newTop = iconStartY + dy;
// Constrain within the viewport
const iconWidth = floatIcon.offsetWidth;
const iconHeight = floatIcon.offsetHeight;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
newLeft = Math.max(0, Math.min(newLeft, windowWidth - iconWidth));
newTop = Math.max(0, Math.min(newTop, windowHeight - iconHeight));
setIconPosition(newLeft, newTop);
}
};
const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
floatIcon.classList.remove('dragging');
if (!isDragging) {
toggleIframe();
}
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
// Touch Events
floatIcon.addEventListener('touchstart', (e) => {
if (e.touches.length !== 1) return; // Only handle single touch
e.preventDefault(); // Prevent default touch behavior
isDragging = false;
floatIcon.classList.add('dragging');
const touch = e.touches[0];
dragStartX = touch.clientX;
dragStartY = touch.clientY;
const rect = floatIcon.getBoundingClientRect();
iconStartX = rect.left;
iconStartY = rect.top;
// Define startTime here
const startTime = Date.now();
const onTouchMove = (e) => {
e.preventDefault(); // Prevent scrolling
const touch = e.touches[0];
const dx = touch.clientX - dragStartX;
const dy = touch.clientY - dragStartY;
if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
isDragging = true;
}
if (isDragging) {
let newLeft = iconStartX + dx;
let newTop = iconStartY + dy;
const iconWidth = floatIcon.offsetWidth;
const iconHeight = floatIcon.offsetHeight;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
newLeft = Math.max(0, Math.min(newLeft, windowWidth - iconWidth));
newTop = Math.max(0, Math.min(newTop, windowHeight - iconHeight));
setIconPosition(newLeft, newTop);
}
};
const onTouchEnd = (e) => {
const endTime = Date.now();
const touchDuration = endTime - startTime;
// Remove the event listeners from the float icon, not document
floatIcon.removeEventListener('touchmove', onTouchMove, { passive: false });
floatIcon.removeEventListener('touchend', onTouchEnd);
floatIcon.classList.remove('dragging');
// If touch duration is less than 200ms and no dragging occurred, treat as a tap
if (touchDuration < 200 && !isDragging) {
toggleIframe();
}
};
// Add event listeners to the float icon, not document
floatIcon.addEventListener('touchmove', onTouchMove, { passive: false });
floatIcon.addEventListener('touchend', onTouchEnd);
}, { passive: false });
window.addEventListener('message', function(event) {
if (event.data === 'closeIframe') {
document.getElementById('floating-iframe').classList.remove('active');
}
});
})();
