OLD | NEW |
---|---|
(Empty) | |
1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 cr.define('nfc_debug', function() { | |
xiyuan
2014/01/23 21:20:55
nit: nfc_debug -> nfcDebug (or nfc.debug)
armansito
2014/01/24 20:50:33
Done.
| |
6 'use strict'; | |
7 | |
8 function NfcDebugUI() { | |
9 this.adapterData_ = {}; | |
10 this.peerData_ = {}; | |
11 this.tagData_ = {}; | |
12 } | |
13 | |
14 NfcDebugUI.prototype = { | |
15 setAdapterData: function(data) { | |
16 this.adapterData_ = data; | |
17 }, | |
18 | |
19 setPeerData: function(data) { | |
20 this.peerData_ = data; | |
21 }, | |
22 | |
23 setTagData: function(data) { | |
24 this.tagData_ = data; | |
25 }, | |
26 | |
27 /** | |
28 * Powers the NFC adapter ON or OFF. | |
29 */ | |
30 toggleAdapterPower: function() { | |
31 chrome.send('setAdapterPower', [!this.adapterData_.powered]); | |
32 }, | |
33 | |
34 /** | |
35 * Tells the NFC adapter to start or stop polling. | |
36 */ | |
37 toggleAdapterPolling: function() { | |
38 chrome.send('setAdapterPolling', [!this.adapterData_.polling]); | |
39 }, | |
40 | |
41 /** | |
42 * Notifies the UI that the user made an NDEF type selection and the | |
43 * appropriate form should be displayed. | |
44 */ | |
45 recordTypeChanged: function() { | |
46 this.updateRecordFormContents(); | |
47 }, | |
48 | |
49 /** | |
50 * Creates a table element and populates it for each record contained | |
51 * in the given list of records and adds them as a child of the given | |
52 * DOMElement. This method will replace the contents of the given element | |
53 * with the tables. | |
54 * | |
55 * @param {Array} records List of NDEF record data. | |
xiyuan
2014/01/23 21:20:55
nit: Move this after doc for |div| to make it cons
armansito
2014/01/24 20:50:33
Done.
| |
56 * @param {DOMElement} div The container that the recors should be rendered | |
57 * to. | |
58 */ | |
59 renderRecords: function(div, records) { | |
60 div.innerHTML = ''; | |
xiyuan
2014/01/23 21:20:55
nit: div.textContent = '';
armansito
2014/01/24 20:50:33
Done.
| |
61 if (records.length == 0) { | |
62 return; | |
63 } | |
64 var self = this; | |
65 records.forEach(function(record) { | |
66 var recordDiv = document.createElement('div'); | |
67 recordDiv.setAttribute('class', 'record-div'); | |
68 for (var key in record) { | |
69 if (!record.hasOwnProperty(key)) | |
70 continue; | |
71 | |
72 var rowDiv = document.createElement('div'); | |
73 rowDiv.setAttribute('class', 'record-key-value-div'); | |
74 | |
75 var keyElement, valueElement; | |
76 if (key == 'titles') { | |
77 keyElement = document.createElement('div'); | |
78 keyElement.setAttribute('class', 'record-key-div'); | |
79 keyElement.appendChild(document.createTextNode(key)); | |
80 valueElement = document.createElement('div'); | |
81 valueElement.setAttribute('class', 'record-value-div'); | |
82 self.renderRecords(valueElement, record[key]); | |
83 } else { | |
84 var keyElement = document.createElement('span'); | |
xiyuan
2014/01/23 21:20:55
remove "var"?
armansito
2014/01/24 20:50:33
Done.
| |
85 keyElement.setAttribute('class', 'record-key-span'); | |
86 keyElement.appendChild(document.createTextNode(key)); | |
87 var valueElement = document.createElement('span'); | |
xiyuan
2014/01/23 21:20:55
remove "var"?
armansito
2014/01/24 20:50:33
Done.
| |
88 valueElement.setAttribute('class', 'record-value-span'); | |
89 valueElement.appendChild(document.createTextNode(record[key])); | |
90 } | |
91 rowDiv.appendChild(keyElement); | |
92 rowDiv.appendChild(valueElement); | |
93 recordDiv.appendChild(rowDiv); | |
94 } | |
95 div.appendChild(recordDiv); | |
96 if (records[records.length - 1] !== record) | |
97 div.appendChild(document.createElement('hr')); | |
98 }); | |
99 }, | |
100 | |
101 /** | |
102 * Updates which record type form is displayed based on the currently | |
103 * selected type. | |
104 */ | |
105 updateRecordFormContents: function() { | |
106 var recordTypeMenu = $('record-type-menu'); | |
107 var selectedType = | |
108 recordTypeMenu.options[recordTypeMenu.selectedIndex].value; | |
109 this.updateRecordFormContentsFromType(selectedType); | |
110 }, | |
111 | |
112 /** | |
113 * Updates which record type form is displayed based on the passed in | |
114 * type string. | |
115 * | |
116 * @param {string} type The record type. | |
117 */ | |
118 updateRecordFormContentsFromType: function(type) { | |
119 $('text-form').hidden = (type != 'text'); | |
120 $('uri-form').hidden = (type != 'uri'); | |
121 $('smart-poster-form').hidden = (type != 'smart-poster'); | |
122 }, | |
123 | |
124 /** | |
125 * Tries to push or write the record to the remote tag or device based on | |
126 * the contents of the record form fields. | |
127 */ | |
128 submitRecordForm: function() { | |
129 var recordTypeMenu = $('record-type-menu'); | |
130 var selectedType = | |
131 recordTypeMenu.options[recordTypeMenu.selectedIndex].value; | |
132 var recordData = {}; | |
133 if (selectedType == 'text') { | |
134 recordData.type = 'TEXT'; | |
135 if ($('text-form-text').value) | |
136 recordData.text = $('text-form-text').value; | |
137 if ($('text-form-encoding').value) | |
138 recordData.encoding = $('text-form-encoding').value; | |
139 if ($('text-form-language-code').value) | |
140 recordData.languageCode = $('text-form-language-code').value; | |
141 } else if (selectedType == 'uri') { | |
142 recordData.type = 'URI'; | |
143 if ($('uri-form-uri').value) | |
144 recordData.uri = $('uri-form-uri').value; | |
145 if ($('uri-form-mime-type').value) | |
146 recordData.mimeType = $('uri-form-mime-type').value; | |
147 if ($('uri-form-target-size').value) { | |
148 var targetSize = $('uri-form-target-size').value; | |
149 targetSize = parseFloat(targetSize); | |
150 recordData.targetSize = isNaN(targetSize) ? 0.0 : targetSize; | |
151 } | |
152 } else if (selectedType == 'smart-poster') { | |
153 recordData.type = 'SMART_POSTER'; | |
154 if ($('smart-poster-form-uri').value) | |
155 recordData.uri = $('smart-poster-form-uri').value; | |
156 if ($('smart-poster-form-mime-type').value) | |
157 recordData.mimeType = $('smart-poster-form-mime-type').value; | |
158 if ($('smart-poster-form-target-size').value) { | |
159 var targetSize = $('smart-poster-form-target-size').value; | |
160 targetSize = parseFloat(targetSize); | |
161 recordData.targetSize = isNaN(targetSize) ? 0.0 : targetSize; | |
162 } | |
163 var title = {}; | |
164 if ($('smart-poster-form-title-text').value) | |
165 title.text = $('smart-poster-form-title-text').value; | |
166 if ($('smart-poster-form-title-encoding').value) | |
167 title.encoding = $('smart-poster-form-title-encoding').value; | |
168 if ($('smart-poster-form-title-language-code').value) | |
169 title.languageCode = | |
170 $('smart-poster-form-title-language-code').value; | |
171 if (Object.keys(title).length != 0) | |
172 recordData.titles = [title]; | |
173 } | |
174 chrome.send('submitRecordForm', [recordData]); | |
175 }, | |
176 }; | |
177 | |
178 cr.addSingletonGetter(NfcDebugUI); | |
179 | |
180 /** | |
181 * Initializes the page after the content has loaded. | |
182 */ | |
183 NfcDebugUI.initialize = function() { | |
184 $('nfc-adapter-info').hidden = true; | |
185 $('adapter-toggles').hidden = true; | |
186 $('nfc-adapter-info').classList.add('transition-out'); | |
187 $('ndef-record-form').classList.add('transition-out'); | |
188 $('nfc-peer-info').classList.add('transition-out'); | |
189 $('nfc-tag-info').classList.add('transition-out'); | |
190 $('power-toggle').onclick = function() { | |
191 NfcDebugUI.getInstance().toggleAdapterPower(); | |
192 }; | |
193 $('poll-toggle').onclick = function() { | |
194 NfcDebugUI.getInstance().toggleAdapterPolling(); | |
195 }; | |
196 $('record-type-menu').onchange = function() { | |
197 NfcDebugUI.getInstance().recordTypeChanged(); | |
198 }; | |
199 $('record-form-submit-button').onclick = function() { | |
200 NfcDebugUI.getInstance().submitRecordForm(); | |
201 }; | |
202 $('record-form-submit-button').hidden = true; | |
203 NfcDebugUI.getInstance().updateRecordFormContents(); | |
204 chrome.send('initialize'); | |
205 }; | |
206 | |
207 /** | |
208 * Updates the UI based on the NFC availability on the current platform. | |
209 * | |
210 * @param {bool} available If true, NFC is supported on the current platform. | |
211 */ | |
212 NfcDebugUI.onNfcAvailabilityDetermined = function(available) { | |
213 $('nfc-not-supported').hidden = available; | |
214 }; | |
215 | |
216 /** | |
217 * Notifies the UI that information about the NFC adapter has been received. | |
218 * | |
219 * @param {dictionary} data Properties of the NFC adapter. | |
220 */ | |
221 NfcDebugUI.onNfcAdapterInfoChanged = function(data) { | |
222 $('nfc-adapter-info').hidden = false; | |
223 $('present-entry').innerHTML = data.present; | |
224 $('powered-entry').innerHTML = data.powered; | |
225 $('polling-entry').innerHTML = data.polling; | |
226 $('tags-entry').innerHTML = data.tags; | |
227 $('peers-entry').innerHTML = data.peers; | |
xiyuan
2014/01/23 21:20:55
Can we pass raw data in |data| and generate DOM tr
armansito
2014/01/24 20:50:33
Done.
| |
228 | |
229 if (data.present) { | |
xiyuan
2014/01/23 21:20:55
This "if" can be simplified by using classList.tog
armansito
2014/01/24 20:50:33
Done.
| |
230 $('nfc-adapter-info').classList.remove('transition-out'); | |
231 $('nfc-adapter-info').classList.add('transition-in'); | |
232 $('ndef-record-form').classList.remove('transition-out'); | |
233 $('ndef-record-form').classList.add('transition-in'); | |
234 } else { | |
235 $('nfc-adapter-info').classList.remove('transition-in'); | |
236 $('nfc-adapter-info').classList.add('transition-out'); | |
237 $('ndef-record-form').classList.remove('transition-in'); | |
238 $('ndef-record-form').classList.add('transition-out'); | |
239 } | |
240 $('adapter-toggles').hidden = !data.present; | |
241 $('ndef-record-form').hidden = !data.present; | |
242 | |
243 $('power-toggle').innerHTML = data.powered ? 'Power OFF' : 'Power ON'; | |
244 $('poll-toggle').innerHTML = data.polling ? 'Stop Poll' : 'Start Poll'; | |
xiyuan
2014/01/23 21:20:55
String needs to go in grd file for i18n.
armansito
2014/01/24 20:50:33
Done.
| |
245 | |
246 NfcDebugUI.getInstance().setAdapterData(data); | |
247 }; | |
248 | |
249 /** | |
250 * Notifies the UI that information about an NFC peer has been received. | |
251 * | |
252 * @param {dictionary} data Properties of the NFC peer device. | |
253 */ | |
254 NfcDebugUI.onNfcPeerDeviceInfoChanged = function(data) { | |
255 NfcDebugUI.getInstance().setPeerData(data); | |
256 | |
257 if (Object.keys(data).length == 0) { | |
258 $('nfc-peer-info').classList.add('transition-out'); | |
259 $('nfc-peer-info').classList.remove('transition-in'); | |
260 $('record-form-submit-button').hidden = true; | |
261 return; | |
262 } | |
263 | |
264 $('nfc-peer-info').classList.remove('transition-out'); | |
265 $('nfc-peer-info').classList.add('transition-in'); | |
266 $('peer-identifier-entry').innerHTML = data.identifier; | |
267 $('peer-records-count-entry').innerHTML = data.records.length; | |
268 $('record-form-submit-button').hidden = false; | |
269 $('record-form-submit-button').innerHTML = 'Push to Device'; | |
270 | |
271 if (data.records.length == 0) { | |
272 $('peer-records-entry').hidden = true; | |
273 return; | |
274 } | |
275 | |
276 $('peer-records-entry').hidden = false; | |
277 NfcDebugUI.getInstance().renderRecords($('peer-records-container'), | |
278 data.records); | |
279 }; | |
280 | |
281 /** | |
282 * Notifies the UI that information about an NFC tag has been received. | |
283 * | |
284 * @param {dictionary} data Properties of the NFC tag. | |
285 */ | |
286 NfcDebugUI.onNfcTagInfoChanged = function(data) { | |
287 NfcDebugUI.getInstance().setTagData(data); | |
288 if (Object.keys(data).length == 0) { | |
289 $('nfc-tag-info').classList.add('transition-out'); | |
290 $('nfc-tag-info').classList.remove('transition-in'); | |
291 $('record-form-submit-button').hidden = true; | |
292 return; | |
293 } | |
294 $('nfc-tag-info').classList.remove('transition-out'); | |
295 $('nfc-tag-info').classList.add('transition-in'); | |
296 $('tag-identifier-entry').innerHTML = data.identifier; | |
297 $('tag-type-entry').innerHTML = data.type; | |
298 $('tag-read-only-entry').innerHTML = data.readOnly; | |
299 $('tag-supported-protocol-entry').innerHTML = data.supportedProtocol; | |
300 $('tag-supported-technologies-entry').innerHTML = | |
301 data.supportedTechnologies.join(', '); | |
302 $('tag-records-count-entry').innerHTML = data.records.length; | |
303 $('record-form-submit-button').hidden = false; | |
304 $('record-form-submit-button').innerHTML = 'Write to Tag'; | |
305 | |
306 if (data.records.length == 0) { | |
307 $('tag-records-entry').hidden = true; | |
308 return; | |
309 } | |
310 | |
311 $('tag-records-entry').hidden = false; | |
312 NfcDebugUI.getInstance().renderRecords($('tag-records-container'), | |
313 data.records); | |
314 }; | |
315 | |
316 /** | |
317 * Notifies the UI that a call to "setAdapterPower" failed. Displays an | |
318 * alert. | |
319 */ | |
320 NfcDebugUI.onSetAdapterPowerFailed = function() { | |
321 alert('Failed to set adapter power.'); | |
322 }; | |
323 | |
324 /** | |
325 * Notifies the UI that a call to "setAdapterPolling" failed. Displays an | |
326 * alert. | |
327 */ | |
328 NfcDebugUI.onSetAdapterPollingFailed = function() { | |
329 alert('Failed to start/stop polling.'); | |
330 }; | |
331 | |
332 /** | |
333 * Notifies the UI that an error occurred while submitting an NDEF record | |
334 * form. | |
335 * @param {string} errorMessage An error message, describing the failure. | |
336 */ | |
337 NfcDebugUI.onSubmitRecordFormFailed = function(errorMessage) { | |
338 alert('Failed to submit NDEF: ' + errorMessage); | |
339 }; | |
340 | |
341 // Export | |
342 return { | |
343 NfcDebugUI: NfcDebugUI | |
344 }; | |
345 }); | |
346 | |
347 document.addEventListener('DOMContentLoaded', nfc_debug.NfcDebugUI.initialize); | |
OLD | NEW |