mirror of
https://github.com/janeczku/calibre-web
synced 2025-11-01 15:53:01 +00:00
Merge enhanced UI from ytilis repro
This commit is contained in:
OzzieIsaacs
@@ -55,9 +55,6 @@ kthoom.Key = {
|
||||
RIGHT_SQUARE_BRACKET: 221
|
||||
};
|
||||
|
||||
// The rotation orientation of the comic.
|
||||
kthoom.rotateTimes = 0;
|
||||
|
||||
// global variables
|
||||
var unarchiver = null;
|
||||
var currentImage = 0;
|
||||
@@ -66,33 +63,45 @@ var imageFilenames = [];
|
||||
var totalImages = 0;
|
||||
var lastCompletion = 0;
|
||||
|
||||
var hflip = false, vflip = false, fitMode = kthoom.Key.B;
|
||||
var settings = {
|
||||
hflip: false,
|
||||
vflip: false,
|
||||
rotateTimes: 0,
|
||||
fitMode: kthoom.Key.B,
|
||||
theme: 'light'
|
||||
};
|
||||
|
||||
var canKeyNext = true, canKeyPrev = true;
|
||||
|
||||
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;
|
||||
@@ -279,6 +288,17 @@ 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>"
|
||||
);
|
||||
//}
|
||||
}
|
||||
var percentage = (ab.page+1) / (ab.last+1);
|
||||
totalImages = ab.last+1;
|
||||
@@ -304,6 +324,11 @@ function updatePage() {
|
||||
} else {
|
||||
setImage("loading");
|
||||
}
|
||||
|
||||
$('body').toggleClass('dark-theme', settings.theme === 'dark');
|
||||
|
||||
kthoom.setSettings();
|
||||
kthoom.saveSettings();
|
||||
}
|
||||
|
||||
function setImage(url) {
|
||||
@@ -359,22 +384,22 @@ function setImage(url) {
|
||||
w = img.width,
|
||||
sw = w,
|
||||
sh = h;
|
||||
kthoom.rotateTimes = (4 + kthoom.rotateTimes) % 4;
|
||||
settings.rotateTimes = (4 + settings.rotateTimes) % 4;
|
||||
x.save();
|
||||
if (kthoom.rotateTimes % 2 === 1) {
|
||||
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 * kthoom.rotateTimes);
|
||||
x.rotate(Math.PI / 2 * settings.rotateTimes);
|
||||
x.translate(-w / 2, -h / 2);
|
||||
if (vflip) {
|
||||
if (settings.vflip) {
|
||||
x.scale(1, -1);
|
||||
x.translate(0, -h);
|
||||
}
|
||||
if (hflip) {
|
||||
if (settings.hflip) {
|
||||
x.scale(-1, 1);
|
||||
x.translate(-w, 0);
|
||||
}
|
||||
@@ -418,19 +443,19 @@ 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) {
|
||||
var maxheight = innerHeight - 50;
|
||||
|
||||
if (clear || settings.fitMode === kthoom.Key.N) {
|
||||
} else if (settings.fitMode === kthoom.Key.B) {
|
||||
mainImageStyle.maxWidth = "100%";
|
||||
mainImageStyle.maxHeight = maxheight + "px";
|
||||
} else if (fitMode === kthoom.Key.H) {
|
||||
} else if (settings.fitMode === kthoom.Key.H) {
|
||||
mainImageStyle.height = maxheight + "px";
|
||||
} else if (fitMode === kthoom.Key.W) {
|
||||
} else if (settings.fitMode === kthoom.Key.W) {
|
||||
mainImageStyle.width = "100%";
|
||||
}
|
||||
$('#mainContent').css({maxHeight: maxheight + 5});
|
||||
kthoom.setSettings();
|
||||
kthoom.saveSettings();
|
||||
}
|
||||
|
||||
@@ -446,50 +471,53 @@ function keyHandler(evt) {
|
||||
if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
|
||||
switch (code) {
|
||||
case kthoom.Key.LEFT:
|
||||
if (canKeyPrev) showPrevPage();
|
||||
showPrevPage();
|
||||
break;
|
||||
case kthoom.Key.RIGHT:
|
||||
if (canKeyNext) showNextPage();
|
||||
showNextPage();
|
||||
break;
|
||||
case kthoom.Key.L:
|
||||
kthoom.rotateTimes--;
|
||||
if (kthoom.rotateTimes < 0) {
|
||||
kthoom.rotateTimes = 3;
|
||||
settings.rotateTimes--;
|
||||
if (settings.rotateTimes < 0) {
|
||||
settings.rotateTimes = 3;
|
||||
}
|
||||
updatePage();
|
||||
break;
|
||||
case kthoom.Key.R:
|
||||
kthoom.rotateTimes++;
|
||||
if (kthoom.rotateTimes > 3) {
|
||||
kthoom.rotateTimes = 0;
|
||||
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 (!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;
|
||||
settings.fitMode = kthoom.Key.W;
|
||||
updateScale();
|
||||
break;
|
||||
case kthoom.Key.H:
|
||||
fitMode = kthoom.Key.H;
|
||||
settings.fitMode = kthoom.Key.H;
|
||||
updateScale();
|
||||
break;
|
||||
case kthoom.Key.B:
|
||||
fitMode = kthoom.Key.B;
|
||||
settings.fitMode = kthoom.Key.B;
|
||||
updateScale();
|
||||
break;
|
||||
case kthoom.Key.N:
|
||||
fitMode = kthoom.Key.N;
|
||||
settings.fitMode = kthoom.Key.N;
|
||||
updateScale();
|
||||
break;
|
||||
default:
|
||||
@@ -520,35 +548,70 @@ function init(fileid) {
|
||||
request.open("GET", fileid);
|
||||
request.responseType = "json";
|
||||
request.fileid=fileid.substring(0,fileid.length - 2);
|
||||
request.addEventListener("load",ImageLoadCallback);/* function(event) {
|
||||
var jso=request.response;
|
||||
if (jso.page!=jso.length)
|
||||
{
|
||||
// var secRequest = new XMLHttpRequest();
|
||||
request.open("GET", fileid + "/../"+(jso.page+1));
|
||||
request.send();
|
||||
//secRequest.responseType = "json";
|
||||
//finished;
|
||||
}
|
||||
loadFromArrayBuffer(jso);
|
||||
|
||||
// var byteArray = new Uint8Array(request.response);
|
||||
// if you want to access the bytes:
|
||||
});*/
|
||||
request.addEventListener("load",ImageLoadCallback);
|
||||
request.send();
|
||||
|
||||
kthoom.initProgressMeter();
|
||||
document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
|
||||
updateScale(true);
|
||||
kthoom.loadSettings();
|
||||
updateScale(true);
|
||||
$(document).keydown(keyHandler);
|
||||
|
||||
$(window).resize(function() {
|
||||
var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4);
|
||||
getElem("titlebar").className = f ? "main" : "";
|
||||
updateScale();
|
||||
});
|
||||
|
||||
// Open TOC menu
|
||||
$("#slider").click(function(evt) {
|
||||
$('#sidebar').toggleClass('open');
|
||||
$('#main').toggleClass('closed');
|
||||
$(this).toggleClass('icon-menu icon-right');
|
||||
});
|
||||
|
||||
// Open Settings modal
|
||||
$("#setting").click(function(evt) {
|
||||
$("#settings-modal").toggleClass('md-show');
|
||||
});
|
||||
|
||||
// On Settings input change
|
||||
$("#settings input").on("change", function(evt){
|
||||
// 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();
|
||||
});
|
||||
|
||||
// Close modal
|
||||
$(".closer, .overlay").click(function(evt) {
|
||||
$(".md-show").removeClass('md-show');
|
||||
});
|
||||
|
||||
// TOC thumbnail pagination
|
||||
$('#thumbnails').on("click", "a", function(evt) {
|
||||
currentImage = $(this).data('page') - 1;
|
||||
updatePage();
|
||||
});
|
||||
|
||||
// Fullscreen mode
|
||||
if (typeof screenfull !== "undefined") {
|
||||
$('#fullscreen').click(function(evt) {
|
||||
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")
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$("#mainImage").click(function(evt) {
|
||||
// Firefox does not support offsetX/Y so we have to manually calculate
|
||||
// where the user clicked in the image.
|
||||
@@ -564,7 +627,7 @@ function init(fileid) {
|
||||
// Determine if the user clicked/tapped the left side or the
|
||||
// right side of the page.
|
||||
var clickedPrev = false;
|
||||
switch (kthoom.rotateTimes) {
|
||||
switch (settings.rotateTimes) {
|
||||
case 0:
|
||||
clickedPrev = clickX < (comicWidth / 2);
|
||||
break;
|
||||
|
||||
Reference in New Issue
Block a user