flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use Destructuring variables to avoid repetitions

Browse Source 
- Easier to read and write
- Also fixes fullscreen when leaving the viewer, my bad
This commit is contained in:
Félix Péault
2020-03-31 10:35:51 +02:00
parent 2dc51a167a
commit 5ac5d6803f
5 changed files with 46 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/organisms/Carousel.svelte
View File

@@ -25,6 +25,8 @@
let scope
let swiped
let currentIndex = 0
// Reactive variables from currentIndex
$: currentPhoto = photos[currentIndex] || null
$: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
$: nextPhoto = photos[currentIndex + 1] || photos[0]
@@ -140,18 +142,18 @@
<div class="wrap">
<div class="gallery">
<div class="gallery__images">
{#each photos as photo, index}
{#each photos as { id, name, location, image }, index}
<picture class="gallery__photo"
class:gallery__photo--prev={photo === prevPhoto}
class:gallery__photo--active={photo === currentPhoto}
class:gallery__photo--next={photo === nextPhoto}
class:gallery__photo--prev={id === prevPhoto.id}
class:gallery__photo--active={id === currentPhoto.id}
class:gallery__photo--next={id === nextPhoto.id}
on:click={openFullscreen}
>
<source media="(min-width: 968px)" srcset={getThumbnail(photo.image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={getThumbnail(photo.image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
<img src="{getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {photo.location.name}, {photo.location.country.name}">
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
<img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
</picture>
{/each}
</div>
@@ -185,15 +187,15 @@
<div class="carousel__infos">
<div class="carousel__locations">
{#each photos as photo, index}
{#each photos as { id, name, location }, index}
<div class="carousel__location style-location"
class:carousel__location--prev={photo === prevPhoto}
class:carousel__location--active={photo === currentPhoto}
class:carousel__location--next={photo === nextPhoto}
class:carousel__location--prev={id === prevPhoto.id}
class:carousel__location--active={id === currentPhoto.id}
class:carousel__location--next={id === nextPhoto.id}
>
<p class="street">{photo.name}</p>
<p class="street">{name}</p>
<p class="state style-caps style-caps--transparent">
{photo.location.name}, {photo.location.country.name}
{location.name}, {location.country.name}
</p>
</div>
{/each}

10
src/organisms/Fullscreen.svelte
View File

@@ -16,10 +16,7 @@
let closed = false
// Wait for fullscreen store value
$: {
if ($fullscreen) openFullscreen($fullscreen)
else closeFullscreen()
}
$: if ($fullscreen) openFullscreen($fullscreen)
/*
@@ -27,13 +24,14 @@
*/
// Open fullscreen
const openFullscreen = throttle(currentPhoto => {
const { name, image, location } = currentPhoto
loading = true
if (!open) {
const img = document.createElement('img')
const imgContainer = scope.querySelector('.fullscreen__image')
img.src = getThumbnail(currentPhoto.image.private_hash, null, 1600, 'crop', 80)
img.alt = `${currentPhoto.name}, ${currentPhoto.location.name}, ${currentPhoto.location.country.name}`
img.src = getThumbnail(image.private_hash, null, 1600, 'crop', 80)
img.alt = `${name}, ${location.name}, ${location.country.name}`
img.width = 2400
img.height = 1600
imgContainer.append(img)