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

@ -8,7 +8,10 @@
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<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/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
<script src="{{ url_for('static', filename='js/archive.js') }}"></script>
<script>
@ -23,6 +26,12 @@
<div class="main" id="main">
<div id="titlebar">
<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 id="mainContent">
<div id="mainText" style="display:none"></div>

Loading…
Cancel
Save