jorts/static/spa.js

var pckry;
document.addEventListener('DOMContentLoaded', (event) => {
    // 初始化函數
    restoreState();
    init();
});

function init() {

    // 綁定事件
    document.querySelector('.buttonAddImage').addEventListener('click', showAddImageForm);
    document.querySelector('.buttonCancelAdd').addEventListener('click', hideAddImageForm);
    document.querySelector('.buttonApproveAdd').addEventListener('click', addImage);
    document.querySelector('.buttonApproveAddMore').addEventListener('click', addMoreImage);

    document.querySelector('.buttonClearCards').addEventListener('click', clearAllCards);
    document.querySelector('.buttonAddMeme').addEventListener('click', addMeme);
    document.querySelector('.buttonSeedCards').addEventListener('click', seedCards);


    var cardholder = document.querySelector('.cardholder');
    pckry = new Packery(cardholder, {
        // Packery 的選項
        itemSelector: '.card',
        //   percentPosition: true, // 如果你想要使用百分比定位
        gutter: 1
    });
    // makeAllCardsDraggable();

    // 綁定卡片點擊事件
    cardholder.addEventListener('click', function (event) {
        const card = event.target.closest('.card');
        if (!card) return; // 如果點擊的不是卡片或卡片內的元素，則不進行任何操作

        // 如果點擊的是圖片或圖片的父元素（可能包括一些包裝圖片的容器）
        if (event.target === card.querySelector('.mood-image') || event.target.parentNode === card.querySelector('.mood-image')) {
            // 如果已經有選中的卡片，則取消選中
            const selectedCard = document.querySelector('.card-selected');
            if (selectedCard && selectedCard !== card) {
                selectedCard.classList.remove('card-selected');
                const buttons = selectedCard.querySelector('.card-buttons');
                if (buttons) {
                    buttons.style.display = 'none'; // 隱藏按鈕
                }
            }
            // 切換當前卡片的選中狀態
            card.classList.toggle('card-selected');
            const currentButtons = card.querySelector('.card-buttons');
            if (currentButtons) {
                currentButtons.style.display = card.classList.contains('card-selected') ? 'flex' : 'none'; // 顯示或隱藏按鈕
            }
        }

        // 檢查是否點擊了彈出按鈕
        if (event.target.closest('.pop-out, .pop-out *')) {
            const card = event.target.closest('.card');
            card.classList.toggle('popped-out');

            if (card.classList.contains('popped-out')) {
                // 設置彈出狀態的樣式
                card.style.position = 'absolute';
                card.style.zIndex = '3'; // 確保彈出卡片在其他卡片上方，但在添加圖片模態窗口下方
                card.style.left = '50%'; // 可以調整位置以適應需求
                card.style.top = '50%';
                card.style.transform = 'translate(-50%, -50%)'; // 居中
            } else {
                // 復原到正常狀態的樣式
                card.style.position = '';
                card.style.zIndex = '';
                card.style.left = '';
                card.style.top = '';
                card.style.transform = '';
                card.classList.remove('popped-out');
                const cardholder = document.querySelector('.cardholder');
                cardholder.appendChild(card); // 將卡片移動到容器的最後
                pckry.appended(card); // 通知 Packery 新增了卡片並重新佈局
                pckry.layout();
            }
        }

        // 根據點擊的是哪個按鈕，執行相應的操作
        if (event.target.matches('.delete, .delete *')) { // 匹配刪除按鈕或其內部的元素
            pckry.remove(card);
            card.remove();
            pckry.layout();
        } else if (event.target.matches('.zoom-out, .zoom-out *')) { // 匹配縮小按鈕或其內部的元素
            // ...縮小操作...
            const currentSize = parseInt(card.classList[1].split('-')[2]);
            const newSize = Math.max(currentSize - 1, 1); // 確保尺寸不會小於 1
            // 更新卡片的尺寸類別
            card.className = card.className.replace(`card-size-${currentSize}`, `card-size-${newSize}`);
            pckry.layout(); // 通知 Packery 重新佈局
        } else if (event.target.matches('.zoom-in, .zoom-in *')) { // 匹配放大按鈕或其內部的元素
            // ...放大操作...
            const currentSize = parseInt(card.classList[1].split('-')[2]);
            const newSize = Math.min(currentSize + 1, 4); // 確保尺寸不會大於 4
            // 更新卡片的尺寸類別
            card.className = card.className.replace(`card-size-${currentSize}`, `card-size-${newSize}`);
            pckry.layout(); // 通知 Packery 重新佈局
        } else if (event.target.matches('.move-left, .move-left *')) { // 匹配向左移動按鈕或其內部的元素
            // ...向左移動操作...
            const previousCard = card.previousElementSibling;
            if (previousCard) {
                // 將卡片移動到前一個卡片之前
                cardholder.insertBefore(card, previousCard);
                pckry.reloadItems(); // 重新加載 Packery 的項目
                pckry.layout(); // 重新佈局
            }
        } else if (event.target.matches('.move-right, .move-right *')) { // 匹配向右移動按鈕或其內部的元素
            // ...向右移動操作...
            const nextCard = card.nextElementSibling;
            if (nextCard) {
                // 將卡片移動到下一個卡片之後
                cardholder.insertBefore(nextCard, card);
                pckry.reloadItems(); // 重新加載 Packery 的項目
                pckry.layout(); // 重新佈局
            }
        }

    });
}

