106 lines
2.7 KiB
Svelte
106 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import type { Handle, RequestEvent, ResolveOptions } from '@sveltejs/kit';
|
|
import type { CurrentLanguage } from '$lib/types';
|
|
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
|
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
|
|
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
|
let langSelectOpen = false;
|
|
let langSelect: Element;
|
|
export let currentLanguage: CurrentLanguage = 'en';
|
|
|
|
function setOpen() {
|
|
langSelectOpen = !langSelectOpen;
|
|
|
|
const animationLanguage = langSelect.animate([{ width: '0px' }, { width: '200px' }], {
|
|
duration: 100,
|
|
fill: 'both'
|
|
});
|
|
if (langSelectOpen) {
|
|
animationLanguage.play();
|
|
// animateConatiner.play();
|
|
} else {
|
|
animationLanguage.reverse();
|
|
// animateConatiner.reverse();
|
|
}
|
|
}
|
|
|
|
function setLanguage(value: CurrentLanguage) {
|
|
currentLanguage = value;
|
|
}
|
|
|
|
svgCore.library.add(svgIcons.faGlobeEurope);
|
|
|
|
const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
|
|
const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);
|
|
const buttonLabel: { [key: CurrentLanguage[number]]: string } = {
|
|
it: 'seleziona la lingua',
|
|
en: 'select language'
|
|
};
|
|
</script>
|
|
|
|
<div class="language-selector">
|
|
<button on:click={setOpen}>
|
|
<FontAwesomeIcon icon={globeDefinition} size="2x" /><span>{buttonLabel[currentLanguage]}</span
|
|
></button
|
|
>
|
|
<div class="button-container" bind:this={langSelect}>
|
|
<button
|
|
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
|
on:click={() => setLanguage('it')}
|
|
title="attiva lingua italiana">it</button
|
|
>
|
|
<button
|
|
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
|
on:click={() => setLanguage('en')}
|
|
title="enable english language">en</button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '../../app.scss';
|
|
.language-selector {
|
|
display: flex;
|
|
position: fixed;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: $basecolor2;
|
|
border-radius: $default-border-radius;
|
|
font-size: 50px;
|
|
border-bottom: solid $border-hover-color 1px;
|
|
border-left: solid $border-hover-color 1px;
|
|
bottom: 70px;
|
|
right: 0;
|
|
}
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 0px;
|
|
overflow: hidden;
|
|
}
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
width: 60px;
|
|
height: 50px;
|
|
span {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
}
|
|
.custom-button {
|
|
width: 100px;
|
|
font-size: large;
|
|
}
|
|
.custom-button-active {
|
|
background-color: $default-active-color;
|
|
outline: solid 1px;
|
|
}
|
|
</style>
|