yetangitu/html5-comic-book-reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Started library code, improved display css.

Browse source
This commit is contained in:
Robert Kuykendall 2015-01-14 08:52:57 -06:00
parent 45ed9d07d0
commit 71ce7a8ba4
19 changed files with 73 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

0
README.md Normal file → Executable file
View file

0
bootstrap/css/bootstrap-responsive.css vendored Normal file → Executable file
View file

0
bootstrap/css/bootstrap-responsive.min.css vendored Normal file → Executable file
View file

0
bootstrap/css/bootstrap.css vendored Normal file → Executable file
View file

0
bootstrap/css/bootstrap.min.css vendored Normal file → Executable file
View file

0
bootstrap/img/glyphicons-halflings-white.png Normal file → Executable file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Before After
Before After

0
bootstrap/img/glyphicons-halflings.png Normal file → Executable file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

0
bootstrap/js/bootstrap.js vendored Normal file → Executable file
View file

0
bootstrap/js/bootstrap.min.js vendored Normal file → Executable file
View file

0
html5_logo.png Normal file → Executable file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

30
index.html Normal file → Executable file
View file

@ -30,7 +30,7 @@
font-family: "Open Sans", Helvetica, Arial, Sans-serif; font-family: "Open Sans", Helvetica, Arial, Sans-serif;
} }
body { body {
background: #171717 url('html5_logo.png') no-repeat bottom right; background: #111 url('html5_logo.png') no-repeat bottom right;
background-size: 256px 256px; background-size: 256px 256px;
color: #999; color: #999;
} }
@ -46,12 +46,11 @@
#introText { #introText {
margin-top: 100px; margin-top: 100px;
} }
.fit {
height: 100vh;
}
.fitVertical { .fitVertical {
height: 100%; height: 100%;
height: -moz-calc(100% - 41px);
height: -webkit-calc(100% - 41px);
height: calc(100% - 41px);
width: auto; width: auto;
} }
.spread2 .fitHorizontal { .spread2 .fitHorizontal {
@ -67,10 +66,7 @@
width: auto; width: auto;
height: auto; height: auto;
max-height: 100%; max-height: 100%;
max-height: -moz-calc(100% - 41px); }
max-height: -webkit-calc(100% - 41px);
max-height: calc(100% - 41px);
}
.spread1 .fitBoth { .spread1 .fitBoth {
max-width: 100%; max-width: 100%;
} }
@ -81,16 +77,10 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<div class="navbar navbar-inverse navbar-static-top"> <div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <a class="brand" href="#">Web Slinger</a>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Web Slinger Comic Reader</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
@ -124,7 +114,7 @@
<div class="modal hide" id="statusModal"> <div class="modal hide" id="statusModal">
<div class="modal-header"> <div class="modal-header">
<h3>Uploading your comic.</h3> <h3>Loading your comic.</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p id="statusModalText"></p> <p id="statusModalText"></p>

0
js/deflate.js Normal file → Executable file
View file

0
js/inflate.js Normal file → Executable file
View file

0
js/jquery-1.9.1.min.js vendored Normal file → Executable file
View file

0
js/jquery.hotkeys.js Normal file → Executable file
View file

68
js/main.js Normal file → Executable file
View file

