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

Carousel: Add URL to location

Browse Source
This commit is contained in:
Félix Péault
2020-04-07 22:30:24 +02:00
parent fd8c718873
commit 9f405cc1d1
3 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/organisms/Carousel.svelte
View File

@@ -21,6 +21,7 @@
// Props and Variables
export let photos
export let viewer = false
export let locationUrl = false
let scope
let swiped
let currentIndex = 0
@@ -35,30 +36,6 @@
const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Get lazyload class
const getLazyloadClass = index => {
console.log(index, currentIndex)
// Preload current photo
if (index === currentIndex || index >= currentIndex - 2 && index <= currentIndex + 2) {
return true
}
// Preload the two previous and next photos
if (index >= currentIndex - 2 && index <= currentIndex + 2) {
return true
}
// If currentIndex = last photo, preload the two first ones
if (currentIndex === photos.length - 1 && (index === 0 || index === 1)) {
return true
}
// return false
// If currentIndex = first photo, preload the two last ones
// if (index) {
// }
return false
}
/*
** Navigate to a photo
*/
@@ -171,12 +148,13 @@
class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id}
class:is-next={id === nextPhoto.id}
on:click={openFullscreen}
role="tabpanel"
aria-label="Photo {index + 1} of {photos.length}"
aria-hidden={index === currentIndex ? undefined : true}
>
<picture class="gallery__picture">
<picture class="gallery__picture"
on:click={openFullscreen}
>
<source media="(min-width: 968px)" data-srcset={getThumbnail(image.private_hash, 1200)}>
<source media="(min-width: 800px)" data-srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}>
@@ -235,7 +213,13 @@
>
<p class="street">{name}</p>
<p class="state style-caps style-caps--transparent">
{location.name}, {location.country.name}
{#if locationUrl}
<a href="/location/{location.country.slug}/{location.slug}" sapper-noscroll>
{location.name}, {location.country.name}
</a>
{:else}
{location.name}, {location.country.name}
{/if}
</p>
</div>
{/each}