C-xC-c
/
wirecake
1
0
Fork 0
Code Issues Pull Requests Releases Activity

thumb list resolve

Browse Source
ご主人様
Avril 4 years ago
parent 5363954095
commit 8b6cd3f49c
Signed by: flanchan
GPG Key ID: 284488987C31F630
2 changed files with 177 additions and 145 deletions
Show Stats Download Patch File Download Diff File

106
src/index.svelte
Unescape View File

@ -1,43 +1,75 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Lightbox from './lightbox.svelte'; import Lightbox from './lightbox.svelte';
let file_list; let file_list;
let open; let open;
let thumb_list = []; let thumb_list = [];
const url = { const url = {
root: 'https://wg.flanchan.moe/cake/', root: 'https://wg.flanchan.moe/cake/',
thumb: 'thumb/', thumb: 'thumb/',
files: 'filelist.txt' files: 'filelist.txt'
}; };
onMount(async () => { const fetch_things = async (first_number) => {
file_list = await fetch(url.root + url.files) const file = fetch(url.root + url.files)
.then(resp => resp.text()) .then(resp => resp.text())
.then(data => data.split('\n')); .then(data => data.split('\n'));
const thumb = fetch(url.root + url.thumb + url.files)
// Loop backwards efficiently. .then(resp => resp.text())
for (let i = file_list.length - 2; i >= 0; i--) { .then(data => data.split('\n'));
const file = file_list[i]; const out = await Promise.all([file, thumb]);
// Thumbs are only ever .jpg // If we only want to get first N
thumb_list.push(file.substr(0, file.lastIndexOf('.')) + '.jpg'); if(first_number) {
} (out[0].length > first_number && (out[0].length = first_number));
}); (out[1].length > first_number && (out[0].length = first_number));
}
function open_lightbox(i) {
// If `open' is already `i' updates aren't sent to lightbox. return {file: out[0], thumb: out[1]};
open = null; }
open = i;
} 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> </script>
{#if file_list} {#if file_list}
<section class="flex flex-row justify-center flex-wrap"> <section class="flex flex-row justify-center flex-wrap">
{#each thumb_list as thumb, i} {#each thumb_list as thumb, i}
<img class="m-1" on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" /> <img class="m-1" on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" />
{/each} {/each}
</section> </section>
{/if} {/if}
<Lightbox open={open} url={url} images={file_list} /> <Lightbox open={open} url={url} images={file_list} />

216
src/lightbox.svelte
Unescape View File

@ -1,126 +1,126 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let open; export let open;
export let url; export let url;
export let images; export let images;
let slide_classes = ''; let slide_classes = '';
let class_list = 'lightbox'; let class_list = 'lightbox';
let should_open = true; let should_open = true;
$: image = open !== null && open >= 0 ? set_images() : ''; $: image = open !== null && open >= 0 ? set_images() : '';
$: is_open(open); $: is_open(open);
// This needs renamed // This needs renamed
function is_open(i) { function is_open(i) {
if (should_open && i !== null && i >= 0) { if (should_open && i !== null && i >= 0) {
class_list += ' open' class_list += ' open'
should_open = false; should_open = false;
} }
} }
function close(e) { function close(e) {
if (e.target.tagName === 'IMG') if (e.target.tagName === 'IMG')
return; return;
if (!should_open) { if (!should_open) {
open = null; open = null;
should_open = true; should_open = true;
class_list = 'lightbox'; class_list = 'lightbox';
slide_classes = ''; slide_classes = '';
} }
} }
function set_images() { function set_images() {
const img = images.length - (open + 2) const img = images.length - (open + 2)
return [ return [
url.root + images[img - 1], url.root + images[img - 1],
url.root + images[img], url.root + images[img],
url.root + images[img + 1] url.root + images[img + 1]
] ]
} }
function handle_keys(e) { function handle_keys(e) {
if(should_open) if(should_open)
return; return;
switch(e.key) { switch(e.key) {
case 'ArrowRight': case 'ArrowRight':
open = open === (images.length - 2) ? 0 : open + 1; open = open === (images.length - 2) ? 0 : open + 1;
slide_classes = 'slide-in-right'; slide_classes = 'slide-in-right';
break; break;
case 'ArrowLeft': case 'ArrowLeft':
open = open === 0 ? images.length - 2 : open - 1; open = open === 0 ? images.length - 2 : open - 1;
slide_classes = 'slide-in-left'; slide_classes = 'slide-in-left';
break; break;
} }
} }
onMount(() => { onMount(() => {
let lightbox = document.getElementById('lightbox'); let lightbox = document.getElementById('lightbox');
lightbox.addEventListener('animationend', () => slide_classes = ''); lightbox.addEventListener('animationend', () => slide_classes = '');
}); });
</script> </script>
<style> <style>
.slide-in-right { .slide-in-right {
animation: slide-in-right .3s ease; animation: slide-in-right .3s ease;
} }
@keyframes slide-in-right { @keyframes slide-in-right {
from { from {
visibility: hidden; visibility: hidden;
transform: translate3d(60%, 0, 0); transform: translate3d(60%, 0, 0);
opacity: 0; opacity: 0;
} }
to { to {
visibility: visible; visibility: visible;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity: 1; opacity: 1;
} }
} }
.slide-in-left { .slide-in-left {
animation: slide-in-left .3s ease; animation: slide-in-left .3s ease;
} }
@keyframes slide-in-left { @keyframes slide-in-left {
from { from {
visibility: hidden; visibility: hidden;
transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0);
opacity: 0; opacity: 0;
} }
to { to {
visibility: visible; visibility: visible;
transform: translate3d( 0, 0, 0); transform: translate3d( 0, 0, 0);
opactiy: 1; opactiy: 1;
} }
} }
.lightbox { .lightbox {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: -1; z-index: -1;
} }
.open { .open {
background-color: rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.7);
z-index: 0; z-index: 0;
} }
</style> </style>
<svelte:window on:keydown={handle_keys} /> <svelte:window on:keydown={handle_keys} />
<div id="lightbox" class="{class_list}" on:click={close}> <div id="lightbox" class="{class_list}" on:click={close}>
<header> <header>
</header> </header>
<img class=" hidden" rel="preload" src="{image[0]}" /> <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="object-contain max-w-full max-h-full {slide_classes}" src="{image[1]}" />
<img class="hidden" rel="preload" src="{image[2]}" /> <img class="hidden" rel="preload" src="{image[2]}" />
</div> </div>

Write Preview
Loading…
Cancel
Save