Merge pull request #48 from MathisBurger/feature/translations

MathisBurger · web-flow · commit 6e06763b8222 · 2021-12-08T16:30:44.000+01:00
[TASK] prepared translations
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
+		"@rollup/plugin-json": "^4.1.0",
 		"@sveltejs/adapter-static": "^1.0.0-next.13",
 		"@sveltejs/kit": "^1.0.0-next.195",
 		"@types/cookie": "^0.4.0",
@@ -40,6 +41,7 @@
 		"path": "^0.12.7",
 		"postcss-load-config": "^3.1.0",
 		"sass": "^1.43.4",
-		"svelte-fa": "^2.4.0"
+		"svelte-fa": "^2.4.0",
+		"svelte-i18n": "^3.3.13"
 	}
 }
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -0,0 +1,9 @@
+import { register, init, getLocaleFromHash } from 'svelte-i18n';
+
+register('de', () => import('./translations/en.json'));
+register('en', () => import('./translations/de.json'));
+
+init({
+	fallbackLocale: 'en',
+	initialLocale: getLocaleFromHash('lang')
+});
diff --git a/src/lib/index.component.svelte b/src/lib/index.component.svelte
@@ -1,13 +1,12 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
 <div class="centered">
 	<div class="container">
 		<h1>MathOnWeb</h1>
 		<p>
-			MathOnWeb is an open source web application that executes complex math operations. Therefore
-			it must be very fast to provide an acceptable user experience. This is the reason why it does
-			not use a virtualDOM like React. It uses the default DOM of ES6, supported by the most modern
-			browsers natively. It does not use any type of virtualization. Furthermore it uses Typescript,
-			which is typesafe and has some performance improvements. I would appreciate it, if you
-			suppport this project on
+			{$_('indexText')}
 			<a href="https://github.com/MathisBurger/MathOnWeb">Github</a>
 		</p>
 	</div>
diff --git a/src/lib/navbar.svelte b/src/lib/navbar.svelte
@@ -2,10 +2,26 @@
 	import ThemeSelector from './theme-selector.svelte';
 	import Fa from 'svelte-fa';
 	import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';
+	import { _ } from 'svelte-i18n';
 	let navbarExtended = false;
+
+	/**
+	 * Checks if the user clicked outside of the navbar and the
+	 * navbar gets minimized, if it was extended before.
+	 *
+	 * @param event The PointerEvent triggered by a click
+	 */
+	const handleClick = (event: PointerEvent) => {
+		if (!document.getElementById('navbar').contains(event.target as Node)) {
+			navbarExtended = false;
+		}
+	};
+
+	// Adding click listener to the whole window
+	window.addEventListener('click', handleClick);
 </script>
 
