Select Git revision
-
Reiter, Christoph authored
While it's nice to have a fixed chrome version it slows down the yarn install, downloads a lot of things, and the chrome version depends on various system packages so one needss to have chromium installed anyway. This means developers that want to work on tests need firefox and chdomium installed. Sadly I couldn't find a way to make browsers optional in case the developer only has one installed.
Reiter, Christoph authoredWhile it's nice to have a fixed chrome version it slows down the yarn install, downloads a lot of things, and the chrome version depends on various system packages so one needss to have chromium installed anyway. This means developers that want to work on tests need firefox and chdomium installed. Sadly I couldn't find a way to make browsers optional in case the developer only has one installed.
language-select.js 3.10 KiB
import {html, css} from 'lit';
import {createInstance} from './i18n.js';
import * as commonStyles from '@dbp-toolkit/common/styles';
import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
/**
* Emits a dbp-language-changed event where event.detail.lang is the new selected language
*/
export class LanguageSelect extends AdapterLitElement {
constructor() {
super();
this._lang = 'de';
this.languages = ['de', 'en'];
this._i18n = createInstance();
// for the i18next scanner
this._i18n.t('de');
this._i18n.t('de-action');
this._i18n.t('en');
this._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) {
// tell a dbp-provider to update the "lang" property
this.sendSetPropertyEvent('lang', value);
// 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..
this._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(--dbp-hover-base);
color: var(--dbp-hover-text);
transition: none;
}
a {
padding: 0.3em;
display: inline-block;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
color: var(--dbp-text-dark);
}
`
];
}
onClick(e) {
e.preventDefault();
this.lang = this.next;
}
render() {
var linkTitle = this._i18n.t(this.next + '-action');
return html`
<a href="#" title="${linkTitle}" @click=${this.onClick}>${this.next.toUpperCase()}</a>
`;
}
}