mirror of
https://github.com/NoCrypt/migu.git
synced 2026-01-11 20:10:22 +00:00
88 lines
2.3 KiB
Svelte
88 lines
2.3 KiB
Svelte
<script context='module'>
|
|
const fakecards = Array.from({ length: 15 }, () => ({ data: new Promise(() => {}) }))
|
|
</script>
|
|
|
|
<script>
|
|
import Card from '@/components/cards/Card.svelte'
|
|
import ErrorCard from '@/components/cards/ErrorCard.svelte'
|
|
import { search } from '../Search.svelte'
|
|
import { page } from '@/App.svelte'
|
|
import { click } from '@/modules/click.js'
|
|
import { SUPPORTS } from '@/modules/support.js';
|
|
|
|
export let opts
|
|
|
|
function deferredLoad (element) {
|
|
const observer = new IntersectionObserver(([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
if (!opts.preview.value) opts.preview.value = opts.load(1, 15, { ...opts.variables })
|
|
observer.unobserve(element)
|
|
}
|
|
}, { threshold: 0 })
|
|
observer.observe(element)
|
|
|
|
return { destroy () { observer.unobserve(element) } }
|
|
}
|
|
|
|
function _click () {
|
|
$search = {
|
|
...opts.variables,
|
|
load: opts.load,
|
|
title: opts.title,
|
|
}
|
|
$page = 'search'
|
|
}
|
|
const preview = opts.preview
|
|
</script>
|
|
|
|
<span class='d-flex px-20 align-items-end pointer text-decoration-none text-muted'
|
|
use:deferredLoad>
|
|
<div class='font-size-24 font-weight-semi-bold' use:click={_click}>{opts.title}</div>
|
|
<div class='pr-10 ml-auto font-size-12' use:click={_click}>View More</div>
|
|
</span>
|
|
<div class='position-relative '>
|
|
<div class='pb-10 w-full d-flex flex-row justify-content-start gallery'
|
|
class:isRSS={opts.isRSS}
|
|
class:overflow-x-scroll={opts.isRSS && SUPPORTS.isAndroid}
|
|
class:fader={!SUPPORTS.isAndroid}
|
|
>
|
|
{#each $preview || fakecards as card}
|
|
<Card {card} variables={{...opts.variables}} />
|
|
{/each}
|
|
{#if $preview?.length}
|
|
<ErrorCard promise={$preview[0].data} />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.gallery :global(.first-check:first-child) :global(.absolute-container) {
|
|
left: -48% !important
|
|
}
|
|
.text-muted:hover {
|
|
color: var(--dm-link-text-color-hover) !important;
|
|
}
|
|
|
|
.fader:after {
|
|
background: var(--section-end-gradient);
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 8rem;
|
|
pointer-events: none;
|
|
}
|
|
.gallery {
|
|
overflow-x: scroll;
|
|
flex-shrink: 0;
|
|
}
|
|
.gallery.isRSS {
|
|
overflow-x: clip;
|
|
}
|
|
.gallery :global(.item.small-card) {
|
|
width: 19rem !important
|
|
}
|
|
.gallery::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|