Random manga button

This commit is contained in:
Daniel Bulant 2021-05-23 18:04:23 +02:00
parent b9a9aec1d2
commit 6f179b5f52

View file

@ -2,7 +2,7 @@
import { params } from '@roxi/routify' import { params } from '@roxi/routify'
import request from "../util/request"; import request from "../util/request";
import ratelimit from "../util/ratelimit"; import ratelimit from "../util/ratelimit";
import { url } from '@roxi/routify/runtime/helpers'; import { goto, url } from '@roxi/routify/runtime/helpers';
var name = $params.search; var name = $params.search;
$: { $: {
@ -39,7 +39,7 @@
*/ */
async function scroll(e) { async function scroll(e) {
if(scrollSearch !== null) return; if(scrollSearch !== null) return;
if(document.body.scrollHeight - window.scrollY - window.innerHeight < 100 && (await result).results.length < (await result).total) { if(document.body.scrollHeight - window.scrollY - window.innerHeight < 300 && (await result).results.length < (await result).total) {
scrollSearch = name; scrollSearch = name;
const res = await search(name, (await result).results.length); const res = await search(name, (await result).results.length);
if(scrollSearch === name && res.results.length) { if(scrollSearch === name && res.results.length) {
@ -51,6 +51,13 @@
}, 500); }, 500);
} }
} }
var randomMangaLoading = false;
async function randomManga() {
randomMangaLoading = true;
const res = await request("manga/random");
$goto("./" + res.data.id);
}
</script> </script>
<svelte:window on:scroll={scroll} /> <svelte:window on:scroll={scroll} />
@ -68,10 +75,16 @@
{#await result} {#await result}
Loading... Loading...
{:then result} {:then result}
<br> <div class="flex">
Showing results: {result.results.length} <div>
<br> Showing results: {result.results.length}
Total results: {result.total} <br>
Total results: {result.total}
</div>
<div>
<button on:click={() => randomManga()} disabled={randomMangaLoading}>Random</button>
</div>
</div>
<ul> <ul>
{#each result.results as manga} {#each result.results as manga}
<li> <li>
@ -92,5 +105,10 @@
<style> <style>
input { input {
width: 100%; width: 100%;
margin-bottom: 5px;
}
.flex {
display: flex;
justify-content: space-between;
} }
</style> </style>