Skip to content
Snippets Groups Projects
Select Git revision
  • e2c5f1df8d244b79c68ad206f209465d16f7105e
  • main default protected
  • renovate/lock-file-maintenance
  • demo protected
  • person-select-custom
  • dbp-translation-component
  • icon-set-mapping
  • port-i18next-parser
  • remove-sentry
  • favorites-and-recent-files
  • revert-6c632dc6
  • lit2
  • advertisement
  • wc-part
  • automagic
  • publish
  • wip-cleanup
  • demo-file-handling
18 results

styles.js

Blame
  • 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>
            `;
        }
    }