Last active
June 17, 2020 11:30
-
-
Save evdama/47e6cf4706135a956d516062449dd95d to your computer and use it in GitHub Desktop.
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> | |
import { fade, fly } from 'svelte/transition' | |
import { onMount } from 'svelte' | |
import { writable } from 'svelte/store' | |
import * as animateScroll from 'svelte-scrollto' | |
import PageTransition from '../components/ui/PageTransition.svelte' | |
import Spinner from '../components/ui/Spinner.svelte' | |
import Profile from '../components/communication_channels/todos/Profile.svelte' | |
import getTime from 'date-fns/getTime' | |
import formatDistanceToNow from 'date-fns/formatDistanceToNow' | |
let mountedToDom = false | |
let chatName = 'add a chat message...' | |
let chat | |
let chatRef | |
const addNewChat = () => { | |
const timestampChatMessage = new Date().getTime() | |
chatRef.get(chatName).put(false) | |
} | |
const handleKeyPress = event => { | |
if (event.key === 'Enter' && !event.shiftKey) { | |
// simulate actual submit event when user pressed Enter but not on 'soft return' | |
event.target.form.dispatchEvent( new Event("submit", { cancelable: true })) | |
event.preventDefault() | |
event.target.value = '' | |
} | |
} | |
onMount( () => { | |
mountedToDom = true | |
animateScroll.scrollToBottom({ element: "#chat-textarea", delay: 1000, duration: 3000 }) | |
// chatRef = gun.get('chat') | |
chatRef = gun.get('edm').get('chat') | |
chat = chatRef.map() | |
}) | |
</script> | |
<svelte:head> | |
<title>Chats</title> | |
<meta name="description" content="PoC for chat on EDM..."/> | |
</svelte:head> | |
<PageTransition> | |
<div class="m-8 md:m-12 lg:m-20"> | |
{#if !mountedToDom } | |
<Spinner></Spinner> | |
{:else} | |
<div class="mx-3 my-6"> | |
{#each $chat as [message, done] (message)} | |
<div in:fly="{{ x: 900, duration: 500 }}" out:fade class='py-1 pl-4 pr-2 my-2 text-sm leading-tight transform rounded md:my-4 hover:scale-grow even:text-five odd:text-three even:bg-three odd:bg-two focus:outline-none focus:elevation-5 focus:text-two focus:font-bold'> | |
<span class="absolute block -top-2 -left-6 md:-left-8 md:-top-4"> | |
<img class="w-8 h-8 rounded-full md:w-10 md:h-10" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /> | |
<span class="absolute top-0 left-0 block w-2 h-2 text-white bg-green-400 rounded-full shadow-solid"></span> | |
</span> | |
<div class="break-words">{message}</div> | |
<button on:click={() => chatRef.get(message).put(null)} class="absolute z-10 block -bottom-2 -right-2">{"🗑️"}</button> | |
<!-- <button on:click={() => chatRef.get(message).put(!done)}>{done ? "👍 ✔️" : "❌"}</button> --> | |
</div> | |
{/each} | |
</div> | |
<div id="chat-textarea" class="flex"> | |
<form on:submit|preventDefault={ addNewChat } class="flex-grow"> | |
<!-- svelte-ignore a11y-autofocus --> | |
<textarea in:fly="{{ x: 900, duration: 1500 }}" on:keypress={ handleKeyPress } bind:value={ chatName } onfocus="this.select()" autofocus rows="2" class="block w-full px-4 py-2 leading-tight rounded form-textarea bg-six text-one placeholder-one focus:outline-none focus:elevation-3 focus:border-four focus:text-two focus:font-bold focus:placeholder-two"></textarea> | |
</form> | |
</div> | |
{/if} | |
</PageTransition> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment