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