liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): keyboard navigation between list items

Browse Source
This commit is contained in:
Jake/Rads 2022-06-27 10:58:30 +02:00
parent 07936ec561
commit b70f8d27e7
1 changed files with 78 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
dashboard/src/lib/list/List.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap'; import { Card, CardHeader, CardBody, Alert, Collapse, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Link, useParams } from 'svelte-navigator'; import { link, useParams } from 'svelte-navigator';
import FaLock from 'svelte-icons/fa/FaLock.svelte'; import FaLock from 'svelte-icons/fa/FaLock.svelte';
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'; import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
@ -124,6 +124,38 @@
return url; return url;
} }
let cardIndexArray = [];
function skipToNextItem(event, index: number) {
let el;
if (event.key === "ArrowDown") {
if (cardIndexArray[index + 1]) el = cardIndexArray[index + 1];
else el = cardIndexArray[0];
}
if (event.key === "ArrowUp") {
if (cardIndexArray[index - 1]) el = cardIndexArray[index - 1];
else el = cardIndexArray[cardIndexArray.length - 1];
}
if (el) {
event.preventDefault();
el.focus();
}
}
let isOpenArray = [];
function toggleCard(index: number) {
if (isOpenArray[index] === true) {
isOpenArray[index] = false;
cardIndexArray[index].classList.add("collapsed");
} else {
isOpenArray[index] = true;
cardIndexArray[index].classList.remove("collapsed");
}
}
</script> </script>
<ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue bind:currentPage /> <ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue bind:currentPage />
@ -156,48 +188,56 @@
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true} {#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
<Accordion class="my-3" stayOpen>
{#each slicedList as item, index (item.id + index)} {#each slicedList as item, index (item.id + index)}
<AccordionItem> <Card>
<CardsHeader {item} slot="header"> <h2 class="accordion-header">
<div slot="icon"> <button class="w-100 accordion-button collapsed" bind:this={cardIndexArray[index]} on:click={() => toggleCard(index)} on:keydown={(e) => skipToNextItem(e, index)}>
{#if isPublic || item.privacy.visibility === "public"} <CardsHeader {item}>
<div slot="icon">
{#if isPublic || item.privacy.visibility === "public"}
{#if itemType === "member"}
<FaUserCircle />
{:else if itemType === "group"}
<FaUsers />
{/if}
{:else}
<FaLock />
{/if}
</div>
</CardsHeader>
</button>
</h2>
<Collapse isOpen={isOpenArray[index]}>
<CardBody>
{#if itemType === "member"} {#if itemType === "member"}
<FaUserCircle /> <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
{:else if itemType === "group"} {:else if itemType === "group"}
<FaUsers /> <GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
{/if} {/if}
{:else} </CardBody>
<FaLock /> </Collapse>
{/if} </Card>
</div>
</CardsHeader>
{#if itemType === "member"}
<MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
{:else if itemType === "group"}
<GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
{/if}
</AccordionItem>
{/each} {/each}
</Accordion>
{:else if settings.accessibility.expandedcards} {:else if settings.accessibility.expandedcards}
{#each slicedList as item, index (item.id + index)} {#each slicedList as item, index (item.id + index)}
<Card class="mb-3"> <Card class="mb-3">
<CardHeader> <div bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}>
<CardsHeader {item}> <CardHeader>
<div slot="icon"> <CardsHeader {item}>
{#if isPublic || item.privacy.visibility === "public"} <div slot="icon">
{#if itemType === "member"} {#if isPublic || item.privacy.visibility === "public"}
<FaUserCircle /> {#if itemType === "member"}
{:else if itemType === "group"} <FaUserCircle />
<FaUsers /> {:else if itemType === "group"}
{/if} <FaUsers />
{:else} {/if}
<FaLock /> {:else}
{/if} <FaLock />
</div> {/if}
</CardsHeader> </div>
</CardHeader> </CardsHeader>
</CardHeader>
</div>
<CardBody> <CardBody>
{#if itemType === "member"} {#if itemType === "member"}
<MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} /> <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
@ -211,7 +251,7 @@
<div class="my-3"> <div class="my-3">
{#each slicedList as item, index (item.id + index)} {#each slicedList as item, index (item.id + index)}
<Card> <Card>
<Link class="accordion-button collapsed" style="text-decoration: none;" to={getItemLink(item)}> <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} use:link >
<CardsHeader {item}> <CardsHeader {item}>
<div slot="icon"> <div slot="icon">
{#if isPublic || item.privacy.visibility === "public"} {#if isPublic || item.privacy.visibility === "public"}
@ -225,7 +265,7 @@
{/if} {/if}
</div> </div>
</CardsHeader> </CardsHeader>
</Link> </a>
</Card> </Card>
{/each} {/each}
</div> </div>