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}

5
src/routes/index.svelte
View File

@@ -7,7 +7,8 @@
// Fields
const fields = [
'id', 'name', 'image.private_hash',
'location.id', 'location.name', 'location.slug', 'location.country.name'
'location.id', 'location.name', 'location.slug',
'location.country.name', 'location.country.slug'
]
// Random sort
const sort = '?'
@@ -97,7 +98,7 @@
</div>
<div id="intro-carousel">
<Carousel {photos} />
<Carousel {photos} locationUrl={true} />
<Fullscreen />
</div>
</section>

15
src/style/organisms/_carousel.scss
View File

@@ -65,6 +65,7 @@
height: 100%;
transform: scale($scale);
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
pointer-events: none;
@extend %willchange;
// Active photo
@@ -72,6 +73,7 @@
opacity: 1;
z-index: 10;
transform: scale(1);
pointer-events: auto;
img {
opacity: 1;
@@ -81,6 +83,7 @@
// Previous & next photo
&.is-prev, &.is-next {
opacity: 1;
pointer-events: auto;
img {
opacity: 1;
@@ -240,6 +243,7 @@
margin-top: 32px;
padding-bottom: 4px;
text-align: center;
pointer-events: none;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
@@ -250,6 +254,16 @@
margin-top: 72px;
}
a {
color: rgba($color-tertiary, 0.5);
text-decoration: none;
transition: color 150ms $ease-inout;
&:hover {
color: rgba($color-tertiary, 0.8);
}
}
// State
.state {
margin-top: 6px;
@@ -262,6 +276,7 @@
&.is-active {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
&.is-next {
transform: translateY($distance);