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

Photo: Code optimization
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- Avoid double declaration of sources
- Use class over an HTML tag for image reveal animation
This commit is contained in:
Félix Péault
2020-03-31 17:55:32 +02:00
parent fc74a93508
commit 88186f479c
4 changed files with 43 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -51,7 +51,7 @@
"postcss": "^7.0.27",
"postcss-load-config": "^2.1.0",
"postcss-preset-env": "^6.7.0",
"rollup": "^2.3.0",
"rollup": "^2.3.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-eslint": "^7.0.0",
"rollup-plugin-svelte": "^5.2.0",

60
pnpm-lock.yaml generated
View File

@@ -15,10 +15,10 @@ devDependencies:
'@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
'@babel/preset-env': 7.9.0_@babel+core@7.9.0
'@babel/runtime': 7.9.2
'@rollup/plugin-alias': 3.0.1_rollup@2.3.0
'@rollup/plugin-commonjs': 11.0.2_rollup@2.3.0
'@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.0
'@rollup/plugin-replace': 2.3.1_rollup@2.3.0
'@rollup/plugin-alias': 3.0.1_rollup@2.3.1
'@rollup/plugin-commonjs': 11.0.2_rollup@2.3.1
'@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.1
'@rollup/plugin-replace': 2.3.1_rollup@2.3.1
autoprefixer: 9.7.5
babel-plugin-module-resolver: 4.0.0
dotenv: 8.2.0
@@ -33,11 +33,11 @@ devDependencies:
postcss: 7.0.27
postcss-load-config: 2.1.0
postcss-preset-env: 6.7.0
rollup: 2.3.0
rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.0
rollup: 2.3.1
rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.1
rollup-plugin-eslint: 7.0.0
rollup-plugin-svelte: 5.2.0_rollup@2.3.0+svelte@3.20.1
rollup-plugin-terser: 5.3.0_rollup@2.3.0
rollup-plugin-svelte: 5.2.0_rollup@2.3.1+svelte@3.20.1
rollup-plugin-terser: 5.3.0_rollup@2.3.1
sapper: 0.27.11_svelte@3.20.1
svelte: 3.20.1
svelte-preprocess: 3.7.1_svelte@3.20.1
@@ -892,23 +892,23 @@ packages:
dev: false
resolution:
integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
/@rollup/plugin-alias/3.0.1_rollup@2.3.0:
/@rollup/plugin-alias/3.0.1_rollup@2.3.1:
dependencies:
rollup: 2.3.0
rollup: 2.3.1
slash: 3.0.0
dev: true
peerDependencies:
rollup: ^1.20.0
resolution:
integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g==
/@rollup/plugin-commonjs/11.0.2_rollup@2.3.0:
/@rollup/plugin-commonjs/11.0.2_rollup@2.3.1:
dependencies:
'@rollup/pluginutils': 3.0.8_rollup@2.3.0
'@rollup/pluginutils': 3.0.8_rollup@2.3.1
estree-walker: 1.0.1
is-reference: 1.1.4
magic-string: 0.25.7
resolve: 1.15.1
rollup: 2.3.0
rollup: 2.3.1
dev: true
engines:
node: '>= 8.0.0'
@@ -916,14 +916,14 @@ packages:
rollup: ^1.20.0
resolution:
integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
/@rollup/plugin-node-resolve/7.1.1_rollup@2.3.0:
/@rollup/plugin-node-resolve/7.1.1_rollup@2.3.1:
dependencies:
'@rollup/pluginutils': 3.0.8_rollup@2.3.0
'@rollup/pluginutils': 3.0.8_rollup@2.3.1
'@types/resolve': 0.0.8
builtin-modules: 3.1.0
is-module: 1.0.0
resolve: 1.15.1
rollup: 2.3.0
rollup: 2.3.1
dev: true
engines:
node: '>= 8.0.0'
@@ -931,20 +931,20 @@ packages:
rollup: ^1.20.0
resolution:
integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==
/@rollup/plugin-replace/2.3.1_rollup@2.3.0:
/@rollup/plugin-replace/2.3.1_rollup@2.3.1:
dependencies:
'@rollup/pluginutils': 3.0.8_rollup@2.3.0
'@rollup/pluginutils': 3.0.8_rollup@2.3.1
magic-string: 0.25.7
rollup: 2.3.0
rollup: 2.3.1
dev: true
peerDependencies:
rollup: ^1.20.0
resolution:
integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A==
/@rollup/pluginutils/3.0.8_rollup@2.3.0:
/@rollup/pluginutils/3.0.8_rollup@2.3.1:
dependencies:
estree-walker: 1.0.1
rollup: 2.3.0
rollup: 2.3.1
dev: true
engines:
node: '>= 8.0.0'
@@ -3792,11 +3792,11 @@ packages:
hasBin: true
resolution:
integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
/rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.0:
/rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.1:
dependencies:
'@babel/core': 7.9.0
'@babel/helper-module-imports': 7.8.3
rollup: 2.3.0
rollup: 2.3.1
rollup-pluginutils: 2.8.2
dev: true
peerDependencies:
@@ -3811,10 +3811,10 @@ packages:
dev: true
resolution:
integrity: sha512-u35kXiY11ULeNQGTlRkYx7uGJ/hS/Dx3wj8f9YVC3oMLTGU9fOqQJsAKYtBFZU3gJ8Vt3gu8ppB1vnKl+7gatQ==
/rollup-plugin-svelte/5.2.0_rollup@2.3.0+svelte@3.20.1:
/rollup-plugin-svelte/5.2.0_rollup@2.3.1+svelte@3.20.1:
dependencies:
require-relative: 0.8.7
rollup: 2.3.0
rollup: 2.3.1
rollup-pluginutils: 2.8.2
sourcemap-codec: 1.4.8
svelte: 3.20.1
@@ -3824,11 +3824,11 @@ packages:
svelte: '*'
resolution:
integrity: sha512-6B7gRsJC/rS/ATEy3J51McsNgNcDFibRQ/L3rHsDMUYeCDCm3dsw3KEqf3WaxX0ZdApzZ1XWcnTXGQlwVPYpnQ==
/rollup-plugin-terser/5.3.0_rollup@2.3.0:
/rollup-plugin-terser/5.3.0_rollup@2.3.1:
dependencies:
'@babel/code-frame': 7.8.3
jest-worker: 24.9.0
rollup: 2.3.0
rollup: 2.3.1
rollup-pluginutils: 2.8.2
serialize-javascript: 2.1.2
terser: 4.6.7
@@ -3843,7 +3843,7 @@ packages:
dev: true
resolution:
integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
/rollup/2.3.0:
/rollup/2.3.1:
dev: true
engines:
node: '>=10.0.0'
@@ -3851,7 +3851,7 @@ packages:
optionalDependencies:
fsevents: 2.1.2
resolution:
integrity: sha512-nIq2Z9YwNbEfqTlAXe/tVl8CwUsjX/8Q5Jxlx+JRoYCu5keKLc6k0zyt11sM6WtCDxhmmJEIosFy9y26ZFRx6w==
integrity: sha512-BRjzOauORe+R0U0I6SkMTSG22nYmtztR/TaBl0SvbXgc3VAxBDrZoB6HROiK0S5px1pUBnLnjBkbzmVuwC9Q1Q==
/run-async/2.4.0:
dependencies:
is-promise: 2.1.0
@@ -4555,7 +4555,7 @@ specifiers:
postcss: ^7.0.27
postcss-load-config: ^2.1.0
postcss-preset-env: ^6.7.0
rollup: ^2.3.0
rollup: ^2.3.1
rollup-plugin-babel: ^4.4.0
rollup-plugin-eslint: ^7.0.0
rollup-plugin-svelte: ^5.2.0

