Adrià Vilanova Martínez | a197d86 | 2022-05-27 17:33:20 +0200 | [diff] [blame] | 1 | import Sortable from 'sortablejs/modular/sortable.core.esm.js'; |
| 2 | |
| 3 | import {isoLangs} from '../common/consts.js'; |
| 4 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 5 | import credits from './credits.json5'; |
| 6 | import i18nCredits from './i18n-credits.json5'; |
| 7 | |
Adrià Vilanova Martínez | a197d86 | 2022-05-27 17:33:20 +0200 | [diff] [blame] | 8 | let sortable; |
| 9 | |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 10 | function $(selector) { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 11 | return document.querySelector(selector); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 12 | } |
| 13 | |
| 14 | function $all(selector) { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 15 | return document.querySelectorAll(selector); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 16 | } |
| 17 | |
| 18 | function isEmpty(obj) { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 19 | return Object.keys(obj).length === 0; |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 20 | } |
| 21 | |
| 22 | function i18n() { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 23 | $all('[data-i18n]').forEach(el => { |
| 24 | el.innerHTML = |
| 25 | chrome.i18n.getMessage('options_' + el.getAttribute('data-i18n')); |
| 26 | }); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 27 | } |
| 28 | |
avm99963 | ce257a9 | 2020-12-27 00:07:13 +0100 | [diff] [blame] | 29 | function printListModal() { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 30 | $('#select_language').textContent = ''; |
| 31 | var heysortable = sortable.toArray(); |
avm99963 | 0f96116 | 2020-12-27 13:12:27 +0100 | [diff] [blame] | 32 | var languages = []; |
| 33 | for (var langCode of Object.keys(isoLangs)) { |
| 34 | var l = isoLangs[langCode]; |
| 35 | l['code'] = langCode; |
| 36 | languages.push(l); |
| 37 | } |
| 38 | |
| 39 | languages.sort((a, b) => a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)); |
| 40 | languages.forEach(language => { |
| 41 | if (!inArray(language['code'], heysortable)) { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 42 | var el = document.createElement('option'); |
avm99963 | 0f96116 | 2020-12-27 13:12:27 +0100 | [diff] [blame] | 43 | el.setAttribute('value', language['code']); |
| 44 | el.textContent = language['name'] + ' (' + language['nativeName'] + ')'; |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 45 | $('#select_language').appendChild(el); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 46 | } |
avm99963 | 0f96116 | 2020-12-27 13:12:27 +0100 | [diff] [blame] | 47 | }); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 48 | } |
| 49 | |
| 50 | function init() { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 51 | i18n(); |
| 52 | chrome.storage.sync.get(null, items => { |
| 53 | // If no settings are set |
| 54 | if (isEmpty(items)) { |
| 55 | items = { |
| 56 | translateinto: {}, |
avm99963 | 8824b8a | 2021-01-10 18:25:12 +0100 | [diff] [blame] | 57 | uniquetab: 'popup', |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 58 | }; |
| 59 | chrome.storage.sync.set(items); |
| 60 | } |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 61 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 62 | // Check the checkbox of the window opening |
| 63 | if (items.uniquetab === 'yep') $('#uniquetab').checked = true; |
| 64 | if (items.uniquetab === '') $('#varioustabs').checked = true; |
avm99963 | 8824b8a | 2021-01-10 18:25:12 +0100 | [diff] [blame] | 65 | if (items.uniquetab === 'panel' || items.uniquetab === 'popup') |
| 66 | $('#popup').checked = true; |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 67 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 68 | // Add event listeners for certain buttons and links |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 69 | $('#save').addEventListener('click', _ => { |
avm99963 | a003641 | 2020-12-29 13:39:05 +0100 | [diff] [blame] | 70 | saveOptions(true); |
| 71 | }); |
| 72 | |
| 73 | // Save automatically |
| 74 | $all('input[type="radio"]').forEach(radio => { |
| 75 | radio.addEventListener('change', _ => { |
| 76 | saveOptions(); |
| 77 | }); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 78 | }); |
| 79 | |
| 80 | // Print selected language list |
| 81 | var languages = items.translateinto; |
| 82 | |
| 83 | if (languages) { |
| 84 | for (var language_id of Object.keys(languages)) { |
| 85 | var language = languages[language_id]; |
| 86 | var el = document.createElement('li'); |
| 87 | el.setAttribute('data-language', language); |
| 88 | el.setAttribute('data-id', language); |
| 89 | el.innerHTML = isoLangs[language]['name'] + ' (' + |
| 90 | isoLangs[language]['nativeName'] + ')' + |
| 91 | '<span data-language=\'' + language + |
| 92 | '\' class=\'delete\'>x</span>'; |
| 93 | $('#languages').appendChild(el); |
| 94 | $('#languages li[data-language=' + language + '] .delete') |
| 95 | .addEventListener('click', function() { |
| 96 | $('#languages') |
| 97 | .removeChild($( |
| 98 | 'li[data-language=' + this.getAttribute('data-language') + |
| 99 | ']')); |
| 100 | printListModal(); |
avm99963 | a003641 | 2020-12-29 13:39:05 +0100 | [diff] [blame] | 101 | // Save automatically |
| 102 | saveOptions(); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 103 | }); |
| 104 | } |
| 105 | } |
| 106 | |
| 107 | // Initiate Sortable |
| 108 | sortable = new Sortable($('#languages'), {animation: 150}); |
| 109 | |
| 110 | // Handling The Dialog |
| 111 | $('#languages_add').addEventListener('click', _ => { |
| 112 | $('dialog#languages_add_dialog').showModal(); |
| 113 | $('#select_language').focus(); |
| 114 | }); |
| 115 | |
| 116 | $('#languages_add_cancel').addEventListener('click', _ => { |
| 117 | $('dialog#languages_add_dialog').close(); |
| 118 | }); |
| 119 | |
| 120 | $('#languages_add_ok').addEventListener('click', _ => { |
| 121 | var el = document.createElement('li'); |
| 122 | var language = $('#select_language').value; |
| 123 | if (inArray(language, sortable.toArray())) { |
| 124 | return; |
| 125 | } |
| 126 | el.setAttribute('data-language', language); |
| 127 | el.setAttribute('data-id', language); |
| 128 | el.innerHTML = isoLangs[language]['name'] + ' (' + |
| 129 | isoLangs[language]['nativeName'] + ')' + |
| 130 | '<span data-language=\'' + language + '\' class=\'delete\'>x</span>'; |
| 131 | $('#languages').appendChild(el); |
| 132 | var selection = $('#select_language option[value=' + language + ']'); |
| 133 | selection.parentNode.removeChild(selection); |
| 134 | $('#languages li[data-id=' + language + '] .delete') |
| 135 | .addEventListener('click', function() { |
| 136 | $('#languages') |
| 137 | .removeChild( |
| 138 | $('li[data-language=' + this.getAttribute('data-language') + |
| 139 | ']')); |
| 140 | printListModal(); |
avm99963 | a003641 | 2020-12-29 13:39:05 +0100 | [diff] [blame] | 141 | // Save automatically |
| 142 | saveOptions(); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 143 | }); |
| 144 | $('dialog').close(); |
avm99963 | a003641 | 2020-12-29 13:39:05 +0100 | [diff] [blame] | 145 | |
| 146 | // Save automatically |
| 147 | saveOptions(); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 148 | }); |
| 149 | |
| 150 | // About credits... |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 151 | var content = $('dialog#credits_dialog .content_area'); |
| 152 | credits.forEach(item => { |
| 153 | var div = document.createElement('div'); |
| 154 | div.classList.add('entry'); |
| 155 | if (item.url) { |
| 156 | var a = document.createElement('a'); |
| 157 | a.classList.add('homepage'); |
| 158 | a.href = item.url; |
| 159 | a.target = '_blank'; |
| 160 | a.textContent = chrome.i18n.getMessage('options_credits_homepage'); |
| 161 | div.append(a); |
| 162 | } |
avm99963 | 9bbb3a4 | 2020-12-29 03:29:44 +0100 | [diff] [blame] | 163 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 164 | var h4 = document.createElement('h4'); |
| 165 | h4.textContent = item.name; |
| 166 | div.append(h4); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 167 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 168 | if (item.author) { |
| 169 | var p = document.createElement('p'); |
| 170 | p.classList.add('author'); |
| 171 | p.textContent = chrome.i18n.getMessage('options_credits_by') + ' ' + |
| 172 | item.author + (item.license ? ' - ' + item.license : ''); |
| 173 | div.append(p); |
| 174 | } |
| 175 | content.append(div); |
| 176 | }); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 177 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 178 | var cList = document.getElementById('translators'); |
| 179 | i18nCredits.forEach(contributor => { |
| 180 | var li = document.createElement('li'); |
| 181 | var languages = []; |
| 182 | if (contributor.languages) { |
| 183 | contributor.languages.forEach(lang => { |
| 184 | languages.push(lang.name || 'undefined'); |
| 185 | }); |
| 186 | } |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 187 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 188 | var name = document.createElement('span'); |
| 189 | name.classList.add('name'); |
| 190 | name.textContent = contributor.name || 'undefined'; |
| 191 | li.append(name); |
avm99963 | 9bbb3a4 | 2020-12-29 03:29:44 +0100 | [diff] [blame] | 192 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 193 | if (languages.length > 0) { |
| 194 | var languages = document.createTextNode(': ' + languages.join(', ')); |
| 195 | li.append(languages); |
| 196 | } |
avm99963 | 9bbb3a4 | 2020-12-29 03:29:44 +0100 | [diff] [blame] | 197 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 198 | cList.append(li); |
| 199 | }); |
avm99963 | 9bbb3a4 | 2020-12-29 03:29:44 +0100 | [diff] [blame] | 200 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 201 | window.onhashchange = function() { |
| 202 | if (location.hash == '#credits') { |
| 203 | var credits = document.getElementById('credits_dialog'); |
| 204 | credits.showModal(); |
| 205 | credits.querySelector('.scrollable').scrollTo(0, 0); |
| 206 | $('#credits_ok').focus(); |
| 207 | } |
| 208 | }; |
avm99963 | 9bbb3a4 | 2020-12-29 03:29:44 +0100 | [diff] [blame] | 209 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 210 | if (location.hash == '#credits') { |
| 211 | $('dialog#credits_dialog').showModal(); |
| 212 | $('#credits_ok').focus(); |
| 213 | } |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 214 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 215 | $('#credits_ok').addEventListener('click', _ => { |
| 216 | $('dialog#credits_dialog').close(); |
| 217 | }); |
| 218 | $('dialog#credits_dialog').addEventListener('close', _ => { |
| 219 | history.pushState( |
| 220 | '', document.title, |
| 221 | window.location.pathname + window.location.search); |
| 222 | }); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 223 | |
Adrià Vilanova Martínez | 915e15a | 2022-05-27 19:14:25 +0200 | [diff] [blame^] | 224 | // Print language list in the modal dialog |
| 225 | printListModal(); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 226 | }); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 227 | } |
| 228 | |
avm99963 | a003641 | 2020-12-29 13:39:05 +0100 | [diff] [blame] | 229 | function saveOptions(close = false) { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 230 | var languages = document.getElementById('languages'); |
| 231 | var options = { |
| 232 | uniquetab: '', |
| 233 | translateinto: {}, |
| 234 | }; |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 235 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 236 | options.uniquetab = radioSelected('uniquetab'); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 237 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 238 | var selected_languages = sortable.toArray(); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 239 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 240 | var i = 0; |
| 241 | for (var language_id in selected_languages) { |
| 242 | var language = selected_languages[language_id]; |
| 243 | options.translateinto[i] = language; |
| 244 | i++; |
| 245 | } |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 246 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 247 | chrome.storage.sync.set(options, function() { |
| 248 | var background = chrome.extension.getBackgroundPage(); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 249 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 250 | background.translator_tab = false; |
| 251 | background.translator_window = false; |
avm99963 | a003641 | 2020-12-29 13:39:05 +0100 | [diff] [blame] | 252 | if (close) window.close(); |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 253 | }); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 254 | } |
| 255 | |
avm99963 | ce257a9 | 2020-12-27 00:07:13 +0100 | [diff] [blame] | 256 | function radioSelected(a) { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 257 | var elements = document.getElementsByName(a); |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 258 | |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 259 | for (var i = 0; i < elements.length; i++) |
| 260 | if (elements[i].checked) return elements[i].value; |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 261 | } |
| 262 | |
| 263 | function inArray(needle, haystack) { |
avm99963 | 5a57c41 | 2020-12-27 00:26:45 +0100 | [diff] [blame] | 264 | var length = haystack.length; |
| 265 | for (var i = 0; i < length; i++) { |
| 266 | if (haystack[i] == needle) return true; |
| 267 | } |
| 268 | return false; |
avm99963 | 4a2a5d5 | 2016-06-04 16:17:29 +0200 | [diff] [blame] | 269 | } |
| 270 | |
| 271 | window.addEventListener('load', init); |