You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.1 KiB
134 lines
3.1 KiB
<script lang="ts">
|
|
import { onMount } from "svelte/internal";
|
|
|
|
import type { EmbeddedFile } from "../main";
|
|
import { appState } from "../stores";
|
|
import { addToEmbeds, getFileFromHydrus } from "../utils";
|
|
import Embedding from "./Embedding.svelte";
|
|
|
|
import Tag from "./Tag.svelte";
|
|
|
|
let tags: string[] = [];
|
|
|
|
let loading = false;
|
|
|
|
function removeTag(t: string) {
|
|
tags = tags.filter((e) => e != t);
|
|
update();
|
|
}
|
|
let maps: [number, EmbeddedFile][] = [];
|
|
|
|
async function update() {
|
|
loading = true;
|
|
if ($appState.client) {
|
|
try {
|
|
if (tags.length == 0) {
|
|
maps = [];
|
|
loading = false;
|
|
return;
|
|
}
|
|
maps = await getFileFromHydrus(
|
|
$appState.client,
|
|
tags.concat(["system:limit=32"]),
|
|
{ file_sort_type: 4 }
|
|
);
|
|
} catch {}
|
|
}
|
|
loading = false;
|
|
}
|
|
|
|
onMount(() => {
|
|
return update();
|
|
});
|
|
|
|
const handleEv = (ev: CustomEvent<MouseEvent>, ef: EmbeddedFile) => {
|
|
if (ev.detail.button == 0) {
|
|
return addToEmbeds(ef);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div class="cont">
|
|
<input
|
|
type="text"
|
|
placeholder="Input a tag here, then press enter"
|
|
on:keydown={(ev) => {
|
|
if (ev.key == "Enter") {
|
|
if (ev.currentTarget.value)
|
|
tags = [...tags, ev.currentTarget.value];
|
|
ev.currentTarget.value = "";
|
|
update();
|
|
}
|
|
}}
|
|
/>
|
|
<details>
|
|
<summary>Tips</summary>
|
|
Press enter without entering a tag to refresh. <br />
|
|
Files are picked randomly <br />
|
|
Click on a file to embed it <br />
|
|
</details>
|
|
<div class="tagcont">
|
|
{#each tags as tag}
|
|
<Tag {tag} on:toggle={() => removeTag(tag)} />
|
|
{/each}
|
|
</div>
|
|
{#if loading}
|
|
Loading...
|
|
{:else}
|
|
<div class="results">
|
|
{#each maps as map (map[0])}
|
|
<Embedding
|
|
on:click={(ev) => handleEv(ev, map[1])}
|
|
inhibitExpand={true}
|
|
id={"only"}
|
|
file={map[1]}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style scoped>
|
|
.results {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-height: 30vh;
|
|
gap: 10px;
|
|
overflow-y: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tagcont {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.cont {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
details {
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
padding: 0.5em 0.5em 0;
|
|
}
|
|
|
|
summary {
|
|
font-weight: bold;
|
|
margin: -0.5em -0.5em 0;
|
|
padding: 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
details[open] {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
details[open] summary {
|
|
border-bottom: 1px solid #aaa;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
</style>
|
|
|