scour/lite/index.html

124 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Scour Lite</title>
<style type='text/css'>
.hidden { display: none; }
#status {
border: solid 1px lightgrey;
color: grey;
margin: 10px;
padding: 5px;
}
#status p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Scour Lite</h1>
<input id='fileInput' type='file'/>
<p id='progressPara' class='hidden'>
<span id='stage'>Progress</span>: <progress id='progress' max='100'></progress>
</p>
<div id='links' class='hidden'>
<div id='originalSvg'>
Original:
<a id='originalLinkText' target='_blank'>[text]</a>
<a id='originalLinkSvg' target='_blank'>[svg]</a>
</div>
<div id='scouredSvg'>
Scoured:
<a id='scouredLinkText' target='_blank'>[text]</a>
<a id='scouredLinkSvg' target='_blank'>[svg]</a>
</div>
</div>
<div id='status' class='hidden'></div>
</body>
<script type='text/javascript' src='pdom.js'></script>
<script type='text/javascript'>
var input = document.getElementById('fileInput');
var stageSpan = document.getElementById('stage');
var progress = document.getElementById('progress');
var originalSvg;
var scouredSvg;
var handleMessage = function(evt) {
if (typeof evt.data == 'string') {
var p = document.createElement('p');
p.innerHTML = evt.data;
var status = document.getElementById('status');
status.insertBefore(p, status.firstChild);
} else {
if (evt.data.stage) {
stageSpan.innerHTML = evt.data.stage;
}
if (evt.data.message) {
handleMessage({data: evt.data.message});
}
if (evt.data.progress) {
handleProgress(evt.data.progress);
}
if (evt.data.update) {
var status = document.getElementById('status').firstChild;
status.innerHTML = status.innerHTML + evt.data.update;
}
if (evt.data.scouredSvg) {
scouredSvg = evt.data.scouredSvg;
handleMessage({
data: 'Scoured SVG came out to be ' +
evt.data.scouredSvg.length + ' bytes'
});
var status = document.getElementById('status');
var links = document.getElementById('links');
document.getElementById('originalLinkText').setAttribute('href',
'data:text/plain;base64,' + window.btoa(originalSvg));
document.getElementById('originalLinkSvg').setAttribute('href',
'data:image/svg+xml;base64,' + window.btoa(originalSvg));
document.getElementById('scouredLinkText').setAttribute('href',
'data:text/plain;base64,' + window.btoa(scouredSvg));
document.getElementById('scouredLinkSvg').setAttribute('href',
'data:image/svg+xml;base64,' + window.btoa(scouredSvg));
status.innerHTML = links.innerHTML + status.innerHTML;
}
}
};
var handleProgress = function(evt) {
progress.max = evt.total;
progress.value = evt.loaded;
};
var getFile = function(evt) {
stageSpan.innerHTML = 'Loading';
var showElems = ['progressPara', 'status'];
for (var i in showElems) {
document.getElementById(showElems[i]).className = '';
}
if (input.files.length == 1) {
var theFile = input.files[0];
// TODO: One day, all browsers will support passing of File blobs
// to the worker and the creation of FileReaders inside workers.
// When that day comes, shove this code into scour.js.
var fr = new FileReader();
// TODO: Use addEventListener when WebKit supports it
// https://bugs.webkit.org/show_bug.cgi?id=42723
fr.onload = function(evt) {
handleMessage({data:
'-------------------------------------------------------------------------------'});
handleMessage({data:'Loaded \'' + theFile.name + '\'' + ' (' + theFile.size + ' bytes)'});
var worker = new Worker('scour.js');
worker.addEventListener('message', handleMessage);
originalSvg = evt.target.result;
var parser = new pdom.DOMParser();
var pdoc = parser.parseFromString(originalSvg);
// TODO: Restore this once pdom is working satisfactorily.
worker.postMessage(originalSvg);
};
fr.onprogress = handleProgress;
fr.readAsText(theFile);
}
};
input.addEventListener('change', getFile, false);
</script>
</html>