Skip to content
Snippets Groups Projects
Select Git revision
  • e9daae6f21c506fa323ef0cfc64bad1cb65b3a28
  • 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

karma.common.conf.js

Blame
    • Reiter, Christoph's avatar
      2e099bc0
      Stop depending on puppeteer · 2e099bc0
      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.
      2e099bc0
      History
      Stop depending on puppeteer
      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.
    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>
            `;
        }
    }