207 lines
5 KiB
HTML
207 lines
5 KiB
HTML
<!--
|
|
TODO:
|
|
· Update ComicBook to allow pages to be added after the object is initialised.
|
|
This would allow us to start rendering the comic immediately instead of
|
|
having to wait for the complete archive to be extracted before rendering.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf8">
|
|
<title>App</title>
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
|
|
|
|
<script src="../lib/bitjs/io.js"></script>
|
|
<script src="../lib/bitjs/archive.js"></script>
|
|
<script src="../lib/ComicBook.js"></script>
|
|
<link rel="stylesheet" href="../css/reset.css">
|
|
<link rel="stylesheet" href="../css/Aristo/css/Aristo/Aristo.css">
|
|
<link rel="stylesheet" href="../css/styles.css">
|
|
<style>
|
|
#filepicker {
|
|
margin: 10px;
|
|
}
|
|
.progress, .bar {
|
|
width: 200px;
|
|
height: 1em;
|
|
display: inline-block;
|
|
}
|
|
.progress {
|
|
border: solid 1px;
|
|
}
|
|
.bar {
|
|
width: 0;
|
|
background-color: gray;
|
|
}
|
|
#droptarget {
|
|
width: 100%;
|
|
height: 400px;
|
|
border: dashed 1px gray;
|
|
}
|
|
#droptarget.active {
|
|
border-style: solid;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="filepicker">
|
|
|
|
<input type="file" id="open">
|
|
|
|
<div id="droptarget"></div>
|
|
|
|
<div id="progressbar" style="display:none">
|
|
opening <span id="filename"></span>...
|
|
<br>
|
|
<span class="progress"><span class="bar"></span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="comic" style="display:none"></canvas>
|
|
|
|
<script>
|
|
(function () {
|
|
|
|
'use strict';
|
|
|
|
var $droptarget = $('#droptarget');
|
|
var $progressbar = $('.bar');
|
|
|
|
if (!$.isFunction(window.FileReader)) {
|
|
$('#filepicker').html("Your browser doesn't support the HTML5 FileReader API. <a href='http://browsehappy.com'>http://browsehappy.com</a>.");
|
|
return false;
|
|
}
|
|
|
|
function extractImages(files, opts) {
|
|
|
|
var images = [];
|
|
var fr = new FileReader();
|
|
var file = files[0];
|
|
var re_file_ext = new RegExp(/\.([a-z]+)$/);
|
|
var archive_class = ({ cbz: 'Unzipper', cbr: 'Unrarrer' })[file.name.toLowerCase().match(re_file_ext)[1]];
|
|
var options = $.extend({
|
|
start: function () {},
|
|
extract: function (page_url) {},
|
|
progress: function (percent_complete) {},
|
|
finish: function (images) {},
|
|
}, opts);
|
|
|
|
if (!archive_class) {
|
|
alert('invalid file type, only cbz and cbr are supported.');
|
|
return false;
|
|
}
|
|
|
|
options.start(file);
|
|
|
|
fr.onload = function () {
|
|
|
|
var done = false;
|
|
var ua = new bitjs.archive[archive_class](this.result, '/cbr/lib/bitjs/');
|
|
|
|
ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.EXTRACT, function (e) {
|
|
|
|
var mimetype, blob, url;
|
|
var file_extension = e.unarchivedFile.filename.toLowerCase().match(re_file_ext)[1];
|
|
|
|
switch (file_extension) {
|
|
case 'jpg':
|
|
case 'jpeg':
|
|
mimetype = 'image/jpeg';
|
|
break;
|
|
case 'png':
|
|
mimetype = 'image/png';
|
|
break;
|
|
case 'gif':
|
|
mimetype = 'image/gif';
|
|
break;
|
|
default:
|
|
return false;
|
|
}
|
|
|
|
blob = new Blob([e.unarchivedFile.fileData], { type: mimetype });
|
|
url = window.URL.createObjectURL(blob);
|
|
|
|
images.push(url);
|
|
|
|
options.extract(url, blob);
|
|
});
|
|
|
|
ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.PROGRESS, function (e) {
|
|
options.progress(Math.floor(e.currentBytesUnarchived / e.totalUncompressedBytesInArchive * 100));
|
|
});
|
|
|
|
ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.FINISH, function (e) {
|
|
options.finish(images);
|
|
});
|
|
|
|
ua.start();
|
|
};
|
|
|
|
fr.readAsArrayBuffer(file);
|
|
}
|
|
|
|
function openComicArchive(e) {
|
|
|
|
var title;
|
|
var files = e.target.files || e.originalEvent.dataTransfer.files;
|
|
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
extractImages(files, {
|
|
start: function (file) {
|
|
this.file = file;
|
|
$droptarget.hide();
|
|
$('#open').hide();
|
|
$('#filename').text(file.name);
|
|
$('#progressbar').show();
|
|
},
|
|
extract: function (url, blob) {
|
|
// $('body').append($('<img>').attr('src', url).css('width', '10px'));
|
|
// console.log(url, Math.floor(blob.size / 1024));
|
|
},
|
|
progress: function (percent_complete) {
|
|
$progressbar.css('width', percent_complete + '%');
|
|
},
|
|
finish: function (pages) {
|
|
|
|
var name = this.file.name.replace(/\.[a-z]+$/, '');
|
|
var id = encodeURIComponent(name.toLowerCase());
|
|
var book = new ComicBook('comic', pages);
|
|
|
|
document.title = name;
|
|
|
|
$('#filepicker').hide();
|
|
$('#comic').show();
|
|
|
|
book.draw();
|
|
|
|
$(window).resize(function () {
|
|
book.draw();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
$droptarget.on('dragover', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
$(this).addClass('active');
|
|
});
|
|
|
|
$droptarget.on('dragleave', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
$(this).removeClass('active');
|
|
});
|
|
|
|
$droptarget.on('drop', openComicArchive);
|
|
$('#open').on('change', openComicArchive);
|
|
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|