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

Disable swiping controls at beginning/end of a directory

Browse Source
This commit is contained in:
Wim Brand
2024-08-30 17:19:25 +02:00
parent e68ecc6ac1
commit 41a157ae9e
2 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
svelte/src/file_viewer/viewers/SwipeNavigate.ts
View File

@@ -3,12 +3,12 @@ const swipe_inital_offset = 25
// Amount of pixels after which the navigation triggers // Amount of pixels after which the navigation triggers
const swipe_trigger_offset = 75 const swipe_trigger_offset = 75
export const swipe_nav = (node: HTMLElement, props: { enabled: boolean, previous: boolean, next: boolean }) => { export const swipe_nav = (node: HTMLElement, props: { enabled: boolean, prev: boolean, next: boolean }) => {
let start_x = 0 let start_x = 0
let start_y = 0 let start_y = 0
let render_offset = 0 let render_offset = 0
let enabled = props.enabled === undefined ? true : props.enabled let enabled = props.enabled === undefined ? true : props.enabled
let previous = props.previous === undefined ? true : props.previous let prev = props.prev === undefined ? true : props.prev
let next = props.next === undefined ? true : props.next let next = props.next === undefined ? true : props.next
const touchstart = (e: TouchEvent) => { const touchstart = (e: TouchEvent) => {
@@ -19,7 +19,7 @@ export const swipe_nav = (node: HTMLElement, props: { enabled: boolean, previous
const touchmove = (e: TouchEvent) => { const touchmove = (e: TouchEvent) => {
const offset_x = e.touches[0].clientX - start_x const offset_x = e.touches[0].clientX - start_x
if (!enabled || (offset_x < 0 && !next) || (offset_x > 0 && !previous)) { if (!enabled || (offset_x < 0 && !next) || (offset_x > 0 && !prev)) {
return return
} }
@@ -82,8 +82,10 @@ export const swipe_nav = (node: HTMLElement, props: { enabled: boolean, previous
} }
return { return {
update(enabled: boolean) { update(props: { enabled: boolean, prev: boolean, next: boolean }) {
// enabled = swipe_enabled enabled = props.enabled === undefined ? true : props.enabled
prev = props.prev === undefined ? true : props.prev
next = props.next === undefined ? true : props.next
set_offset(0, false) set_offset(0, false)
}, },
destroy() { destroy() {

17
svelte/src/filesystem/viewers/Image.svelte
View File

@@ -10,9 +10,22 @@ let container
let zoom = false let zoom = false
let x = 0, y = 0 let x = 0, y = 0
let dragging = false let dragging = false
let swipe_prev = true
let swipe_next = true
export const update = () => { export const update = async () => {
dispatch("loading", true) dispatch("loading", true)
// Figure out if there are previous or next files. If not then we disable
// swiping controls in that direction
const siblings = await nav.get_siblings()
for (let i = 0; i < siblings.length; i++) {
if (siblings[i].name === nav.base.name) {
swipe_prev = i > 0
swipe_next = i < siblings.length-1
break
}
}
} }
const on_load = () => dispatch("loading", false) const on_load = () => dispatch("loading", false)
@@ -58,7 +71,7 @@ const mouseup = (e) => {
bind:this={container} bind:this={container}
class="container" class="container"
class:zoom class:zoom
use:swipe_nav={{enabled: !zoom, previous: false, next: true}} use:swipe_nav={{enabled: !zoom, prev: swipe_prev, next: swipe_next}}
on:prev={() => nav.open_sibling(-1)} on:prev={() => nav.open_sibling(-1)}
on:next={() => nav.open_sibling(1)} on:next={() => nav.open_sibling(1)}
> >