| <!DOCTYPE html> |
| <html i18n-values="dir:textdirection;"> |
| <head> |
| <meta charset=UTF-8"> |
| <title i18n-content="title"></title> |
| <style> |
| body { |
| -webkit-user-select: none; |
| } |
| |
| h1 { |
| border-bottom: 1px solid #7289E2; |
| padding: 8px; |
| height: 32px; |
| background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7); |
| border: 1px solid #999; |
| border-top: 0; |
| color: black; |
| } |
| |
| html[dir='rtl'] h1 { |
| left: auto; |
| right: 0; |
| background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7); |
| } |
| |
| .rowlink { |
| height: 100%; |
| -webkit-margin-end: 2px; |
| } |
| |
| .devicerow div.icon { |
| -webkit-margin-start: 5px; |
| margin-top: -3px; |
| float: left; |
| width: 17px; |
| height: 17px; |
| background-repeat: no-repeat; |
| background: url('shared/images/icon_folder.png'); |
| } |
| |
| html[dir='rtl'] .devicerow div.icon { |
| float: right; |
| } |
| |
| .burnicon { |
| background: url('shared/images/filebrowse_menu.png'); |
| position: absolute; |
| right: 4px; |
| top: 5px; |
| height: 15px; |
| width: 15px; |
| margin-top: 5px; |
| background-repeat: no-repeat; |
| cursor: pointer; |
| opacity: 0.3; |
| -webkit-transition: opacity 0.15s ease-out; |
| border: 0; |
| } |
| |
| html[dir='rtl'].burnicon { |
| right: auto; |
| left: 4px; |
| } |
| |
| .devicerow:hover .burnicon { |
| opacity: 0.75; |
| -webkit-transition: none; |
| } |
| |
| .devicerow:hover .burnicon:hover { |
| opacity: 1; |
| -webkit-transition: none; |
| } |
| |
| .devicerow { |
| border-bottom: 1px solid #f7f7f7; |
| padding: 8px 5px 5px 8px; |
| font-size: .8em; |
| position: relative; |
| background-color: #fff; |
| } |
| |
| html[dir='rtl'] .devicerow { |
| padding: 8px 8px 5px 5px; |
| } |
| |
| .devicerow:hover { |
| background-color: #ebeff9; |
| cursor: pointer; |
| } |
| |
| .devicerow span.name { |
| margin-top: 10px; |
| -webkit-margin-start: 10px; |
| } |
| |
| .selected { |
| background-color: #b1c8f2; |
| } |
| |
| h1.title { |
| margin-top: 5px; |
| text-align: center; |
| font-size: 1.2em; |
| font-weight: bold; |
| } |
| |
| .columnlist { |
| width: 100%; |
| bottom: 0; |
| } |
| |
| .fullcontainer { |
| top: 0px; |
| position: absolute; |
| left: 0; |
| bottom: 0; |
| right: 600px; |
| -webkit-border-end: 1px solid #7289E2; |
| } |
| |
| html[dir='rtl'] .fullcontainer { |
| left: 600px; |
| right: 0; |
| } |
| |
| progress { |
| -webkit-margin-start: 15px; |
| width: 700px; |
| } |
| |
| .progressText { |
| -webkit-padding-start: 20px; |
| font-size: .6em; |
| font: "Helvetica"; |
| } |
| |
| .statusText { |
| padding-top: 5px; |
| -webkit-padding-start: 15px; |
| font-size: 1em; |
| } |
| |
| .statusDiv{ |
| border-bottom: 1px solid #f7f7f7; |
| padding-bottom: 2px; |
| background-color: #fff; |
| } |
| |
| #rootsColumn:not(.burningColumn) { |
| height: 50%; |
| } |
| |
| #statusColumn:not(.burningColumn) { |
| height: 50%; |
| border-top: 1px solid #7289E2; |
| } |
| </style> |
| |
| <script src="shared/js/local_strings.js"></script> |
| <script> |
| function $(o) { |
| return document.getElementById(o); |
| } |
| |
| var currentlySelectedItem; |
| var currentlySelectedPath; |
| var localStrings; |
| var statusMessages; |
| var burnStarted; |
| |
| function promptUserDownloadFinished() { |
| // This could be done nicer. |
| var answer = confirm(localStrings.getString('burnConfirmText1') + |
| currentlySelectedPath + localStrings.getString('burnConfirmText2')); |
| chrome.send(answer ? 'burnImage' : 'cancelBurnImage', []); |
| } |
| |
| function alertUserDownloadAborted(){ |
| alert(localStrings.getString('downloadAbortedMessage')); |
| } |
| |
| function burnSuccessful() { |
| alert(localStrings.getString('burnSuccessfulMessage')); |
| } |
| |
| function burnUnsuccessful(){ |
| alert(localStrings.getString('burnUnsuccessfulMessage')); |
| } |
| |
| function rootsChanged(){ |
| chrome.send('getRoots', []); |
| } |
| |
| function browseFileResult(info, results) { |
| var path = info.path; |
| var list = $('rootsList'); |
| list.innerHTML = ''; |
| var selectedRemoved = true; |
| var addedRoots=[]; |
| for (var x = 0; x < results.length; x++) { |
| if (!(results[x].title in addedRoots)) { |
| addedRoots[results[x].title] = true; |
| var element = createNewItem(results[x].title, results[x].path); |
| if (results[x].path == currentlySelectedPath) { |
| selectItem(element.id, results[x].path); |
| selectedRemoved = false; |
| } |
| list.appendChild(element); |
| } |
| } |
| if (selectedRemoved) { |
| currentlySelectedItem = null; |
| currentlySelectedPath = null; |
| } |
| } |
| |
| function selectItem(elementId, path) { |
| var element = $(elementId); |
| var index; |
| if (currentlySelectedItem) |
| currentlySelectedItem.className = 'devicerow'; |
| if (element) { |
| element.className = 'selected devicerow'; |
| currentlySelectedItem = element; |
| currentlySelectedPath = path; |
| } |
| } |
| |
| function createProgressElement(id) { |
| var statusDiv = document.createElement('div'); |
| statusDiv.id = id; |
| statusDiv.className = 'statusDiv'; |
| |
| var statusText = document.createElement('div'); |
| statusText.id = id + 'StatusText'; |
| statusText.className = 'statusText'; |
| statusDiv.appendChild(statusText); |
| |
| var progressBar = document.createElement('progress'); |
| progressBar.id = id + 'ProgressBar'; |
| progressBar.className = 'progressBar'; |
| statusDiv.appendChild(progressBar); |
| |
| var progressText = document.createElement('div'); |
| progressText.id = id + 'ProgressText'; |
| progressText.className = 'progressText' |
| statusDiv.appendChild(progressText); |
| |
| return statusDiv; |
| } |
| |
| function setProgressElementFinalValues(element, statuses, event) { |
| var statusTextDiv; |
| var progressBarDiv; |
| var progressTextDiv; |
| for (var i = 0; i < element.children.length; i++ ) { |
| switch(element.children[i].className) { |
| case 'statusText': |
| statusTextDiv = element.children[i]; |
| break; |
| case 'progressBar': |
| progressBarDiv = element.children[i]; |
| break; |
| case 'progressText': |
| progressTextDiv = element.children[i]; |
| break; |
| } |
| } |
| if (event == 'COMPLETE') |
| statusTextDiv.textContent = statuses['finished']; |
| else |
| statusTextDiv.textContent = statuses['canceled']; |
| |
| var progressBarParent = progressBarDiv.parentNode; |
| progressBarParent.removeChild(progressBarDiv); |
| |
| var progressTextParent = progressTextDiv.parentNode; |
| progressTextParent.removeChild(progressTextDiv); |
| return element; |
| } |
| |
| function setProgressElementValues(element, statuses, amountFinished, |
| amountTotal, progressText){ |
| var statusTextDiv; |
| var progressBarDiv; |
| var progressTextDiv; |
| for (var i = 0; i < element.children.length; i++ ) { |
| switch(element.children[i].className) { |
| case 'statusText': |
| statusTextDiv = element.children[i]; |
| break; |
| case 'progressBar': |
| progressBarDiv = element.children[i]; |
| break; |
| case 'progressText': |
| progressTextDiv = element.children[i]; |
| break; |
| } |
| } |
| |
| if (!(amountFinished > 0)) { |
| amountFinished = 0; |
| statusTextDiv.textContent = statuses["start"]; |
| progressTextDiv.textContent = ""; |
| } else { |
| statusTextDiv.textContent = statuses["inProgress"]; |
| progressTextDiv.textContent = progressText; |
| } |
| if(amountFinished > amountTotal) |
| amountFinished = amountTotal; |
| progressBarDiv.value = amountFinished; |
| if (amountTotal) |
| progressBarDiv.max = amountTotal; |
| return element; |
| } |
| |
| function updateProgressElement(progressType, progressInfo) { |
| var element = $(progressType + 'ProgressElement'); |
| if (!element) { |
| element = createProgressElement(progressType + 'ProgressElement'); |
| var column = $('statusList'); |
| column.appendChild(element); |
| }
|
| var errorOccurred = (progressInfo.state == 'CANCELLED'); |
| if (progressInfo.state == 'IN_PROGRESS') { |
| setProgressElementValues(element, statusMessages[progressType], |
| progressInfo.received, progressInfo.total, |
| progressInfo.progress_status_text); |
| } else { |
| setProgressElementFinalValues(element, statusMessages[progressType], |
| progressInfo.state); |
| } |
| } |
| |
| function downloadUpdated(result) { |
| updateProgressElement('download', result); |
| } |
| |
| function burnProgressUpdated(result) { |
| if (!burnStarted) { |
| $('rootsList').style.display = 'none'; |
| $('rootsListTitle').textContent = result.path; |
| $('rootsColumn').className = 'burningColumn columnList'; |
| $('statusColumn').className = 'burningColumn columnList'; |
| burnStarted = true; |
| } |
| updateProgressElement('burn', result); |
| } |
| |
| var elementIdCounter = 0; |
| |
| function createNewItem(title, path) { |
| var element = document.createElement('div'); |
| element.className = 'devicerow'; |
| element.id = path + elementIdCounter; |
| elementIdCounter++; |
| var link; |
| link = document.createElement('div'); |
| link.onclick = function() { burnImage(element.id, path); }; |
| link.className = 'rowlink'; |
| |
| var icon = document.createElement('div'); |
| icon.className = 'icon'; |
| link.appendChild(icon); |
| |
| var span = document.createElement('span'); |
| span.className = 'name'; |
| span.textContent = title; |
| link.appendChild(span); |
| |
| element.appendChild(link); |
| |
| var burnicon = document.createElement('button'); |
| burnicon.className = 'burnicon'; |
| burnicon.onclick = function() { burnImage(element.id, path); }; |
| element.appendChild(burnicon); |
| |
| return element; |
| } |
| |
| function burnImage(elementId, path) { |
| selectItem(elementId, path); |
| chrome.send('downloadImage', [path]); |
| } |
| |
| function clearList(list) { |
| while (list.childNodes.length >= 1) { |
| list.removeChild(list.firstChild); |
| } |
| } |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| localStrings = new LocalStrings(); |
| burnStarted = false; |
| chrome.send("getRoots", []); |
| |
| // Initialize messages that will be displayed as download |
| // or burn progress is updated. |
| statusMessages = []; |
| |
| var downloadStatuses = []; |
| downloadStatuses['start'] = localStrings.getString('downloadStatusStart'); |
| downloadStatuses['inProgress'] = |
| localStrings.getString('downloadStatusInProgress'); |
| downloadStatuses['finished'] = |
| localStrings.getString('downloadStatusComplete'); |
| downloadStatuses['canceled'] = |
| localStrings.getString('downloadStatusCanceled'); |
| statusMessages['download'] = downloadStatuses; |
| |
| var burnStatuses = []; |
| burnStatuses['start'] = localStrings.getString('burnStatusStart'); |
| burnStatuses['inProgress'] = localStrings.getString('burnStatusInProgress'); |
| burnStatuses['finished'] = localStrings.getString('burnStatusComplete'); |
| burnStatuses['canceled'] = localStrings.getString('burnStatusCanceled'); |
| statusMessages['burn'] = burnStatuses; |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="main" class="fullcontainer"> |
| <div id="rootsColumn" class="columnlist"> |
| <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1> |
| <div id="rootsList"></div> |
| </div> |
| <div id="statusColumn" class="columnlist"> |
| <div id="statusList"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
