From 8b6cd3f49c58922af22936711d7dbc76b29a7f16 Mon Sep 17 00:00:00 2001
From: Avril <flanchan@cumallover.me>
Date: Sun, 9 Aug 2020 17:50:00 +0100
Subject: [PATCH] thumb list resolve

---
 src/index.svelte    | 106 ++++++++++++++--------
 src/lightbox.svelte | 216 ++++++++++++++++++++++----------------------
 2 files changed, 177 insertions(+), 145 deletions(-)

diff --git a/src/index.svelte b/src/index.svelte
index 99728ac..7686504 100644
--- a/src/index.svelte
+++ b/src/index.svelte
@@ -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} />
diff --git a/src/lightbox.svelte b/src/lightbox.svelte
index db3cb76..f9e53ea 100644
--- a/src/lightbox.svelte
+++ b/src/lightbox.svelte
@@ -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>