steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

sortable file tabs

Browse Source
This commit is contained in:
vcoppe
2024-04-19 17:06:36 +02:00
parent 13af33903b
commit 39f0871362
3 changed files with 38 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website/package-lock.json generated
View File

@@ -9,13 +9,12 @@
"version": "0.0.1",
"dependencies": {
"@mapbox/mapbox-gl-geocoder": "^5.0.2",
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
"@types/mapbox-gl": "^3.1.0",
"bits-ui": "^0.21.3",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"lucide-svelte": "^0.365.0",
"mapbox-gl": "^3.2.0",
"sortablejs": "^1.15.2",
"tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1"
},
@@ -25,7 +24,10 @@
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0",
"@types/events": "^3.0.3",
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
"@types/mapbox-gl": "^3.1.0",
"@types/node": "^20.12.5",
"@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.19",
@@ -1346,7 +1348,8 @@
"node_modules/@types/geojson": {
"version": "7946.0.14",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
"integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
"integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
"dev": true
},
"node_modules/@types/http-cache-semantics": {
"version": "4.0.4",
@@ -1371,6 +1374,7 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/mapbox__mapbox-gl-geocoder/-/mapbox__mapbox-gl-geocoder-5.0.0.tgz",
"integrity": "sha512-eGBWdFiP2QgmwndPyhwK6eBeOfyB8vRscp2C6Acqasx5dH8FvTo/VgXWCrCKFR3zkWek/H4w4/CwmBFOs7OLBA==",
"dev": true,
"dependencies": {
"@types/geojson": "*",
"@types/mapbox-gl": "*"
@@ -1380,6 +1384,7 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.1.0.tgz",
"integrity": "sha512-hI6cQDjw1bkJw7MC/eHMqq5TWUamLwsujnUUeiIX2KDRjxRNSYMjnHz07+LATz9I9XIsKumOtUz4gRYnZOJ/FA==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
@@ -1422,6 +1427,12 @@
"integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
"dev": true
},
"node_modules/@types/sortablejs": {
"version": "1.15.8",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
"integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
"dev": true
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.5.0.tgz",
@@ -4708,6 +4719,11 @@
"sorcery": "bin/sorcery"
}
},
"node_modules/sortablejs": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz",
"integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA=="
},
"node_modules/source-map-js": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",

6
website/package.json
View File

@@ -17,7 +17,10 @@
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0",
"@types/events": "^3.0.3",
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
"@types/mapbox-gl": "^3.1.0",
"@types/node": "^20.12.5",
"@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.19",
@@ -38,13 +41,12 @@
"type": "module",
"dependencies": {
"@mapbox/mapbox-gl-geocoder": "^5.0.2",
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
"@types/mapbox-gl": "^3.1.0",
"bits-ui": "^0.21.3",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"lucide-svelte": "^0.365.0",
"mapbox-gl": "^3.2.0",
"sortablejs": "^1.15.2",
"tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1"
}

18
website/src/lib/components/FileList.svelte
View File

@@ -2,16 +2,28 @@
import { files, selectedFiles, addSelectFile, selectFile } from '$lib/stores';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import Sortable from 'sortablejs';
import { onMount } from 'svelte';
let tabs: HTMLDivElement;
onMount(() => {
Sortable.create(tabs, {
forceAutoScrollFallback: true
});
});
</script>
<div class="absolute h-10 -translate-y-10 w-fit max-w-full bg-secondary rounded-t px-1">
<div class="absolute h-10 -translate-y-10 w-fit max-w-full bg-secondary rounded-t">
<ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2">
<div class="flex flex-row gap-1">
<div bind:this={tabs} class="flex flex-row gap-1">
{#each $files as file}
<button
class="my-1 px-1.5 py-1 rounded {$selectedFiles.has(file)
? 'bg-background shadow'
: 'bg-secondary'}"
: 'bg-secondary'} first:ml-1 last:mr-1"
on:click={(e) => {
if (e.shiftKey) {
addSelectFile(file);