|
|
@@ -10,9 +10,12 @@ 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 的選項
|
|
|
@@ -20,9 +23,72 @@ function init() {
|
|
|
// percentPosition: true, // 如果你想要使用百分比定位
|
|
|
gutter: 1
|
|
|
});
|
|
|
- makeAllCardsDraggable();
|
|
|
+ // 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.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() {
|
|
|
@@ -53,41 +119,44 @@ function makeAllCardsDraggable() {
|
|
|
}
|
|
|
|
|
|
function hideAddImageForm() {
|
|
|
- document.querySelector('.newPictureForm').classList.add('displayNone');
|
|
|
+ var modal = document.getElementById('addImageModal');
|
|
|
+ modal.style.display = "none";
|
|
|
}
|
|
|
|
|
|
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);
|
|
|
+ let imageUrl = document.getElementById('newPicUrl').value.trim();
|
|
|
+ if (!imageUrl) {
|
|
|
+ // 如果 URL 是空的，直接返回並且不進行任何操作
|
|
|
+ console.log('URL is empty. No action taken.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {
|
|
|
+ // 如果不是，則默默地為用戶添加 http://
|
|
|
+ imageUrl = 'https://' + imageUrl;
|
|
|
+ console.log('URL corrected to: ', imageUrl);
|
|
|
+ }
|
|
|
+ // 添加圖片
|
|
|
+ addImageWithUrl(imageUrl);
|
|
|
|
|
|
- // 使新加入的卡片可拖動
|
|
|
- var draggie = new Draggabilly(card);
|
|
|
- // 將 Draggabilly 事件綁定到 Packery
|
|
|
- pckry.bindDraggabillyEvents(draggie);
|
|
|
+ // 清空輸入欄位並隱藏添加圖片表單
|
|
|
+ document.getElementById('newPicUrl').value = '';
|
|
|
+ hideAddImageForm();
|
|
|
+}
|
|
|
|
|
|
- // 清空輸入欄位
|
|
|
- document.getElementById('newPicUrl').value = '';
|
|
|
+function addMoreImage(event) {
|
|
|
+ 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 = 'http://' + imageUrl;
|
|
|
+ console.log('URL corrected to: ', imageUrl);
|
|
|
}
|
|
|
+ addImageWithUrl(imageUrl);
|
|
|
+ document.getElementById('newPicUrl').value = '';
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -104,13 +173,19 @@ function clearAllCards() {
|
|
|
pckry.layout();
|
|
|
}
|
|
|
|
|
|
-function seedCards() {
|
|
|
- getRandomMemeGif(function(gifUrl) {
|
|
|
+function addMeme() {
|
|
|
+ getRandomMemeGif(function (gifUrl) {
|
|
|
// 這裡我們直接調用 addImage 函數，將 Giphy 圖片 URL 作為參數
|
|
|
addImageWithUrl(gifUrl);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+function seedCards() {
|
|
|
+ imageSeeds.forEach(seed => {
|
|
|
+ addImageWithUrl(seed.url);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
// 撤銷/重做功能的實現可以根據你的需求設計
|
|
|
|
|
|
// 將 YOUR_API_KEY 替換成你的 Giphy API 密鑰
|
|
|
@@ -139,20 +214,81 @@ function addImageWithUrl(imageUrl) {
|
|
|
const 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 img = document.createElement('img');
|
|
|
img.src = imageUrl;
|
|
|
img.alt = 'Mood Image';
|
|
|
img.className = 'mood-image';
|
|
|
- img.onload = function() {
|
|
|
+ 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();
|
|
|
-
|
|
|
- var draggie = new Draggabilly(card);
|
|
|
- pckry.bindDraggabillyEvents(draggie);
|
|
|
};
|
|
|
-}
|
|
|
-
|
|
|
+}
|
