pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve navigation and accessibility

Browse Source
This commit is contained in:
Fornax
2021-12-28 13:56:24 +01:00
parent 9edc1a84cd
commit fa3c6913e8
8 changed files with 138 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
svelte/src/file_viewer/AdLeaderboard.svelte
View File

@@ -13,13 +13,10 @@ onMount(() => {
return
}
switch (Math.floor(Math.random()*4)) {
switch (Math.floor(Math.random()*3)) {
case 0:
set_ad_type("aads")
break
case 1:
set_ad_type("brave")
break
case 2:
set_ad_type("ads.plus")
break

142
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -20,7 +20,15 @@ import GalleryView from "./GalleryView.svelte";
import Spinner from "../util/Spinner.svelte";
import Downloader from "./Downloader.svelte";
let loading = true
let loading = 0
const on_loading = e => {
if (e.detail) {
loading++
} else {
loading--
}
}
let embedded = false
let view_token = ""
let ads_enabled = false
@@ -84,6 +92,7 @@ let embed_visible = false
let skyscraper_visible = false
onMount(() => {
loading++
let viewer_data = window.viewer_data
embedded = viewer_data.embedded
@@ -101,10 +110,10 @@ onMount(() => {
}
ads_enabled = list.files[0].show_ads
loading = false
loading--
})
const reload = async () => {
loading = true
loading++
if (is_list) {
try {
const resp = await fetch(list.info_href);
@@ -129,7 +138,7 @@ const reload = async () => {
alert(err)
}
}
loading = false
loading--
}
const open_list = l => {
@@ -145,14 +154,18 @@ const open_list = l => {
// correct file is opened
is_list = true
hash_change()
}
const hash_change = () => {
// Skip to the file defined in the link hash
let matches = location.hash.match(new RegExp('item=([^&]*)'))
let hashID = parseInt(matches ? matches[1] : null)
if (Number.isInteger(hashID)) {
let matches = location.hash.match(/item=([\d]+)/)
let index = parseInt(matches ? matches[1] : null)
if (Number.isInteger(index)) {
// The URL contains an item number. Navigate to that item
open_file_index(hashID)
open_file_index(index)
} else if (view !== "gallery") {
toggle_gallery()
view = "gallery"
file = file_struct // Empty the file struct
}
}
const open_file_index = async index => {
@@ -161,6 +174,11 @@ const open_file_index = async index => {
} else if (index < 0) {
index = list.files.length - 1
}
if (list.files[index] === file) {
console.debug("ignoring request to load the same file that is currently loaded")
return
}
console.debug("received request to open file", index)
file_set_href(list.files[index])
@@ -174,8 +192,8 @@ const open_file_index = async index => {
file_preview.set_file(file)
if (is_list) {
// Update the URL
location.replace("#item=" + index)
// Update the URL without pushing a new history entry
window.location.replace("#item=" + index)
list_navigator.set_item(index)
}
@@ -188,11 +206,9 @@ const open_file_index = async index => {
}
const toggle_gallery = () => {
if (view === "gallery") {
open_file_index(0)
window.location.hash = "#item=0"
} else {
location.replace("#gallery")
view = "gallery"
file = file_struct // Empty the file struct
window.location.hash = "#gallery"
}
}
@@ -305,31 +321,45 @@ const keyboard_event = evt => {
</script>
<svelte:window on:keydown={keyboard_event}/>
<svelte:window on:keydown={keyboard_event} on:hashchange={hash_change}/>
<div id="file_viewer" class="file_viewer">
<!-- Head elements for the ads -->
<AdHead></AdHead>
{#if loading}
{#if loading !== 0}
<div class="spinner_container">
<Spinner></Spinner>
</div>
{/if}
<div id="headerbar" class="headerbar" class:embedded>
<button on:click={toolbar_toggle} class="button_toggle_toolbar round" class:button_highlight={toolbar_visible}>
<button
on:click={toolbar_toggle}
class="button_toggle_toolbar round"
class:button_highlight={toolbar_visible}
title="Open or close the toolbar">
<i class="icon">menu</i>
</button>
<a href="/" bind:this={button_home} class="button button_home round" target={embedded ? "_blank" : ""}>
<a
href="/"
bind:this={button_home}
class="button button_home round"
target={embedded ? "_blank" : ""}
title="Go to the pixeldrain home page">
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 4px 0 0;"></PixeldrainLogo>
</a>
<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
{#if list.title !== ""}{list.title}<br/>{/if}
{#if file.name !== ""}{file.name}{/if}
</div>
{#if embedded && supports_fullscreen}
<button class="round" on:click={toggle_fullscreen}>
<button
class="round"
on:click={toggle_fullscreen}
title="Open this page in full-screen mode">
<i class="icon" id="btn_fullscreen_icon">fullscreen</i>
</button>
{/if}
@@ -352,29 +382,42 @@ const keyboard_event = evt => {
{/if}
{#if is_list}
<button on:click={toggle_gallery} class="toolbar_button button_full_width" class:button_highlight={view === "gallery"}>
<button
on:click={toggle_gallery}
class="toolbar_button button_full_width"
class:button_highlight={view === "gallery"}
title="Opens a gallery view of the album">
<i class="icon">photo_library</i>
Gallery
</button>
{/if}
{#if file.abuse_type === "" && view === "file"}
<button on:click={downloader.download_file} class="toolbar_button button_full_width">
<button
on:click={downloader.download_file}
class="toolbar_button button_full_width"
title="Save this file to your computer">
<i class="icon">download</i>
<span>Download</span>
</button>
{/if}
{#if file.abuse_type === "" && is_list}
<button on:click={downloader.download_list} class="toolbar_button button_full_width">
<button
on:click={downloader.download_list}
class="toolbar_button button_full_width"
title="Download all files in this album as a zip archive">
<i class="icon">download</i>
<span>DL all files</span>
</button>
{/if}
<button on:click={copy_url}
<button
on:click={copy_url}
class="toolbar_button button_full_width"
class:button_highlight={copy_url_status === "copied"}
class:button_red={copy_url_status === "error"}>
class:button_red={copy_url_status === "error"}
title="Copy a link to this page to your clipboard">
<i class="icon">content_copy</i>
<span>
{#if copy_url_status === "copied"}
@@ -387,12 +430,20 @@ const keyboard_event = evt => {
</span>
</button>
<button on:click={toggle_sharebar} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
<button
on:click={toggle_sharebar}
class="toolbar_button button_full_width"
class:button_highlight={sharebar_visible}
title="Share this file on social media">
<i class="icon">share</i>
<span>Share</span>
</button>
<button class="toolbar_button button_full_width" on:click={qr_window.toggle} class:button_highlight={qr_visible}>
<button
class="toolbar_button button_full_width"
on:click={qr_window.toggle}
class:button_highlight={qr_visible}
title="Show a QR code with a link to this page. Useful for sharing files in-person">
<i class="icon">qr_code</i>
<span>QR code</span>
</button>
@@ -400,7 +451,7 @@ const keyboard_event = evt => {
{#if is_list}
<button
class="toolbar_button button_full_width"
title="Randomize the order of the files in this list"
title="Go to a random file when pressing → or clicking the next file button"
class:button_highlight={list_shuffle}
on:click={toggle_shuffle}>
<i class="icon">shuffle</i>
@@ -413,7 +464,11 @@ const keyboard_event = evt => {
{/if}
{#if view === "file"}
<button class="toolbar_button button_full_width" on:click={details_window.toggle} class:button_highlight={details_visible}>
<button
class="toolbar_button button_full_width"
on:click={details_window.toggle}
class:button_highlight={details_visible}
title="Information and statistics about this file">
<i class="icon">help</i>
<span>Deta<u>i</u>ls</span>
</button>
@@ -422,26 +477,41 @@ const keyboard_event = evt => {
<hr/>
{#if file.can_edit || list.can_edit}
<button class="toolbar_button button_full_width" on:click={edit_window.toggle} class:button_highlight={edit_visible}>
<button
class="toolbar_button button_full_width"
on:click={edit_window.toggle}
class:button_highlight={edit_visible}
title="Edit or delete this file or album">
<i class="icon">edit</i>
<span><u>E</u>dit</span>
</button>
{/if}
{#if view === "file" && window.user_authenticated && !file.can_edit}
<button on:click={grab_file} class="toolbar_button button_full_width" title="Copy this file to your own pixeldrain account">
<button
on:click={grab_file}
class="toolbar_button button_full_width"
title="Copy this file to your own pixeldrain account">
<i class="icon">save_alt</i>
<span><u>G</u>rab file</span>
</button>
{/if}
<button class="toolbar_button button_full_width" title="Include this file in your own webpages" on:click={embed_window.toggle} class:button_highlight={embed_visible}>
<button
class="toolbar_button button_full_width"
title="Include this file in your own webpages"
on:click={embed_window.toggle}
class:button_highlight={embed_visible}>
<i class="icon">code</i>
<span>E<u>m</u>bed</span>
</button>
{#if view === "file"}
<button class="toolbar_button button_full_width" title="Report abuse in this file" on:click={report_window.toggle} class:button_highlight={report_visible}>
<button
class="toolbar_button button_full_width"
title="Report this file as abusive"
on:click={report_window.toggle}
class:button_highlight={report_visible}>
<i class="icon">flag</i>
<span>Report</span>
</button>
@@ -455,14 +525,14 @@ const keyboard_event = evt => {
bind:this={file_preview}
on:download={downloader.download_file}
on:prev={() => { if (list_navigator) { list_navigator.prev() }}}
on:next={() => { if (list_navigator) { list_navigator.next() }}}>
on:next={() => { if (list_navigator) { list_navigator.next() }}}
on:loading={on_loading}>
</FilePreview>
{:else if view === "gallery"}
<GalleryView
list={list}
on:set_file={e => { open_file_index(e.detail) }}
on:reload={reload}
on:loading={e => {loading = e.detail}}>
on:loading={on_loading}>
</GalleryView>
{/if}
</div>

19
svelte/src/file_viewer/GalleryView.svelte
View File

@@ -15,10 +15,6 @@ export let list = {
let file_picker;
const click_file = index => {
dispatch("set_file", index)
}
const update_list = async new_files => {
dispatch("loading", true)
@@ -125,9 +121,9 @@ const drop = (e, index) => {
<div class="gallery">
{#each list.files as file, index (file)}
<div
<a
href="#item={index}"
class="file"
on:click={() => {click_file(index)}}
draggable={list.can_edit}
on:dragstart={e => drag(e, index)}
on:drop|preventDefault={e => drop(e, index)}
@@ -141,14 +137,14 @@ const drop = (e, index) => {
class:editing={list.can_edit}
style="background-image: url('{file.icon_href}?width=256&height=256');">
{#if list.can_edit}
<i class="icon" on:click|stopPropagation style="cursor: grab;">drag_indicator</i>
<i class="icon" on:click|stopPropagation={() => {move_left(index)}}>chevron_left</i>
<i class="icon" on:click|stopPropagation={() => {move_right(index)}}>chevron_right</i>
<i class="icon" on:click|stopPropagation={() => {delete_file(index)}}>delete</i>
<i class="icon" on:click|stopPropagation|preventDefault style="cursor: grab;">drag_indicator</i>
<i class="icon" on:click|stopPropagation|preventDefault={() => {move_left(index)}}>chevron_left</i>
<i class="icon" on:click|stopPropagation|preventDefault={() => {move_right(index)}}>chevron_right</i>
<i class="icon" on:click|stopPropagation|preventDefault={() => {delete_file(index)}}>delete</i>
{/if}
</div>
{file.name}
</div>
</a>
{/each}
{#if list.can_edit}
@@ -190,6 +186,7 @@ const drop = (e, index) => {
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
color: var(--text_color);
}
.file:hover, .highlight {
box-shadow: 0 0 2px 2px var(--highlight_color);

27
svelte/src/file_viewer/ListNavigator.svelte
View File

@@ -11,13 +11,12 @@ let selected_file_index = 0
export const next = () => {
if (shuffle) {
rand_item()
return
} else {
dispatch("set_file", selected_file_index+1)
}
select_item_event(selected_file_index+1)
}
export const prev = () => {
select_item_event(selected_file_index-1)
dispatch("set_file", selected_file_index-1)
}
let history = []
@@ -29,14 +28,7 @@ export const rand_item = () => {
console.log("rand is " + rand)
} while(history.indexOf(rand) > -1)
select_item_event(rand)
}
// select_item_event signals to the FileViewer that the file needs to be
// changed. The FileViewer then calls set_item if the change has been approved.
// ListNavigator cannot call set_item itself because it will cause a loop.
const select_item_event = idx => {
dispatch("set_file", idx)
dispatch("set_file", rand)
}
export const set_item = idx => {
@@ -81,13 +73,14 @@ export const set_item = idx => {
<i class="icon">chevron_left</i>
</button>
<div bind:this={file_list_div} class="list_navigator">
{#each files as file, index}
<div class="list_item file_button"
class:file_button_selected={file.selected}
on:click={() => { select_item_event(index) }}>
{#each files as file, index (file)}
<a
href="#item={index}"
class="list_item file_button"
class:file_button_selected={file.selected}>
<img src={file.icon_href+"?width=48&height=48"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
{file.name}
</div>
</a>
{/each}
</div>
<button class="nav_button" style="margin-left: 0;" on:click={next}>

2
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -73,6 +73,8 @@ const toggle_play = () => playing ? player.pause() : player.play()
{#if file.id && !audio_reload}
<!-- svelte-ignore a11y-media-has-caption -->
<audio
on:loadstart={() => {dispatch("loading", true)}}
on:load={() => {dispatch("loading", false)}}
bind:this={player}
class="player"
controls

7
svelte/src/file_viewer/viewers/FilePreview.svelte
View File

@@ -38,6 +38,7 @@ let dispatch = createEventDispatcher()
const download = () => { dispatch("download") }
const next = () => { dispatch("next") }
const prev = () => { dispatch("prev") }
const loading = e => {dispatch("loading", e.detail)}
</script>
@@ -51,11 +52,11 @@ const prev = () => { dispatch("prev") }
{:else if viewer_type === "rate_limit"}
<RateLimit bind:this={viewer} on:download={download}></RateLimit>
{:else if viewer_type === "image"}
<Image bind:this={viewer}></Image>
<Image bind:this={viewer} on:loading={loading}></Image>
{:else if viewer_type === "video"}
<Video bind:this={viewer} on:download={download} on:prev={prev} on:next={next}></Video>
<Video bind:this={viewer} on:loading={loading} on:download={download} on:prev={prev} on:next={next}></Video>
{:else if viewer_type === "audio"}
<Audio bind:this={viewer} on:prev={prev} on:next={next}></Audio>
<Audio bind:this={viewer} on:loading={loading} on:prev={prev} on:next={next}></Audio>
{:else if viewer_type === "pdf"}
<PDF bind:this={viewer}></PDF>
{:else if viewer_type === "text"}

5
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -1,4 +1,7 @@
<script>
import { createEventDispatcher } from "svelte"
let dispatch = createEventDispatcher()
export const set_file = f => file = f
let file = {
id: "",
@@ -51,6 +54,8 @@ const mouseup = (e) => {
<div bind:this={container} class="container" class:zoom>
<img
on:loadstart={() => {dispatch("loading", true)}}
on:load={() => {dispatch("loading", false)}}
on:dblclick={() => {zoom = !zoom}}
on:doubletap={() => {zoom = !zoom}}
on:mousedown={mousedown}

2
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -62,6 +62,8 @@ let download = () => { dispatch("download", {}) }
{#if !video_reload}
<!-- svelte-ignore a11y-media-has-caption -->
<video
on:loadstart={() => {dispatch("loading", true)}}
on:load={() => {dispatch("loading", false)}}
bind:this={player}
controls
playsinline