Merge remote-tracking branch 'Comic/comic_server'
# Conflicts: # cps/helper.py # cps/static/js/archive.js # cps/static/js/io.js # cps/static/js/kthoom.js # cps/static/js/unrar.js # cps/static/js/untar.js # cps/static/js/unzip.js # cps/templates/config_edit.html # cps/templates/detail.html # cps/templates/readcbr.html # cps/templates/stats.html # cps/ub.py # cps/web.py # optional-requirements.txt
This commit is contained in:
OzzieIsaacs
+375
-337
@@ -15,7 +15,7 @@
|
||||
* Typed Arrays: http://www.khronos.org/registry/typedarray/specs/latest/#6
|
||||
|
||||
*/
|
||||
/* global bitjs */
|
||||
/* global screenfull, bitjs */
|
||||
|
||||
if (window.opera) {
|
||||
window.console.log = function(str) {
|
||||
@@ -35,62 +35,69 @@ function getElem(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
if (window.kthoom === undefined) {
|
||||
if (typeof window.kthoom === "undefined" ) {
|
||||
kthoom = {};
|
||||
}
|
||||
|
||||
// key codes
|
||||
kthoom.Key = {
|
||||
ESCAPE: 27,
|
||||
SPACE: 32,
|
||||
LEFT: 37,
|
||||
UP: 38,
|
||||
RIGHT: 39,
|
||||
DOWN: 40,
|
||||
A: 65, B: 66, C: 67, D: 68, E: 69, F: 70, G: 71, H: 72, I: 73, J: 74, K: 75, L: 76, M: 77,
|
||||
DOWN: 40,
|
||||
A: 65, B: 66, C: 67, D: 68, E: 69, F: 70, G: 71, H: 72, I: 73, J: 74, K: 75, L: 76, M: 77,
|
||||
N: 78, O: 79, P: 80, Q: 81, R: 82, S: 83, T: 84, U: 85, V: 86, W: 87, X: 88, Y: 89, Z: 90,
|
||||
QUESTION_MARK: 191,
|
||||
LEFT_SQUARE_BRACKET: 219,
|
||||
RIGHT_SQUARE_BRACKET: 221
|
||||
};
|
||||
|
||||
// The rotation orientation of the comic.
|
||||
kthoom.rotateTimes = 0;
|
||||
|
||||
// global variables
|
||||
var unarchiver = null;
|
||||
var currentImage = 0;
|
||||
var imageFiles = [];
|
||||
var imageFilenames = [];
|
||||
var totalImages = 0;
|
||||
var lastCompletion = 0;
|
||||
|
||||
var hflip = false, vflip = false, fitMode = kthoom.Key.B;
|
||||
var canKeyNext = true, canKeyPrev = true;
|
||||
var settings = {
|
||||
hflip: false,
|
||||
vflip: false,
|
||||
rotateTimes: 0,
|
||||
fitMode: kthoom.Key.B,
|
||||
theme: "light"
|
||||
};
|
||||
|
||||
kthoom.saveSettings = function() {
|
||||
localStorage.kthoomSettings = JSON.stringify({
|
||||
rotateTimes: kthoom.rotateTimes,
|
||||
hflip: hflip,
|
||||
vflip: vflip,
|
||||
fitMode: fitMode
|
||||
});
|
||||
localStorage.kthoomSettings = JSON.stringify(settings);
|
||||
};
|
||||
|
||||
kthoom.loadSettings = function() {
|
||||
try {
|
||||
if (localStorage.kthoomSettings.length < 10){
|
||||
if (!localStorage.kthoomSettings) {
|
||||
return;
|
||||
}
|
||||
var s = JSON.parse(localStorage.kthoomSettings);
|
||||
kthoom.rotateTimes = s.rotateTimes;
|
||||
hflip = s.hflip;
|
||||
vflip = s.vflip;
|
||||
fitMode = s.fitMode;
|
||||
|
||||
$.extend(settings, JSON.parse(localStorage.kthoomSettings));
|
||||
|
||||
kthoom.setSettings();
|
||||
} catch (err) {
|
||||
alert("Error load settings");
|
||||
}
|
||||
};
|
||||
|
||||
kthoom.setSettings = function() {
|
||||
// Set settings control values
|
||||
$.each(settings, function(key, value) {
|
||||
if (typeof value === "boolean") {
|
||||
$("input[name=" + key + "]").prop("checked", value);
|
||||
} else {
|
||||
$("input[name=" + key + "]").val([value]);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var createURLFromArray = function(array, mimeType) {
|
||||
var offset = array.byteOffset, len = array.byteLength;
|
||||
var url;
|
||||
@@ -127,9 +134,6 @@ var createURLFromArray = function(array, mimeType) {
|
||||
|
||||
|
||||
// Stores an image filename and its data: URI.
|
||||
// TODO: investigate if we really need to store as base64 (leave off ;base64 and just
|
||||
// non-safe URL characters are encoded as %xx ?)
|
||||
// This would save 25% on memory since base64-encoded strings are 4/3 the size of the binary
|
||||
kthoom.ImageFile = function(file) {
|
||||
this.filename = file.filename;
|
||||
var fileExtension = file.filename.split(".").pop().toLowerCase();
|
||||
@@ -141,138 +145,13 @@ kthoom.ImageFile = function(file) {
|
||||
};
|
||||
|
||||
|
||||
kthoom.initProgressMeter = function() {
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
var pdiv = $("#progress")[0];
|
||||
var svg = document.createElementNS(svgns, "svg");
|
||||
svg.style.width = "100%";
|
||||
svg.style.height = "100%";
|
||||
|
||||
var defs = document.createElementNS(svgns, "defs");
|
||||
|
||||
var patt = document.createElementNS(svgns, "pattern");
|
||||
patt.id = "progress_pattern";
|
||||
patt.setAttribute("width", "30");
|
||||
patt.setAttribute("height", "20");
|
||||
patt.setAttribute("patternUnits", "userSpaceOnUse");
|
||||
|
||||
var rect = document.createElementNS(svgns, "rect");
|
||||
rect.setAttribute("width", "100%");
|
||||
rect.setAttribute("height", "100%");
|
||||
rect.setAttribute("fill", "#cc2929");
|
||||
|
||||
var poly = document.createElementNS(svgns, "polygon");
|
||||
poly.setAttribute("fill", "yellow");
|
||||
poly.setAttribute("points", "15,0 30,0 15,20 0,20");
|
||||
|
||||
patt.appendChild(rect);
|
||||
patt.appendChild(poly);
|
||||
defs.appendChild(patt);
|
||||
|
||||
svg.appendChild(defs);
|
||||
|
||||
var g = document.createElementNS(svgns, "g");
|
||||
|
||||
var outline = document.createElementNS(svgns, "rect");
|
||||
outline.setAttribute("y", "1");
|
||||
outline.setAttribute("width", "100%");
|
||||
outline.setAttribute("height", "15");
|
||||
outline.setAttribute("fill", "#777");
|
||||
outline.setAttribute("stroke", "white");
|
||||
outline.setAttribute("rx", "5");
|
||||
outline.setAttribute("ry", "5");
|
||||
g.appendChild(outline);
|
||||
|
||||
var title = document.createElementNS(svgns, "text");
|
||||
title.id = "progress_title";
|
||||
title.appendChild(document.createTextNode("0%"));
|
||||
title.setAttribute("y", "13");
|
||||
title.setAttribute("x", "99.5%");
|
||||
title.setAttribute("fill", "white");
|
||||
title.setAttribute("font-size", "12px");
|
||||
title.setAttribute("text-anchor", "end");
|
||||
g.appendChild(title);
|
||||
|
||||
var meter = document.createElementNS(svgns, "rect");
|
||||
meter.id = "meter";
|
||||
meter.setAttribute("width", "0%");
|
||||
meter.setAttribute("height", "17");
|
||||
meter.setAttribute("fill", "url(#progress_pattern)");
|
||||
meter.setAttribute("rx", "5");
|
||||
meter.setAttribute("ry", "5");
|
||||
|
||||
var meter2 = document.createElementNS(svgns, "rect");
|
||||
meter2.id = "meter2";
|
||||
meter2.setAttribute("width", "0%");
|
||||
meter2.setAttribute("height", "17");
|
||||
meter2.setAttribute("opacity", "0.8");
|
||||
meter2.setAttribute("fill", "#007fff");
|
||||
meter2.setAttribute("rx", "5");
|
||||
meter2.setAttribute("ry", "5");
|
||||
|
||||
g.appendChild(meter);
|
||||
g.appendChild(meter2);
|
||||
|
||||
var page = document.createElementNS(svgns, "text");
|
||||
page.id = "page";
|
||||
page.appendChild(document.createTextNode("0/0"));
|
||||
page.setAttribute("y", "13");
|
||||
page.setAttribute("x", "0.5%");
|
||||
page.setAttribute("fill", "white");
|
||||
page.setAttribute("font-size", "12px");
|
||||
g.appendChild(page);
|
||||
|
||||
|
||||
svg.appendChild(g);
|
||||
pdiv.appendChild(svg);
|
||||
var l;
|
||||
svg.onclick = function(e) {
|
||||
for (var x = pdiv, l = 0; x !== document.documentElement; x = x.parentNode) l += x.offsetLeft;
|
||||
var page = Math.max(1, Math.ceil(((e.clientX - l) / pdiv.offsetWidth) * totalImages)) - 1;
|
||||
function initProgressClick() {
|
||||
$("#progress").click(function(e) {
|
||||
var page = Math.max(1, Math.ceil((e.offsetX / $(this).width()) * totalImages)) - 1;
|
||||
currentImage = page;
|
||||
updatePage();
|
||||
};
|
||||
}
|
||||
|
||||
kthoom.setProgressMeter = function(pct, optLabel) {
|
||||
pct = (pct * 100);
|
||||
var part = 1 / totalImages;
|
||||
var remain = ((pct - lastCompletion) / 100) / part;
|
||||
var fract = Math.min(1, remain);
|
||||
var smartpct = ((imageFiles.length / totalImages) + (fract * part)) * 100;
|
||||
if (totalImages === 0) smartpct = pct;
|
||||
|
||||
// + Math.min((pct - lastCompletion), 100/totalImages * 0.9 + (pct - lastCompletion - 100/totalImages)/2, 100/totalImages);
|
||||
var oldval = parseFloat(getElem("meter").getAttribute("width"));
|
||||
if (isNaN(oldval)) oldval = 0;
|
||||
var weight = 0.5;
|
||||
smartpct = ((weight * smartpct) + ((1 - weight) * oldval));
|
||||
if (pct === 100) smartpct = 100;
|
||||
|
||||
if (!isNaN(smartpct)) {
|
||||
getElem("meter").setAttribute("width", smartpct + "%");
|
||||
}
|
||||
var title = getElem("progress_title");
|
||||
while (title.firstChild) title.removeChild(title.firstChild);
|
||||
|
||||
var labelText = pct.toFixed(2) + "% " + imageFiles.length + "/" + totalImages + "";
|
||||
if (optLabel) {
|
||||
labelText = optLabel + " " + labelText;
|
||||
}
|
||||
title.appendChild(document.createTextNode(labelText));
|
||||
|
||||
getElem("meter2").setAttribute("width",
|
||||
100 * (totalImages === 0 ? 0 : ((currentImage + 1) / totalImages)) + "%");
|
||||
|
||||
var titlePage = getElem("page");
|
||||
while (titlePage.firstChild) titlePage.removeChild(titlePage.firstChild);
|
||||
titlePage.appendChild(document.createTextNode( (currentImage + 1) + "/" + totalImages ));
|
||||
|
||||
if (pct > 0) {
|
||||
//getElem('nav').className = '';
|
||||
getElem("progress").className = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function loadFromArrayBuffer(ab) {
|
||||
var start = (new Date).getTime();
|
||||
@@ -291,8 +170,7 @@ function loadFromArrayBuffer(ab) {
|
||||
function(e) {
|
||||
var percentage = e.currentBytesUnarchived / e.totalUncompressedBytesInArchive;
|
||||
totalImages = e.totalFilesInArchive;
|
||||
kthoom.setProgressMeter(percentage, "Unzipping");
|
||||
// display nav
|
||||
updateProgress(percentage *100);
|
||||
lastCompletion = percentage * 100;
|
||||
});
|
||||
unarchiver.addEventListener(bitjs.archive.UnarchiveEvent.Type.EXTRACT,
|
||||
@@ -304,11 +182,20 @@ function loadFromArrayBuffer(ab) {
|
||||
if (imageFilenames.indexOf(f.filename) === -1) {
|
||||
imageFilenames.push(f.filename);
|
||||
imageFiles.push(new kthoom.ImageFile(f));
|
||||
// add thumbnails to the TOC list
|
||||
$("#thumbnails").append(
|
||||
"<li>" +
|
||||
"<a data-page='" + imageFiles.length + "'>" +
|
||||
"<img src='" + imageFiles[imageFiles.length - 1].dataURI + "'/>" +
|
||||
"<span>" + imageFiles.length + "</span>" +
|
||||
"</a>" +
|
||||
"</li>"
|
||||
);
|
||||
}
|
||||
}
|
||||
// display first page if we haven't yet
|
||||
if (imageFiles.length === currentImage + 1) {
|
||||
updatePage();
|
||||
updatePage(lastCompletion);
|
||||
}
|
||||
});
|
||||
unarchiver.addEventListener(bitjs.archive.UnarchiveEvent.Type.FINISH,
|
||||
@@ -322,19 +209,54 @@ function loadFromArrayBuffer(ab) {
|
||||
}
|
||||
}
|
||||
|
||||
function scrollTocToActive() {
|
||||
// Scroll to the thumbnail in the TOC on page change
|
||||
$('#tocView').stop().animate({
|
||||
scrollTop: $('#tocView a.active').position().top
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function updatePage() {
|
||||
var title = getElem("page");
|
||||
while (title.firstChild) title.removeChild(title.firstChild);
|
||||
title.appendChild(document.createTextNode( (currentImage + 1 ) + "/" + totalImages ));
|
||||
$('.page').text((currentImage + 1 ) + "/" + totalImages);
|
||||
|
||||
// Mark the current page in the TOC
|
||||
$('#tocView a[data-page]')
|
||||
// Remove the currently active thumbnail
|
||||
.removeClass('active')
|
||||
// Find the new one
|
||||
.filter('[data-page='+ (currentImage + 1) +']')
|
||||
// Set it to active
|
||||
.addClass('active');
|
||||
|
||||
scrollTocToActive();
|
||||
updateProgress();
|
||||
|
||||
getElem("meter2").setAttribute("width",
|
||||
100 * (totalImages === 0 ? 0 : ((currentImage + 1 ) / totalImages)) + "%");
|
||||
if (imageFiles[currentImage]) {
|
||||
setImage(imageFiles[currentImage].dataURI);
|
||||
} else {
|
||||
setImage("loading");
|
||||
}
|
||||
|
||||
$("body").toggleClass("dark-theme", settings.theme === "dark");
|
||||
|
||||
kthoom.setSettings();
|
||||
kthoom.saveSettings();
|
||||
}
|
||||
|
||||
function updateProgress(loadPercentage) {
|
||||
// Set the load/unzip progress if it's passed in
|
||||
if (loadPercentage) {
|
||||
$("#progress .bar-load").css({ width: loadPercentage + "%" });
|
||||
|
||||
if (loadPercentage === 100) {
|
||||
$("#progress")
|
||||
.removeClass('loading')
|
||||
.find(".load").text('');
|
||||
}
|
||||
}
|
||||
|
||||
// Set page progress bar
|
||||
$("#progress .bar-read").css({ width: totalImages === 0 ? 0 : Math.round((currentImage + 1) / totalImages * 100) + "%"});
|
||||
}
|
||||
|
||||
function setImage(url) {
|
||||
@@ -345,81 +267,92 @@ function setImage(url) {
|
||||
updateScale(true);
|
||||
canvas.width = innerWidth - 100;
|
||||
canvas.height = 200;
|
||||
x.fillStyle = "red";
|
||||
x.font = "50px sans-serif";
|
||||
x.fillStyle = "black";
|
||||
x.textAlign = "center";
|
||||
x.font = "24px sans-serif";
|
||||
x.strokeStyle = "black";
|
||||
x.fillText("Loading Page #" + (currentImage + 1), 100, 100);
|
||||
x.fillText("Loading Page #" + (currentImage + 1), innerWidth / 2, 100);
|
||||
} else {
|
||||
if ($("body").css("scrollHeight") / innerHeight > 1) {
|
||||
$("body").css("overflowY", "scroll");
|
||||
}
|
||||
|
||||
var img = new Image();
|
||||
img.onerror = function() {
|
||||
canvas.width = innerWidth - 100;
|
||||
canvas.height = 300;
|
||||
if (url === "error") {
|
||||
updateScale(true);
|
||||
x.fillStyle = "orange";
|
||||
x.font = "50px sans-serif";
|
||||
canvas.width = innerWidth - 100;
|
||||
canvas.height = 200;
|
||||
x.fillStyle = "black";
|
||||
x.textAlign = "center";
|
||||
x.font = "24px sans-serif";
|
||||
x.strokeStyle = "black";
|
||||
x.fillText("Page #" + (currentImage + 1) + " (" +
|
||||
imageFiles[currentImage].filename + ")", 100, 100);
|
||||
x.fillStyle = "red";
|
||||
x.fillText("Is corrupt or not an image", 100, 200);
|
||||
x.fillText("Unable to decompress image #" + (currentImage + 1), innerWidth / 2, 100);
|
||||
} else {
|
||||
if ($("body").css("scrollHeight") / innerHeight > 1) {
|
||||
$("body").css("overflowY", "scroll");
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
if (/(html|htm)$/.test(imageFiles[currentImage].filename)) {
|
||||
xhr.open("GET", url, true);
|
||||
xhr.onload = function() {
|
||||
//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>");
|
||||
var img = new Image();
|
||||
img.onerror = function() {
|
||||
canvas.width = innerWidth - 100;
|
||||
canvas.height = 300;
|
||||
updateScale(true);
|
||||
x.fillStyle = "black";
|
||||
x.font = "50px sans-serif";
|
||||
x.strokeStyle = "black";
|
||||
x.fillText("Page #" + (currentImage + 1) + " (" +
|
||||
imageFiles[currentImage].filename + ")", innerWidth / 2, 100);
|
||||
x.fillStyle = "black";
|
||||
x.fillText("Is corrupt or not an image", innerWidth / 2, 200);
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
if (/(html|htm)$/.test(imageFiles[currentImage].filename)) {
|
||||
xhr.open("GET", url, true);
|
||||
xhr.onload = function() {
|
||||
$("#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) {
|
||||
xhr.open("GET", url, true);
|
||||
xhr.onload = function() {
|
||||
$("#mainText").css("display", "");
|
||||
$("#mainText").innerText(xhr.responseText);
|
||||
};
|
||||
xhr.send(null);
|
||||
}
|
||||
xhr.send(null);
|
||||
} else if (!/(jpg|jpeg|png|gif)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10 * 1024) {
|
||||
xhr.open("GET", url, true);
|
||||
xhr.onload = function() {
|
||||
$("#mainText").css("display", "");
|
||||
$("#mainText").innerText(xhr.responseText);
|
||||
};
|
||||
xhr.send(null);
|
||||
}
|
||||
};
|
||||
img.onload = function() {
|
||||
var h = img.height,
|
||||
w = img.width,
|
||||
sw = w,
|
||||
sh = h;
|
||||
kthoom.rotateTimes = (4 + kthoom.rotateTimes) % 4;
|
||||
x.save();
|
||||
if (kthoom.rotateTimes % 2 === 1) {
|
||||
sh = w;
|
||||
sw = h;
|
||||
}
|
||||
canvas.height = sh;
|
||||
canvas.width = sw;
|
||||
x.translate(sw / 2, sh / 2);
|
||||
x.rotate(Math.PI / 2 * kthoom.rotateTimes);
|
||||
x.translate(-w / 2, -h / 2);
|
||||
if (vflip) {
|
||||
x.scale(1, -1);
|
||||
x.translate(0, -h);
|
||||
}
|
||||
if (hflip) {
|
||||
x.scale(-1, 1);
|
||||
x.translate(-w, 0);
|
||||
}
|
||||
canvas.style.display = "none";
|
||||
scrollTo(0, 0);
|
||||
x.drawImage(img, 0, 0);
|
||||
};
|
||||
img.onload = function() {
|
||||
var h = img.height,
|
||||
w = img.width,
|
||||
sw = w,
|
||||
sh = h;
|
||||
settings.rotateTimes = (4 + settings.rotateTimes) % 4;
|
||||
x.save();
|
||||
if (settings.rotateTimes % 2 === 1) {
|
||||
sh = w;
|
||||
sw = h;
|
||||
}
|
||||
canvas.height = sh;
|
||||
canvas.width = sw;
|
||||
x.translate(sw / 2, sh / 2);
|
||||
x.rotate(Math.PI / 2 * settings.rotateTimes);
|
||||
x.translate(-w / 2, -h / 2);
|
||||
if (settings.vflip) {
|
||||
x.scale(1, -1);
|
||||
x.translate(0, -h);
|
||||
}
|
||||
if (settings.hflip) {
|
||||
x.scale(-1, 1);
|
||||
x.translate(-w, 0);
|
||||
}
|
||||
canvas.style.display = "none";
|
||||
scrollTo(0, 0);
|
||||
x.drawImage(img, 0, 0);
|
||||
|
||||
updateScale();
|
||||
updateScale(false);
|
||||
|
||||
canvas.style.display = "";
|
||||
$("body").css("overflowY", "");
|
||||
x.restore();
|
||||
};
|
||||
img.src = url;
|
||||
canvas.style.display = "";
|
||||
$("body").css("overflowY", "");
|
||||
x.restore();
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -449,149 +382,254 @@ function updateScale(clear) {
|
||||
mainImageStyle.height = "";
|
||||
mainImageStyle.maxWidth = "";
|
||||
mainImageStyle.maxHeight = "";
|
||||
var maxheight = innerHeight - 15;
|
||||
if (!/main/.test(getElem("titlebar").className)) {
|
||||
maxheight -= 25;
|
||||
}
|
||||
if (clear || fitMode === kthoom.Key.N) {
|
||||
} else if (fitMode === kthoom.Key.B) {
|
||||
mainImageStyle.maxWidth = "100%";
|
||||
mainImageStyle.maxHeight = maxheight + "px";
|
||||
} else if (fitMode === kthoom.Key.H) {
|
||||
mainImageStyle.height = maxheight + "px";
|
||||
} else if (fitMode === kthoom.Key.W) {
|
||||
mainImageStyle.width = "100%";
|
||||
var maxheight = innerHeight - 50;
|
||||
|
||||
if (!clear) {
|
||||
switch (settings.fitMode) {
|
||||
case kthoom.Key.B:
|
||||
mainImageStyle.maxWidth = "100%";
|
||||
mainImageStyle.maxHeight = maxheight + "px";
|
||||
break;
|
||||
case kthoom.Key.H:
|
||||
mainImageStyle.height = maxheight + "px";
|
||||
break;
|
||||
case kthoom.Key.W:
|
||||
mainImageStyle.width = "100%";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
$("#mainContent").css({maxHeight: maxheight + 5});
|
||||
kthoom.setSettings();
|
||||
kthoom.saveSettings();
|
||||
}
|
||||
|
||||
function keyHandler(evt) {
|
||||
var code = evt.keyCode;
|
||||
|
||||
if ($("#progress").css("display") === "none"){
|
||||
return;
|
||||
}
|
||||
canKeyNext = (($("body").css("offsetWidth") + $("body").css("scrollLeft")) / $("body").css("scrollWidth")) >= 1;
|
||||
canKeyPrev = (scrollX <= 0);
|
||||
|
||||
if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
|
||||
switch (code) {
|
||||
var hasModifier = evt.ctrlKey || evt.shiftKey || evt.metaKey;
|
||||
switch (evt.keyCode) {
|
||||
case kthoom.Key.LEFT:
|
||||
if (canKeyPrev) showPrevPage();
|
||||
if (hasModifier) break;
|
||||
showPrevPage();
|
||||
break;
|
||||
case kthoom.Key.RIGHT:
|
||||
if (canKeyNext) showNextPage();
|
||||
if (hasModifier) break;
|
||||
showNextPage();
|
||||
break;
|
||||
case kthoom.Key.L:
|
||||
kthoom.rotateTimes--;
|
||||
if (kthoom.rotateTimes < 0) {
|
||||
kthoom.rotateTimes = 3;
|
||||
if (hasModifier) break;
|
||||
settings.rotateTimes--;
|
||||
if (settings.rotateTimes < 0) {
|
||||
settings.rotateTimes = 3;
|
||||
}
|
||||
updatePage();
|
||||
break;
|
||||
case kthoom.Key.R:
|
||||
kthoom.rotateTimes++;
|
||||
if (kthoom.rotateTimes > 3) {
|
||||
kthoom.rotateTimes = 0;
|
||||
if (hasModifier) break;
|
||||
settings.rotateTimes++;
|
||||
if (settings.rotateTimes > 3) {
|
||||
settings.rotateTimes = 0;
|
||||
}
|
||||
updatePage();
|
||||
break;
|
||||
case kthoom.Key.F:
|
||||
if (!hflip && !vflip) {
|
||||
hflip = true;
|
||||
} else if (hflip === true) {
|
||||
vflip = true;
|
||||
hflip = false;
|
||||
} else if (vflip === true) {
|
||||
vflip = false;
|
||||
if (hasModifier) break;
|
||||
if (!settings.hflip && !settings.vflip) {
|
||||
settings.hflip = true;
|
||||
} else if (settings.hflip === true && settings.vflip === true) {
|
||||
settings.vflip = false;
|
||||
settings.hflip = false;
|
||||
} else if (settings.hflip === true) {
|
||||
settings.vflip = true;
|
||||
settings.hflip = false;
|
||||
} else if (settings.vflip === true) {
|
||||
settings.hflip = true;
|
||||
}
|
||||
updatePage();
|
||||
break;
|
||||
case kthoom.Key.W:
|
||||
fitMode = kthoom.Key.W;
|
||||
updateScale();
|
||||
if (hasModifier) break;
|
||||
settings.fitMode = kthoom.Key.W;
|
||||
updateScale(false);
|
||||
break;
|
||||
case kthoom.Key.H:
|
||||
fitMode = kthoom.Key.H;
|
||||
updateScale();
|
||||
if (hasModifier) break;
|
||||
settings.fitMode = kthoom.Key.H;
|
||||
updateScale(false);
|
||||
break;
|
||||
case kthoom.Key.B:
|
||||
fitMode = kthoom.Key.B;
|
||||
updateScale();
|
||||
if (hasModifier) break;
|
||||
settings.fitMode = kthoom.Key.B;
|
||||
updateScale(false);
|
||||
break;
|
||||
case kthoom.Key.N:
|
||||
fitMode = kthoom.Key.N;
|
||||
updateScale();
|
||||
if (hasModifier) break;
|
||||
settings.fitMode = kthoom.Key.N;
|
||||
updateScale(false);
|
||||
break;
|
||||
case kthoom.Key.SPACE:
|
||||
var container = $('#mainContent');
|
||||
var atTop = container.scrollTop() === 0;
|
||||
var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height();
|
||||
|
||||
if (evt.shiftKey && atTop) {
|
||||
evt.preventDefault();
|
||||
// If it's Shift + Space and the container is at the top of the page
|
||||
showPrevPage();
|
||||
} else if (!evt.shiftKey && atBottom) {
|
||||
evt.preventDefault();
|
||||
// If you're at the bottom of the page and you only pressed space
|
||||
showNextPage();
|
||||
container.scrollTop(0);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
//console.log('KeyCode = ' + code);
|
||||
//console.log('KeyCode', evt.keyCode);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function init(filename) {
|
||||
if (!window.FileReader) {
|
||||
alert("Sorry, kthoom will not work with your browser because it does not support the File API. Please try kthoom with Chrome 12+ or Firefox 7+");
|
||||
/*function ImageLoadCallback() {
|
||||
var jso = this.response;
|
||||
// Unable to decompress file, or no response from server
|
||||
if (jso === null) {
|
||||
setImage("error");
|
||||
} else {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("GET", filename);
|
||||
request.responseType = "arraybuffer";
|
||||
request.setRequestHeader("X-Test", "test1");
|
||||
request.setRequestHeader("X-Test", "test2");
|
||||
request.addEventListener("load", function(event) {
|
||||
if (request.status >= 200 && request.status < 300) {
|
||||
loadFromArrayBuffer(request.response);
|
||||
} else {
|
||||
console.warn(request.statusText, request.responseText);
|
||||
}
|
||||
});
|
||||
request.send();
|
||||
kthoom.initProgressMeter();
|
||||
document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
|
||||
updateScale(true);
|
||||
kthoom.loadSettings();
|
||||
$(document).keydown(keyHandler);
|
||||
// IE 11 sometimes sees the response as a string
|
||||
if (typeof jso !== "object") {
|
||||
jso = JSON.parse(jso);
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4);
|
||||
getElem("titlebar").className = f ? "main" : "";
|
||||
updateScale();
|
||||
});
|
||||
if (jso.page !== jso.last) {
|
||||
this.open("GET", this.fileid + "/" + (jso.page + 1));
|
||||
this.addEventListener("load", ImageLoadCallback);
|
||||
this.send();
|
||||
}
|
||||
|
||||
$("#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 = $("#mainContent").width();
|
||||
var mainContentHeight = $("#mainContent").height();
|
||||
var comicWidth = evt.target.clientWidth;
|
||||
var comicHeight = evt.target.clientHeight;
|
||||
var offsetX = (mainContentWidth - comicWidth) / 2;
|
||||
var offsetY = (mainContentHeight - comicHeight) / 2;
|
||||
var clickX = !!evt.offsetX ? evt.offsetX : (evt.clientX - offsetX);
|
||||
var clickY = !!evt.offsetY ? evt.offsetY : (evt.clientY - offsetY);
|
||||
|
||||
// Determine if the user clicked/tapped the left side or the
|
||||
// right side of the page.
|
||||
var clickedPrev = false;
|
||||
switch (kthoom.rotateTimes) {
|
||||
case 0:
|
||||
clickedPrev = clickX < (comicWidth / 2);
|
||||
break;
|
||||
case 1:
|
||||
clickedPrev = clickY < (comicHeight / 2);
|
||||
break;
|
||||
case 2:
|
||||
clickedPrev = clickX > (comicWidth / 2);
|
||||
break;
|
||||
case 3:
|
||||
clickedPrev = clickY > (comicHeight / 2);
|
||||
break;
|
||||
}
|
||||
if (clickedPrev) {
|
||||
showPrevPage();
|
||||
} else {
|
||||
showNextPage();
|
||||
}
|
||||
});
|
||||
loadFromArrayBuffer(jso);
|
||||
}
|
||||
}*/
|
||||
function init(filename) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("GET", filename);
|
||||
request.responseType = "arraybuffer";
|
||||
request.setRequestHeader("X-Test", "test1");
|
||||
request.setRequestHeader("X-Test", "test2");
|
||||
request.addEventListener("load", function(event) {
|
||||
if (request.status >= 200 && request.status < 300) {
|
||||
loadFromArrayBuffer(request.response);
|
||||
} else {
|
||||
console.warn(request.statusText, request.responseText);
|
||||
}
|
||||
});
|
||||
request.send();
|
||||
initProgressClick();
|
||||
document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
|
||||
kthoom.loadSettings();
|
||||
updateScale(true);
|
||||
|
||||
$(document).keydown(keyHandler);
|
||||
|
||||
$(window).resize(function() {
|
||||
updateScale(false);
|
||||
});
|
||||
|
||||
// Open TOC menu
|
||||
$("#slider").click(function() {
|
||||
$("#sidebar").toggleClass("open");
|
||||
$("#main").toggleClass("closed");
|
||||
$(this).toggleClass("icon-menu icon-right");
|
||||
|
||||
// We need this in a timeout because if we call it during the CSS transition, IE11 shakes the page ¯\_(ツ)_/¯
|
||||
setTimeout(function(){
|
||||
// Focus on the TOC or the main content area, depending on which is open
|
||||
$('#main:not(.closed) #mainContent, #sidebar.open #tocView').focus();
|
||||
scrollTocToActive();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Open Settings modal
|
||||
$("#setting").click(function() {
|
||||
$("#settings-modal").toggleClass("md-show");
|
||||
});
|
||||
|
||||
// On Settings input change
|
||||
$("#settings input").on("change", function() {
|
||||
// Get either the checked boolean or the assigned value
|
||||
var value = this.type === "checkbox" ? this.checked : this.value;
|
||||
|
||||
// If it's purely numeric, parse it to an integer
|
||||
value = /^\d+$/.test(value) ? parseInt(value) : value;
|
||||
|
||||
settings[this.name] = value;
|
||||
updatePage();
|
||||
updateScale(false);
|
||||
});
|
||||
|
||||
// Close modal
|
||||
$(".closer, .overlay").click(function() {
|
||||
$(".md-show").removeClass("md-show");
|
||||
});
|
||||
|
||||
// TOC thumbnail pagination
|
||||
$("#thumbnails").on("click", "a", function() {
|
||||
currentImage = $(this).data("page") - 1;
|
||||
updatePage();
|
||||
});
|
||||
|
||||
// Fullscreen mode
|
||||
if (typeof screenfull !== "undefined") {
|
||||
$("#fullscreen").click(function() {
|
||||
screenfull.toggle($("#container")[0]);
|
||||
});
|
||||
|
||||
if (screenfull.raw) {
|
||||
var $button = $("#fullscreen");
|
||||
document.addEventListener(screenfull.raw.fullscreenchange, function() {
|
||||
screenfull.isFullscreen
|
||||
? $button.addClass("icon-resize-small").removeClass("icon-resize-full")
|
||||
: $button.addClass("icon-resize-full").removeClass("icon-resize-small");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Focus the scrollable area so that keyboard scrolling work as expected
|
||||
$('#mainContent').focus();
|
||||
|
||||
$("#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 = $("#mainContent").width();
|
||||
var mainContentHeight = $("#mainContent").height();
|
||||
var comicWidth = evt.target.clientWidth;
|
||||
var comicHeight = evt.target.clientHeight;
|
||||
var offsetX = (mainContentWidth - comicWidth) / 2;
|
||||
var offsetY = (mainContentHeight - comicHeight) / 2;
|
||||
var clickX = evt.offsetX ? evt.offsetX : (evt.clientX - offsetX);
|
||||
var clickY = evt.offsetY ? evt.offsetY : (evt.clientY - offsetY);
|
||||
|
||||
// Determine if the user clicked/tapped the left side or the
|
||||
// right side of the page.
|
||||
var clickedPrev = false;
|
||||
switch (settings.rotateTimes) {
|
||||
case 0:
|
||||
clickedPrev = clickX < (comicWidth / 2);
|
||||
break;
|
||||
case 1:
|
||||
clickedPrev = clickY < (comicHeight / 2);
|
||||
break;
|
||||
case 2:
|
||||
clickedPrev = clickX > (comicWidth / 2);
|
||||
break;
|
||||
case 3:
|
||||
clickedPrev = clickY > (comicHeight / 2);
|
||||
break;
|
||||
}
|
||||
if (clickedPrev) {
|
||||
showPrevPage();
|
||||
} else {
|
||||
showNextPage();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user