From afb087408c59086963cb9f30e3942307ce4b8157 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 26 Feb 2020 15:49:56 +0100
Subject: [PATCH] Optimize components

- Use class attribute over className
- Code cleaning
---
 src/atoms/Button.svelte                       |  5 +-
 src/atoms/IconArrow.svelte                    |  3 +-
 src/atoms/IconCross.svelte                    |  3 +-
 src/molecules/InteractiveGlobe.svelte         |  5 +-
 src/molecules/Switcher.svelte                 |  2 +-
 src/organisms/Carousel.svelte                 | 10 ++--
 src/routes/choose.svelte                      |  4 +-
 .../[country]/[location]/[photo].svelte       | 58 +------------------
 8 files changed, 18 insertions(+), 72 deletions(-)

diff --git a/src/atoms/Button.svelte b/src/atoms/Button.svelte
index 76ee32b..8507b47 100644
--- a/src/atoms/Button.svelte
+++ b/src/atoms/Button.svelte
@@ -1,20 +1,19 @@
 <script>
     export let href = '#'
     export let type = 'a'
-    export let className = 'button'
     export let text = ''
 
     const hasSlot = arguments[1].$$slots !== undefined
 </script>
 
 {#if type === 'button'}
-<button class={className} class:button-icon={hasSlot} data-text={text} on:click>
+<button class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
     <slot></slot>
     <span>{text}</span>
 </button>
 
 {:else}
-<a {href} class={className} class:button-icon={hasSlot} data-text={text} on:click>
+<a {href} class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
     <slot></slot>
     <span>{text}</span>
 </a>
diff --git a/src/atoms/IconArrow.svelte b/src/atoms/IconArrow.svelte
index a1f22f7..8dd7230 100644
--- a/src/atoms/IconArrow.svelte
+++ b/src/atoms/IconArrow.svelte
@@ -1,11 +1,10 @@
 <script>
     export let direction = 'left'
     export let color = '#fff'
-    export let className
     export let hidden = undefined
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill={color} class={className} aria-hidden={hidden}>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill={color} class={$$props.class} aria-hidden={hidden}>
     {#if direction === 'left'}
     <path d="M.26 10.85l-.06-.11-.08-.15-.05-.16-.04-.13a1.5 1.5 0 010-.6c0-.05.03-.09.04-.13l.05-.16.08-.15.06-.1c.06-.1.13-.17.2-.25L9.2.45c.61-.6 1.61-.6 2.23 0 .62.6.62 1.57 0 2.17L5.4 8.47h13.02c.87 0 1.58.68 1.58 1.53s-.7 1.53-1.58 1.53H5.4l6.03 5.85c.62.6.62 1.57 0 2.17-.3.3-.71.45-1.12.45-.4 0-.8-.15-1.11-.45L.46 11.08a1.5 1.5 0 01-.2-.23"/>
     {:else if direction === 'right'}
diff --git a/src/atoms/IconCross.svelte b/src/atoms/IconCross.svelte
index 9bd1c11..0dede91 100644
--- a/src/atoms/IconCross.svelte
+++ b/src/atoms/IconCross.svelte
@@ -1,10 +1,9 @@
 <script>
     export let width = 18
     export let color = '#fff'
-    export let className
     export let hidden = undefined
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" {width} fill={color} class={className} aria-hidden={hidden}>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" {width} fill={color} class={$$props.class} aria-hidden={hidden}>
     <path fill-rule="nonzero" d="M16.63.37c.47.47.5 1.2.09 1.7l-.09.1-6.32 6.33 6.32 6.32a1.28 1.28 0 01-1.7 1.9l-.1-.09-6.33-6.32-6.32 6.32a1.28 1.28 0 01-1.9-1.7l.09-.1L6.69 8.5.37 2.18a1.28 1.28 0 011.7-1.9l.1.09L8.5 6.69 14.82.37c.5-.5 1.31-.5 1.81 0z"/>
 </svg>
diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte
index 1e13eb4..803ab5c 100644
--- a/src/molecules/InteractiveGlobe.svelte
+++ b/src/molecules/InteractiveGlobe.svelte
@@ -1,6 +1,7 @@
 <script>
-    // Idea: https://codepen.io/edankwan/pen/emqgpr
-    // Idea 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
+    // Lead 1: https://codepen.io/edankwan/pen/emqgpr
+    // Lead 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
+    // Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
 </script>
 
 <div class="globe">
diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte
index c003dac..f7b6538 100644
--- a/src/molecules/Switcher.svelte
+++ b/src/molecules/Switcher.svelte
@@ -15,7 +15,7 @@
 
     $: {
         location = $currentLocation
-        locationName = location ? location.location.name : 'World'
+        locationName = location ? location.name : 'World'
         locationOf = location ? 'Of' : 'Of The'
     }
 </script>
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 0ebc464..920a1ee 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -138,15 +138,15 @@
             <div class="carousel__controls">
                 <div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
                     <button class="button-control button-control--white dir-left" aria-label="Previous">
-                        <IconArrow direction="left" color="#ff6c89" className="icon" />
-                        <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
+                        <IconArrow direction="left" color="#ff6c89" class="icon" />
+                        <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                     </button>
                 </div>
 
                 <div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
                     <button class="button-control button-control--white dir-right" aria-label="Next">
-                        <IconArrow direction="right" color="#ff6c89" className="icon" />
-                        <IconArrow direction="right" color="#fff" className="icon" hidden="true" />
+                        <IconArrow direction="right" color="#ff6c89" class="icon" />
+                        <IconArrow direction="right" color="#fff" class="icon" hidden="true" />
                     </button>
                 </div>
             </div>
@@ -171,7 +171,7 @@
         <ol class="carousel__dots">
             {#each photos as page, index}
             <li class:active={index === 0}>
-                <button></button>
+                <button aria-label="Go to image #{index + 1}"></button>
             </li>
             {/each}
         </ol>
diff --git a/src/routes/choose.svelte b/src/routes/choose.svelte
index c9fa3fa..40d7630 100644
--- a/src/routes/choose.svelte
+++ b/src/routes/choose.svelte
@@ -38,8 +38,8 @@
     <div class="wrap">
         <div class="explore__top">
             <a href="/" class="button-control button-control--pink dir-left">
-                <IconArrow direction="left" color="#fff" className="icon" />
-                <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
+                <IconArrow direction="left" color="#fff" class="icon" />
+                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
             </a>
 
             <div class="title-location title-location--inline">
diff --git a/src/routes/viewer/[country]/[location]/[photo].svelte b/src/routes/viewer/[country]/[location]/[photo].svelte
index e04ceea..d86a56e 100644
--- a/src/routes/viewer/[country]/[location]/[photo].svelte
+++ b/src/routes/viewer/[country]/[location]/[photo].svelte
@@ -96,69 +96,17 @@
 
 		<div class="buttons">
 			<a href="/choose" class="button-control button-control--dashed">
-				<IconGlobe color="#fff" width="18" />
+				<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
 				<svg>
 					<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
 				</svg>
 			</a>
 			<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
-				<IconCross color="#fff" width="18" className="icon" />
-				<IconCross color="#fff" width="18" className="icon" hidden="true" />
+				<IconCross color="#fff" width="18" class="icon" />
+				<IconCross color="#fff" width="18" class="icon" hidden="true" />
 			</a>
 		</div>
 	</div>
 
 	<Carousel {photos} viewer={true} />
 </section>
-
-
-<!-- <div class="container">
-	<div class="nav content">
-		<a href="/choose" class="button is-info" id="photo_close">Change location</a>
-		<a href="/location/{location.country.slug}/{location.slug}" class="button is-dark" id="photo_close">Close</a>
-	</div>
-
-	<div class="photo">
-		<div class="image">
-			<img src={getThumb(viewerPhotos.current, 'large')} srcset="{getThumb(viewerPhotos.current, 'large')} 1x, {getThumb(viewerPhotos.current, 'large-2x')} 2x" alt="viewerPhotos.current.name">
-		</div>
-		<div class="details content">
-			<strong class="is-size-5">{viewerPhotos.current.name}</strong> <br>
-			<span>{locationFull}</span> <br>
-			<span>{indexFormated}</span> <br>
-			<span>{dayjs(viewerPhotos.current.date).format('MMM Do, YYYY')}</span>
-		</div>
-	</div>
-
-	<div class="section">
-		<div class="level">
-			<div class="level-left">
-				<a href={path + viewerPhotos.prev.slug} id="photo_prev">
-					<div class="media">
-						<div class="media-left">
-							<img src={getThumb(viewerPhotos.prev, 'thumbnail')} alt={viewerPhotos.prev.name} width="200">
-						</div>
-						<div class="media-content content">
-							<strong class="is-size-5">{viewerPhotos.prev.name}</strong> <br>
-							<span>{locationFull}</span>
-						</div>
-					</div>
-				</a>
-			</div>
-
-			<div class="level-right">
-				<a href={path + viewerPhotos.next.slug} id="photo_next">
-					<div class="media">
-						<div class="media-content content has-text-right">
-							<strong class="is-size-5">{viewerPhotos.next.name}</strong> <br>
-							<span>{locationFull}</span>
-						</div>
-						<div class="media-right">
-							<img src={getThumb(viewerPhotos.next, 'thumbnail')} alt={viewerPhotos.next.name} width="200">
-						</div>
-					</div>
-				</a>
-			</div>
-		</div>
-	</div>
-</div> -->