imageburner.html revision bda42a81ee5f9b20d2bebedcf0bbef1e30e5b293 
1<!DOCTYPE html>
2<html i18n-values="dir:textdirection;">
3<head>
4<meta charset=UTF-8">
5<title i18n-content="title"></title>
6<style>
7body {  
8  -webkit-user-select: none;
9}
10  
11h1 {
12  border-bottom: 1px solid #7289E2;
13  padding: 8px;
14  height: 32px;
15  background-image: -webkit-gradient(linear,
16                                     left top,
17                                     left bottom,
18                                     from(#D0DAF8),
19                                     to(#A6BAF7));
20  border: 1px solid #999;
21  border-top: 0;
22  color: black;
23}
24
25html[dir='rtl'] h1 {
26  left: auto;
27  right: 0;
28  background-image: -webkit-gradient(linear,
29                                     right top,
30                                     right bottom,
31                                     from(#D0DAF8),
32                                     to(#A6BAF7));
33}
34 
35.rowlink {
36  height: 100%;
37  -webkit-margin-end: 2px;
38}
39
40.devicerow div.icon {
41  -webkit-margin-start: 5px;
42  margin-top: -3px;
43  float: left;
44  width: 17px;
45  height: 17px;
46  background-repeat: no-repeat;
47  background: url('shared/images/icon_folder.png');
48}
49
50html[dir='rtl'] .devicerow div.icon {
51  float: right;
52}
53
54.burnicon {
55  background:  url('shared/images/filebrowse_menu.png');
56  position: absolute;
57  right: 4px;
58  top: 5px;
59  height: 15px;
60  width: 15px;
61  margin-top: 5px;
62  background-repeat: no-repeat;
63  cursor: pointer;
64  opacity: 0.3;
65  -webkit-transition: opacity 0.15s ease-out;
66  border: 0;
67}
68
69html[dir='rtl'].burnicon {
70  right: auto;
71  left: 4px;
72}
73
74.devicerow:hover .burnicon {
75  opacity: 0.75;
76  -webkit-transition: none;
77}
78
79.devicerow:hover .burnicon:hover {
80  opacity: 1;
81  -webkit-transition: none;
82}
83
84.devicerow {
85  border-bottom: 1px solid #f7f7f7;
86  padding: 8px 5px 5px 8px;
87  font-size: .8em;
88  position: relative;
89  background-color: #fff;
90}
91
92html[dir='rtl'] .devicerow {
93  padding: 8px 8px 5px 5px;
94}
95
96.devicerow:hover {
97  background-color: #ebeff9;
98  cursor: pointer;
99}
100
101.devicerow span.name {
102  margin-top: 10px;
103  -webkit-margin-start: 10px;
104}
105
106.selected {
107  background-color: #b1c8f2;
108}
109
110h1.title {
111  margin-top: 5px;
112  text-align: center;
113  font-size: 1.2em;
114  font-weight: bold;
115}
116
117.columnlist {
118  width: 100%;
119  bottom: 0;
120}
121
122.fullcontainer {
123  top: 0px;
124  position: absolute;
125  left: 0;
126  bottom: 0;
127  right: 600px;
128  border-right: 1px solid #7289E2;
129}
130
131html[dir='rtl'] .fullcontainer {
132  left: 600px;
133  right: 0;
134  border-right: auto;
135  border-left: 1px solid #7289E2;
136}
137
138progress {
139  -webkit-margin-start: 15px;
140  width: 700px;
141}
142
143.progressText {
144  -webkit-padding-start: 20px;
145  font-size: .6em;
146  font: "Helvetica";
147}
148
149.statusText {
150  padding-top: 5px;
151  -webkit-padding-start: 15px;
152  font-size: 1em;
153}
154
155.statusDiv{
156  border-bottom: 1px solid #f7f7f7;
157  padding-bottom: 2px;
158  background-color: #fff;
159}
160
161#rootsColumn:not(.burningColumn) {
162  height: 50%;
163}
164
165#statusColumn:not(.burningColumn) {
166  height: 50%; 
167  border-top: 1px solid #7289E2;
168}
169</style>
170
171<script src="shared/js/local_strings.js"></script>
172<script>
173function $(o) {
174  return document.getElementById(o);
175}
176
177var currentlySelectedItem;
178var currentlySelectedPath;
179var localStrings;
180var statusMessages;
181var burnStarted;
182
183function promtUserDownloadFinished() {
184  // This could be done nicer.
185  var answer = confirm(localStrings.getString('burnConfirmText1') +
186      currentlySelectedPath + localStrings.getString('burnConfirmText2'));
187  chrome.send(answer ? 'burnImage' : 'cancelBurnImage', []);
188}
189
190function alertUserDownloadAborted(){
191  alert(localStrings.getString('downloadAbortedMessage'));
192}
193
194function burnSuccessful() {
195  alert(localStrings.getString('burnSuccessfulMessage'));
196}
197
198function burnUnsuccessful(){
199  alert(localStrings.getString('burnUnsuccessfulMessage'));
200}
201  
202function rootsChanged(){
203  chrome.send('getRoots', []);
204}
205  
206function browseFileResult(info, results) {
207  var path = info.path;
208  var list = $('rootsList');
209  list.innerHTML = '';
210  var selectedRemoved = true;
211  var addedRoots=[];
212  for (var x = 0; x < results.length; x++) {
213    if (!(results[x].title in addedRoots)) {
214      addedRoots[results[x].title] = true;
215      var element = createNewItem(results[x].title, results[x].path);
216      if (results[x].path == currentlySelectedPath) {
217        selectItem(element.id, results[x].path);
218        selectedRemoved = false;
219      }
220      list.appendChild(element);
221    }
222  }
223  if (selectedRemoved) {
224    currentlySelectedItem = null;
225    currentlySelectedPath = null;
226  }
227}
228
229function selectItem(elementId, path) {
230  var element = $(elementId);
231  var index;
232  if (currentlySelectedItem)
233    currentlySelectedItem.className = 'devicerow';
234  if (element) {
235    element.className = 'selected devicerow';
236    currentlySelectedItem = element;
237    currentlySelectedPath = path;
238  }
239}
240
241function createProgressElement(id) {
242  var statusDiv = document.createElement('div');
243  statusDiv.id = id;
244  statusDiv.className = 'statusDiv';
245  
246  var statusText = document.createElement('div');
247  statusText.id = id + 'StatusText';
248  statusText.className = 'statusText';
249  statusDiv.appendChild(statusText);
250  
251  var progressBar = document.createElement('progress');
252  progressBar.id = id + 'ProgressBar';
253  progressBar.className = 'progressBar';
254  statusDiv.appendChild(progressBar);
255
256  var progressText = document.createElement('div');
257  progressText.id = id + 'ProgressText';
258  progressText.className = 'progressText'
259  statusDiv.appendChild(progressText);
260  
261  return statusDiv;
262}
263
264function setProgressElementFinalValues(element, statuses, event) {
265  var statusTextDiv;
266  var progressBarDiv;
267  var progressTextDiv;
268  for (var i = 0; i < element.children.length; i++ ) {
269    switch(element.children[i].className) {
270      case 'statusText':
271        statusTextDiv = element.children[i];
272        break;
273      case 'progressBar':
274        progressBarDiv = element.children[i];
275        break;
276      case 'progressText':
277        progressTextDiv = element.children[i];
278        break;
279    }
280  }  
281  if (event == 'COMPLETE')
282    statusTextDiv.textContent = statuses['finished'];
283  else
284      statusTextDiv.textContent = statuses['canceled'];
285      
286  var progressBarParent = progressBarDiv.parentNode;
287  progressBarParent.removeChild(progressBarDiv); 
288  
289  var progressTextParent = progressTextDiv.parentNode;
290  progressTextParent.removeChild(progressTextDiv);
291  return element;
292}
293
294function setProgressElementValues(element, statuses, amountFinished, 
295                                  amountTotal, progressText){
296  var statusTextDiv;
297  var progressBarDiv;
298  var progressTextDiv;
299  for (var i = 0; i < element.children.length; i++ ) {
300    switch(element.children[i].className) {
301      case 'statusText':
302        statusTextDiv = element.children[i];
303        break;
304      case 'progressBar':
305        progressBarDiv = element.children[i];
306        break;
307      case 'progressText':
308        progressTextDiv = element.children[i];
309        break;
310    }
311  }  
312 
313  if (!(amountFinished > 0)) {
314    amountFinished = 0; 
315    statusTextDiv.textContent = statuses["start"];
316    progressTextDiv.textContent = "";
317  } else {
318    statusTextDiv.textContent = statuses["inProgress"];
319    progressTextDiv.textContent = progressText;
320  }
321  if(amountFinished > amountTotal)
322    amountFinished = amountTotal;
323  progressBarDiv.value = amountFinished;
324  if (amountTotal)
325    progressBarDiv.max = amountTotal;  
326  return element;
327}
328
329function updateProgressElement(progressType, progressInfo) {
330  var element = $(progressType + 'ProgressElement');
331  if (!element) {
332    element = createProgressElement(progressType + 'ProgressElement');
333    var column  = $('statusList');
334    column.appendChild(element);
335  }
336  var errorOccurred = (progressInfo.state == 'CANCELLED');
337  if (progressInfo.state == 'IN_PROGRESS') {
338    setProgressElementValues(element, statusMessages[progressType],  
339        progressInfo.received, progressInfo.total, 
340        progressInfo.progress_status_text); 
341  } else {
342    setProgressElementFinalValues(element, statusMessages[progressType],
343                                  progressInfo.state);
344  }   
345}
346
347function downloadUpdated(result) { 
348  updateProgressElement('download', result);
349}
350
351function burnProgressUpdated(result) { 
352  if (!burnStarted) {
353    $('rootsList').style.display = 'none';
354    $('rootsListTitle').textContent = result.path;
355    $('rootsColumn').className = 'burningColumn columnList';
356    $('statusColumn').className = 'burningColumn columnList';
357    burnStarted = true;
358  }
359  updateProgressElement('burn', result);
360}
361
362var elementIdCounter = 0;
363
364function createNewItem(title, path) {
365  var element = document.createElement('div');
366  element.className = 'devicerow';
367  element.id = path + elementIdCounter;
368  elementIdCounter++;
369  var link;
370  link = document.createElement('div');
371  link.onclick = function() { burnImage(element.id, path); };
372  link.className = 'rowlink';
373
374  var icon = document.createElement('div');
375  icon.className = 'icon';
376  link.appendChild(icon);
377
378  var span = document.createElement('span');
379  span.className = 'name';
380  span.textContent = title;
381  link.appendChild(span);
382
383  element.appendChild(link);
384
385  var burnicon = document.createElement('button');
386  burnicon.className = 'burnicon';
387  burnicon.onclick = function() { burnImage(element.id, path); };
388  element.appendChild(burnicon);
389
390  return element;
391}
392
393function burnImage(elementId, path) {
394  selectItem(elementId, path);
395  chrome.send('downloadImage', [path]);
396}
397
398function clearList(list) {
399  while (list.childNodes.length >= 1) {
400    list.removeChild(list.firstChild);
401  }
402}
403  
404document.addEventListener('DOMContentLoaded', function() {
405  localStrings = new LocalStrings();    
406  burnStarted = false;
407  chrome.send("getRoots", []);
408
409  // Initialize messages that will be displayed as download 
410  // or burn progress is updated.
411  statusMessages = [];
412  
413  var downloadStatuses = [];
414  downloadStatuses['start'] = localStrings.getString('downloadStatusStart');
415  downloadStatuses['inProgress'] = 
416      localStrings.getString('downloadStatusInProgress');
417  downloadStatuses['finished'] = 
418      localStrings.getString('downloadStatusComplete');
419  downloadStatuses['canceled'] = 
420      localStrings.getString('downloadStatusCanceled');
421  statusMessages['download'] = downloadStatuses;
422  
423  var burnStatuses = [];
424  burnStatuses['start'] = localStrings.getString('burnStatusStart');
425  burnStatuses['inProgress'] = localStrings.getString('burnStatusInProgress');
426  burnStatuses['finished'] = localStrings.getString('burnStatusComplete');
427  burnStatuses['canceled'] = localStrings.getString('burnStatusCanceled');
428  statusMessages['burn'] = burnStatuses;
429});
430</script>
431</head>
432<body>
433  <div id="main" class="fullcontainer">
434    <div id="rootsColumn" class="columnlist">
435      <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1>  
436      <div id="rootsList"></div>
437    </div>
438    <div id="statusColumn" class="columnlist">
439      <div id="statusList"></div>
440    </div>  
441  </div>
442</body>
443</html>
444