@ -10,7 +10,55 @@ function errorHandler(e) {
console.dir(e); console.dir(e);
} }
function getSearchParameters() {
var prmstr = window.location.search.substr(1);
return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}
function transformToAssocArray( prmstr ) {
var params = {};
var prmarr = prmstr.split("&");
for ( var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split("=");
params[tmparr[0]] = tmparr[1];
}
return params;
}
function init() { function init() {
var params = getSearchParameters();
if(params['library'] !== undefined) {
var modalString = 'Downloading comic from library.';
$("#statusModalText").html(modalString);
$("#statusModal").modal({keyboard:false});
console.log('Library = '+params['library']);
// Get file from library
var xhr = new XMLHttpRequest();
xhr.open('GET', 'library/'+params['library'], true);
xhr.responseType = 'blob';
xhr.onprogress = function(e) {
var done = e.position || e.loaded;
var total = e.totalSize || e.total;
var present = Math.floor(done / total * 100);
var pString = 'Downloading comic from library.';
pString += '<div class="progress progress-striped active">';
pString += '<div class="bar" style="width: '+present+'%;"></div>';
pString += '</div>';
$("#statusModalText").html(pString);
};
xhr.onload = function(e) {
if (this.status == 200) {
var myBlob = this.response;
handleFile(myBlob);
}
};
xhr.send();
}
// Upload file
window.webkitStorageInfo.requestQuota(window.TEMPORARY, 20*1024*1024, function(grantedBytes) { window.webkitStorageInfo.requestQuota(window.TEMPORARY, 20*1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(window.TEMPORARY, grantedBytes, onInitFs, errorHandler); window.webkitRequestFileSystem(window.TEMPORARY, grantedBytes, onInitFs, errorHandler);
}, errorHandler); }, errorHandler);
@ -20,7 +68,6 @@ function init() {
function onInitFs(fs) { function onInitFs(fs) {
dir = fs.root; dir = fs.root;
$(document).on("dragover", dragOverHandler); $(document).on("dragover", dragOverHandler);
$(document).on("drop", dropHandler); $(document).on("drop", dropHandler);
console.log('onInitFs done, new'); console.log('onInitFs done, new');
} }
@ -139,7 +186,17 @@ function handleFile(file) {
$("#singlePage").on("click",singleSpread); $("#singlePage").on("click",singleSpread);
$(document).bind('keydown', 's', singleSpread); $(document).bind('keydown', 's', singleSpread);
spread(1); // drawPanel(0); var i = null;
$("body").mousemove(function() {
clearTimeout(i);
$("#navbar").fadeIn();
i = setTimeout('$("#navbar").fadeOut();', 1000);
}).mouseleave(function() {
clearTimeout(i);
$("#navbar").hide();
});
singleSpread();
} }
}); });
}, errorHandler); }, errorHandler);
@ -156,7 +213,6 @@ function handleFile(file) {
function drawPanel(num) { function drawPanel(num) {
curPanel = num; curPanel = num;
$("#comicImages img").each(function( index ) { $("#comicImages img").each(function( index ) {
if (num+index >= images.length || num+index < 0) { if (num+index >= images.length || num+index < 0) {
$(this).hide(); $(this).hide();
@ -178,6 +234,7 @@ function nextPanel() {
} }
function fitHorizontal() { function fitHorizontal() {
$("#comicImages").removeClass();
$("#comicImages img").removeClass(); $("#comicImages img").removeClass();
$("#comicImages img").addClass('fitHorizontal'); $("#comicImages img").addClass('fitHorizontal');
} }
@ -185,14 +242,15 @@ function fitHorizontal() {
function fitVertical() { function fitVertical() {
$("#comicImages img").removeClass(); $("#comicImages img").removeClass();
$("#comicImages img").addClass('fitVertical'); $("#comicImages img").addClass('fitVertical');
$("#comicImages").addClass('fit');
} }
function fitBoth() { function fitBoth() {
$("#comicImages img").removeClass(); $("#comicImages img").removeClass();
$("#comicImages img").addClass('fitBoth'); $("#comicImages img").addClass('fitBoth');
$("#comicImages").addClass('fit');
} }
function singleSpread() { $("#singlePage").parent().hide(); $("#fullSpread").parent().show(); spread(1); } function singleSpread() { $("#singlePage").parent().hide(); $("#fullSpread").parent().show(); spread(1); }
function fullSpread() { $("#singlePage").parent().show(); $("#fullSpread").parent().hide(); spread(2); } function fullSpread() { $("#singlePage").parent().show(); $("#fullSpread").parent().hide(); spread(2); }
function spread(num) { function spread(num) {

0
js/mime-types.js Normal file → Executable file
View file

0
js/zip-fs.js Normal file → Executable file
View file

0
js/zip.js Normal file → Executable file
View file