From f91dc8541bf62ac7ab1bdf3a04b9c564a2cc6d1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 16 Apr 2020 15:23:40 +0200 Subject: [PATCH 1/7] Disable serviceworker for dev --- rollup.config.js | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 09e52c4..22c9949 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -130,20 +130,21 @@ export default { /* ** Service worker */ - serviceworker: { - input: sapperConfig.serviceworker.input(), - output: sapperConfig.serviceworker.output(), - plugins: [ - resolve(), - aliases, - replace({ - 'process.browser': true, - ...replaceOptions - }), - commonjs(), - !dev && terser() - ], - - onwarn, - } + ...(!dev && { + serviceworker: { + input: sapperConfig.serviceworker.input(), + output: sapperConfig.serviceworker.output(), + plugins: [ + resolve(), + aliases, + replace({ + 'process.browser': true, + ...replaceOptions + }), + commonjs(), + !dev && terser() + ], + onwarn, + } + }) } From 7f3f2ac3ba29010345861a1a52bb9066e68a8937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 16 Apr 2020 16:40:33 +0200 Subject: [PATCH 2/7] WIP on performances --- src/animations/Carousel.js | 2 +- src/animations/index.js | 2 +- src/molecules/InteractiveGlobe.svelte | 50 ++++++++++++-------------- src/molecules/Photo.svelte | 2 +- src/organisms/Carousel.svelte | 2 +- src/routes/index.svelte | 18 +++++++++- src/utils/Transition.svelte | 29 +++++++-------- src/utils/store.js | 2 +- static/img/globe/map-3k.png | Bin 0 -> 46746 bytes 9 files changed, 60 insertions(+), 47 deletions(-) create mode 100644 static/img/globe/map-3k.png diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index 8d3792a..cc9fb50 100644 --- a/src/animations/Carousel.js +++ b/src/animations/Carousel.js @@ -10,7 +10,7 @@ export const animateIn = scope => { const tl = anime.timeline({ easing: 'easeOutQuart', duration: animDuration, - delay: animDelay, + // delay: animDelay, autoplay: false }) diff --git a/src/animations/index.js b/src/animations/index.js index 1ccea1d..0fcbf9f 100644 --- a/src/animations/index.js +++ b/src/animations/index.js @@ -18,7 +18,7 @@ export const animateIn = () => { duration: animDuration }) - // Parallax on scroll + // Title: Parallax on scroll const translate = anime({ targets: '#title-houses', translateX: ['7%', '-15%'], diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte index 40d3c76..38e1099 100644 --- a/src/molecules/InteractiveGlobe.svelte +++ b/src/molecules/InteractiveGlobe.svelte @@ -22,34 +22,30 @@ ** Run code when mounted */ onMount(async () => { - // For browser only - if (process.browser) { - // Import libraries and code - let Globe - await import('globe').then(module => Globe = module.default) + // Import libraries and code + let InteractiveGlobe + await import('globe/index').then(module => InteractiveGlobe = module.default) + // Init the globe from library + globe = new InteractiveGlobe({ + el: scope, + texture: `/img/globe/map-${window.innerWidth >= 992 ? '3k' : '2k'}.png`, + markers: [...$locations.map(location => { + return { + name: location.name, + slug: location.slug, + countryName: location.country.name, + countrySlug: location.country.slug, + lat: location.coordinates.lat, + lng: location.coordinates.lng + } + })], + cameraDistance: 3, + onLinkClicked: () => {} + }) - // Init the globe from library - globe = new Globe({ - el: scope, - texture: `/img/globe/map-${window.innerWidth >= 992 ? '4k' : '2k'}.png`, - markers: [...$locations.map(location => { - return { - name: location.name, - slug: location.slug, - countryName: location.country.name, - countrySlug: location.country.slug, - lat: location.coordinates.lat, - lng: location.coordinates.lng - } - })], - cameraDistance: 3, - onLinkClicked: () => {} - }) - - // Run the globe - resize() - update() - } + // Run the globe + resize() + update() }) diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte index 2964ac2..0973c6e 100644 --- a/src/molecules/Photo.svelte +++ b/src/molecules/Photo.svelte @@ -54,7 +54,7 @@ - {imgAlt} - {name}, {location.name}, {location.country.name} { + onMount(async () => { + // Load components + // await import('organisms/Carousel').then(module => Carousel = module.default) + // await import('organisms/Fullscreen').then(module => Fullscreen = module.default) + // await import('molecules/InteractiveGlobe').then(module => InteractiveGlobe = module.default) + // await import('organisms/Locations').then(module => Locations = module.default) + // Page is loaded pageReady.set(true) }) @@ -97,7 +109,9 @@ @@ -113,6 +127,7 @@ +

@@ -121,6 +136,7 @@

+