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

fix(dashboard): card navigation randomly breaking

Browse Source 
because svelte randomly sets bind:this in an array to null for an entire page, for reasons I do not know, im just doing it directly with ids
This commit is contained in:
Jake/Rads 2022-06-27 16:53:52 +02:00
parent 239043bc61
commit e868b2c5d3
5 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
dashboard/src/lib/list/CardsList.svelte
View File

@ -22,13 +22,12 @@
export let isMainDash: boolean; export let isMainDash: boolean;
export let itemsPerPage: number; export let itemsPerPage: number;
export let currentPage: number; export let currentPage: number;
export let fullLength: number;
export let openByDefault = false; export let openByDefault = false;
$: indexStart = itemsPerPage * (currentPage - 1); $: indexStart = itemsPerPage * (currentPage - 1);
let cardIndexArray = [];
function getItemLink(item: Member | Group): string { function getItemLink(item: Member | Group): string {
let url: string; let url: string;
@ -47,13 +46,14 @@
let el; let el;
if (event.key === "ArrowDown") { if (event.key === "ArrowDown") {
if (index + 1 < indexStart + itemsPerPage) el = cardIndexArray[index + 1]; if (index + 1 < indexStart + itemsPerPage && index + 1 < fullLength) el = document.getElementById(`${itemType}-card-${index + 1}`);
else el = cardIndexArray[indexStart]; else el = document.getElementById(`${itemType}-card-${indexStart}`);
} }
if (event.key === "ArrowUp") { if (event.key === "ArrowUp") {
if (index - 1 >= indexStart) el = cardIndexArray[index - 1]; if (index - 1 >= indexStart) el = document.getElementById(`${itemType}-card-${index - 1}`);
else el = cardIndexArray[indexStart + itemsPerPage - 1]; else if (fullLength <= indexStart + itemsPerPage) el = document.getElementById(`${itemType}-card-${fullLength - 1}`);
else el = document.getElementById(`${itemType}-card-${indexStart + itemsPerPage - 1}`);
} }
if (el) { if (el) {
@ -110,9 +110,9 @@
{#each list as item, index (item.id + index)} {#each list as item, index (item.id + index)}
<Card> <Card>
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="w-100 accordion-button collapsed card-header" bind:this={cardIndexArray[indexStart + index]} on:click={() => toggleCard(indexStart + index)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}> <button class="w-100 accordion-button collapsed card-header" id={`${itemType}-card-${indexStart + index}`} on:click={() => toggleCard(indexStart + index)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
<CardsHeader {item}> <CardsHeader {item}>
<div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} > <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"} {#if isPublic || item.privacy.visibility === "public"}
{#if itemType === "member"} {#if itemType === "member"}
<FaUserCircle /> <FaUserCircle />
@ -124,7 +124,7 @@
{/if} {/if}
</div> </div>
</CardsHeader> </CardsHeader>
<Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip> <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
</button> </button>
</h2> </h2>
<Collapse isOpen={isOpenArray[indexStart + index]}> <Collapse isOpen={isOpenArray[indexStart + index]}>
@ -142,10 +142,10 @@
{:else if openByDefault || settings.accessibility.expandedcards} {:else if openByDefault || settings.accessibility.expandedcards}
{#each list as item, index (item.id + index)} {#each list as item, index (item.id + index)}
<Card class="mb-3"> <Card class="mb-3">
<div class="accordion-button collapsed p-0" bind:this={cardIndexArray[indexStart + index]} on:keydown={(e) => skipToNextItem(e, indexStart + index)} tabindex={0}> <div class="accordion-button collapsed p-0" id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} tabindex={0}>
<CardHeader class="w-100"> <CardHeader class="w-100">
<CardsHeader {item}> <CardsHeader {item}>
<div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} > <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"} {#if isPublic || item.privacy.visibility === "public"}
{#if itemType === "member"} {#if itemType === "member"}
<FaUserCircle /> <FaUserCircle />
@ -157,7 +157,7 @@
{/if} {/if}
</div> </div>
</CardsHeader> </CardsHeader>
<Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip> <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
</CardHeader> </CardHeader>
</div> </div>
<CardBody> <CardBody>
@ -173,9 +173,9 @@
<div class="my-3"> <div class="my-3">
{#each list as item, index (item.id + index)} {#each list as item, index (item.id + index)}
<Card> <Card>
<a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[indexStart + index]} on:keydown={(e) => skipToNextItem(e, indexStart + index)} use:link > <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} use:link >
<CardsHeader {item}> <CardsHeader {item}>
<div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} > <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"} {#if isPublic || item.privacy.visibility === "public"}
{#if itemType === "member"} {#if itemType === "member"}
<FaUserCircle /> <FaUserCircle />
@ -187,7 +187,7 @@
{/if} {/if}
</div> </div>
</CardsHeader> </CardsHeader>
<Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip> <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
</a> </a>
</Card> </Card>
{/each} {/each}

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

@ -132,6 +132,6 @@
<NewGroup on:create={addItemToList} /> <NewGroup on:create={addItemToList} />
{/if} {/if}
{/if} {/if}
<CardsList on:deletion bind:list={slicedList} bind:groups bind:members isMainDash={isMainDash} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} /> <CardsList on:deletion bind:list={slicedList} bind:groups bind:members isMainDash={isMainDash} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={list.length} />
<ListPagination bind:currentPage {pageAmount} /> <ListPagination bind:currentPage {pageAmount} />
{/if} {/if}

2
dashboard/src/pages/Group.svelte
View File

@ -156,7 +156,7 @@
</CardHeader> </CardHeader>
</Card> </Card>
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />
<CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={slicedMembers} isPublic={isPublic} isMainDash={false} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} /> <CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={slicedMembers} isPublic={isPublic} isMainDash={false} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={members.length} />
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />
{/if} {/if}
{/if} {/if}

2
dashboard/src/pages/Member.svelte
View File

@ -158,7 +158,7 @@
</CardHeader> </CardHeader>
</Card> </Card>
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />
<CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={slicedGroups} isPublic={isPublic} isMainDash={false} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} /> <CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={slicedGroups} isPublic={isPublic} isMainDash={false} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={groups.length} />
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />
{/if} {/if}
{/if} {/if}

2
dashboard/src/pages/Random.svelte
View File

@ -206,7 +206,7 @@
{:else if err} {:else if err}
<Alert color="danger">{err}</Alert> <Alert color="danger">{err}</Alert>
{:else} {:else}
<CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} isMainDash={false} itemType={type} itemsPerPage={5} currentPage={rollCounter} /> <CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} isMainDash={false} itemType={type} itemsPerPage={5} currentPage={rollCounter} fullLength={randomList.length} />
{/if} {/if}
</Col> </Col>
</Row> </Row>