function showAddImageForm() {
    var modal = document.getElementById('addImageModal');
    modal.style.display = "block";

    var closeButton = document.querySelector('.close');
    closeButton.onclick = function () {
        modal.style.display = "none";
    }

    // 當用戶點擊模態視窗以外的地方，關閉它
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
}

function makeAllCardsDraggable() {
    // 對現有的每個卡片使用 Draggabilly
    var draggableElems = pckry.getItemElements();
    for (var i = 0, len = draggableElems.length; i < len; i++) {
        var draggableElem = draggableElems[i];
        var draggie = new Draggabilly(draggableElem);
        pckry.bindDraggabillyEvents(draggie);
    }
}

function hideAddImageForm() {
    var modal = document.getElementById('addImageModal');
    modal.style.display = "none";
}

function addImage(event) {
    handleAddImage(event, true);
}

function addMoreImage(event) {
    handleAddImage(event, false);
}

function handleAddImage(event, closeModal) {
    event.preventDefault();
    let imageUrl = document.getElementById('newPicUrl').value.trim();
    if (!imageUrl) {
        console.log('URL is empty. No action taken.');
        return;
    }
    if (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {
        imageUrl = 'https://' + imageUrl;
        console.log('URL corrected to: ', imageUrl);
    }
    addImageWithUrl(imageUrl);
    document.getElementById('newPicUrl').value = '';
    if (closeModal) {
        hideAddImageForm()
    }
}




function clearAllCards() {
    // 移除所有 .card 元素
    var cards = document.querySelectorAll('.card');
    cards.forEach(function (card) {
        pckry.remove(card); // 通知 Packery 移除元素
        card.remove(); // 從 DOM 中移除元素
    });
    // 通知 Packery 重新佈局剩下的元素
    pckry.layout();
}

function addMeme() {
    getRandomMemeGif(function (gifUrl) {
        // 這裡我們直接調用 addImage 函數，將 Giphy 圖片 URL 作為參數
        addImageWithUrl(gifUrl);
    });
}

function seedCards() {
    imageSeeds.forEach(seed => {
        addImageWithUrl(seed.url);
    });
}

// 撤銷/重做功能的實現可以根據你的需求設計

// 將 YOUR_API_KEY 替換成你的 Giphy API 密鑰


function getRandomMemeGif(callback) {
    const apiKey = 'SHyO3XJY0R71LuTQlx2SlsRuvTrKBjxD';
    const apiUrl = `https://api.giphy.com/v1/gifs/random?api_key=${apiKey}&tag=meme`;

    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            const gifUrl = data.data.images.original.url;
            if (callback) callback(gifUrl);
        })
        .catch(error => {
            console.error('Error fetching random meme gif:', error);
        });
}

