79 lines
2 KiB
HTML
79 lines
2 KiB
HTML
<!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/zip.js/zip.js"></script>
|
|
<script src="../lib/zip.js/zip-ext.js"></script>
|
|
<script src="../lib/zip.js/zip-fs.js"></script>
|
|
<script src="../lib/underscore.js"></script>
|
|
<script src="../lib/ComicBook.min.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">
|
|
</head>
|
|
<body>
|
|
|
|
<p id='zipstatus' style="margin:10px"></p>
|
|
|
|
<canvas id="comic"></canvas>
|
|
|
|
<script>
|
|
(function () {
|
|
|
|
'use strict';
|
|
|
|
var book, cbz_url = 'http://localhost/cbr/examples/goldenboy.cbz',
|
|
pages = [],
|
|
status = $('#zipstatus');
|
|
|
|
zip.workerScriptsPath = '/cbr/lib/zip.js/';
|
|
|
|
status.text('opening ' + cbz_url);
|
|
|
|
zip.createReader(new zip.HttpReader(cbz_url), function (zipReader) {
|
|
|
|
zipReader.getEntries(function (entries) {
|
|
|
|
var image_entries = [];
|
|
|
|
entries.forEach(function (entry, i) {
|
|
if (entry.filename.match(/\.(jpg|JPG)$/)) {
|
|
image_entries.push(entry);
|
|
}
|
|
});
|
|
|
|
image_entries.forEach(function (image_entry, i) {
|
|
|
|
image_entry.getData(new zip.BlobWriter('image/jpeg'), function (blob) {
|
|
|
|
status.text('getting page url ' + i);
|
|
|
|
pages.push({ index: i, url: window.URL.createObjectURL(blob) });
|
|
if (pages.length === image_entries.length) {
|
|
pages = _.sortBy(pages, function (page) {
|
|
return page.index;
|
|
});
|
|
status.remove();
|
|
drawBook(pages);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
function drawBook(pages) {
|
|
var book = new ComicBook('comic', _.pluck(pages, 'url'));
|
|
book.draw();
|
|
$(window).resize(function(event) {
|
|
book.draw();
|
|
});
|
|
}
|
|
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|