Created
August 18, 2022 12:58
-
-
Save jigmeloday/b86170bae66ec3ac23b32946974f34f1 to your computer and use it in GitHub Desktop.
This is RecipientsDisplay code using svelte. I have commented some information about my codes. refresh once if view is not working while checking responsive from laptop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
import { tick, onMount } from 'svelte'; | |
export let recipients | |
let recipientDisplayList = []; | |
let innerWidth = 0;//Inner width is the width of email container width. | |
let recipientsWidth = 0; //recipientsWidth width is the width of email length. | |
let recipentsWidthSum = 0; // recipientsWidthSum is the total width of recipientsWidth | |
let lengths = 0; | |
onMount( async () => { | |
for ( let recipient of recipients ) { | |
//Creating recipientDisplayList to store each recipient's emails | |
recipientDisplayList = [ ...recipientDisplayList, recipient ] | |
//The tick function is unlike other lifecycle functions in that you can call it any time | |
await tick() | |
//recipientsWidth is the width of the individual email. | |
recipentsWidthSum += (recipientsWidth + 40) | |
// recipentsWidthSum will get total width and added 40 to make ellipsis this fit perfectly with rest of text | |
if ( recipientDisplayList.length > 1 && recipentsWidthSum > innerWidth ) { | |
//if recipientsWidthSum is greater than innerWidth and if recipientDisplayList contains arrayList more than one | |
//then it will start removing recipientDisplayList items. | |
//if list is not fitting then it will check recipientDisplayList length and if recipientDisplayList length is less than one | |
//then it will not pop. | |
recipientDisplayList.pop() | |
lengths = (recipients.length - recipientDisplayList.length) | |
//I am assigning length cause in View I have to show badge which I can show base on length. | |
recipientDisplayList = recipientDisplayList | |
//I am reassigning the recipientDisplayList with new recipientDisplayList. | |
break; | |
} | |
} | |
} ) | |
</script> | |
<main class="main"> | |
<!--Here i am getting innerWidth so this is container which shows email container width --> | |
<div class="email-container" bind:clientWidth={innerWidth}> | |
{#each recipientDisplayList as recipient, index} | |
<!-- Here i am getting recipientsWidth so this is width, which shows the individual emails width --> | |
<span bind:clientWidth={recipientsWidth} class="recipients"> | |
{recipient} | |
<!-- I am showing comma if there is no ... because in design there is no comma after .... --> | |
{ recipient !== '...' && recipients.length > 1 && recipientDisplayList.length !== index + 1 ? ',' : ''} | |
<!--this handle the showing of ellipsis base on the this condition if recipientDisplayList lenght is equal to the last index and if the --> | |
<!-- recipients.length is greater than one then we showing ellipsis--> | |
{ recipientDisplayList.length === index + 1 && lengths && recipients.length > 1 ? '...' : ''} | |
</span> | |
{/each} | |
</div> | |
<div class="badge-container"> | |
<!-- This show the badge base on the remaining emails, if email is remaining emails is zero then it will not show the badge --> | |
<!-- but if remaining email is more than one then it will show the badge--> | |
{#if lengths } | |
<span class="badge">{`+${lengths}`}</span> | |
{/if} | |
</div> | |
</main> | |
<style> | |
.main { | |
width: 100%; | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
} | |
.badge-container { | |
margin-top: 6px; | |
} | |
.recipients { | |
display: inline-block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
@media screen and (max-width: 1440px) { | |
.recipients { | |
width: 80%; | |
overflow: hidden; | |
} | |
.badge-container { | |
width: 20%; | |
} | |
} | |
.email-container { | |
display: inline-block; | |
font-size: 16px; | |
overflow: hidden; | |
color: #333333; | |
padding: 5px 10px; | |
width: 100%; | |
} | |
.badge { | |
background-color: #666666; | |
height: 100%; | |
font-size: 16px; | |
padding: 2px 5px; | |
color: #f0f0f0; | |
border-radius: 3px; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment