From 90d13d31f5faca5b081c7198d475b5a1aa4a56f8 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Tue, 18 Oct 2022 12:35:50 +0200
Subject: [PATCH] feat: create language picker

---
 src/App.vue                   |  7 ---
 src/assets/lang/en-US.svg     |  2 +
 src/assets/lang/fr-FR.svg     |  2 +
 src/components/Footer.vue     |  7 +--
 src/components/Home.vue       | 17 ++++++-
 src/components/LangPicker.vue | 90 +++++++++++++++++++++++++++++++++++
 6 files changed, 114 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/lang/en-US.svg
 create mode 100644 src/assets/lang/fr-FR.svg
 create mode 100644 src/components/LangPicker.vue

diff --git a/src/App.vue b/src/App.vue
index 140358d..198891d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,13 +52,6 @@ export default class App extends Vue {
 			return;
 		}
 		picker.select(tID.Vue, false);
-
-		// change app language
-		if( navigator.language.indexOf('fr') > -1 ){
-			this.$i18n.locale = Locales.FR;
-		} else {
-			this.$i18n.locale = Locales.EN;
-		}
 	}
 
 }
diff --git a/src/assets/lang/en-US.svg b/src/assets/lang/en-US.svg
new file mode 100644
index 0000000..164cd39
--- /dev/null
+++ b/src/assets/lang/en-US.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4.2333mm" height="2.8699mm" version="1.1" viewBox="0 0 4.2333 2.8699" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-129.22 -199.04)"><g fill="#4758a9" stroke-linejoin="round" stroke-width=".18286"><path d="m129.53 199.04c-0.17335 0-0.31264 0.13929-0.31264 0.31264v2.2428c0 0.17334 0.13929 0.31315 0.31264 0.31315h3.6075c0.17336 0 0.31316-0.1398 0.31316-0.31315v-2.2428c0-0.17336-0.1398-0.31264-0.31316-0.31264h-2.5089z" style="paint-order:fill markers stroke"/><path d="m129.53 199.04c-0.17335 0-0.31264 0.13929-0.31264 0.31264v2.2428c0 0.17334 0.13929 0.31315 0.31264 0.31315h3.6075c0.17336 0 0.31316-0.1398 0.31316-0.31315v-2.2428c0-0.17336-0.1398-0.31264-0.31316-0.31264h-2.5089z" style="paint-order:fill markers stroke"/><path d="m129.53 199.04c-0.17335 0-0.31264 0.13929-0.31264 0.31264v2.2428c0 0.17334 0.13929 0.31315 0.31264 0.31315h3.6075c0.17336 0 0.31316-0.1398 0.31316-0.31315v-2.2428c0-0.17336-0.1398-0.31264-0.31316-0.31264h-2.5089z" style="paint-order:fill markers stroke"/><path d="m129.53 199.04c-0.17335 0-0.31264 0.13929-0.31264 0.31264v2.2428c0 0.17334 0.13929 0.31315 0.31264 0.31315h3.6075c0.17336 0 0.31316-0.1398 0.31316-0.31315v-2.2428c0-0.17336-0.1398-0.31264-0.31316-0.31264h-2.5089z" style="paint-order:fill markers stroke"/></g><path d="m129.53 199.04c-5e-3 0-0.0107 2.4e-4 -0.016 5.1e-4 -5e-3 2.7e-4 -0.0108 5.5e-4 -0.016 1e-3 -0.0105 1e-3 -0.0121 1e-3 -0.0223 3e-3l-0.2339 0.1837c-4e-3 9e-3 -7e-3 0.0212-0.0101 0.031-3e-3 0.01-6e-3 0.0198-8e-3 0.03s-4e-3 0.0205-5e-3 0.031c-4e-4 4e-3 -2.6e-4 8e-3 -5.1e-4 0.0119l1.6867 1.142-1.6857 1.1426c2.4e-4 4e-3 1.6e-4 7e-3 5.2e-4 0.0109 1e-3 0.0105 3e-3 0.0208 5e-3 0.031s5e-3 0.0202 8e-3 0.03c3e-3 0.01 6e-3 0.0222 0.0101 0.0315l0.22517 0.18244c0.0102 2e-3 0.0205 4e-3 0.031 5e-3 5e-3 5.3e-4 0.0107 7.6e-4 0.016 1e-3 5e-3 2.7e-4 0.0106 5.2e-4 0.016 5.2e-4h0.11627l1.6878-1.1431 1.6888 1.1431h0.11472c5e-3 0 0.0107-2.5e-4 0.016-5.2e-4 5e-3 -2.7e-4 0.0108-5.3e-4 0.016-1e-3 0.0105-1e-3 0.0208-3e-3 0.031-5e-3l0.22219-0.18144c4e-3 -9e-3 0.0108-0.0216 0.0137-0.0314 3e-3 -0.01 6e-3 -0.0198 8e-3 -0.03s4e-3 -0.0205 5e-3 -0.031c3.6e-4 -4e-3 2.7e-4 -7e-3 5.1e-4 -0.0109l-1.6867-1.1431 1.6862-1.142c-2.5e-4 -4e-3 -1.3e-4 -8e-3 -5.2e-4 -0.0119-1e-3 -0.0105-3e-3 -0.0208-5e-3 -0.031s-5e-3 -0.0202-8e-3 -0.03c-3e-3 -0.01-9e-3 -0.0212-0.0126-0.0305l-0.2333-0.1846c-0.0102-2e-3 -0.011-3e-3 -0.0215-4e-3 -5e-3 -5.3e-4 -0.0107-7.7e-4 -0.016-1e-3 -5e-3 -2.7e-4 -0.0106-5.1e-4 -0.016-5.1e-4h-0.11679l-1.6872 1.1431-1.6867-1.1431z" color="#000000" fill="#fff" style="paint-order:stroke fill markers"/><path d="m129.48 199.04c-3e-3 5.1e-4 -6e-3 1e-3 -9e-3 2e-3 -5e-3 1e-3 -0.0105 2e-3 -0.0155 4e-3 -5e-3 1e-3 -0.01 3e-3 -0.0145 4e-3 -5e-3 2e-3 -0.0102 3e-3 -0.015 5e-3 -5e-3 2e-3 -9e-3 3e-3 -0.0145 5e-3 -9e-3 4e-3 -0.0185 9e-3 -0.0274 0.0134-9e-3 5e-3 -0.0175 0.01-0.0258 0.0155-8e-3 6e-3 -0.0161 0.0117-0.0238 0.0181-8e-3 6e-3 -0.0152 0.013-0.0222 0.0201-7e-3 7e-3 -0.0138 0.0145-0.0202 0.0222-6e-3 8e-3 -0.0125 0.0155-0.0181 0.0238-6e-3 8e-3 -0.0107 0.017-0.0155 0.0258-4e-3 8e-3 -9e-3 0.0163-0.0124 0.0248l1.8397 1.2459-1.8386 1.2459c4e-3 8e-3 8e-3 0.0164 0.0119 0.0243 5e-3 9e-3 0.01 0.0175 0.0155 0.0258 6e-3 8e-3 0.0117 0.0166 0.0181 0.0243 6e-3 8e-3 0.0131 0.0151 0.0202 0.0222 7e-3 7e-3 0.0145 0.0138 0.0222 0.0202 8e-3 6e-3 0.0155 0.0125 0.0238 0.0181 8e-3 6e-3 0.017 0.0107 0.0258 0.0155 9e-3 5e-3 0.018 9e-3 0.0274 0.0129 5e-3 2e-3 9e-3 4e-3 0.014 6e-3s0.0101 4e-3 0.015 5e-3c5e-3 2e-3 9e-3 3e-3 0.0145 4e-3 5e-3 1e-3 0.0104 3e-3 0.0155 4e-3 3e-3 5.6e-4 6e-3 1e-3 8e-3 2e-3l1.8583-1.2588 1.8588 1.2588c3e-3 -4.6e-4 5e-3 -5.5e-4 8e-3 -1e-3 5e-3 -1e-3 0.0105-2e-3 0.0155-4e-3 5e-3 -1e-3 0.01-3e-3 0.0145-4e-3 5e-3 -2e-3 0.0102-3e-3 0.015-5e-3 5e-3 -2e-3 9e-3 -4e-3 0.014-6e-3 9e-3 -4e-3 0.0185-8e-3 0.0274-0.0129 9e-3 -5e-3 0.0175-0.01 0.0258-0.0155 8e-3 -6e-3 0.0166-0.0117 0.0243-0.0181 8e-3 -6e-3 0.0151-0.013 0.0222-0.0202 7e-3 -7e-3 0.0138-0.0145 0.0202-0.0222 6e-3 -8e-3 0.0125-0.016 0.0181-0.0243 6e-3 -8e-3 0.0107-0.017 0.0155-0.0258 4e-3 -8e-3 8e-3 -0.016 0.0114-0.0243l-1.8386-1.2459 1.8392-1.2459c-4e-3 -9e-3 -7e-3 -0.0171-0.0119-0.0253-5e-3 -9e-3 -0.01-0.0175-0.0155-0.0258-6e-3 -8e-3 -0.0117-0.0161-0.0181-0.0238-6e-3 -8e-3 -0.0131-0.0152-0.0202-0.0222-7e-3 -7e-3 -0.0145-0.0138-0.0222-0.0202-8e-3 -6e-3 -0.016-0.0125-0.0243-0.0181-8e-3 -6e-3 -0.017-0.0107-0.0258-0.0155-9e-3 -5e-3 -0.018-9e-3 -0.0274-0.0134-9e-3 -4e-3 -0.0191-7e-3 -0.0289-0.0103-5e-3 -2e-3 -9e-3 -3e-3 -0.0145-4e-3 -5e-3 -1e-3 -0.0104-3e-3 -0.0155-4e-3 -3e-3 -5.8e-4 -6e-3 -1e-3 -9e-3 -2e-3l-1.8583 1.2594z" color="#000000" fill="#ed5565" stroke-width=".2" style="paint-order:stroke fill markers"/><path d="m131.65 199.04h-0.634v1.117h-1.7995v0.634h1.7995v1.1175h0.634v-1.1175h1.7999v-0.634h-1.7999z" color="#000000" fill="#ed5565" stroke-width=".232" style="paint-order:stroke fill markers"/><path d="m130.9 199.04v1.002h-1.6831v0.23048h1.9156v-1.2325zm0.63407 0v1.2325h1.9162v-0.23048h-1.6836v-1.002zm-2.3172 1.6356v0.23047h1.6831v1.0025h0.23254v-1.233zm2.3172 0v1.233h0.23254v-1.0025h1.6836v-0.23047z" color="#000000" fill="#fff" fill-opacity=".93333" style="paint-order:stroke fill markers"/></g></svg>
diff --git a/src/assets/lang/fr-FR.svg b/src/assets/lang/fr-FR.svg
new file mode 100644
index 0000000..64428e2
--- /dev/null
+++ b/src/assets/lang/fr-FR.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4.2333mm" height="2.8687mm" version="1.1" viewBox="0 0 4.2333 2.8687" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-129.22 -199.04)"><g transform="matrix(.22857 0 0 .22857 99.684 154.49)" stroke-linejoin="round"><path d="m130.59 194.88c-0.75842 0-1.3689 0.61052-1.3689 1.3689v9.8128c0 0.75839 0.61048 1.3689 1.3689 1.3689h4.8044v-12.551z" fill="#4758a9" stroke-width=".8" style="paint-order:fill markers stroke"/><path d="m141.57 194.88v12.551h4.8044c0.75843 0 1.3694-0.61048 1.3694-1.3689v-9.8128c0-0.75843-0.611-1.3689-1.3694-1.3689z" fill="#ed5565" stroke-width=".8" style="paint-order:fill markers stroke"/><rect x="135.39" y="194.88" width="6.1737" height="12.551" fill="#fff" stroke-width=".81063" style="paint-order:fill markers stroke"/></g></g></svg>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 55b751d..539208e 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -13,9 +13,10 @@
 			<img class='logo' src='../assets/home/logo.svg'/>
 
 			<div class='contact'>
-				<span class='tel'>(+33) 06 69 05 19 10</span>
-				<span class='mail'>xdrm.dev@gmail.com</span>
-				<span class='addr'>Montauban, 82000</span>
+				<span>xdrm.io</span>
+				<span>(+33) 06 69 05 19 10</span>
+				<span>xdrm.dev@gmail.com</span>
+				<span>Montauban, 82000</span>
 			</div>
 		</footer>
 
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 2e13180..01201e7 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -7,6 +7,7 @@
 			<span class='addr'>Montauban, 82000</span>
 		</div>
 
+		<LangPicker />
 
 		<img class='logo' src='../assets/home/logo.svg'/>
 
@@ -40,9 +41,11 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { go } from '@/service/scroller';
 import { TypeWriter } from '@/service/typewriter';
+import LangPicker from './LangPicker.vue';
+LangPicker
 
 @Component({
-	components: {},
+	components: { LangPicker },
 })
 export default class Home extends Vue {
 	protected scrollNext() {
@@ -147,8 +150,20 @@ export default class Home extends Vue {
 		color: #9ea6b3;
 		font-size: 1.2em;
 		font-weight: 400;
+
 	}
 
+	.lang-picker {
+		display: block;
+		position: absolute;
+			top: 0;
+			right: 0;
+
+		margin-top: 1em;
+		margin-right: 1em;
+
+		font-size: 1.2em;
+	}
 
 	.logo {
 		grid-column: 2;
diff --git a/src/components/LangPicker.vue b/src/components/LangPicker.vue
new file mode 100644
index 0000000..80dec83
--- /dev/null
+++ b/src/components/LangPicker.vue
@@ -0,0 +1,90 @@
+<template>
+	<div class='lang-picker'>
+		<div @click='current = locales[0]'>
+			<img src='../assets/lang/en-US.svg' :data-active='current == locales[0]'/>
+		</div>
+		<div @click='current = locales[1]'>
+			<img src='../assets/lang/fr-FR.svg' :data-active='current == locales[1]'/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { Locales } from '@/locales';
+
+// Define the props by using Vue's canonical way.
+const LangPickerProps = Vue.extend({
+  props: {
+    name: String
+  }
+})
+
+@Component({})
+export default class LangPicker extends LangPickerProps {
+	private locales: Locales[] = [Locales.EN, Locales.FR];
+
+	get current(): string {
+		return this.$i18n.locale;
+	}
+	set current(l: string) {
+		localStorage.setItem("lang", l);
+		this.$i18n.locale = l;
+	}
+
+	private mounted() {
+		const ls = localStorage.getItem("lang") as Locales|null;
+
+		// already selected a language, stay with it
+		if( ls != null && this.locales.indexOf(ls) >= 0 ){
+			this.current = ls;
+			return;
+		}
+
+		// otherwise, go with the navigator's default
+		if( navigator.language.indexOf('fr') > -1 ){
+			this.current = Locales.FR;
+		} else {
+			this.current = Locales.EN;
+		}
+	}
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+	.lang-picker {
+		display: flex;
+		position: relative;
+
+		flex: row nowrap;
+
+		img {
+			display: inline-block;
+			width: 2em;
+			margin-right: .5em;
+
+			cursor: pointer;
+
+			transform-style: preserve-3d;
+			transition: filter .1s ease-in-out;
+
+			filter: grayscale(70%);
+
+			&[data-active=true]{
+				filter: grayscale(0);
+			}
+
+			&:not([data-active=true]):hover {
+			filter: grayscale(40%);
+			}
+		}
+
+		& div:last-child > img {
+			margin: 0;
+		}
+	}
+
+</style>