implemented tag cloud
Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
This commit is contained in:
40
frontend/src/routes/tags/Index.svelte
Normal file
40
frontend/src/routes/tags/Index.svelte
Normal file
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import { useTinyRouter } from 'svelte-tiny-router';
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '../../urls.svelte';
|
||||
import { error, yikes } from '../../warn.svelte';
|
||||
import { t } from '../../translations.svelte';
|
||||
|
||||
let router = useTinyRouter();
|
||||
let tags = $state(null);
|
||||
|
||||
function onclick(e){
|
||||
e.preventDefault();
|
||||
var target = e.target;
|
||||
while (target && !target.href) target=target.parentNode;
|
||||
let href = target.getAttribute('href');
|
||||
if (href) router.navigate(href);
|
||||
return false;
|
||||
}
|
||||
|
||||
async function loadTags(){
|
||||
const url = api('tags');
|
||||
const res = await fetch(url,{credentials:'include'});
|
||||
if (res.ok){
|
||||
yikes();
|
||||
tags = await res.json();
|
||||
} else error(res);
|
||||
}
|
||||
|
||||
onMount(loadTags)
|
||||
</script>
|
||||
|
||||
<h1>{t('tags')}</h1>
|
||||
|
||||
<div class="cloud">
|
||||
{#if tags}
|
||||
{#each tags as entry}
|
||||
<a href="/tags/use/{encodeURIComponent(entry.tag)}" class="tag" style="font-size: {40 - 28/entry.count}px" title={t('count_of_occurrences',entry)} {onclick} >{entry.tag}</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user