-<div class={`navbar ${navbarExtended ? 'extended' : ''}`}>
+<div id="navbar" class={`navbar ${navbarExtended ? 'extended' : ''}`}>
 	<div
 		class="navbar-toggler"
 		on:click={() => {
@@ -15,10 +31,10 @@
 		<Fa icon={faAlignJustify} />
 	</div>
 	<div class="navbar-menu">
-		<a href="/">Home</a>
-		<a href="/basic">Basic</a>
-		<a href="/vector">Vector</a>
-		<a href="/stochastics">Stochastics</a>
+		<a href="/">{$_('navbar.home')}</a>
+		<a href="/basic">{$_('navbar.basic')}</a>
+		<a href="/vector">{$_('navbar.vector')}</a>
+		<a href="/stochastics">{$_('navbar.stochastics')}</a>
 	</div>
 	<div class="navbar-actions">
 		<ThemeSelector />
diff --git a/src/lib/switch.svelte b/src/lib/switch.svelte
@@ -5,7 +5,7 @@
 	import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 
 	function change(event: any) {
-		onChange(event.target.checked === 'true' ? 'dark' : 'light');
+		onChange(event.target.checked === true ? 'dark' : 'light');
 	}
 </script>
 
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import Navbar from '$lib/navbar.svelte';
 	import { theme } from '../lib/theme';
+	import '../i18n.ts';
+	import { waitLocale } from 'svelte-i18n';
+
+	async function preload() {
+		return waitLocale();
+	}
 </script>
 
 <svelte:head>
@@ -12,5 +18,7 @@
 	/>
 </svelte:head>
 
-<Navbar />
-<slot />
+{#await preload() then _}
+	<Navbar />
+	<slot />
+{/await}
diff --git a/src/routes/basic/calculator.svelte b/src/routes/basic/calculator.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { _ } from 'svelte-i18n';
+
 	let inputString = '0';
 	let lastResult = '0';
 
@@ -19,7 +21,7 @@
 			inputString = eval(inputString);
 			lastResult = inputString;
 		} catch (e) {
-			inputString = 'ERROR';
+			inputString = $_('general.error');
 		}
 	}
 
diff --git a/src/routes/basic/function-solver.svelte b/src/routes/basic/function-solver.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Snackbar from '$lib/snackbar.svelte';
 	import solveFunction from '$lib/solve-function';
+	import { _ } from 'svelte-i18n';
 
 	let func = '';
 	let wanted = '';
@@ -30,8 +31,7 @@
 {/if}
 <div class="centered">
 	<div class="experimental-text">
-		This feature is still experimental!<br />
-		So there are big performance issues and<br /> the results are not 100% trustable.
+		{$_('general.experimental-text')}
 	</div>
 	<div class="container">
 		<div class="function-flex">
@@ -40,7 +40,7 @@
 			<p>=</p>
 			<input class="wanted-input" bind:value={wanted} />
 		</div>
-		<button class="calculate-button" on:click={solve}> Solve </button>
+		<button class="calculate-button" on:click={solve}>{$_('general.calculate')}</button>
 		{#if resultExists}
 			<div class="result-form">
 				{resultText}
diff --git a/src/routes/basic/index.svelte b/src/routes/basic/index.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
 	import ListSelector from '../../lib/listSelector.svelte';
 	import type { ListSelectorElement } from '../../typings/ListSelectorElement';
+	import { _ } from 'svelte-i18n';
 
 	let apps: ListSelectorElement[] = [
-		{ name: 'Calculator', description: 'A basic calculator', route: '/basic/calculator' },
 		{
-			name: 'Triangle completer',
-			description: 'completes a triangle',
+			name: $_('basic.calculator.title'),
+			description: $_('basic.calculator.description'),
+			route: '/basic/calculator'
+		},
+		{
+			name: $_('basic.triangle-completer.title'),
+			description: $_('basic.triangle-completer.description'),
 			route: '/basic/triangle-completer'
 		},
 		{
-			name: 'Function solver',
-			description: 'solves an matn function',
+			name: $_('basic.function-solver.title'),
+			description: $_('basic.function-solver.description'),
 			route: '/basic/function-solver'
 		}
 	];
diff --git a/src/routes/basic/triangle-completer.svelte b/src/routes/basic/triangle-completer.svelte
@@ -2,6 +2,7 @@
 	import { DefaultsProvider } from '$lib/defaults-provider';
 	import Snackbar from '$lib/snackbar.svelte';
 	import solveTriangle from '$lib/triangle-calculator';
+	import { _ } from 'svelte-i18n';
 	let triangle = new DefaultsProvider().getDefaultTriangle();
 	let showSnackbar = false;
 	let errorSnackbar = '';
@@ -72,26 +73,26 @@
 		<div class="input-container">
 			<div class="input-flex">
 				<input class="triangle-input" value="90" disabled />
-				<p>Alpha angle</p>
+				<p>{$_('basic.triangle-completer.alpha-angle')}</p>
 			</div>
 			<div class="input-flex">
 				<input
 					class="triangle-input"
 					on:change={(event) => onChange(event, 'beta')}
 					value={parseAngle(triangle.beta)}
 				/>
-				<p>Beta angle</p>
+				<p>{$_('basic.triangle-completer.beta-angle')}</p>
 			</div>
 			<div class="input-flex">
 				<input
 					class="triangle-input"
 					on:change={(event) => onChange(event, 'gamma')}
 					value={parseAngle(triangle.gamma)}
 				/>
-				<p>Gamma angle</p>
+				<p>{$_('basic.triangle-completer.gamma-angle')}</p>
 			</div>
 		</div>
-		<button class="calculate-button" on:click={solve}>Solve</button>
+		<button class="calculate-button" on:click={solve}>{$_('general.calculate')}</button>
 	</div>
 </div>
 
diff --git a/src/routes/infinite-clicker.svelte b/src/routes/infinite-clicker.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	let x = window.innerWidth / 2;
+	let y = window.innerHeight / 2;
+	let counter = 0;
+	let intervalStarted = false;
+
+	function onClick() {
+		if (counter > 100 && !intervalStarted) {
+			setInterval(() => {
+				document.getElementById('infinite-clicker').click();
+			}, 50);
+			intervalStarted = true;
+		}
+		x = getRandom(50, window.innerWidth - 100);
+		y = getRandom(100, window.innerHeight - 100);
+		counter = counter + 1;
+	}
+
+	function getRandom(min: number, max: number): number {
+		return Math.floor(Math.random() * (max - min + 1) + min);
+	}
+</script>
+
+<div
+	class="infinite-clicker"
+	style={`top: ${y}px; left: ${x}px;`}
+	on:click={onClick}
+	id="infinite-clicker"
+/>
+
+<style lang="scss">
+	@import '../styles/infinite-clicker.scss';
+</style>
diff --git a/src/routes/stochastics/4-field-table-completer.svelte b/src/routes/stochastics/4-field-table-completer.svelte
@@ -3,6 +3,7 @@
 	import FourFieldTable from '$lib/stochastics/four-field-table.component.svelte';
 	import type { FourFieldTableValues } from '$src/typings/four-field-table';
 	import { CompleteTable } from '$lib/stochastics/complete-table';
+	import { _ } from 'svelte-i18n';
 
 	let table: FourFieldTableValues = {
 		AB: null,
@@ -38,7 +39,9 @@
 <div class="centered">
 	<div class="container">
 		<FourFieldTable bind:table />
-		<button class="calculate-button" on:click={onClick}> Complete table </button>
+		<button class="calculate-button" on:click={onClick}
+			>{$_('stochastics.4-field-table.button-text')}</button
+		>
 	</div>
 </div>
 {#if showSnackbar}
diff --git a/src/routes/stochastics/index.svelte b/src/routes/stochastics/index.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { _ } from 'svelte-i18n';
 	import ListSelector from '../../lib/listSelector.svelte';
 	import type { ListSelectorElement } from '../../typings/ListSelectorElement';
 
 	let apps: ListSelectorElement[] = [
 		{
-			name: 'four field table completer',
-			description: 'Completes a four field table',
+			name: $_('stochastics.4-field-table.title'),
+			description: $_('stochastics.4-field-table.description'),
 			route: '/stochastics/4-field-table-completer'
 		}
 	];
diff --git a/src/routes/vector/angle-calculator.svelte b/src/routes/vector/angle-calculator.svelte
@@ -3,6 +3,7 @@
 	import type { Vector } from '../../typings/vector';
 	import { calculateAngleFromVectors } from '$lib/vector/angle-calculator';
 	import { DefaultsProvider } from '$lib/defaults-provider';
+	import { _ } from 'svelte-i18n';
 
 	let resultValue = '';
 	let vectorA = new DefaultsProvider().getVectorDefault();
@@ -35,11 +36,11 @@
 			<VectorInput vector={vectorB} />
 		</div>
 		<button class="calculate-button" on:click={() => calculateAngle(vectorA, vectorB)}
-			>calculate</button
+			>{$_('general.calculate')}</button
 		>
 		<div class="result-form">
 			{#if resultValue != ''}
-				The angle is {resultValue}°
+				{$_('vector.angle-calculator.the-angle-is')} {resultValue}°
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/vector/check-vector-on-line.svelte b/src/routes/vector/check-vector-on-line.svelte
@@ -2,6 +2,7 @@
 	import VectorInput from '$lib/vector-input.svelte';
 	import { generateVectorDependency, checkLinearDependency } from '$lib/vector/vector-dependency';
 	import { DefaultsProvider } from '$lib/defaults-provider';
+	import { _ } from 'svelte-i18n';
 
 	let v1 = new DefaultsProvider().getVectorDefault();
 	let v2 = new DefaultsProvider().getVectorDefault();
@@ -20,13 +21,13 @@
 		let AC = generateVectorDependency(v1, v3);
 		let AD = generateVectorDependency(v1, v4);
 		if (checkLinearDependency(AB, AC)) {
-			resultValue = 'D is not on the line';
+			resultValue = `D ${$_('vector.is-vector-on-line.not-on-line')}`;
 		} else if (checkLinearDependency(AC, AD)) {
-			resultValue = 'B is not on the line';
+			resultValue = `B ${$_('vector.is-vector-on-line.not-on-line')}`;
 		} else if (checkLinearDependency(AB, AD)) {
-			resultValue = 'C is not on the line';
+			resultValue = `C ${$_('vector.is-vector-on-line.not-on-line')}`;
 		} else {
-			resultValue = 'A is not on the line';
+			resultValue = `A ${$_('vector.is-vector-on-line.not-on-line')}`;
 		}
 	}
 </script>
@@ -39,7 +40,7 @@
 			<VectorInput vector={v3} />
 			<VectorInput vector={v4} />
 		</div>
-		<button class="calculate-button" on:click={() => calc()}>calculate</button>
+		<button class="calculate-button" on:click={() => calc()}>{$_('general.calculate')}</button>
 		<div class="result-form">
 			{#if resultValue != ''}
 				{resultValue}
diff --git a/src/routes/vector/generate-line.svelte b/src/routes/vector/generate-line.svelte
@@ -2,6 +2,7 @@
 	import { DefaultsProvider } from '$lib/defaults-provider';
 	import VectorInput from '$lib/vector-input.svelte';
 	import { generateVectorDependency } from '$lib/vector/vector-dependency';
+	import { _ } from 'svelte-i18n';
 
 	let v1 = new DefaultsProvider().getVectorDefault();
 	let v2 = new DefaultsProvider().getVectorDefault();
@@ -23,7 +24,7 @@
 			<VectorInput vector={v1} />
 			<VectorInput vector={v2} />
 		</div>
-		<button class="calculate-button" on:click={() => calc()}>calculate</button>
+		<button class="calculate-button" on:click={() => calc()}>{$_('general.calculate')}</button>
 		<div class="result-form">
 			{#if resultValue != ''}
 				{resultValue}
diff --git a/src/routes/vector/index.svelte b/src/routes/vector/index.svelte
diff --git a/src/routes/vector/linear-checker.svelte b/src/routes/vector/linear-checker.svelte
diff --git a/src/routes/vector/triangle-angle-calculator.svelte b/src/routes/vector/triangle-angle-calculator.svelte
diff --git a/src/styles/infinite-clicker.scss b/src/styles/infinite-clicker.scss
diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss
diff --git a/src/translations/de.json b/src/translations/de.json
diff --git a/src/translations/en.json b/src/translations/en.json
diff --git a/static/theme/light.css b/static/theme/light.css

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';`
`6`	`6`
`7`	`7`	`function change(event: any) {`
`8`		`- onChange(event.target.checked === 'true' ? 'dark' : 'light');`
	`8`	`+ onChange(event.target.checked === true ? 'dark' : 'light');`
`9`	`9`	`}`
`10`	`10`	`</script>`
`11`	`11`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`<script lang="ts">`
	`2`	`+ import { _ } from 'svelte-i18n';`
	`3`	`+`
`2`	`4`	`let inputString = '0';`
`3`	`5`	`let lastResult = '0';`
`4`	`6`
`@@ -19,7 +21,7 @@`
`19`	`21`	`inputString = eval(inputString);`
`20`	`22`	`lastResult = inputString;`
`21`	`23`	`} catch (e) {`
`22`		`- inputString = 'ERROR';`
	`24`	`+ inputString = $_('general.error');`
`23`	`25`	`}`
`24`	`26`	`}`
`25`	`27`