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