blob: 4265d50cc6970560433f9e7859259d8d00dfba78 [file] [log] [blame]
Adrià Vilanova Martíneze5263f12022-05-29 19:22:13 +02001import {css, html, LitElement} from 'lit';
2import {map} from 'lit/directives/map.js';
3
4import {isoLangs} from '../../../common/consts.js';
5import {msg} from '../../../common/i18n.js';
6import {SHARED_STYLES} from '../../shared/shared-styles.js';
7
8import AddLanguageDialog from './add-language-dialog.js';
9
10export class LanguagesEditor extends LitElement {
11 static properties = {
12 languages: {type: Object},
13 };
14
15 static get styles() {
16 return [
17 SHARED_STYLES,
18 css`
19 #languages_container {
20 width: 300px;
21 height: 250px;
22 border: 1px solid #ccc;
Adrià Vilanova Martínezb9180ef2022-05-29 20:26:43 +020023 background-color: #fafafa;
Adrià Vilanova Martíneze5263f12022-05-29 19:22:13 +020024 overflow: auto;
25 }
26
27 #languages {
28 list-style: none;
29 margin: 0;
30 padding: 0;
31 }
32
33 #languages li {
34 display: flex;
35 flex-direction: row;
36 align-items: center;
37 padding: 15px;
38 border-bottom: 1px dashed #ddd;
Adrià Vilanova Martínezb9180ef2022-05-29 20:26:43 +020039 background-color: white;
Adrià Vilanova Martíneze5263f12022-05-29 19:22:13 +020040 -webkit-user-select: none;
41 }
42
43 #languages li .label {
44 flex-grow: 1;
45 }
46
47 #languages li .delete {
48 font-size: 18px;
49 color: red;
50 padding-left: 2px;
51 margin-left: 2px;
52 }
53
54 #languages li .movebtn {
55 font-size: 16px;
56 color: blue;
57 padding: 0 2px;
58 margin: 0 2px;
59 }
60
61 #languages li :is(.delete, .movebtn) {
62 cursor: pointer;
63 text-align: center;
64 }
65
66 #languages li .movebtn--disabled {
67 color: gray;
68 cursor: not-allowed;
69 }
70
71 #languages_footer {
72 width: 300px;
73 height: 35px;
74 background-color: #fff;
75 border: 1px solid #ccc;
76 border-top: 0;
77 }
78
79 #languages_add {
80 margin-inline-start: 4px;
81 margin-top: 4px;
82 }
83 `,
84 ];
85 }
86
87 constructor() {
88 super();
89 this.addEventListener('show-credits-dialog', this.showDialog);
90 this.sortable = undefined;
91 }
92
93 render() {
94 let languageCodes = Object.values(this.languages ?? {});
95 let languageList = map(languageCodes, (lang, i) => {
96 let moveBtns = [];
97 if (i != 0) {
98 moveBtns.push(html`
99 <button
100 class="notbtn movebtn"
101 @click=${() => this.swapLanguages(i, i - 1)}>
102
103 </button>
104 `);
105 } else {
106 moveBtns.push(html`
107 <button class="notbtn movebtn movebtn--disabled">
108
109 </button>
110 `);
111 }
112 if (i != languageCodes.length - 1) {
113 moveBtns.push(html`
114 <button
115 class="notbtn movebtn"
116 @click=${() => this.swapLanguages(i, i + 1)}>
117
118 </button>
119 `);
120 } else {
121 moveBtns.push(html`
122 <button class="notbtn movebtn movebtn--disabled">
123
124 </button>
125 `);
126 }
127
128 return html`
129 <li data-id=${lang}>
130 <span class="label">
131 ${isoLangs?.[lang]?.['name']} (${isoLangs?.[lang]?.nativeName})
132 </span>
133 ${moveBtns}
134 <button
135 class="notbtn delete"
136 @click=${() => this.deleteLanguage(lang)}>
137 ×
138 </button>
139 </li>
140 `;
141 });
142
143 return html`
144 <div id="languages_container">
145 <ul id="languages">${languageList}</ul>
146 </div>
147 <div id="languages_footer">
148 <button @click=${this.showAddLanguageDialog} id="languages_add">
149 ${msg('options_addlanguage_addbutton')}
150 </button>
151 </div>
152
153 <add-language-dialog .languages=${this.languages}></add-language-dialog>
154 `;
155 }
156
157 showAddLanguageDialog() {
158 const e = new CustomEvent(
159 'show-add-language-dialog', {bubbles: true, composed: true});
160 this.renderRoot.querySelector('add-language-dialog').dispatchEvent(e);
161 }
162
163 save(languageCodes) {
164 let translateinto = Object.assign({}, languageCodes);
165 chrome.storage.sync.set({translateinto});
166 }
167
168 deleteLanguage(deleteLang) {
169 let languageCodes =
170 Object.values(this.languages ?? {}).filter(lang => lang != deleteLang);
171 this.save(languageCodes);
172 }
173
174 swapLanguages(i, j) {
175 let languageCodes = Object.values(this.languages ?? {});
176 if (i >= languageCodes.length || j >= languageCodes.length || i < 0 ||
177 j < 0) {
178 console.error(
179 'Can\'t swap languages because the indexes are out of the range.');
180 return;
181 }
182 let tmp = languageCodes[j];
183 languageCodes[j] = languageCodes[i];
184 languageCodes[i] = tmp;
185 this.save(languageCodes);
186 }
187}
188customElements.define('languages-editor', LanguagesEditor);