blob: e9201ee121a6fcc1572c015680139ee985660e66 [file] [log] [blame]
import {css, html, LitElement} from 'lit';
import {customElement} from 'lit/decorators.js';
import {map} from 'lit/directives/map.js';
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import {msg} from '../../../common/i18n';
import {DIALOG_STYLES} from '../../shared/dialog-styles';
import {SHARED_STYLES} from '../../shared/shared-styles';
import {credits, i18nCredits} from '../../tsCredits';
@customElement('credits-dialog')
export default class CreditsDialog extends LitElement {
static get styles() {
return [
SHARED_STYLES,
DIALOG_STYLES,
css`
dialog {
max-height: 430px;
width: 400px;
}
dialog[open] {
display: flex;
flex-direction: column;
}
.content_area h4 {
margin-bottom: 0;
}
.entry {
position: relative;
}
.entry a.homepage {
position: absolute;
inset-inline-end: 16px;
font-size: 14px;
}
p,
span {
font-size: 14px;
}
p.author {
margin-top: 7px;
}
#translators .name {
font-weight: bold;
}
.createdby {
font-style: italic;
}
`,
];
}
constructor() {
super();
this.addEventListener('show-credits-dialog', this.showDialog);
}
render() {
const translators = map(i18nCredits, (contributor) => {
const languagesArray =
contributor?.languages?.map?.((lang) => lang?.name ?? 'undefined');
const languages =
languagesArray.length > 0 ? ': ' + languagesArray.join(', ') : '';
return html`
<li><span class="name">${contributor?.name}</span>${languages}</li>
`;
});
const homepageMsg = msg('options_credits_homepage');
const creditsByMsg = msg('options_credits_by');
const otherCredits = map(credits, (c) => {
const url = c.url ?
html` <a href=${c?.url} target="_blank" class="homepage">
${homepageMsg}
</a>` :
undefined;
const license = c.license ? ' - ' + c.license : '';
const author = c.author ?
html` <p class="author">${creditsByMsg} ${c.author}${license}</p> ` :
undefined;
return html`
<div class="entry">
${url}
<h4>${c?.name}</h4>
${author}
</div>
`;
});
return html`
<dialog>
<div class="scrollable">
<h3>${msg('options_credits')}</h3>
<div class="entry createdby">
<div>${unsafeHTML(msg('options_credits_createdby'))}</div>
</div>
<div class="entry">
<a href="https://gtranslate.avm99963.com/" class="homepage" target="_blank">
${msg('options_credits_homepage')}
</a>
<h4>${msg('options_credits_translations')}</h4>
<div>${msg('options_credits_translations_paragraph')}</div>
<ul id="translators">
${translators}
</ul>
</div>
<div class="content_area">${otherCredits}</div>
</div>
<div class="action_buttons">
<button id="credits_ok" @click="${this.closeDialog}">
${msg('options_ok')}
</button>
</div>
</dialog>
`;
}
showDialog() {
const dialog = this.renderRoot.querySelector('dialog');
dialog.showModal();
dialog.querySelector('.scrollable').scrollTo(0, 0);
(dialog.querySelector('#credits_ok') as HTMLElement).focus();
}
closeDialog() {
this.renderRoot.querySelector('dialog').close();
}
}