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