static/drag-resize.js

document.addEventListener('DOMContentLoaded', () => {
    const chatBotContainer = document.getElementById('chat-bot-container');
    let isDragging = false;
    let offsetX, offsetY;
    let saveTimeout;

    // Загрузка позиции и размера из localStorage
    const savedPosition = localStorage.getItem('chatBotPosition');
    const savedSize = localStorage.getItem('chatBotSize');

    if (savedPosition) {
        const { left, top } = JSON.parse(savedPosition);
        chatBotContainer.style.left = `${left}px`;
        chatBotContainer.style.top = `${top}px`;
    }

    if (savedSize) {
        const { width, height } = JSON.parse(savedSize);
        chatBotContainer.style.width = `${width}px`;
        chatBotContainer.style.height = `${height}px`;
    }

    // Добавляем обработчики для перетаскивания
    chatBotContainer.querySelector('.chat-header').addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - chatBotContainer.offsetLeft;
        offsetY = e.clientY - chatBotContainer.offsetTop;
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            chatBotContainer.style.left = `${e.clientX - offsetX}px`;
            chatBotContainer.style.top = `${e.clientY - offsetY}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        scheduleSave();
    });

    // // Добавляем обработчики для изменения размера
    // chatBotContainer.addEventListener('mousedown', (e) => {
    //     if (e.target.classList.contains('resizable')) {
    //         isDragging = true;
    //         offsetX = e.clientX - chatBotContainer.offsetWidth;
    //         offsetY = e.clientY - chatBotContainer.offsetHeight;
    //     }
    // });

    document.addEventListener('mousemove', (e) => {
        if (isDragging && e.target.classList.contains('resizable')) {
            chatBotContainer.style.width = `${e.clientX - offsetX}px`;
            chatBotContainer.style.height = `${e.clientY - offsetY}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        scheduleSave();
    });

    function scheduleSave() {
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(savePositionAndSize, 200); // Задержка в 200 миллисекунд
    }

    function savePositionAndSize() {
        const position = {
            left: chatBotContainer.offsetLeft,
            top: chatBotContainer.offsetTop
        };
        const size = {
            width: chatBotContainer.offsetWidth,
            height: chatBotContainer.offsetHeight
        };

        localStorage.setItem('chatBotPosition', JSON.stringify(position));
        localStorage.setItem('chatBotSize', JSON.stringify(size));
    }
});