function addImageWithUrl(imageUrl, sizeClass = null) {
    const card = document.createElement('div');
    card.className = 'card';
    if (!sizeClass) {
        sizeClass = 'card-size-' + (Math.floor(Math.random() * 4) + 1);
    }
    card.classList.add(sizeClass);
    

    // 隨機選擇一個大小


    // 創建按鈕容器
    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'card-buttons';

    // 創建按鈕組
    const buttonGroupVertical = document.createElement('div');
    buttonGroupVertical.className = 'button-group vertical';

    const buttonGroupHorizontal = document.createElement('div');
    buttonGroupHorizontal.className = 'button-group horizontal';

    // 創建刪除按鈕
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'button delete';
    deleteBtn.innerHTML = '<i class="ti ti-trash"></i>';

    // 創建放大按鈕
    const zoomInBtn = document.createElement('button');
    zoomInBtn.className = 'button zoom-in';
    zoomInBtn.innerHTML = '<i class="ti ti-arrows-maximize"></i>';

    // 創建縮小按鈕
    const zoomOutBtn = document.createElement('button');
    zoomOutBtn.className = 'button zoom-out';
    zoomOutBtn.innerHTML = '<i class="ti ti-arrows-minimize"></i>';

    // 向按鈕組中添加按鈕
    buttonGroupVertical.appendChild(deleteBtn);
    buttonGroupVertical.appendChild(zoomInBtn);
    buttonGroupVertical.appendChild(zoomOutBtn);

    // 創建向左移動按鈕
    const moveLeftBtn = document.createElement('button');
    moveLeftBtn.className = 'button move-left';
    moveLeftBtn.innerHTML = '<i class="ti ti-arrow-left"></i>';

    // 創建向右移動按鈕
    const moveRightBtn = document.createElement('button');
    moveRightBtn.className = 'button move-right';
    moveRightBtn.innerHTML = '<i class="ti ti-arrow-right"></i>';

    // 向按鈕組中添加按鈕
    buttonGroupHorizontal.appendChild(moveLeftBtn);
    buttonGroupHorizontal.appendChild(moveRightBtn);

    // 向總按鈕容器添加按鈕組
    buttonsContainer.appendChild(buttonGroupVertical);
    buttonsContainer.appendChild(buttonGroupHorizontal);

    // 設置按鈕組的位置
    buttonsContainer.style.justifyContent = 'space-between';
    buttonsContainer.style.position = 'absolute';
    buttonsContainer.style.top = '0';
    buttonsContainer.style.left = '0';
    buttonsContainer.style.zIndex = '1';

    // 創建彈出按鈕
    const popOutBtn = document.createElement('button');
    popOutBtn.className = 'button pop-out';
    popOutBtn.innerHTML = '<i class="ti ti-layers-subtract"></i>'; // 假設這是彈出圖示
    buttonGroupVertical.appendChild(popOutBtn); // 添加到垂直按鈕組



    // 創建圖片元素
    const img = document.createElement('img');
    img.src = imageUrl;
    img.alt = 'Mood Image';
    img.className = 'mood-image';
    img.style.position = 'relative';
    img.style.zIndex = '2';

    // 當圖片加載完成後，將圖片和按鈕容器添加到卡片
    img.onload = function () {
        card.appendChild(img);
        card.appendChild(buttonsContainer);
        // 將卡片添加到卡片容器中
        const cardholder = document.querySelector('.cardholder');
        cardholder.appendChild(card);

        // 通知 Packery 新增了卡片並重新布局
        pckry.appended(card);
        pckry.layout();
        // 更新localStorage的狀態
        saveState();
    };
}


function saveState() {
    const cards = document.querySelectorAll('.card');
    const state = Array.from(cards).map(card => ({
        url: card.querySelector('img').src,
        sizeClass: card.classList[1] // 假設大小類別為第二個class
    }));
    localStorage.setItem('cardsState', JSON.stringify(state));
}

function restoreState() {
    const state = JSON.parse(localStorage.getItem('cardsState'));
    if (state) {
        state.forEach(cardState => {
            addImageWithUrl(cardState.url, cardState.sizeClass);
        });
    }
}