jorts/static/spa.js

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

function init() {

    // 綁定事件
    document.querySelector('.buttonAddImage').addEventListener('click', showAddImageForm);
    document.querySelector('.buttonCancelAdd').addEventListener('click', hideAddImageForm);
    document.querySelector('.buttonApproveAdd').addEventListener('click', addImage);
    document.querySelector('.buttonClearCards').addEventListener('click', clearAllCards);
    document.querySelector('.buttonSeedCards').addEventListener('click', seedCards);

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

    // 如果有撤銷/重做按鈕的功能，這裡綁定相應的事件
}

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() {
    document.querySelector('.newPictureForm').classList.add('displayNone');
}

function addImage(event) {
    event.preventDefault();
    const imageUrl = document.getElementById('newPicUrl').value.trim();
    if (imageUrl) {
        // 創建卡片容器
        const card = document.createElement('div');
        card.className = 'card';

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

        // 將圖片添加到卡片容器
        card.appendChild(img);

        // 將卡片容器添加到主體（cardholder）中
        const cardholder = document.querySelector('.cardholder');
        cardholder.appendChild(card);

        // 通知 Packery 新增加了一個卡片元素
        pckry.appended(card);

        // 使新加入的卡片可拖動
        var draggie = new Draggabilly(card);
        // 將 Draggabilly 事件綁定到 Packery
        pckry.bindDraggabillyEvents(draggie);

        // 清空輸入欄位
        document.getElementById('newPicUrl').value = '';
    }
}




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

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

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

// 將 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) {
    const card = document.createElement('div');
    card.className = 'card';

    // 隨機選擇一個大小
    const sizeClass = 'card-size-' + (Math.floor(Math.random() * 4) + 1);
    card.classList.add(sizeClass);

    const img = document.createElement('img');
    img.src = imageUrl;
    img.alt = 'Mood Image';
    img.className = 'mood-image';
    img.onload = function() {
        card.appendChild(img);
        const cardholder = document.querySelector('.cardholder');
        cardholder.appendChild(card);

        pckry.appended(card);
        pckry.layout();

        var draggie = new Draggabilly(card);
        pckry.bindDraggabillyEvents(draggie);
    };
}