steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-01 16:22:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

accessibility improvements

Browse Source
This commit is contained in:
vcoppe
2024-06-27 15:50:15 +02:00
parent f08b2b094f
commit 1fdcc4289a
12 changed files with 119 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
website/src/app.html
View File

@@ -1,12 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

2
website/src/lib/components/App.svelte
View File

@@ -16,7 +16,7 @@
const { verticalFileView, elevationProfile, bottomPanelSize, rightPanelSize } = settings;
</script>
<div class="fixed flex flex-row w-screen h-screen">
<div class="fixed flex flex-row w-screen h-dvh">
<div class="flex flex-col grow h-full min-w-0">
<div class="grow relative">
<Menu />

24
website/src/lib/components/ElevationProfile.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import * as ToggleGroup from '$lib/components/ui/toggle-group';
import Tooltip from '$lib/components/Tooltip.svelte';
import { Separator } from '$lib/components/ui/separator';
import Chart from 'chart.js/auto';
import mapboxgl from 'mapbox-gl';
@@ -281,13 +280,16 @@
return points[0].index;
}
}
canvas.addEventListener('pointerdown', (evt) => {
dragging = true;
let dragStarted = false;
function onMouseDown(evt) {
dragStarted = true;
canvas.style.cursor = 'col-resize';
startIndex = getIndex(evt);
});
canvas.addEventListener('pointermove', (evt) => {
if (dragging) {
}
function onMouseMove(evt) {
if (dragStarted) {
dragging = true;
endIndex = getIndex(evt);
if (startIndex !== endIndex) {
slicedGPXStatistics.set([
@@ -300,15 +302,19 @@
]);
}
}
});
canvas.addEventListener('pointerup', (evt) => {
}
function onMouseUp(evt) {
dragStarted = false;
dragging = false;
canvas.style.cursor = '';
endIndex = getIndex(evt);
if (startIndex === endIndex) {
slicedGPXStatistics.set(undefined);
}
});
}
canvas.addEventListener('pointerdown', onMouseDown);
canvas.addEventListener('pointermove', onMouseMove);
canvas.addEventListener('pointerup', onMouseUp);
});
$: if (chart && $distanceUnits && $velocityUnits && $temperatureUnits) {

14
website/src/lib/components/Resizer.svelte
View File

@@ -5,12 +5,12 @@
export let minAfter: number = 0;
export let maxAfter: number = Number.MAX_SAFE_INTEGER;
function handleMouseDown(event: MouseEvent) {
function handleMouseDown(event: PointerEvent) {
const startX = event.clientX;
const startY = event.clientY;
const startAfter = after;
const handleMouseMove = (event: MouseEvent) => {
const handleMouseMove = (event: PointerEvent) => {
const newAfter =
startAfter + (orientation === 'col' ? startX - event.clientX : startY - event.clientY);
if (newAfter >= minAfter && newAfter <= maxAfter) {
@@ -23,12 +23,12 @@
};
const handleMouseUp = () => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
window.removeEventListener('pointermove', handleMouseMove);
window.removeEventListener('pointerup', handleMouseUp);
};
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
window.addEventListener('pointermove', handleMouseMove);
window.addEventListener('pointerup', handleMouseUp);
}
</script>
@@ -37,5 +37,5 @@
class="{orientation === 'col'
? 'w-1 h-full cursor-col-resize'
: 'w-full h-1 cursor-row-resize'} {orientation}"
on:mousedown={handleMouseDown}
on:pointerdown={handleMouseDown}
/>

4
website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
View File

@@ -42,7 +42,9 @@
variant="ghost"
class="w-full flex flex-row {side === 'right'
? 'justify-between'
: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
: 'justify-start'} py-0 px-1 h-fit {nohover
? 'hover:bg-background'
: ''} pointer-events-none"
>
{#if side === 'left'}
{#if $open[fullId]}

2
website/src/lib/components/custom-control/CustomControl.svelte
View File

@@ -33,7 +33,7 @@
<div
bind:this={container}
class="{$$props.class ||
''} clear-both translate-0 m-[10px] mb-0 pointer-events-auto bg-background rounded shadow-md hidden"
''} clear-both translate-0 m-[10px] mb-0 last:mb-[10px] pointer-events-auto bg-background rounded shadow-md hidden"
>
<slot />
</div>

3
website/src/lib/components/file-list/FileListNodeLabel.svelte
View File

@@ -332,6 +332,7 @@
e.preventDefault();
e.stopPropagation();
$selection.toggle(item);
$selection = $selection;
}
}}
on:mouseenter={() => {
@@ -360,7 +361,7 @@
{:else if item.level === ListLevel.WAYPOINT}
<MapPin size="16" class="mr-1 shrink-0" />
{/if}
<span class="grow truncate {$verticalFileView ? 'mr-2' : ''}">
<span class="grow select-none truncate {$verticalFileView ? 'mr-2' : ''}">
{label}
</span>
</span>

4
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -207,8 +207,10 @@ export class GPXLayer {
} else {
selectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
}
} else {
} else if (get(currentTool) === Tool.WAYPOINT) {
selectedWaypoint.set([marker._waypoint, this.fileId]);
} else {
this.showWaypointPopup(marker._waypoint);
}
e.stopPropagation();
});

