OLD | NEW |
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 (function() { | 5 (function() { |
6 'use strict'; | 6 'use strict'; |
7 | 7 |
8 cr.define('cr.translateInternals', function() { | 8 cr.define('cr.translateInternals', function() { |
9 | 9 |
10 /** | 10 /** |
11 * Initializes UI and sends a message to the browser for | 11 * Initializes UI and sends a message to the browser for |
12 * initialization. | 12 * initialization. |
13 */ | 13 */ |
14 function initialize() { | 14 function initialize() { |
15 cr.ui.decorate('tabbox', cr.ui.TabBox); | 15 cr.ui.decorate('tabbox', cr.ui.TabBox); |
16 chrome.send('requestInfo'); | 16 chrome.send('requestInfo'); |
17 } | 17 } |
18 | 18 |
19 /** | 19 /** |
20 * Creates a new LI element with a button to dismiss the item. | 20 * Creates a new LI element with a button to dismiss the item. |
| 21 * |
21 * @param {string} text lable of the LI element. | 22 * @param {string} text lable of the LI element. |
22 * @param {Function} func callback when the button is clicked. | 23 * @param {Function} func callback when the button is clicked. |
23 */ | 24 */ |
24 function createLIWithDismissingButton(text, func) { | 25 function createLIWithDismissingButton(text, func) { |
25 var span = document.createElement('span'); | 26 var span = document.createElement('span'); |
26 span.textContent = text; | 27 span.textContent = text; |
27 | 28 |
28 var li = document.createElement('li'); | 29 var li = document.createElement('li'); |
29 li.appendChild(span); | 30 li.appendChild(span); |
30 | 31 |
31 var button = document.createElement('button'); | 32 var button = document.createElement('button'); |
32 button.textContent = 'X'; | 33 button.textContent = 'X'; |
33 button.addEventListener('click', function(e) { | 34 button.addEventListener('click', function(e) { |
34 e.preventDefault(); | 35 e.preventDefault(); |
35 func(); | 36 func(); |
36 }, false); | 37 }, false); |
37 | 38 |
38 li.appendChild(button); | 39 li.appendChild(button); |
39 return li; | 40 return li; |
40 } | 41 } |
41 | 42 |
42 /** | 43 /** |
| 44 * Formats the language name to a human-readable text. For example, if |
| 45 * |langCode| is 'en', this may return 'en (English)'. |
| 46 * |
| 47 * @param {string} langCode ISO 639 language code. |
| 48 * @return {string} the formatted string |
| 49 */ |
| 50 function formatLanguageCode(langCode) { |
| 51 var key = 'language-' + langCode; |
| 52 if (key in templateData) { |
| 53 var langName = templateData[key]; |
| 54 return langCode + ' (' + langName + ')'; |
| 55 } |
| 56 |
| 57 return langCode; |
| 58 } |
| 59 |
| 60 /** |
43 * Handles the message of 'prefsUpdated' from the browser. | 61 * Handles the message of 'prefsUpdated' from the browser. |
44 * @param {Object} detail The object which represents pref values. | 62 * |
| 63 * @param {Object} detail the object which represents pref values. |
45 */ | 64 */ |
46 function onPrefsUpdated(detail) { | 65 function onPrefsUpdated(detail) { |
47 var ul; | 66 var ul; |
48 ul = document.querySelector('#prefs-language-blacklist ul'); | 67 ul = document.querySelector('#prefs-language-blacklist ul'); |
49 ul.innerHTML = ''; | 68 ul.innerHTML = ''; |
50 | 69 |
51 if ('translate_language_blacklist' in detail) { | 70 if ('translate_language_blacklist' in detail) { |
52 var langs = detail['translate_language_blacklist']; | 71 var langs = detail['translate_language_blacklist']; |
53 | 72 |
54 langs.forEach(function(langCode) { | 73 langs.forEach(function(langCode) { |
55 var langName = templateData['language-' + langCode]; | 74 var text = formatLanguageCode(langCode); |
56 var text = langCode + ' (' + langName + ')'; | |
57 | 75 |
58 var li = createLIWithDismissingButton(text, function() { | 76 var li = createLIWithDismissingButton(text, function() { |
59 chrome.send('removePrefItem', | 77 chrome.send('removePrefItem', |
60 ['language_blacklist', langCode]); | 78 ['language_blacklist', langCode]); |
61 }); | 79 }); |
62 ul.appendChild(li); | 80 ul.appendChild(li); |
63 }); | 81 }); |
64 } | 82 } |
65 | 83 |
66 ul = document.querySelector('#prefs-site-blacklist ul'); | 84 ul = document.querySelector('#prefs-site-blacklist ul'); |
(...skipping 11 matching lines...) Expand all Loading... |
78 } | 96 } |
79 | 97 |
80 ul = document.querySelector('#prefs-whitelists ul'); | 98 ul = document.querySelector('#prefs-whitelists ul'); |
81 ul.innerHTML = ''; | 99 ul.innerHTML = ''; |
82 | 100 |
83 if ('translate_whitelists' in detail) { | 101 if ('translate_whitelists' in detail) { |
84 var pairs = detail['translate_whitelists']; | 102 var pairs = detail['translate_whitelists']; |
85 | 103 |
86 Object.keys(pairs).forEach(function(fromLangCode) { | 104 Object.keys(pairs).forEach(function(fromLangCode) { |
87 var toLangCode = pairs[fromLangCode]; | 105 var toLangCode = pairs[fromLangCode]; |
88 var fromLangName = templateData['language-' + fromLangCode]; | 106 var text = formatLanguageCode(fromLangCode) + ' \u2192 ' + |
89 var toLangName = templateData['language-' + toLangCode]; | 107 formatLanguageCode(toLangCode); |
90 var text = fromLangCode + ' (' + fromLangName + ') \u2192 ' + | |
91 toLangCode + ' (' + toLangName + ')'; | |
92 | 108 |
93 var li = createLIWithDismissingButton(text, function() { | 109 var li = createLIWithDismissingButton(text, function() { |
94 chrome.send('removePrefItem', | 110 chrome.send('removePrefItem', |
95 ['whitelists', fromLangCode, toLangCode]); | 111 ['whitelists', fromLangCode, toLangCode]); |
96 }); | 112 }); |
97 ul.appendChild(li); | 113 ul.appendChild(li); |
98 }); | 114 }); |
99 } | 115 } |
100 | 116 |
101 var p = document.querySelector('#prefs-dump p'); | 117 var p = document.querySelector('#prefs-dump p'); |
102 var content = JSON.stringify(detail, null, 2); | 118 var content = JSON.stringify(detail, null, 2); |
103 p.textContent = content; | 119 p.textContent = content; |
104 } | 120 } |
105 | 121 |
106 /** | 122 /** |
| 123 * Addes '0's to |number| as a string. |width| is a number of '0'. |
| 124 * |
| 125 * @param {string} number the number to be converted into a string |
| 126 * @param {number} width width of the returned string |
| 127 * @return {string} the formatted string |
| 128 */ |
| 129 function fillWithZeros(number, width) { |
| 130 var numberStr = number.toString(); |
| 131 var restWidth = width - numberStr.length; |
| 132 if (restWidth <= 0) |
| 133 return numberStr; |
| 134 |
| 135 for (var i = 0; i < restWidth; i++) |
| 136 numberStr = '0' + numberStr; |
| 137 |
| 138 return numberStr; |
| 139 } |
| 140 |
| 141 /** |
| 142 * Formats |date| as a Date object into a string. The format is like |
| 143 * '2006-01-02 15:04:05'. The user's locale is used. |
| 144 * |
| 145 * @param {Date} date date to be formatted |
| 146 * @return {string} the formatted string |
| 147 */ |
| 148 function formatDate(date) { |
| 149 var year = date.getFullYear(); |
| 150 var month = date.getMonth() + 1; |
| 151 var day = date.getDay(); |
| 152 var hour = date.getHours(); |
| 153 var minute = date.getMinutes(); |
| 154 var second = date.getSeconds(); |
| 155 |
| 156 var yearStr = fillWithZeros(year, 4); |
| 157 var monthStr = fillWithZeros(month, 2); |
| 158 var dayStr = fillWithZeros(day, 2); |
| 159 var hourStr = fillWithZeros(hour, 2); |
| 160 var minuteStr = fillWithZeros(minute, 2); |
| 161 var secondStr = fillWithZeros(second, 2); |
| 162 |
| 163 var str = yearStr + '-' + monthStr + '-' + dayStr + ' ' + |
| 164 hourStr + ':' + minuteStr + ':' + secondStr; |
| 165 |
| 166 return str; |
| 167 } |
| 168 |
| 169 /** |
| 170 * Handles the message of 'languageDetectionInfoAdded' from the |
| 171 * browser. |
| 172 * |
| 173 * @param {Object} detail The object which represents the logs |
| 174 */ |
| 175 function onLanguageDetectionInfoAdded(detail) { |
| 176 var tr = document.createElement('tr'); |
| 177 |
| 178 // time |
| 179 var td = document.createElement('td'); |
| 180 var time = new Date(detail['time']); |
| 181 var timeStr = formatDate(time); |
| 182 td.textContent = timeStr; |
| 183 td.className = 'detection-logs-time'; |
| 184 tr.appendChild(td); |
| 185 |
| 186 // url |
| 187 td = document.createElement('td'); |
| 188 td.textContent = detail['url']; |
| 189 td.className = 'detection-logs-url'; |
| 190 tr.appendChild(td); |
| 191 |
| 192 // content_language |
| 193 td = document.createElement('td'); |
| 194 td.textContent = formatLanguageCode(detail['content_language']); |
| 195 td.className = 'detection-logs-content-language'; |
| 196 tr.appendChild(td); |
| 197 |
| 198 // cld_language |
| 199 td = document.createElement('td'); |
| 200 td.textContent = formatLanguageCode(detail['cld_language']); |
| 201 td.className = 'detection-logs-cld-language'; |
| 202 tr.appendChild(td); |
| 203 |
| 204 // is_cld_reliable |
| 205 td = document.createElement('td'); |
| 206 td.textContent = detail['is_cld_reliable']; |
| 207 td.className = 'detection-logs-is-cld-reliable'; |
| 208 tr.appendChild(td); |
| 209 |
| 210 // language |
| 211 td = document.createElement('td'); |
| 212 td.textContent = formatLanguageCode(detail['language']); |
| 213 td.className = 'detection-logs-language'; |
| 214 tr.appendChild(td); |
| 215 |
| 216 var tbody = $('detection-logs').getElementsByTagName('tbody')[0]; |
| 217 tbody.appendChild(tr); |
| 218 } |
| 219 |
| 220 /** |
107 * The callback entry point from the browser. This function will be | 221 * The callback entry point from the browser. This function will be |
108 * called by the browser. | 222 * called by the browser. |
| 223 * |
109 * @param {string} message The name of the sent message | 224 * @param {string} message The name of the sent message |
110 * @param {Object} detail The argument of the sent message | 225 * @param {Object} detail The argument of the sent message |
111 */ | 226 */ |
112 function messageHandler(message, detail) { | 227 function messageHandler(message, detail) { |
113 switch (message) { | 228 switch (message) { |
| 229 case 'languageDetectionInfoAdded': |
| 230 cr.translateInternals.onLanguageDetectionInfoAdded(detail); |
| 231 break; |
114 case 'prefsUpdated': | 232 case 'prefsUpdated': |
115 cr.translateInternals.onPrefsUpdated(detail); | 233 cr.translateInternals.onPrefsUpdated(detail); |
116 break; | 234 break; |
117 default: | 235 default: |
118 console.error('Unknown message:', message); | 236 console.error('Unknown message:', message); |
119 break; | 237 break; |
120 } | 238 } |
121 } | 239 } |
122 | 240 |
123 return { | 241 return { |
124 initialize: initialize, | 242 initialize: initialize, |
125 messageHandler: messageHandler, | 243 messageHandler: messageHandler, |
126 onPrefsUpdated: onPrefsUpdated | 244 onLanguageDetectionInfoAdded: onLanguageDetectionInfoAdded, |
| 245 onPrefsUpdated: onPrefsUpdated, |
127 }; | 246 }; |
128 }); | 247 }); |
129 | 248 |
130 /** | 249 /** |
131 * The entry point of the UI. | 250 * The entry point of the UI. |
132 */ | 251 */ |
133 function main() { | 252 function main() { |
134 cr.doc.addEventListener('DOMContentLoaded', | 253 cr.doc.addEventListener('DOMContentLoaded', |
135 cr.translateInternals.initialize); | 254 cr.translateInternals.initialize); |
136 } | 255 } |
137 | 256 |
138 main(); | 257 main(); |
139 })(); | 258 })(); |
OLD | NEW |