Update comic reader

pull/346/head
OzzieIsaacs 7 years ago
parent fe4d11fea8
commit 85068d75bf

@ -110,7 +110,7 @@ kthoom.ImageFile = function(file) {
kthoom.initProgressMeter = function() { kthoom.initProgressMeter = function() {
var svgns = 'http://www.w3.org/2000/svg'; var svgns = 'http://www.w3.org/2000/svg';
var pdiv = document.getElementById('progress'); var pdiv = $('#progress')[0]; // document.getElementById('progress');
var svg = document.createElementNS(svgns, 'svg'); var svg = document.createElementNS(svgns, 'svg');
svg.style.width = '100%'; svg.style.width = '100%';
svg.style.height = '100%'; svg.style.height = '100%';
@ -337,9 +337,9 @@ function updatePage() {
} }
function setImage(url) { function setImage(url) {
var canvas = getElem('mainImage'); var canvas = $("#mainImage")[0];
var x = canvas.getContext('2d'); var x = $("#mainImage")[0].getContext('2d');
document.getElementById('mainText').style.display = 'none'; $('#mainText').hide();
if (url == 'loading') { if (url == 'loading') {
updateScale(true); updateScale(true);
canvas.width = innerWidth - 100; canvas.width = innerWidth - 100;
@ -349,8 +349,8 @@ function setImage(url) {
x.strokeStyle = 'black'; x.strokeStyle = 'black';
x.fillText('Loading Page #' + (currentImage + 1), 100, 100) x.fillText('Loading Page #' + (currentImage + 1), 100, 100)
} else { } else {
if (document.body.scrollHeight/innerHeight > 1) { if ($('body').css('scrollHeight')/innerHeight > 1) {
document.body.style.overflowY = 'scroll'; $('body').css('overflowY', 'scroll');
} }
var img = new Image(); var img = new Image();
@ -370,16 +370,17 @@ function setImage(url) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.onload = function() { xhr.onload = function() {
document.getElementById('mainText').style.display = ''; //document.getElementById('mainText').style.display = '';
document.getElementById('mainText').innerHTML = '<iframe style="width:100%;height:700px;border:0" src="data:text/html,'+escape(xhr.responseText)+'"></iframe>'; $("#mainText").css("display", "");
$("#mainText").innerHTML('<iframe style="width:100%;height:700px;border:0" src="data:text/html,'+escape(xhr.responseText)+'"></iframe>');
} }
xhr.send(null); xhr.send(null);
} else if (!/(jpg|jpeg|png|gif)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10*1024) { } else if (!/(jpg|jpeg|png|gif)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10*1024) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.onload = function() { xhr.onload = function() {
document.getElementById('mainText').style.display = ''; $("#mainText").css("display", "");
document.getElementById('mainText').innerText = xhr.responseText; $("#mainText").innerText(xhr.responseText);
}; };
xhr.send(null); xhr.send(null);
} }
@ -412,7 +413,7 @@ function setImage(url) {
updateScale(); updateScale();
canvas.style.display = ''; canvas.style.display = '';
document.body.style.overflowY = ''; $("body").css("overflowY", "");
x.restore(); x.restore();
}; };
img.src = url; img.src = url;
@ -480,43 +481,18 @@ function updateScale(clear) {
function keyHandler(evt) { function keyHandler(evt) {
var code = evt.keyCode; var code = evt.keyCode;
// If the overlay is shown, the only keystroke we handle is closing it.
var overlayStyle = getElem('overlay').style;
var overlayShown = (overlayStyle.display != 'none');
if (overlayShown) {
if (code == kthoom.Key.QUESTION_MARK || code == kthoom.Key.ESCAPE) {
getElem('menu').classList.remove('opened');
overlayStyle.display = 'none';
}
return;
}
if (getComputedStyle(getElem('progress')).display == 'none') return; if (getComputedStyle(getElem('progress')).display == 'none') return;
canKeyNext = ((document.body.offsetWidth+document.body.scrollLeft)/ document.body.scrollWidth) >= 1; canKeyNext = ((document.body.offsetWidth+document.body.scrollLeft)/ document.body.scrollWidth) >= 1;
canKeyPrev = (scrollX <= 0); canKeyPrev = (scrollX <= 0);
if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return; if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
switch(code) { switch(code) {
case kthoom.Key.X:
toggleToolbar();
break;
case kthoom.Key.LEFT: case kthoom.Key.LEFT:
if (canKeyPrev) showPrevPage(); if (canKeyPrev) showPrevPage();
break; break;
case kthoom.Key.RIGHT: case kthoom.Key.RIGHT:
if (canKeyNext) showNextPage(); if (canKeyNext) showNextPage();
break; break;
case kthoom.Key.LEFT_SQUARE_BRACKET:
if (library.currentBookNum > 0) {
loadPrevBook();
}
break;
case kthoom.Key.RIGHT_SQUARE_BRACKET:
if (library.currentBookNum < library.allBooks.length - 1) {
loadNextBook();
}
break;
case kthoom.Key.L: case kthoom.Key.L:
kthoom.rotateTimes--; kthoom.rotateTimes--;
if (kthoom.rotateTimes < 0) { if (kthoom.rotateTimes < 0) {
@ -585,13 +561,15 @@ function init(filename) {
document.body.className += /AppleWebKit/.test(navigator.userAgent) ? ' webkit' : ''; document.body.className += /AppleWebKit/.test(navigator.userAgent) ? ' webkit' : '';
//kthoom.resetFileUploader(); //kthoom.resetFileUploader();
kthoom.loadSettings(); kthoom.loadSettings();
document.addEventListener('keydown', keyHandler, false); $(document).keydown(keyHandler);
window.addEventListener('resize', function() {
$(window).resize(function() {
var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4); var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4);
getElem('titlebar').className = f ? 'main' : ''; getElem('titlebar').className = f ? 'main' : '';
updateScale(); updateScale();
}, false); });
getElem('mainImage').addEventListener('click', function(evt) {
$('#mainImage').click(function(evt) {
// Firefox does not support offsetX/Y so we have to manually calculate // Firefox does not support offsetX/Y so we have to manually calculate
// where the user clicked in the image. // where the user clicked in the image.
var mainContentWidth = getElem('mainContent').clientWidth; var mainContentWidth = getElem('mainContent').clientWidth;
@ -625,6 +603,6 @@ function init(filename) {
} else { } else {
showNextPage(); showNextPage();
} }
}, false); });
} }
} }

@ -8,7 +8,10 @@
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/>
<link href="{{ url_for('static', filename='css/libs/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script> <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script> <script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
<script src="{{ url_for('static', filename='js/archive.js') }}"></script> <script src="{{ url_for('static', filename='js/archive.js') }}"></script>
<script> <script>
@ -23,6 +26,12 @@
<div class="main" id="main"> <div class="main" id="main">
<div id="titlebar"> <div id="titlebar">
<div id="progress" class="hide"></div> <div id="progress" class="hide"></div>
<div class="progress2" style="display:none">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div> </div>
<div id="mainContent"> <div id="mainContent">
<div id="mainText" style="display:none"></div> <div id="mainText" style="display:none"></div>

Loading…
Cancel
Save