2
src/animations/Photo.js
View File

@@ -28,7 +28,7 @@ export const animateIn = scope => {
// Photo appearing
const photoReveal = ScrollOut({
once: true,
targets: scope.querySelector('picture'),
targets: scope.querySelector('.photo__image'),
onShown (el) {
// Load the photo then reveal it
imagesLoaded(el, instance => {

28
src/molecules/Photo.svelte
View File

@@ -16,11 +16,10 @@
const defaultWidth = 900
const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Reactive variables for location informations
// Location related
const { name, date, location } = photo
const { private_hash } = photo.image
const imgAlt = `${name}, ${location.region}, ${location.country.name}`
const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
// Photo index
const photoIndex = (index < 10 ? '0': '') + index
@@ -47,26 +46,21 @@
<div class="photo__image wrap">
<div class="align">
<a href={photoHref} sapper-noscroll>
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}" sapper-noscroll>
<picture class="photo__picture">
<source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
{#if layout === 'list'}
<source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
data-src="{getThumbnail(private_hash, 900)}"
<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
alt={imgAlt}
width={defaultWidth} height={defaultHeight}
class="lazyload"
>
class="lazyload">
{:else}
<source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
<img src="{getThumbnail(private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
<img src="{getThumbnail(private_hash, 900)}"
alt={imgAlt}
width={defaultWidth} height={defaultHeight}>
{/if}
</picture>
</a>