mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-19 11:43:35 +00:00
Add scroll to top button
This commit is contained in:
parent
1fd48f5cd2
commit
74ebd6aebf
@ -31,6 +31,7 @@
|
||||
Object.assign(window, {cmd, user, keys, network, pool, sync, db, bech32ToHex, hexToBech32})
|
||||
|
||||
export let pathname = location.pathname
|
||||
export let hash = location.hash
|
||||
|
||||
const style = document.createElement("style")
|
||||
|
||||
@ -80,11 +81,18 @@
|
||||
|
||||
// Log usage on navigate
|
||||
const unsubHistory = globalHistory.listen(({location}) => {
|
||||
pathname = location.pathname
|
||||
|
||||
if (!location.hash) {
|
||||
logUsage(btoa(["page", getPageName()].join(":")))
|
||||
|
||||
if (!hash) {
|
||||
document.body.scrollIntoView({
|
||||
behavior: location.pathname === pathname ? "smooth" : "auto",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pathname = location.pathname
|
||||
hash = location.hash
|
||||
})
|
||||
|
||||
logUsage(btoa(["page", getPageName()].join(":")))
|
||||
|
@ -1,12 +1,17 @@
|
||||
<script lang="ts">
|
||||
import {nip19} from "nostr-tools"
|
||||
import {fade} from "svelte/transition"
|
||||
import user from "src/agent/user"
|
||||
import {modal, location} from "src/partials/state"
|
||||
|
||||
let scrollY = 0
|
||||
|
||||
$: showCreateNote = $location.pathname.match(/messages|chat|relays$|keys|settings|logout$/)
|
||||
|
||||
const {canPublish} = user
|
||||
|
||||
const scrollToTop = () => document.body.scrollIntoView({behavior: "smooth"})
|
||||
|
||||
const createNote = () => {
|
||||
const pubkeyMatch = $location.pathname.match(/people\/(npub1[0-9a-z]+)/)
|
||||
const pubkey = pubkeyMatch ? nip19.decode(pubkeyMatch[1]).data : null
|
||||
@ -18,14 +23,26 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
|
||||
<div class="fixed bottom-0 right-0 z-10 m-8 flex flex-col items-center gap-3">
|
||||
{#if scrollY > 1000}
|
||||
<button
|
||||
transition:fade|local={{delay: 200, duration: 200}}
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full
|
||||
border border-gray-8 bg-gray-7 text-gray-1 shadow-2xl
|
||||
transition-all hover:scale-105 hover:bg-gray-6"
|
||||
on:click={scrollToTop}>
|
||||
<span class="fa fa-arrow-up" />
|
||||
</button>
|
||||
{/if}
|
||||
{#if $canPublish && !showCreateNote}
|
||||
<button
|
||||
class="color-white flex h-16 w-16 items-center justify-center rounded-full
|
||||
border border-accent-light bg-accent text-white shadow-2xl
|
||||
transition-all hover:scale-105 hover:bg-accent-light"
|
||||
on:click={createNote}>
|
||||
<span class="fa-sold fa-plus fa-2xl" />
|
||||
<span class="fa-plus fa-2xl" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user