Update comic reader
This commit is contained in:
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…
Reference in New Issue
Block a user