Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import {html, css, LitElement} from 'lit-element';
import {i18n} from './i18n.js';
import * as commonStyles from 'vpu-common/styles';
/**
* Emits a vpu-language-changed event where event.detail.lang is the new selected language
*/
export class LanguageSelect extends LitElement {
constructor() {
super();
this._lang = 'de';
this.languages = ['de', 'en'];
this.onExternalChange = this.onExternalChange.bind(this);
// for the i18next scanner
i18n.t('de');
i18n.t('de-action');
i18n.t('en');
i18n.t('en-action');
}
_getNextLanguage(lang) {
var index = this.languages.indexOf(lang);
var next = this.languages[index + 1];
if (typeof next === 'undefined')
next = this.languages[0];
return next;
}
_getPreviousLanguage(lang) {
var index = this.languages.indexOf(lang);
var prev = this.languages[index - 1];
if (typeof prev === 'undefined')
prev = this.languages[this.languages.length - 1];
return prev;
}
static get properties() {
return {
lang: {type: String},
next: {type: String},
languages: {type: Array},
};
}
set lang(value) {
const oldValue = this.lang;
const oldNext = this.next;
this._lang = value;
this.requestUpdate('lang', oldValue);
this.requestUpdate('next', oldNext);
if (oldValue !== value) {
const event = new CustomEvent("vpu-language-changed", {
bubbles: true,
composed: true,
detail: {'lang': value}
});
this.dispatchEvent(event);
// Unlike other cases we use the next language for the translations so that
// users not knowing the current language can understand it.
// In case of more than two this doesn't make that much sense, but for now..
i18n.changeLanguage(this.next);
}
}
get lang() {
return this._lang;
}
set next(value) {
this.lang = this._getPreviousLanguage(value);
}
get next() {
return this._getNextLanguage(this.lang);
}
static get styles() {
// language=css
return [commonStyles.getThemeCSS(),
css`
:host {
display: inline-block;
}
a:hover {
background-color: var(--vpu-dark);
color: var(--vpu-light);
transition: none;
}
a {
padding: 0.3em;
display: inline-block;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
color: var(--vpu-dark);
border-radius: var(--vpu-border-radius);
}
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
}
onExternalChange(e) {
this.lang = e.detail.lang
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('vpu-language-changed', this.onExternalChange);
}
disconnectedCallback() {
document.removeEventListener('vpu-language-changed', this.onExternalChange);
super.disconnectedCallback();
}
onClick(e) {
e.preventDefault();
this.lang = this.next;
}
render() {
var linkTitle = i18n.t(this.next + '-action');
return html`
<a href="#" title="${linkTitle}" @click=${this.onClick}>${this.next.toUpperCase()}</a>
`;
}
}