20210782/travel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add comments(Why didn’t I do this sooner?)

Browse Source
This commit is contained in:
Chaebean Yang 2025-06-10 01:47:37 +09:00
parent 32fa693b5c
commit fa8d3aa2a6
1 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
View File

@ -22,6 +22,7 @@
let droppedGradientLayers = []; let droppedGradientLayers = [];
let droppedWheelStyle = {}; let droppedWheelStyle = {};
let droppedCurrentImage = null; let droppedCurrentImage = null;
let isDroppedVisible = true;
$: tripId = $page.params.tripId; $: tripId = $page.params.tripId;
$: memoryId = $page.params.memoryId; $: memoryId = $page.params.memoryId;
@ -85,6 +86,7 @@
droppedMemory = memorySnap.val(); droppedMemory = memorySnap.val();
droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, false); droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, false);
droppedImageIndex = 0; droppedImageIndex = 0;
isDroppedVisible = true;
} }
} }
@ -268,7 +270,7 @@
function handleDrop(event) { function handleDrop(event) {
event.preventDefault(); event.preventDefault();
if (droppedMemory) return; if (droppedMemory && isDroppedVisible) return;
const droppedTripId = event.dataTransfer.getData("tripId"); const droppedTripId = event.dataTransfer.getData("tripId");
const droppedMemoryId = event.dataTransfer.getData("memoryId"); const droppedMemoryId = event.dataTransfer.getData("memoryId");
@ -276,10 +278,14 @@
} }
function allowDrop(event) { function allowDrop(event) {
if (!droppedMemory) { if (!droppedMemory || !isDroppedVisible) {
event.preventDefault(); event.preventDefault();
} }
} }
function closeDroppedWheel() {
isDroppedVisible = false;
}
</script> </script>
@ -336,7 +342,9 @@
<!-- rightside dropped view --> <!-- rightside dropped view -->
<div class="wheel-section drop-zone" on:drop={handleDrop} on:dragover={allowDrop}> <div class="wheel-section drop-zone" on:drop={handleDrop} on:dragover={allowDrop}>
{#if droppedMemory} {#if droppedMemory && isDroppedVisible}
<img src="/lucide_x.png" alt="Close" class="close-button" on:click={closeDroppedWheel} />
<div class="dropped-mask"> <div class="dropped-mask">
<div class="dropped-wheel" style={droppedWheelStyle}> <div class="dropped-wheel" style={droppedWheelStyle}>
{#each droppedGradientLayers as style} {#each droppedGradientLayers as style}
@ -344,9 +352,11 @@
{/each} {/each}
</div> </div>
</div> </div>
{#if droppedCurrentImage} {#if droppedCurrentImage}
<img class="dropped-img" src={droppedCurrentImage} alt="Dropped Image" /> <img class="dropped-img" src={droppedCurrentImage} alt="Dropped Image" />
{/if} {/if}
<div class="dropped-controls"> <div class="dropped-controls">
<button on:click={prevDroppedImage}> <button on:click={prevDroppedImage}>
<img src="/lucide_chevron-up.png" alt="Up" width="24" height="24" /> <img src="/lucide_chevron-up.png" alt="Up" width="24" height="24" />
@ -570,5 +580,15 @@
right: -15vw; right: -15vw;
border-radius: 50%; border-radius: 50%;
} }
.close-button {
position: absolute;
top: -48px;
right: 2rem;
width: 24px;
height: 24px;
cursor: pointer;
z-index: 5;
}
</style> </style>