<!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>