init
This commit is contained in:
		
							
								
								
									
										92
									
								
								lib/components/bio/profile/Socials.svelte
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										92
									
								
								lib/components/bio/profile/Socials.svelte
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,92 @@ | ||||
| <script lang="ts"> | ||||
|   import { getLinkType } from '$lib/models/socials'; | ||||
|   import { editorStore } from '$lib/stores/editor'; | ||||
|   import SocialLink from './SocialLink.svelte'; | ||||
|   import SocialText from './SocialText.svelte'; | ||||
|   import { SocialLink as SocialLinkType } from '$lib/models/socials'; | ||||
|   import { browser } from '$app/environment'; | ||||
|  | ||||
|   export let socials: BioSiteSocials | undefined = undefined; | ||||
|   export let storelessSocials: boolean = false; | ||||
|  | ||||
|   $: socialLinks = ( | ||||
|     [ | ||||
|       ...(socials?.links ?? []) | ||||
|         .map((x) => { | ||||
|           const remove = $editorStore.edits.edits.deleteSocialLinks.map((x) => x.id).findIndex((y) => y === x.id); | ||||
|           if (remove !== -1) return null; | ||||
|  | ||||
|           return x; | ||||
|         }) | ||||
|         .filter((x) => x), | ||||
|       ...$editorStore.edits.edits.createSocialLinks | ||||
|         .filter(() => !storelessSocials) | ||||
|         .map((x) => ({ ...x, type: Object.values(SocialLinkType)[x.type] } as BioSiteSocialLink)), | ||||
|     ].filter((x) => x) as BioSiteSocialLink[] | ||||
|   ) | ||||
|     .map((x) => { | ||||
|       const index = $editorStore.edits.edits.indexSocialLinks.findIndex((y) => x.id == y.socialId); | ||||
|       if (index === -1) return x; | ||||
|       return { ...x, index: $editorStore.edits.edits.indexSocialLinks[index].index ?? -1 }; | ||||
|     }) | ||||
|     .sort((a, b) => a.index - b.index); | ||||
|  | ||||
|   $: socialTexts = ( | ||||
|     [ | ||||
|       ...(socials?.texts ?? []) | ||||
|         .map((x) => { | ||||
|           const remove = $editorStore.edits.edits.deleteSocialTexts.map((x) => x.id).findIndex((y) => y === x.id); | ||||
|           if (remove !== -1) return null; | ||||
|  | ||||
|           return x; | ||||
|         }) | ||||
|         .filter((x) => x), | ||||
|       ...$editorStore.edits.edits.createSocialTexts.filter(() => !storelessSocials), | ||||
|     ].filter((x) => x) as BioSiteSocialText[] | ||||
|   ) | ||||
|     .map((x) => { | ||||
|       const index = $editorStore.edits.edits.indexSocialTexts.findIndex((y) => x.id == y.socialId); | ||||
|       if (index === -1) return x; | ||||
|       return { ...x, index: $editorStore.edits.edits.indexSocialTexts[index].index ?? -1 }; | ||||
|     }) | ||||
|     .sort((a, b) => a.index - b.index); | ||||
| </script> | ||||
|  | ||||
| {#key socials} | ||||
|   {#if socials} | ||||
|     {#key socialLinks} | ||||
|       {#if socialLinks.length > 0} | ||||
|         <div class="flex flex-wrap gap-1.5" class:edit={$editorStore.editMode}> | ||||
|           {#each socialLinks as link} | ||||
|             <SocialLink | ||||
|               site={getLinkType(link.type)} | ||||
|               social={link} | ||||
|               hoverInvert={socials.invert} | ||||
|               minimal={socials.minimal} /> | ||||
|           {/each} | ||||
|         </div> | ||||
|       {/if} | ||||
|     {/key} | ||||
|     {#if browser} | ||||
|       {#key socialTexts} | ||||
|         {#if socialTexts.length > 0} | ||||
|           <div class="flex flex-col gap-1.5" class:edit={$editorStore.editMode}> | ||||
|             {#each socialTexts as text} | ||||
|               <SocialText social={text} /> | ||||
|             {/each} | ||||
|           </div> | ||||
|         {/if} | ||||
|       {/key} | ||||
|     {/if} | ||||
|   {/if} | ||||
| {/key} | ||||
|  | ||||
| <style lang="postcss"> | ||||
|   div { | ||||
|     @apply select-none; | ||||
|   } | ||||
|  | ||||
|   div.edit { | ||||
|     @apply pointer-events-none; | ||||
|   } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user