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