90
website/src/lib/components/layer-control/LayerControl.svelte
View File

@@ -13,6 +13,8 @@
import { get, writable } from 'svelte/store';
import { getLayers } from './utils';
let container: HTMLDivElement;
const {
currentBasemap,
previousBasemap,
@@ -95,38 +97,76 @@
}
};
}
let open = false;
function openLayerControl() {
open = true;
}
function closeLayerControl() {
open = false;
}
let cancelEvents = false;
</script>
<CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
bind:this={container}
class="h-full w-full"
on:mouseenter={openLayerControl}
on:mouseleave={closeLayerControl}
on:pointerenter={() => {
if (!open) {
cancelEvents = true;
openLayerControl();
setTimeout(() => {
cancelEvents = false;
}, 500);
}
}}
>
<Layers size="20" />
</div>
<div
class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr] h-full"
>
<ScrollArea>
<div class="h-fit">
<div class="p-2">
<LayerTree
layerTree={$selectedBasemapTree}
name="basemaps"
bind:selected={$selectedBasemap}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
{#if $currentOverlays}
<div
class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
? 'opacity-0 w-0 h-0 delay-0'
: 'w-[29px] h-[29px]'}"
>
<Layers size="20" />
</div>
<div
class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 h-full {open
? 'grid-rows-[1fr] grid-cols-[1fr]'
: ''} {cancelEvents ? 'pointer-events-none' : ''}"
>
<ScrollArea>
<div class="h-fit">
<div class="p-2">
<LayerTree
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={$currentOverlays}
layerTree={$selectedBasemapTree}
name="basemaps"
bind:selected={$selectedBasemap}
/>
{/if}
</div>
<Separator class="w-full" />
<div class="p-2">
{#if $currentOverlays}
<LayerTree
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={$currentOverlays}
/>
{/if}
</div>
</div>
</div>
</ScrollArea>
</ScrollArea>
</div>
</div>
</CustomControl>
<svelte:window
on:click={(e) => {
if (open && !cancelEvents && !container.contains(e.target)) {
closeLayerControl();
}
}}
/>

4
website/src/lib/components/layer-control/LayerControlSettings.svelte
View File

@@ -120,7 +120,7 @@
<Accordion.Item value="item-1" class="flex flex-col overflow-hidden">
<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
<Accordion.Content class="grow flex flex-col border rounded">
<ScrollArea class="py-2 pr-2">
<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
<LayerTree
layerTree={basemapTree}
name="basemapSettings"
@@ -129,7 +129,7 @@
/>
</ScrollArea>
<Separator />
<ScrollArea class="py-2 pr-2">
<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
<LayerTree
layerTree={overlayTree}
name="overlaySettings"

2
website/src/lib/components/street-view-control/StreetViewControl.svelte
View File

@@ -36,7 +36,7 @@
}
</script>
<CustomControl class="w-[29px] h-[29px]">
<CustomControl class="w-[29px] h-[29px] shrink-0">
<Toggle bind:pressed={$streetViewEnabled} class="w-full h-full rounded p-0">
<PersonStanding size="22" />
</Toggle>

6
website/src/lib/components/toolbar/tools/Clean.svelte
View File

@@ -98,6 +98,9 @@
$map.on('mousedown', onMouseDown);
$map.on('mousemove', onMouseMove);
$map.on('mouseup', onMouseUp);
$map.on('touchstart', onMouseDown);
$map.on('touchmove', onMouseMove);
$map.on('touchend', onMouseUp);
$map.dragPan.disable();
}
@@ -107,6 +110,9 @@
$map.off('mousedown', onMouseDown);
$map.off('mousemove', onMouseMove);
$map.off('mouseup', onMouseUp);
$map.off('touchstart', onMouseDown);
$map.off('touchmove', onMouseMove);
$map.off('touchend', onMouseUp);
$map.dragPan.enable();
if ($map.getLayer('rectangle')) {