dan/Mangades
1
0
Fork 0
mirror of https://github.com/danbulant/Mangades synced 2026-09-18 13:53:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved keyboard handling; scroll support for manhwa

Browse source
This commit is contained in:
Daniel Bulant 2021-05-24 17:50:56 +02:00
parent 8fb3fb4848
commit ff1f8d8c0d
1 changed files with 70 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/pages/[manga]/[chapter]/[page].svelte
View file

@ -16,32 +16,65 @@
var quality = "data";
var wasArrowUpUp = true;
var wasArrowDownUp = true;
/**
* @param {KeyboardEvent} e
*/
function keydown(e) {
if(!image.complete) return false;
if(!wasArrowDownUp || !wasArrowUpUp) return;
switch(e.key) {
case "ArrowLeft":
case "PageUp":
case "ArrowUp":
wasArrowUpUp = false;
if(0 < document.scrollingElement.scrollTop) return;
case "ArrowLeft":
prev();
break;
case "ArrowRight":
case "PageDown":
case "ArrowDown":
wasArrowDownUp = false;
if(document.scrollingElement.scrollHeight > document.scrollingElement.offsetHeight + document.scrollingElement.scrollTop) return;
case "ArrowRight":
next();
break;
}
}
/**
* @param {KeyboardEvent} e
*/
function keyup(e) {
switch(e.key) {
case "PageUp":
case "ArrowUp":
wasArrowUpUp = true;
break;
case "PageDown":
case "ArrowDown":
wasArrowDownUp = true;
break;
}
}
function next() {
if(!image.complete) return;
if(page > (chapter.data.attributes[quality].length - 2)) return;
$goto("./" + (parseInt(page) + 1));
document.scrollingElement.scrollTo({
top: 0
});
}
function prev() {
if(!image.complete) return;
if(page < 2) return;
$goto("./" + (page - 1));
document.scrollingElement.scrollTo({
top: 0
});
}
/**
@ -84,7 +117,7 @@
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
if (!xDown || !yDown) {
return;
}
@ -108,9 +141,41 @@
xDown = null;
yDown = null;
};
//for zoom detection
var px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
function isZooming(){
var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
if(newPx_ratio != px_ratio){
px_ratio = newPx_ratio;
console.log("Zoomed to", px_ratio);
}
}
/** @type {number} */
var imageWidth;
/** @type {number} */
var imageHeight = Infinity;
/** @type {HTMLImageElement} */
var image;
var ratio = 0;
$: actualHeight = ratio > 1 ? document.body.clientHeight * ratio : document.body.clientHeight - 17;
/**
* @param {Event} e
*/
function loaded(e) {
/** @type {HTMLImageElement}*/
var image = e.target;
imageWidth = image.naturalWidth;
imageHeight = image.naturalHeight;
ratio = imageHeight / imageWidth - 3;
}
</script>
<svelte:window on:keydown={keydown} />
<svelte:window on:keydown={keydown} on:keyup={keyup} on:resize={isZooming} />
<svelte:head>
<title>{manga.title.en} Chapter {chapter.data.attributes.chapter} Page {page}</title>
@ -120,7 +185,7 @@
<a class="back" href={$url("../..")}>Back to chapter list</a>
</div>
<img draggable={false} on:touchstart={handleTouchStart} on:touchmove={handleTouchMove} on:mousedown={mouseclick} on:mouseup={preventDefault} src={`${atHome}/${quality}/${chapter.data.attributes.hash}/${chapter.data.attributes[quality][page - 1]}`} alt="Page {page} in chapter {chapter.data.attributes.chapter} of {manga.title.en}">
<img draggable={false} bind:this={image} style="height: {actualHeight}px" on:load={loaded} on:touchstart={handleTouchStart} on:touchmove={handleTouchMove} on:mousedown={mouseclick} on:mouseup={preventDefault} src={`${atHome}/${quality}/${chapter.data.attributes.hash}/${chapter.data.attributes[quality][page - 1]}`} alt="Page {page} in chapter {chapter.data.attributes.chapter} of {manga.title.en}">
<div class="bottom">
{#if page > 1}