src/components/ReverseLink.svelte

   1 <script>
   2 import { refresh_page } from '../lib/stores.js';
   3 import { SvelteURLSearchParams } from 'svelte/reactivity';
   4
   5 let {
   6   lat = null,
   7   lon = null,
   8   zoom = null,
   9   text,
  10   extra_classes = ''
  11 } = $props();
  12
  13 const params = $derived.by(() => {
  14   let new_params = new SvelteURLSearchParams();
  15
  16   if (lat && lon) {
  17     new_params.set('lat', lat);
  18     new_params.set('lon', lon);
  19
  20     if (zoom) {
  21       new_params.set('zoom', zoom);
  22     }
  23   }
  24
  25   return new_params;
  26 });
  27
  28 const href = $derived.by(() => {
  29   let param_str = params.toString();
  30   return 'reverse.html' + (param_str ? '?' : '') + param_str;
  31 });
  32
  33 function onClick(e) {
  34   e.preventDefault();
  35   e.stopPropagation();
  36   refresh_page('reverse', params);
  37 }
  38
  39 </script>
  40
  41 <a onclick={onClick} href={href} class={extra_classes}>{text}</a>