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