parent
5363954095
commit
8b6cd3f49c
GPG Key ID:
284488987C31F630
@ -1,43 +1,75 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Lightbox from './lightbox.svelte';
|
||||
|
||||
let file_list;
|
||||
let open;
|
||||
let thumb_list = [];
|
||||
|
||||
const url = {
|
||||
root: 'https://wg.flanchan.moe/cake/',
|
||||
thumb: 'thumb/',
|
||||
files: 'filelist.txt'
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
file_list = await fetch(url.root + url.files)
|
||||
.then(resp => resp.text())
|
||||
.then(data => data.split('\n'));
|
||||
|
||||
// Loop backwards efficiently.
|
||||
for (let i = file_list.length - 2; i >= 0; i--) {
|
||||
const file = file_list[i];
|
||||
|
||||
// Thumbs are only ever .jpg
|
||||
thumb_list.push(file.substr(0, file.lastIndexOf('.')) + '.jpg');
|
||||
}
|
||||
});
|
||||
|
||||
function open_lightbox(i) {
|
||||
// If `open' is already `i' updates aren't sent to lightbox.
|
||||
open = null;
|
||||
open = i;
|
||||
}
|
||||
import { onMount } from 'svelte';
|
||||
import Lightbox from './lightbox.svelte';
|
||||
|
||||
let file_list;
|
||||
let open;
|
||||
let thumb_list = [];
|
||||
|
||||
const url = {
|
||||
root: 'https://wg.flanchan.moe/cake/',
|
||||
thumb: 'thumb/',
|
||||
files: 'filelist.txt'
|
||||
};
|
||||
|
||||
const fetch_things = async (first_number) => {
|
||||
const file = fetch(url.root + url.files)
|
||||
.then(resp => resp.text())
|
||||
.then(data => data.split('\n'));
|
||||
const thumb = fetch(url.root + url.thumb + url.files)
|
||||
.then(resp => resp.text())
|
||||
.then(data => data.split('\n'));
|
||||
const out = await Promise.all([file, thumb]);
|
||||
|
||||
// If we only want to get first N
|
||||
if(first_number) {
|
||||
(out[0].length > first_number && (out[0].length = first_number));
|
||||
(out[1].length > first_number && (out[0].length = first_number));
|
||||
}
|
||||
|
||||
return {file: out[0], thumb: out[1]};
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
const file_lists = await fetch_things(10);
|
||||
|
||||
const thumbs_resolved = {};
|
||||
|
||||
for(const thumb of file_lists.thumb)
|
||||
{
|
||||
thumbs_resolved[thumb] = true;
|
||||
}
|
||||
|
||||
file_list = [];
|
||||
|
||||
console.log("uhh");
|
||||
// Loop backwards efficiently.
|
||||
for (let i = 1; i < file_lists.file.length; i++) {
|
||||
const file = file_lists.file[i];
|
||||
|
||||
if (/^\s*$/.test(file)) continue;
|
||||
|
||||
// Thumbs are only ever .jpg
|
||||
const thumb_name = file.substr(0, file.lastIndexOf('.')) + '.jpg';
|
||||
if (thumbs_resolved[thumb_name]) {
|
||||
thumb_list.push(thumb_name);
|
||||
file_list.push(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function open_lightbox(i) {
|
||||
// If `open' is already `i' updates aren't sent to lightbox.
|
||||
open = null;
|
||||
open = i;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if file_list}
|
||||
<section class="flex flex-row justify-center flex-wrap">
|
||||
{#each thumb_list as thumb, i}
|
||||
<img class="m-1" on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" />
|
||||
{/each}
|
||||
</section>
|
||||
<section class="flex flex-row justify-center flex-wrap">
|
||||
{#each thumb_list as thumb, i}
|
||||
<img class="m-1" on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" />
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
<Lightbox open={open} url={url} images={file_list} />
|
||||
|
||||
@ -1,126 +1,126 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
export let open;
|
||||
export let url;
|
||||
export let images;
|
||||
|
||||
let slide_classes = '';
|
||||
let class_list = 'lightbox';
|
||||
let should_open = true;
|
||||
import { onMount } from 'svelte';
|
||||
export let open;
|
||||
export let url;
|
||||
export let images;
|
||||
|
||||
let slide_classes = '';
|
||||
let class_list = 'lightbox';
|
||||
let should_open = true;
|
||||
|
||||
$: image = open !== null && open >= 0 ? set_images() : '';
|
||||
$: is_open(open);
|
||||
$: image = open !== null && open >= 0 ? set_images() : '';
|
||||
$: is_open(open);
|
||||
|
||||
// This needs renamed
|
||||
function is_open(i) {
|
||||
if (should_open && i !== null && i >= 0) {
|
||||
class_list += ' open'
|
||||
should_open = false;
|
||||
}
|
||||
}
|
||||
// This needs renamed
|
||||
function is_open(i) {
|
||||
if (should_open && i !== null && i >= 0) {
|
||||
class_list += ' open'
|
||||
should_open = false;
|
||||
}
|
||||
}
|
||||
|
||||
function close(e) {
|
||||
if (e.target.tagName === 'IMG')
|
||||
return;
|
||||
|
||||
if (!should_open) {
|
||||
open = null;
|
||||
should_open = true;
|
||||
class_list = 'lightbox';
|
||||
slide_classes = '';
|
||||
}
|
||||
}
|
||||
|
||||
function set_images() {
|
||||
const img = images.length - (open + 2)
|
||||
return [
|
||||
url.root + images[img - 1],
|
||||
url.root + images[img],
|
||||
url.root + images[img + 1]
|
||||
]
|
||||
}
|
||||
|
||||
function handle_keys(e) {
|
||||
if(should_open)
|
||||
return;
|
||||
function close(e) {
|
||||
if (e.target.tagName === 'IMG')
|
||||
return;
|
||||
|
||||
if (!should_open) {
|
||||
open = null;
|
||||
should_open = true;
|
||||
class_list = 'lightbox';
|
||||
slide_classes = '';
|
||||
}
|
||||
}
|
||||
|
||||
function set_images() {
|
||||
const img = images.length - (open + 2)
|
||||
return [
|
||||
url.root + images[img - 1],
|
||||
url.root + images[img],
|
||||
url.root + images[img + 1]
|
||||
]
|
||||
}
|
||||
|
||||
function handle_keys(e) {
|
||||
if(should_open)
|
||||
return;
|
||||
|
||||
switch(e.key) {
|
||||
case 'ArrowRight':
|
||||
open = open === (images.length - 2) ? 0 : open + 1;
|
||||
slide_classes = 'slide-in-right';
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
open = open === 0 ? images.length - 2 : open - 1;
|
||||
slide_classes = 'slide-in-left';
|
||||
break;
|
||||
}
|
||||
}
|
||||
switch(e.key) {
|
||||
case 'ArrowRight':
|
||||
open = open === (images.length - 2) ? 0 : open + 1;
|
||||
slide_classes = 'slide-in-right';
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
open = open === 0 ? images.length - 2 : open - 1;
|
||||
slide_classes = 'slide-in-left';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
let lightbox = document.getElementById('lightbox');
|
||||
lightbox.addEventListener('animationend', () => slide_classes = '');
|
||||
});
|
||||
onMount(() => {
|
||||
let lightbox = document.getElementById('lightbox');
|
||||
lightbox.addEventListener('animationend', () => slide_classes = '');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.slide-in-right {
|
||||
animation: slide-in-right .3s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
visibility: hidden;
|
||||
transform: translate3d(60%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
animation: slide-in-left .3s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-60%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
transform: translate3d( 0, 0, 0);
|
||||
opactiy: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: -1;
|
||||
.slide-in-right {
|
||||
animation: slide-in-right .3s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
visibility: hidden;
|
||||
transform: translate3d(60%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
animation: slide-in-left .3s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-60%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
transform: translate3d( 0, 0, 0);
|
||||
opactiy: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.open {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
z-index: 0;
|
||||
.open {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:keydown={handle_keys} />
|
||||
|
||||
<div id="lightbox" class="{class_list}" on:click={close}>
|
||||
<header>
|
||||
</header>
|
||||
<img class=" hidden" rel="preload" src="{image[0]}" />
|
||||
<img class="object-contain max-w-full max-h-full {slide_classes}" src="{image[1]}" />
|
||||
<img class="hidden" rel="preload" src="{image[2]}" />
|
||||
<header>
|
||||
</header>
|
||||
<img class=" hidden" rel="preload" src="{image[0]}" />
|
||||
<img class="object-contain max-w-full max-h-full {slide_classes}" src="{image[1]}" />
|
||||
<img class="hidden" rel="preload" src="{image[2]}" />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in new issue