From fa3c6913e88a436caacd5eaacb36a1db04671881 Mon Sep 17 00:00:00 2001 From: Fornax Date: Tue, 28 Dec 2021 13:56:24 +0100 Subject: [PATCH] Improve navigation and accessibility --- svelte/src/file_viewer/AdLeaderboard.svelte | 5 +- svelte/src/file_viewer/FileViewer.svelte | 142 +++++++++++++----- svelte/src/file_viewer/GalleryView.svelte | 19 +-- svelte/src/file_viewer/ListNavigator.svelte | 27 ++-- svelte/src/file_viewer/viewers/Audio.svelte | 2 + .../file_viewer/viewers/FilePreview.svelte | 7 +- svelte/src/file_viewer/viewers/Image.svelte | 5 + svelte/src/file_viewer/viewers/Video.svelte | 2 + 8 files changed, 138 insertions(+), 71 deletions(-) diff --git a/svelte/src/file_viewer/AdLeaderboard.svelte b/svelte/src/file_viewer/AdLeaderboard.svelte index 0caa6cf..fae18c2 100644 --- a/svelte/src/file_viewer/AdLeaderboard.svelte +++ b/svelte/src/file_viewer/AdLeaderboard.svelte @@ -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 diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte index 0e9c23a..a8e63d4 100644 --- a/svelte/src/file_viewer/FileViewer.svelte +++ b/svelte/src/file_viewer/FileViewer.svelte @@ -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 => { - +
- {#if loading} + {#if loading !== 0} {/if}
- - + + +
{#if list.title !== ""}{list.title}
{/if} {#if file.name !== ""}{file.name}{/if}
{#if embedded && supports_fullscreen} - {/if} @@ -352,29 +382,42 @@ const keyboard_event = evt => { {/if} {#if is_list} - {/if} {#if file.abuse_type === "" && view === "file"} - {/if} + {#if file.abuse_type === "" && is_list} - {/if} - - - @@ -400,7 +451,7 @@ const keyboard_event = evt => { {#if is_list} @@ -422,26 +477,41 @@ const keyboard_event = evt => {
{#if file.can_edit || list.can_edit} - {/if} {#if view === "file" && window.user_authenticated && !file.can_edit} - {/if} - {#if view === "file"} - @@ -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}> {:else if view === "gallery"} { open_file_index(e.detail) }} on:reload={reload} - on:loading={e => {loading = e.detail}}> + on:loading={on_loading}> {/if}
diff --git a/svelte/src/file_viewer/GalleryView.svelte b/svelte/src/file_viewer/GalleryView.svelte index 96ce156..0c17b20 100644 --- a/svelte/src/file_viewer/GalleryView.svelte +++ b/svelte/src/file_viewer/GalleryView.svelte @@ -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) => {
{#each list.files as file, index (file)} -
{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} - drag_indicator - {move_left(index)}}>chevron_left - {move_right(index)}}>chevron_right - {delete_file(index)}}>delete + drag_indicator + {move_left(index)}}>chevron_left + {move_right(index)}}>chevron_right + {delete_file(index)}}>delete {/if}
{file.name} -
+ {/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); diff --git a/svelte/src/file_viewer/ListNavigator.svelte b/svelte/src/file_viewer/ListNavigator.svelte index b9c1871..5d71b05 100644 --- a/svelte/src/file_viewer/ListNavigator.svelte +++ b/svelte/src/file_viewer/ListNavigator.svelte @@ -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 => { chevron_left
- {#each files as file, index} -
{ select_item_event(index) }}> + {#each files as file, index (file)} + {file.name} {file.name} -
+ {/each}