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

11
src/molecules/Location.svelte
View File

@@ -1,16 +1,19 @@
<script> <script>
// Props // Props
export let location export let location
// Variables
const { name, slug, country } = location
</script> </script>
<div class="location"> <div class="location">
<a href="/location/{location.country.slug}/{location.slug}" rel="prefetch" sapper-noscroll> <a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
<img src={location.country.flag.full_url} alt="Flag of {location.country.name}"> <img src={country.flag.full_url} alt="Flag of {country.name}">
<div class="anim-mask mask-city"> <div class="anim-mask mask-city">
<h3 class="location__city">{location.name}</h3> <h3 class="location__city">{name}</h3>
</div> </div>
<div class="anim-mask mask-country"> <div class="anim-mask mask-country">
<p class="location__country style-caps">{location.country.name}</p> <p class="location__country style-caps">{country.name}</p>
</div> </div>
</a> </a>
</div> </div>

33
src/molecules/Photo.svelte
View File

@@ -17,8 +17,9 @@
const defaultHeight = Math.ceil(defaultWidth / 1.5) const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Reactive variables for location informations // Reactive variables for location informations
const location = photo.location const { name, date, location } = photo
const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}` const { private_hash } = photo.image
const imgAlt = `${name}, ${location.region}, ${location.country.name}`
const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}` const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
// Photo index // Photo index
@@ -37,8 +38,8 @@
<div class="photo__location wrap"> <div class="photo__location wrap">
<div class="wrapper"> <div class="wrapper">
<h2 class="title-location"> <h2 class="title-location">
<span>{photo.name.split(', ')[0]},</span> <span>{name.split(', ')[0]},</span>
<span>{photo.name.split(', ')[1]}</span> <span>{name.split(', ')[1]}</span>
</h2> </h2>
<p class="style-caps">{location.region}, {location.country.name}</p> <p class="style-caps">{location.region}, {location.country.name}</p>
</div> </div>
@@ -49,28 +50,28 @@
<a href={photoHref} sapper-noscroll> <a href={photoHref} sapper-noscroll>
<picture class="photo__picture"> <picture class="photo__picture">
{#if layout === 'list'} {#if layout === 'list'}
<source media="(min-width: 992px)" data-srcset={getThumbnail(photo.image.private_hash, 1300)}> <source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" data-srcset={getThumbnail(photo.image.private_hash, 992)}> <source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" data-srcset={getThumbnail(photo.image.private_hash, 650)}> <source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(photo.image.private_hash, 400)}> <source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg==" <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
data-src="{getThumbnail(photo.image.private_hash, 900)}" data-src="{getThumbnail(private_hash, 900)}"
alt={imgAlt} alt={imgAlt}
width={defaultWidth} height={defaultHeight} width={defaultWidth} height={defaultHeight}
class="lazyload" class="lazyload"
> >
{:else} {:else}
<source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}> <source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={getThumbnail(photo.image.private_hash, 992)}> <source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 650)}> <source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}> <source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
<img src="{getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}> <img src="{getThumbnail(private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
{/if} {/if}
</picture> </picture>
</a> </a>
<time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}> <time class="photo__date" datetime={formatDate(date, 'DATETIME')}>
{formatDate(photo.date, 'FULL')} {formatDate(date, 'FULL')}
</time> </time>
<div class="photo__number"> <div class="photo__number">
<span>{photoIndex}</span> <span>{photoIndex}</span>

2
src/molecules/Switcher.svelte
View File

@@ -8,7 +8,7 @@
export let type = '' export let type = ''
export let radius = 32 export let radius = 32
// Location variables // Variables
let location let location
let locationName let locationName
let locationOf let locationOf

32
src/organisms/Carousel.svelte
View File

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

10
src/organisms/Fullscreen.svelte
View File

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