diff --git a/packages/language-select/src/i18n/de/translation.json b/packages/language-select/src/i18n/de/translation.json
index 5ee4f041a1eaf738ff35cb75b10571e8c4767fe2..625365129e7744b3c3351625f77dae484f24c399 100644
--- a/packages/language-select/src/i18n/de/translation.json
+++ b/packages/language-select/src/i18n/de/translation.json
@@ -1,4 +1,6 @@
{
"de": "Deutsch",
- "en": "Englisch"
+ "en": "Englisch",
+ "de-action": "Auf Deutsch anzeigen",
+ "en-action": "Auf Englisch anzeigen"
}
diff --git a/packages/language-select/src/i18n/en/translation.json b/packages/language-select/src/i18n/en/translation.json
index f8615781a0a69ba9377d94f69937da07af459592..1177302e3a9fad1e64b4d800673db9db0ea25cf8 100644
--- a/packages/language-select/src/i18n/en/translation.json
+++ b/packages/language-select/src/i18n/en/translation.json
@@ -1,4 +1,6 @@
{
"de": "German",
- "en": "English"
+ "en": "English",
+ "de-action": "Switch to German",
+ "en-action": "Switch to English"
}
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 53d05ed7ec6e000912343ecef9b3fa7cb45f300b..21d87172c459d9c01c77318ab82d7c6b6c52841b 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -9,53 +9,83 @@ class LanguageSelect extends LitElement {
constructor() {
super();
- this.lang = 'de';
+ 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');
+ }
- this.onExternalChange = this.onExternalChange.bind(this);
+ _getNextLanguage() {
+ var index = this.languages.indexOf(this.lang);
+ var next = this.languages[index + 1];
+ if (typeof next === 'undefined')
+ next = this.languages[0];
+ return next;
}
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,
+ 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) {
+ }
+
+ get next() {
+ return this._getNextLanguage();
+ }
+
static get styles() {
return css`
- select {
- background:
- linear-gradient(45deg, transparent 50%, black 50%),
- linear-gradient(135deg, black 50%, transparent 50%),
- linear-gradient(to right, white, white);
- background-position:
- calc(100% - 21px) calc(1em + 2px),
- calc(100% - 16px) calc(1em + 2px),
- 100% 0;
- background-size:
- 5px 5px,
- 5px 5px,
- 2.5em 2.5em;
- background-repeat: no-repeat;
-
- border: 1px solid #000;
- line-height: 1.5em;
- padding: 0.5em 3.5em 0.5em 0.5em;
-
- border-radius: 0;
- margin: 0;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-appearance:none;
- -moz-appearance:none;
+ a:hover {
+ background-color: #000;
+ color: #fff;
+ }
+
+ a {
+ padding: 5px;
+ display: inline-block;
+ text-decoration: none;
+ color: #000;
+ transition: background-color 0.15s, color 0.15s;
+ font-weight: 300;
}
`;
- }
+ }
onExternalChange(e) {
this.lang = e.detail.lang
@@ -71,31 +101,15 @@ class LanguageSelect extends LitElement {
super.disconnectedCallback();
}
- update(changedProperties) {
- changedProperties.forEach((oldValue, propName) => {
- if (propName === 'lang') {
- const event = new CustomEvent("vpu-language-changed", {
- bubbles: true,
- detail: {'lang': this.lang},
- });
- this.dispatchEvent(event);
-
- i18n.changeLanguage(this.lang);
- }
- });
-
- super.update(changedProperties);
- }
-
- onSelectChange(e) {
- this.lang = e.target.value;
+ onClick(e) {
+ e.preventDefault();
+ this.lang = this.next;
}
render() {
+ var linkTitle = i18n.t(this.next + '-action');
return html`
- <select @change=${this.onSelectChange}>
- ${this.languages.map(i => html`<option value="${i}" ?selected=${this.lang === i}>${i18n.t(i)}</option>`)}
- </select>
+ <a href="#" title="${linkTitle}" @click=${this.onClick}>${this.next.toUpperCase()}</a>
`;
}
}
diff --git a/packages/language-select/test/unit.js b/packages/language-select/test/unit.js
index ea01a63ee3164b6806bcc5df26204f9e53a28a43..3511aa8aa474549fc6b813d51afd5d05a7dff810 100644
--- a/packages/language-select/test/unit.js
+++ b/packages/language-select/test/unit.js
@@ -3,8 +3,15 @@ import '../src/demo.js';
describe('vpu-language-select basics', () => {
let node;
+ let events = [];
+
+ function handler(e) {
+ events.push(e);
+ }
beforeEach(async () => {
+ events.length = 0;
+ window.addEventListener('vpu-language-changed', handler);
node = document.createElement('vpu-language-select');
document.body.appendChild(node);
await node.updateComplete;
@@ -12,11 +19,21 @@ describe('vpu-language-select basics', () => {
afterEach(() => {
node.remove();
+ window.removeEventListener('vpu-language-changed', handler);
});
it('should render', () => {
expect(node).to.have.property('shadowRoot');
});
+
+ it('change language events', () => {
+ node.lang = 'en';
+ expect(node.next).to.equal('de');
+ expect(events.length).to.equal(1);
+ node.lang = 'de';
+ expect(node.next).to.equal('en');
+ expect(events.length).to.equal(2);
+ });
});
describe('vpu-language-select demo', () => {